/* Telas do sistema atual com a identidade Omoiru.
 * Carregado pelo menu.php depois do Bootstrap de cada página: faz o Bootstrap usar os
 * tokens (tokens.css) e ajusta o que as páginas fixaram em cor clara.
 * Tema escuro: o menu coloca data-theme="escuro" e data-bs-theme="dark" no <html>.
 */

/* ---------- Bootstrap lendo os tokens (os dois temas) ---------- */
:root,
:root[data-bs-theme] {
    --bs-body-font-family: var(--font-texto);
    --bs-body-bg: var(--fundo);
    --bs-body-color: var(--texto);
    --bs-emphasis-color: var(--texto);
    --bs-secondary-color: var(--texto-suave);
    --bs-tertiary-bg: var(--superficie-alt);
    --bs-secondary-bg: var(--superficie-alt);
    --bs-border-color: var(--borda);
    --bs-heading-color: var(--texto);
    --bs-link-color: var(--primaria);
    --bs-link-hover-color: var(--primaria-hover);
}
/* O Bootstrap monta algumas cores com rgba(var(--bs-*-rgb)); precisam dos valores em RGB. */
:root {
    --bs-primary-rgb: 18, 99, 214;
    --bs-success-rgb: 23, 114, 69;
    --bs-danger-rgb: 194, 53, 42;
    --bs-link-color-rgb: 18, 99, 214;
    --bs-link-hover-color-rgb: 14, 82, 179;
    --bs-body-color-rgb: 11, 21, 51;
    --bs-emphasis-color-rgb: 11, 21, 51;
}
:root[data-theme="escuro"] {
    --bs-primary-rgb: 77, 155, 255;
    --bs-success-rgb: 127, 220, 168;
    --bs-danger-rgb: 255, 157, 146;
    --bs-link-color-rgb: 77, 155, 255;
    --bs-link-hover-color-rgb: 111, 176, 255;
    --bs-body-color-rgb: 242, 245, 250;
    --bs-emphasis-color-rgb: 242, 245, 250;
}

