/* =====================================================================
   AGRO ELSNER — PADRÃO VISUAL DO SISTEMA (v2)
   ---------------------------------------------------------------------
   Este arquivo é a fonte única do visual. Nenhuma página deve redefinir
   cor, sombra, raio, largura ou botão por conta própria: use as classes
   e as variáveis daqui.

   Regra de ouro do lugar das coisas (definida pelo dono do sistema):
     - o cabeçalho azul leva SOMENTE "BUSCAR" e "VOLTAR";
     - toda outra ação da tela vai na barra .ae-acoes, centralizada,
       logo abaixo do cabeçalho.

   Carregar SEMPRE depois do global.css.
   ===================================================================== */

:root {
    /* --- Paleta: 10 cores, nada além disto --- */
    --ae-petrol:      #13547a;   /* principal */
    --ae-petrol-esc:  #0d3d5c;
    --ae-teal:        #80d0c7;   /* destaque */
    --ae-teal-claro:  #b8e6e0;   /* acento suave dos cards de menu */
    --ae-verde:       #11998e;   /* sucesso / confirmação */
    --ae-ambar:       #e67e22;   /* atenção / pendente */
    --ae-vermelho:    #c0392b;   /* perigo / exclusão */
    --ae-texto:       #2c3e50;
    --ae-texto2:      #6b7c85;   /* secundário */
    --ae-linha:       #e9eef1;
    --ae-fundo:       #f0f2f5;
    --ae-card:        #ffffff;

    /* --- Gradientes (só dois) --- */
    --ae-grad:        linear-gradient(135deg, #13547a 0%, #80d0c7 100%);
    --ae-grad-perigo: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%);

    /* --- Sombras (só três) --- */
    --ae-sombra:      0 10px 30px rgba(0,0,0,.05);
    --ae-sombra-alta: 0 15px 40px rgba(0,0,0,.10);
    --ae-sombra-baixa:0 4px 14px rgba(0,0,0,.06);

    /* --- Raios --- */
    --ae-raio:        16px;   /* card */
    --ae-raio-campo:  12px;   /* input, select */
    --ae-raio-pill:   50px;   /* botão */

    /* --- Medidas --- */
    --ae-larg:        1400px; /* largura padrão da página */
    --ae-larg-form:   1000px; /* tela de formulário único */
    --ae-sobrepoe:    -100px; /* quanto o conteúdo sobe sobre o cabeçalho */
    --ae-gutter:      20px;

    /* --- Tipografia --- */
    --ae-fonte:       'Montserrat', sans-serif;
    --ae-fs-min:      .75rem;  /* 12px — nunca menor que isto */
    --ae-fs-peq:      .80rem;
    --ae-fs-txt:      .88rem;
    --ae-fs-med:      1rem;
    --ae-fs-tit:      1.30rem;
    --ae-fs-gde:      1.80rem;

    --ae-transicao:   all .25s ease;
}

/* =====================================================================
   1. ESTRUTURA DA PÁGINA
   ===================================================================== */

/* Container padrão: usado por toda tela do sistema. */
.ae-container {
    max-width: var(--ae-larg);
    margin: var(--ae-sobrepoe) auto 50px;
    padding: 0 var(--ae-gutter);
    position: relative;
    z-index: 2;
}
/* Tela de formulário único / texto corrido fica mais estreita: uma linha de
   1360px de largura é cansativa de ler. Vale para os dois nomes de container. */
.ae-container.ae-estreito,
.main-container.ae-estreito { max-width: var(--ae-larg-form); }
/* Tela de mapa ocupa tudo. */
.ae-container.ae-largo   { max-width: none; }

/* =====================================================================
   2. BARRA DE AÇÕES — logo abaixo do cabeçalho, centralizada
   É aqui que entram NOVO, ADICIONAR, IMPRIMIR, EXPORTAR, MAPA, etc.
   ===================================================================== */

.ae-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;   /* centralizado, conforme definido */
    gap: 10px;
    margin: 0 0 22px;
}
.ae-acoes.ae-acoes-esq { justify-content: flex-start; }

/* =====================================================================
   3. BOTÕES — 5 tipos x 3 tamanhos. Substitui 251 classes soltas.
   ===================================================================== */

.ae-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;                    /* tamanho M — o padrão */
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--ae-raio-pill);
    font-family: var(--ae-fonte);
    font-size: var(--ae-fs-peq);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--ae-transicao);
}
.ae-btn:hover      { transform: translateY(-1px); text-decoration: none; }
.ae-btn:active     { transform: translateY(0); }
.ae-btn:disabled,
.ae-btn.ae-off     { opacity: .5; cursor: not-allowed; transform: none; }
.ae-btn i          { font-size: .95em; }

/* --- Tamanhos --- */
.ae-btn-p { height: 32px; padding: 0 14px; font-size: var(--ae-fs-min); }
.ae-btn-g { height: 46px; padding: 0 26px; font-size: var(--ae-fs-txt); }

