/* ============================================================
   Emissor Fiscal — folha de tema e layout
   ============================================================
   Carregada DEPOIS de style.css, e é essa ordem que faz o
   sistema funcionar.

   O style.css não tem cor escrita à mão: tudo lá dentro é
   var(--alguma-coisa). Então basta redefinir as variáveis aqui
   para as oito telas mudarem de cara de uma vez — e ganharem
   tema escuro — sem reescrever o CSS que já funciona.

   O que este arquivo faz, na ordem:
     1. redefine os tokens (claro e escuro)
     2. desenha o layout de menu lateral
     3. ajusta as classes antigas que precisavam de mais respiro
     4. traz os componentes do painel
   ============================================================ */

/* ── 1. Tokens ───────────────────────────────────────────── */

:root {
    /* --- nomes novos --- */
    --verde:        #1a5e3a;
    --verde-claro:  #2f9e68;
    --verde-vivo:   #34d399;
    --azul:         #2563a0;
    --ambar:        #c27a1a;
    --vermelho:     #b8372b;

    --bg:           #f4f6f7;
    --superficie:   #ffffff;
    --superficie-2: #f9fafb;
    --borda:        #e3e7ea;
    --borda-forte:  #cfd6db;

    --texto:        #0f1519;
    --texto-2:      #5b666f;
    --texto-3:      #8c98a2;

    --tinta-verde:    #e9f5ef;
    --tinta-azul:     #eaf1f9;
    --tinta-ambar:    #fdf5e8;
    --tinta-vermelha: #fdeeec;

    --lateral-bg:     #0e1a14;
    --lateral-texto:  #9fb3a8;

    --raio:      10px;
    --raio-g:    14px;
    --sombra:    0 1px 2px rgba(15, 21, 25, .06), 0 1px 3px rgba(15, 21, 25, .04);
    --sombra-g:  0 4px 16px rgba(15, 21, 25, .08);

    --fonte:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fonte-mono: 'JetBrains Mono', 'Consolas', monospace;

    --lateral-w: 244px;

    /* --- nomes antigos, mantidos porque há CSS inline nos PHPs
           (e no style.css inteiro) apontando para eles --- */
    --surface:     var(--superficie);
    --surface-alt: var(--superficie-2);
    --border:      var(--borda-forte);
    --border-light:var(--borda);
    --text:        var(--texto);
    --text-muted:  var(--texto-2);
    --text-light:  var(--texto-3);
    --accent:      var(--verde);
    --accent-light:var(--tinta-verde);
    --accent-dark: #124a2c;
    --danger:      var(--vermelho);
    --danger-light:var(--tinta-vermelha);
    --warning:     var(--ambar);
    --warning-light:var(--tinta-ambar);
    --info:        var(--azul);
    --info-light:  var(--tinta-azul);
    --radius:      8px;
    --shadow:      var(--sombra);
    --shadow-lg:   var(--sombra-g);
    --font-body:   var(--fonte);
    --font-mono:   var(--fonte-mono);
}

/* Tema escuro — o bloco aparece duas vezes de propósito: uma
   para quem segue o sistema, outra para quem escolheu no botão.
   Media query não entra em lista de seletores, então não dá
   para unir os dois. Quem escolheu "claro" cai no :root acima. */

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) {
        --bg:           #0d1013;
        --superficie:   #151a1e;
        --superficie-2: #1b2126;
        --borda:        #262e34;
        --borda-forte:  #333d45;

        --texto:        #e7edf1;
        --texto-2:      #9aa7b1;
        --texto-3:      #6b7883;

        --verde:        #34d399;
        --verde-claro:  #2f9e68;
        --azul:         #6ba9e8;
        --ambar:        #e0a44a;
        --vermelho:     #e8746a;

        --tinta-verde:    #12271e;
        --tinta-azul:     #14202e;
        --tinta-ambar:    #2a2114;
        --tinta-vermelha: #2c1815;

        --accent-dark:  #6ee7b7;
        --sombra:   0 1px 2px rgba(0, 0, 0, .4);
        --sombra-g: 0 4px 16px rgba(0, 0, 0, .45);

        color-scheme: dark;
    }
}