body {
    background-color: var(--fundo) !important; /* as páginas fixam #f8f9fc no próprio estilo */
    color: var(--texto);
    font-family: var(--font-texto);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .modal-title {
    font-family: var(--font-titulo);
    color: var(--texto);
}

/* Faixa de filtros do Início: mesmo fundo da página nos dois temas. */
.sticky-filter-panel { background-color: var(--fundo) !important; }
/* Etiquetas informativas (ex.: nível do usuário): ciano com texto branco não tinha contraste. */
.badge.bg-info { background-color: var(--superficie-alt) !important; color: var(--texto) !important; border: 1px solid var(--borda); }

/* ---------- Cartões, tabelas, formulários ---------- */
.card {
    --bs-card-bg: var(--superficie);
    --bs-card-border-color: var(--borda);
    --bs-card-cap-bg: var(--superficie-alt);
    --bs-card-color: var(--texto);
}
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--texto);
    --bs-table-border-color: var(--borda);
    --bs-table-striped-bg: var(--superficie-alt);
    --bs-table-hover-bg: var(--superficie-alt);
    --bs-table-hover-color: var(--texto);
}
/* Cabeçalhos de tabela pretos viram faixa clara, com texto forte. */
.table-dark, .table > thead.table-dark, .table-light, thead.bg-dark, thead.bg-dark th {
    --bs-table-bg: var(--superficie-alt);
    --bs-table-color: var(--texto);
    --bs-table-border-color: var(--borda);
    background-color: var(--superficie-alt) !important;
    color: var(--texto) !important;
}
.form-control, .form-select, .input-group-text {
    background-color: var(--superficie);
    color: var(--texto);
    border-color: var(--borda-controle);
}
.form-control::placeholder { color: var(--texto-suave); }
.form-control:focus, .form-select:focus {
    background-color: var(--superficie);
    color: var(--texto);
    border-color: var(--foco);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
.form-control[readonly], .form-control:disabled, .form-select:disabled { background-color: var(--superficie-alt); }
.modal { --bs-modal-bg: var(--superficie); --bs-modal-color: var(--texto); --bs-modal-border-color: var(--borda); }
.dropdown-menu {
    --bs-dropdown-bg: var(--superficie);
    --bs-dropdown-color: var(--texto);
    --bs-dropdown-border-color: var(--borda);
    --bs-dropdown-link-color: var(--texto);
    --bs-dropdown-link-hover-bg: var(--superficie-alt);
    --bs-dropdown-link-hover-color: var(--texto);
}
.list-group {
    --bs-list-group-bg: var(--superficie);
    --bs-list-group-color: var(--texto);
    --bs-list-group-border-color: var(--borda);
    --bs-list-group-action-hover-bg: var(--superficie-alt);
    --bs-list-group-action-hover-color: var(--texto);
}
.nav-tabs .nav-link.active { color: var(--primaria); background-color: var(--superficie); }

/* ---------- Janelas de registro (aluno.php) ---------- */
.modal-header, .modal-footer { border-color: var(--borda); }
.modal-title .badge { font-family: var(--font-texto); font-size: 0.75rem; letter-spacing: 0.04em; vertical-align: 0.15em; }
.modal .card-header { background-color: var(--superficie-alt); color: var(--texto); }
/* O <form> fica entre .modal-content e .modal-body: sem isto, a janela em tela cheia não rola só o miolo. */
.modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* "Qual?" ao lado de "Outro" no grau de parentesco; o JS só tira o display:none do próprio campo. */
.ar-parentesco-outro { display: inline-block; width: 12rem; max-width: 100%; vertical-align: middle; }
/* Aluno escolhido na ocorrência escolar */
.ar-aluno-tag { background-color: var(--oc-sai); color: #fff; border: 0; border-radius: var(--raio-pill);
                 font-size: 0.9375rem; font-weight: 700; padding: 8px 10px 8px 12px !important; }
.ar-aluno-tag > i { color: #fff; }
.ar-aluno-tag .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: .85; }
.ar-aluno-tag .btn-close:hover { opacity: 1; }
/* Celular (portaria, corredor): alvos de toque maiores; 16px nos campos evita o zoom automático do iPhone. */
@media (max-width: 575.98px) {
    .modal .form-control, .modal .form-select { min-height: 44px; font-size: 16px; }
    .modal .form-check:not(.form-switch) { min-height: 36px; display: flex; align-items: center; gap: 0.5rem; padding-left: 0; }
    .modal .form-check-inline:not(.form-switch) { display: inline-flex; margin-right: 1rem; }
    .modal .form-check:not(.form-switch) .form-check-input { float: none; margin: 0; width: 1.35em; height: 1.35em; flex-shrink: 0; }
    .modal-footer { flex-wrap: nowrap; }
    .modal-footer > .btn { flex: 1 1 0; min-height: 48px; }
}

/* ---------- Botões ---------- */
.btn { font-family: var(--font-texto); font-weight: 600; border-radius: var(--raio-md); }
.btn-primary {
    --bs-btn-bg: var(--primaria); --bs-btn-border-color: var(--primaria); --bs-btn-color: var(--sobre-primaria);
    --bs-btn-hover-bg: var(--primaria-hover); --bs-btn-hover-border-color: var(--primaria-hover); --bs-btn-hover-color: var(--sobre-primaria);
    --bs-btn-active-bg: var(--primaria-hover); --bs-btn-active-border-color: var(--primaria-hover); --bs-btn-active-color: var(--sobre-primaria);
}
.btn-outline-primary {
    --bs-btn-color: var(--primaria); --bs-btn-border-color: var(--primaria);
    --bs-btn-hover-bg: var(--primaria); --bs-btn-hover-border-color: var(--primaria); --bs-btn-hover-color: var(--sobre-primaria);
}
.btn-success {
    --bs-btn-bg: var(--sucesso); --bs-btn-border-color: var(--sucesso); --bs-btn-color: var(--superficie);
    --bs-btn-hover-bg: var(--sucesso); --bs-btn-hover-border-color: var(--sucesso); --bs-btn-hover-color: var(--superficie);
}
.btn-danger {
    --bs-btn-bg: var(--perigo); --bs-btn-border-color: var(--perigo); --bs-btn-color: var(--sobre-perigo);
    --bs-btn-hover-bg: var(--perigo); --bs-btn-hover-border-color: var(--perigo); --bs-btn-hover-color: var(--sobre-perigo);
}
/* "Editar" (amarelo) e "Histórico" (ciano) viram botões neutros: ação comum, sem alarme. */
.btn-warning, .btn-secondary, .btn-light {
    --bs-btn-bg: var(--superficie-alt); --bs-btn-border-color: var(--borda-controle); --bs-btn-color: var(--texto);
    --bs-btn-hover-bg: var(--borda); --bs-btn-hover-border-color: var(--borda-controle); --bs-btn-hover-color: var(--texto);
    --bs-btn-active-bg: var(--borda); --bs-btn-active-color: var(--texto);
}
.btn-info {
    --bs-btn-bg: var(--superficie); --bs-btn-border-color: var(--primaria); --bs-btn-color: var(--primaria);
    --bs-btn-hover-bg: var(--primaria); --bs-btn-hover-border-color: var(--primaria); --bs-btn-hover-color: var(--sobre-primaria);
}
.btn-warning.text-dark, .btn-info.text-white, .btn-light.text-primary { color: var(--bs-btn-color) !important; }
.btn-outline-danger { --bs-btn-color: var(--perigo); --bs-btn-border-color: var(--perigo); --bs-btn-hover-bg: var(--perigo); --bs-btn-hover-color: var(--sobre-perigo); }

/* ---------- Tema escuro: cores que as páginas fixaram em claro ---------- */
[data-theme="escuro"] .bg-white,
[data-theme="escuro"] .bg-light,
[data-theme="escuro"] .bg-light-subtle { background-color: var(--superficie-alt) !important; }
[data-theme="escuro"] .card.bg-white,
[data-theme="escuro"] .card .bg-white { background-color: var(--superficie) !important; }
[data-theme="escuro"] .text-dark,
[data-theme="escuro"] .text-black { color: var(--texto) !important; }
[data-theme="escuro"] .text-black-50,
[data-theme="escuro"] .text-muted,
[data-theme="escuro"] .text-secondary { color: var(--texto-suave) !important; }
[data-theme="escuro"] body.bg-light,
[data-theme="escuro"] body.bg-white { background-color: var(--fundo) !important; }
[data-theme="escuro"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="escuro"] .shadow, [data-theme="escuro"] .shadow-sm, [data-theme="escuro"] .shadow-lg { box-shadow: var(--sombra-cartao) !important; }

/* SweetAlert2 (avisos de sucesso/erro): fontes e botão da marca nos dois temas */
.swal2-popup { font-family: var(--font-texto); border-radius: var(--raio-lg); }
.swal2-popup .swal2-title { font-family: var(--font-titulo); font-size: 1.375rem; }
.swal2-popup .swal2-styled.swal2-confirm { background-color: var(--primaria); color: var(--sobre-primaria); border-radius: var(--raio-md); }
.swal2-popup .swal2-styled.swal2-cancel { background-color: var(--superficie-alt); color: var(--texto); border-radius: var(--raio-md); }
.swal2-popup .swal2-styled.ar-swal-perigo { background-color: var(--perigo); color: var(--sobre-perigo); }
.swal2-popup .swal2-styled.swal2-deny { background-color: var(--superficie); color: var(--primaria); border: 1px solid var(--primaria); border-radius: var(--raio-md); }
.swal2-popup .swal2-timer-progress-bar { background: var(--primaria); opacity: 0.4; }
/* Fundo e texto nos dois temas; --swal2-background também pinta as peças que cobrem o ícone de sucesso. */
.swal2-popup { --swal2-background: var(--superficie); background: var(--superficie); color: var(--texto); }
.swal2-popup .swal2-title, .swal2-popup .swal2-html-container { color: var(--texto); }
/* Ícones nas cores de aviso dos tokens */
.swal2-popup .swal2-icon.swal2-success { border-color: var(--sucesso); color: var(--sucesso); }
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--sucesso); opacity: 0.35; }
.swal2-popup .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--sucesso); }
.swal2-popup .swal2-icon.swal2-success .swal2-success-fix,
.swal2-popup .swal2-icon.swal2-success [class^="swal2-success-circular-line"] { background-color: var(--superficie); }
.swal2-popup .swal2-icon.swal2-error { border-color: var(--erro); color: var(--erro); }
.swal2-popup .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--erro); }
.swal2-popup .swal2-icon.swal2-warning { border-color: var(--atencao); color: var(--atencao); }
.swal2-popup .swal2-icon.swal2-info, .swal2-popup .swal2-icon.swal2-question { border-color: var(--primaria); color: var(--primaria); }

