/* styles.css - estilos compartilhados do Sistema Métis */

/* Fontes: Google Sans (principal) e Figtree (reserva). Imports separados pra que a
   falha de um não derrube o outro. Precisam ficar antes de qualquer regra. */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700&display=swap');

* {
    box-sizing: border-box;
}

/* ==========================================================
   TOKENS DE COR
   Claro: paleta herdada do SIGE (fundo/texto), vermelho e azul
   reservados a ações específicas.
   Escuro: navy + dourado da identidade visual do Sistema Métis.
   Dourado (--color-brand-gold) é constante: usado só no logo,
   nunca no resto do texto, independente do tema.
   ========================================================== */
:root {
    --color-bg: #cbdad5;
    --color-surface: #ffffff;
    --color-text: #1a5276;
    --color-text-muted: #4a6b7c;
    --color-primary: #fb5061;
    /* cancelar/sair/limpar (padrão SIGE) */
    --color-secondary: #194e92;
    /* ações secundárias/links ("Azul Bic" da tabela de cores) */
    --color-accent: #d4a017;
    /* destaque pontual (claro) */
    --color-border: #a9c1ba;
    --color-border-contorno: #bcb4a1;
    /* contorno externo de cartões e tabelas ("Marrom-claro" da tabela de cores) */
    --color-topbar-bg: #1a5276;
    --color-topbar-text: #ffffff;
    --color-btn-bg: #1a5276;
    --color-btn-text: #ffffff;
    --color-sidebar-bg: #ffffff;
    --color-sidebar-active-bg: #e4edea;
    --color-brand-gold: #f7c64e;
    /* fixo, só pro logo */

    /* Calendário (exibição): tudo na cor da fonte, todas da tabela de cores.
     Uma paleta só, valendo pros dois temas (tons médios, que aparecem no fundo
     claro e no escuro). No escuro só entra um ajuste de brilho, como nas pílulas
     de matrícula (ver o fim do arquivo). Categorias do dia em negrito;
     trimestres e fim de semana em peso normal. */
    --cal-fr: var(--color-primary);
    /* Feriado */
    --cal-fe: #108071;
    /* Verde: Férias */
    --cal-ano: #1a73e8;
    /* Azul-centúrea-2: Início e Fim do Ano Letivo */
    --cal-fp: #cd7f32;
    /* Bronze: Formação Pedagógica */
    --cal-ti: #647c64;
    /* Verde-liddy: Trabalho Interno */
    --cal-rpf: #eb3c00;
    /* Vermelho-google: Recesso / Ponto Facultativo */
    --cal-sl: #548135;
    /* Verde-escuro: Sábado Letivo */
    --cal-cc: #4c8cf5;
    /* Azul-google: Conselho de Classe */
    --cal-reuniao: #69797e;
    /* Cinza-azulado: RAP, RP e RCE */
    --cal-t1: #1c97e8;
    /* Azul-3: 1º Trimestre */
    --cal-t2: #83743d;
    /* Ocre: 2º Trimestre */
    --cal-t3: #19a15f;
    /* Verde-google: 3º Trimestre */
    --cal-sab: #ed7d31;
    /* Laranja-2: Sábado */
    --cal-dom: var(--color-primary);
    /* Domingo */

    /* Quadro de Horários (exibição): sigla da matéria só na cor da fonte, mesmas
     famílias de cor do SIGE (amarelo, verde, rosa, azul). Cores já usadas no calendário. */
    --cron-ef: #cd7f32;
    /* Bronze: EF */
    --cron-espaco: #19a15f;
    /* Verde-google: ETQRT */
    --cron-tracos: #1c97e8;
    /* Azul-3: TSCF/EFPI */
    --cron-lit: var(--color-primary);
    /* LA */

    /* Estatística (Geral e Vagas): cor de status e de turno só na fonte, mesmo
     princípio do Calendário (sem fundo). Cores vêm da tabela oficial do
     projeto (Tabela de cores RGB e HEX.xlsx) — Ativa continua sem cor
     própria. Azul Bic reaproveita --color-secondary; Tarde usa o Bronze da
     tabela (22/09/2026, pedido do Davi: cor de status igual em todo o
     sistema). */
    --status-evadida: #c00000;
    /* Vermelho-escuro */
    --status-cancelada: #935837;
    /* Laranja escuro */
    --status-remanejada: #996600;
    /* Amarelo-escuro */
    --status-transferida: #548135;
    /* Verde-escuro */
    --turno-manha: var(--color-secondary);
    /* Azul Bic, reaproveitado */
    --turno-tarde: #cd7f32;
    /* Bronze da tabela de cores (claro apenas; o escuro mantém o
       Marrom-acizentado original abaixo). Troca pedida pelo Davi em
       22/09/2026: tom mais alaranjado no lugar do Ouro-velho */
}