/* --- Tipo 1: primário (ação principal da tela) --- */
.ae-btn-primario {
    background: var(--ae-grad);
    color: #fff;
    box-shadow: 0 4px 14px rgba(19,84,122,.22);
}
.ae-btn-primario:hover { color: #fff; box-shadow: 0 6px 20px rgba(19,84,122,.32); }

/* --- Tipo 2: secundário (apoio: filtrar, cancelar, exportar) --- */
.ae-btn-secundario {
    background: #fff;
    color: var(--ae-petrol);
    border-color: var(--ae-linha);
    box-shadow: var(--ae-sombra-baixa);
}
.ae-btn-secundario:hover { color: var(--ae-petrol); border-color: var(--ae-teal); }

/* --- Tipo 3: perigo (excluir, recusar) --- */
.ae-btn-perigo {
    background: var(--ae-grad-perigo);
    color: #fff;
    box-shadow: 0 4px 14px rgba(192,57,43,.22);
}
.ae-btn-perigo:hover { color: #fff; }

/* --- Tipo 4: fantasma (dentro de linha de tabela) --- */
.ae-btn-fantasma {
    background: transparent;
    color: var(--ae-texto2);
    border-color: transparent;
    box-shadow: none;
}
.ae-btn-fantasma:hover { background: var(--ae-fundo); color: var(--ae-petrol); }

/* --- Tipo 5: ícone redondo (listas). Cresce para 42px no celular. --- */
.ae-btn-icone {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--ae-fundo);
    color: var(--ae-petrol);
    font-size: .9rem;
}
.ae-btn-icone:hover           { background: var(--ae-petrol); color: #fff; }
.ae-btn-icone.ae-icone-perigo:hover { background: var(--ae-vermelho); color: #fff; }
.ae-btn-icone.ae-icone-ok:hover     { background: var(--ae-verde);    color: #fff; }

/* Variantes de cor sólida, quando a ação precisa de leitura imediata. */
.ae-btn-verde   { background: var(--ae-verde);    color: #fff; }
.ae-btn-ambar   { background: var(--ae-ambar);    color: #fff; }
.ae-btn-verde:hover, .ae-btn-ambar:hover { color: #fff; }

/* =====================================================================
   4. CARDS
   ===================================================================== */

.ae-card {
    background: var(--ae-card);
    border-radius: var(--ae-raio);
    padding: 24px;
    box-shadow: var(--ae-sombra);
    margin-bottom: 20px;
}
.ae-card-titulo {
    font-size: var(--ae-fs-txt);
    font-weight: 800;
    color: var(--ae-petrol);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Card de indicador (KPI) */
.ae-kpi {
    background: var(--ae-card);
    border-radius: var(--ae-raio);
    padding: 18px 20px;
    box-shadow: var(--ae-sombra);
    text-align: center;
}
.ae-kpi-valor { font-size: var(--ae-fs-gde); font-weight: 800; color: var(--ae-petrol); line-height: 1.1; }
.ae-kpi-rotulo{ font-size: var(--ae-fs-min); font-weight: 700; color: var(--ae-texto2);
                text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

/* =====================================================================
   5. TABELAS — no celular cada linha vira um cartão
   ===================================================================== */

.ae-tabela { width: 100%; border-collapse: collapse; font-size: var(--ae-fs-peq); }
.ae-tabela th {
    text-align: left;
    font-size: var(--ae-fs-min);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ae-texto2);
    padding: 10px 12px;
    border-bottom: 2px solid var(--ae-linha);
    white-space: nowrap;
}
.ae-tabela td {
    padding: 12px;
    border-bottom: 1px solid var(--ae-linha);
    vertical-align: middle;
    color: var(--ae-texto);
}
.ae-tabela tbody tr:hover { background: #fafbfc; }
.ae-tabela .ae-num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
    .ae-tabela, .ae-tabela thead, .ae-tabela tbody,
    .ae-tabela th, .ae-tabela td, .ae-tabela tr,
    .ae-tabela-cartao, .ae-tabela-cartao thead, .ae-tabela-cartao tbody,
    .ae-tabela-cartao th, .ae-tabela-cartao td, .ae-tabela-cartao tr { display: block; }
    .ae-tabela thead, .ae-tabela-cartao thead { position: absolute; left: -9999px; }
    .ae-tabela-cartao {
        width: 100%;
        border-collapse: collapse;
    }
    .ae-tabela-cartao tr {
        background: var(--ae-card);
        border-radius: var(--ae-raio);
        box-shadow: var(--ae-sombra-baixa);
        margin-bottom: 12px;
        padding: 6px 4px;
        border: none;
    }
    .ae-tabela-cartao td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        border: none;
        border-bottom: 1px solid var(--ae-linha);
        padding: 9px 14px;
        text-align: right;
        font-size: var(--ae-fs-min);
        width: auto !important;
        white-space: normal;
    }
    .ae-tabela-cartao tr td:last-child { border-bottom: none; }
    /* Conteúdo largo (nome + etiqueta + ícone) quebra em vez de vazar do cartão. */
    .ae-tabela-cartao td { flex-wrap: wrap; overflow: hidden; }
    .ae-tabela-cartao td > * { max-width: 100%; }
    /* Coluna sem título no cabeçalho (caixa de seleção, ícone) não ganha rótulo. */
    .ae-tabela-cartao td:not([data-rotulo]) { justify-content: flex-end; }
    .ae-tabela-cartao td[data-rotulo]::before {
        content: attr(data-rotulo);
        font-size: var(--ae-fs-min);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--ae-texto2);
        text-align: left;
        flex: 0 0 40%;
    }
    /* célula vazia não merece uma linha inteira no cartão */
    .ae-tabela-cartao td:empty { display: none; }
    .ae-tabela tr {
        background: var(--ae-card);
        border-radius: var(--ae-raio);
        box-shadow: var(--ae-sombra-baixa);
        margin-bottom: 12px;
        padding: 6px 4px;
    }
    .ae-tabela td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        border: none;
        border-bottom: 1px solid var(--ae-linha);
        padding: 9px 14px;
        text-align: right;
    }
    .ae-tabela tr td:last-child { border-bottom: none; }
    /* O rótulo da coluna vem do atributo data-rotulo do <td>. */
    .ae-tabela td::before {
        content: attr(data-rotulo);
        font-size: var(--ae-fs-min);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--ae-texto2);
        text-align: left;
        flex: 0 0 42%;
    }
    .ae-tabela td:not([data-rotulo])::before { content: ''; flex: 0; }
    .ae-tabela .ae-num { text-align: right; }
}

/* =====================================================================
   6. FORMULÁRIOS
   ===================================================================== */

.ae-rotulo {
    display: block;
    font-size: var(--ae-fs-min);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ae-texto2);
    margin-bottom: 6px;
}
.ae-campo {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--ae-linha);
    border-radius: var(--ae-raio-campo);
    font-family: var(--ae-fonte);
    font-size: var(--ae-fs-txt);
    color: var(--ae-texto);
    background: #fff;
    transition: var(--ae-transicao);
}
textarea.ae-campo { height: auto; padding: 12px 14px; min-height: 90px; }
.ae-campo:focus {
    outline: none;
    border-color: var(--ae-teal);
    box-shadow: 0 0 0 3px rgba(128,208,199,.25);
}
/* Rodapé de formulário: Cancelar e depois Salvar, sempre à direita. */
.ae-form-rodape {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ae-linha);
}

/* =====================================================================
   7. AVISOS E ETIQUETAS
   ===================================================================== */

.ae-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--ae-raio-pill);
    font-size: var(--ae-fs-min);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ae-chip-ok      { background: #e8f5e9; color: #1e7a3c; }
.ae-chip-atencao { background: #fff3cd; color: #7a5b00; }
.ae-chip-perigo  { background: #fdecea; color: var(--ae-vermelho); }
.ae-chip-neutro  { background: var(--ae-fundo); color: var(--ae-texto2); }

.ae-vazio { text-align: center; padding: 44px 20px; color: var(--ae-texto2); }
.ae-vazio i { font-size: 2.6rem; opacity: .22; margin-bottom: 14px; display: block; }
.ae-vazio p { font-size: var(--ae-fs-txt); margin: 0; }

/* =====================================================================
   9. CAMADA DE COMPATIBILIDADE
   ---------------------------------------------------------------------
   O sistema tem 251 nomes de classe de botão herdados de anos de páginas
   escritas uma a uma. Em vez de reescrever a marcação de 181 telas, os
   nomes antigos passam a APONTAR para o padrão. Assim o visual unifica
   sem risco de quebrar link, formulário ou JavaScript.

   Para isto valer, a definição local da página tem de ser removida —
   é o que o passo de limpeza faz.
   ===================================================================== */

/* --- Contêiner e cartão --- */
.main-container {
    max-width: var(--ae-larg);
    margin: var(--ae-sobrepoe) auto 50px;
    padding: 0 var(--ae-gutter);
    position: relative;
    z-index: 2;
}
.content-card, .card-padrao, .painel-card {
    background: var(--ae-card);
    border-radius: var(--ae-raio);
    padding: 24px;
    box-shadow: var(--ae-sombra);
}

/* --- Cartões de menu (telas de índice: index, fazenda, patrimônio, relatórios) ---
   Mantém o acento teal claro que o sistema já usava; o que se padroniza aqui é o
   raio, a sombra e a ALTURA IGUAL entre os cards da mesma linha. */
.menu-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    background: var(--ae-card);
    border-radius: var(--ae-raio);
    padding: 25px 20px;
    text-align: left;
    text-decoration: none;
    color: var(--ae-texto);
    box-shadow: var(--ae-sombra);
    border: 1px solid #f0f0f0;
    border-left: 5px solid var(--ae-teal-claro);
    transition: var(--ae-transicao);
    position: relative;
    overflow: hidden;
}
.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ae-sombra-alta);
    color: var(--ae-texto);
}

