:root {
    /* Paleta CGH Sistemas — tokens oficiais (dark theme, igual ao módulo de Transporte) */
    --cgh-ink:         #0B0F0D;
    --cgh-ink-soft:    #131B16;
    --cgh-ink-softer:  #1A241D;
    --cgh-line:        #26352D;
    --cgh-green-deep:  #0E6B39;
    --cgh-green:       #1FAA59;
    --cgh-green-bright:#34D178;
    --cgh-fire-orange: #FF7A1A;
    --cgh-fire-amber:  #FFC93C;
    --cgh-fire-red:    #E8352B;
    --cgh-paper:       #F4F7F3;
    --cgh-muted:       #93A69B;
    --cgh-muted-dim:   #5E7268;

    --virtual-blue: var(--cgh-green);
    --virtual-blue-hover: var(--cgh-green-deep);
    --virtual-blue-light: rgba(31, 170, 89, .16);
    --virtual-red: var(--cgh-fire-red);
    --virtual-red-hover: #c22a22;
    --virtual-red-light: rgba(232, 53, 43, .14);

    /* Texto de destaque (chips/links "ativos") sobre fundo de superfície
       (--virtual-blue-light etc.) — separado de --cgh-green-bright porque
       esse tom só tem contraste suficiente sobre fundo escuro; no tema
       claro esse token vira uma versão mais escura (ver bloco abaixo). */
    --accent-text: var(--cgh-green-bright);

    --bg-body: linear-gradient(135deg, #131B16 0%, #0B0F0D 100%);
    --card-bg: var(--cgh-ink-soft);
    --card-border: var(--cgh-line);
    --text-main: var(--cgh-paper);
    --text-muted: var(--cgh-muted);

    /* Status Tags com Cores Claras Ajustadas (fills translúcidos p/ fundo escuro) */
    --amarelo-bg: rgba(255,201,60,.12); --amarelo-border: rgba(255,201,60,.35); --amarelo-text: var(--cgh-fire-amber);
    --vermelho-bg: rgba(232,53,43,.12); --vermelho-border: rgba(232,53,43,.35); --vermelho-text: var(--cgh-paper);
    --verde-bg: rgba(52,209,120,.14); --verde-border: rgba(52,209,120,.35); --verde-text: var(--cgh-green-bright);
    --laranja-bg: rgba(255,122,26,.12); --laranja-border: rgba(255,122,26,.35); --laranja-text: var(--cgh-fire-orange);
    --roxo-bg: rgba(168,85,247,.16); --roxo-border: rgba(168,85,247,.4); --roxo-text: #d8b4fe;
    --azul-bg: rgba(52,209,120,.12); --azul-border: rgba(31,170,89,.4); --azul-text: var(--cgh-green-bright);
    --ciano-bg: rgba(45,212,191,.14); --ciano-border: rgba(45,212,191,.4); --ciano-text: #5eead4;
    --rosa-bg: rgba(244,114,182,.14); --rosa-border: rgba(244,114,182,.4); --rosa-text: #f9a8d4;
    --indigo-bg: rgba(99,102,241,.16); --indigo-border: rgba(99,102,241,.4); --indigo-text: #a5b4fc;

    /* Tipografia de marca (igual Transporte/Cotação de Peças — ver DESIGN.md) */
    --font-display: 'Archivo', 'Arial Black', sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Véu escuro (25%) sob os gradientes de botão coloridos — mantém a cor
       e a direção do gradiente, só escurece o suficiente pro texto claro
       (paper/branco) passar de WCAG AA (4.5:1) em toda a extensão do
       gradiente, sem alterar nenhum hex de marca (ver auditoria v11.8). */
    --btn-scrim: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25));
}

html {
    /* Escuro é o tema padrão (corrige scrollbar/campo nativo claros no
       Windows); o claro é escolha explícita do usuário — ver [data-theme]
       abaixo e tema.js. */
    color-scheme: dark;
}