[data-theme="dark"] {
    /* Escuro (27/09/2026): espelha o claro (Azul Bic + dourado), sem verde na
       interface — só o fundo escurece, a identidade continua a mesma. */
    --color-bg: #101d29;
    --color-surface: #16293a;
    --color-text: #eef2ef;
    --color-text-muted: #7fa0b3;
    --color-primary: #fb5061;
    --color-secondary: #5b9bd5;
    /* "Azul-claro-2" da tabela de cores: o Azul Bic clareado, pra aparecer no escuro */
    --color-accent: #e7c178;
    /* Ouro dessaturado (~40%): o mesmo destaque do claro, menos berrante no
       escuro (pedido do Davi, 27/09/2026) */
    --color-border: #22384a;
    --color-border-contorno: #515c6b;
    /* "Azul-metálico" da tabela de cores: moldura de cartões, tabelas e popups */
    --color-topbar-bg: #0b1620;
    --color-topbar-text: #cfe0ec;
    --color-btn-bg: #194e92;
    /* Azul Bic (mesmo tom do claro); texto branco (8,3:1) */
    --color-btn-text: #ffffff;
    --color-sidebar-bg: #0d1c29;
    --color-sidebar-active-bg: #1b3247;
    --color-input-bg: #0b1620;
    /* Cinza-azulado-claro da tabela de cores: turno da Tarde no escuro (o
       Bronze do claro sumia contra o azul-marinho; pedido do Davi, 27/09/2026) */
    --turno-tarde: #d1dce6;
    /* Vermelho-google da tabela de cores (já usado no Recesso do calendário):
       Evadidos no escuro, menos berrante que o Vermelho-escuro do claro */
    --status-evadida: #eb3c00;
    color-scheme: dark;
    /* barra de rolagem, lista do select e calendário do input date no escuro */
}

[data-theme="dark"] label {
    color: var(--color-text);
}

[data-theme="dark"] input,
[data-theme="dark"] select {
    background: var(--color-input-bg);
    color: var(--color-text);
}

/* No escuro o azul do destaque (--color-secondary) é claro: texto branco em
   cima dele fica ilegível. Texto escuro (--color-topbar-bg, cor já existente)
   nos elementos preenchidos dele. */
/* Separação entre cartões e fundo no escuro: os tons de fundo e superfície são
   próximos, então a borda sozinha não destaca; sombra neutra ajuda. */
[data-theme="dark"] .card,
[data-theme="dark"] .card-form,
[data-theme="dark"] .tabela-wrap,
[data-theme="dark"] .aviso-sucesso,
[data-theme="dark"] .login-box {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Hover do botão vermelho: texto marrom sobre vermelho dava 4:1 no escuro */
[data-theme="dark"] .btn-icone-perigo:hover {
    color: var(--color-topbar-bg);
}

/* Pílulas de saída no escuro: mesmo tom, só menos brilho (sem cor nova) */
[data-theme="dark"] .status-transferida,
[data-theme="dark"] .status-evadida,
[data-theme="dark"] .status-cancelada,
[data-theme="dark"] .status-remanejada {
    filter: brightness(0.8);
}

[data-theme="dark"] .btn-acao,
[data-theme="dark"] .btn-icone-salvar:hover,
[data-theme="dark"] .chip-turma.selecionado,
[data-theme="dark"] .marcador-pcd {
    color: var(--color-topbar-bg);
}

body {
    font-family: 'Google Sans', 'Figtree', Arial, sans-serif;
    background: var(--color-bg);
    margin: 0;
    color: var(--color-text);
    transition: background 0.15s ease, color 0.15s ease;
}

/* Botões e campos não herdam a fonte do body por padrão */
button,
input,
select,
textarea {
    font-family: inherit;
}

textarea {
    border-radius: 10px;
}

/* Topbar: presa no alto da tela ao rolar a página (Davi, 26/09/2026). Fica
   por cima do conteúdo e por baixo dos popups (100) e dos avisos de tela (200). */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-topbar-bg);
    padding: 12px 20px;
    color: var(--color-topbar-text);
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar .logo {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 19px;
    letter-spacing: 0.5px;
    color: var(--color-brand-gold);
}

.logo-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-brand-gold);
    color: var(--color-topbar-bg);
    font-weight: bold;
    font-size: 13px;
    margin-right: 8px;
    flex-shrink: 0;
}

.logo-icone-img {
    width: 26px;
    height: 26px;
    margin-right: 8px;
    flex-shrink: 0;
    object-fit: contain;
}

.topbar .usuario {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: var(--color-topbar-text);
}

/* ----------------------------------------------------------
   Envelope de notificações e menu do usuário (topo)
   ---------------------------------------------------------- */
.topbar-envelope {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--color-topbar-text);
    cursor: pointer;
    padding: 0;
    opacity: 0.85;
}

