/*
  SCADIAgro Audita — design system compartilhado.
  Paleta de marca fixa (não decorativa, papéis semânticos):
    #1E5B2F verde escuro   -> estrutura, marca, ação primária
    #4CAF50 verde vivo     -> positivo/resolvido (uso decorativo/preenchimento;
                               para texto usa-se --positive-text, uma variação
                               mais escura da mesma cor — #4CAF50 puro não
                               atinge 4.5:1 de contraste em fundo claro)
    #D32F2F vermelho       -> atenção/crítico (texto e preenchimento — já é
                               suficientemente escuro para leitura)
    #E8E8E8 cinza claro    -> superfícies secundárias
    #FFFFFF branco         -> superfície/fundo geral
    #333333 cinza escuro   -> texto
  Estados neutros (Em Análise, itens não classificados) usam a escala de
  cinza, nunca uma cor inventada — o produto tem apenas duas cores de marca
  (verde e vermelho) e a leitura de estado se apoia em ícone + rótulo, não só
  em matiz (ver reference/craft-floor.md).
*/

:root {
    /* --- marca --- */
    --verde-escuro: #1E5B2F;
    --verde-escuro-forte: #163F21;
    --verde-escuro-tint: rgba(30, 91, 47, .08);
    --verde-escuro-tint-forte: rgba(30, 91, 47, .16);
    --verde-vivo: #4CAF50;
    --verde-vivo-tint: rgba(76, 175, 80, .14);
    --vermelho: #D32F2F;
    --vermelho-tint: rgba(211, 47, 47, .10);

    /* --- papéis semânticos (o que o resto do app consome) --- */
    --bg: #F6F8F6;
    --panel: #FFFFFF;
    --panel2: #E8E8E8;
    --border: #DCE3DC;
    --border-forte: #C4CEC4;
    --text: #262B26;
    --muted: #5C6B5C;

    --accent: var(--verde-escuro);
    --accent-forte: var(--verde-escuro-forte);
    --accent-tint: var(--verde-escuro-tint);

    /* pastéis sólidos (editorial, não rgba translúcido de SaaS) — sempre
       texto colorido + fundo, nunca cor sozinha */
    --ok: #2E7D32;             /* texto/ícone sobre positivo — derivado do verde vivo, acessível em fundo claro */
    --ok-bg: #E9F2E9;
    --ok-dot: var(--verde-vivo); /* uso decorativo: dot, preenchimento sólido com texto branco por cima */

    --erro: var(--vermelho);
    --erro-bg: #F8EAEA;

    /* âmbar -- reservado pro "isto precisa de um olhar humano" (a nota do
       auditor explicando o achado). É a 3ª cor semântica do sistema, fora
       do verde/vermelho de marca -- decisão do usuário, que desenhou essa
       caixa em âmbar num mock à parte (Card Auditoria - Reorganizado.dc.html)
       pra separar visualmente "observação a conferir" de "erro confirmado". */
    --aviso: #8A6D2E;
    --aviso-bg: #FBF2DE;
    --aviso-border: #E6D2A0;
    --aviso-chip-bg: #F2E2B8;

    /* azul -- 4ª cor semântica, reservada pro selo "Prévio" dos relatórios
       de fechamento de safra (parcial, ainda não é o resultado final) —
       decisão do usuário a partir de outro mock à parte, mesmo espírito do
       âmbar acima: um estado que não é nem "positivo" (verde) nem
       "atenção" (vermelho/âmbar), só informativo. Contraste ~5.7:1 sobre
       branco. */
    --info: #3B5BDB;
    --info-bg: #E8EAFB;

    --pendente: var(--muted);   /* estado neutro/aguardando — cinza, nunca cor inventada */
    --pendente-bg: var(--panel2);

    --analise: var(--muted);
    --devolucao: var(--accent);
    --devolucao-bg: #E9EEE8;
    --resposta: var(--accent);

    /* --- tipografia ---
       Uma família só (Montserrat, pesos 400-800, a mesma das telas do
       cliente -- só a tipografia é compartilhada; cores e formas seguem as
       deste arquivo), a hierarquia vem do peso e do tracking, não da
       mistura de fontes. Números de movimentação usam tabular-nums. A
       Montserrat é mais larga que a Inter: a tela de auditoria é densa em
       dado pequeno (11-13px), então conferir quebra de linha ao mexer em
       tabela/chip/card. Papéis por peso, usados nas regras específicas de cada
       elemento (não existe uma --fonte-titulo/--fonte separada mais; é a
       mesma pilha, variando --peso-*):
         display/números grandes -> 800-900, tracking levemente negativo
         título de card/seção    -> 700, tracking levemente negativo
         corpo/descrição         -> 400-500
         label/metadado          -> 500-600, tamanho reduzido, por vezes
                                     uppercase + tracking positivo
       Carregada via Google Fonts nas páginas (ver <link> no <head> de cada
       template). */
    --fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fonte-titulo: var(--fonte);
    --fonte-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --peso-display: 800;
    --peso-titulo: 700;
    --peso-corpo: 400;
    --peso-label: 600;

    /* --- espaço / forma --- */
    --raio: 10px;
    --raio-pequeno: 6px;
    --raio-pilula: 999px;
    --sombra: 0 1px 2px rgba(38, 43, 38, .04), 0 4px 14px rgba(38, 43, 38, .06);
    --sombra-elevada: 0 2px 4px rgba(38, 43, 38, .05), 0 12px 28px rgba(38, 43, 38, .10);

    /* --- movimento ---
       Curvas mais fortes que o ease-out/in-out padrão do CSS (fracos
       demais pra parecer intencional -- ver reference/emil-design-eng). */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --dur-rapida: 140ms;
    --dur-base: 200ms;
    --dur-lenta: 320ms;

    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--fonte);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* identificadores técnicos (uuid, chave, código de safra) marcam
   deliberadamente "isto é um fato verificado pelo sistema", nunca um
   enfeite de "tecnologia" — ver direction contract, bloco OWN-WORLD. */