:root[data-tema="dark"] {
    --bg:           #0d1013;
    --superficie:   #151a1e;
    --superficie-2: #1b2126;
    --borda:        #262e34;
    --borda-forte:  #333d45;

    --texto:        #e7edf1;
    --texto-2:      #9aa7b1;
    --texto-3:      #6b7883;

    --verde:        #34d399;
    --verde-claro:  #2f9e68;
    --azul:         #6ba9e8;
    --ambar:        #e0a44a;
    --vermelho:     #e8746a;

    --tinta-verde:    #12271e;
    --tinta-azul:     #14202e;
    --tinta-ambar:    #2a2114;
    --tinta-vermelha: #2c1815;

    --accent-dark:  #6ee7b7;
    --sombra:   0 1px 2px rgba(0, 0, 0, .4);
    --sombra-g: 0 4px 16px rgba(0, 0, 0, .45);

    color-scheme: dark;
}

body {
    font-family: var(--fonte);
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.icone { width: 20px; height: 20px; flex-shrink: 0; }

/* ── 2. Layout com menu lateral ──────────────────────────── */

.painel {
    display: grid;
    grid-template-columns: var(--lateral-w) minmax(0, 1fr);
    min-height: 100vh;
}

/* A lateral fica escura nos dois temas: é a âncora visual. */
.lateral {
    background: var(--lateral-bg);
    border-right: 1px solid rgba(255, 255, 255, .06);
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.lateral__marca {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 10px 20px;
}

.lateral__logo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(140deg, var(--verde-vivo), #128253);
    color: #04150d;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -.02em;
    flex-shrink: 0;
}

.lateral__nome {
    color: #f2f7f4;
    font-weight: 650;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.lateral__nome small {
    display: block;
    color: #7d9389;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lateral__titulo {
    padding: 14px 12px 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #5e7268;
}

.lateral__link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--lateral-texto);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}
.lateral__link:hover { background: rgba(255, 255, 255, .06); color: #eaf5ef; }

.lateral__link.ativo {
    background: linear-gradient(90deg, rgba(52, 211, 153, .16), rgba(52, 211, 153, .05));
    color: #eafff5;
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--verde-vivo);
}
.lateral__link.ativo .icone { color: var(--verde-vivo); }

.lateral__rodape {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.lateral__sair {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 9px;
    color: #8fa79b;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}
.lateral__sair:hover { background: rgba(232, 116, 106, .14); color: #ffb4ac; }

.conteudo {
    min-width: 0;
    padding: 0 30px 56px;
}

/* As telas antigas continuam com o .app-container por dentro;
   aqui ele deixa de centralizar, porque quem posiciona agora
   é o grid do layout. */
.conteudo .app-container {
    max-width: none;
    margin: 0;
    padding: 0;
}

.topo {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 20px 0 16px;
    margin-bottom: 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--borda);
}

.topo__saudacao {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
}
.topo__empresa {
    font-size: 12.5px;
    color: var(--texto-2);
    margin-top: 3px;
}
.topo__empresa b { font-weight: 600; color: var(--texto); }

.topo__acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 100px;
    border: 1px solid var(--borda);
    background: var(--superficie);
    font-size: 11.5px;
    font-weight: 550;
    color: var(--texto-2);
    white-space: nowrap;
}
.selo b { color: var(--texto); font-weight: 650; }

.ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ponto.ok    { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); }
.ponto.alerta{ background: #eab308; box-shadow: 0 0 0 3px rgba(234, 179, 8, .16); }
.ponto.erro  { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .16); }

.btn-tema {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid var(--borda);
    background: var(--superficie);
    color: var(--texto-2);
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease;
}
.btn-tema:hover { color: var(--texto); border-color: var(--borda-forte); }
.btn-tema .lua  { display: none; }
:root[data-tema="dark"] .btn-tema .sol { display: none; }
:root[data-tema="dark"] .btn-tema .lua { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) .btn-tema .sol { display: none; }
    :root:not([data-tema="light"]) .btn-tema .lua { display: block; }
}

/* ── 3. Ajustes nas classes antigas ──────────────────────── */
/* O style.css já resolve estrutura; aqui só entra o acabamento
   que o visual novo pede: cantos maiores, campos mais altos e
   contraste que sobreviva ao tema escuro. */