/* ============================================================
   TEMA CLARO
   Reescreve só os tokens de "superfície" (fundo/borda/texto de corpo)
   e os tokens de texto de status usados sobre fundos translúcidos.
   As cores de marca (botões com gradiente, badges de sistema, ícones)
   continuam as mesmas nos dois temas — só o texto que precisa de mais
   contraste sobre fundo claro muda de tom.
   ============================================================ */
html[data-theme="claro"] {
    color-scheme: light;

    --cgh-ink-soft:    #FFFFFF;
    --cgh-ink-softer:  #EDF2EE;
    --cgh-line:        #DAE2DC;
    --cgh-muted:       #56685F;
    --cgh-muted-dim:   #8A9990;

    --bg-body: linear-gradient(135deg, #F3F6F3 0%, #E6ECE7 100%);
    --card-bg: #FFFFFF;
    --text-main: #16211B;
    --text-muted: var(--cgh-muted);

    --virtual-blue-light: rgba(31, 170, 89, .12);
    --virtual-red-light: rgba(232, 53, 43, .10);
    --accent-text: #0F7A42;

    /* Texto dos status (badges, linhas coloridas) — versões escuras das
       cores de marca, legíveis sobre o fundo translúcido claro. */
    --amarelo-text: #8A5C00;
    --vermelho-text: #B3261E;
    --verde-text: #0E6B39;
    --laranja-text: #A2480C;
    --roxo-text: #7C3AED;
    --azul-text: #0E6B39;
    --ciano-text: #0F766E;
    --rosa-text: #BE185D;
    --indigo-text: #4338CA;
}

html[data-theme="claro"] tr:hover td {
    background: rgba(0, 0, 0, .035);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(31, 170, 89, 0.25);
    touch-action: manipulation;
    /* Só as propriedades realmente animadas em hover/focus no projeto
       (ver auditoria v11.8) — "all" também animava width/height/padding/
       font-size etc. sempre que uma classe JS mudava qualquer uma delas,
       custando recálculo de layout à toa. */
    transition-property: background, background-color, border-color, box-shadow, color, transform;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-main);
    padding: 20px 0;
}

/* Link "pular pro conteúdo" — invisível até ganhar foco por teclado
   (Tab), pra quem navega por teclado não precisar passar por toda a
   splash/decoração antes do formulário. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    background: var(--cgh-green);
    color: var(--cgh-ink);
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    z-index: 999999;
    text-decoration: none;
}
.skip-link:focus-visible {
    top: 12px;
}

.container {
    background: var(--card-bg);
    width: 95%;
    max-width: 1280px;
    padding: 35px;
    border-radius: 20px;
    /* Painel define a borda de marca (metáfora "console"), sem também
       empilhar sombra difusa larga por cima — ver auditoria v11.8. */
    border: 1px solid var(--card-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    min-height: 500px;
}

/* Logo Component (SVG com fundo transparente, sem precisar de badge) */
.brand-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto 25px auto;
}
.brand-logo-container.header-logo {
    margin: 0;
    justify-content: flex-start;
}
.brand-logo-container img {
    display: block;
}