.id-tecnico, .mono {
    font-family: var(--fonte-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

::selection {
    background: var(--verde-escuro);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* scrollbar — webkit + gecko/blink modernos, tonalizada com a marca em vez
   do cinza padrão do sistema operacional */
* { scrollbar-color: var(--border-forte) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-forte);
    border-radius: var(--raio-pilula);
    border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

a { color: var(--accent); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

h1 {
    font-family: var(--fonte);
    font-weight: var(--peso-display);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
h2, .titulo-secao {
    font-family: var(--fonte);
    font-weight: var(--peso-titulo);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* números que carregam dado (valores, contagens) -- tabular figures reais
   da fonte, peso pesado, é o papel "display/números grandes" do pedido do
   usuário. */
.num-display {
    font-variant-numeric: tabular-nums;
    font-weight: var(--peso-display);
    letter-spacing: -0.02em;
}

/* labels/metadados curtos (status, id, prazo) -- peso médio, tamanho
   reduzido, opcionalmente uppercase + tracking positivo pra diferenciar
   de texto normal sem trocar de fonte. */
.label-meta {
    font-weight: var(--peso-label);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* --- primitivas de interação (aplicam a qualquer página que use estes
   nomes de classe/elemento, sem precisar redeclarar em cada template) --- */
button, .btn-cliente-atual, .card-cliente, .btn-menu-acoes {
    transition: transform var(--dur-rapida) var(--ease-out);
}
button:not(:disabled):active { transform: scale(.97); }

.mov-row, .pedido-card, .centro-card, .pendencia-card, .resumo-card, .stat-card {
    transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .mov-row:hover, .pedido-card:hover, .centro-card:hover, .pendencia-card:hover {
        box-shadow: var(--sombra);
        border-color: var(--border-forte);
    }
}

/* entrada em cascata -- as páginas que renderizam listas via JS aplicam
   esta classe e um --i por item (ver auditoria.html / cliente_portal.html);
   nunca a monta tudo de uma vez, ver reference/emil-design-eng. */
@keyframes entrada-cascata {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.entra {
    animation: entrada-cascata var(--dur-lenta) var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
}

/* --- trilho de navegação vertical (estilo Instagram desktop) ---
   Usado tanto nas telas internas do consultor (auditoria, clientes,
   consultores, selecionar_cliente -- ver partials/_rail.html) quanto no
   portal do cliente (Pendências/Fechamentos de Safra/Custos -- ver
   partials/_rail_cliente.html), pedido explícito do usuário: "mesmo
   padrão de personalização" nas duas visões. */
.rail {
    position: fixed; left: 0; top: 0; bottom: 0; width: 58px;
    background: #16211A; display: flex; flex-direction: column; align-items: center;
    padding: 16px 0 18px; z-index: 20;
}
.rail-marca {
    width: 32px; height: 32px; border-radius: var(--raio-pequeno);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; margin-bottom: 16px; flex-shrink: 0;
}
.rail-marca-img { width: 22px; height: 22px; object-fit: contain; display: block; }
.rail-nav { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.rail-item {
    position: relative; width: 38px; height: 38px; border-radius: var(--raio-pequeno);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.68); text-decoration: none; flex-shrink: 0;
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-rapida) var(--ease-out);
}
.rail-item svg { width: 19px; height: 19px; }
.rail-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.rail-item.ativo { color: var(--verde-vivo); background: rgba(76,175,80,.14); }
.rail-item:active { transform: scale(.94); }
.rail-tooltip {
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px);
    background: #1F2C22; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
    padding: 6px 10px; border-radius: var(--raio-pequeno); opacity: 0; pointer-events: none;
    transition: opacity var(--dur-rapida) var(--ease-out), transform var(--dur-rapida) var(--ease-out);
}
.rail-item:hover .rail-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail-spacer { flex: 1; }
.rail-rodape { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.rail-avatar {
    width: 26px; height: 26px; border-radius: 50%; background: #2B3A2E;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rail-avatar svg { width: 15px; height: 15px; color: rgba(255,255,255,.85); }

.rail-conteudo { margin-left: 58px; }

/* --- barra do modo admin (portal do cliente) ---
   So' aparece quando um consultor abre o portal do cliente em modo
   visualizacao (ver app._contexto_portal_cliente/modo_admin) -- o trilho
   (rail) cuida de trocar de TELA, essa barra cuida de trocar de CLIENTE
   (nao cabe um select dentro do trilho de icones). */
.admin-bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; margin-left: 58px; background: var(--panel); border-bottom: 1px solid var(--border); }
.admin-bar-label { font-size: 12px; color: var(--muted); font-weight: var(--peso-label); }
.admin-bar select { background: var(--panel2); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: var(--raio-pequeno); font-size: 13px; font-family: inherit; }

/* estado vazio generico ("ainda sem conteudo aqui") -- usado nas telas do
   portal que ainda nao tem dado ligado (ver cliente_fechamentos_safra.html/
   cliente_custos.html). */
.estado-vazio { background: var(--panel); border: 1px dashed var(--border); border-radius: var(--raio); padding: 48px 24px; text-align: center; color: var(--muted); font-size: 14px; margin: 24px auto 0; max-width: 1000px; }

@media (max-width: 640px) {
    .admin-bar { padding: 12px 14px; flex-wrap: wrap; }
}

/* Indicador de "carregando" -- basta a classe `carregando`: numa area de
   estado (.estado, ex. "Consultando o banco...") vira um spinner maior
   centralizado acima do texto; num botao ("Gerando...", "Enviando...") um
   spinner pequeno antes do texto, na cor do proprio botao. */
@keyframes girar-carregando { to { transform: rotate(360deg); } }
.carregando::before {
    content: ''; display: inline-block; flex-shrink: 0;
    width: 1em; height: 1em; margin-right: .5em; vertical-align: -0.15em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: girar-carregando .7s linear infinite;
}
.estado.carregando { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.estado.carregando::before { width: 22px; height: 22px; margin: 0; border-width: 2.5px; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    /* O spinner e' o unico sinal de que a tela esta' trabalhando -- nao
       para, so' gira mais devagar. */
    .carregando::before { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}