/* =========================================================================
   REFEICAO CIDIS - camada de design GUO

   Este arquivo NAO substitui o styles.css: ele entra depois dele e troca o
   desenho pela linguagem visual do ecossistema GUO (portal guo-acesso-principal
   e os modulos guoweb), sem tocar em nenhum comportamento.

   O que vem do GUO:
     - barra do topo clara, com fio laranja (#e67e22) embaixo e marca em caixa alta
     - fundo #f8fafc, cartoes brancos de canto 12/20 com borda #e2e8f0
     - cartao de numero com faixa colorida na lateral e valor em letra mono
     - rotulo miudo em caixa alta, letra espacada, cinza #94a3b8
     - tabela com cabecalho cinza-claro em caixa alta e linha fina
     - campo de busca cinza-claro; foco azul; acao principal laranja com brilho
     - pastilhas de estado (verde, azul, ambar, vermelho) e ponto verde pulsando

   Para voltar ao desenho anterior basta remover o <link> deste arquivo nos
   templates. Nada mais depende dele.
   ========================================================================= */

/* =========================================================================
   1. TOKENS DO GUO
   ========================================================================= */

:root {
    /* Identidade */
    --guo-laranja: #e67e22;
    --guo-laranja-forte: #d35400;
    --guo-laranja-texto: #b3500a;
    --guo-laranja-claro: #f97316;
    --guo-azul: #2563eb;
    --guo-azul-claro: #3b82f6;
    --guo-verde: #16a34a;
    --guo-verde-claro: #22c55e;
    --guo-ambar: #d97706;
    --guo-vermelho: #dc3545;
    --guo-roxo: #8b5cf6;
    --guo-ciano: #06b6d4;

    /* Neutros do GUO */
    --guo-900: #0f172a;
    --guo-800: #1e293b;
    --guo-700: #334155;
    --guo-600: #475569;
    --guo-500: #64748b;
    --guo-400: #94a3b8;
    --guo-300: #cbd5e1;
    --guo-200: #e2e8f0;
    --guo-100: #f1f5f9;
    --guo-50: #f8fafc;

    /* Formas */
    --guo-raio-p: 8px;
    --guo-raio-m: 12px;
    --guo-raio-g: 20px;
    --guo-sombra: 0 1px 3px rgba(0, 0, 0, 0.06);
    --guo-sombra-media: 0 4px 12px rgba(0, 0, 0, 0.08);
    --guo-sombra-alta: 0 20px 40px rgba(0, 0, 0, 0.1);

    /* Letras */
    --guo-fonte-titulo: 'Outfit', 'Segoe UI', system-ui, sans-serif;
    --guo-fonte: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --guo-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
}

/* Remapeia os nomes que o styles.css ja usa. A partir daqui, tudo que era
   laranja de marca, fundo, borda e texto passa a falar GUO. */
:root {
    --accent-color: var(--guo-laranja);
    --accent-forte: var(--guo-laranja-forte);
    --accent-forte-hover: #b8480c;
    --accent-forte-texto: #ffffff;
    --accent-suave: rgba(230, 126, 34, 0.14);
    --accent-texto: var(--guo-laranja-texto);

    --bg-color: var(--guo-50);
    --bg-degrade: radial-gradient(circle at 15% 50%, rgba(206, 214, 230, 0.15), transparent 25%),
                  radial-gradient(circle at 85% 30%, rgba(225, 230, 240, 0.2), transparent 25%),
                  var(--guo-50);
    --card-bg: #ffffff;
    --input-bg: var(--guo-50);
    --suave-bg: var(--guo-100);
    --linha-apagada-bg: var(--guo-50);

    --text-color: var(--guo-800);
    --muted-color: var(--guo-500);
    --fraco-color: var(--guo-400);

    --border-color: var(--guo-200);
    --border-campo: var(--guo-300);
    --hover-bg: #fff8f1;

    --ok-color: #15803d;
    --ok-bg: #f0fdf4;
    --neutro-color: var(--guo-500);
    --alerta-color: #b91c1c;
    --alerta-bg: #fef2f2;
    --alerta-borda: #fecaca;
    --aviso-color: #92400e;
    --aviso-bg: #fffbeb;
    --info-color: #1d4ed8;
    --info-bg: #eff6ff;

    --sombra-leve: var(--guo-sombra);
    --sombra-media: var(--guo-sombra-media);
    --sombra-forte: 0 8px 30px rgba(15, 23, 42, 0.12);
    --sombra-cartao: var(--guo-sombra-alta);

    --cta-brilho: rgba(230, 126, 34, 0.38);
    --cta-realce: rgba(255, 255, 255, 0.24);
}

/* Tema escuro: a mesma familia do GUO, a noite. Azul-escuro de fundo, cartao
   um tom acima, laranja mais claro para nao apagar no fundo. */
html[data-tema="escuro"] {
    --accent-color: #f58838;
    --accent-forte: #f58838;
    --accent-forte-hover: #ffa257;
    --accent-forte-texto: #12141c;
    --accent-suave: rgba(245, 136, 56, 0.2);
    --accent-texto: #ffb27a;

    --bg-color: #12141c;
    --bg-degrade: radial-gradient(circle at 14% -8%, rgba(230, 126, 34, 0.13), transparent 32%),
                  radial-gradient(circle at 96% 4%, rgba(76, 110, 245, 0.09), transparent 30%),
                  #12141c;
    --card-bg: #1b1d28;
    --input-bg: #14161f;
    --suave-bg: #232633;
    --linha-apagada-bg: #171923;

    --text-color: #edf0f7;
    --muted-color: #93a1b8;
    --fraco-color: #6b7280;

    --border-color: #2a2d3d;
    --border-campo: #3a3f52;
    --hover-bg: rgba(245, 136, 56, 0.1);

    --ok-color: #35e0a1;
    --ok-bg: rgba(53, 224, 161, 0.13);
    --neutro-color: #93a1b8;
    --alerta-color: #ff8d80;
    --alerta-bg: rgba(255, 141, 128, 0.13);
    --alerta-borda: rgba(255, 141, 128, 0.32);
    --aviso-color: #ffca63;
    --aviso-bg: rgba(255, 202, 99, 0.12);
    --info-color: #7fa2ff;
    --info-bg: rgba(127, 162, 255, 0.13);

    --sombra-leve: 0 1px 3px rgba(0, 0, 0, 0.5);
    --sombra-media: 0 8px 24px rgba(0, 0, 0, 0.45);
    --sombra-forte: 0 18px 40px rgba(0, 0, 0, 0.5);
    --sombra-cartao: 0 26px 60px rgba(0, 0, 0, 0.55);

    --guo-900: #f4f6fb;
    --guo-800: #edf0f7;
    --guo-700: #c9d1e2;
    --guo-600: #a4aec4;
    --guo-500: #93a1b8;
    --guo-400: #7c879e;
    --guo-300: #3a3f52;
    --guo-200: #2a2d3d;
    --guo-100: #232633;
    --guo-50: #191b25;
    --guo-azul: #7fa2ff;
}

/* =========================================================================
   2. BASE E TIPOGRAFIA
   ========================================================================= */