h1, h2, h3, .display {
    color: var(--text-main);
    margin-top: 0;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h4 {
    color: var(--text-main);
    margin-top: 0;
    font-family: var(--font-display);
    font-weight: 700;
}

.highlight-blue { color: var(--virtual-blue); }
.highlight-red { color: var(--virtual-red); }

/* Form Controls */
.form-group { margin-bottom: 18px; }
label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
input, select {
    width: 100%;
    padding: 12px 14px;
    background: var(--cgh-ink-soft);
    border: 1px solid var(--cgh-line);
    border-radius: 10px;
    color: var(--text-main);
    font-size: 14px;
    outline: none;
}
input:focus-visible, select:focus-visible {
    background: var(--cgh-ink-softer);
    border-color: var(--virtual-red);
    box-shadow: 0 0 0 4px rgba(232, 53, 43, 0.18);
}

button {
    background: var(--btn-scrim), linear-gradient(135deg, var(--virtual-blue), var(--cgh-green-deep));
    color: var(--cgh-paper);
    border: none;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
button:hover {
    background: var(--btn-scrim), linear-gradient(135deg, var(--virtual-red), var(--virtual-blue));
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(232, 53, 43, 0.35);
}
button.btn-sair {
    background: var(--btn-scrim), linear-gradient(135deg, var(--virtual-red), var(--virtual-red-hover));
    color: #fff;
    box-shadow: 0 4px 12px rgba(232, 53, 43, 0.25);
}
button.btn-sair:hover {
    background: var(--btn-scrim), linear-gradient(135deg, var(--cgh-fire-orange), var(--virtual-red));
}
button.btn-copiar { background: var(--cgh-line); color: var(--text-main); padding: 6px 12px; font-size: 12px; margin-top: 5px; box-shadow: none; }
button.btn-copiar:hover { background: var(--cgh-ink-softer); color: var(--accent-text); transform: none; }
button.btn-secundario { background: var(--cgh-muted-dim); color: var(--cgh-paper); box-shadow: none; }
button.btn-secundario:hover { background: var(--cgh-ink-softer); color: var(--text-main); transform: none; }

/* Navegação entre módulos/telas é link de verdade (<a>), não botão
   dentro de link — reaproveita a mesma aparência do .btn-secundario
   sem o `button{}` de base, já que a tag é <a>. */
a.btn-secundario {
    background: var(--cgh-muted-dim);
    color: var(--cgh-paper);
    border: none;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: none;
    text-decoration: none;
}
a.btn-secundario:hover { background: var(--cgh-ink-softer); color: var(--text-main); }
button.btn-excel { background: var(--btn-scrim), linear-gradient(135deg, #16a34a, #15803d); box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2); }
button.btn-excel:hover { background: var(--btn-scrim), linear-gradient(135deg, #22c55e, #16a34a); }
button.btn-perigo { background: var(--btn-scrim), linear-gradient(135deg, var(--virtual-red), var(--virtual-red-hover)); padding: 6px 12px; font-size: 12px; box-shadow: none; }
button.btn-perigo:hover { background: var(--btn-scrim), linear-gradient(135deg, var(--cgh-fire-orange), var(--virtual-red-hover)); transform: none; }
button.btn-acao { background: var(--btn-scrim), var(--cgh-fire-orange); padding: 6px 12px; font-size: 12px; box-shadow: none; color: var(--cgh-paper); }
button.btn-acao:hover { background: var(--btn-scrim), var(--cgh-fire-amber); }

/* Sub-navegação dentro da aba Relatórios */
.relatorio-subnav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.relatorio-subnav button {
    background: var(--cgh-ink-soft);
    color: var(--text-main);
    border: 1px solid var(--cgh-line);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
    /* Troca de aba tem que ser instantânea - a transição genérica de
       0.2s do `*` (pensada pra hover/foco) fazia a aba que estava
       saindo e a que está entrando cruzarem cores no meio do caminho,
       e por ~200ms as DUAS apareciam esverdeadas ao mesmo tempo, como
       se estivessem selecionadas (bug reportado no v16.0). */
    transition: none;
}
.relatorio-subnav button.subaba-ativa {
    background: var(--virtual-blue-light);
    color: var(--accent-text);
    border-color: var(--virtual-blue);
}
.subsecao-relatorio { display: none; }
.subsecao-relatorio.subsecao-ativa { display: block; }
.hidden-subaba { display: none; }

/* Navigation Admin */
.admin-nav {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--cgh-line);
    padding-bottom: 12px;
}
.admin-nav button {
    background: var(--cgh-ink-softer);
    color: var(--text-main);
    border-radius: 10px;
    box-shadow: none;
    /* Mesmo motivo do .relatorio-subnav button acima - troca de aba
       instantânea, sem crossfade de cor. */
    transition: none;
}
.admin-nav button.aba-ativa {
    background: var(--btn-scrim), linear-gradient(135deg, var(--virtual-blue), var(--cgh-green-deep));
    color: var(--cgh-paper);
    box-shadow: 0 4px 12px rgba(31, 170, 89, 0.3);
}

/* Dropdown de abas pro mobile — escondido no desktop, mostrado no
   lugar dos botões abaixo do breakpoint (ver media query no fim do
   arquivo). Reaproveita as mesmas funções de troca de aba dos
   botões (onchange="alternarAbaX(this.value)"), então não precisa
   de nenhuma lógica JS nova. */
.aba-select-mobile {
    display: none;
    width: 100%;
    margin-bottom: 20px;
    font-weight: 700;
}

/* Tables */
table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 15px; font-size: 13px; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--cgh-line); }
th { background: var(--cgh-ink-softer); color: var(--text-main); text-transform: uppercase; font-size: 11px; letter-spacing: 0.8px; font-weight: 700; }
tr:hover td { background: rgba(255,255,255,.03); }

/* Marca formulários com grid de colunas fixas (2fr 1fr 1fr auto,
   etc.) pra virarem 1 coluna só no mobile — ver media query no fim
   do arquivo. Fica como classe utilitária porque cada formulário
   tem uma proporção de colunas diferente no desktop (definida no
   próprio style="" inline de cada um); só o comportamento mobile é
   igual pra todos. */
.form-grid-responsive { }

/* Tabelas "operacionais" (as que se usa o dia inteiro: notas,
   usuários, fornecedores, conferência, prioridade fiscal) viram
   cards empilhados no mobile, um por linha, com o nome da coluna
   ao lado do valor (via atributo data-label em cada <td>). */
.tabela-cards-mobile { }

/* Tabelas de Relatórios (mais analíticas, uso ocasional) recebem um
   tratamento mais leve no mobile: primeira coluna fixa + rolagem
   horizontal com sombra de indicação, em vez de virar cards -
   melhor pra comparar várias colunas de números lado a lado. */
.tabela-scroll-sticky { }

/* Status Colors - Linhas (fills translúcidos sobre fundo escuro) */
.linha-amarela { background: var(--amarelo-bg) !important; border-left: 4px solid var(--amarelo-border); }
.linha-vermelha { background: var(--vermelho-bg) !important; border-left: 4px solid var(--vermelho-border); }
.linha-verde { background: var(--verde-bg) !important; border-left: 4px solid var(--verde-border); }
.linha-laranja { background: var(--laranja-bg) !important; border-left: 4px solid var(--laranja-border); }
.linha-roxa { background: var(--roxo-bg) !important; border-left: 4px solid var(--roxo-border); }
.linha-azul { background: var(--azul-bg) !important; border-left: 4px solid var(--azul-border); }

/* Badges (dados/status — mesma fonte mono do Transporte/Cotação de Peças) */
.badge-prioridade, .badge-bloqueado, .badge-motivo, .badge-aberta,
.badge-resolvida, .badge-sistema-recebimento, .badge-sistema-transporte,
.badge-sistema-cotacao, .badge-sistema-compras, .chave-copiar {
    font-family: var(--font-mono);
}

.badge-prioridade {
    background: var(--virtual-red-light);
    color: var(--vermelho-text);
    border: 1px solid var(--virtual-red);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    animation: pulse 2s infinite;
}
.badge-bloqueado {
    background: var(--vermelho-bg);
    color: var(--vermelho-text);
    border: 1px solid var(--vermelho-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}

.badge-motivo {
    background: var(--azul-bg);
    color: var(--azul-text);
    border: 1px solid var(--azul-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}
.badge-aberta {
    background: var(--laranja-bg);
    color: var(--laranja-text);
    border: 1px solid var(--laranja-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}
.badge-resolvida {
    background: var(--verde-bg);
    color: var(--verde-text);
    border: 1px solid var(--verde-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}

/* Tela "Gestão de Usuários" — identifica de qual sistema (Recebimento ou
   Transporte) é cada linha da tabela unificada. Reaproveita as mesmas
   variáveis de cor dos badges acima, sem criar paleta nova. */
.badge-sistema-recebimento {
    background: var(--azul-bg);
    color: var(--azul-text);
    border: 1px solid var(--azul-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}
.badge-sistema-transporte {
    background: var(--laranja-bg);
    color: var(--laranja-text);
    border: 1px solid var(--laranja-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}
.badge-sistema-cotacao {
    background: var(--roxo-bg);
    color: var(--roxo-text);
    border: 1px solid var(--roxo-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}
.badge-sistema-compras {
    background: var(--amarelo-bg);
    color: var(--amarelo-text);
    border: 1px solid var(--amarelo-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}
.badge-sistema-quadro {
    background: var(--verde-bg);
    color: var(--verde-text);
    border: 1px solid var(--verde-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}
.badge-sistema-garantia {
    background: var(--vermelho-bg);
    color: var(--vermelho-text);
    border: 1px solid var(--vermelho-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}
.badge-sistema-controle_vencimento {
    background: var(--ciano-bg);
    color: var(--ciano-text);
    border: 1px solid var(--ciano-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}
.badge-sistema-financeiro {
    background: var(--rosa-bg);
    color: var(--rosa-text);
    border: 1px solid var(--rosa-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}
.badge-sistema-dre {
    background: var(--indigo-bg);
    color: var(--indigo-text);
    border: 1px solid var(--indigo-border);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}

/* Linha de edição inline aberta abaixo de um usuário na tabela. */
.linha-edicao-usuario td {
    background: var(--azul-bg) !important;
}

/* Barra de filtros (busca + selects) e controles de paginação da tela
   de usuários e do histórico de auditoria. */
.barra-filtros-usuarios {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 15px;
}
.paginacao-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 13px;
    color: var(--text-main);
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Screens Routing */
.tela { display: none; }
.tela.ativa { display: block; }
.secao-admin { display: none; }
.secao-admin.ativa { display: block; }

/* Layout Structure */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--cgh-line);
    padding-bottom: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 14px;
}

.box-alerta {
    display: none;
    margin-top: 15px;
    padding: 14px;
    background: var(--virtual-red-light);
    border: 1px solid var(--virtual-red);
    color: var(--text-main);
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
}

.box-bloqueio {
    display: none;
    margin-top: 15px;
    padding: 14px;
    background: var(--vermelho-bg);
    border: 1px solid var(--vermelho-border);
    color: var(--text-main);
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
}

.card-secao {
    background: var(--cgh-ink-soft);
    border: 1px solid var(--cgh-line);
    padding: 28px;
    border-radius: 16px;
    margin-bottom: 25px;
}

/* Filter Box & Chips */
.box-filtros {
    background: var(--cgh-ink-soft);
    padding: 22px;
    border-radius: 14px;
    margin-bottom: 20px;
    border: 1px solid var(--cgh-line);
}
.filtros-grid { display: flex; flex-direction: column; gap: 16px; }
.filtros-linha-inferior { display: grid; grid-template-columns: 1fr 1fr auto; gap: 15px; align-items: end; }
.checkbox-group { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cgh-ink-softer);
    border: 1px solid var(--cgh-line);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    color: var(--text-main);
    font-weight: 600;
}

.filter-chip:hover {
    border-color: var(--virtual-blue);
    color: var(--accent-text);
}

.filter-chip input {
    width: auto;
    margin: 0;
    cursor: pointer;
}

/* Respiro interno pras listas com rolagem própria (Últimas Pendências,
   Últimas Ações etc.) — antes a tabela encostava direto na borda do
   contêiner (ver auditoria v11.8). */
.lista-scroll-interna { padding: 4px; }

/* Card de Importação Excel */
.card-import-excel {
    background: var(--cgh-ink-softer);
    border: 2px dashed var(--cgh-line);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.excel-header h4 {
    margin: 0 0 6px 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
}

.excel-header p {
    margin: 0 0 16px 0;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.4;
}

.excel-header code {
    background: var(--virtual-blue-light);
    color: var(--accent-text);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.excel-upload-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Botão Selecionar Planilha */
.btn-selecionar-arquivo {
    background-color: var(--cgh-ink-soft);
    border: 1px solid var(--cgh-line);
    color: var(--text-main);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.btn-selecionar-arquivo:hover {
    background-color: var(--cgh-ink-softer);
    border-color: var(--virtual-blue);
    color: var(--accent-text);
}

/* Label Dinâmica do Arquivo */
.status-arquivo {
    font-size: 13px;
    color: var(--text-main);
    font-style: italic;
    flex: 1;
    min-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-arquivo.arquivo-carregado {
    color: var(--accent-text);
    font-style: normal;
    font-weight: 700;
}

/* Botão de Envio/Importar */
.btn-importar-excel {
    background: var(--btn-scrim), linear-gradient(135deg, #16a34a, #15803d);
    border: none;
    color: white;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
}

.btn-importar-excel:hover {
    background: var(--btn-scrim), linear-gradient(135deg, #22c55e, #16a34a);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.3);
}

/* ===================================== */
/* RELATÓRIOS (Painel Admin)              */
/* ===================================== */
.relatorio-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 25px;
}

.stat-card {
    background: var(--cgh-ink-soft);
    border: 1px solid var(--cgh-line);
    border-left: 5px solid var(--virtual-blue);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-card .stat-numero {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat-card .stat-label {
    font-size: 12px;
    color: var(--text-main);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.stat-card.stat-verde { border-left-color: var(--verde-border); }
.stat-card.stat-azul { border-left-color: var(--azul-border); }
.stat-card.stat-laranja { border-left-color: var(--laranja-border); }

.relatorio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.relatorio-bloco {
    background: var(--cgh-ink-soft);
    border: 1px solid var(--cgh-line);
    border-radius: 14px;
    padding: 20px 22px;
}

.relatorio-bloco h4 {
    margin-bottom: 4px;
}

.relatorio-sub {
    font-size: 12px;
    color: var(--text-main);
    margin: 0 0 8px 0;
}

.ranking-list {
    list-style: none;
    counter-reset: ranking;
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ranking-list li {
    counter-increment: ranking;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--cgh-ink-softer);
    border: 1px solid var(--cgh-line);
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 700;
    color: var(--text-main);
}

.ranking-list li::before {
    content: counter(ranking) "º";
    background: var(--virtual-blue);
    color: var(--cgh-paper);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-right: 12px;
}

.ranking-list li:nth-child(1)::before { background: var(--cgh-fire-amber); }
.ranking-list li:nth-child(2)::before { background: var(--cgh-muted); }
.ranking-list li:nth-child(3)::before { background: var(--cgh-fire-orange); }

.ranking-list .ranking-qtd {
    background: var(--virtual-blue-light);
    color: var(--accent-text);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
}

@media (max-width: 768px) {
    .relatorio-cards { grid-template-columns: repeat(2, 1fr); }
    .relatorio-grid { grid-template-columns: 1fr; }
}
/* Indicador de status da conexão em tempo real */
.status-realtime {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}
.status-realtime-conectando { background: var(--amarelo-bg); color: var(--amarelo-text); }
.status-realtime-ok { background: var(--verde-bg); color: var(--verde-text); }
.status-realtime-erro { background: var(--vermelho-bg); color: var(--vermelho-text); }

/* Splash screen inicial (CGH Sistemas) */
.cgh-splash {
    position: fixed;
    inset: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--cgh-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease;
}
.cgh-splash.cgh-splash-oculta {
    opacity: 0;
    pointer-events: none;
}

/* Wordmark de texto da marca CGH (usado no login, onde a logo é só o ícone) */
.cgh-wordmark {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    color: var(--text-main);
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

/* Rodapé de copyright */
.app-footer {
    width: 100%;
    flex-shrink: 0;
    text-align: center;
    padding: 14px 10px;
    font-size: 0.78rem;
    color: var(--cgh-muted-dim);
    margin-top: 24px;
}

/* Versão + data/hora da última atualização - bem discreto, uma
   linha a mais embaixo do copyright, não deve chamar atenção. */
.versao-rodape {
    font-size: 0.68rem;
    color: var(--cgh-muted-dim);
    opacity: 0.65;
    margin-top: 2px;
}

/* ============================================================
   MOBILE-FIRST: TABLET (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
    .container { padding: 22px 16px; width: 100%; border-radius: 14px; }
    .admin-nav { flex-wrap: wrap; gap: 8px; }
    .admin-nav button { flex: 1 1 auto; font-size: 13px; padding: 10px 14px; }
}

/* ============================================================
   MOBILE-FIRST: CELULAR (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
    body { padding: 0; }
    .container { width: 100%; padding: 16px 12px; border-radius: 0; min-height: 100vh; }

    /* Cabeçalho: empilha logo/título em cima, botões embaixo, cada
       botão ocupando a largura toda pra facilitar o toque. */
    .header { flex-direction: column; align-items: stretch; }
    .header > div:first-child { justify-content: flex-start; }
    .header > div:last-child { flex-direction: column; width: 100%; }
    .header > div:last-child button:not(.btn-tema), .header > div:last-child a { width: 100%; }
    .header button:not(.btn-tema) { width: 100%; }
    .header > div:last-child .btn-tema { align-self: flex-end; }
    .header h2 { font-size: 19px; }

    /* Abas: escondem os botões, mostram um <select> nativo no lugar
       (menu colapsável) - reaproveita as mesmas funções onchange. */
    .admin-nav, .relatorio-subnav { display: none; }
    .aba-select-mobile { display: block; }

    /* Formulários com grid de colunas fixas viram 1 coluna só. */
    .form-grid-responsive { grid-template-columns: 1fr !important; }

    /* Botões e campos com área de toque confortável (mínimo ~44px). */
    button, .btn-secundario, .btn-sair, .btn-excel, input, select {
        min-height: 44px;
        font-size: 14px;
    }
    .filter-chip { padding: 10px 14px; }

    /* --- Tabelas operacionais: viram cards empilhados --- */
    .tabela-cards-mobile thead { display: none; }
    .tabela-cards-mobile, .tabela-cards-mobile tbody,
    .tabela-cards-mobile tr, .tabela-cards-mobile td {
        display: block; width: 100%; box-sizing: border-box;
    }
    .tabela-cards-mobile tr {
        margin-bottom: 14px;
        border: 1px solid var(--cgh-line);
        border-radius: 12px;
        padding: 4px 0;
        background: var(--cgh-ink-soft);
    }
    .tabela-cards-mobile tr:hover td { background: transparent; }
    .tabela-cards-mobile td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--cgh-ink-softer);
        text-align: left;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .tabela-cards-mobile td:last-child { border-bottom: none; }
    .tabela-cards-mobile td::before {
        content: attr(data-label);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0.5px;
        color: var(--text-main);
    }
    /* A chave de acesso é uma string comprida sem espaço nenhum -
       precisa de quebra "dura" pra não vazar pra fora do card. */
    .tabela-cards-mobile .chave-copiar {
        word-break: break-all;
        white-space: normal !important;
        display: inline-block;
        max-width: 100%;
    }
    /* Célula com controles (select + botão lado a lado) fica melhor
       em linha do que empilhada - largura livre, sem forçar quebra. */
    .tabela-cards-mobile td:has(select), .tabela-cards-mobile td:has(button) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .tabela-cards-mobile td:has(select)::before, .tabela-cards-mobile td:has(button)::before {
        width: 100%;
    }
    /* Célula sem data-label (ex: linha de "nenhum resultado") continua
       centralizada e sem o rótulo fantasma. */
    .tabela-cards-mobile td:not([data-label]) { align-items: center; text-align: center; }
    .tabela-cards-mobile td:not([data-label])::before { content: none; }

    /* --- Tabelas de relatório: primeira coluna fixa + sombra de
           rolagem, em vez de virar cards (ficam melhores comparando
           números lado a lado do que empilhadas). --- */
    .tabela-scroll-sticky-wrap {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tabela-scroll-sticky-wrap::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 18px;
        background: linear-gradient(to right, transparent, rgba(0,0,0,0.35));
        pointer-events: none;
    }
    .tabela-scroll-sticky th:first-child,
    .tabela-scroll-sticky td:first-child {
        position: sticky;
        left: 0;
        background: var(--cgh-ink-soft);
        box-shadow: 2px 0 4px rgba(0,0,0,0.25);
    }
    .tabela-scroll-sticky th:first-child { background: var(--cgh-ink-softer); }

    /* Listas com altura fixa (pensada pro desktop, várias linhas
       compactas cabendo em ~300px) cortam CARDS no meio no mobile,
       já que cada card é bem mais alto que uma linha de tabela.
       Sem isso, a última linha ("Ações") de alguns cards ficava
       escondida atrás de uma rolagem interna que passava
       despercebida. */
    .lista-scroll-interna { max-height: none !important; overflow-y: visible !important; }

    /* Cards de estatística/relatório e grids em geral, 1 por linha. */
    .relatorio-cards { grid-template-columns: 1fr 1fr !important; }
    .relatorio-grid { grid-template-columns: 1fr !important; }
    .stat-card { padding: 16px !important; }
    .stat-numero { font-size: 28px !important; }
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   Desliga a animação de piscar do badge de prioridade e a
   transição genérica de hover/foco pra quem pede menos movimento
   no sistema operacional. A splash ainda desaparece (opacity),
   só sem a transição suave — troca instantânea em vez de fade.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.001ms !important;
    }
    .cgh-splash {
        transition-duration: 0.001ms !important;
    }
    .badge-prioridade {
        animation: none;
    }
    button:hover {
        transform: none;
    }
    button.btn-copiar:hover,
    button.btn-secundario:hover,
    button.btn-perigo:hover {
        transform: none;
    }
}

/* ============================================================
   TOAST (substitui alert() nativo — não bloqueia a thread,
   anuncia via aria-live pra leitor de tela, e não trava o app
   esperando o usuário clicar OK)
   ============================================================ */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 92%;
    max-width: 480px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: var(--cgh-ink-softer);
    border: 1px solid var(--cgh-line);
    border-left: 4px solid var(--virtual-blue);
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: toast-entrar 0.25s ease;
}
.toast.toast-erro { border-left-color: var(--virtual-red); }
.toast.toast-sucesso { border-left-color: var(--cgh-green-bright); }
.toast .toast-fechar {
    background: none;
    box-shadow: none;
    padding: 0;
    margin-left: auto;
    color: var(--cgh-muted);
    font-size: 18px;
    line-height: 1;
    flex: none;
}
.toast .toast-fechar:hover { color: var(--text-main); background: none; transform: none; }
@keyframes toast-entrar {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
}

/* Cartão de opção de módulo (tela "Escolher Módulo") — link de
   verdade estilizado como card clicável, com estado de hover/foco. */
.modulo-opcao {
    background: var(--cgh-ink-soft);
    border: 1px solid var(--cgh-line);
    border-radius: 12px;
}
.modulo-opcao:hover {
    background: var(--cgh-ink-softer);
    border-color: var(--virtual-blue);
}

/* ============================================================
   BOTÃO DE ALTERNAR TEMA (claro/escuro) — injetado por tema.js.
   Ícone-only, mesma altura/raio dos outros botões do cabeçalho;
   fora de um cabeçalho vira um botão flutuante (login, escolher
   módulo etc).
   ============================================================ */
.btn-tema {
    background: var(--cgh-ink-softer);
    color: var(--text-main);
    border: 1px solid var(--cgh-line);
    box-shadow: none;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    flex: none;
}
.btn-tema:hover {
    background: var(--cgh-ink-soft);
    border-color: var(--virtual-blue);
    color: var(--accent-text);
    transform: none;
}
.btn-tema-flutuante {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    z-index: 9999;
    border-radius: 50%;
    height: 44px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
@media (max-width: 640px) {
    .btn-tema { min-height: 44px; }
}

/* Aviso de vencimento da licença (tela "Escolha o módulo", só para o admin). */
.aviso-licenca {
    background: var(--amarelo-bg);
    border: 1px solid var(--amarelo-border);
    color: var(--amarelo-text);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    margin: 0 0 16px;
}