/* Tema do Gestor Escolar — identidade a partir do logotipo (verde-azulado), em tema escuro e claro.
   Fontes locais: Bricolage Grotesque (títulos e números) e Atkinson Hyperlegible (texto, feita para leitura clara).
   As cores e os componentes (botões, selos, campos) ficam em ds.css. */
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/BricolageGrotesque.ttf') format('truetype'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }

:root {
    --ink: rgb(var(--rgb-page));
    --board: rgb(var(--rgb-surface));
    --rule: rgb(var(--rgb-line));
    --chalk: rgb(var(--rgb-text-strong));
    --muted: rgb(var(--rgb-muted));
    --live: rgb(var(--rgb-ok));
    --signal: rgb(var(--rgb-warn));
    --danger: rgb(var(--rgb-bad));
}

body { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: 15px; line-height: 1.5; color: rgb(var(--rgb-text)); }

/* Títulos e números com a voz do tema */
h1, h2, h3, h4, .font-display, .stat-value {
    font-family: 'Bricolage Grotesque', 'Atkinson Hyperlegible', system-ui, sans-serif;
    letter-spacing: -0.012em;
    font-variation-settings: 'opsz' 24;
}
h1, h2 { text-wrap: balance; }

/* Rótulos em frase normal (sem caixa alta) e tamanhos mínimos legíveis */
.uppercase { text-transform: none !important; letter-spacing: 0 !important; }
.tracking-wider, .tracking-wide { letter-spacing: 0 !important; }
[class*="text-[10px]"], [class*="text-[11px]"] { font-size: 0.8125rem !important; line-height: 1.25rem; }
label.block { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
input[type="text"], input[type="password"], input[type="date"], select, textarea { font-family: inherit; }

/* Números alinhados em colunas */
table, .stat-value, .font-mono { font-variant-numeric: tabular-nums; }
.font-mono { font-family: 'Atkinson Hyperlegible', ui-monospace, monospace; letter-spacing: 0.04em; }

/* Tela de login: texto de apresentação à esquerda e formulário à direita */
.login-split { display: grid; min-height: calc(100vh - 68px); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .login-split { grid-template-columns: 1.15fr 1fr; } }
.login-hero {
    position: relative; overflow: hidden; padding: 4rem 4.5rem; display: none; flex-direction: column; justify-content: center;
    background: radial-gradient(900px 500px at 10% 0%, rgb(0 152 144 / .22), transparent 65%), var(--ink);
    border-right: 1px solid var(--rule);
}
html[data-theme="light"] .login-hero { background: radial-gradient(900px 500px at 10% 0%, rgb(0 152 144 / .16), transparent 65%), rgb(var(--rgb-surface-2)); }
@media (min-width: 1024px) { .login-hero { display: flex; } }
.login-hero::after {
    content: ''; position: absolute; right: -140px; bottom: -160px; width: 560px; height: 560px;
    background: url('/logo.png') center / contain no-repeat; opacity: 0.07; pointer-events: none;
}
.login-hero h2 { font-size: clamp(2.5rem, 4.2vw, 3.75rem); line-height: 1.04; font-weight: 700; max-width: 14ch; color: var(--chalk); }
.login-hero p { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted); max-width: 30rem; }
.login-card {
    width: 100%; max-width: 24rem; background: var(--board); border: 1px solid var(--rule); border-radius: 1.25rem; padding: 2rem;
    box-shadow: var(--shadow-lg);
}
.login-card h2 { font-size: 1.5rem; font-weight: 700; color: var(--chalk); }
.login-card p.help { margin-top: 0.375rem; margin-bottom: 1.5rem; font-size: 0.9375rem; color: var(--muted); }

/* "hidden" precisa vencer o display das telas de login */
#loginSection.hidden, #profAuthSection.hidden { display: none !important; }

/* Escolha "com senha / sem senha": opções empilhadas, mais claras de ler */
#entryModeWrap:not(.hidden), #schedEntryWrap:not(.hidden) { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }