/* ===========================================================================
   NotarioFlow — sistema visual da aplicacao (sobre brand/tokens.css)
   Papel + tinta com fluxo digital. Acento = fluxo/IA/acoes. Ouro = selo/fe publica.

   REGRA: nao escrever cor literal aqui. A cor de acento varia por skin (ver
   brand/tokens.css), entao qualquer hex cravado neste arquivo passa a mentir assim
   que o usuario troca de skin. Use var(--nf-*); para versoes translucidas do acento,
   use color-mix() com uma cor solida declarada antes como fallback.
   =========================================================================== */

html, body {
    margin: 0;
    background: var(--nf-paper);
    color: var(--nf-ink);
    font-family: var(--nf-font-sans);
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* Atras de todo o conteudo. NAO usar `body > * { z-index: 1 }` para subir o conteudo:
       isso aprisiona os popovers do MudBlazor (z-index ~1200) num contexto de empilhamento de
       nivel 1 e eles ficam ATRAS dos cards/tabelas. Mantendo o fundo em z-index negativo, o
       conteudo fica naturalmente acima dele e os popovers voltam a flutuar por cima. */
    z-index: -1;
    background:
        radial-gradient(900px 500px at 100% -10%,
            color-mix(in srgb, var(--nf-accent) 6%, transparent), transparent 60%),
        radial-gradient(700px 500px at -10% 110%,
            color-mix(in srgb, var(--nf-gold) 5%, transparent), transparent 60%);
}

::selection { background: var(--nf-accent); color: #fff; }

.nf-mono, .nf-mono * {
    font-family: var(--nf-font-mono) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   APP BAR + marca
   -------------------------------------------------------------------------- */
/* A barra e escura em TODAS as skins (a cor da skin fica no acento, nao na moldura).
   Por isso o texto e a marca aqui usam branco/cinza-claro fixos em vez de var(--nf-ink):
   a tinta muda de claro para escuro entre os modos e inverteria a barra junto. */
.nf-appbar {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--nf-gold) 35%, transparent) !important;
}
.nf-brand { display: flex; align-items: center; gap: .6rem; margin-left: .25rem; }
.nf-brand-mark { width: 30px; height: 30px; color: var(--nf-shell-ink); }
/* Tracking: Tahoma ja e compacta. Os valores negativos aqui eram para apertar a Schibsted
   Grotesk; mantidos como estavam, as letras do wordmark encostam. */
.nf-brand-word {
    font-family: var(--nf-font-display);
    font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; color: var(--nf-shell-ink);
}
/* Barra escura -> acento claro; barra colorida -> branco translucido (ver --nf-shell-accent). */
.nf-flow { color: var(--nf-shell-accent); }
.nf-user {
    font-size: .82rem; color: var(--nf-shell-muted); margin-right: .75rem;
    font-variant: small-caps; letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   DRAWER
   -------------------------------------------------------------------------- */
.nf-drawer { border-right: 1px solid var(--nf-line) !important; }
.nf-drawer-foot {
    margin-top: auto; padding: 1rem 1.25rem;
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--nf-muted); display: flex; align-items: center; gap: .5rem;
    border-top: 1px solid var(--nf-line);
}
.nf-seal-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--nf-gold); box-shadow: 0 0 0 3px var(--nf-gold-soft);
}
.mud-nav-link.active {
    border-left: 3px solid var(--nf-accent) !important;
    background: var(--nf-accent-soft) !important;
}
.mud-nav-group .mud-nav-link { font-size: .86rem; }

/* --------------------------------------------------------------------------
   LOGIN — cartao de duas faces (tinta + papel), centralizado
   -------------------------------------------------------------------------- */
.nf-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    box-sizing: border-box;
}
.nf-login * { box-sizing: border-box; }

.nf-auth {
    width: min(920px, 100%);
    display: flex;
    min-height: 540px;
    background: var(--nf-surface);
    border: 1px solid var(--nf-line);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(29, 27, 44, .22);
    overflow: hidden;
    animation: nf-rise .55s ease both;
}

/* face escura da marca. Usa --nf-shell (nao --nf-ink): a tinta inverte no modo escuro
   e deixaria esta face clara com o texto claro por cima. */