/* ---------- Tipos de ocorrência (manual: sigla sempre escrita, cor + fundo) ----------
 * No fim do arquivo e com ":root" no seletor (mesmo peso de [data-theme] .text-dark) para vencer .text-dark/.text-white das páginas. */
:root .oc-ent { background-color: var(--oc-ent-fundo) !important; color: var(--oc-ent) !important; }
:root .oc-sai { background-color: var(--oc-sai-fundo) !important; color: var(--oc-sai) !important; }
:root .oc-bus { background-color: var(--oc-bus-fundo) !important; color: var(--oc-bus) !important; }
:root .oc-ata { background-color: var(--oc-ata-fundo) !important; color: var(--oc-ata) !important; }
:root .oc-oes { background-color: var(--oc-oes-fundo) !important; color: var(--oc-oes) !important; }
:root .oc-pais { background-color: var(--superficie-alt) !important; color: var(--texto) !important; }
:root .oc-texto-ent { color: var(--oc-ent) !important; }
:root .oc-texto-sai { color: var(--oc-sai) !important; }
:root .oc-texto-bus { color: var(--oc-bus) !important; }
:root .oc-texto-ata { color: var(--oc-ata) !important; }
:root .oc-texto-oes { color: var(--oc-oes) !important; }

/* ---------- Ícones Lucide (fonte lucide-static, carregada pelo menu.php) ---------- */
[class^="icon-"], [class*=" icon-"] { display: inline-block; line-height: 1; vertical-align: -0.125em; font-size: 1.1em; }
.ar-icone-2x { font-size: 2em; }
.ar-icone-3x { font-size: 3em; }
.ar-icone-4x { font-size: 4em; }
.ar-girar { animation: ar-girar 1s linear infinite; }
@keyframes ar-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ar-girar { animation-duration: 3s; } }

