/* ============================================================
 *  Tema COSF
 * ============================================================
 *  Identidade do site cosf.com.br aplicada ao emissor.
 *
 *  É um arquivo de TEMA, carregado depois de style.css e
 *  app.css: redefine variáveis e, onde o CSS base chumbou uma
 *  cor, sobrescreve a regra. Repintar o CSS base daria o mesmo
 *  resultado hoje e tornaria impossível trazer correção do
 *  sistema original sem refazer a pintura toda vez.
 *
 *  Regra para mexer aqui: cor, tipografia e forma cabem neste
 *  arquivo. Layout e comportamento pertencem ao CSS base — senão
 *  as duas instalações divergem de verdade, não só na aparência.
 *
 *  Paleta lida da própria página em 10/08/2026:
 *    azul marinho  #010B41  barra lateral, títulos, botão
 *    amarelo       #FECF3B  destaque e chamada para ação
 *    Montserrat    600/700  tipografia de interface
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
    /* ── Marca ─────────────────────────────────────────────── */
    --cosf-marinho:       #010B41;
    --cosf-marinho-claro: #0a1a5e;
    --cosf-marinho-fundo: #eaecf5;
    --cosf-amarelo:       #FECF3B;
    --cosf-amarelo-forte: #e6b100;
    --cosf-amarelo-fundo: #fff8e1;

    /* ── Nomes novos (app.css) ─────────────────────────────── */
    --verde:        var(--cosf-marinho);
    --verde-claro:  var(--cosf-marinho-claro);
    --verde-vivo:   var(--cosf-amarelo);
    --azul:         var(--cosf-marinho);
    --tinta-verde:  var(--cosf-marinho-fundo);
    --tinta-azul:   var(--cosf-marinho-fundo);

    --lateral-bg:    var(--cosf-marinho);
    --lateral-texto: #a9b2d6;

    --fonte: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Nomes antigos (style.css) ─────────────────────────── */
    --accent:       var(--cosf-marinho);
    --accent-dark:  #000730;
    --accent-light: var(--cosf-marinho-fundo);
    --font-body:    var(--fonte);
}

/* O modo escuro não copia o site — o site é fundo branco. Aqui o
   marinho seria fundo E destaque ao mesmo tempo, e o botão
   desapareceria dentro da página. O amarelo assume o destaque,
   que é o par natural dele na marca. */
:root[data-tema="dark"] {
    --verde:       var(--cosf-amarelo);
    --verde-claro: #ffdd6b;
    --azul:        #8fa0e8;
    --accent:      var(--cosf-amarelo);
    --tinta-verde: rgba(254, 207, 59, .14);
    --tinta-azul:  rgba(143, 160, 232, .14);
    --lateral-bg:  #050a24;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) {
        --verde:       var(--cosf-amarelo);
        --verde-claro: #ffdd6b;
        --azul:        #8fa0e8;
        --accent:      var(--cosf-amarelo);
        --tinta-verde: rgba(254, 207, 59, .14);
        --tinta-azul:  rgba(143, 160, 232, .14);
        --lateral-bg:  #050a24;
    }
}


/* ── Barra lateral ─────────────────────────────────────────── */

/* O quadrado da marca vinha com gradiente verde chumbado no CSS
   base — variável nenhuma alcança o #128253 do segundo ponto. */
/* "COSF" tem quatro letras onde antes havia duas: no corpo 14px do
   CSS base a palavra estoura os 38px do quadrado. */
.lateral__logo {
    background: linear-gradient(140deg, var(--cosf-amarelo), var(--cosf-amarelo-forte));
    color: var(--cosf-marinho);
    font-size: 11px;
    letter-spacing: 0;
}

