/* =========================================================================
   Refeicao CIDIS - folha de estilo

   Organizacao:
     1. Temas (claro e escuro) - todas as cores saem daqui
     2. Base
     3. Cabecalho e identificacao do usuario
     4. Filtros
     5. Barra de acoes e botoes
     6. Avisos e mensagens
     7. Tabela
     8. Etiquetas (badges)
     9. Telas de acesso (login e troca de senha)
    10. Telas de administracao
    11. DOCUMENTO PDF - cores fixas, independentes do tema

   Regra importante: nenhuma cor fixa fora do bloco do PDF. Assim os dois
   temas ficam sempre coerentes, e o PDF sai sempre com aparencia de papel.
   ========================================================================= */


/* =========================================================================
   1. TEMAS
   ========================================================================= */

:root {
    color-scheme: light;

    /* Destaque. O laranja da marca (#ff6900) e vivo e tem pouco contraste
       sobre fundo claro, entao ele fica reservado para decoracao (bordas e
       faixas). Todo TEXTO em laranja usa o tom mais fechado, que passa no
       minimo de leitura. No tema escuro o laranja claro serve para os dois. */
    --accent-color: #ff6900;
    --accent-forte: #b34a00;
    --accent-forte-hover: #9c4000;
    --accent-forte-texto: #ffffff;
    --accent-suave: rgba(255, 105, 0, 0.16);
    --accent-texto: #b34a00;

    /* Superficies */
    --bg-color: #f7f9fc;
    --bg-degrade: linear-gradient(160deg, #f7f9fc 0%, #edf1f7 100%);
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --suave-bg: #eef2f7;
    --linha-apagada-bg: #f7f8fa;

    /* Texto */
    --text-color: #263340;
    --muted-color: #667380;
    --fraco-color: #8592a1;

    /* Linhas. --border-color separa blocos (tabela, divisoria) e pode ser
       discreta. --border-campo contorna campos e botoes, e por isso precisa
       ser visivel: e ela que mostra onde o campo comeca. */
    --border-color: #e2e8f0;
    --border-campo: #8592a1;
    --hover-bg: #fff5eb;

    /* Estados */
    --ok-color: #157347;
    --ok-bg: #e7f6ee;
    --neutro-color: #5b6875;
    --alerta-color: #b3402f;
    --alerta-bg: #fdecea;
    --alerta-borda: #eebfb7;
    --aviso-color: #8a5a00;
    --aviso-bg: #fff6e5;
    --info-color: #2f5aa8;
    --info-bg: #e8eefc;

    /* Sombras */
    --sombra-leve: 0 4px 12px rgba(0, 0, 0, 0.03);
    --sombra-media: 0 4px 16px rgba(0, 0, 0, 0.05);
    --sombra-forte: 0 8px 30px rgba(0, 0, 0, 0.07);
    --sombra-cartao: 0 18px 45px rgba(0, 0, 0, 0.10);

    /* Botao de instalar o atalho: ele e a unica acao do cabecalho, entao tem
       cor cheia e um brilho proprio, em vez de disputar espaco com os links.
       O brilho e o realce saem daqui para nao virar cor fixa na regra. */
    --cta-brilho: rgba(255, 105, 0, 0.30);
    --cta-realce: rgba(255, 255, 255, 0.22);
}

html[data-tema="escuro"] {
    color-scheme: dark;

    --accent-color: #ff7a29;
    --accent-forte: #ff7a29;
    --accent-forte-hover: #ff9048;
    /* No escuro o laranja claro pede texto escuro por cima, e nao branco. */
    --accent-forte-texto: #161b22;
    --accent-suave: rgba(255, 122, 41, 0.22);
    --accent-texto: #ffa06b;

    --bg-color: #0d1117;
    --bg-degrade: linear-gradient(160deg, #0d1117 0%, #141b26 100%);
    --card-bg: #161b22;
    --input-bg: #0d1117;
    --suave-bg: #1c232d;
    --linha-apagada-bg: #12171e;

    --text-color: #e6edf3;
    --muted-color: #98a4b2;
    --fraco-color: #6b7684;

    --border-color: #2a313c;
    --border-campo: #606b79;
    --hover-bg: rgba(255, 122, 41, 0.09);

    --ok-color: #4ade80;
    --ok-bg: rgba(74, 222, 128, 0.13);
    --neutro-color: #98a4b2;
    --alerta-color: #ff8d80;
    --alerta-bg: rgba(255, 141, 128, 0.13);
    --alerta-borda: rgba(255, 141, 128, 0.35);
    --aviso-color: #f0c674;
    --aviso-bg: rgba(240, 198, 116, 0.13);
    --info-color: #8ab4f8;
    --info-bg: rgba(138, 180, 248, 0.13);

    --sombra-leve: 0 4px 12px rgba(0, 0, 0, 0.40);
    --sombra-media: 0 4px 16px rgba(0, 0, 0, 0.45);
    --sombra-forte: 0 8px 30px rgba(0, 0, 0, 0.50);
    --sombra-cartao: 0 18px 45px rgba(0, 0, 0, 0.60);

    --cta-brilho: rgba(255, 122, 41, 0.26);
    --cta-realce: rgba(255, 255, 255, 0.30);
}


/* =========================================================================
   2. BASE
   ========================================================================= */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    transition: background-color 0.25s ease, color 0.25s ease;
}

main {
    max-width: 1180px;
    margin: 30px auto 60px;
    padding: 0 20px;
}

.hidden {
    display: none !important;
}


/* =========================================================================
   3. CABECALHO
   ========================================================================= */

.app-header {
    background-color: var(--card-bg);
    padding: 18px 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--sombra-leve);
    border-bottom: 3px solid var(--accent-color);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.logo {
    height: 50px;
    flex: 0 0 auto;
}

.app-header h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
}

.usuario-box {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.usuario-nome {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
}

.usuario-perfil {
    font-size: 11px;
    color: var(--muted-color);
}

.usuario-acoes {
    display: flex;
    gap: 12px;
    margin-top: 3px;
    align-items: center;
}

.link-topo {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent-texto);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.link-topo:hover {
    border-bottom-color: var(--accent-texto);
}

/* Botao de criar o atalho no aparelho: so aparece quando o navegador oferece.

   Ele e a unica acao do cabecalho, entao e desenhado como botao de verdade:
   pilula cheia na cor da marca, com um brilho por baixo e um realce fino no
   topo. O texto usa o par que o tema ja aprovou sobre o laranja cheio, para
   continuar passando no contraste minimo de leitura. */
.botao-instalar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-forte-texto);
    background-color: var(--accent-forte);
    border: none;
    border-radius: 999px;
    padding: 8px 14px 8px 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--cta-brilho), inset 0 1px 0 var(--cta-realce);
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.botao-instalar svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.botao-instalar:hover {
    background-color: var(--accent-forte-hover);
    box-shadow: 0 4px 14px var(--cta-brilho), inset 0 1px 0 var(--cta-realce);
    transform: translateY(-1px);
}

.botao-instalar:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px var(--cta-brilho), inset 0 1px 0 var(--cta-realce);
}

.botao-instalar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-suave), 0 2px 8px var(--cta-brilho);
}

.botao-instalar.hidden {
    display: none !important;
}