/* ---------- Foco do teclado sempre visível (mesmo contorno da tela de login) ---------- */
.btn:focus-visible, a:focus-visible, .form-check-input:focus-visible, .btn-close:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
    box-shadow: none;
}


/* ---------- Painéis: Início e Relatórios (controles de período, cartões, selos) ---------- */
.ar-pagina { max-width: 1344px; margin: 0 auto; padding: 32px 24px 48px; display: flex; flex-direction: column; gap: 28px; }
.ar-cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
/* Título com largura de referência fixa: o tamanho do texto embaixo dele ("Ocorrências de 2026" ou "de outubro
   de 2026") não decide se os controles cabem na mesma linha. Antes, trocar para "Ano" subia os cartões. */
.ar-cabecalho > div:first-child { flex: 1 1 320px; min-width: 0; }
.ar-cabecalho h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 4px; }
.ar-cabecalho p { margin: 0; color: var(--texto-suave); }
.ar-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ar-segmentos { display: flex; background: var(--superficie-alt); border-radius: 10px; padding: 4px; gap: 4px; }
.ar-segmentos button { min-height: 36px; padding: 0 14px; border: 0; background: transparent; border-radius: 8px; font-weight: 600; color: var(--texto-suave); }
.ar-segmentos button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); font-weight: 700; box-shadow: 0 1px 2px rgba(11, 21, 51, 0.12); }
.ar-passo { display: flex; align-items: center; height: 44px; border: 1px solid var(--borda-controle); border-radius: var(--raio-md); background: var(--superficie); }
.ar-passo button { width: 40px; height: 42px; border: 0; background: transparent; color: var(--texto-suave); }
.ar-passo button:disabled { opacity: 0.35; }
.ar-passo { position: relative; }
/* Período com largura fixa (o maior é a semana, "28 de setembro a 4 de outubro") e ícone de calendário. */
.ar-passo .ar-periodo-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 244px; padding: 0 8px; color: var(--texto); font-weight: 600; border-radius: var(--raio-sm); }
.ar-passo .ar-periodo-botao:hover { background: var(--superficie-alt); }
.ar-passo .ar-periodo-botao:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.ar-passo .ar-periodo-botao i { color: var(--primaria); flex-shrink: 0; }
.ar-passo .ar-periodo-botao span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-periodo-data { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.ar-controles .form-select { height: 44px; width: auto; }
.ar-controles .btn { height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; }
.ar-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-cartao); }
.ar-selo { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: var(--raio-pill); }
/* Ícone do tipo (icones_tipos.php) dentro de selos e etiquetas: mesma cor, à esquerda da sigla. */
.ar-selo:has(.ar-icone-tipo), .badge:has(.ar-icone-tipo) { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ar-icone-tipo { width: 1.3em; height: 1.3em; flex-shrink: 0; }
/* Ícones das opções (motivos e providências, nas janelas e nos Relatórios): uma cor por ideia, para achar a opção de relance.
   Cores dos tokens, com contraste nos dois temas (o amarelo e o ciano do Bootstrap sumiam no branco). */
.ar-ic-vermelho { color: var(--erro); }
.ar-ic-ambar { color: var(--atencao); }
.ar-ic-verde { color: var(--sucesso); }
.ar-ic-azul { color: var(--oc-oes); }
.ar-ic-teal { color: var(--oc-ata); }
.ar-ic-roxo { color: var(--oc-sai); }
.ar-ic-cinza { color: var(--texto-suave); }
.ar-selo-ativo { background: var(--sucesso-fundo); color: var(--sucesso); }
.ar-selo-inativo { background: var(--superficie-alt); color: var(--texto-suave); border: 1px solid var(--borda); }
.ar-vazio { color: var(--texto-suave); margin: 0; }

/* Tabelas: Relatórios e cadastros (Turmas, Usuários) */
.ar-tabela { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ar-tabela th { text-align: left; font-weight: 700; color: var(--texto-suave); font-size: 0.8125rem; padding: 10px 12px; border-bottom: 1px solid var(--borda); background: var(--superficie-alt); white-space: nowrap; }
.ar-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.ar-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.ar-tabela tbody tr:hover { background: var(--superficie-alt); }
.ar-tabela .zero { color: var(--texto-suave); }
.ar-tabela a { font-weight: 600; text-decoration: none; }
.ar-rolagem { overflow-x: auto; }

/* Abas dentro de uma área (Cadastros: Turmas | Usuários) */
.ar-subabas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); overflow-x: auto; }
.ar-subabas a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-bottom: 3px solid transparent; color: var(--texto-suave); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ar-subabas a:hover { color: var(--texto); }
.ar-subabas a[aria-current="page"] { color: var(--primaria); border-bottom-color: var(--primaria); font-weight: 700; }
.ar-subabas a:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }

/* Cadastros: cartão com busca no topo e a tabela embaixo */
.ar-cadastro { padding: 20px 24px 8px; display: flex; flex-direction: column; gap: 16px; }
.ar-busca { position: relative; max-width: 420px; }
.ar-busca i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-suave); pointer-events: none; }
.ar-busca .form-control { height: 44px; padding-left: 38px; }
.ar-tabela .ar-titulo-linha { font-weight: 700; }
.ar-tabela .ar-col-acoes { text-align: right; white-space: nowrap; }
.ar-acoes-linha { display: inline-flex; gap: 8px; }
.ar-acoes-linha .btn { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ar-tabela td.ar-sem-dados { text-align: center; color: var(--texto-suave); padding: 32px 12px; }
/* Celular: cada linha vira um cartão; o rótulo de cada valor vem de data-rotulo na célula. */
@media (max-width: 767.98px) {
    .ar-cadastro { padding: 16px; }
    .ar-busca { max-width: none; }
    .ar-tabela-cartoes thead { display: none; }
    .ar-tabela-cartoes, .ar-tabela-cartoes tbody, .ar-tabela-cartoes tr, .ar-tabela-cartoes td { display: block; width: 100%; }
    .ar-tabela-cartoes tr { margin-bottom: 12px; padding: 12px 16px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-md); }
    .ar-tabela-cartoes tbody tr:hover { background: var(--superficie); }
    .ar-tabela-cartoes td { padding: 4px 0; border: 0; }
    .ar-tabela-cartoes td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: 600; color: var(--texto-suave); }
    .ar-tabela-cartoes .ar-titulo-linha { font-size: 1.0625rem; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--borda); }
    .ar-tabela-cartoes .ar-col-acoes { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--borda); }
    .ar-tabela-cartoes .ar-acoes-linha .btn { width: 44px; height: 44px; }
    .ar-tabela-cartoes tr:has(.ar-sem-dados) { border: 0; background: transparent; }
}
.ar-carregando { opacity: 0.55; transition: opacity 0.15s; }
@media (prefers-reduced-motion: reduce) { .ar-carregando { transition: none; } }
@media (max-width: 767.98px) {
    .ar-pagina { padding: 20px 16px 96px; gap: 20px; }
    .ar-cabecalho h1 { font-size: 1.5rem; }
    .ar-controles, .ar-segmentos, .ar-passo { width: 100%; }
    .ar-segmentos button { flex: 1 1 0; min-height: 40px; }
    .ar-passo { justify-content: space-between; height: 48px; }
    .ar-passo .ar-periodo-botao { width: auto; flex: 1; min-width: 0; height: 46px; }
    .ar-controles .form-select { flex: 1 1 100%; }
    .ar-controles .btn { flex: 1 1 100%; justify-content: center; height: 48px; }
}