.topbar-envelope:hover {
    opacity: 1;
}

/* Mensagem não lida: círculo na cor de destaque do tema, ícone na cor da barra */
.topbar-envelope.com-notificacao {
    background: var(--color-accent);
    color: var(--color-topbar-bg);
    opacity: 1;
}

/* Número de não lidas no canto do envelope: mesmas cores da .badge (vermelho do
   sistema, número em branco) nos dois temas; contorno na cor da barra do topo */
/* Campo de senha com o olho de mostrar/esconder (login e Trocar senha).
   O olho do próprio Edge fica escondido pra não aparecerem dois. */
.campo-senha {
    position: relative;
    margin-bottom: 12px;
}

.campo-senha input {
    margin-bottom: 0;
    padding-right: 44px;
}

.campo-senha input::-ms-reveal,
.campo-senha input::-ms-clear {
    display: none;
}

.btn-olho {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.btn-olho:hover,
.btn-olho:focus-visible {
    color: var(--color-text);
}

.btn-olho svg {
    width: 20px;
    height: 20px;
    margin-right: 0;
}

.topbar-envelope-numero {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    border: 2px solid var(--color-topbar-bg);
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    pointer-events: none;
}

.usuario-menu {
    position: relative;
}

.usuario-gatilho {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--color-topbar-text);
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    padding: 0 6px;
    border-radius: 8px;
}

.usuario-gatilho:hover {
    opacity: 0.85;
}

.usuario-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--color-topbar-text);
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
}

.usuario-nome {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-seta {
    display: inline-flex;
    transition: transform 0.15s;
}

.usuario-seta .icone-svg {
    margin-right: 0;
}

.usuario-gatilho[aria-expanded="true"] .usuario-seta {
    transform: rotate(180deg);
}

.usuario-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    padding: 6px;
    z-index: 60;
}

.usuario-dropdown[hidden] {
    display: none;
}

.usuario-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 15px;
    text-align: left;
    padding: 9px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.usuario-item .icone-svg {
    margin-right: 0;
}

.usuario-item:hover {
    background: var(--color-sidebar-active-bg);
}

.usuario-item[hidden] {
    display: none;
}

.usuario-item-sair {
    color: var(--color-primary);
}

.usuario-separador {
    border-top: 1px solid var(--color-border);
    margin: 6px 0;
}

.usuario-tema {
    display: flex;
    gap: 4px;
    padding: 2px 0;
}

.usuario-tema-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    padding: 8px 0;
    border-radius: 6px;
    cursor: pointer;
}

.usuario-tema-btn:hover {
    background: var(--color-sidebar-active-bg);
}

.usuario-tema-btn.ativo {
    background: var(--color-sidebar-active-bg);
    color: var(--color-secondary);
}

.theme-toggle {
    background: none;
    border: none;
    font-size: 17px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
}

/* ==========================================================
   APP SHELL (topbar + sidebar + conteúdo)
   ========================================================== */
.app-shell {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 49px);
}

/* Presa abaixo da topbar (56px), com scroll próprio: não cresce mais com a
   página (Davi, 27/09/2026). Se a altura da topbar mudar, ajustar os dois
   números abaixo (mesmo número usado no sticky da caixa de notificações). */
.sidebar {
    width: 320px;
    flex-shrink: 0;
    background: var(--color-sidebar-bg);
    border-right: 1px solid var(--color-border);
    padding: 12px 0;
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 16px;
}

.sidebar-item:hover {
    background: var(--color-sidebar-active-bg);
}

.sidebar-item.ativo {
    background: var(--color-sidebar-active-bg);
    font-weight: bold;
    border-left: 3px solid var(--color-secondary);
    padding-left: 15px;
}

.sidebar-item-desabilitado {
    opacity: 0.5;
    cursor: not-allowed;
}

.sidebar-badge-em-breve {
    margin-left: auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--color-border);
    color: var(--color-text-muted);
    padding: 2px 6px;
    border-radius: 4px;
}

.sidebar-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sidebar-icone svg {
    width: 18px;
    height: 18px;
}

.sidebar-grupo {
    margin-top: 6px;
}

.sidebar-grupo-titulo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 10px 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    cursor: pointer;
    text-align: left;
}

.sidebar-grupo-titulo .seta {
    transition: transform 0.15s ease;
    font-size: 12px;
}

.sidebar-grupo-titulo.expandido .seta {
    transform: rotate(90deg);
}

.sidebar-grupo-itens {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.15s ease;
}

.sidebar-grupo-itens.aberto {
    max-height: 300px;
}

.conteudo {
    flex: 1;
    min-width: 0;
}

/* Layout */
.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 24px 20px;
}

.voltar {
    background: none;
    border: none;
    color: var(--color-secondary);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 0;
    margin-bottom: 18px;
    display: inline-block;
}