/* Quando o navegador avisa que da para instalar, o botao entra sem susto. */
@keyframes botao-instalar-entra {
    from { opacity: 0; transform: translateY(-2px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

.botao-instalar:not(.hidden) {
    animation: botao-instalar-entra 0.28s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .botao-instalar {
        transition: none;
    }

    .botao-instalar:not(.hidden) {
        animation: none;
    }

    .botao-instalar:hover,
    .botao-instalar:active {
        transform: none;
    }
}

/* Botao de alternancia de tema */
.botao-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--border-campo);
    border-radius: 50%;
    color: var(--muted-color);
    cursor: pointer;
    padding: 0;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.botao-tema:hover {
    color: var(--accent-texto);
    border-color: var(--accent-texto);
    background-color: var(--hover-bg);
}

.botao-tema svg {
    display: block;
}

.botao-tema .icone-sol {
    display: none;
}

.botao-tema .icone-lua {
    display: block;
}

html[data-tema="escuro"] .botao-tema .icone-sol {
    display: block;
}

html[data-tema="escuro"] .botao-tema .icone-lua {
    display: none;
}


/* =========================================================================
   4. BUSCA, FILTROS E PROGRESSO
   ========================================================================= */

/* A busca e o caminho principal de quem esta coletando de mesa em mesa. */
.busca-bloco {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 18px;
    box-shadow: var(--sombra-media);
    margin-bottom: 14px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.busca-caixa {
    position: relative;
    display: flex;
    align-items: center;
}

.busca-icone {
    position: absolute;
    left: 14px;
    color: var(--muted-color);
    pointer-events: none;
}

.busca-caixa input {
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: var(--text-color);
    padding: 13px 44px 13px 44px;
    border: 1px solid var(--border-campo);
    border-radius: 6px;
    background-color: var(--input-bg);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.25s;
}

.busca-caixa input::-webkit-search-cancel-button {
    display: none;
}

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

.busca-caixa input:focus {
    outline: none;
    border-color: var(--accent-forte);
    box-shadow: 0 0 0 3px var(--accent-suave);
}

.busca-limpar {
    position: absolute;
    right: 8px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--muted-color);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.busca-limpar:hover {
    background-color: var(--suave-bg);
    color: var(--text-color);
}

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

.filtros-avancados summary {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-color);
    cursor: pointer;
    list-style: none;
    padding: 4px 0;
    user-select: none;
}

.filtros-avancados summary::-webkit-details-marker {
    display: none;
}

/* As setinhas do "Filtros e ordenacao" saem por codigo (\25B8 e \25BE), e nao
   como simbolo escrito: assim o desenho nao depende da codificacao do arquivo.
   Foi o que quebrou antes: o arquivo passou por uma gravacao em Windows-1252 e a
   seta ficou guardada como o texto "â–¸" (mojibake-exemplo: e exemplo, nao
   defeito a consertar), que e o que aparecia na tela. O espaco depois do codigo
   fecha o escape; o espaco seguinte e o espaco de verdade. */
.filtros-avancados summary::before {
    content: '\25B8  ';
    color: var(--accent-texto);
}

.filtros-avancados[open] summary::before {
    content: '\25BE  ';
}

.filtros-avancados summary:hover {
    color: var(--accent-texto);
}

.filtros-conteudo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding-top: 12px;
}

/* Progresso da coleta */
.progresso {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: var(--sombra-media);
    transition: background-color 0.25s ease;
}

.progresso-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--muted-color);
}

.p-item strong {
    font-size: 16px;
    font-weight: 700;
    margin-right: 3px;
}

.p-sim strong {
    color: var(--ok-color);
}

.p-nao strong {
    color: var(--alerta-color);
}

.p-pend strong {
    color: var(--text-color);
}

.progresso-barra {
    height: 6px;
    background-color: var(--suave-bg);
    border-radius: 3px;
    margin: 10px 0 8px;
    overflow: hidden;
}

.progresso-preenchido {
    height: 100%;
    width: 0;
    background-color: var(--accent-forte);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progresso-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}


/* =========================================================================
   4b. FILTROS (usados dentro do painel de filtros avancados)
   ========================================================================= */

.filters {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 18px 22px;
    box-shadow: var(--sombra-media);
    margin-bottom: 16px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.filter-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 170px;
    min-width: 150px;
}

.campo-rotulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-color);
}

.campo input,
.campo select {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--text-color);
    padding: 9px 11px;
    border: 1px solid var(--border-campo);
    border-radius: 4px;
    background-color: var(--input-bg);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.25s;
}

.campo input::placeholder {
    color: var(--fraco-color);
}

.campo input:focus,
.campo select:focus {
    outline: none;
    border-color: var(--accent-forte);
    box-shadow: 0 0 0 3px var(--accent-suave);
}

.btn-limpar {
    flex: 0 0 auto;
    padding: 10px 18px;
}


/* A lista de multipla escolha dentro da escala do dia. O botao mostra o que
   esta escolhido; o painel abre por cima do conteudo, com uma caixa de marcar
   por opcao. */

.campo-avancado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    flex: 1 1 100%;
    /* Sem isto o item nao encolhe abaixo do proprio conteudo: o nome comprido do
       resumo empurrava a linha inteira para fora da tela no celular. */
    min-width: 0;
}

/* O botao mostra o resumo cortado com reticencia: o texto comprido do que esta
   escolhido nao estica a linha. */
.lista-multipla {
    position: relative;
    display: block;
    min-width: 0;
}

/* O botao que abre a lista: mesmo desenho dos outros campos do sistema. */
.lista-botao {
    /* Sem isto o Safari do iPhone desenha o botao do sistema (cinza, pequeno)
       por cima do nosso: o campo da escala fica com outra cara so no telefone. */
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 10px 34px 10px 12px;
    border: 1px solid var(--border-campo);
    border-radius: 4px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.25s;
}



.lista-botao:hover {
    background-color: var(--hover-bg);
}

.lista-botao:focus-visible {
    outline: none;
    border-color: var(--accent-forte);
    box-shadow: 0 0 0 3px var(--accent-suave);
}

/* O resumo fica com a sobra do botao e corta com reticencia quando nao cabe. */
.lista-resumo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lista-multipla.aberta .lista-botao {
    border-color: var(--accent-forte);
    box-shadow: 0 0 0 3px var(--accent-suave);
}

.lista-multipla.aberta .select-seta {
    transform: translateY(-50%) rotate(180deg);
}

/* O painel das opcoes, por cima do conteudo, no desenho dos cartoes do sistema. */
.lista-opcoes[hidden] {
    display: none;
}

.lista-opcoes {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 320px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--card-bg);
    box-shadow: var(--sombra-media);
    /* A caixa do painel nao deixa nada sair dela, nem para os lados nem para
       baixo: com mais opcoes do que cabe na altura maxima, o que sobra ROLA aqui
       dentro (na lista com pesquisa, quem rola e o .lista-itens). Sem isto as
       opcoes passariam da caixa e ficariam soltas por cima do resto da tela, sem
       fundo e sem clique. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Pesquisa dentro da lista. Fica presa no topo do painel: o que rola e a lista
   de opcoes logo abaixo, para o campo nao sair da vista. */
.lista-busca {
    flex: 0 0 auto;
    padding: 2px 4px 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 6px;
}

.lista-busca input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--text-color);
    background-color: var(--input-bg);
    border: 1px solid var(--border-campo);
    border-radius: 7px;
}

.lista-busca input:focus-visible {
    outline: none;
    border-color: var(--accent-forte);
    box-shadow: 0 0 0 3px var(--accent-suave);
}

/* A parte que rola: so o que passou pela pesquisa e pelo limite de opcoes. */
.lista-itens {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Quantas opcoes a lista esta mostrando, e quantas existem. */
.lista-contagem {
    flex: 0 0 auto;
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
    font-size: 11.5px;
    color: var(--muted-color);
}

.lista-contagem:empty {
    display: none;
}

.lista-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    /* Cada opcao guarda a propria altura: nenhuma lista pode espremer a opcao
       para caber, porque o texto cortado nao se le. O que nao couber rola. */
    flex: 0 0 auto;
}

.lista-opcao:hover {
    background-color: var(--hover-bg);
}

.lista-opcao input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent-forte);
    cursor: pointer;
}

.lista-opcao-nome {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.lista-opcao-conta {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--muted-color);
}

.lista-opcao input[type="checkbox"]:checked + .lista-opcao-nome {
    color: var(--accent-texto);
}

.select-seta {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-color);
    pointer-events: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.chip-lotacao {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-color);
    background-color: var(--input-bg);
    border: 1px solid var(--border-campo);
    border-radius: 999px;
    padding: 8px 15px;
    cursor: pointer;
    transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}

.chip-lotacao:hover {
    background-color: var(--hover-bg);
}

.chip-lotacao:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-suave);
}

.chip-lotacao .chip-conta {
    font-weight: 400;
    font-size: 11px;
    color: var(--muted-color);
}

/* A escolhida fica cheia, para nao haver duvida do que esta sendo mostrado. */
.chip-lotacao.ativo {
    background-color: var(--accent-forte);
    border-color: var(--accent-forte);
    color: var(--accent-forte-texto);
}

.chip-lotacao.ativo .chip-conta {
    color: var(--accent-forte-texto);
    opacity: 0.85;
}

.chip-lotacao.ativo:hover {
    background-color: var(--accent-forte-hover);
    border-color: var(--accent-forte-hover);
}

.chips-vazio {
    font-size: 12.5px;
    color: var(--muted-color);
}

/* ---------- escala do dia ----------

   O chip da escala usa o mesmo desenho dos chips de lotacao, porque e o mesmo
   tipo de filtro: um conjunto de pessoas que entra na lista somando com os
   outros. Embaixo dele fica uma linha curta dizendo em que pe esta a escala. */

.campo-escala {
    flex-basis: 100%;
}

.escala-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.chip-escala .chip-conta {
    font-weight: 600;
}

.chip-escala:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.chip-escala:disabled:hover {
    background-color: var(--input-bg);
}

/* Escolha do horario dentro da escala: manha (almoco) ou tarde (janta). */
.escala-turnos {
    margin-top: 2px;
}

.escala-turnos-rotulo {
    font-size: 11.5px;
    color: var(--muted-color);
}

/* Filtro de regional e de lotacao dentro da escala do dia: mesma lista dos
   outros campos, menor, porque divide a linha com o rotulo. */
.escala-regionais,
.escala-lotacoes {
    margin-top: 4px;
}