/* ---------- Turmas por série (Turmas e Início do professor) ----------
   Um cartão por série e uma linha por turma; a linha inteira abre os alunos da turma. */
.ar-nivel-titulo { font-family: var(--font-texto); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); margin: 8px 0 12px; }
.ar-series-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; margin-bottom: 24px; }
.ar-serie-turmas { overflow: hidden; }
.ar-serie-turmas-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 20px 10px; border-bottom: 1px solid var(--borda); }
.ar-serie-turmas-topo h3 { margin: 0; font-family: var(--font-titulo); font-size: 1.125rem; font-weight: 700; }
.ar-serie-turmas-topo span { font-size: 0.875rem; color: var(--texto-suave); white-space: nowrap; }
.ar-turmas-linhas { list-style: none; margin: 0; padding: 0; }
.ar-turmas-linhas li + li { border-top: 1px solid var(--borda); }
.ar-turma-linha { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px 8px 20px; color: var(--texto); text-decoration: none; }
.ar-turma-linha:hover { background: var(--superficie-alt); color: var(--texto); }
.ar-turma-linha:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.ar-turma-letra { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--raio-md); background: var(--superficie-alt); font-family: var(--font-titulo); font-size: 1.0625rem; font-weight: 700; }
.ar-turma-info { display: flex; flex-direction: column; line-height: 1.25; }
.ar-turma-info strong { font-weight: 600; }
.ar-turma-info span { font-size: 0.875rem; color: var(--texto-suave); }
.ar-turma-registros { text-align: right; line-height: 1.15; }
.ar-turma-registros strong { display: block; font-family: var(--font-titulo); font-size: 1.125rem; }
.ar-turma-registros span { font-size: 0.75rem; color: var(--texto-suave); }
.ar-turma-registros.zero strong { color: var(--texto-suave); font-weight: 600; }
.ar-turma-linha > i { color: var(--texto-suave); }
/* Série recolhida (aba Turmas): o cartão mostra só o resumo; tocar abre as turmas para escolher. */
.ar-serie-recolhida > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 12px; padding: 16px 20px; list-style: none; cursor: pointer; border-radius: var(--raio-lg); }
.ar-serie-recolhida > summary::-webkit-details-marker { display: none; }
.ar-serie-recolhida > summary:hover { background: var(--superficie-alt); }
.ar-serie-recolhida > summary:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.ar-serie-recolhida:not([open]) > summary { border-bottom: 0; }
.ar-serie-recolhida[open] > summary { border-radius: var(--raio-lg) var(--raio-lg) 0 0; }
.ar-serie-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-serie-nome h3 { margin: 0; }
.ar-serie-nome > span { font-size: 0.875rem; color: var(--texto-suave); }
.ar-serie-recolhida > summary > i { color: var(--texto-suave); transition: transform .2s ease; }
.ar-serie-recolhida[open] > summary > i { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ar-serie-recolhida > summary > i { transition: none; } }
@media (max-width: 767.98px) {
    .ar-series-grade { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ar-serie-turmas-topo { padding: 12px 16px 8px; }
    .ar-turma-linha { padding: 8px 12px 8px 16px; gap: 10px; }
}

/* Linha do tempo do aluno: ficha (pagina_aluno.php) e histórico (janela da tela Alunos). Um item por registro, com
   a marca e uma faixa fina na cor do tipo; filtros por tipo em cima. */
.ar-filtro-tempo { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ar-filtro-tempo button { min-height: 34px; padding: 0 12px; border: 1px solid var(--borda-controle); border-radius: var(--raio-pill); background: var(--superficie); font-weight: 600; font-size: 0.8125rem; }
.ar-filtro-tempo button[aria-pressed="true"] { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.ar-tempo { list-style: none; margin: 0; padding: 0; position: relative; }
.ar-tempo::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--borda); }
.ar-tempo li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
.ar-tempo .marca { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); border: 2px solid var(--borda); position: relative; z-index: 1; }
.ar-tempo .marca svg { width: 16px; height: 16px; }
/* Cor do tipo na marca e numa faixa fina à esquerda do texto: dá para saber o que foi batendo o olho. */
.ar-tempo li[style] .marca { border-color: var(--faixa); color: var(--faixa); }
.ar-tempo .corpo { border-left: 3px solid var(--faixa, transparent); padding-left: 12px; }
.ar-tempo .corpo > strong { display: block; } /* só o título do item; os rótulos dos detalhes ficam na linha */
.ar-tempo .corpo p { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 0.9375rem; }
.ar-tempo .quando { color: var(--texto-suave); font-size: 0.8125rem; }
.ar-tempo .retorno { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--sucesso); background: var(--sucesso-fundo); font-size: 0.875rem; }
.ar-tempo .quando { display: block; margin-top: 4px; }
.ar-tempo .marca i { font-size: 1rem; }