body {
    font-family: var(--guo-fonte);
    font-size: 14px;
    line-height: 1.55;
    background-color: var(--bg-color);
    background-image: var(--bg-degrade);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

main {
    max-width: 1400px;
    margin: 26px auto 60px;
    padding: 0 clamp(14px, 3vw, 40px);
}

h1, h2, .guo-titulo {
    font-family: var(--guo-fonte-titulo);
    letter-spacing: -0.4px;
}

a {
    color: var(--guo-azul);
}

/* =========================================================================
   3. BARRA DO TOPO (navbar dos modulos do GUO)
   ========================================================================= */

.app-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--guo-laranja);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    padding: 11px clamp(14px, 3vw, 32px);
    gap: 14px;
    align-items: center;
}

html[data-tema="escuro"] .app-header {
    background: rgba(27, 29, 40, 0.92);
}

.logo {
    height: 40px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

/* A marca ganha o desenho do GUO: nome em caixa alta com peso alto, a sigla
   do sistema no laranja, e a linha miuda embaixo explicando do que se trata. */
.app-header h1 {
    font-family: var(--guo-fonte-titulo);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--guo-900);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.app-header h1::after {
    content: "Contingência climática \00B7 DOTR";
    font-family: var(--guo-fonte);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--guo-400);
}

/* O nome do arquivo de logo e a marca da Copel: o titulo ao lado vira a
   assinatura do sistema, no mesmo par marca + assinatura do portal. */
.app-header h1::first-letter {
    color: var(--guo-laranja);
}

.usuario-box {
    gap: 2px;
}

.usuario-nome {
    font-family: var(--guo-fonte-titulo);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--guo-900);
}

.usuario-perfil {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--guo-500);
}

.usuario-acoes {
    gap: 4px;
    margin-top: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Link do topo no desenho do item de menu do GUO: cinza, peso 600, sobe um
   pixel no ponteiro. */
.link-topo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--guo-500);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--guo-raio-p);
    padding: 5px 10px;
    transition: all 0.2s ease;
}

.link-topo:hover,
.link-topo:focus-visible {
    color: var(--guo-900);
    background: var(--guo-100);
    border-color: var(--guo-200);
    transform: translateY(-1px);
    border-bottom-color: var(--guo-200);
}

html[data-tema="escuro"] .link-topo:hover {
    background: #232633;
    color: #edf0f7;
}

.botao-tema {
    width: 34px;
    height: 34px;
    border: 1px solid var(--guo-200);
    border-radius: 10px;
    background: #ffffff;
    color: var(--guo-500);
}

html[data-tema="escuro"] .botao-tema {
    background: #232633;
}

.botao-tema:hover {
    color: var(--guo-laranja);
    border-color: var(--guo-laranja);
    background: var(--guo-50);
}

/* =========================================================================
   4. PAINEIS (a caixa branca de canto grande do GUO)
   ========================================================================= */

.busca-bloco,
.progresso,
.tipo-refeicao,
.controls,
.resumo-secao,
.report-container,
.bloco,
.cartao {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-g);
    box-shadow: var(--guo-sombra);
    padding: 18px 20px;
    margin-bottom: 16px;
}

.report-container {
    padding: 0;
    overflow: hidden;
}

/* Rotulo miudo em caixa alta: e a assinatura tipografica do GUO. */
.rotulo-grupo,
.campo-rotulo,
.escala-turnos-rotulo,
.janta-modo-rotulo {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--guo-400);
}

/* =========================================================================
   5. BUSCA E FILTROS
   ========================================================================= */

.busca-bloco {
    padding: 14px 16px;
}

.busca-caixa {
    background: var(--guo-100);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-p);
    padding: 2px 12px;
}

html[data-tema="escuro"] .busca-caixa {
    background: #14161f;
}

.busca-caixa input {
    font-family: var(--guo-fonte);
    font-size: 14px;
    /* O respiro dos lados e o espaco do icone (esquerda) e do botao de limpar
       (direita): sem ele o texto passa por baixo da lupa. */
    padding: 11px 42px 11px 42px;
    background: transparent;
    color: var(--text-color);
    border: none;
}

.busca-caixa input::placeholder {
    color: var(--guo-400);
}

.busca-caixa:focus-within {
    border-color: var(--guo-azul);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.busca-caixa:focus-within input,
.busca-caixa input:focus {
    box-shadow: none;
    border-color: transparent;
    outline: none;
}

.busca-icone {
    color: var(--guo-400);
}

.filtros-avancados {
    margin-top: 12px;
}

.filtros-avancados > summary {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--guo-500);
    background: var(--guo-100);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-p);
    padding: 9px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filtros-avancados > summary:hover {
    color: var(--guo-900);
    background: var(--suave-bg);
}

.filtros-avancados[open] > summary {
    color: var(--guo-laranja-texto);
    background: var(--accent-suave);
    border-color: rgba(230, 126, 34, 0.3);
    margin-bottom: 14px;
}

.filtros-conteudo {
    gap: 14px;
}

.campo select,
.campo input,
.lista-busca input {
    font-family: var(--guo-fonte);
    font-size: 13px;
    background: var(--guo-50);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-p);
    padding: 9px 12px;
    color: var(--text-color);
}

html[data-tema="escuro"] .campo select,
html[data-tema="escuro"] .campo input,
html[data-tema="escuro"] .lista-busca input {
    background: #14161f;
}

.campo select:focus,
.campo input:focus,
.lista-busca input:focus,
select:focus-visible {
    border-color: var(--guo-azul);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    outline: none;
}

/* =========================================================================
   6. NUMEROS DA COLETA (cartao de indicador, com faixa na lateral)
   ========================================================================= */

.progresso {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    margin-bottom: 16px;
}

.progresso-numeros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 0;
    padding: 0;
    border: none;
}

.p-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-m);
    box-shadow: var(--guo-sombra);
    padding: 16px 18px 16px 22px;
    overflow: hidden;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--guo-500);
}

/* A faixa colorida na lateral e o detalhe que identifica o cartao do GUO. */
.p-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--guo-400) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.p-item strong {
    order: -1;
    font-family: var(--guo-mono);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--guo-800);
    font-variant-numeric: tabular-nums;
}

.p-sim::before {
    background: linear-gradient(180deg, var(--guo-verde) 0%, rgba(255, 255, 255, 0.15) 100%);
}

.p-sim strong {
    color: #15803d;
}

.p-nao::before {
    background: linear-gradient(180deg, var(--guo-vermelho) 0%, rgba(255, 255, 255, 0.15) 100%);
}

.p-nao strong {
    color: #b91c1c;
}

.p-pend::before {
    background: linear-gradient(180deg, var(--guo-laranja) 0%, rgba(255, 255, 255, 0.15) 100%);
}

.p-pend strong {
    color: var(--guo-laranja-texto);
}

html[data-tema="escuro"] .p-sim strong {
    color: #35e0a1;
}

html[data-tema="escuro"] .p-nao strong {
    color: #ff8d80;
}

html[data-tema="escuro"] .p-pend strong {
    color: #f58838;
}

.progresso-barra {
    height: 8px;
    background: var(--guo-100);
    border-radius: 999px;
    margin-top: 16px;
    overflow: hidden;
}