.card {
    border-radius: var(--raio-g);
    border-color: var(--borda);
    box-shadow: var(--sombra);
    margin-bottom: 14px;
}
.card-header {
    padding: 15px 17px;
    border-bottom-color: var(--borda);
}
.card-header h2 { font-size: 13.5px; font-weight: 650; }
.card-body { padding: 17px; }

.section-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--texto);
    text-transform: none;
    letter-spacing: .02em;
    margin: 30px 0 13px;
}

input, select, textarea {
    padding: 10px 12px;
    border-radius: 8px;
    border-color: var(--borda-forte);
    background: var(--superficie);
    color: var(--texto);
}
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:focus, select:focus, textarea:focus {
    border-color: var(--verde);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 18%, transparent);
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--superficie-2);
    color: var(--texto-3);
}

.form-group label { font-size: 12px; font-weight: 550; color: var(--texto-2); }

.btn {
    border-radius: 9px;
    padding: 10px 18px;
    font-weight: 600;
}
.btn-primary {
    background: var(--verde);
    border-color: transparent;
    color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--verde-claro); }
.btn-secondary {
    background: var(--superficie);
    border-color: var(--borda-forte);
    color: var(--texto);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--superficie-2);
    border-color: var(--texto-3);
}
.btn-sm { padding: 7px 12px; border-radius: 8px; }

/* No escuro o verde vira claro, então texto branco no botão
   sumiria — aqui a letra escurece junto com o fundo. */
:root[data-tema="dark"] .btn-primary { color: #06231a; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) .btn-primary { color: #06231a; }
}

.tabs {
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 4px;
}
.tab-btn { border-radius: 7px; }
.tab-btn.active {
    background: var(--superficie);
    color: var(--verde);
}

.alert {
    border-radius: var(--raio);
    padding: 13px 15px;
}
.alert-success { background: var(--tinta-verde);    color: var(--verde);    border-color: transparent; }
.alert-error   { background: var(--tinta-vermelha); color: var(--vermelho); border-color: transparent; }
.alert-warning { background: var(--tinta-ambar);    color: var(--ambar);    border-color: transparent; }
.alert-info    { background: var(--tinta-azul);     color: var(--azul);     border-color: transparent; }

.status-bar {
    border-radius: var(--raio);
    border-color: var(--borda);
    background: var(--superficie);
}

.calc-box {
    background: var(--superficie-2);
    border-color: var(--borda);
    border-radius: var(--raio);
}

.busca-bar { background: var(--superficie-2); border-bottom-color: var(--borda); }
.busca-bar input { border-radius: 8px; }

.autocomplete__lista { border-radius: var(--raio); border-color: var(--borda-forte); }
.autocomplete__item { border-bottom-color: var(--borda); }
.autocomplete__item:hover,
.autocomplete__item.ativo { background: var(--tinta-verde); }

.registro { border-bottom-color: var(--borda); }
.registro:hover { background: var(--superficie-2); }
.registro__avatar { background: var(--tinta-verde); color: var(--verde); }

.resultado-item { border-bottom-color: var(--borda); }
a.resultado-item:hover { background: var(--superficie-2); }

.form-secao { color: var(--texto-3); }
.form-secao::after { background: var(--borda); }

/* O XML fica em fundo escuro sempre; no tema claro ele
   precisava de uma borda para não flutuar na página. */
.xml-preview {
    border-radius: var(--raio);
    border: 1px solid var(--borda);
}

/* ── 4. Componentes do painel ────────────────────────────── */

.secao {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 30px 0 13px;
}
.secao:first-of-type { margin-top: 0; }
.secao h2 {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .02em;
    color: var(--texto);
}
.secao small { font-size: 12px; color: var(--texto-3); }

.pendencias {
    display: grid;
    gap: 9px;
    margin-bottom: 26px;
}