/* Paginação das listas (20 por página): Alunos e Cadastros → Alunos (assets/js/paginacao.js) */
.ar-paginacao { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 4px 4px; }
.ar-paginacao:empty { display: none; }
.ar-paginacao-info { color: var(--texto-suave); font-size: 0.875rem; }
.ar-paginacao-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.ar-paginacao .btn { min-height: 40px; display: inline-flex; align-items: center; gap: 4px; }
.ar-paginacao-num { min-width: 40px; justify-content: center; }
.ar-paginacao-num[aria-current] { opacity: 1; }
@media (max-width: 767.98px) {
    .ar-paginacao { flex-direction: column; align-items: stretch; }
    .ar-paginacao-info { text-align: center; }
    .ar-paginacao-botoes { justify-content: space-between; }
    .ar-paginacao-num:not([aria-current]) { display: none; }
}

/* Links de anexo (#33): Relatórios → Anexos e histórico do aluno. Abrem por ver_anexo.php. */
.ar-anexos-linha { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ar-anexo-link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border: 1px solid var(--borda-controle); border-radius: var(--raio-pill); color: var(--primaria); font-weight: 600; font-size: 0.8125rem; text-decoration: none; white-space: nowrap; background: var(--superficie); }
.ar-anexo-link:hover { background: var(--superficie-alt); color: var(--primaria); }