html[data-tema="escuro"] .progresso-barra {
    background: #232633;
}

.progresso-preenchido {
    background: linear-gradient(90deg, var(--guo-laranja) 0%, var(--guo-laranja-claro) 100%);
    border-radius: 999px;
}

.progresso-rodape {
    margin-top: 10px;
    font-size: 12px;
    color: var(--guo-500);
}

/* Estado da sincronizacao: pastilha com ponto verde, igual a do portal. */
.sincronia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--guo-500);
    background: var(--guo-100);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 4px 11px 4px 9px;
}

.sincronia:not(:empty)::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--guo-verde-claro);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    animation: guo-pulso 1.8s ease-in-out infinite;
}

@keyframes guo-pulso {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sincronia:not(:empty)::before { animation: none; }
}

/* =========================================================================
   7. TIPO DA LISTA E CONTROLES
   ========================================================================= */

.tipo-refeicao {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.tipo-opcoes,
.janta-toggle {
    background: var(--guo-100);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-m);
    padding: 4px;
    gap: 4px;
}

html[data-tema="escuro"] .tipo-opcoes,
html[data-tema="escuro"] .janta-toggle {
    background: #14161f;
}

.tipo-opcoes .tipo-btn,
.janta-modo-opcao {
    font-family: var(--guo-fonte);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--guo-500);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--guo-raio-p);
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.tipo-opcoes .tipo-btn:hover,
.janta-modo-opcao:hover {
    color: var(--guo-900);
    background: var(--suave-bg);
}

.tipo-opcoes .tipo-btn.ativo,
.janta-modo-opcao.ativo {
    color: #ffffff;
    background: var(--guo-laranja);
    border-color: var(--guo-laranja-forte);
    box-shadow: 0 0 12px rgba(230, 126, 34, 0.35);
}

.tipo-opcoes .tipo-btn.ativo:hover,
.janta-modo-opcao.ativo:hover {
    background: var(--guo-laranja-forte);
}

.tipo-aviso {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--guo-400);
}

.controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 18px;
}

/* =========================================================================
   8. BOTOES (o botao de modulo do GUO)
   ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--guo-fonte);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #495057;
    background: var(--guo-50);
    border: 1px solid var(--guo-200);
    border-radius: var(--guo-raio-p);
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

html[data-tema="escuro"] .btn {
    background: #232633;
    color: var(--guo-700);
    border-color: var(--border-color);
}

.btn:hover {
    background: #e9ecef;
    color: #212529;
    border-color: var(--guo-300);
    transform: translateY(-1px);
}

html[data-tema="escuro"] .btn:hover {
    background: #2c3040;
    color: #edf0f7;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    color: #ffffff;
    background: var(--guo-laranja);
    border-color: var(--guo-laranja-forte);
    box-shadow: 0 0 12px rgba(230, 126, 34, 0.32);
}

.btn-primary:hover {
    background: var(--guo-laranja-forte);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(230, 126, 34, 0.42);
}

.btn-pequeno {
    font-size: 12px;
    padding: 7px 12px;
}

.btn-largo {
    width: 100%;
    font-size: 14px;
    padding: 13px 18px;
    border-radius: var(--guo-raio-p);
}

.btn-perigo,
#clear-edits {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
}

.btn-perigo:hover,
#clear-edits:hover {
    background: #dc3545;
    border-color: #b91c1c;
    color: #ffffff;
}

/* =========================================================================
   9. PASTILHAS, BALOES E AVISOS
   ========================================================================= */

.chip-lotacao {
    font-family: var(--guo-fonte);
    font-size: 12px;
    font-weight: 700;
    color: var(--guo-600);
    background: var(--guo-100);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 7px 14px;
    transition: all 0.2s ease;
}

html[data-tema="escuro"] .chip-lotacao {
    background: #232633;
}

.chip-lotacao:hover {
    color: var(--guo-900);
    border-color: var(--guo-300);
    background: var(--suave-bg);
}

.chip-lotacao.ativo {
    color: #ffffff;
    background: var(--guo-laranja);
    border-color: var(--guo-laranja-forte);
    box-shadow: 0 0 10px rgba(230, 126, 34, 0.3);
}

.chip-lotacao .chip-conta,
.chip-escala .chip-conta {
    font-family: var(--guo-mono);
    font-size: 11px;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.07);
    border-radius: 999px;
    padding: 1px 7px;
}

.chip-lotacao.ativo .chip-conta {
    background: rgba(255, 255, 255, 0.25);
}

.chip-pequeno {
    font-size: 11.5px;
    padding: 6px 12px;
}

.marca-escala,
.marca-bsc {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 9px;
}

.alerta,
.mensagem {
    border-radius: var(--guo-raio-m);
    border: 1px solid var(--alerta-borda);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
}

.alerta-ok,
.mensagem.ok {
    color: var(--ok-color);
    background: var(--ok-bg);
    border-color: rgba(22, 163, 74, 0.25);
}

.alerta-erro,
.mensagem.erro {
    color: var(--alerta-color);
    background: var(--alerta-bg);
}

.mensagem.aviso {
    color: var(--aviso-color);
    background: var(--aviso-bg);
    border-color: rgba(217, 119, 6, 0.25);
}

/* =========================================================================
   10. TABELA (guo-table)
   ========================================================================= */

.table-wrapper {
    border-radius: var(--guo-raio-m);
    border: 1px solid var(--border-color);
    overflow: hidden;
    background: var(--card-bg);
}

.report-container .table-wrapper {
    border: none;
    border-radius: 0;
}

#data-table {
    font-family: var(--guo-fonte);
    font-size: 13px;
    border-collapse: collapse;
    width: 100%;
}

#data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--guo-100);
    color: var(--guo-500);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-align: left;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--border-color);
}

html[data-tema="escuro"] #data-table thead th {
    background: #232633;
}

#data-table tbody td {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    vertical-align: middle;
}

#data-table tbody tr:last-child td {
    border-bottom: none;
}

#data-table tbody tr:hover td {
    background: var(--guo-100);
}

html[data-tema="escuro"] #data-table tbody tr:hover td {
    background: #232633;
}

#data-table .col-check,
#data-table .col-marcar,
#data-table .col-status {
    text-align: center;
}

#data-table input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--guo-laranja);
    cursor: pointer;
}

/* Linha marcada: fundo de pastilha aprovada, com fio na lateral, no mesmo
   espirito das linhas de estado do GUO.
 *
 * O fio e UMA barra, na primeira celula da linha. Antes ele ia em TODA celula
 * e, no celular, o cartao empilha as celulas em linhas de largura diferente:
 * cada uma puxava a propria barra verde para dentro do cartao, em cima do nome,
 * da matricula e da lotacao. Medido em 08/10/2026, na tela de 390 px: verde
 * saturado em x=15 (a borda do cartao, correta) e tambem em x=33, x=67 e
 * x=264. Corrigido na estrutura, nao escondido. */
#data-table tbody tr.linha-sim td {
    background: var(--ok-bg);
}

#data-table tbody tr.linha-nao td {
    background: var(--alerta-bg);
}