.escala-regionais .lista-multipla,
.escala-lotacoes .lista-multipla {
    width: 240px;
    max-width: 100%;
}

/* As duas listas de dentro da escala tem a mesma largura: a opcao mostra so a
   sigla do setor, que e curta. */
.escala-regionais .lista-opcoes,
.escala-lotacoes .lista-opcoes {
    min-width: 240px;
}

/* As listas de dentro da escala nao tem campo de pesquisa: o proprio painel rola.
   Sem isto, com mais setores do que cabe na altura maxima, as opcoes passariam da
   caixa (o painel tinha altura maxima e nada para segurar o resto).
   O :not([hidden]) e de proposito: sem ele esta regra venceria a que esconde o
   painel fechado (mesma forca, mais adiante no arquivo) e as listas apareceriam
   sempre abertas, uma embaixo da outra. */
.escala-regionais .lista-opcoes:not([hidden]),
.escala-lotacoes .lista-opcoes:not([hidden]) {
    display: block;
}

.escala-regionais .lista-opcoes,
.escala-lotacoes .lista-opcoes {
    overscroll-behavior: contain;
}

/* Painel que abre para cima: quando o campo esta no pe da tela e nao ha espaco
   embaixo para a lista inteira (o celular e o caso comum). */
.lista-multipla.abre-para-cima .lista-opcoes {
    top: auto;
    bottom: calc(100% + 6px);
}

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

.escala-aviso {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--muted-color);
}

/* Quando o dado pode estar velho, ou nao existe, o aviso pede atencao. */
.escala-aviso-alerta {
    color: var(--aviso-color);
}

.escala-aviso:empty {
    display: none;
}

/* Marca de quem esta previsto para trabalhar hoje, na propria linha. */
.marca-escala {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--accent-texto);
    background-color: var(--accent-suave);
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

/* Balao da base de campo (BSC) do turno, ao lado do horario. Cor diferente do
   horario de proposito: um diz quando, o outro diz onde. */
.marca-bsc {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--info-color);
    background-color: var(--info-bg);
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

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


/* =========================================================================
   5. BARRA DE ACOES E BOTOES
   ========================================================================= */

.controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.resumo {
    margin-right: auto;
    font-size: 12.5px;
    color: var(--muted-color);
    line-height: 1.4;
}

.resumo strong {
    color: var(--text-color);
}

.resumo .sep {
    color: var(--fraco-color);
    margin: 0 6px;
}

.rotulo-grupo {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted-color);
    white-space: nowrap;
}


/* Tipo da lista: almoco (manha e tarde) ou janta (noite).
   E a primeira decisao da coleta, entao fica visivel, logo abaixo do
   progresso, com os dois botoes sempre a vista. */

.tipo-refeicao {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
    background-color: var(--card-bg);
}

.tipo-opcoes {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-campo);
    border-radius: 4px;
    overflow: hidden;
}

.tipo-opcoes .tipo-btn {
    border: none;
    border-radius: 0;
    min-height: 40px;
    padding: 9px 22px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-color);
    background-color: var(--input-bg);
}

.tipo-opcoes .tipo-btn + .tipo-btn {
    border-left: 1px solid var(--border-campo);
}

.tipo-opcoes .tipo-btn:hover {
    background-color: var(--hover-bg);
}

/* O escolhido fica cheio, para nao haver duvida de qual lista vai sair. */
.tipo-opcoes .tipo-btn.ativo {
    background-color: var(--accent-forte);
    color: var(--accent-forte-texto);
}

.tipo-opcoes .tipo-btn.ativo:hover {
    background-color: var(--accent-forte-hover);
}

.tipo-aviso {
    font-size: 11.5px;
    color: var(--muted-color);
}


.btn {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--card-bg);
    border: 1px solid var(--accent-texto);
    color: var(--accent-texto);
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    border-radius: 4px;
    transition: background-color 0.25s ease, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.btn:hover {
    background-color: var(--hover-bg);
}

.btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.btn-primary {
    background-color: var(--accent-forte);
    border-color: var(--accent-forte);
    color: var(--accent-forte-texto);
}

.btn-primary:hover {
    background-color: var(--accent-forte-hover);
    border-color: var(--accent-forte-hover);
}

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

.btn-perigo {
    border-color: var(--alerta-color);
    color: var(--alerta-color);
    background-color: var(--alerta-bg);
}

.btn-perigo:hover {
    background-color: var(--alerta-color);
    border-color: var(--alerta-color);
    color: var(--accent-forte-texto);
}

.dica {
    margin: 0 0 14px;
    font-size: 11.5px;
    color: var(--muted-color);
    line-height: 1.5;
}

/* Historico das listas geradas: pagina propria, aberta pelo menu do topo. */
.historico-resumo {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted-color);
}

.historico-rolagem {
    max-height: 68vh;
}

.tabela-historico {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tabela-historico th,
.tabela-historico td {
    padding: 10px 8px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

.tabela-historico thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted-color);
    background-color: var(--card-bg);
}

.tabela-historico .col-pessoas,
.tabela-historico .col-acao {
    width: 130px;
    white-space: nowrap;
}

/* A coluna de acoes leva dois botoes (baixar e efetivar): ela precisa de mais
   espaco no historico, e o espaco entre os botoes e o mesmo em toda a tabela. */
.tabela-historico td.col-acao {
    text-align: right;
}

.tabela-historico td.col-acao .btn + .btn {
    margin-left: 6px;
}

.tabela-historico .col-acao {
    width: 230px;
}

/* Efetivar: e a acao que muda o estado da lista, entao sai no laranja da marca.
   Devolver ao historico e desfazer engano: fica discreto, de contorno. */
.btn-efetivar {
    border: 1px solid var(--accent-color);
    background-color: transparent;
    color: var(--accent-texto);
}

.btn-efetivar:hover {
    background-color: var(--accent-color);
    color: #ffffff;
}

.btn-efetivar-volta {
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--muted-color);
}

.btn-efetivar-volta:hover {
    border-color: var(--text-color);
    color: var(--text-color);
}

.tabela-historico tbody tr:last-child td {
    border-bottom: none;
}

.tabela-historico td.vazio {
    color: var(--muted-color);
}

.dica kbd {
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    background-color: var(--suave-bg);
    border: 1px solid var(--border-campo);
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 1px 6px;
    color: var(--text-color);
}

.sincronia {
    font-size: 11px;
    color: var(--muted-color);
    white-space: nowrap;
    padding: 3px 9px;
    border-radius: 10px;
    background-color: var(--suave-bg);
    border: 1px solid var(--border-campo);
}

.sincronia-erro {
    color: var(--alerta-color);
    background-color: var(--alerta-bg);
    border-color: var(--alerta-borda);
}


/* =========================================================================
   6. AVISOS E MENSAGENS
   ========================================================================= */

.mensagem {
    margin: 0 0 14px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    background-color: var(--ok-bg);
    color: var(--ok-color);
    border-left: 4px solid var(--ok-color);
}

.mensagem.aviso {
    background-color: var(--aviso-bg);
    color: var(--aviso-color);
    border-left-color: var(--aviso-color);
}

.alerta {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    border-left: 4px solid transparent;
    line-height: 1.6;
}

.alerta-ok {
    background-color: var(--ok-bg);
    color: var(--ok-color);
    border-left-color: var(--ok-color);
}

.alerta-erro {
    background-color: var(--alerta-bg);
    color: var(--alerta-color);
    border-left-color: var(--alerta-color);
}


/* =========================================================================
   7. TABELA
   ========================================================================= */

.report-container {
    background: var(--card-bg);
    padding: 22px;
    border-radius: 8px;
    box-shadow: var(--sombra-forte);
    transition: background-color 0.25s ease;
}

.table-wrapper {
    max-height: 68vh;
    overflow: auto;
    border: 1px solid var(--border-campo);
    border-radius: 6px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--suave-bg);
    font-weight: 700;
    color: var(--accent-texto);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 10px;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

th.sortable:hover {
    background-color: var(--hover-bg);
}

th.sortable.ativo {
    color: var(--accent-texto);
}

.sort-ind {
    display: inline-block;
    width: 14px;
    margin-left: 5px;
    font-size: 10px;
    color: var(--fraco-color);
    text-align: center;
}

th.sortable.ativo .sort-ind {
    color: var(--accent-texto);
}

th.col-check {
    width: 44px;
    text-align: center;
    padding: 8px 4px;
}

th.col-check input {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--accent-color);
}

td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    vertical-align: middle;
    color: var(--text-color);
}

tbody tr {
    transition: background-color 0.2s;
}

tbody tr:hover {
    background-color: var(--hover-bg);
}

td.col-check {
    text-align: center;
    padding: 8px 4px;
}

td.col-check input {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--accent-color);
}

/* Linhas conforme a marcacao. O fundo ajuda a ver, de relance, o que ja
   foi visitado durante a coleta. */