.nf-auth-brand {
    flex: 0 0 45%;
    position: relative;
    overflow: hidden;
    background: var(--nf-shell);
    color: var(--nf-shell-ink);
    padding: 3rem 2.6rem;
    display: flex;
    flex-direction: column;
}
.nf-auth-brand::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(620px 420px at 12% 0%,
        color-mix(in srgb, var(--nf-accent) 42%, transparent), transparent 62%);
    pointer-events: none;
}
.nf-auth-brandtop { position: relative; z-index: 1; }
.nf-auth-mark { width: 50px; height: 50px; color: var(--nf-shell-ink); }
.nf-auth-word {
    font-family: var(--nf-font-display);
    font-weight: 700; font-size: 2.4rem; letter-spacing: -.01em;
    margin: 1rem 0 0;
}
.nf-auth-word:focus, .nf-auth-word:focus-visible { outline: none; }
.nf-auth-tag {
    color: var(--nf-shell-muted); max-width: 28ch; line-height: 1.6; font-size: .98rem; margin: .8rem 0 0;
}
.nf-auth-seal {
    position: absolute; right: -54px; bottom: -54px;
    width: 240px; height: 240px; opacity: .92; z-index: 1;
}
.nf-seal-spin { transform-origin: 100px 100px; animation: nf-spin 38s linear infinite; }

/* face branca (formulario) */
.nf-auth-form {
    flex: 1; min-width: 0;
    background: var(--nf-surface);
    padding: 2.6rem 2.8rem;
    display: flex; flex-direction: column; justify-content: center;
}
.nf-login-eyebrow {
    margin: 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--nf-gold); font-weight: 700;
}
.nf-login-title {
    font-family: var(--nf-font-display);
    font-weight: 700; font-size: 2rem; letter-spacing: normal; margin: .25rem 0 1.3rem;
}
/* Erro nao segue a skin: vermelho de falha e semantica, e no modo escuro o fundo
   claro fixo cegaria. Derivado de --nf-err, que ja existe nos dois modos. */
.nf-login-erro {
    background: color-mix(in srgb, var(--nf-err) 12%, var(--nf-surface));
    color: var(--nf-err);
    border: 1px solid color-mix(in srgb, var(--nf-err) 35%, transparent);
    border-radius: var(--nf-radius-xs);
    padding: .6rem .8rem; font-size: .82rem; margin-bottom: 1rem;
}
.nf-field-label {
    display: block; font-size: .76rem; font-weight: 700;
    color: var(--nf-muted); margin: .85rem 0 .35rem; letter-spacing: .01em;
}
.nf-field {
    width: 100%; padding: .7rem .85rem;
    border: 1px solid var(--nf-line); border-radius: var(--nf-radius-sm);
    background: var(--nf-paper);
    font-family: var(--nf-font-sans); font-size: 1rem; color: var(--nf-ink);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.nf-field-mono { font-family: var(--nf-font-mono); letter-spacing: .02em; }
.nf-field::placeholder { color: var(--nf-400); }
.nf-field:focus {
    outline: none; border-color: var(--nf-accent); background: var(--nf-surface);
    box-shadow: 0 0 0 3px var(--nf-accent-soft);
}
.nf-field-hint { margin: .35rem 0 0; font-size: .72rem; color: var(--nf-muted); }
.nf-login-btn {
    width: 100%; margin-top: 1.4rem;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem; border: 0; cursor: pointer; border-radius: var(--nf-radius-sm);
    background: var(--nf-accent); color: #fff;
    font-family: var(--nf-font-sans); font-weight: 700; font-size: 1rem;
    transition: transform .08s ease, background .15s, box-shadow .2s;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--nf-accent) 28%, transparent);
}
/* Escurece o proprio acento no hover, em vez de cravar um tom: com skin variavel,
   um hex fixo aqui daria botao indigo no hover de uma skin verde. */