#data-table tbody tr.linha-sim td:first-child {
    box-shadow: inset 3px 0 0 var(--guo-verde);
}

#data-table tbody tr.linha-nao td:first-child {
    box-shadow: inset 3px 0 0 var(--guo-vermelho);
}

#data-table tbody tr.linha-sim:hover td {
    background: #e6f9ee;
}

#data-table tbody tr.linha-nao:hover td {
    background: #fde9e7;
}

/* No escuro o realce da linha marcada tem que ser um veu, nao uma cor clara:
   texto claro sobre verde-claro nao se le. */
html[data-tema="escuro"] #data-table tbody tr.linha-sim:hover td {
    background: rgba(53, 224, 161, 0.16);
}

html[data-tema="escuro"] #data-table tbody tr.linha-nao:hover td {
    background: rgba(255, 141, 128, 0.16);
}

.btn-marcar {
    font-family: var(--guo-fonte);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border-radius: var(--guo-raio-p);
    padding: 6px 14px;
    border: 1px solid var(--guo-200);
    background: var(--guo-50);
    color: var(--guo-600);
}

.btn-marcar-sim.ativo {
    background: var(--guo-verde);
    border-color: #15803d;
    color: #ffffff;
}

.btn-marcar-nao.ativo {
    background: var(--guo-vermelho);
    border-color: #b91c1c;
    color: #ffffff;
}

.vazio {
    font-size: 13px;
    font-weight: 600;
    color: var(--guo-400);
    text-align: center;
    padding: 26px 16px;
}

.dica {
    font-size: 12.5px;
    color: var(--guo-500);
    background: var(--guo-100);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-m);
    padding: 12px 16px;
}

.dica kbd {
    font-family: var(--guo-mono);
    font-size: 11px;
    background: #ffffff;
    border: 1px solid var(--guo-200);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 1px 5px;
}

html[data-tema="escuro"] .dica kbd {
    background: #232633;
}

/* =========================================================================
   11. LISTA DE ESCOLHA MULTIPLA
   ========================================================================= */

.lista-botao {
    font-family: var(--guo-fonte);
    font-size: 13px;
    font-weight: 600;
    background: var(--guo-50);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-p);
    padding: 9px 12px;
    color: var(--text-color);
}

.lista-botao:hover {
    border-color: var(--guo-300);
}

.lista-multipla.aberta .lista-botao,
.lista-botao:focus-visible {
    border-color: var(--guo-azul);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.lista-opcoes {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-m);
    box-shadow: var(--guo-sombra-alta);
    padding: 6px;
}

.lista-opcao {
    font-size: 13px;
    border-radius: var(--guo-raio-p);
    padding: 8px 10px;
}

.lista-opcao:hover {
    background: var(--guo-100);
}

.lista-opcao input[type="checkbox"] {
    accent-color: var(--guo-laranja);
}

.lista-contagem {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--guo-400);
    padding: 6px 10px;
}

/* =========================================================================
   12. RESUMO DO PEDIDO
   ========================================================================= */

.resumo-secao {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.resumo-pedido {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-g);
    box-shadow: var(--guo-sombra);
    padding: 18px 20px;
    border-left: 6px solid var(--guo-laranja);
}

.resumo-titulo {
    font-family: var(--guo-fonte-titulo);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--guo-900);
}

.resumo-tipo {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--guo-400);
}

.resumo-itens {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.resumo-item {
    background: var(--guo-50);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-m);
    padding: 12px 14px;
}

html[data-tema="escuro"] .resumo-item {
    background: #14161f;
}

.resumo-numero {
    font-family: var(--guo-mono);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: var(--guo-900);
    font-variant-numeric: tabular-nums;
}

.resumo-rotulo {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--guo-400);
}

.resumo-nota {
    font-size: 12.5px;
    border-radius: var(--guo-raio-p);
    border: 1px solid var(--border-color);
    background: var(--guo-50);
    padding: 10px 14px;
}

.resumo-nota.aviso {
    background: var(--aviso-bg);
    border-color: rgba(217, 119, 6, 0.25);
    color: var(--aviso-color);
}

.resumo-vazio {
    font-size: 13px;
    color: var(--guo-400);
}

/* =========================================================================
   13. JANELAS (dialogos)
   ========================================================================= */

.dialogo-folha,
.dialogo-voto {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-g);
    box-shadow: var(--guo-sombra-alta);
    padding: 22px 24px;
}

.dialogo-folha::backdrop,
.dialogo-voto::backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
}

.dialogo-topo {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.dialogo-titulo {
    font-family: var(--guo-fonte-titulo);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--guo-900);
}

.folha-bloco,
.folha-resumo,
.lista-pessoas {
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-m);
    background: var(--guo-50);
    padding: 14px 16px;
}

html[data-tema="escuro"] .folha-bloco,
html[data-tema="escuro"] .folha-resumo,
html[data-tema="escuro"] .lista-pessoas {
    background: #14161f;
}

.folha-opcao-texto strong {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--guo-900);
}

.folha-opcao-texto small,
.folha-dica,
.pessoa-explica {
    font-size: 12px;
    color: var(--guo-500);
}

.folha-botoes {
    gap: 10px;
    margin-top: 18px;
}

/* Escolha do voto: cartao grande, com a cor do GUO na escolha feita. */
.voto-opcao {
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-m);
    background: var(--guo-50);
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.voto-opcao:hover {
    transform: translateY(-2px);
    border-color: var(--guo-laranja);
    box-shadow: var(--guo-sombra-media);
}

.voto-nome {
    font-family: var(--guo-fonte-titulo);
    font-weight: 800;
    letter-spacing: -0.2px;
}

.voto-detalhe {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--guo-400);
}

.voto-quem {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--guo-500);
}

.pessoa-aviso {
    font-size: 12.5px;
    color: var(--guo-500);
}

/* =========================================================================
   14. TELA DE ACESSO (login)
   ========================================================================= */

body.pagina-acesso {
    background-color: var(--guo-50);
    background-image: var(--bg-degrade);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.cartao-acesso {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-g);
    box-shadow: var(--guo-sombra-alta);
    padding: 34px 32px 30px;
    width: 100%;
    max-width: 400px;
    position: relative;
    overflow: hidden;
}

.cartao-acesso::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--guo-laranja) 0%, var(--guo-laranja-claro) 100%);
}

.logo-acesso {
    height: 44px;
    margin-bottom: 14px;
}

.cartao-acesso h1 {
    font-family: var(--guo-fonte-titulo);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    color: var(--guo-900);
}

.subtitulo-acesso {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--guo-400);
}

.rodape-acesso {
    font-size: 11.5px;
    color: var(--guo-400);
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
    margin-top: 18px;
}

.rodape-acesso a {
    color: var(--guo-laranja-texto);
    font-weight: 700;
}

/* =========================================================================
   15. TELAS DE GESTAO (usuarios, seguranca, historico, efetivadas)
   ========================================================================= */

.cartao-lista,
.lista-bloqueadas,
.dialogo-conta,
.dialogo-novo,
.ficha,
.detalhe {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-m);
    box-shadow: var(--guo-sombra);
}

.busca-contas-caixa {
    background: var(--guo-100);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-p);
}