tbody tr.linha-sim {
    background-color: var(--ok-bg);
}

tbody tr.linha-nao {
    background-color: var(--alerta-bg);
}

tbody tr.linha-nao td {
    color: var(--muted-color);
}

tbody tr.linha-nao td.cel-nome {
    font-style: italic;
}

td.col-status {
    width: 112px;
    white-space: nowrap;
}

td.cel-registro {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

td.cel-nome {
    font-weight: 600;
}

td.col-marcar {
    width: 148px;
    white-space: nowrap;
    text-align: right;
}

/* Botoes Sim e Nao de cada linha: o caminho principal no celular. */
.btn-marcar {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    margin-left: 6px;
    border-radius: 4px;
    border: 1px solid var(--border-campo);
    background-color: var(--card-bg);
    color: var(--muted-color);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    min-width: 58px;
}

.btn-marcar:hover {
    border-color: var(--text-color);
    color: var(--text-color);
}

.btn-marcar-sim.ativo {
    background-color: var(--ok-bg);
    border-color: var(--ok-color);
    color: var(--ok-color);
}

.btn-marcar-nao.ativo {
    background-color: var(--alerta-bg);
    border-color: var(--alerta-color);
    color: var(--alerta-color);
}

.btn-marcar:disabled {
    opacity: 0.55;
    cursor: default;
}

.vazio {
    margin: 18px 0 4px;
    padding: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--muted-color);
    background-color: var(--suave-bg);
    border-radius: 6px;
}


/* =========================================================================
   8. ETIQUETAS
   ========================================================================= */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.badge-visivel {
    background-color: var(--ok-bg);
    color: var(--ok-color);
}

.badge-oculto {
    background-color: var(--alerta-bg);
    color: var(--alerta-color);
}

.badge-admin {
    background-color: var(--info-bg);
    color: var(--info-color);
}

.badge-padrao {
    background-color: var(--suave-bg);
    color: var(--muted-color);
}

.badge-pendente {
    background-color: var(--suave-bg);
    color: var(--neutro-color);
}

.badge-trocar {
    background-color: var(--aviso-bg);
    color: var(--aviso-color);
}

.badge-bloqueado {
    background-color: var(--alerta-bg);
    color: var(--alerta-color);
}

.badge-inativo {
    background-color: var(--suave-bg);
    color: var(--muted-color);
    text-decoration: line-through;
}


/* =========================================================================
   9. TELAS DE ACESSO (login e troca de senha)
   ========================================================================= */

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

.cartao-acesso {
    background: var(--card-bg);
    width: 100%;
    max-width: 400px;
    margin: 0;
    padding: 36px 34px 28px;
    border-radius: 10px;
    box-shadow: var(--sombra-cartao);
    border-top: 4px solid var(--accent-color);
    box-sizing: border-box;
    transition: background-color 0.25s ease;
}

.logo-acesso {
    display: block;
    height: 44px;
    margin: 0 auto 18px;
}

.cartao-acesso h1 {
    margin: 0;
    font-size: 21px;
    text-align: center;
    color: var(--text-color);
}

.subtitulo-acesso {
    margin: 6px 0 22px;
    text-align: center;
    font-size: 12.5px;
    color: var(--muted-color);
    line-height: 1.5;
}

.cartao-acesso .campo {
    margin-bottom: 16px;
}

.cartao-acesso input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    font-size: 14px;
}

.btn-largo {
    width: 100%;
    margin-top: 8px;
    padding: 12px 20px;
    font-size: 14px;
}

.regras-senha {
    margin: 0 0 18px;
    padding-left: 18px;
    font-size: 11.5px;
    color: var(--muted-color);
    line-height: 1.7;
}

.rodape-acesso {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    font-size: 11.5px;
    color: var(--muted-color);
    text-align: center;
    line-height: 1.6;
}

.rodape-acesso a {
    color: var(--accent-texto);
    font-weight: 600;
}

/* Botao de tema flutuante nas telas de acesso */
.tema-flutuante {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10;
}


/* =========================================================================
   10. TELAS DE ADMINISTRACAO
   ========================================================================= */

.titulo-secao {
    font-size: 17px;
    margin: 0 0 18px;
    color: var(--text-color);
}

.cartao {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: var(--sombra-forte);
    transition: background-color 0.25s ease;
}

.titulo-cartao {
    margin: 0 0 16px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-texto);
    display: flex;
    align-items: center;
    gap: 10px;
}

.contador {
    background-color: var(--suave-bg);
    border: 1px solid var(--border-campo);
    color: var(--muted-color);
    border-radius: 10px;
    padding: 1px 9px;
    font-size: 11px;
    letter-spacing: 0;
}

.cartao-alerta {
    border-left: 4px solid var(--alerta-color);
}

/* Valor em destaque: aparece uma unica vez, para ser anotado a mao. Letra
   grande, espacada e monoespacada, porque vai ser copiado ou ditado. */
.valor-destaque {
    margin: 0 0 14px;
    padding: 14px 18px;
    border: 1px dashed var(--alerta-color);
    border-radius: 8px;
    background-color: var(--suave-bg);
    color: var(--text-color);
    font-family: ui-monospace, 'SFMono-Regular', 'Consolas', 'Menlo', monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
    /* Dois toques selecionam o valor inteiro, sem pegar o espaco do lado. */
    user-select: all;
}

.form-usuario {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.form-usuario .campo {
    flex: 1 1 160px;
}

.form-usuario .campo-largo {
    flex: 2 1 260px;
}

.tabela-rolagem {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--border-campo);
    border-radius: 6px;
}

.tabela-alta {
    max-height: 70vh;
}

.col-acao {
    width: 260px;
    text-align: right;
}

.form-linha {
    display: inline-block;
    margin: 0 0 0 6px;
    vertical-align: middle;
}

.celula-matricula {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.celula-centro {
    text-align: center;
}

.celula-data {
    font-size: 12px;
    color: var(--muted-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.marca-tempo {
    display: block;
    font-size: 10.5px;
    color: var(--alerta-color);
    font-weight: 600;
}

.detalhe-evento {
    font-size: 12px;
    color: var(--muted-color);
    font-variant-numeric: tabular-nums;
}


/* -------------------------------------------------------------------------
   PAINEL DE USUARIOS

   A lista de contas e a porta de entrada do trabalho administrativo: precisa
   dizer de relance quantas contas existem, quais estao em apuro e onde esta
   cada pessoa. Por isso o desenho e: numeros no topo, busca e filtros na
   barra, uma tabela enxuta de cinco colunas e TODAS as acoes de uma conta
   dentro do painel dela, em vez de cinco botoes empilhados na linha.
   ------------------------------------------------------------------------- */

.painel {
    margin: 26px auto 60px;
    padding: 0 22px;
    max-width: 1180px;
}

.painel-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.painel-titulo .titulo-secao {
    margin: 0 0 4px;
    font-size: 22px;
    letter-spacing: -0.3px;
}

.painel-sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted-color);
}

.painel-topo .btn .mais {
    font-size: 15px;
    font-weight: 700;
    margin-right: 2px;
}

/* Numeros do topo: cinco tijolos, cada um com o numero grande e o rotulo. */

.painel-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.numero {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: var(--sombra-leve);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.numero strong {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.numero span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-color);
}

.numero-alerta {
    border-color: var(--alerta-borda);
    background: var(--alerta-bg);
}

.numero-alerta strong {
    color: var(--alerta-color);
}

.numero-ok {
    border-color: var(--ok-color);
    background: var(--ok-bg);
}

.numero-ok strong {
    color: var(--ok-color);
}

/* Contas bloqueadas: lista propria, com o botao de liberar em cada linha. */

.lista-bloqueadas {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bloqueada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--alerta-borda);
    border-radius: 10px;
    background: var(--alerta-bg);
}

.bloqueada-quem {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
}

.bloqueada-quando {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
    margin-right: auto;
}

.bloqueada-quando .celula-data,
.bloqueada-quando .marca-tempo {
    color: var(--alerta-color);
}

.bloqueada .btn {
    background: var(--card-bg);
}

/* Barra da lista: busca, filtros e a contagem do que esta a vista. */

.cartao-lista {
    padding: 18px 20px 20px;
}

.painel-barra {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.busca-contas-caixa {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 260px;
    max-width: 340px;
}

.busca-contas-caixa svg {
    position: absolute;
    left: 12px;
    color: var(--fraco-color);
    pointer-events: none;
}

.busca-contas-caixa input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--border-campo);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text-color);
    font-family: inherit;
    font-size: 13.5px;
}

.busca-contas-caixa input:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

