/* ──────────────────────────────────────────────────────────────────────
   Portal do Aluno e do Responsável — o que a biblioteca de componentes
   (statics/styles/components.css, cópia de zIDEIAS/estilo.css) NÃO cobre:
   a mecânica do drawer mobile (o shell dela é desktop-first) e um punhado
   de classes pequenas (cartão genérico, grade de estatísticas, cartão de
   autenticação). Tudo aqui usa os tokens da biblioteca (--color-*,
   --space-*, --radius-*, --shadow-*) — nunca cor fixa: --color-primary/
   --color-primary-soft/etc. já apontam pra cor da escola (ou o azul padrão
   do Nexus), pela ponte de vocabulário em base.html.
   ────────────────────────────────────────────────────────────────────── */

/* Portal do Aluno e do Responsável: superfícies sempre planas — zera as
   sombras de elevação da biblioteca (cards, modal, dropdown, botões
   neumórficos etc.), que usam esses tokens em vez de box-shadow fixo. O
   anel de foco (--focus-ring) não é sombra de elevação, fica como está. */
:root {
    --shadow-xs:      none;
    --shadow-sm:      none;
    --shadow-md:      none;
    --shadow-lg:      none;
    --shadow-soft:    none;
    --shadow-soft-sm: none;
    --shadow-inset:   none;
}

/* Botões: a biblioteca cola um box-shadow fixo (cor teal original, nem usa
   os tokens --shadow-* acima) em .btn--primary e nos círculos/FABs de
   destaque — zera todos pra manter a superfície plana também nos botões. */
.btn--primary,
.icon-btn--primary,
.icon-btn--primary:hover,
.fab,
.bottom-nav__fab,
.date-pill:has(input:checked),
.icon-tile[aria-current="true"] .icon-tile__circle,
.dot-tabs__item input:checked + span {
    box-shadow: none;
}

* { box-sizing: border-box; }

/* A biblioteca só dá gap interno (label↔input) ao .field, sem margin-bottom
   — campos empilhados (e o botão de envio logo depois do último) ficavam
   colados. Vale pra qualquer formulário do portal (login, secretaria,
   rematrícula etc.). */
.field { margin-bottom: var(--space-4); }

html { height: 100%; }

body.portal-body {
    margin: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
}

/* ── Header ──────────────────────────────────────────────────────────── */

.portal-header {
    height: var(--header-height, 64px);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
    box-shadow: var(--shadow-xs);
    z-index: 50;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    width: 100%;
}
.portal-header__brand { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-bold); font-size: var(--fs-lg); overflow: hidden; }
.portal-header__logo { height: 42px; width: auto; display: block; max-width: 160px; object-fit: contain; }
.portal-header__brand-fallback { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Gatilho dos dois menus do header (aluno em foco / perfil) — não usa
   .user-menu da biblioteca porque ela assume um topbar claro; aqui o fundo
   é a cor da escola, então o contraste precisa ser outro. */
.header-menu-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: var(--radius-pill);
    background: rgba(255,255,255,.14); color: var(--color-primary-contrast);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer;
    list-style: none;
}
.header-menu-trigger::-webkit-details-marker { display: none; }
.header-menu-trigger:hover { background: rgba(255,255,255,.22); }

/* Cabeçalho não-clicável dentro de um .menu__list (a biblioteca só define
   .menu__item, que é sempre botão) — mesmo tema escuro do menu. */
.menu__label {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    color: var(--color-on-ink); border-bottom: 1px solid rgba(255,255,255,.12);
    margin-bottom: var(--space-1);
}

/* Seletor de aluno em foco: a biblioteca fixa min-width em 160px, estreito
   demais pro avatar + nome completo do filho sem quebrar/cortar feio. */
.menu__list--wide { min-width: 260px; }

/* ── Shell / Sidebar / Drawer (mobile-first, fora da biblioteca) ────── */

.portal-shell { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.portal-main { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; }
.portal-content { flex: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); }

.portal-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: none; background: transparent;
    color: var(--color-primary-contrast); cursor: pointer; flex-shrink: 0;
}

.portal-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    width: 270px; max-width: 80vw;
    display: flex; flex-direction: column;
    background: var(--color-surface); border-right: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-3); overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .28s var(--ease);
}
.portal-sidebar.open { transform: translateX(0); }