html[data-tema="escuro"] .busca-contas-caixa {
    background: #14161f;
}

.busca-contas-caixa input {
    background: transparent;
    font-family: var(--guo-fonte);
}

.busca-contas-caixa input:focus {
    border-color: var(--guo-azul);
    box-shadow: none;
}

.badge,
.etiqueta,
.status,
.papel {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 10px;
}

.btn-efetivar {
    background: var(--guo-laranja);
    border-color: var(--guo-laranja-forte);
    color: #ffffff;
}

.btn-efetivar-volta {
    background: var(--guo-50);
    border-color: var(--guo-200);
    color: var(--guo-600);
}

/* Titulos de secao e de cartao: a letra de titulo do GUO, sem enfeite. */
.titulo-secao,
.titulo-cartao,
.titulo-sessoes,
.grupo-titulo,
.painel-titulo,
.ficha-quem {
    font-family: var(--guo-fonte-titulo);
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--guo-900);
    margin: 0 0 10px;
}

.painel-sub,
.grupo-titulo + p,
.ficha-rotulo,
.texto-sessoes {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--guo-400);
}

/* Numeros de painel e contadores, sempre em letra mono e alinhados. */
.numero,
.valor-destaque,
.contador,
.ficha-valor {
    font-family: var(--guo-mono);
    font-weight: 800;
    letter-spacing: -0.6px;
    font-variant-numeric: tabular-nums;
    color: var(--guo-900);
}

.valor-destaque {
    font-size: 20px;
}

.contador {
    font-size: 12px;
    background: var(--guo-100);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 2px 10px;
    color: var(--guo-600);
}

/* Toda tabela do sistema entra no desenho da guo-table. O #data-table tem
   regra propria mais acima e continua com prioridade. */
main table thead th {
    background: var(--guo-100);
    color: var(--guo-500);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-align: left;
    padding: 11px 14px;
    border: none;
    border-bottom: 1px solid var(--border-color);
}

html[data-tema="escuro"] main table thead th {
    background: #232633;
}

main table tbody td {
    padding: 11px 14px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

main table tbody tr:hover td {
    background: var(--guo-100);
}

html[data-tema="escuro"] main table tbody tr:hover td {
    background: #232633;
}

.tabela-rolagem,
.historico-rolagem {
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-m);
    overflow: auto;
    background: var(--card-bg);
}

.celula-centro,
.celula-data,
.celula-matricula,
.col-acao,
.col-pessoas {
    text-align: center;
}

.celula-data,
.marca-tempo {
    font-size: 12px;
    color: var(--guo-500);
    font-variant-numeric: tabular-nums;
}

/* Pastilhas de estado: o mesmo par de cor que o GUO usa nos chips. */
.badge,
.tag-pendente,
.conta-selos span {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 10px;
    background: var(--guo-100);
    color: var(--guo-600);
    border: 1px solid var(--border-color);
}

.badge-admin {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.22);
}

.badge-visivel {
    background: #f0fdf4;
    color: #15803d;
    border-color: rgba(22, 163, 74, 0.25);
}

.badge-inativo {
    background: var(--guo-100);
    color: var(--guo-500);
}

.badge-bloqueado {
    background: #fef2f2;
    color: #b91c1c;
    border-color: rgba(220, 53, 69, 0.25);
}

.tag-pendente {
    background: #fffbeb;
    color: #92400e;
    border-color: rgba(217, 119, 6, 0.28);
}

html[data-tema="escuro"] .badge-admin { background: rgba(37, 99, 235, 0.16); color: #93b4ff; }
html[data-tema="escuro"] .badge-visivel { background: rgba(22, 163, 74, 0.16); color: #6ee7a8; }
html[data-tema="escuro"] .badge-bloqueado { background: rgba(220, 53, 69, 0.16); color: #ff9a9a; }
html[data-tema="escuro"] .tag-pendente { background: rgba(217, 119, 6, 0.16); color: #ffca63; }

/* Cartao de aviso do painel: ambar do GUO. */
.cartao-alerta,
.ficha-aviso,
.lista-bloqueadas {
    background: var(--aviso-bg);
    border: 1px solid rgba(217, 119, 6, 0.28);
    border-radius: var(--guo-raio-m);
    color: var(--aviso-color);
    font-size: 12.5px;
    padding: 12px 16px;
}

.cofre_ligado {
    color: var(--ok-color);
    font-weight: 700;
}

/* Barra de ferramentas do painel de contas: no original ela e uma linha com a
   busca e os filtros lado a lado, entao NAO recebe desenho de barra de
   progresso. O espaco dela e so o de uma linha de campos. */
.painel-barra {
    gap: 12px;
}

.ficha,
.dialogo-ficha,
.fichas,
.bloco-sessoes,
.regras-senha {
    background: var(--guo-50);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-m);
    padding: 14px 16px;
}

html[data-tema="escuro"] .ficha,
html[data-tema="escuro"] .dialogo-ficha,
html[data-tema="escuro"] .fichas,
html[data-tema="escuro"] .bloco-sessoes,
html[data-tema="escuro"] .regras-senha {
    background: #14161f;
}

.ficha-linha {
    border-bottom: 1px solid var(--border-color);
    padding: 8px 0;
}

.btn-gerir {
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: var(--guo-raio-p);
    background: var(--guo-50);
    border: 1px solid var(--guo-200);
    color: var(--guo-600);
}

.btn-gerir:hover {
    background: var(--guo-100);
    border-color: var(--guo-300);
    color: var(--guo-900);
    transform: translateY(-1px);
}

/* Botao de tema das telas de acesso: pastilha clara no canto, com a mesma
   borda dos campos. */
.tema-flutuante {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--guo-500);
}

.tema-flutuante:hover {
    color: var(--guo-laranja);
    border-color: var(--guo-laranja);
}

/* =========================================================================
   16. CELULAR
   ========================================================================= */

@media (max-width: 899px) {
    .app-header {
        flex-wrap: wrap;
        row-gap: 10px;
        padding: 10px 14px;
    }

    .app-header h1 {
        font-size: 15px;
    }

    .usuario-box {
        width: 100%;
        align-items: flex-start;
        text-align: left;
    }

    .usuario-acoes {
        justify-content: flex-start;
        width: 100%;
    }

    main {
        margin-top: 16px;
    }

    .progresso-numeros {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .p-item {
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
        padding: 13px 16px 13px 20px;
    }

    .p-item strong {
        font-size: 24px;
        order: 0;
    }

    .busca-bloco,
    .tipo-refeicao,
    .controls,
    .resumo-pedido {
        border-radius: var(--guo-raio-m);
        padding: 14px;
    }

    .resumo-itens {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    }

    .dialogo-folha,
    .dialogo-voto {
        border-radius: var(--guo-raio-m);
        padding: 16px;
    }

    #data-table thead th {
        padding: 10px 12px;
    }

    /* No celular o styles.css transforma cada linha em um cartao (a tabela
       vira bloco e cada celula fica solta dentro dele). Estas regras mantem
       esse desenho com a cara do GUO e, principalmente, devolvem o respiro
       zero das celulas: com o respiro de mesa, cada cartao ficava 106 px mais
       alto e a lista passava de 33 mil para 48 mil pixels de rolagem. */
    #data-table tbody td {
        padding: 0;
        border-bottom: none;
    }

    #data-table tr {
        border: 1px solid var(--border-color);
        border-radius: var(--guo-raio-m);
        padding: 12px 14px;
        box-shadow: var(--guo-sombra);
    }

    /* A marca da linha vai para a borda esquerda do cartao, ja que o fundo da
       celula nao pinta o cartao inteiro no celular. */
    #data-table tbody tr.linha-sim {
        background: var(--ok-bg);
        border-left: 4px solid var(--guo-verde);
    }

    #data-table tbody tr.linha-nao {
        background: var(--alerta-bg);
        border-left: 4px solid var(--guo-vermelho);
    }

    /* No celular a barra e a borda do proprio cartao (acima). A sombra da
       primeira celula apareceria como uma SEGUNDA barra, 14 px adentro. */
    #data-table tbody tr.linha-sim td:first-child,
    #data-table tbody tr.linha-nao td:first-child {
        box-shadow: none;
    }

    /* Quem pinta o cartao e a LINHA. Se a celula pintar tambem, no tema escuro
       o fundo e translucido (--ok-bg = rgba(53, 224, 161, 0.13)) e as duas
       camadas somam: cada celula virava um retangulo de tom diferente dentro do
       cartao, com o nome e os botoes sobre um retangulo mais escuro. No tema
       claro nao aparecia porque --ok-bg e opaco (#f0fdf4). Medido em
       09/10/2026, no cartao de uma pessoa confirmada, tela de 390 px. */
    #data-table tbody tr.linha-sim td,
    #data-table tbody tr.linha-nao td {
        background: transparent;
    }

    #data-table tbody tr.linha-sim:hover,
    #data-table tbody tr.linha-nao:hover {
        background: inherit;
    }

    #data-table tbody td.cel-nome {
        font-family: var(--guo-fonte-titulo);
        font-weight: 700;
        letter-spacing: -0.2px;
    }

    .btn-marcar {
        font-size: 14px;
        padding: 10px 14px;
        min-height: 46px;
        border-radius: var(--guo-raio-p);
    }

    .busca-caixa input {
        padding: 11px 42px 11px 42px;
    }
}