.fichas {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ficha {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--neutro-color);
    background: var(--suave-bg);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 7px 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ficha span {
    font-size: 11px;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.ficha:hover {
    background: var(--hover-bg);
    color: var(--accent-texto);
}

.ficha.ativa {
    background: var(--accent-color);
    color: #ffffff;
}

.ficha.ativa span {
    opacity: 0.9;
}

.painel-conta {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted-color);
    font-variant-numeric: tabular-nums;
}

/* A tabela: cinco colunas, respiro entre as linhas, nada de grade. */

.tabela-curta {
    max-height: 62vh;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
}

.tabela-usuarios {
    width: 100%;
    border-collapse: collapse;
}

.tabela-usuarios thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 12px 16px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-color);
    background: var(--suave-bg);
    border-bottom: 1px solid var(--border-color);
}

.tabela-usuarios tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.12s ease;
}

.tabela-usuarios tbody tr:last-child {
    border-bottom: 0;
}

.tabela-usuarios tbody tr:hover {
    background: var(--hover-bg);
}

.tabela-usuarios tbody tr.hidden {
    display: none;
}

.tabela-usuarios td {
    padding: 12px 16px;
    vertical-align: middle;
}

.celula-conta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

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

/* Etiqueta discreta de cadastro pendente: o dado importa para o
   administrador, mas nao pode competir com a situacao real da conta. */
.tag-pendente {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--aviso-color);
    background: var(--aviso-bg);
    border-radius: 999px;
    padding: 2px 8px;
}

.conta-login {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-color);
}

.conta-nome {
    font-size: 13.5px;
    color: var(--text-color);
}

.col-gerir {
    width: 120px;
    text-align: right;
}

.tabela-curta .celula-data {
    color: var(--muted-color);
}

/* A tabela na tela pequena vira uma lista de cartoes: uma conta por bloco,
   com o botao de gerenciar ocupando a largura toda. */

@media (max-width: 899px) {
    .painel {
        margin: 16px auto 40px;
        padding: 0 12px;
    }

    .painel-topo {
        margin-bottom: 14px;
    }

    .painel-titulo .titulo-secao {
        font-size: 19px;
    }

    .painel-numeros {
        grid-template-columns: repeat(auto-fit, minmax(44%, 1fr));
        gap: 8px;
    }

    .numero {
        padding: 11px 12px;
    }

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

    .painel-barra {
        gap: 10px;
    }

    .busca-contas-caixa {
        max-width: none;
        flex: 1 1 100%;
    }

    .busca-contas-caixa input {
        font-size: 16px;
        padding: 12px 12px 12px 38px;
    }

    .painel-conta {
        margin-left: 0;
    }

    .tabela-curta {
        max-height: none;
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .tabela-usuarios thead {
        display: none;
    }

    .tabela-usuarios,
    .tabela-usuarios tbody,
    .tabela-usuarios tr,
    .tabela-usuarios td {
        display: block;
        width: auto;
    }

    .tabela-usuarios tbody tr {
        border: 1px solid var(--border-color);
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 12px 14px 14px;
    }

    .tabela-usuarios td {
        padding: 0;
    }

    .celula-conta {
        margin-bottom: 8px;
    }

    .tabela-usuarios td:nth-child(2),
    .tabela-usuarios td:nth-child(3) {
        display: inline-block;
        margin-right: 6px;
    }

    .tabela-curta .celula-data {
        display: block;
        margin: 8px 0 10px;
    }

    .col-gerir {
        width: auto;
        text-align: left;
    }

    .col-gerir .btn {
        width: 100%;
        padding: 11px 14px;
    }

    .bloqueada {
        align-items: flex-start;
    }

    .bloqueada-quando {
        text-align: left;
    }

    .bloqueada form,
    .bloqueada .btn {
        width: 100%;
    }

    /* No painel da conta, cada acao ocupa a largura toda: alvo grande para o
       dedo, sem dois botoes colados. */
    .grupo-acoes {
        flex-direction: column;
    }

    .grupo-acoes form,
    .grupo-acoes .btn {
        width: 100%;
    }

    .grupo-acoes .btn {
        padding: 11px 14px;
    }
}

/* -------------------------------------------------------------------------
   PAINEIS EM JANELA: a conta e o cadastro novo
   ------------------------------------------------------------------------- */

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

.dialogo-etiqueta {
    margin: 0 0 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent-texto);
}

.dialogo-fechar {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--muted-color);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.dialogo-fechar:hover {
    color: var(--text-color);
    background: var(--suave-bg);
}

.dialogo-conta .dialogo-topo,
.dialogo-ficha .dialogo-topo,
.dialogo-novo .dialogo-topo {
    position: relative;
    padding-right: 62px;
}

.dialogo-conta {
    max-width: 560px;
}

.conta-matricula {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--muted-color);
    font-variant-numeric: tabular-nums;
}

.conta-corpo {
    padding: 18px 24px 22px;
}

.conta-selos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.conta-fatos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.fato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--suave-bg);
}

.fato-rotulo {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted-color);
}

.fato-valor {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.fato-extra {
    font-size: 11.5px;
    color: var(--muted-color);
}

.conta-grupo {
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.grupo-titulo {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-color);
}

.grupo-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.grupo-acoes form {
    display: inline-flex;
}

.grupo-acoes .btn {
    white-space: nowrap;
}

.grupo-nota {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted-color);
    line-height: 1.5;
}

.conta-nota {
    margin: 16px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--fraco-color);
}

.dialogo-novo {
    max-width: 520px;
}

.novo-form {
    padding: 18px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.novo-form .dica {
    margin: 0;
}


/* =========================================================================
   11. TELAS PEQUENAS (celular)

   O uso principal e em pe, andando entre as mesas. Por isso, no celular:

     - a tabela vira uma lista de cartoes: nome grande, matricula e lotacao
       discretas, e dois botoes grandes para marcar;
     - o campo de busca cresce e usa fonte de 16px, porque abaixo disso o
       iPhone da zoom sozinho ao tocar no campo;
     - os botoes de marcar tem 46px de altura, que e a area minima confortavel
       para o dedo;
     - a dica do Shift desaparece, ja que nao existe teclado ali.
   ========================================================================= */

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

    .logo {
        height: 32px;
    }

    .app-header h1 {
        font-size: 16px;
        margin-right: auto;
    }

    .usuario-box {
        align-items: center;
        gap: 2px;
    }

    .usuario-nome {
        font-size: 11.5px;
    }

    .usuario-perfil {
        display: none;
    }

    .usuario-acoes {
        gap: 10px;
        margin-top: 0;
    }

    .link-topo {
        font-size: 11px;
    }

    /* O botao de instalar acompanha o tamanho dos links do cabecalho. */
    .botao-instalar {
        font-size: 11px;
        padding: 7px 12px 7px 10px;
    }

    /* Espaco geral */
    .app-main {
        margin: 14px auto 90px;
        padding: 0 12px;
    }

    /* Busca */
    .busca-bloco {
        padding: 12px 14px;
    }

    .busca-caixa input {
        font-size: 16px;
        padding: 14px 46px 14px 44px;
    }

    .busca-limpar {
        width: 40px;
        height: 40px;
        font-size: 26px;
    }

    /* Progresso */
    .progresso {
        padding: 12px 14px;
    }

    .progresso-numeros {
        gap: 6px 16px;
        font-size: 12px;
    }

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

    .progresso-rodape {
        font-size: 11.5px;
    }

    .resumo {
        font-size: 11.5px;
    }

    /* Tipo da lista: dois botoes largos, do tamanho do dedo */
    .tipo-refeicao {
        padding: 10px 12px;
        gap: 8px;
        margin-bottom: 12px;
    }

    /* Lotacao: chips grandes, porque o toque e o dedo */
    .chip-lotacao {
        min-height: 40px;
        padding: 9px 16px;
        font-size: 13px;
    }

    /* A lista de escolha da escala ocupa a largura toda, com o botao e as
       linhas do tamanho do dedo. */
    .campo-avancado {
        gap: 12px;
    }

    .lista-multipla,
    .lista-botao {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* No celular as listas de regional e de lotacao da escala ocupam a largura toda. */
    .escala-regionais,
    .escala-lotacoes {
        flex: 1 1 100%;
        gap: 6px;
    }

    .escala-regionais .lista-multipla,
    .escala-regionais .lista-opcoes,
    .escala-lotacoes .lista-multipla,
    .escala-lotacoes .lista-opcoes {
        width: 100%;
        min-width: 0;
    }

    .lista-botao {
        min-height: 44px;
        font-size: 15px;
    }

    .lista-opcoes {
        max-height: 58vh;
    }

    .lista-opcao {
        min-height: 44px;
        padding: 10px 12px;
    }

    .lista-opcao-nome {
        font-size: 14px;
    }

    .tipo-refeicao .rotulo-grupo {
        display: none;
    }

    .tipo-opcoes {
        flex: 1 1 100%;
    }

    .tipo-opcoes .tipo-btn {
        flex: 1 1 50%;
        min-height: 46px;
        font-size: 14px;
    }

    .tipo-aviso {
        flex: 1 1 100%;
        text-align: center;
    }

    /* Acoes em massa viram uma grade de botoes faceis de tocar */
    .controls {
        gap: 8px;
        margin-bottom: 12px;
    }

    .controls .rotulo-grupo {
        display: none;
    }

    .controls .btn {
        flex: 1 1 auto;
        padding: 12px 14px;
        font-size: 13px;
        min-height: 46px;
    }

    #print-report {
        flex: 1 1 100%;
    }

    .dica {
        display: none;
    }

    /* A tabela vira lista de cartoes */
    .report-container {
        background: none;
        padding: 0;
        box-shadow: none;
    }

    .table-wrapper {
        border: none;
        max-height: none;
        overflow: visible;
    }

    #data-table,
    #data-table tbody {
        display: block;
    }

    #data-table thead {
        display: none;
    }

    #data-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        padding: 12px 14px;
        margin-bottom: 10px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background-color: var(--card-bg);
        box-shadow: var(--sombra-leve);
    }

    #data-table tr:nth-child(even) {
        background-color: var(--card-bg);
    }

    #data-table tr:hover {
        background-color: var(--card-bg);
    }

    #data-table td {
        display: block;
        border: none;
        padding: 0;
        font-size: 13px;
    }

    td.col-check {
        order: 1;
        width: auto;
        padding: 0;
    }

    td.col-check input {
        width: 22px;
        height: 22px;
    }

    td.cel-nome {
        order: 2;
        flex: 1 1 auto;
        font-size: 15px;
        line-height: 1.3;
    }

    td.col-status {
        order: 3;
        width: auto;
    }

    td.cel-registro {
        order: 4;
        font-size: 12px;
        color: var(--muted-color);
    }

    td.cel-registro::after {
        content: ' ·';
        margin-right: 2px;
    }

    td.cel-lotacao {
        order: 5;
        font-size: 12px;
        color: var(--muted-color);
    }

    td.col-marcar {
        order: 6;
        flex: 1 1 100%;
        width: auto;
        margin-top: 10px;
        display: flex;
        gap: 10px;
        text-align: left;
    }

    .btn-marcar {
        flex: 1 1 0;
        margin-left: 0;
        min-height: 46px;
        font-size: 15px;
        padding: 10px 14px;
    }

    .vazio {
        padding: 24px 16px;
    }

    /* Telas de administracao, que tambem podem ser abertas no celular */
    .col-acao {
        width: auto;
        text-align: left;
    }

    .form-linha {
        display: block;
        margin: 6px 0 0 0;
    }

    .form-linha .btn {
        width: 100%;
    }

    .tabela-rolagem {
        max-height: none;
    }

    .cartao {
        padding: 16px;
    }
}