.lateral__nome { color: #f4f6fd; }
.lateral__nome small { color: var(--cosf-amarelo); letter-spacing: .12em; }

.lateral__link:hover { background: rgba(255, 255, 255, .09); color: #fff; }

/* Item ativo: mesma ideia do original (faixa lateral + fundo
   esmaecido), trocando o verde pelo amarelo da marca. */
.lateral__link.ativo {
    background: linear-gradient(90deg, rgba(254, 207, 59, .20), rgba(254, 207, 59, .04));
    color: #fff;
    box-shadow: inset 2px 0 0 var(--cosf-amarelo);
}
.lateral__link.ativo .icone { color: var(--cosf-amarelo); }

.lateral__titulo { color: #7f8bb8; }


/* ── Topo do conteúdo ──────────────────────────────────────── */

.topo {
    border-bottom: 2px solid var(--cosf-amarelo);
}

.topo__saudacao {
    font-family: var(--fonte);
    font-weight: 700;
    color: var(--cosf-marinho);
}

:root[data-tema="dark"] .topo__saudacao { color: #eef1fb; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) .topo__saudacao { color: #eef1fb; }
}


/* ── Botões ────────────────────────────────────────────────── */

/* Pílula, como o "QUERO COMEÇAR" do site. */
.btn {
    border-radius: 999px;
    font-family: var(--fonte);
    font-weight: 600;
    letter-spacing: .01em;
}

.btn-primary {
    background: var(--cosf-marinho);
    border-color: var(--cosf-marinho);
    color: #fff;
}
.btn-primary:hover:not(:disabled) {
    background: var(--cosf-marinho-claro);
    border-color: var(--cosf-marinho-claro);
}

/* No escuro o primário é amarelo, e texto branco sobre amarelo
   não se lê — o marinho volta como cor do texto. */
:root[data-tema="dark"] .btn-primary,
:root[data-tema="dark"] .btn-primary:hover:not(:disabled) {
    background: var(--cosf-amarelo);
    border-color: var(--cosf-amarelo);
    color: var(--cosf-marinho);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) .btn-primary,
    :root:not([data-tema="light"]) .btn-primary:hover:not(:disabled) {
        background: var(--cosf-amarelo);
        border-color: var(--cosf-amarelo);
        color: var(--cosf-marinho);
    }
}


/* ── Títulos e cartões ─────────────────────────────────────── */

h1, h2, h3,
.card-header h2,
.form-secao {
    font-family: var(--fonte);
    font-weight: 700;
}

.card-header h2 { color: var(--cosf-marinho); }

/* Fio amarelo no topo do cartão, como as chamadas do site. */
.card-header { border-top: 2px solid var(--cosf-amarelo); }

:root[data-tema="dark"] .card-header h2 { color: #eef1fb; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) .card-header h2 { color: #eef1fb; }
}

.selo--ok, .selo .ponto.ok {
    background: var(--cosf-amarelo);
}


/* ── Marca na tela de login ────────────────────────────────── */

/* Mesmo problema do quadrado da lateral: "COSF" a 18px não cabe
   nos 44px do CSS base. Aqui o fundo fica marinho com a palavra em
   amarelo — é a leitura da marca sobre claro, e o inverso do que a
   lateral faz sobre escuro. */
.auth-header .app-header__icon {
    background: var(--cosf-marinho);
    color: var(--cosf-amarelo);
    font-size: 13px;
    letter-spacing: .06em;
    border-radius: 12px;
}

.auth-header h1 {
    font-family: var(--fonte);
    color: var(--cosf-marinho);
    letter-spacing: .02em;
}

:root[data-tema="dark"] .auth-header h1 { color: #eef1fb; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) .auth-header h1 { color: #eef1fb; }
}


/* ── Marca no lugar do "NF" ────────────────────────────────── */

.cosf-marca__sub {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cosf-amarelo);
}


/* ── Acessibilidade ────────────────────────────────────────── */

/* Foco visível na cor da marca. Repintura não pode levar junto a
   navegação por teclado. */
:focus-visible {
    outline: 3px solid var(--cosf-amarelo);
    outline-offset: 2px;
}