.voltar:hover {
    text-decoration: underline;
}

.subtitulo-escola {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 16px;
}

/* Cards */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-contorno);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.card-ativo {
    border: 2px solid var(--color-secondary);
}

.card-inativo {
    opacity: 0.6;
}

.card-titulo {
    font-weight: bold;
    margin-bottom: 6px;
    color: var(--color-text);
}

.card-desc {
    font-size: 15px;
    color: var(--color-text-muted);
    margin: 0;
}

.card-btn {
    margin-top: auto;
    padding-top: 10px;
}

.badge {
    display: inline-block;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    align-self: flex-start;
}

.badge-disponivel {
    background: var(--color-accent);
    color: #1a1a1a;
}

.badge-em-breve {
    background: var(--color-border);
    color: var(--color-text-muted);
}

/* Status de matrícula */
.status-badge {
    display: inline-block;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: bold;
}

/* Ativa não leva pílula: as pílulas existem pra destacar as saídas */
.status-ativa {
    background: none;
    border: none;
    padding: 0;
    font-weight: normal;
    color: var(--color-text);
}

.status-transferida {
    background: #ccffcc;
    color: #1a5276;
}

.status-evadida {
    background: #ffcccc;
    color: #1a5276;
}

.status-cancelada {
    background: #ffe0cc;
    color: #1a5276;
}

.status-remanejada {
    background: #fffacc;
    color: #1a5276;
}

/* Formulários */
label {
    font-size: 15px;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 4px;
}

/* Campos com o mesmo canto dos cartões, tabelas e popups (10px) em todas as telas */
input,
select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 16px;
    margin-bottom: 12px;
    background: var(--color-surface);
    color: var(--color-text);
}

/* Campo em foco, no escuro: contorno ocre no lugar do anel branco do navegador (todas as telas) */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    outline: none;
    border-color: var(--color-border-contorno);
    box-shadow: 0 0 0 1px var(--color-border-contorno);
}

[data-theme="dark"] input[type="checkbox"]:focus-visible,
[data-theme="dark"] input[type="radio"]:focus-visible {
    outline: 2px solid var(--color-border-contorno);
    outline-offset: 2px;
}

/* Checkbox e botões de escolha (Sim/Não) em qualquer tela: cor de destaque do tema, em vez do azul padrão do navegador */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-secondary);
}

.linha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.filtros {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}

/* Botões */
button {
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primario {
    width: 100%;
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
}

.btn-acao {
    width: 100%;
    background: var(--color-secondary);
    color: #fff;
}

.btn-perigo {
    background: var(--color-primary);
    color: #fff;
}

/* Tabela */
.tabela-wrap {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-contorno);
    border-radius: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

th,
td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    white-space: normal; /* quebra só entre palavras; sem rolagem de lado */
}

th {
    color: var(--color-text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

tr:last-child td {
    border-bottom: none;
}

.estado-vazio {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-muted);
    font-size: 15px;
}

/* Estados */
.erro {
    font-size: 14px;
    color: var(--color-primary);
    min-height: 18px;
    margin-bottom: 8px;
}

.resultado {
    display: none;
    margin-top: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
}

/* Login */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(32px, 8vw, 140px);
    position: relative;
}

.login-marca {
    width: clamp(380px, 32vw, 640px);
    max-width: 45vw;
    height: auto;
    flex-shrink: 1;
}

@media (max-width: 860px) {
    .login-marca {
        display: none;
    }
}

.login-box {
    max-width: 340px;
    width: 100%;
    margin: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-contorno);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
}

.login-box .icone {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-topbar-bg);
    color: var(--color-brand-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 13px;
    font-weight: bold;
}

.login-box label {
    text-align: left;
}

.login-lembrar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin: 0 0 12px;
    cursor: pointer;
}

.login-lembrar input {
    width: auto;
    margin: 0;
}

.theme-toggle-flutuante {
    position: fixed;
    top: 16px;
    right: 16px;
}

/* ==========================================================
   Cadastro de aluno — passos, chips de turma, seções, toggles
   ========================================================== */
.passo-titulo {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.card-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border-contorno);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.resultado-fase {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    min-height: 60px;
}

.resultado-fase.vazio {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 14px;
}