/* =========================================================================
   12. DOCUMENTO PDF

   Cores FIXAS de proposito. O PDF vai para impressao e nao pode mudar de
   aparencia conforme o tema escolhido na tela. Por isso nada aqui usa as
   variaveis dos temas, e tudo leva !important.
   ========================================================================= */

.pdf-wrapper {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.pdf-page {
    box-sizing: border-box;
    padding: 10px;
    background-color: #ffffff !important;
    color: #000000 !important;
}

.pdf-header {
    display: flex;
    align-items: center;
    /* Folga de proposito: o conteudo da folha tem de caber na altura do A4 com
       o cabecalho mais alto (a folha com espacos de reserva ganha uma linha a
       mais). Sem essa folga, o html2pdf empurrava alguns pixels para uma
       segunda pagina em branco. */
    margin-bottom: 16px;
}

.pdf-header img {
    height: 55px;
    margin-right: 20px;
}

.pdf-header h2 {
    margin: 0;
    font-size: 18px;
    color: #2c3e50 !important;
    text-transform: uppercase;
    font-weight: 700;
}

.pdf-header p {
    margin: 5px 0 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #000000 !important;
}

/* Qual refeicao a folha representa: e o que diferencia a lista do almoco da
   lista da janta quando as duas ficam na mesma mesa. */
.pdf-header p.pdf-tipo {
    font-size: 15px;
    font-weight: 700;
    color: #b34a00 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Quando a folha sai menor que a lista de confirmados, esta linha diz por que.
   Quem recebe a folha no refeitorio precisa saber que ela foi filtrada. */
.pdf-header p.pdf-filtro {
    font-size: 12px;
    font-weight: 700;
    color: #000000 !important;
}

/* A tabela da folha: documento corporativo, sem grade pesada.

   Regras do desenho, todas pensadas na folha A4 impressa:
   - so linha horizontal fina separando os registros, nenhuma vertical;
   - zebra quase imperceptivel (branco e um cinza de 1 por cento);
   - cabecalho em cinza muito claro, texto grafite em caixa alta;
   - numero e matricula em cinza mais suave, para o nome puxar o olho;
   - o nome fica com a maior fatia e a assinatura com o espaco de escrever;
   - nada de sombra, gradiente, cor forte ou enfeite. */
.pdf-page table {
    width: 100%;
    border-collapse: collapse;
    /* As larguras vem do colgroup: sem isto, o navegador redistribui as
       colunas pelo conteudo e a proporcao pedida nao se mantem. */
    table-layout: fixed;
    background-color: #ffffff !important;
}

.pdf-page col.col-numero { width: 6%; }
.pdf-page col.col-registro { width: 13%; }
.pdf-page col.col-nome { width: 39%; }
.pdf-page col.col-lotacao { width: 13%; }
.pdf-page col.col-assinatura { width: 29%; }

.pdf-page th,
.pdf-page td {
    padding: 8px 11px;
    font-size: 11px;
    line-height: 1.3;
    text-align: left;
    /* Conteudo centralizado na altura da celula, inclusive quando o nome
       ocupa duas linhas. */
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid #e4e7eb !important;
    background-color: #ffffff !important;
    color: #3b444f !important;
    /* Nome comprido quebra e a linha cresce, em vez de sair cortado. */
    overflow-wrap: anywhere;
}

.pdf-page thead th {
    background-color: #f4f6f8 !important;
    color: #2b3440 !important;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-bottom: 1px solid #d5dae1 !important;
}

/* Zebra de um por cento: separa as linhas sem virar planilha. */
.pdf-page tbody tr:nth-child(even) td {
    background-color: #fafbfc !important;
}

/* Fecha a tabela embaixo com a mesma linha do cabecalho. */
.pdf-page tbody tr:last-child td {
    border-bottom: 1px solid #d5dae1 !important;
}

/* Numero: estreito e centrado, em cinza mais suave. */
.pdf-page th.col-numero,
.pdf-page td.col-numero {
    text-align: center;
    white-space: nowrap;
    color: #6b7280 !important;
}

/* Matricula e lotacao: centradas e discretas. */
.pdf-page th.col-registro,
.pdf-page td.col-registro,
.pdf-page th.col-lotacao,
.pdf-page td.col-lotacao {
    text-align: center;
    color: #4b5563 !important;
}

/* Nome: a maior coluna, alinhada a esquerda, no tom mais escuro da tabela. */
.pdf-page th.col-nome,
.pdf-page td.col-nome {
    text-align: left;
    color: #1f2937 !important;
}

/* Linha de reserva na folha: em branco, para preencher a mao, com a mesma
   altura de uma linha preenchida. O height aqui funciona como minimo. */
.pdf-page tr.linha-reserva td {
    height: 30px;
}

/* Na folha impressa, a observacao de quem nao quer refeicao sai discreta, em
   cinza, embaixo do nome: e para quem recebe a folha nao contar essa pessoa
   como refeicao. */
.pdf-page .marca-sem-refeicao {
    display: block;
    margin-top: 1px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #4b5563 !important;
}

/* =========================================================================
   COMO SAI A JANTA, O VOTO E O RESUMO DO PEDIDO

   O resumo e a mesma peca em tres lugares: no fim da lista, dentro da janela de
   gerar a folha e no fim do PDF. Por isso as classes sao as mesmas, e o que
   muda e so o envelope (`.pdf-resumo` no papel, onde tudo vira preto no branco).
   ========================================================================= */

.janta-modo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.janta-modo.hidden {
    display: none;
}

.janta-modo-rotulo {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted-color);
}

/* Trilho de tres posicoes: Pizza, Lanche, Votação. */
.janta-toggle {
    display: inline-flex;
    align-items: stretch;
    padding: 3px;
    border: 1px solid var(--border-campo);
    border-radius: 999px;
    background-color: var(--suave-bg);
    gap: 2px;
}

.janta-modo-opcao {
    border: none;
    background: transparent;
    color: var(--muted-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.janta-modo-opcao:hover {
    color: var(--text-color);
    background-color: var(--hover-bg);
}

.janta-modo-opcao.ativo {
    background-color: var(--accent-color);
    color: var(--accent-forte-texto);
    box-shadow: var(--sombra-leve);
}

.janta-modo-opcao:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-suave);
}

/* Voto da janta dentro da linha da tabela. */
.voto-chip {
    margin-left: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-campo);
    background-color: transparent;
    color: var(--muted-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
}

.voto-chip.voto-pizza {
    border-color: var(--accent-color);
    background-color: var(--accent-suave);
    color: var(--accent-texto);
}

.voto-chip.voto-lanche {
    border-color: var(--info-color);
    background-color: var(--info-bg);
    color: var(--info-color);
}

/* Voto de quem nao quer refeicao: cinza, porque nao e pedido de comida. */
.voto-chip.voto-nenhum {
    border-color: var(--border-campo);
    background-color: var(--suave-bg);
    color: var(--neutro-color);
}

.voto-chip:hover {
    background-color: var(--hover-bg);
    color: var(--text-color);
}

.resumo-secao {
    margin-top: 18px;
}

.resumo-pedido {
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-color);
    border-radius: 8px;
    background-color: var(--card-bg);
    box-shadow: var(--sombra-leve);
    padding: 14px 16px;
}