/* --- Cartão de indicador --- */
.kpi-card {
    background: var(--ae-card);
    border-radius: var(--ae-raio);
    padding: 18px 20px;
    box-shadow: var(--ae-sombra);
    text-align: center;
    transition: var(--ae-transicao);
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--ae-sombra-alta); }

/* --- Botões: forma comum a todos --- */
.btn-petrol, .btn-pill, .btn-add, .btn-novo, .btn-nova, .btn-acao, .btn-action-pill,
.btn-salvar, .btn-save, .btn-confirmar, .btn-aplicar, .btn-gerar, .btn-add-item,
.btn-add-more, .btn-upload, .btn-download, .btn-sync, .btn-print, .print-btn,
.btn-imprimir, .btn-imprimir-rel, .btn-voltar, .btn-back, .btn-back-custom,
.btn-excluir, .btn-delete, .btn-del, .btn-remove, .btn-danger-grad, .btn-red,
.btn-green, .btn-catalogo, .btn-nova-folha, .btn-novo-item, .tool-btn, .btn-tipo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--ae-raio-pill);
    font-family: var(--ae-fonte);
    font-size: var(--ae-fs-peq);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--ae-transicao);
}

/* --- Botões: quem é primário --- */
.btn-petrol, .btn-pill, .btn-add, .btn-novo, .btn-nova, .btn-acao, .btn-salvar,
.btn-save, .btn-confirmar, .btn-aplicar, .btn-gerar, .btn-add-item, .btn-add-more,
.btn-novo-item, .btn-nova-folha, .btn-upload {
    background: var(--ae-grad);
    color: #fff;
    box-shadow: 0 4px 14px rgba(19,84,122,.22);
}
.btn-petrol:hover, .btn-pill:hover, .btn-add:hover, .btn-novo:hover, .btn-nova:hover,
.btn-acao:hover, .btn-salvar:hover, .btn-save:hover, .btn-confirmar:hover,
.btn-aplicar:hover, .btn-gerar:hover, .btn-add-item:hover, .btn-add-more:hover,
.btn-novo-item:hover, .btn-nova-folha:hover, .btn-upload:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(19,84,122,.32);
}

/* --- Botões: quem é secundário (apoio) --- */
.btn-voltar, .btn-back, .btn-back-custom, .btn-print, .print-btn, .btn-imprimir,
.btn-imprimir-rel, .btn-download, .btn-sync, .btn-catalogo, .tool-btn, .btn-tipo {
    background: #fff;
    color: var(--ae-petrol);
    border-color: var(--ae-linha);
    box-shadow: var(--ae-sombra-baixa);
}
.btn-voltar:hover, .btn-back:hover, .btn-back-custom:hover, .btn-print:hover,
.print-btn:hover, .btn-imprimir:hover, .btn-imprimir-rel:hover, .btn-download:hover,
.btn-sync:hover, .btn-catalogo:hover, .tool-btn:hover, .btn-tipo:hover {
    color: var(--ae-petrol);
    border-color: var(--ae-teal);
    transform: translateY(-1px);
}

/* --- Botões: quem é perigo --- */
.btn-excluir, .btn-delete, .btn-del, .btn-remove, .btn-danger-grad, .btn-red {
    background: var(--ae-grad-perigo);
    color: #fff;
    box-shadow: 0 4px 14px rgba(192,57,43,.22);
}
.btn-excluir:hover, .btn-delete:hover, .btn-del:hover, .btn-remove:hover,
.btn-danger-grad:hover, .btn-red:hover { color: #fff; transform: translateY(-1px); }

.btn-green { background: var(--ae-verde); color: #fff; }
.btn-green:hover { color: #fff; }

/* A célula de ações não quebra linha: 4 bolinhas em duas fileiras fica feio
   e desalinha a tabela inteira. (:has é aceito pelos navegadores atuais; onde
   não for, nada acontece — é só um ajuste fino.) */
td:has(> .btn-ball), td:has(> .btn-action), td:has(> .btn-icon),
td:has(> form > .btn-ball), td:has(> a > .btn-ball) { white-space: nowrap; }

/* --- Botões redondos de ação em lista (bolinhas) --- */
.btn-ball, .btn-action, .btn-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    background: var(--ae-grad);
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    transition: var(--ae-transicao);
}
.btn-ball:hover, .btn-action:hover, .btn-icon:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 5px 14px rgba(0,0,0,.18);
}
.btn-ball-petrol, .btn-icon-petrol { background: var(--ae-grad); }
.btn-ball-red,    .btn-icon-danger { background: var(--ae-grad-perigo); }
.btn-ball-green,  .btn-icon-success{ background: var(--ae-verde); }
.btn-ball-dark                     { background: var(--ae-petrol-esc); }
.btn-ball-amber                    { background: var(--ae-ambar); }

/* --- Pílula de ação no topo da página ---
   Antes era translúcida, feita para ficar só sobre o azul do cabeçalho.
   Como a barra de ações agora vive sobre o azul no computador e sobre o
   cinza no celular, a pílula passa a ser BRANCA SÓLIDA: legível nos dois. */
.btn-nav-pill-center, .btn-nav-standard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 20px;
    border-radius: var(--ae-raio-pill);
    background: #fff;
    border: 1px solid var(--ae-linha);
    box-shadow: var(--ae-sombra-baixa);
    color: var(--ae-petrol);
    font-family: var(--ae-fonte);
    font-size: var(--ae-fs-peq);
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ae-transicao);
}
.btn-nav-pill-center:hover, .btn-nav-standard:hover {
    color: var(--ae-petrol);
    border-color: var(--ae-teal);
    transform: translateY(-1px);
}