/* Impressão (todas as telas): papel branco e sem o espaço reservado ao menu inferior do celular.
   Fica no fim do arquivo para vencer o fundo da tela (body com !important lá em cima). */
@media print {
    html, body { background: #fff !important; }
    body { padding-bottom: 0 !important; }
    .ar-pagina { padding-bottom: 0 !important; }
}

/* Botão ⓘ ao lado do título (assets/js/info.js): a explicação do quadro num balão, não fixa na tela. */
.ar-info { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--texto-suave); font-size: 1rem; line-height: 1; vertical-align: middle; cursor: help; }
h1 .ar-info { font-size: 1.125rem; vertical-align: 0.15em; }
.ar-info:hover, .ar-info[aria-expanded="true"] { color: var(--primaria); background: var(--superficie-alt); }
.ar-info:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; }
.ar-info-balao { position: absolute; z-index: 1090; max-width: min(320px, calc(100vw - 32px)); padding: 10px 12px; border-radius: var(--raio-md); background: var(--texto); color: var(--fundo); font-family: var(--font-texto); font-size: 0.875rem; font-weight: 400; line-height: 1.45; text-align: left; letter-spacing: normal; text-transform: none; box-shadow: 0 8px 24px -8px rgba(11, 21, 51, 0.45); }
.ar-info-balao::before { content: ""; position: absolute; left: calc(var(--seta, 50%) - 6px); width: 12px; height: 12px; background: inherit; transform: rotate(45deg); }
.ar-info-balao[data-lado="abaixo"]::before { top: -5px; }
.ar-info-balao[data-lado="acima"]::before { bottom: -5px; }
@media print { .ar-info, .ar-info-balao { display: none !important; } }

/* Revisão de acessibilidade (onda 4, axe-core WCAG 2.1 AA): o cinza e o verde do Bootstrap não tinham contraste
   suficiente no fundo das telas. Passam a usar as cores dos tokens, nos dois temas. */
.text-secondary, .text-muted { color: var(--texto-suave) !important; }
.btn-outline-success {
    --bs-btn-color: var(--sucesso); --bs-btn-border-color: var(--sucesso);
    --bs-btn-hover-bg: var(--sucesso); --bs-btn-hover-border-color: var(--sucesso); --bs-btn-hover-color: var(--superficie);
    --bs-btn-active-bg: var(--sucesso); --bs-btn-active-border-color: var(--sucesso); --bs-btn-active-color: var(--superficie);
}