@media (max-width: 560px) {
    .app-header h1::after {
        display: none;
    }

    .cartao-acesso {
        padding: 26px 20px 24px;
    }

    .resumo-numero {
        font-size: 20px;
    }
}

/* =========================================================================
   17. ESTRUTURA DA COLETA (reorganizacao de 08/10/2026)

   A tela foi reorganizada em volta do que a ferramenta faz: marcar quem vai
   comer, uma pessoa por vez, com o celular na mao. Antes, seis blocos
   (numeros, refeicao da lista, acoes, resumo do pedido) empurravam a lista
   para cerca de 1.300 px abaixo do topo no celular; a lista e o corpo do
   trabalho e comecava fora da tela.

   Ordem nova:
     1. faixa da coleta, grudada no alto: quanto falta, como esta a folha e o
        botao que fecha o trabalho
     2. busca com o filtro de situacao em um toque (o filtro usado NO MEIO da
        coleta), e os filtros de escala recolhidos logo abaixo
     3. a lista, que passa a caber acima da dobra
     4. ajustes da lista (refeicao, resumo do pedido, acoes em massa) fora do
        caminho: coluna a direita no computador, depois da lista no celular

   Nenhum id nem classe do main.js foi renomeado: o comportamento e o mesmo.
   ========================================================================= */

/* Recuo da lateral e largura do conteudo ficam em UM lugar so. Antes, o
   cabecalho usava `clamp(14px, 3vw, 32px)` e o conteudo `clamp(14px, 3vw, 40px)`
   de um `main` que o styles.css sobrescrevia para 12 px: a marca e o menu
   ficavam 20 px a esquerda dos cartoes e a faixa da coleta vazava 2 px para
   fora da tela no celular. Agora os dois saem daqui. */
.app-header,
.app-main {
    --guo-largura: 1400px;
    --guo-recado: clamp(14px, 3vw, 40px);
}

.app-header {
    padding-left: max(var(--guo-recado), calc((100% - var(--guo-largura)) / 2 + var(--guo-recado)));
    padding-right: max(var(--guo-recado), calc((100% - var(--guo-largura)) / 2 + var(--guo-recado)));
}

.app-main {
    display: block;
    /* A faixa da coleta e sangrada ate a borda no celular (margem negativa
       igual a este recuo), e sobrava 1 px de cada lado no navegador. `clip`
       corta a sobra sem criar area de rolagem, entao nao estraga o `sticky`. */
    overflow-x: clip;
    max-width: var(--guo-largura);
    padding-left: var(--guo-recado);
    padding-right: var(--guo-recado);
    margin-left: auto;
    margin-right: auto;
}

.grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* No celular as acoes da coleta vem logo depois da busca, ANTES da lista:
       com centenas de pessoas, deixar "Sim", "Nao", "Limpar selecao",
       "Recomecar coleta" e "Adicionar pessoa" no fim da pagina obrigava a
       atravessar a lista inteira para usar qualquer uma delas. */
    grid-template-areas:
        "busca"
        "acoes"
        "tipo"
        "lista"
        "resumo"
        "dica";
    gap: 14px;
    align-items: start;
}

/* Sem min-width zero, um item de grade nao encolhe abaixo do conteudo: a
   tabela empurrava a coluna da lista 13 px para baixo do painel da direita. */
.report-container,
.table-wrapper {
    min-width: 0;
}

.busca-bloco { grid-area: busca; }
.tipo-refeicao { grid-area: tipo; }
.resumo-secao { grid-area: resumo; }
.report-container { grid-area: lista; }
.controls { grid-area: acoes; }
.dica { grid-area: dica; }

/* Quem separa os blocos agora e o espaco da grade. */
.grade > * { margin-bottom: 0; }

/* --- faixa da coleta --- */
.progresso {
    position: sticky;
    top: 72px;
    z-index: 25;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-g);
    box-shadow: var(--guo-sombra-media);
    padding: 12px 16px;
}

.coleta-faixa {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.progresso-numeros {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    padding: 0;
    border: none;
    background: none;
    margin: 0;
}

/* O numero da coleta e pastilha, nao cartao: ele aparece o tempo todo e nao
   pode disputar atencao com a lista. `row` de proposito: a secao 6 desenhou
   esta peca como cartao de indicador, em coluna, e sem esta linha o numero
   subia para a linha de cima no computador e ficava na mesma linha no celular,
   ou seja, a mesma pastilha saia de dois jeitos. */
.p-item {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 17px;
    background: var(--guo-50);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--guo-500);
    overflow: hidden;
}

.p-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--guo-400);
}

.p-item strong {
    font-family: var(--guo-mono);
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.6px;
    color: var(--guo-800);
    font-variant-numeric: tabular-nums;
}

.p-sim::before { background: var(--guo-verde); }
.p-nao::before { background: var(--guo-vermelho); }
.p-pend::before { background: var(--guo-laranja); }

.btn-folha {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 12px 20px;
    font-weight: 700;
}