.resultado-fase.fora {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.res-fase-nome {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
}

.res-fase-idade {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.chips-turma {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip-turma {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    background: var(--color-bg);
    color: var(--color-secondary);
    border: 1px solid var(--color-border);
    cursor: pointer;
}

.chip-turma:hover {
    opacity: 0.85;
}

.chip-turma.selecionado {
    background: var(--color-secondary);
    color: #fff;
    border-color: var(--color-secondary);
}

.chip-turma.sem-vaga {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.chip-turno {
    font-weight: 400;
    opacity: 0.8;
}

.secao-titulo {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 6px;
    margin: 20px 0 14px;
}

.secao-titulo:first-child {
    margin-top: 0;
}

.obrig {
    color: var(--color-primary);
}

.radio-linha {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    align-items: center;
}

.radio-linha label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--color-text);
    margin-bottom: 0;
    font-weight: normal;
}

.campo-readonly {
    background: var(--color-bg) !important;
    color: var(--color-text-muted) !important;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: start;
}

.tel-wpp {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tel-wpp input[type="text"] {
    margin-bottom: 0;
    flex: 1;
}

.wpp-chk {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    white-space: nowrap;
    margin-bottom: 0 !important;
    font-weight: normal !important;
}

.aviso-sucesso {
    background: var(--color-surface);
    border: 1px solid var(--color-border-contorno);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
}

.aviso-sucesso .codigo {
    font-size: 23px;
    font-weight: bold;
    color: var(--color-secondary);
    margin: 10px 0;
}

/* ==========================================================
   Botões com ícone, estilo contorno (adaptado do padrão do
   SIGE_EstilosBotoes) — fundo transparente, contorno e texto
   na cor do botão, inverte pra preenchido no hover.
   ========================================================== */
.icone-svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 4px;
}

/* ============================================================
   BOTÕES - fonte única do padrão e do acervo de ícones (substitui o
   antigo metis_estilos_botoes.txt, apagado em 23/09/2026)
   Todo botão usa .btn-icone + UMA cor:
     .btn-icone-salvar  ação principal e Configurar: Salvar, Matricular,
                        Buscar, Confirmar, Gerar, Configurar...
     .btn-icone-neutro  ação secundária sem risco: + Adicionar, alternar
                        visão (Alunos/Servidores), navegação
     .btn-icone-perigo  Cancelar, Limpar, Sair, Excluir (vermelho fixo)
   Nunca criar uma 4ª cor.
   Posição: ação principal à esquerda, Cancelar/Limpar à direita (em
   .linha-acoes a ordem do HTML decide). Botão ao lado dos filtros de
   uma tela (ex.: Configurar ...): célula .filtro-acao, que alinha à
   direita e na linha dos campos, com a mesma altura e letra deles.
   Botão pequeno dentro de tabela/linha: style="min-width:auto;
   padding:8px 14px;".

   Estrutura:
   <button class="btn-icone btn-icone-salvar" onclick="funcao()">
     <svg class="icone-svg" ...>...</svg> Texto do botão
   </button>

   ÍCONES PRONTOS (outline 24x24, stroke 2.2, round): copiar daqui.
   Buscar/Pesquisar (lupa):
     <svg class="icone-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
       <circle cx="11" cy="11" r="7"></circle>
       <line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>

   Salvar (disquete):
     <svg class="icone-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
       <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
       <polyline points="17 21 17 13 7 13 7 21"></polyline>
       <polyline points="7 3 7 8 15 8"></polyline></svg>

   Cancelar/Limpar/Fechar (X):
     <svg class="icone-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
       <line x1="18" y1="6" x2="6" y2="18"></line>
       <line x1="6" y1="6" x2="18" y2="18"></line></svg>

   Novo/Adicionar (+):
     <svg class="icone-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
       <line x1="12" y1="5" x2="12" y2="19"></line>
       <line x1="5" y1="12" x2="19" y2="12"></line></svg>

   Configurar (engrenagem):
     <svg class="icone-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
       <circle cx="12" cy="12" r="3"></circle>
       <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>

   Editar (lápis):
     <svg class="icone-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
       <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
       <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>

   Voltar (seta de retorno): usado no `.voltar` de topo de tela, não em botão:
     <svg class="icone-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
       <path d="M9 14 4 9l5-5"></path>
       <path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"></path></svg>

   Vínculo/Link (correntinho):
     <svg class="icone-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
       <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
       <circle cx="9" cy="7" r="4"></circle>
       <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
       <path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>

   Matricular (prancheta, o mesmo ícone da Matrícula que existia na barra lateral):
     <svg class="icone-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
       <rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
       <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
       <path d="M12 11h4"></path><path d="M12 16h4"></path>
       <path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>

   Continuar/Confirmar (visto):
     <svg class="icone-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
       <polyline points="20 6 9 17 4 12"></polyline></svg>

   Falta no acervo (achar/gerar na hora que precisar, não inventar sem
   critério): Imprimir, Excluir/lixeira. Ao criar um novo, seguir o mesmo
   estilo dos acima (outline 24x24, stroke 2.2, round) e ACRESCENTAR aqui
   neste comentário. É assim que a lista cresce, igual aconteceu no SIGE.
   ============================================================ */
.btn-icone {
    padding: 8px 18px;
    min-width: 100px;
    font-size: 14px;
    font-weight: 700;
    border: 1.5px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    background: transparent;
    transition: box-shadow 0.15s, transform 0.15s, background 0.15s, color 0.15s;
}

.btn-icone:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.btn-icone:active {
    box-shadow: none;
    transform: translateY(0);
}

.btn-icone-salvar {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.btn-icone-salvar:hover {
    background: var(--color-secondary);
    color: #fff;
}

.btn-icone-neutro {
    border-color: var(--color-text-muted);
    color: var(--color-text-muted);
}

.btn-icone-neutro:hover {
    background: var(--color-border);
    color: var(--color-text);
}

.btn-icone-perigo {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-icone-perigo:hover {
    background: var(--color-primary);
    color: #4e2327;
}

/* Célula do botão ao lado dos filtros: à direita, na linha dos campos
   (desconta o margin-bottom de 12px dos campos) e com a altura deles. */
.filtro-acao {
    display: flex;
    justify-content: flex-end;
    align-self: end;
    grid-column-end: -1;
    margin-bottom: 12px;
}

.filtro-acao .btn-icone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: auto;
    padding: 0 16px;
    height: 37px;
    font-size: 15px;
}

.filtro-acao .btn-icone .icone-svg {
    margin-right: 0;
}

.linha-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

/* ==========================================================
   Popup de confirmação (adaptado do padrão do SIGE)
   ========================================================== */
.popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.popup-overlay.aberto {
    display: flex;
}

.popup-caixa {
    background: var(--color-surface);
    border-radius: 10px;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Popup com formulário (ex.: telinha da matrícula): mais largo, rola por dentro */
.popup-caixa.popup-largo {
    max-width: 600px;
}

.popup-largo .popup-texto {
    max-height: calc(100vh - 170px);
    overflow-y: auto;
}

.popup-titulo {
    background: #4ade80;
    color: #052e16;
    padding: 12px 16px;
    font-weight: bold;
    font-size: 15px;
}

.popup-texto {
    padding: 16px;
    font-size: 15px;
    color: var(--color-text);
}

.popup-botoes {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 0 16px 16px;
}

/* Popup no escuro: título no dourado dessaturado e contorno no tom dos cartões */
[data-theme="dark"] .popup-titulo {
    background: var(--color-accent);
}

[data-theme="dark"] .popup-caixa {
    border: 1px solid var(--color-border-contorno);
}

/* ==========================================================
   Avisos de tela (padrão do sistema), fixos no topo.
   .aviso-toast: fecha sozinho (ex.: "Salvo").
   .aviso-topo: fica até o usuário clicar em Fechar (ex.: recusa).
   Criados por mostrarToast() e mostrarAviso(), do layout.js.
   ========================================================== */
.aviso-toast,
.aviso-topo {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 90vw;
    z-index: 200;
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.aviso-toast {
    border: 1px solid var(--color-secondary);
    padding: 8px 16px;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.aviso-toast.visivel {
    opacity: 1;
}

.aviso-topo {
    display: none;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--color-primary);
    padding: 10px 12px 10px 16px;
    max-width: min(560px, 90vw);
    font-size: 14px;
}

.aviso-topo.aberto {
    display: flex;
}

.aviso-topo .btn-icone {
    min-width: auto;
    padding: 6px 12px;
}

/* ==========================================================
   Turmas — listagem e detalhe
   ========================================================== */
.marcador-pcd {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--color-secondary);
    color: #fff;
}

.turma-card-clicavel {
    cursor: pointer;
    transition: opacity 0.15s;
}

.turma-card-clicavel:hover {
    opacity: 0.85;
}

.turma-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}

.turma-cabecalho .subtitulo-escola {
    margin: 4px 0 0;
}

/* ==========================================================
   Calendário (exibição)
   Sem fundo colorido: tudo aparece só na cor da fonte (variáveis
   --cal-*). Categoria do dia em negrito; trimestre, sábado e
   domingo em peso normal. Os 12 meses quebram em 3, 2 ou 1
   coluna, sem rolagem horizontal.
   ========================================================== */
.cal-meses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 1000px) {
    .cal-meses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .cal-meses {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cal-mes {
    margin-bottom: 0;
    padding: 14px;
}

.cal-mes-titulo {
    font-size: 15px;
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 8px;
}

.cal-mes-grade {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px 0;
    text-align: center;
}

.cal-sem {
    font-size: 12px;
    color: var(--color-text-muted);
    padding-bottom: 4px;
}

.cal-dia {
    font-size: 14px;
    padding: 4px 0;
    color: var(--color-text);
}

.cal-dia.cal-marcado {
    font-weight: bold;
}

.cal-mes-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--color-border);
    margin-top: 10px;
    padding-top: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.cal-mes-total strong {
    color: var(--color-text);
}

.cal-fr {
    color: var(--cal-fr);
}

.cal-fe {
    color: var(--cal-fe);
}

.cal-ano {
    color: var(--cal-ano);
}

.cal-fp {
    color: var(--cal-fp);
}

.cal-ti {
    color: var(--cal-ti);
}

.cal-rpf {
    color: var(--cal-rpf);
}

.cal-sl {
    color: var(--cal-sl);
}

.cal-cc {
    color: var(--cal-cc);
}

.cal-reuniao {
    color: var(--cal-reuniao);
}

.cal-t1 {
    color: var(--cal-t1);
}

.cal-t2 {
    color: var(--cal-t2);
}

.cal-t3 {
    color: var(--cal-t3);
}

.cal-sab {
    color: var(--cal-sab);
}

.cal-dom {
    color: var(--cal-dom);
}

.cal-legenda {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr);
    /* coluna do meio um pouco menor, pra "Reunião de Assessoramento Pedagógico" caber numa linha */
    gap: 8px 24px;
    font-size: 14px;
}

@media (max-width: 1100px) {
    .cal-legenda {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .cal-legenda {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cal-legenda-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.cal-sigla {
    min-width: 44px;
    font-weight: bold;
}

.cal-qtd {
    color: var(--color-text-muted);
}

.cal-blocos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 12px;
    align-items: start;
}

.cal-grupo {
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: fit-content(36%) minmax(0, 1fr);
    column-gap: 12px;
    align-content: start;
}

.cal-grupo-titulo {
    grid-column: 1 / -1;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
}

.cal-linha {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
    column-gap: 12px;
    border-bottom: 1px solid var(--color-border);
    padding: 6px 0;
    font-size: 14px;
}

/* Rótulos e valores alinhados à esquerda; os valores de todas as linhas do
   grupo começam na mesma coluna. */
@supports (grid-template-columns: subgrid) {
    .cal-linha {
        grid-template-columns: subgrid;
    }
}

.cal-linha>span:last-child {
    text-align: left;
    font-weight: bold;
}

.cal-obs {
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0 0 12px;
}

/* No escuro as mesmas cores do claro, só com o brilho ajustado (mesma ideia das
   pílulas de matrícula, que usam filter em vez de cor nova). As cores que já são
   claras sobem pouco; as mais escuras sobem mais, pra manter a leitura. */
[data-theme="dark"] .cal-fr,
[data-theme="dark"] .cal-fp,
[data-theme="dark"] .cal-cc,
[data-theme="dark"] .cal-t1,
[data-theme="dark"] .cal-t3,
[data-theme="dark"] .cal-sab,
[data-theme="dark"] .cal-dom {
    filter: brightness(1.1);
}

[data-theme="dark"] .cal-ano {
    filter: brightness(1.35);
}

[data-theme="dark"] .cal-sl,
[data-theme="dark"] .cal-reuniao {
    filter: brightness(1.4);
}

[data-theme="dark"] .cal-ti,
[data-theme="dark"] .cal-rpf {
    filter: brightness(1.5);
}

[data-theme="dark"] .cal-t2 {
    filter: brightness(1.6);
}

[data-theme="dark"] .cal-fe {
    filter: brightness(1.7);
}

/* ==========================================================
   Quadro de Horários (exibição): cor da sigla da matéria
   ========================================================== */
.cron-ef {
    color: var(--cron-ef);
}

.cron-espaco {
    color: var(--cron-espaco);
}

.cron-tracos {
    color: var(--cron-tracos);
}

.cron-lit {
    color: var(--cron-lit);
}

/* No escuro, mesmas cores com o brilho ajustado (igual ao calendário) */
[data-theme="dark"] .cron-ef,
[data-theme="dark"] .cron-espaco,
[data-theme="dark"] .cron-tracos,
[data-theme="dark"] .cron-lit {
    filter: brightness(1.1);
}

/* Cartão da aula no Quadro de Horários: todos com a altura do cartão de
   3 linhas (matéria + nome da professora em 2 linhas), pra grade ficar
   uniforme mesmo com nome curto ou sem professora. */
.cron-cartao {
    box-sizing: border-box;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--color-sidebar-active-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 8px 10px;
}

/* Nome da professora no cartão da aula: esmaecido no claro, branco no escuro */
.cron-prof {
    color: var(--color-text-muted);
}

[data-theme="dark"] .cron-prof {
    color: var(--color-text);
}

/* ==========================================================
   Previsão de Aulas
   Turma num cartão; cada matéria abre e fecha (fechada mostra o
   resumo). Cores só na fonte: matéria (mesmas do Quadro) e trimestre
   (mesmas do Calendário). Sem fundo colorido.
   ========================================================== */
.prev-disc {
    border-top: 1px solid var(--color-border);
}

.turma-cabecalho+.prev-disc {
    border-top: 0;
}

.prev-resumo {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 20px;
    padding: 12px 0;
    font-size: 14px;
}

.prev-resumo::-webkit-details-marker {
    display: none;
}

.prev-resumo::before {
    content: '▸';
    display: inline-block;
    width: 12px;
    font-size: 12px;
    color: var(--color-text-muted);
    transition: transform 0.15s;
}

.prev-disc[open]>.prev-resumo::before {
    transform: rotate(90deg);
}

.prev-disc-nome {
    font-size: 16px;
    flex: 0 0 240px;
}

.prev-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 16px;
    flex: 1 1 420px;
}

.prev-anual {
    margin-left: auto;
    min-width: 170px;
    text-align: right;
}

.prev-horas {
    color: var(--color-text-muted);
}

.prev-disc .tabela-wrap {
    border: 0;
    box-shadow: none;
    background: transparent;
    margin-bottom: 12px;
}

.prev-tabela .prev-num {
    text-align: center;
}

.prev-tabela .prev-total {
    font-weight: bold;
}

.prev-tabela .prev-zero {
    color: var(--color-text-muted);
    color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
}

.prev-tabela .prev-trim td {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding-top: 18px;
    border-bottom: 2px solid var(--color-border);
}

.prev-tabela .prev-mes td {
    font-weight: bold;
    color: var(--color-text-muted);
    font-size: 14px;
}

.prev-tabela .prev-sem {
    padding-left: 28px;
}

.prev-tabela .prev-tot-mes td {
    font-weight: bold;
    border-top: 1px solid var(--color-border);
}

.prev-tabela .prev-tot-trim td {
    font-weight: bold;
    background: var(--color-sidebar-active-bg);
}

.prev-tabela .prev-tot-anual td {
    font-weight: bold;
    background: var(--color-sidebar-active-bg);
    border-top: 2px solid var(--color-border);
}

/* ==========================================================
   Mapa de Frequência e Ata de Resultados Finais
   Grade de digitação compacta (aulas e faltas) e prévia da Ata
   com a cara do papel. Só cor de fonte, sem fundo colorido.
   ========================================================== */
.card-form .fech-wrap {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.fech-tabela {
    table-layout: fixed;
    width: 100%;
}

.fech-tabela th,
.fech-tabela td {
    padding: 3px 4px;
    text-align: center;
    white-space: normal;
}

.fech-tabela thead th {
    font-size: 12px;
    letter-spacing: 0;
    padding: 5px 2px;
}

.fech-tabela .fech-esq {
    text-align: left;
    padding-left: 8px;
}

.fech-col-esq {
    width: 15%;
}

.fech-col-nome {
    width: 21%;
}

.fech-col-f {
    width: 5.8%;
}

.fech-col-tot {
    width: 7.5%;
}

.fech-tabela .status-badge {
    display: block;
    width: fit-content;
    font-size: 11px;
    padding: 1px 6px;
    margin-top: 2px;
}

.fech-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.fech-legenda-item strong {
    margin-right: 4px;
}

.fech-suave {
    font-size: 12px;
    font-weight: normal;
    color: var(--color-text-muted);
}

.fech-num {
    width: 100%;
    margin: 0;
    padding: 4px 2px;
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    -moz-appearance: textfield;
    appearance: textfield;
}

.fech-num::-webkit-outer-spin-button,
.fech-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fech-cel {
    font-weight: bold;
}

.fech-neg {
    color: var(--color-primary);
}

.fech-total td {
    border-top: 2px solid var(--color-border);
    background: var(--color-sidebar-active-bg);
    font-weight: bold;
}

.ata-folha {
    background: var(--color-surface);
    border: 1px solid var(--color-border-contorno);
    border-radius: 4px;
    padding: 28px 32px;
    max-width: 820px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
}

.ata-titulo {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.ata-subtitulo {
    text-align: center;
    margin-bottom: 14px;
}

.ata-cabecalho {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px 16px;
    margin-bottom: 14px;
    font-size: 13px;
}

.ata-rotulo {
    font-weight: bold;
}

.ata-frase {
    margin: 0 0 12px;
    text-align: justify;
}

.ata-tabela {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
    margin-bottom: 14px;
}

.ata-tabela th,
.ata-tabela td {
    border: 1px solid var(--color-border);
    padding: 3px 6px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ata-tabela th {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    text-align: center;
}

.ata-tabela td {
    height: 26px;
}

.ata-tabela .ata-n {
    text-align: center;
}

.ata-col-n {
    width: 42px;
}

.ata-col-sexo {
    width: 52px;
}

.ata-col-nasc {
    width: 100px;
}

.ata-col-faltas {
    width: 70px;
}

.ata-col-freq {
    width: 86px;
}

.ata-col-obs {
    width: 140px;
}

.ata-regimento p {
    margin: 0 0 6px;
    text-align: justify;
    font-size: 13px;
}

.ata-linha-obs {
    border-bottom: 1px solid var(--color-border);
    height: 24px;
}