.pendencia {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    background: var(--superficie);
    box-shadow: var(--sombra);
}
.pendencia__marca {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.pendencia.perigo .pendencia__marca { background: var(--tinta-vermelha); color: var(--vermelho); }
.pendencia.aviso  .pendencia__marca { background: var(--tinta-ambar);    color: var(--ambar); }
.pendencia.perigo { border-left: 3px solid var(--vermelho); }
.pendencia.aviso  { border-left: 3px solid var(--ambar); }

.pendencia__texto { flex: 1; min-width: 0; }
.pendencia__texto strong { display: block; font-size: 13.5px; font-weight: 650; }
.pendencia__texto p { font-size: 12.5px; color: var(--texto-2); margin-top: 2px; }

.pendencia__acao {
    align-self: center;
    padding: 7px 13px;
    border-radius: 8px;
    background: var(--superficie-2);
    border: 1px solid var(--borda-forte);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    transition: background .14s ease, border-color .14s ease;
}
.pendencia__acao:hover { background: var(--tinta-verde); border-color: var(--verde); color: var(--verde); }

.cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 13px;
}

.cartao {
    position: relative;
    display: block;
    padding: 17px;
    border-radius: var(--raio-g);
    border: 1px solid var(--borda);
    background: var(--superficie);
    box-shadow: var(--sombra);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.cartao:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-g);
    border-color: var(--borda-forte);
}

.cartao__topo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
}

.cartao__icone {
    width: 33px;
    height: 33px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.cartao__icone .icone { width: 17px; height: 17px; }

.cartao.verde    .cartao__icone { background: var(--tinta-verde);    color: var(--verde); }
.cartao.azul     .cartao__icone { background: var(--tinta-azul);     color: var(--azul); }
.cartao.ambar    .cartao__icone { background: var(--tinta-ambar);    color: var(--ambar); }
.cartao.vermelho .cartao__icone { background: var(--tinta-vermelha); color: var(--vermelho); }

.cartao__rotulo {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texto-3);
}

.cartao__numero {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.cartao__numero.moeda { font-size: 22px; }

.cartao__linha {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    font-size: 12.5px;
    color: var(--texto-2);
    font-variant-numeric: tabular-nums;
}
.cartao__linha + .cartao__linha { margin-top: 3px; }

.pilula {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 650;
    background: var(--superficie-2);
    color: var(--texto-2);
    border: 1px solid var(--borda);
}
.pilula.positiva { background: var(--tinta-verde);    color: var(--verde);    border-color: transparent; }
.pilula.atencao  { background: var(--tinta-ambar);    color: var(--ambar);    border-color: transparent; }
.pilula.negativa { background: var(--tinta-vermelha); color: var(--vermelho); border-color: transparent; }

.colunas {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 13px;
    align-items: start;
}

.bloco {
    border-radius: var(--raio-g);
    border: 1px solid var(--borda);
    background: var(--superficie);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.bloco__cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--borda);
}
.bloco__cabeca h3 { font-size: 13.5px; font-weight: 650; }
.bloco__cabeca a  { font-size: 12.5px; font-weight: 600; color: var(--verde); text-decoration: none; }
.bloco__corpo { padding: 17px; }

.grafico {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 12px;
    align-items: end;
    height: 190px;
    padding-left: 34px;
}

/* O recorte da grade acompanha a área útil: 22px do valor no
   topo e 22px do rótulo embaixo, gaps incluídos. */
.grafico__grade {
    position: absolute;
    inset: 22px 0 22px 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.grafico__grade span {
    position: relative;
    border-top: 1px dashed var(--borda);
}
.grafico__grade span::after {
    content: attr(data-valor);
    position: absolute;
    left: -34px;
    top: -7px;
    width: 28px;
    text-align: right;
    font-size: 10.5px;
    color: var(--texto-3);
    font-variant-numeric: tabular-nums;
}

.grafico__mes {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    height: 100%;
}

/* A pilha mede em % desta área, não do mês inteiro — senão o
   rótulo e o valor entrariam na conta e a barra estouraria. */
.grafico__area {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 0;
}

.grafico__pilha {
    width: 100%;
    max-width: 46px;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 7px 7px 0 0;
    overflow: hidden;
    transition: opacity .14s ease;
}
.grafico__mes:hover .grafico__pilha { opacity: .82; }

.grafico__barra { width: 100%; min-height: 3px; }
.grafico__barra.nfse { background: linear-gradient(180deg, var(--verde-claro), var(--verde)); }
.grafico__barra.nfe  { background: linear-gradient(180deg, #4d8cc9, var(--azul)); }
.grafico__barra.nfce { background: linear-gradient(180deg, #dda44f, var(--ambar)); }

.grafico__valor {
    font-size: 11.5px;
    font-weight: 650;
    color: var(--texto-2);
    font-variant-numeric: tabular-nums;
    min-height: 15px;
}
.grafico__rotulo {
    font-size: 11.5px;
    color: var(--texto-3);
    text-transform: capitalize;
    height: 15px;
}

.legenda {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid var(--borda);
    font-size: 12px;
    color: var(--texto-2);
}
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 9px; height: 9px; border-radius: 3px; }
.legenda i.nfse { background: var(--verde); }
.legenda i.nfe  { background: var(--azul); }
.legenda i.nfce { background: var(--ambar); }

.emissao {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 17px;
    border-bottom: 1px solid var(--borda);
    text-decoration: none;
    color: inherit;
    transition: background .13s ease;
}
.emissao:last-child { border-bottom: none; }
.emissao:hover { background: var(--superficie-2); }

.emissao__tipo {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    flex-shrink: 0;
    width: 52px;
    text-align: center;
}
.emissao__tipo.nfse { background: var(--tinta-verde);  color: var(--verde); }
.emissao__tipo.nfe  { background: var(--tinta-azul);   color: var(--azul); }
.emissao__tipo.nfce { background: var(--tinta-ambar);  color: var(--ambar); }

.emissao__info { flex: 1; min-width: 0; }
.emissao__nome {
    font-size: 13px;
    font-weight: 550;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.emissao__meta {
    font-size: 11.5px;
    color: var(--texto-3);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

.emissao__valor {
    font-family: var(--fonte-mono);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.estado {
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 650;
    text-transform: capitalize;
    flex-shrink: 0;
    width: 82px;
    text-align: center;
}
.estado.emitida, .estado.autorizada { background: var(--tinta-verde);    color: var(--verde); }
.estado.cancelada                   { background: var(--superficie-2);   color: var(--texto-2); }
.estado.erro, .estado.rejeitada     { background: var(--tinta-vermelha); color: var(--vermelho); }
.estado.rascunho                    { background: var(--tinta-ambar);    color: var(--ambar); }

.vazio__icone {
    width: 42px;
    height: 42px;
    margin: 0 auto 11px;
    border-radius: 12px;
    background: var(--superficie-2);
    color: var(--texto-3);
    display: grid;
    place-items: center;
}

.atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 11px;
}

.atalho {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    background: var(--superficie);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.atalho:hover {
    border-color: var(--verde);
    background: var(--tinta-verde);
    transform: translateY(-1px);
}

.atalho__icone {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--tinta-verde);
    color: var(--verde);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .15s ease;
}
.atalho:hover .atalho__icone { background: var(--superficie); }

.atalho strong { display: block; font-size: 13px; font-weight: 600; }
.atalho small  { display: block; font-size: 11.5px; color: var(--texto-2); margin-top: 1px; }

/* ── 5. Responsivo ───────────────────────────────────────── */

@media (max-width: 1080px) {
    .colunas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .painel { grid-template-columns: minmax(0, 1fr); }

    /* A lateral vira uma faixa rolável no topo. */
    .lateral {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        padding: 10px 14px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
    .lateral__marca  { padding: 0 10px 0 0; }
    .lateral__nome   { display: none; }
    .lateral__titulo { display: none; }
    .lateral__link span, .lateral__sair span { display: none; }
    .lateral__link, .lateral__sair { padding: 9px; }
    .lateral__link.ativo { box-shadow: inset 0 -2px 0 var(--verde-vivo); }
    .lateral__rodape { margin-top: 0; padding-top: 0; border-top: none; margin-left: auto; }

    .conteudo { padding: 0 16px 40px; }
    .topo { position: static; }
    .topo__saudacao { font-size: 19px; }
    .grafico { height: 160px; }
}

@media (max-width: 520px) {
    .cartoes { grid-template-columns: minmax(0, 1fr); }
    .emissao__valor, .estado { width: auto; }
    .emissao { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    a.cartao:hover, .atalho:hover { transform: none; }
}