.resumo-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.resumo-titulo {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted-color);
}

.resumo-tipo {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--accent-texto);
}

.resumo-itens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.resumo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--suave-bg);
    color: var(--text-color);
}

.resumo-icone {
    display: inline-flex;
    align-items: center;
    color: var(--accent-color);
}

.resumo-numero {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.resumo-rotulo {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted-color);
}

.resumo-item-refrigerante .resumo-icone {
    color: var(--info-color);
}

/* Divisao por tipo de lanche, embaixo do total do pedido. */
.resumo-lanches {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0 0 0 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.resumo-lanche {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.resumo-lanche .resumo-numero {
    font-size: 15px;
    color: var(--text-color);
}

.resumo-lanche .resumo-rotulo {
    font-size: 12px;
}

.resumo-lanche-sem-tipo .resumo-numero,
.resumo-lanche-sem-tipo .resumo-rotulo {
    color: var(--aviso-color);
}

/* Os topicos do resumo (votacao, pessoas, sem voto): o que explica a conta.
   Ficam embaixo dos numeros, em letra miuda e separados por um fio, com o
   rotulo numa coluna propria para as tres linhas se lerem em coluna. */
.resumo-notas {
    list-style: none;
    margin: 12px 0 0 0;
    padding: 10px 0 0 0;
    border-top: 1px solid var(--border-color);
    display: grid;
    gap: 3px;
}

.resumo-nota {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.nota-rotulo {
    flex: 0 0 72px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted-color);
}

.nota-texto {
    flex: 1 1 auto;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted-color);
}

.resumo-nota.aviso .nota-rotulo,
.resumo-nota.aviso .nota-texto {
    color: var(--aviso-color);
}

.resumo-nota.aviso .nota-texto {
    font-weight: 600;
}

.resumo-vazio {
    margin: 10px 0 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--aviso-color);
    font-weight: 600;
}

.folha-resumo {
    margin-top: 14px;
}

/* --- no PDF: mesmo desenho, preto no branco para nao gastar tinta --- */

.pdf-resumo {
    margin-top: 18px;
    /* Folga entre o quadro do pedido e a tabela. Sem ela, o retangulo encostava
       no cabecalho da lista: na folha impressa os dois ficavam a menos de 1 mm
       de distancia, e o pedido parecia parte da tabela. A folga acompanha a de
       cima, para o topo da folha ficar com o mesmo ritmo. */
    margin-bottom: 18px;
}

.pdf-resumo .resumo-pedido {
    border: 1px solid #000000 !important;
    border-left: 4px solid #000000 !important;
    border-radius: 6px;
    background-color: #ffffff !important;
    box-shadow: none !important;
    color: #000000 !important;
    padding: 10px 12px;
}

.pdf-resumo .resumo-titulo,
.pdf-resumo .resumo-tipo,
.pdf-resumo .resumo-rotulo,
.pdf-resumo .nota-rotulo,
.pdf-resumo .nota-texto,
.pdf-resumo .resumo-vazio {
    color: #000000 !important;
}

/* Na folha os topicos saem menores que na tela: o que importa no papel e o
   numero do pedido, o resto explica. O fio separa sem gastar tinta. */
.pdf-resumo .resumo-notas {
    border-top: 1px solid #000000 !important;
    margin-top: 10px;
    padding-top: 8px;
    gap: 2px;
}

.pdf-resumo .nota-rotulo {
    flex: 0 0 58px;
    font-size: 8px;
}

.pdf-resumo .nota-texto {
    font-size: 9px;
    line-height: 1.4;
}

.pdf-resumo .resumo-itens {
    gap: 14px;
}

.pdf-resumo .resumo-item {
    border: 1px solid #000000 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 6px 12px;
}

.pdf-resumo .resumo-icone {
    color: #000000 !important;
}

.pdf-resumo .resumo-numero {
    font-size: 18px;
    color: #000000 !important;
}

.pdf-resumo .resumo-lanche .resumo-numero,
.pdf-resumo .resumo-lanche .resumo-rotulo,
.pdf-resumo .resumo-lanche-sem-tipo .resumo-numero {
    color: #000000 !important;
}

/* --- janela do voto --- */

.dialogo-voto {
    width: min(420px, calc(100vw - 32px));
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--card-bg);
    color: var(--text-color);
    box-shadow: var(--sombra-cartao);
}

.dialogo-voto::backdrop {
    background-color: rgba(0, 0, 0, 0.45);
}

.voto-quem {
    margin: 10px 0 14px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted-color);
}

.voto-etapa {
    display: flex;
    gap: 12px;
}

/* A escolha da janta tem quatro opcoes: duas por linha, para nenhuma ficar
   apertada. A etapa do tipo de lanche continua em uma linha so. */
#voto-etapa-voto {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.voto-etapa.hidden {
    display: none;
}

/* Aviso curto dentro da opcao "Nenhum". */
.voto-detalhe {
    font-size: 10px;
    font-weight: 600;
    color: var(--fraco-color);
    text-align: center;
    line-height: 1.3;
}

.voto-opcao-nenhum .voto-icone {
    color: var(--neutro-color);
}

.voto-opcao-nenhum.escolhido {
    border-color: var(--neutro-color);
    background-color: var(--suave-bg);
}

/* Observacao de quem quebra o intervalo e nao quer refeicao: fica ao lado do
   nome, na lista e na folha, para ninguem contar essa pessoa como refeicao. */
.marca-sem-refeicao {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--aviso-color);
}

/* A etapa do tipo de lanche tem tres opcoes: menos largas, para caberem. */
#voto-etapa-lanche .voto-opcao {
    padding: 14px 8px;
}

.voto-opcoes {
    display: flex;
    gap: 12px;
}

.voto-opcao {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    border: 2px solid var(--border-campo);
    border-radius: 10px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.voto-opcao:hover {
    border-color: var(--accent-color);
    background-color: var(--hover-bg);
}

.voto-opcao.escolhido {
    border-color: var(--accent-color);
    background-color: var(--accent-suave);
}

.voto-icone {
    display: inline-flex;
    color: var(--accent-color);
}

.voto-botoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

/* =========================================================================
   SESSOES ABERTAS (tela de senha e administracao)
   ========================================================================= */

.bloco-sessoes {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
}

.titulo-sessoes {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}

.texto-sessoes {
    margin: 0 0 12px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted-color);
}

.marca-tempo {
    display: block;
    font-size: 11px;
    color: var(--fraco-color);
    margin-top: 2px;
}

/* ---------- janela de preparo da folha ----------

   Uma janela so para as duas perguntas que antecedem a folha: o aviso de filtro
   (quando ele corta alguem) e os espacos de reserva.

   Decisoes de desenho:
   - a caixa de marcar e desenhada aqui, com appearance none, porque a nativa
     nao segue o tema e aparecia azul no meio de uma tela laranja;
   - o bloco da reserva e um cartao proprio, que acende quando a reserva e
     ligada, deixando claro que a quantidade pertence aquela escolha;
   - o campo de quantidade fica apagado enquanto a reserva esta desligada;
   - as setinhas nativas do campo foram escondidas: o campo e pequeno, aceita de
     1 a 25 e ficava apertado com o controle do navegador dentro;
   - no celular os botoes viram uma coluna de largura cheia, com o Gerar em cima,
     e o alvo de toque respeita 44px.
   ------------------------------------------------------------------------ */

.dialogo-folha {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 0;
    max-width: 468px;
    width: calc(100% - 28px);
    max-height: 88vh;
    overflow: auto;
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: var(--sombra-cartao);
}

.dialogo-folha::backdrop {
    background: rgba(8, 12, 18, 0.55);
    backdrop-filter: blur(3px);
}

.dialogo-folha[open] {
    animation: dialogo-entra 0.18s ease-out;
}

@keyframes dialogo-entra {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dialogo-topo {
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, var(--hover-bg), transparent);
}