.progresso-barra {
    margin-top: 10px;
    height: 6px;
    /* O trilho tem que aparecer nos dois temas: com --guo-100 ele ficava
       #232633 sobre cartao #1b1d28 no escuro, ou seja, invisivel, e o pedaco
       cheio virava um ponto laranja solto. */
    background: var(--border-color);
}

html[data-tema="escuro"] .progresso-barra {
    background: rgba(255, 255, 255, 0.12);
}

.progresso-rodape {
    margin-top: 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- filtro de situacao em um toque --- */
.chips-situacao {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.chip-situacao {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 15px;
    font-family: var(--guo-fonte);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--guo-600);
    background: var(--guo-50);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chip-situacao:hover {
    color: var(--guo-900);
    background: var(--suave-bg);
}

.chip-situacao.ativo {
    color: #ffffff;
    background: var(--guo-laranja);
    border-color: var(--guo-laranja-forte);
    box-shadow: 0 0 10px rgba(230, 126, 34, 0.3);
}

.chip-situacao .chip-conta {
    font-family: var(--guo-mono);
    font-size: 11px;
    font-weight: 700;
    background: var(--guo-100);
    border-radius: 999px;
    padding: 1px 7px;
}

.chip-situacao.ativo .chip-conta {
    background: rgba(255, 255, 255, 0.26);
    color: #ffffff;
}

/* O filtro de situacao antigo continua no documento para o main.js, mas quem
   aparece na tela sao as pastilhas. */
.campo-situacao {
    display: none;
}

/* --- os ajustes da lista --- */
.tipo-refeicao,
.controls {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--guo-raio-g);
    box-shadow: var(--guo-sombra);
    padding: 16px 18px;
}

.resumo-secao {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* --- computador: a lista larga a esquerda, os ajustes a direita ---
   O corte e 1200 px, e nao 1100, porque a tabela tem 668 px de largura minima
   (registro, nome, lotacao, refeicao e os dois botoes): abaixo disso ela nao
   cabia na coluna da esquerda e escorria por baixo do painel da direita. */
@media (min-width: 1200px) {
    .grade {
        grid-template-columns: minmax(0, 1fr) 350px;
        grid-template-areas:
            "busca  tipo"
            "lista  resumo"
            "lista  acoes"
            "lista  dica";
    }
}

/* =========================================================================
   18. CONTROLES DE DENTRO DOS CARTOES

   Auditoria de 08/10/2026 (auditoria-fina.mjs) achou tres pecas saindo do
   cartao e larguras desiguais entre botoes irmaos:

     - #janta-modo-linha media 342 px dentro de um cartao de 314 px de
       conteudo: os quatro botoes da janta vazavam 11 px para fora e "Votacao"
       saia cortado na borda;
     - .resumo-rotulo ("Refrigerante de 2 L") vazava 12 px para fora do cartao
       do pedido;
     - Almoço e Janta tinham 82 px e 69 px de largura, porque cada botao era
       do tamanho do proprio texto.

   A regra daqui para frente: controle de escolha ocupa a largura do cartao e
   divide em partes iguais. Botao que cresce conforme o texto nao entra em
   cartao de largura fixa.
   ========================================================================= */

/* Escolha da refeicao: duas metades iguais. */
.tipo-opcoes {
    display: flex;
    gap: 4px;
    width: 100%;
}

.tipo-opcoes .tipo-btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

/* Como sai a janta: rotulo em cima e quatro botoes em duas linhas de dois,
   que e o que cabe em um cartao de 350 px sem apertar o texto. */
.janta-modo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Os dois rotulos do cartao alinham do mesmo lado: "Refeicao desta lista" fica
   a esquerda e "Como sai a janta" vinha centralizado pela regra do
   styles.css. */
.janta-modo-rotulo {
    text-align: left;
    align-self: flex-start;
}

.janta-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    padding: 4px;
}

.janta-modo-opcao {
    min-width: 0;
    width: 100%;
    text-align: center;
}

/* Acoes sobre os selecionados: grade de botoes do mesmo tamanho, para a
   coluna terminar reta em vez de sobrar 231 px de um lado.
 *
 * Tres familias, com peso visual diferente de proposito:
 *   - massa (Sim, Nao, Limpar selecao): neutras;
 *   - comum (Adicionar pessoa): neutra com o azul de acao;
 *   - destrutiva (Recomecar coleta): vermelha, porque apaga toda a coleta. */
.controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.controls .rotulo-grupo {
    grid-column: 1 / -1;
}

.controls .btn {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    text-align: center;
}

#adicionar-pessoa {
    color: var(--guo-azul);
    border-color: rgba(37, 99, 235, 0.3);
}

#adicionar-pessoa:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: var(--guo-azul);
    color: var(--guo-azul);
}

#clear-edits {
    color: var(--alerta-color);
    border-color: var(--alerta-borda);
    background: var(--alerta-bg);
}

#clear-edits:hover {
    color: #ffffff;
    background: var(--guo-vermelho);
    border-color: var(--guo-vermelho);
}

/* Cartao do pedido: icone e numero na primeira linha, rotulo na linha de
   baixo, ocupando a largura do cartao. Lado a lado sobravam 75 px para o
   rotulo, e "Refrigerante de 2 L" nao cabia: ou vazava pela borda ou quebrava
   no meio da palavra (REFRIGER / ANTE). Empilhado, sobra a largura inteira e
   a quebra cai no espaco. */
.resumo-itens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.resumo-item {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "icone numero"
        "rotulo rotulo";
    justify-content: start;
    align-items: center;
    gap: 2px 7px;
    min-width: 0;
}

.resumo-item .resumo-icone {
    grid-area: icone;
}

.resumo-item .resumo-numero {
    grid-area: numero;
    flex: 0 0 auto;
}

.resumo-item .resumo-rotulo {
    grid-area: rotulo;
    min-width: 0;
}

