/* Tema Anglo — o mesmo do admin.colegioanglocamboriu.com.br (01/11/2026), por cima da casca.
 * Carregar DEPOIS de app.css (Passeios) / casca.css + rematricula.css (Rematrícula): o arquivo é o mesmo
 * nos dois sistemas, e a casca continua intacta embaixo (tirar este <link> volta ao visual antigo).
 * Direção: topo marinho com o nome do sistema em Anton e o risco amarelo de spray, menu lateral branco,
 * títulos de página em Anton maiúsculo, números em Anton, botões em pílula. Login: o leão do mural.
 * Contrastes: tinta #14203a 15:1 · tinta-2 #44516b 7,9:1 · azul #02528a 8,2:1 sobre branco ·
 * marinho com branco 18:1 · amarelo só como traço/ícone sobre marinho (nunca texto sobre branco). */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
    --marinho: #0a1428;
    --amarelo: #ffd21f;
    --cor-primaria: #02528a;
    --cor-primaria-hover: #013e69;
    --cor-primaria-suave: #e4eef7;
    --cor-marca-acento: #ffd21f;
    --cor-marca-dourado: #ffd21f;
    --cor-fundo: #edf1f7;
    --cor-superficie-2: #f5f8fc;
    --cor-texto: #14203a;
    --cor-texto-suave: #44516b;
    --cor-foco: #1f6fd1;
    --lateral: #0a1428;               /* topo, avisos flutuantes e topo da página pública */
    --lateral-foco: #ffd21f;
    --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fonte-titulo: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fonte-display: "Anton", "Impact", "Arial Narrow", sans-serif;
    --raio-grande: 16px;
    --topo-h: 64px;
    --sombra-flutuante: 0 12px 32px rgba(10, 20, 40, .18), 0 2px 6px rgba(10, 20, 40, .08);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --mola: cubic-bezier(.34, 1.56, .64, 1);
    /* luz do login-motion: amarelo e azul do mural */
    --lm-cor: rgba(255, 210, 31, .28);
    --lm-cor-2: rgba(31, 176, 236, .30);
}

/* ---------- topo marinho ---------- */
.barra-topo { height: var(--topo-h); padding: 0 var(--e-3) 0 var(--e-2); background: var(--marinho); }
.barra-topo__botao:hover { background: rgba(255, 255, 255, .12); }
.barra-topo__marca { gap: var(--e-3); min-width: 0; padding: var(--e-1) var(--e-2); border-radius: var(--raio); font-family: var(--fonte); font-weight: 400; }
.barra-topo__marca img { width: 36px; height: 36px; border-radius: 0; flex: none; }
.barra-topo__nome { position: relative; font-family: var(--fonte-display); font-size: 1.5rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase; }
.barra-topo__nome::after { content: ""; position: absolute; left: -2px; right: -4px; bottom: -6px; height: 5px; border-radius: 3px 6px 2px 5px; background: var(--amarelo); transform: rotate(-2deg); transform-origin: left center; }
.barra-topo__escola { display: none; font-size: var(--t-12); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); white-space: nowrap; }
@media (min-width: 640px) { .barra-topo__escola { display: block; } }

/* ---------- menu lateral branco (o mesmo do admin) ---------- */
.lateral {
    top: var(--topo-h); gap: var(--e-4); padding: var(--e-4) var(--e-3);
    background: #fff; color: var(--cor-texto-suave); border-right: 1px solid var(--cor-borda); overflow-y: auto;
}
.veu { top: var(--topo-h); background: rgba(10, 20, 40, .45); }
.lateral :focus-visible { outline-color: var(--cor-foco); }
.lateral__marca { display: none; }
.lateral__secao { margin: var(--e-4) var(--e-3) var(--e-1); padding-top: var(--e-4); border-top: 1px solid var(--cor-borda); letter-spacing: .14em; color: var(--cor-texto-suave); }
.lateral__link { font-size: var(--t-14); color: var(--cor-texto-suave); transition: background-color 120ms ease-out, color 120ms ease-out; }
.lateral__link:hover { background: #e8eef6; color: var(--cor-texto); }
.lateral__link[aria-current="page"] { background: var(--cor-primaria-suave); color: var(--cor-primaria-hover); }
.lateral__link[aria-current="page"]::before { left: -12px; top: 8px; bottom: 8px; width: 5px; border-radius: 0 4px 4px 0; background: var(--amarelo); }
.lateral__rodape { border-top: 1px solid var(--cor-borda); }
.lateral__usuario strong { color: var(--cor-texto); }
.lateral__usuario span { color: var(--cor-texto-suave); }
.lateral__sair .lateral__link { font-size: var(--t-14); }

@media (min-width: 1024px) {
    /* o topo fica no computador também: a marca do sistema mora nele, como no admin */
    .barra-topo { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 45; padding-left: var(--e-4); }
    .barra-topo__botao { display: none; }
    .lateral { top: var(--topo-h); }
    .painel__conteudo { padding-top: var(--topo-h); }
    .pagina { max-width: 1180px; margin: 0; padding: var(--e-7) clamp(32px, 4vw, 64px) var(--e-8); }
    /* cabeçalho da tabela da Rematrícula gruda embaixo do topo, não atrás dele */
    .tabela--alunos thead th, .tabela--ind thead th, .tabela--alt thead th { top: var(--topo-h); }
    .tabela--ind thead tr + tr th { top: calc(var(--topo-h) + 33px); }
}

/* ---------- cabeçalho da página: título na fonte da campanha, com o risco de spray ---------- */
.titulo {
    position: relative; display: inline-block; padding-bottom: var(--e-3);
    font-family: var(--fonte-display); font-weight: 400; font-size: clamp(2rem, 6vw, 2.441rem);
    line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; color: var(--marinho);
}
.titulo::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: min(100%, 120px); height: 8px;
    border-radius: 4px 9px 3px 7px; background: var(--amarelo); transform: rotate(-1.5deg); transform-origin: left center;
}
.cabecalho { margin-bottom: var(--e-6); }
.cabecalho p { margin-top: var(--e-3); max-width: 62ch; }
.subtitulo { font-weight: 700; letter-spacing: -.01em; }
@media (min-width: 720px) { .titulo { font-size: 2.441rem; } }