.dialogo-titulo {
    margin: 0;
    font-size: 17.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-color);
}

/* ---------------- aviso de filtro ---------------- */

.folha-aviso {
    margin: 18px 26px 0;
    padding: 12px 14px;
    border-radius: 10px;
    border-left: 4px solid var(--aviso-color);
    background: var(--aviso-bg);
    color: var(--aviso-color);
    font-size: 12.5px;
    line-height: 1.5;
}

/* ---------------- adicionar pessoa a mao ---------------- */

.dialogo-pessoa {
    max-width: 560px;
}

/* ---------------- janela de consulta de dados da conta ----------------

   Segue o desenho das outras janelas do sistema: mesmo cartao, mesmo titulo,
   mesmos botoes. */

.dialogo-ficha {
    max-width: 520px;
}

.ficha-corpo {
    padding: 20px 26px 24px;
}

.ficha-quem {
    margin: 0 0 16px;
    font-size: 12.5px;
    color: var(--muted-color);
}

.ficha-etapa.hidden {
    display: none;
}

.ficha-linha {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.ficha-rotulo {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--fraco-color);
}

.ficha-valor {
    padding: 11px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 14px;
}

/* Valor em destaque dentro da janela: maior, espacado e monoespacado. */
.ficha-destaque {
    font-family: ui-monospace, 'SFMono-Regular', 'Consolas', 'Menlo', monospace;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    border-color: var(--accent-color);
    border-style: dashed;
    user-select: all;
}

.ficha-aviso {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted-color);
}

.ficha-erro {
    margin: 12px 0 0;
    padding: 11px 13px;
    border-radius: 10px;
    border-left: 4px solid var(--alerta-color);
    background: var(--aviso-bg);
    color: var(--aviso-color);
    font-size: 12.5px;
    line-height: 1.5;
}

.ficha-erro.hidden {
    display: none;
}

.pessoa-explica {
    margin: 18px 26px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted-color);
}

.dialogo-pessoa .campo {
    margin: 16px 26px 0;
}

.pessoa-aviso {
    margin: 12px 26px 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted-color);
    min-height: 17px;
}

/* Lista de quem a busca achou: rola dentro da janela, como as outras listas do
   sistema, e nunca passa da caixa. */
.lista-pessoas {
    margin: 10px 26px 0;
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.lista-pessoas:empty {
    display: none;
}

.pessoa-opcao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.pessoa-opcao:last-child {
    border-bottom: none;
}

.pessoa-dados {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pessoa-nome {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    overflow-wrap: anywhere;
}

.pessoa-detalhe {
    font-size: 11.5px;
    color: var(--muted-color);
    overflow-wrap: anywhere;
}

.pessoa-adicionar {
    flex: 0 0 auto;
}

.pessoa-adicionar:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Marca de quem entrou na lista a mao. */
.marca-adicional {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--aviso-color);
    background-color: var(--aviso-bg);
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

.btn-remover {
    color: var(--alerta-color);
    border-color: var(--alerta-color);
}

.btn-remover:hover {
    background-color: var(--alerta-bg);
}

/* ---------------- cartao da reserva ---------------- */

.folha-bloco {
    margin: 18px 26px 0;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    background: var(--suave-bg);
    overflow: hidden;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.folha-bloco.ligado {
    border-color: var(--accent-color);
    background: var(--accent-suave);
}

.folha-opcao {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 16px 15px;
    cursor: pointer;
    min-width: 0;
}

/* A caixa de marcar desenhada a mao: a nativa nao segue o tema. */
.folha-opcao input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    margin: 0;
    padding: 0;
    border: 2px solid var(--border-campo);
    border-radius: 7px;
    background: var(--input-bg);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.folha-opcao:hover input[type="checkbox"] {
    border-color: var(--accent-color);
}

.folha-opcao input[type="checkbox"]:checked {
    border-color: var(--accent-color);
    background: var(--accent-color);
}

.folha-opcao input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 11px;
    border: solid var(--accent-forte-texto);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.folha-opcao input[type="checkbox"]:active {
    transform: scale(0.94);
}

.folha-opcao input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* flex-basis 0: o texto ocupa exatamente o espaco que sobra, sem deixar o
   proprio conteudo empurrar a largura. Com "auto", a largura natural do texto
   participava do calculo e a linha podia passar da borda do cartao. */
.folha-opcao-texto {
    display: block;
    flex: 1 1 0;
    min-width: 0;
}

.folha-opcao-texto strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color);
}

.folha-opcao-texto small {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted-color);
    overflow-wrap: anywhere;
}

/* ---------------- quantidade ---------------- */

.folha-quantidade {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px 16px;
    border-top: 1px dashed var(--border-color);
    opacity: 0.45;
    transition: opacity 0.18s ease;
}

.folha-bloco.ligado .folha-quantidade {
    opacity: 1;
}

.folha-quantidade label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-color);
}

.folha-quantidade input {
    width: 82px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1.5px solid var(--border-campo);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.folha-quantidade input::-webkit-outer-spin-button,
.folha-quantidade input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.folha-quantidade input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-suave);
}

.folha-quantidade input:disabled {
    cursor: not-allowed;
}

.folha-dica {
    font-size: 12px;
    color: var(--fraco-color);
}

/* ---------------- erro ---------------- */

.folha-erro {
    margin: 16px 26px 0;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--alerta-bg);
    border-left: 4px solid var(--alerta-color);
    color: var(--alerta-color);
    font-size: 12.5px;
    line-height: 1.45;
}

/* ---------------- botoes ---------------- */

.folha-botoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 22px 26px 24px;
}

.folha-botoes .btn {
    min-height: 44px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
}

/* ---------------- celular ---------------- */

@media (max-width: 560px) {
    .dialogo-folha {
        width: calc(100% - 20px);
        max-width: none;
        border-radius: 14px;
    }

    .dialogo-topo {
        padding: 18px 18px 15px;
    }

    .dialogo-titulo {
        font-size: 16.5px;
    }

    .folha-aviso,
    .folha-erro {
        margin-left: 18px;
        margin-right: 18px;
    }

    .folha-bloco {
        margin: 16px 18px 0;
    }

    .folha-opcao {
        padding: 15px 15px 14px;
        gap: 12px;
    }

    .folha-opcao input[type="checkbox"] {
        width: 26px;
        height: 26px;
        border-radius: 8px;
    }

    .folha-opcao input[type="checkbox"]:checked::after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 12px;
    }

    .folha-quantidade {
        padding: 13px 15px 15px;
        row-gap: 8px;
    }

    /* 16px evita o navegador do celular dar zoom ao focar o campo. */
    .folha-quantidade input {
        width: 84px;
        font-size: 16px;
    }

    .folha-botoes {
        flex-direction: column-reverse;
        padding: 18px 18px 20px;
    }

    .folha-botoes .btn {
        width: 100%;
    }
}

/* Telas baixas (celular deitado): aperta os espacamentos para tudo caber. */
@media (max-height: 560px) {
    .dialogo-topo { padding-top: 16px; padding-bottom: 12px; }
    .folha-bloco { margin-top: 12px; }
    .folha-botoes { padding-top: 16px; padding-bottom: 16px; }
}

/* No celular o historico vira uma lista de cartoes: cinco colunas nao cabem na
   largura do telefone sem espremer o texto. */
@media (max-width: 560px) {
    .tabela-historico,
    .tabela-historico tbody,
    .tabela-historico tr,
    .tabela-historico td {
        display: block;
        width: 100%;
    }

    .tabela-historico thead {
        display: none;
    }

    .tabela-historico tr {
        padding: 10px 12px;
        margin-bottom: 10px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
    }

    .tabela-historico td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 4px 0;
        border-bottom: none;
        text-align: left;
    }

    .tabela-historico td::before {
        content: attr(data-rotulo);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--muted-color);
    }

    .tabela-historico td.col-acao {
        justify-content: flex-end;
        padding-top: 10px;
    }

    .tabela-historico td.col-acao::before,
    .tabela-historico td.vazio::before {
        content: '';
    }

    .tabela-historico td.col-acao .btn {
        width: 100%;
    }

    .historico-rolagem {
        max-height: none;
    }
}

/* No celular o resumo do pedido ocupa a largura toda e cada item vira uma
   linha: e o numero que a pessoa le de longe, com o celular na mao. */
@media (max-width: 560px) {
    .resumo-item {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

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

    .janta-modo {
        gap: 8px;
    }

    .janta-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .janta-modo-opcao {
        flex: 1 1 0;
        padding: 9px 8px;
        min-height: 42px;
    }

    .voto-opcoes {
        flex-direction: column;
    }

    .voto-opcao {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        min-height: 52px;
    }

    .voto-botoes .btn {
        flex: 1 1 0;
    }

    .dialogo-voto {
        width: calc(100vw - 20px);
        padding: 16px;
    }
}