@media (min-width: 1200px) {
    /* Na coluna da direita so cabe uma coluna de cartoes; na tela larga, duas. */
    .resumo-itens {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

/* =========================================================================
   19. A FOLHA IMPRESSA E PAPEL BRANCO, SEMPRE

   A folha do PDF e montada pelo main.js dentro de um div preso no <body>,
   para o html2pdf fotografar. Sendo filha do <body>, ela HERDA as variaveis do
   tema: com o sistema no escuro, o que usa variavel saia escuro no papel.
   Medido em 08/10/2026 no instante da geracao:

     .pdf-resumo .resumo-nota   fundo rgb(25, 27, 37) no escuro
                                fundo rgb(248, 250, 252) no claro

   Os quadros e cartoes ja tinham branco cravado com !important no styles.css;
   a linha de topico nao tinha, e o mesmo vale para qualquer peca nova. Em vez
   de cravar !important peca por peca, a paleta clara volta aqui: o que estiver
   dentro da folha nao tem como pegar o valor do tema.
   ========================================================================= */

.pdf-wrapper,
.pdf-page,
.pdf-resumo {
    --bg-color: #ffffff;
    --bg-degrade: none;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --suave-bg: #f1f5f9;
    --linha-apagada-bg: #f8fafc;
    --text-color: #0f172a;
    --muted-color: #64748b;
    --fraco-color: #94a3b8;
    --border-color: #e2e8f0;
    --hover-bg: #f8fafc;
    --ok-color: #15803d;
    --ok-bg: #f0fdf4;
    --alerta-color: #b91c1c;
    --alerta-bg: #fef2f2;
    --alerta-borda: #fecaca;
    --aviso-color: #92400e;
    --aviso-bg: #fffbeb;
    --info-color: #1d4ed8;
    --info-bg: #eff6ff;
    --accent-suave: rgba(230, 126, 34, 0.14);
    --guo-50: #f8fafc;
    --guo-100: #f1f5f9;
    --guo-200: #e2e8f0;
    --guo-300: #cbd5e1;
    --guo-400: #94a3b8;
    --guo-500: #64748b;
    --guo-600: #475569;
    --guo-700: #334155;
    --guo-800: #1e293b;
    --guo-900: #0f172a;
}

/* Papel gasta tinta a toa com fundo cinza: as linhas de topico da folha saem
   brancas, com o fio do topico separando (que o styles.css ja desenha). */
.pdf-page .resumo-nota {
    background: #ffffff;
}

/* A paleta acima cobre o que sai de variavel. Estas duas pecas tem fundo
   cravado, nao variavel: a linha do tema escuro do topo deste arquivo pinta o
   cartao do pedido de #14161f e ganharia de `.pdf-page .resumo-item` por
   especificidade. Com o `html[data-tema]` na frente, ela perde. */
html[data-tema="escuro"] .pdf-page .resumo-item,
html[data-tema="escuro"] .pdf-page .resumo-nota,
html[data-tema="escuro"] .pdf-page .resumo-pedido {
    background: #ffffff;
    color: #0f172a;
}

html[data-tema="escuro"] .pdf-page .resumo-numero,
html[data-tema="escuro"] .pdf-page .resumo-titulo,
html[data-tema="escuro"] .pdf-page .resumo-rotulo {
    color: #0f172a;
}

/* --- celular: a lista e a unica coluna, entao cabe mais coisa por linha --- */
@media (max-width: 899px) {
    /* As cinco acoes em tres linhas curtas: Sim e Nao (metade cada) na
       primeira, as outras tres (um terco cada) na segunda. Fica perto da busca,
       acima da lista, sem virar um bloco de 200 px. */
    .controls {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;
        padding: 10px 12px;
    }

    .controls .rotulo-grupo {
        /* O styles.css esconde este rotulo no celular, de quando o bloco de
           acoes ficava no fim da pagina. Agora ele fica logo abaixo da busca, e
           "Sim" e "Nao" sozinhos nao dizem a que se referem. */
        display: block;
        font-size: 9.5px;
    }

    #btn-mostrar,
    #btn-ocultar {
        grid-column: span 3;
    }

    #limpar-selecao,
    #adicionar-pessoa,
    #clear-edits {
        grid-column: span 2;
    }

    .controls .btn {
        padding: 10px 6px;
        min-height: 44px;
        font-size: 12px;
    }

    .tipo-refeicao .tipo-opcoes {
        width: auto;
        flex: 1 1 auto;
    }

    .janta-toggle {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* =========================================================================
   20. TELA ESTREITA (ate 400 px)

   Medido em 08/10/2026, na tela de 360 px: "Recomeçar coleta" e
   "Adicionar Pessoa" ficavam com 97 px de largura e o texto vazava para fora do
   botao. Fonte menor resolve sem mexer no alvo de toque, que continua 44 px.
   Vem DEPOIS do bloco de 899 px de proposito: mesma especificidade, e quem
   vence e a ultima regra que casa.
   ========================================================================= */

@media (max-width: 400px) {
    .controls .btn {
        font-size: 10.5px;
        padding: 8px 4px;
        letter-spacing: -0.2px;
    }

    .controls .rotulo-grupo {
        font-size: 9px;
    }
}
@media (max-width: 899px) {
    /* O cabecalho no celular e so identidade e navegacao: ele rola para fora e
       some. Fica curto de proposito, para nao empurrar a lista para baixo. */
    .app-header {
        position: static;
        gap: 8px;
        padding: 10px var(--guo-recado);
    }

    .logo {
        height: 32px;
    }

    .app-header h1 {
        font-size: 15px;
    }

    .app-header h1::after {
        display: none;
    }

    .usuario-box {
        width: auto;
        min-width: 0;
        max-width: 100%;
        margin-left: auto;
        align-items: flex-end;
        text-align: right;
    }

    /* Perfil e matricula nao se usa durante a coleta: sai do caminho. */
    .usuario-perfil {
        display: none;
    }

    /* Nome comprido empurrava o cabecalho 19 px para fora da tela: sem
       min-width zero, um item de flex nao encolhe abaixo do conteudo. */
    .usuario-nome {
        font-size: 12px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .usuario-acoes {
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 6px;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .usuario-acoes::-webkit-scrollbar {
        display: none;
    }

    .link-topo,
    .usuario-acoes .btn {
        flex: 0 0 auto;
        font-size: 11.5px;
        padding: 5px 9px;
    }

    .progresso {
        top: 0;
        border-radius: 0 0 var(--guo-raio-g) var(--guo-raio-g);
        margin-left: calc(-1 * var(--guo-recado));
        margin-right: calc(-1 * var(--guo-recado));
        padding: 8px 12px;
    }

    .grade {
        gap: 12px;
        margin-top: 12px;
    }

    .coleta-faixa {
        gap: 8px;
    }

    .progresso-numeros {
        width: 100%;
    }

    .p-item {
        flex: 1 1 0;
        justify-content: center;
        padding: 5px 8px 5px 10px;
    }

    .p-item strong {
        font-size: 16px;
    }

    /* O botao que fecha o trabalho fica na largura toda, embaixo dos numeros:
       e o alvo do polegar. */
    .btn-folha {
        flex: 1 1 100%;
        min-height: 40px;
        padding: 10px 16px;
        font-size: 13px;
    }

    .progresso-barra {
        margin-top: 8px;
        height: 5px;
    }

    .progresso-rodape {
        margin-top: 6px;
        font-size: 11px;
    }

    .busca-bloco,
    .tipo-refeicao,
    .controls {
        padding: 12px 14px;
        border-radius: var(--guo-raio-m);
    }

    /* A refeicao da lista, o rotulo e os dois botoes numa linha so: no celular
       esse bloco empurrava a lista para baixo. O aviso do que sai na folha
       continua aqui, so menor. */
    .tipo-refeicao {
        padding: 10px 12px;
        gap: 8px;
    }

    .tipo-refeicao .rotulo-grupo {
        font-size: 9.5px;
    }

    .tipo-opcoes {
        padding: 3px;
    }

    .tipo-opcoes .tipo-btn {
        padding: 7px 14px;
        font-size: 12px;
    }

    .tipo-aviso {
        font-size: 9.5px;
        letter-spacing: 0.4px;
        line-height: 1.35;
    }

    .chips-situacao {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .chips-situacao::-webkit-scrollbar {
        display: none;
    }

    .chip-situacao {
        flex: 0 0 auto;
    }
}