.nf-login-btn:hover { background: color-mix(in srgb, var(--nf-accent) 85%, #000); }
.nf-login-btn:active { transform: translateY(1px); }
.nf-login-btn svg { transition: transform .2s ease; }
.nf-login-btn:hover svg { transform: translateX(3px); }
.nf-login-foot {
    margin-top: 1.4rem; font-size: .74rem; letter-spacing: .04em;
    color: var(--nf-muted); font-family: var(--nf-font-mono);
}

/* responsivo: empilha, marca vira faixa superior compacta */
@media (max-width: 760px) {
    .nf-auth { flex-direction: column; min-height: 0; }
    .nf-auth-brand { flex: none; padding: 1.6rem 1.8rem; }
    .nf-auth-tag { display: none; }
    .nf-auth-seal { width: 150px; height: 150px; right: -40px; bottom: -40px; }
    .nf-auth-form { padding: 1.8rem; }
}

/* --------------------------------------------------------------------------
   POLIMENTO DE COMPONENTES
   -------------------------------------------------------------------------- */
.mud-paper { border: 1px solid var(--nf-line); }
.mud-table-container { border-radius: var(--nf-radius); }
.mud-table-root thead th {
    text-transform: uppercase; letter-spacing: .06em;
    font-size: .68rem !important; font-weight: 700 !important; color: var(--nf-muted) !important;
}

/* --------------------------------------------------------------------------
   PAGINA "EM BREVE"
   -------------------------------------------------------------------------- */
.nf-soon { max-width: 560px; margin: 4vh auto 0; text-align: center; animation: nf-rise .5s ease both; }
.nf-soon-seal {
    width: 92px; height: 92px; margin: 0 auto 1.4rem;
    display: grid; place-items: center; border-radius: 50%;
    color: var(--nf-gold); background: var(--nf-gold-soft);
    border: 2px solid var(--nf-gold);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--nf-gold) 8%, transparent);
}
.nf-soon-eyebrow {
    margin: 0 0 .25rem; font-size: .72rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--nf-gold); font-weight: 700;
}
.nf-soon-desc { color: var(--nf-muted); max-width: 46ch; margin: 0 auto; }

/* --------------------------------------------------------------------------
   GUIA DE EMOLUMENTOS (imprimivel)
   -------------------------------------------------------------------------- */
.guia { min-height: 100vh; padding: 24px; display: flex; flex-direction: column; align-items: center; }
.guia-print-btn {
    align-self: flex-end; margin-bottom: 14px; cursor: pointer;
    border: 0; border-radius: var(--nf-radius-sm); padding: .6rem 1.1rem;
    background: var(--nf-accent); color: #fff; font-family: var(--nf-font-sans); font-weight: 700;
}
.guia-doc {
    width: 100%; max-width: 720px; background: #fff;
    border: 1px solid var(--nf-line); border-radius: 14px; box-shadow: var(--nf-shadow);
    padding: 40px 48px; color: var(--nf-ink);
}
.guia-head { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--nf-gold); padding-bottom: 16px; }
/* Quadrado escuro do cabecalho da guia. O BrandMark vai dentro SEM caixa propria — este
   elemento ja e a caixa — e herda o branco via currentColor. */
.guia-mark {
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--nf-shell); color: var(--nf-shell-ink);
    display: grid; place-items: center;
}
.guia-mark svg { width: 26px; height: 26px; }
.guia-serventia { font-family: var(--nf-font-display); font-weight: 700; font-size: 1.15rem; }
.guia-cns { color: var(--nf-muted); font-size: .8rem; font-family: var(--nf-font-mono); }
.guia-titulo { font-family: var(--nf-font-display); font-weight: 700; font-size: 1.5rem; margin: 22px 0 16px; }
.guia-titulo:focus, .guia-titulo:focus-visible { outline: none; }
.guia-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-bottom: 22px; }
.guia-meta > div { display: flex; flex-direction: column; }
.guia-meta span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--nf-muted); }
.guia-tabela { width: 100%; border-collapse: collapse; }
.guia-tabela th, .guia-tabela td { padding: 9px 6px; border-bottom: 1px solid var(--nf-line); font-size: .92rem; }
.guia-tabela thead th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nf-muted); }
.guia-tabela .r { text-align: right; }
.guia-tabela tfoot td { border-bottom: 0; border-top: 2px solid var(--nf-ink); padding-top: 12px; font-size: 1.05rem; }
.guia-vazio { color: var(--nf-muted); text-align: center; padding: 16px; }
.guia-rodape { margin-top: 26px; font-size: .72rem; color: var(--nf-muted); line-height: 1.5; }
@media print {
    body::before { display: none; }
    .guia { padding: 0; }
    .guia-print-btn { display: none; }
    .guia-doc { border: 0; box-shadow: none; border-radius: 0; max-width: none; padding: 0; }
}

/* --------------------------------------------------------------------------
   ANIMACOES
   -------------------------------------------------------------------------- */
@keyframes nf-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .nf-seal-spin, .nf-auth { animation: none !important; }
}