.portal-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px; margin-bottom: 12px; }
.portal-sidebar__brand { font-weight: var(--fw-bold); color: var(--color-text); font-size: var(--fs-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-sidebar__close { border: none; background: transparent; color: var(--color-text-muted); font-size: 19px; cursor: pointer; }

.portal-sidebar a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; margin-bottom: 4px; border-radius: var(--radius-sm);
    text-decoration: none; color: var(--color-text); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.portal-sidebar a .icon { color: var(--color-text-muted); }
.portal-sidebar a:hover { background: var(--color-surface-alt); }
.portal-sidebar a.active { background: var(--color-primary-soft); color: var(--color-primary); }
.portal-sidebar a.active .icon { color: var(--color-primary); }
.portal-sidebar__spacer { margin-top: auto; }
.portal-sidebar__logout, .portal-sidebar__logout .icon { color: var(--color-danger); }

#overlay { display: none; position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,0.4); }
#overlay.active { display: block; }

@media (min-width: 900px) {
    .portal-menu-toggle { display: none; }
    #overlay { display: none !important; }
    .portal-sidebar__head { display: none; }
    .portal-sidebar {
        position: static; transform: none; z-index: auto;
        width: 240px; max-width: none; flex-shrink: 0; transition: none;
    }
}

/* ── Títulos e cartão base ──────────────────────────────────────────── */

.portal-page-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-text); margin: 0 0 4px; }
.portal-page-subtitle { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0 0 18px; }
.portal-section-title {
    font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-text-muted); text-transform: uppercase;
    letter-spacing: .5px; margin: var(--space-6) 0 var(--space-3);
}
.portal-section-title:first-child { margin-top: 0; }

/* Cartão genérico — a biblioteca não tem um (só variantes específicas tipo
   .task-card/.stat-card), então este é nosso, com os tokens dela. */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.card__header { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.card__header .icon { color: var(--color-primary); }
.card__header span { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--color-text); }

/* ── Estado vazio ───────────────────────────────────────────────────── */

.portal-empty { text-align: center; color: var(--color-text-muted); padding: 8px 4px; }
.portal-empty .icon { width: 26px; height: 26px; color: var(--color-text-subtle); display: block; margin: 0 auto 10px; }
.portal-empty p { margin: 0; }

/* ── Estatísticas rápidas (dashboard) ───────────────────────────────── */

.portal-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.portal-stat {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4); display: flex; flex-direction: column; gap: 2px; text-decoration: none;
}
.portal-stat__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.portal-stat__value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--color-text); }
.portal-stat__value.danger  { color: var(--color-danger); }
.portal-stat__value.success { color: var(--color-success); }
.portal-stat__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ── Atalhos rápidos ────────────────────────────────────────────────── */

.portal-shortcut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.portal-shortcut {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3); text-decoration: none;
}
.portal-shortcut .icon { color: var(--color-primary); flex-shrink: 0; }
.portal-shortcut span { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); }

/* ── Chips simples (ex.: nota por período no boletim) ────────────────── */

.portal-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.portal-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-text);
    background: var(--color-surface-alt); border-radius: var(--radius-pill); padding: 4px 10px; white-space: nowrap;
}
.portal-chip strong { color: var(--color-text); font-weight: var(--fw-bold); }

/* ── Linhas de lista "ricas" (progress bar, botões, texto longo) — pra
   quando .list-item/.tx da biblioteca são simples demais (só ícone+texto+
   valor). Mesmos tokens dela. ── */

.portal-list { display: flex; flex-direction: column; }
.portal-list-item {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border);
}
.portal-list-item:last-child { border-bottom: none; padding-bottom: 2px; }
.portal-list-item__body { flex: 1; min-width: 0; }
.portal-list-item__title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.portal-list-item__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); }
.portal-list-item__meta { font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; }

/* Cores extra pro .progress__bar da biblioteca (ela só tem --dark) */
.progress__bar--success { background: var(--color-success); }
.progress__bar--danger  { background: var(--color-danger); }

/* ── Utilidades de layout ───────────────────────────────────────────── */

.portal-flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* ── Cartão de autenticação (login / redefinir senha) ───────────────── */

body.portal-auth-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--secondary) 140%);
    font-family: var(--font-sans);
}
.portal-auth-card {
    width: 100%; max-width: 400px;
    background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-5);
    box-shadow: var(--shadow-lg);
}
.portal-auth-brand { text-align: center; margin-bottom: var(--space-5); }
.portal-auth-brand img { max-height: 56px; max-width: 200px; object-fit: contain; }
.portal-auth-brand h1 { font-size: var(--fs-xl); color: var(--color-text); margin: 8px 0 0; }
.portal-auth-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0 0 4px; }
.portal-auth-subtitle { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0 0 var(--space-5); }
.portal-auth-back {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--color-text-muted); text-decoration: none;
}

/* ── Responsivo ─────────────────────────────────────────────────────── */

@media (max-width: 420px) {
    .portal-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}