/* ---------- botões em pílula ---------- */
.botao { border-radius: 999px; padding: var(--e-2) var(--e-5); font-weight: 600; font-size: var(--t-14); transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out; }
.botao:active { transform: scale(.97); }
.botao--largo { min-height: 48px; font-size: var(--t-16); }
.botao--pequeno { padding: var(--e-1) var(--e-4); font-size: var(--t-14); }
.botao--link { border-radius: 0; padding: 0; }
.botao--link:active { transform: none; }
.pag-btn { border-radius: 999px; }
.btn-icone { border-radius: 50%; }

/* ---------- números em Anton, com o traço amarelo do admin ---------- */
.indicador { position: relative; gap: var(--e-2); padding: var(--e-4) var(--e-4) var(--e-5); overflow: hidden; }
.indicador::after { content: ""; position: absolute; left: var(--e-4); bottom: 0; width: 40px; height: 4px; border-radius: 4px 4px 0 0; background: var(--amarelo); }
.indicador--ok, .indicador--alerta, .indicador--erro { border-top: 1px solid var(--cor-borda); }
.indicador--ok::after { background: var(--cor-ok); }
.indicador--alerta::after { background: #d99a00; }
.indicador--erro::after { background: var(--cor-erro); }
.indicador__valor { font-family: var(--fonte-display); font-weight: 400; font-size: clamp(2rem, 5vw, 2.5rem); line-height: 1; color: var(--marinho); }
.indicador__valor small { font-family: var(--fonte); }
.passos__numero { font-family: var(--fonte-display); font-weight: 400; font-size: var(--t-20); }

/* ---------- avisos flutuantes ---------- */
.toast { background: var(--marinho); border-left: 4px solid var(--amarelo); }
.toast--erro { background: var(--marinho); border-left-color: #ff6b81; }

/* ---------- página da família (Passeios) ---------- */
.publico__topo { background: var(--marinho); border-bottom: 4px solid var(--amarelo); }
.publico__logo { border-radius: 0; }
.publico__marca strong { font-family: var(--fonte-display); font-weight: 400; font-size: var(--t-20); letter-spacing: .02em; text-transform: uppercase; }

/* ---------- login: o leão do mural (o mesmo do admin) ----------
   No celular a marca vira capa com o leão no alto e o formulário sobe por cima num cartão branco;
   no computador, as duas colunas do padrão da casa. */
.login { background: var(--marinho); }
.login__grade { grid-template-rows: auto 1fr; }
.login__lado {
    position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-6);
    min-height: min(46dvh, 380px); padding: calc(var(--e-5) + env(safe-area-inset-top)) var(--e-5) calc(var(--e-6) + 28px);
    color: #fff; background: var(--marinho);
}
.login__lado::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(10, 20, 40, .55) 0%, rgba(10, 20, 40, .1) 38%, rgba(10, 20, 40, .82) 100%), url("../img/mural-leao.webp") 64% 40% / cover no-repeat;
}
.login__lado::after { display: none; }
.login__lado-meio { display: block; }
.login__marca img { width: 48px; height: 48px; border-radius: 0; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)); }
.login__marca strong { font-family: var(--fonte-display); font-weight: 400; font-size: var(--t-25); line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.login__marca > span > span { margin-top: 2px; letter-spacing: .14em; color: rgba(255, 255, 255, .8); }
.login__slogan {
    max-width: 15ch; font-family: var(--fonte-display); font-weight: 400; font-size: clamp(2.25rem, 10.5vw, 4rem);
    line-height: 1.02; letter-spacing: .005em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(10, 20, 40, .55);
}
.login__acento { width: 96px; height: 8px; margin-top: var(--e-4); border-radius: 4px 9px 3px 7px; background: var(--amarelo); transform: rotate(-1.5deg); }
.login__apoio, .login__recursos { display: none; }

.login__form {
    position: relative; z-index: 1; place-items: start center; margin-top: -28px;
    padding: var(--e-6) var(--e-5) calc(var(--e-6) + env(safe-area-inset-bottom));
    background: var(--cor-superficie); border-radius: 28px 28px 0 0; box-shadow: 0 -8px 24px rgba(10, 20, 40, .18);
}
.login__form::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #dfe5ee; }
.login__topo-movel { display: none; }
.login__form .titulo { display: block; padding: 0; font-family: var(--fonte); font-weight: 700; font-size: var(--t-25); line-height: 1.15; letter-spacing: -.02em; text-transform: none; color: var(--cor-texto); }
.login__form .titulo::after { display: none; }
.login__subtitulo { margin: calc(var(--e-2) * -1) 0 var(--e-2); }
.login__rodape { text-align: left; }

@media (min-width: 1024px) {
    .login { background: var(--cor-superficie); }
    .login__grade { grid-template-rows: 1fr; }
    .login__lado {
        min-height: 0; justify-content: flex-start; gap: 0; padding: var(--e-7) clamp(40px, 5vw, 80px);
        background: radial-gradient(120% 90% at 0% 0%, #0f3a66 0%, var(--marinho) 62%);
    }
    .login__lado::before {
        inset: 0 -12% 0 38%; opacity: .5;
        background: url("../img/mural-leao.webp") 30% 50% / cover no-repeat;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
    }
    .login__marca img { width: 56px; height: 56px; }
    .login__lado-meio { margin: auto 0; max-width: 30rem; }
    .login__slogan { font-size: clamp(2.6rem, 4.2vw, 4rem); }
    .login__acento { margin-top: var(--e-5); }
    .login__lado-meio .login__apoio { display: block; max-width: none; margin-top: var(--e-5); font-size: var(--t-20); line-height: 1.45; color: rgba(255, 255, 255, .84); }
    .login__lado > .login__apoio { display: block; color: rgba(255, 255, 255, .7); }
    .login__recursos { display: grid; margin-top: var(--e-6); gap: var(--e-4); }
    .login__recursos li { font-weight: 500; color: rgba(255, 255, 255, .92); }
    .login__recursos .login__chip { border: 1px solid rgba(255, 255, 255, .16); color: var(--amarelo); }
    .login__form { margin: 0; place-items: center; padding: var(--e-7) var(--e-5); border-radius: 0; box-shadow: none; }
    .login__form::before { display: none; }
    .login__form .titulo { font-size: var(--t-31); }
}

/* ---------- movimento: só transform/opacity; com "reduzir movimento" a tela nasce inteira e parada
   (a casca já zera toda animação nesse caso) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .barra-topo__nome::after { animation: anglo-risco 800ms var(--ease-out) 200ms both; }
    .titulo::after { animation: anglo-risco 700ms var(--ease-out) 120ms both; }
    .cabecalho p, .cabecalho .acoes { animation: anglo-sobe 420ms var(--ease-out) 80ms both; }
    .indicador, .pagina .cartao, .pagina .grupo, .filtros, .tabela-rolagem, .acoes-bloco, .passos__item, .embarque__item {
        animation: anglo-sobe 640ms var(--ease-out) both; animation-delay: calc(100ms + var(--i, 0) * 60ms);
    }
    .indicador:nth-child(2), .passos__item:nth-child(2) { --i: 1; }
    .indicador:nth-child(3), .passos__item:nth-child(3) { --i: 2; }
    .indicador:nth-child(4), .passos__item:nth-child(4) { --i: 3; }
    .indicador:nth-child(5), .passos__item:nth-child(5) { --i: 4; }
    .indicador:nth-child(6), .passos__item:nth-child(6) { --i: 5; }
    .indicador::after { animation: anglo-risco 600ms var(--ease-out) 380ms both; }
    .aviso { animation: anglo-sobe 420ms var(--ease-out) both; }
    .toast { animation: anglo-sobe 420ms var(--mola) both; }
    .janela[open] { animation: anglo-janela 420ms var(--ease-out); }
    .janela[open]::backdrop { animation: anglo-veu 420ms ease-out; }
    .menu-aberto .veu { animation: anglo-veu 320ms ease-out; }
    .login__lado::before { animation: anglo-mural 1.6s var(--ease-out) both; }
    .login__form { animation: anglo-cartao 760ms var(--ease-out) 120ms both; }
    .lateral__link .icone { transition: transform 200ms var(--mola); }
    .lateral__link:hover .icone { transform: translateX(2px); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .login__form { animation: none; }
}
@keyframes anglo-sobe { from { opacity: 0; transform: translateY(12px); } }
@keyframes anglo-risco { from { transform: rotate(-1.5deg) scaleX(0); } }
@keyframes anglo-janela { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes anglo-veu { from { opacity: 0; } }
@keyframes anglo-mural { from { transform: scale(1.12); opacity: .4; } }
@keyframes anglo-cartao { from { transform: translateY(48px); } }

@media print {
    .barra-topo { display: none !important; }
    .painel__conteudo { padding-top: 0 !important; }
    .titulo::after { display: none; }
}