/* --- Garantia de leitura: nada abaixo de 12px na tela --- */
.ae-min-fonte, .ae-min-fonte * { font-size: max(1em, var(--ae-fs-min)); }

/* =====================================================================
   10. IMPRESSÃO — folha limpa, sem cabeçalho azul nem botão
   ===================================================================== */

@media print {
    .hero-header-p, .hero-header, .ae-acoes, .ae-btn,
    .no-print, .toast-container-agro { display: none !important; }
    .ae-container { margin: 0 auto; padding: 0; max-width: none; }
    .ae-card { box-shadow: none; padding: 0; margin-bottom: 12px; }
    body { background: #fff; }
    .ae-tabela th, .ae-tabela td { padding: 6px 8px; }
}

/* =====================================================================
   10b. BARRA DE EXPANDIR — "exibir/ocultar" no fim de uma lista
   Para quando a tela mostra só uma parte dos itens e o resto fica guardado.
   ===================================================================== */

.ae-expandir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    margin: 6px 0 10px;
    padding: 14px 20px;
    background: var(--ae-card);
    border: 1px dashed var(--ae-linha);
    border-radius: var(--ae-raio);
    box-shadow: var(--ae-sombra-baixa);
    color: var(--ae-texto2);
    font-family: var(--ae-fonte);
    font-size: var(--ae-fs-peq);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    transition: var(--ae-transicao);
}
.ae-expandir:hover {
    border-color: var(--ae-teal);
    color: var(--ae-petrol);
    transform: translateY(-1px);
}
.ae-expandir .ae-exp-esq { display: flex; align-items: center; gap: 11px; }
.ae-expandir .ae-exp-seta { transition: transform .25s ease; }
.ae-expandir.aberta .ae-exp-seta { transform: rotate(180deg); }
.ae-expandir.aberta { border-style: solid; color: var(--ae-petrol); }

/* =====================================================================
   11. USO NO CAMPO (CELULAR)
   ---------------------------------------------------------------------
   Fica por ÚLTIMO de propósito: precisa vencer a camada de
   compatibilidade acima, que redefine .main-container e os botões.
   Texto legível no sol e alvo que o dedo acerta.
   ===================================================================== */

@media (max-width: 768px) {
    /* No celular o conteúdo NÃO sobe sobre o cabeçalho: lá os botões
       BUSCAR/VOLTAR ficam no rodapé da faixa azul e seriam encobertos.
       O cartão flutuando sobre o azul é um efeito de tela grande. */
    .ae-container, .main-container, .wrap {
        margin-top: 18px !important;
        padding-left: 14px;
        padding-right: 14px;
    }
    .ae-card, .content-card { padding: 18px 16px; }
    .ae-acoes { gap: 8px; }
    .ae-acoes .ae-btn { flex: 1 1 auto; min-width: 140px; }

    /* Dedo acerta melhor com alvo maior. */
    .ae-btn, .btn-petrol, .btn-pill, .btn-add, .btn-novo, .btn-nova, .btn-acao,
    .btn-salvar, .btn-save, .btn-confirmar, .btn-aplicar, .btn-voltar, .btn-back,
    .btn-print, .print-btn, .btn-imprimir, .btn-excluir, .btn-delete, .tool-btn { height: 42px; }
    .ae-btn-p { height: 36px; }
    .ae-btn-icone, .btn-ball, .btn-action, .btn-icon {
        width: 42px; height: 42px; min-width: 42px; font-size: .95rem;
    }

    /* Nada abaixo de 12px na tela do campo. */
    body { font-size: var(--ae-fs-txt); }
}

/* =====================================================================
   12. MODO ESCURO
   ---------------------------------------------------------------------
   Ligado por data-tema="escuro" no <html> (o padrao.js põe a partir da
   escolha guardada no navegador).

   Por que os seletores começam com html[data-tema="escuro"]: o CSS que cada
   página escreve no próprio <style> vem DEPOIS deste arquivo e venceria no
   empate. Com o atributo no <html> a especificidade fica maior e o tema ganha
   sem precisar de !important.

   O que este bloco cobre: as superfícies do padrão e as cores claras mais
   repetidas do sistema. Telas com cor fixa própria podem ter cantos claros —
   está anotado no relatório, é a herança dos 679 KB de CSS por página.
   ===================================================================== */

html[data-tema="escuro"] {
    --ae-texto:      #e6edf3;
    --ae-texto2:     #9aa9b2;
    --ae-linha:      #2b3641;
    --ae-fundo:      #0f1720;
    --ae-card:       #18212b;
    --ae-teal-claro: #2a4a52;
    --ae-sombra:      0 10px 30px rgba(0,0,0,.45);
    --ae-sombra-alta: 0 15px 40px rgba(0,0,0,.60);
    --ae-sombra-baixa:0 4px 14px rgba(0,0,0,.35);
    color-scheme: dark;   /* barras de rolagem e campos nativos acompanham */
}

/* --- fundo e texto --- */
html[data-tema="escuro"] body { background: var(--ae-fundo); color: var(--ae-texto); }

/* --- superfícies claras viram escuras --- */
html[data-tema="escuro"] .ae-card,
html[data-tema="escuro"] .content-card,
html[data-tema="escuro"] .menu-card,
html[data-tema="escuro"] .ae-kpi,
html[data-tema="escuro"] .kpi-card,
html[data-tema="escuro"] .card,
html[data-tema="escuro"] .modal-content,
html[data-tema="escuro"] .table-container,
html[data-tema="escuro"] .erro-item,
html[data-tema="escuro"] .ae-expandir {
    background: var(--ae-card);
    color: var(--ae-texto);
    border-color: var(--ae-linha);
}
html[data-tema="escuro"] .menu-card { border-color: #223039; }
/* O Bootstrap pinta o .card por variável própria; sem trocar a variável ele
   volta a ficar branco mesmo com a regra acima. */
html[data-tema="escuro"] {
    --bs-card-bg: #18212b;
    --bs-body-bg: #0f1720;
    --bs-body-color: #e6edf3;
    --bs-border-color: #2b3641;
    --bs-secondary-bg: #1e2833;
    --bs-tertiary-bg: #1c2530;
}

/* --- textos que o Bootstrap deixa escuros ---
   O !important em .text-dark/.text-black/.text-body não é enfeite: o próprio
   Bootstrap declara essas classes com !important, então sem ele a regra abaixo
   perde e o título do registro fica preto no cartão escuro (era o caso da
   gestão de contratos). Nos h1-h6 não precisa, e sem !important a página ainda
   pode dar um destaque próprio ao título. */
html[data-tema="escuro"] .text-dark,
html[data-tema="escuro"] .fw-bold.text-dark,
html[data-tema="escuro"] .text-black,
html[data-tema="escuro"] .text-body { color: var(--ae-texto) !important; }
html[data-tema="escuro"] h1, html[data-tema="escuro"] h2, html[data-tema="escuro"] h3,
html[data-tema="escuro"] h4, html[data-tema="escuro"] h5, html[data-tema="escuro"] h6 { color: var(--ae-texto); }
html[data-tema="escuro"] .text-muted,
html[data-tema="escuro"] small.text-muted { color: var(--ae-texto2) !important; }
html[data-tema="escuro"] .bg-light,
html[data-tema="escuro"] .bg-white { background: #1e2833 !important; color: var(--ae-texto); }

/* --- tabelas --- */
html[data-tema="escuro"] .ae-tabela th,
html[data-tema="escuro"] .table th { color: var(--ae-texto2); border-bottom-color: var(--ae-linha); }
html[data-tema="escuro"] .ae-tabela td,
html[data-tema="escuro"] .table td { color: var(--ae-texto); border-bottom-color: var(--ae-linha); }
html[data-tema="escuro"] .ae-tabela tbody tr:hover,
html[data-tema="escuro"] .table-hover tbody tr:hover { background: #1e2833; }
html[data-tema="escuro"] .table-light,
html[data-tema="escuro"] thead.table-light th { background: #1c2530 !important; color: var(--ae-texto2) !important; }

/* --- campos --- */
html[data-tema="escuro"] .ae-campo,
html[data-tema="escuro"] .form-control,
html[data-tema="escuro"] .form-select,
html[data-tema="escuro"] input[type="text"],
html[data-tema="escuro"] input[type="date"],
html[data-tema="escuro"] input[type="number"],
html[data-tema="escuro"] input[type="password"],
html[data-tema="escuro"] input[type="search"],
html[data-tema="escuro"] select,
html[data-tema="escuro"] textarea {
    background: #131c25;
    color: var(--ae-texto);
    border-color: var(--ae-linha);
}
html[data-tema="escuro"] .ae-campo::placeholder,
html[data-tema="escuro"] .form-control::placeholder { color: #6c7d88; }

/* --- botões: o secundário era branco --- */
html[data-tema="escuro"] .ae-btn-secundario,
html[data-tema="escuro"] .btn-voltar, html[data-tema="escuro"] .btn-back,
html[data-tema="escuro"] .btn-print, html[data-tema="escuro"] .print-btn,
html[data-tema="escuro"] .btn-imprimir, html[data-tema="escuro"] .tool-btn,
html[data-tema="escuro"] .btn-nav-pill-center, html[data-tema="escuro"] .btn-nav-standard {
    background: #1e2833;
    color: #9fd8cf;
    border-color: var(--ae-linha);
}
html[data-tema="escuro"] .ae-btn-secundario:hover { color: #bfe9e1; border-color: var(--ae-teal); }
html[data-tema="escuro"] .ae-btn-fantasma:hover { background: #1e2833; color: #9fd8cf; }
html[data-tema="escuro"] .ae-btn-icone { background: #1e2833; color: #9fd8cf; }

/* --- etiquetas --- */
html[data-tema="escuro"] .ae-chip-neutro { background: #1e2833; color: var(--ae-texto2); }
html[data-tema="escuro"] .ae-chip-ok      { background: #133524; color: #7ee2a8; }
html[data-tema="escuro"] .ae-chip-atencao { background: #3a2f10; color: #ffd479; }
html[data-tema="escuro"] .ae-chip-perigo  { background: #3a1a17; color: #ff9c8f; }

/* --- avisos do Bootstrap --- */
html[data-tema="escuro"] .alert-success { background:#133524; color:#7ee2a8; border-color:#1d5236; }
html[data-tema="escuro"] .alert-danger  { background:#3a1a17; color:#ff9c8f; border-color:#5a2a25; }
html[data-tema="escuro"] .alert-warning { background:#3a2f10; color:#ffd479; border-color:#5a4a1a; }
html[data-tema="escuro"] .alert-info    { background:#12303a; color:#8fd7ea; border-color:#1c4c5c; }

/* --- separadores e bordas soltas --- */
html[data-tema="escuro"] hr { border-color: var(--ae-linha); }
html[data-tema="escuro"] .border,
html[data-tema="escuro"] .border-bottom,
html[data-tema="escuro"] .border-top { border-color: var(--ae-linha) !important; }

/* --- títulos e textos dentro dos cards (cada tela nomeia do seu jeito) --- */
html[data-tema="escuro"] .card-title,
html[data-tema="escuro"] .menu-card .card-title,
html[data-tema="escuro"] .kpi-valor, html[data-tema="escuro"] .kpi-val,
html[data-tema="escuro"] .val, html[data-tema="escuro"] .rc-val,
html[data-tema="escuro"] .info-val, html[data-tema="escuro"] .stat-val { color: var(--ae-texto); }
html[data-tema="escuro"] .card-subtitle,
html[data-tema="escuro"] .kpi-label, html[data-tema="escuro"] .kpi-lbl,
html[data-tema="escuro"] .lbl, html[data-tema="escuro"] .rc-sub,
html[data-tema="escuro"] .info-lbl, html[data-tema="escuro"] .sec-sub { color: var(--ae-texto2); }

/* --- faixas e barras que cada tela pinta de branco --- */
html[data-tema="escuro"] .faixa-mercado,
html[data-tema="escuro"] .faixa-clima,
html[data-tema="escuro"] .barra-safra,
html[data-tema="escuro"] .search-bar,
html[data-tema="escuro"] .filter-tabs,
html[data-tema="escuro"] .tools-bar,
html[data-tema="escuro"] .pendente-section,
html[data-tema="escuro"] .resumo-grid > *,
html[data-tema="escuro"] .rc,
html[data-tema="escuro"] .saldo-card,
html[data-tema="escuro"] .talhao-card,
html[data-tema="escuro"] .erro-msg { background: var(--ae-card); color: var(--ae-texto); }
html[data-tema="escuro"] .fm-bloco b { color: var(--ae-texto); }
html[data-tema="escuro"] .fm-lbl, html[data-tema="escuro"] .fm-det { color: var(--ae-texto2); }
/* A seta de alta/baixa/estável do dólar, soja e milho: a regra cinza acima
   apagava a cor dela no escuro. Tons mais claros para ler no fundo escuro. */
html[data-tema="escuro"] .fm-det.sobe    { color: #6ddf9c; }
html[data-tema="escuro"] .fm-det.cai     { color: #ff8f80; }
html[data-tema="escuro"] .fm-det.estavel { color: #e6bf45; }
html[data-tema="escuro"] .fm-link:hover b { color: #80d0c7; }


/* --- Superfícies claras que cada tela pinta com nome próprio ---
   Levantei do CSS de todas as páginas as classes que aplicam fundo branco ou
   quase branco (234 nomes) e trago todas para o tema escuro de uma vez.
   Sem isto o modo escuro ficaria remendado tela a tela. --- */
html[data-tema="escuro"] .table-custom,
html[data-tema="escuro"] .pill-metric,
html[data-tema="escuro"] .dash-card,
html[data-tema="escuro"] .file-item,
html[data-tema="escuro"] .info-pill,
html[data-tema="escuro"] .pad-box,
html[data-tema="escuro"] .cod-badge,
html[data-tema="escuro"] .main-card,
html[data-tema="escuro"] .table-card,
html[data-tema="escuro"] .painel,
html[data-tema="escuro"] .metric-card,
html[data-tema="escuro"] .pill,
html[data-tema="escuro"] .card-mobile,
html[data-tema="escuro"] .nota-card,
html[data-tema="escuro"] .kpi,
html[data-tema="escuro"] .card-table,
html[data-tema="escuro"] .resumo-box,
html[data-tema="escuro"] .item-row,
html[data-tema="escuro"] .stepper-container,
html[data-tema="escuro"] .stepper-btn,
html[data-tema="escuro"] .anexo-chip,
html[data-tema="escuro"] .toolbar,
html[data-tema="escuro"] .ticket-box,
html[data-tema="escuro"] .obs,
html[data-tema="escuro"] .table-nfe,
html[data-tema="escuro"] .summary-card,
html[data-tema="escuro"] .filtro-bar,
html[data-tema="escuro"] .badge-periodo,
html[data-tema="escuro"] .campo,
html[data-tema="escuro"] .cat-btn,
html[data-tema="escuro"] .premium-select,
html[data-tema="escuro"] .search-input,
html[data-tema="escuro"] .modal-footer,
html[data-tema="escuro"] .sum-card,
html[data-tema="escuro"] .form-control-cc,
html[data-tema="escuro"] .form-select-cc,
html[data-tema="escuro"] .fp-item,
html[data-tema="escuro"] .kpi-mini,
html[data-tema="escuro"] .section-card,
html[data-tema="escuro"] .search-bar,
html[data-tema="escuro"] .talhao-card,
html[data-tema="escuro"] .vazio,
html[data-tema="escuro"] .pendente-section,
html[data-tema="escuro"] .filter-bar,
html[data-tema="escuro"] .date-input,
html[data-tema="escuro"] .filtros-bar,
html[data-tema="escuro"] .filtro-btn,
html[data-tema="escuro"] .filtro-select,
html[data-tema="escuro"] .step-box,
html[data-tema="escuro"] .filter-search,
html[data-tema="escuro"] .img-cell,
html[data-tema="escuro"] .box,
html[data-tema="escuro"] .info-box,
html[data-tema="escuro"] .counter-pill,
html[data-tema="escuro"] .card-login,
html[data-tema="escuro"] .resumo,
html[data-tema="escuro"] .item-compra,
html[data-tema="escuro"] .filter-card,
html[data-tema="escuro"] .score-ring-inner,
html[data-tema="escuro"] .idx-card,
html[data-tema="escuro"] .catalogo-busca,
html[data-tema="escuro"] .secao-h,
html[data-tema="escuro"] .cont,
html[data-tema="escuro"] .wm-reader,
html[data-tema="escuro"] .item-card,
html[data-tema="escuro"] .bottom-bar,
html[data-tema="escuro"] .viewer-body,
html[data-tema="escuro"] .cat-todas,
html[data-tema="escuro"] .select2-container--open,
html[data-tema="escuro"] .master-select,
html[data-tema="escuro"] .card-aprov,
html[data-tema="escuro"] .tbl-orc,
html[data-tema="escuro"] .preview-box,
html[data-tema="escuro"] .preview-ped,
html[data-tema="escuro"] .pdf-page-host,
html[data-tema="escuro"] .tbl-docs,
html[data-tema="escuro"] .caixa-busca,
html[data-tema="escuro"] .grupo,
html[data-tema="escuro"] .dup-group,
html[data-tema="escuro"] .toast-float,
html[data-tema="escuro"] .box-dinamico,
html[data-tema="escuro"] .cot-ref,
html[data-tema="escuro"] .card-senha,
html[data-tema="escuro"] .filter-tab,
html[data-tema="escuro"] .resumo-card,
html[data-tema="escuro"] .talhao-plantio,
html[data-tema="escuro"] .faixa-clima,
html[data-tema="escuro"] .cl-dia,
html[data-tema="escuro"] .clima-talhao,
html[data-tema="escuro"] .ct-dia,
html[data-tema="escuro"] .barra-safra,
html[data-tema="escuro"] .talhao-header,
html[data-tema="escuro"] .th-btn,
html[data-tema="escuro"] .page-tab,
html[data-tema="escuro"] .saldo-card,
html[data-tema="escuro"] .app-row,
html[data-tema="escuro"] .cr-parcela-row,
html[data-tema="escuro"] .card-pend,
html[data-tema="escuro"] .chip,
html[data-tema="escuro"] .sig-pad,
html[data-tema="escuro"] .agenda-box,
html[data-tema="escuro"] .off,
html[data-tema="escuro"] .quitacao,
html[data-tema="escuro"] .payment-row,
html[data-tema="escuro"] .period-card,
html[data-tema="escuro"] .period-input,
html[data-tema="escuro"] .search-box,
html[data-tema="escuro"] .bar-bg,
html[data-tema="escuro"] .legenda-bar,
html[data-tema="escuro"] .forn-card,
html[data-tema="escuro"] .tab-bar,
html[data-tema="escuro"] .loading-box,
html[data-tema="escuro"] .stat-pill,
html[data-tema="escuro"] .tab-nav,
html[data-tema="escuro"] .upload-label,
html[data-tema="escuro"] .page-header,
html[data-tema="escuro"] .f-cat,
html[data-tema="escuro"] .f-tipo,
html[data-tema="escuro"] .pagination-wrap,
html[data-tema="escuro"] .pg-btn,
html[data-tema="escuro"] .stat-box,
html[data-tema="escuro"] .card-contract,
html[data-tema="escuro"] .yr-pill,
html[data-tema="escuro"] .pdf-thumb,
html[data-tema="escuro"] .tabela,
html[data-tema="escuro"] .kpi-pill,
html[data-tema="escuro"] .active-row,
html[data-tema="escuro"] .inactive-row,
html[data-tema="escuro"] .table-input,
html[data-tema="escuro"] .tax-input,
html[data-tema="escuro"] .page,
html[data-tema="escuro"] .tot-row,
html[data-tema="escuro"] .recibo-func-opt,
html[data-tema="escuro"] .toast-item,
html[data-tema="escuro"] .recibo,
html[data-tema="escuro"] .destaque,
html[data-tema="escuro"] .parcelas,
html[data-tema="escuro"] .tot,
html[data-tema="escuro"] .ao-stage,
html[data-tema="escuro"] .drop-card,
html[data-tema="escuro"] .table-prontuario,
html[data-tema="escuro"] .card-imovel,
html[data-tema="escuro"] .input-apelido,
html[data-tema="escuro"] .doc-row,
html[data-tema="escuro"] .badge-info-data,
html[data-tema="escuro"] .file-row,
html[data-tema="escuro"] .caixa,
html[data-tema="escuro"] .card-man,
html[data-tema="escuro"] .item-area,
html[data-tema="escuro"] .badge-info,
html[data-tema="escuro"] .badge-outros,
html[data-tema="escuro"] .modal-search-header,
html[data-tema="escuro"] .modal-text-content,
html[data-tema="escuro"] .erro-msg,
html[data-tema="escuro"] .report-wrapper,
html[data-tema="escuro"] .parcela-row,
html[data-tema="escuro"] .config-card,
html[data-tema="escuro"] .card-param,
html[data-tema="escuro"] .card-header-custom,
html[data-tema="escuro"] .input-add,
html[data-tema="escuro"] .period-bar,
html[data-tema="escuro"] .filter-tabs,
html[data-tema="escuro"] .td-itens,
html[data-tema="escuro"] .td-total,
html[data-tema="escuro"] .user-banner,
html[data-tema="escuro"] .perm-row,
html[data-tema="escuro"] .sheet,
html[data-tema="escuro"] .card-x,
html[data-tema="escuro"] .cell,
html[data-tema="escuro"] .pill-row,
html[data-tema="escuro"] .rank-item,
html[data-tema="escuro"] .conf-nfe-card,
html[data-tema="escuro"] .conf-pill,
html[data-tema="escuro"] .report-card,
html[data-tema="escuro"] .periodo-bar,
html[data-tema="escuro"] .kpi-agro,
html[data-tema="escuro"] .pe-bar-track,
html[data-tema="escuro"] .pat-kpi,
html[data-tema="escuro"] .credor-badge,
html[data-tema="escuro"] .credor-card,
html[data-tema="escuro"] .ltv-bar-track,
html[data-tema="escuro"] .venc-field,
html[data-tema="escuro"] .audit-alert,
html[data-tema="escuro"] .hero-header-p,
html[data-tema="escuro"] .cat-row,
html[data-tema="escuro"] .select-inline,
html[data-tema="escuro"] .card-evo,
html[data-tema="escuro"] .card-safra,
html[data-tema="escuro"] .he-toggle,
html[data-tema="escuro"] .repo-pill,
html[data-tema="escuro"] .ie-card,
html[data-tema="escuro"] .cat-badge,
html[data-tema="escuro"] .uf-card,
html[data-tema="escuro"] .top20-card,
html[data-tema="escuro"] .top20-pos,
html[data-tema="escuro"] .toast-msg,
html[data-tema="escuro"] .card-premium,
html[data-tema="escuro"] .header-section,
html[data-tema="escuro"] .bi-card,
html[data-tema="escuro"] .card-farm,
html[data-tema="escuro"] .scan-item,
html[data-tema="escuro"] .qr-box,
html[data-tema="escuro"] .senha-input,
html[data-tema="escuro"] .form-wrapper,
html[data-tema="escuro"] .item-linha,
html[data-tema="escuro"] .catalogo-drawer,
html[data-tema="escuro"] .form-footer,
html[data-tema="escuro"] .cam-shutter,
html[data-tema="escuro"] .ss-bar,
html[data-tema="escuro"] .cl-caixa,
html[data-tema="escuro"] .pm-caixa,
html[data-tema="escuro"] .empilha-escuro,
html[data-tema="escuro"] .reg,
html[data-tema="escuro"] .barra-pagos,
html[data-tema="escuro"] .pgto,
html[data-tema="escuro"] .card-r,
html[data-tema="escuro"] .form-card,
html[data-tema="escuro"] .user-card,
html[data-tema="escuro"] .perm-card,
html[data-tema="escuro"] .sticky-footer,
html[data-tema="escuro"] .permissoes-container,
html[data-tema="escuro"] .permissoes-grupo,
html[data-tema="escuro"] .wm-sidebar,
html[data-tema="escuro"] .list-header,
html[data-tema="escuro"] .list-toolbar,
html[data-tema="escuro"] .msg-row,
html[data-tema="escuro"] .nao-lido,
html[data-tema="escuro"] .list-pag,
html[data-tema="escuro"] .pag-btn,
html[data-tema="escuro"] .reader-topbar,
html[data-tema="escuro"] .wm-empty,
html[data-tema="escuro"] .compose-box,
html[data-tema="escuro"] .modal-confirm-box,
html[data-tema="escuro"] .ia-resp-box {
    background: var(--ae-card) !important;
    color: var(--ae-texto);
    border-color: var(--ae-linha);
}


/* --- Cards da tela inicial: hierarquia entre ícone, título e marca d'água ---
   No claro o ícone é petrol sobre uma pastilha bem clara e a marca d'água é um
   ícone gigante a 2% de preto — quase invisível, de propósito. Sem regra própria
   os dois eram clareados junto com o título e os três acabavam da mesma cor, com
   a marca d'água sólida por cima do texto. Aqui cada um recebe o seu papel. */
html[data-tema="escuro"] .icon-wrapper { background: rgba(128, 208, 199, .10); color: #80d0c7; }
html[data-tema="escuro"] .menu-card:hover .icon-wrapper { color: #0f1720; }
html[data-tema="escuro"] .watermark { color: rgba(255, 255, 255, .03); }
html[data-tema="escuro"] .menu-card:hover .watermark { color: rgba(128, 208, 199, .07); }

/* --- Texto que cada tela fixou em cinza-escuro (128 classes) ---
   No tema escuro esses valores ficavam quase invisíveis sobre o cartão escuro.
   Mesma lógica das superfícies: levantado do CSS de todas as páginas. --- */
html[data-tema="escuro"] .card-title,
html[data-tema="escuro"] .kpi-value,
html[data-tema="escuro"] .table-custom,
html[data-tema="escuro"] .pill-metric,
html[data-tema="escuro"] .section-title,
html[data-tema="escuro"] .autocomplete-suggestion,
html[data-tema="escuro"] .mobile-val,
html[data-tema="escuro"] .val-qtd,
html[data-tema="escuro"] .stepper-btn,
html[data-tema="escuro"] .anexo-chip,
html[data-tema="escuro"] .pill-val,
html[data-tema="escuro"] .title-area,
html[data-tema="escuro"] .painel-h,
html[data-tema="escuro"] .titulo,
html[data-tema="escuro"] .table-nfe,
html[data-tema="escuro"] .kpi-dark,
html[data-tema="escuro"] .campo,
html[data-tema="escuro"] .png,
html[data-tema="escuro"] .table-card,
html[data-tema="escuro"] .kpi-mini,
html[data-tema="escuro"] .talhao-nome,
html[data-tema="escuro"] .talhao-metric,
html[data-tema="escuro"] .tm-value,
html[data-tema="escuro"] .pendente-item,
html[data-tema="escuro"] .pi-nome,
html[data-tema="escuro"] .loja,
html[data-tema="escuro"] .date-input,
html[data-tema="escuro"] .file-row,
html[data-tema="escuro"] .relogio,
html[data-tema="escuro"] .user-item,
html[data-tema="escuro"] .kpi-icon,
html[data-tema="escuro"] .secao-h,
html[data-tema="escuro"] .ico,
html[data-tema="escuro"] .cat-btn,
html[data-tema="escuro"] .label,
html[data-tema="escuro"] .premium-select-dropdown,
html[data-tema="escuro"] .select2-results__option,
html[data-tema="escuro"] .dest-pecas,
html[data-tema="escuro"] .preview-ped-forn,
html[data-tema="escuro"] .item-titulo,
html[data-tema="escuro"] .cot-valor,
html[data-tema="escuro"] .resumo-card,
html[data-tema="escuro"] .rc-value,
html[data-tema="escuro"] .cl-temp,
html[data-tema="escuro"] .cs-resumo,
html[data-tema="escuro"] .ct-bloco,
html[data-tema="escuro"] .th-nome,
html[data-tema="escuro"] .val,
html[data-tema="escuro"] .saldo-nome,
html[data-tema="escuro"] .app-produto,
html[data-tema="escuro"] .cr-parcela-num,
html[data-tema="escuro"] .card-pend,
html[data-tema="escuro"] .bar-val,
html[data-tema="escuro"] .price-unit,
html[data-tema="escuro"] .forn-val,
html[data-tema="escuro"] .oc-table,
html[data-tema="escuro"] .oc-qty,
html[data-tema="escuro"] .search-input,
html[data-tema="escuro"] .contract-icon,
html[data-tema="escuro"] .inp-clean,
html[data-tema="escuro"] .table-input,
html[data-tema="escuro"] .logo,
html[data-tema="escuro"] .farm-name,
html[data-tema="escuro"] .emp-nome,
html[data-tema="escuro"] .assinatura,
html[data-tema="escuro"] .name,
html[data-tema="escuro"] .filter-kbd,
html[data-tema="escuro"] .corpo,
html[data-tema="escuro"] .header,
html[data-tema="escuro"] .subtitle,
html[data-tema="escuro"] .foto-person,
html[data-tema="escuro"] .value,
html[data-tema="escuro"] .card-nome,
html[data-tema="escuro"] .detalhe-texto,
html[data-tema="escuro"] .imovel-nome,
html[data-tema="escuro"] .info-val,
html[data-tema="escuro"] .fm-bloco,
html[data-tema="escuro"] .fr-nome,
html[data-tema="escuro"] .item,
html[data-tema="escuro"] .indice,
html[data-tema="escuro"] .kpi,
html[data-tema="escuro"] .leg-item,
html[data-tema="escuro"] .pop-linha,
html[data-tema="escuro"] .badge-outros,
html[data-tema="escuro"] .badge-revisao,
html[data-tema="escuro"] .period-input,
html[data-tema="escuro"] .user-banner-name,
html[data-tema="escuro"] .perm-row,
html[data-tema="escuro"] .pr-nome,
html[data-tema="escuro"] .folha-cab,
html[data-tema="escuro"] .sub,
html[data-tema="escuro"] .val-sm,
html[data-tema="escuro"] .detalhe,
html[data-tema="escuro"] .table-rel,
html[data-tema="escuro"] .stat-value,
html[data-tema="escuro"] .report-title,
html[data-tema="escuro"] .periodo-bar,
html[data-tema="escuro"] .pb-val,
html[data-tema="escuro"] .pat-section-title,
html[data-tema="escuro"] .pat-kpi-value,
html[data-tema="escuro"] .cron-year,
html[data-tema="escuro"] .credor-badge,
html[data-tema="escuro"] .credor-nome,
html[data-tema="escuro"] .ltv-nome,
html[data-tema="escuro"] .venc-field-val,
html[data-tema="escuro"] .pat-kpi-label,
html[data-tema="escuro"] .ka-lbl,
html[data-tema="escuro"] .pill-lbl,
html[data-tema="escuro"] .hero-header-p,
html[data-tema="escuro"] .badge,
html[data-tema="escuro"] .bloco-val,
html[data-tema="escuro"] .ie-value,
html[data-tema="escuro"] .cat-badge,
html[data-tema="escuro"] .idx-value,
html[data-tema="escuro"] .bi-value,
html[data-tema="escuro"] .card-farm,
html[data-tema="escuro"] .painel,
html[data-tema="escuro"] .senha-input,
html[data-tema="escuro"] .cl-tit,
html[data-tema="escuro"] .pm-tit,
html[data-tema="escuro"] .pm-txt,
html[data-tema="escuro"] .sel-hero,
html[data-tema="escuro"] .empilha-escuro,
html[data-tema="escuro"] .reg,
html[data-tema="escuro"] .barra-pagos,
html[data-tema="escuro"] .pgto,
html[data-tema="escuro"] .perm-nome,
html[data-tema="escuro"] .data { color: var(--ae-texto); }

/* Nada de inverter foto ou mapa aqui: a logo do cabeçalho depende de um filtro
   próprio (brightness(0) invert(1)) e uma regra img{filter:none} a apagava. */

/* --- no papel, sempre claro ---
   Listar superfície por superfície não bastava: quem imprimia no escuro levava
   texto cinza-claro no papel branco. Redefinindo as VARIÁVEIS aqui, tudo o que
   é pintado por elas (texto, borda, cartão) volta ao claro de uma vez só. */
@media print {
    html[data-tema="escuro"] {
        --ae-texto:  #000;
        --ae-texto2: #333;
        --ae-fundo:  #fff;
        --ae-card:   #fff;
        --ae-linha:  #ccc;
        --ae-sombra: none; --ae-sombra-alta: none; --ae-sombra-baixa: none;
        color-scheme: light;
    }
    html[data-tema="escuro"] body,
    html[data-tema="escuro"] .ae-card,
    html[data-tema="escuro"] .content-card { background: #fff !important; color: #000 !important; }
}

/* --- botão de trocar o tema --- */
.ae-tema {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
    color: #fff; cursor: pointer; transition: var(--ae-transicao);
}
.ae-tema:hover { background: rgba(255,255,255,.95); color: var(--ae-petrol-esc); }