/* ==========================================================================
   Escolinha — design system (carregado depois do Bootstrap 5.3)
   Régua: Stripe Dashboard. Uma cor de destaque = a cor da escola.
   --brand / --brand-fg / --brand-ink são definidos no <html> pelo layout,
   a partir de tema_escola() (contraste garantido para qualquer hex).
   ========================================================================== */

:root {
    --brand: #198754;
    --brand-fg: #ffffff;
    --brand-ink: #146c43;
    --brand-soft: color-mix(in srgb, var(--brand) 9%, #fff);
    --brand-soft-2: color-mix(in srgb, var(--brand) 16%, #fff);
    --brand-hover: color-mix(in srgb, var(--brand) 86%, #000);
    --brand-ring: color-mix(in srgb, var(--brand-ink) 32%, transparent);
    --cor-escola: var(--brand); /* alias legado (Chart.js lê este nome) */

    --bg: #f6f8fa;
    --surface: #ffffff;
    --surface-2: #f9fafb;
    --hover: #f5f7fa;
    --border: #e3e8ee;
    --border-strong: #d0d7de;

    --text: #1a1f36;
    --text-2: #3c4257;
    --muted: #5e6679;
    --faint: #8792a2;

    --ok: #0b6b3a;      --ok-bg: #dcf5e7;      --ok-dot: #1ea464;
    --warn: #8a4a00;    --warn-bg: #fdf0c8;    --warn-dot: #e6a100;
    --danger: #b42318;  --danger-bg: #fde8e7;  --danger-dot: #e5484d;
    --info: #1d4ed8;    --info-bg: #e3edff;    --info-dot: #3b82f6;
    --neutral: #4b5263; --neutral-bg: #ebeef2; --neutral-dot: #9aa3b2;

    --radius: 8px;
    --radius-sm: 6px;
    --shadow-pop: 0 12px 32px -8px rgba(26, 31, 54, .18), 0 2px 6px rgba(26, 31, 54, .06);
    --ease: cubic-bezier(.23, 1, .32, 1);
    --sidebar-w: 236px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    /* Bootstrap vars */
    --bs-body-font-family: var(--font);
    --bs-body-font-size: .875rem;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--surface);
    --bs-tertiary-bg: var(--surface-2);
    --bs-border-color: var(--border);
    --bs-secondary-color: var(--muted);
    --bs-link-color: var(--brand-ink);
    --bs-link-color-rgb: 0, 0, 0;
    --bs-link-hover-color: var(--text);
    --bs-emphasis-color: var(--text);
    --bs-border-radius: var(--radius-sm);
    --bs-focus-ring-color: var(--brand-ring);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: .875rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: -.011em;
    color: var(--text);
    text-wrap: balance;
}
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .875rem; }
a { color: var(--brand-ink); text-underline-offset: 3px; }
a:hover { color: var(--text); }
::selection { background: var(--brand-soft-2); color: var(--text); }
input, textarea { caret-color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: none; }
* { scrollbar-width: thin; scrollbar-color: #c9d1da transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c9d1da; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

.num, td, .kpi-value, .money { font-variant-numeric: tabular-nums; }
.text-muted, .text-secondary { color: var(--muted) !important; }
.small, small { font-size: .8125rem; }
.fw-bold { font-weight: 600 !important; }
strong, b { font-weight: 600; }

/* Semânticas: verde é "pago/ok", não a cor da escola */
.text-success { color: var(--ok) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warn) !important; }
.text-info    { color: var(--info) !important; }
.text-primary, .text-brand { color: var(--brand-ink) !important; }
.bg-light { background-color: var(--surface-2) !important; }
.border-success { border-color: var(--ok-dot) !important; }
.border-warning { border-color: var(--warn-dot) !important; }
.border-danger  { border-color: var(--danger-dot) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

/* ==========================================================================
   Shell: sidebar + conteúdo
   ========================================================================== */
.app { min-height: 100vh; }
.sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    z-index: 1030;
}
.sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 16px 14px;
    text-decoration: none; color: var(--text);
    min-width: 0;
}
.sidebar-brand:hover { color: var(--text); }
.crest {
    width: 36px; height: 36px; flex: none;
    border-radius: 8px;
    display: grid; place-items: center;
    background: var(--surface);
    overflow: hidden;
}
.crest img { width: 100%; height: 100%; object-fit: contain; }
.crest-fallback {
    background: var(--brand); color: var(--brand-fg);
    font-weight: 700; font-size: .9375rem; letter-spacing: -.02em;
}
.sidebar-brand-name {
    font-weight: 600; font-size: .9375rem; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-brand-sub { font-size: .75rem; color: var(--muted); line-height: 1.2; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 10px 16px; }
.nav-group { margin-top: 18px; }
.nav-group:first-child { margin-top: 4px; }
.nav-group-label {
    padding: 0 10px 6px;
    font-size: .75rem; font-weight: 500; color: var(--muted);
}
.nav-item-link {
    display: flex; align-items: center; gap: 10px;
    height: 32px; padding: 0 10px;
    border-radius: var(--radius-sm);
    color: var(--text-2); text-decoration: none;
    font-size: .875rem; font-weight: 500;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav-item-link i { font-size: 1rem; color: var(--faint); width: 16px; text-align: center; transition: color .15s var(--ease); }
.nav-item-link:hover { color: var(--text); background: var(--hover); }
.nav-item-link:hover i { color: var(--muted); }
.nav-item-link.active { color: var(--brand-ink); background: var(--brand-soft); font-weight: 600; }
.nav-item-link.active i { color: var(--brand-ink); }
.nav-item-link:active { background: var(--brand-soft-2); }

.sidebar-foot {
    border-top: 1px solid var(--border);
    padding: 10px;
    display: flex; align-items: center; gap: 10px;
}
.avatar {
    width: 30px; height: 30px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--neutral-bg); color: var(--text-2);
    font-weight: 600; font-size: .8125rem;
}
.sidebar-user { min-width: 0; flex: 1; line-height: 1.25; }
.sidebar-user-name { font-weight: 600; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-role { font-size: .75rem; color: var(--muted); text-transform: capitalize; }
.icon-btn {
    width: 32px; height: 32px; flex: none;
    display: inline-grid; place-items: center;
    border-radius: var(--radius-sm); border: 0; background: transparent;
    color: var(--muted); text-decoration: none; font-size: 1rem;
    transition: background-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn:active { transform: scale(.96); }

.main { margin-left: var(--sidebar-w); min-width: 0; }
.main-inner { max-width: 1280px; margin: 0 auto; padding: 28px 32px 64px; }

/* Barra de topo (mobile) */
.topbar {
    display: none;
    position: sticky; top: 0; z-index: 1020;
    height: 56px; padding: 0 8px 0 12px;
    align-items: center; gap: 10px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-bottom: 1px solid var(--border);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
}
.topbar .crest { width: 30px; height: 30px; }
.topbar-name { font-weight: 600; font-size: .9375rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .icon-btn { width: 44px; height: 44px; font-size: 1.375rem; color: var(--text); }

.offcanvas.nav-drawer { width: min(300px, 86vw); border-right: 1px solid var(--border); }
.nav-drawer .offcanvas-body { padding: 0; display: flex; flex-direction: column; }
.nav-drawer .nav-item-link { height: 44px; font-size: .9375rem; }
.nav-drawer .sidebar-nav { padding-top: 0; }

.banner {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 16px; font-size: .8125rem;
    background: var(--warn-bg); color: var(--warn);
    border-bottom: 1px solid color-mix(in srgb, var(--warn-dot) 35%, transparent);
}
.banner strong { font-weight: 600; }

@media (max-width: 991.98px) {
    .sidebar { display: none; }
    .main { margin-left: 0; }
    .topbar { display: flex; }
    .main-inner { padding: 20px 16px 48px; }
}

/* ==========================================================================
   Cabeçalho de página
   ========================================================================== */
.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 24px;
}
.page-head h1, .page-head h2 { font-size: 1.5rem; line-height: 1.25; margin: 0; }
.page-sub { margin: 4px 0 0; color: var(--muted); font-size: .875rem; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.section-title {
    font-size: 1rem; font-weight: 600; margin: 0;
}
.section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 32px 0 12px;
}
.section-head a { font-size: .8125rem; font-weight: 500; text-decoration: none; }

/* Legado: cabeçalhos "d-flex justify-content-between ... mb-4" com h2 + small */
.main-inner > .d-flex.justify-content-between.mb-4 h2,
.main-inner > .d-flex.justify-content-between.mb-4 h3 { font-size: 1.5rem; }
.main-inner > .d-flex.justify-content-between.mb-4 h2 > i,
.main-inner > .d-flex.justify-content-between.mb-4 h3 > i { display: none; }

/* ==========================================================================
   Painel / cartão
   ========================================================================== */
.card, .panel {
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-cap-bg: var(--surface);
    --bs-card-cap-padding-y: 14px;
    --bs-card-cap-padding-x: 20px;
    --bs-card-spacer-x: 20px;
    --bs-card-spacer-y: 20px;
    background: var(--surface);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    box-shadow: none;
    transition: none;
}
.card:hover { transform: none; box-shadow: none; }
.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-family: var(--font);
    font-weight: 600; font-size: .9375rem; color: var(--text);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.card-header > i:first-child { color: var(--faint) !important; font-size: 1rem; }
.card-header.bg-success, .card-header.bg-primary, .card-header.bg-danger,
.card-header.bg-warning, .card-header.bg-info, .card-header.bg-dark {
    background: var(--surface) !important; color: var(--text) !important;
}
.card-footer { background: var(--surface-2); border-top: 1px solid var(--border); }
.card-title { font-weight: 600; }
.border-start.border-3 { border-left-width: 1px !important; }

.panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.panel-head h2, .panel-head h3 { font-size: .9375rem; font-weight: 600; margin: 0; }
.panel-head a { font-size: .8125rem; font-weight: 500; text-decoration: none; }
.panel-body { padding: 20px; }

/* ==========================================================================
   KPIs — um painel dividido por linhas finas
   ========================================================================== */
.kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 24px;
}
.kpi { padding: 18px 20px 16px; min-width: 0; position: relative; }
.kpi + .kpi { border-left: 1px solid var(--border); }
a.kpi { color: inherit; text-decoration: none; transition: background-color .15s var(--ease); }
a.kpi:hover { background: var(--hover); }
.kpi-label {
    display: flex; align-items: center; gap: 6px;
    font-size: .8125rem; color: var(--muted); font-weight: 500;
}
.kpi-value {
    font-size: 1.625rem; line-height: 1.2; font-weight: 600;
    letter-spacing: -.02em; margin-top: 6px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-value small { font-size: .875rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.kpi-foot { margin-top: 6px; font-size: .8125rem; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kpi-meter { height: 4px; border-radius: 4px; background: var(--neutral-bg); margin-top: 10px; overflow: hidden; }
.kpi-meter > span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.kpi-meter.is-ok > span { background: var(--ok-dot); }
.kpi-meter.is-warn > span { background: var(--warn-dot); }
.kpi-meter.is-danger > span { background: var(--danger-dot); }

.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-size: .75rem; padding: 1px 6px; border-radius: 4px; }
.delta.up { color: var(--ok); background: var(--ok-bg); }
.delta.down { color: var(--danger); background: var(--danger-bg); }
.delta.flat { color: var(--neutral); background: var(--neutral-bg); }

@media (max-width: 991.98px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi:nth-child(3) { border-left: 0; }
    .kpi:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 380px) {
    .kpi { padding: 14px 14px 12px; }
    .kpi-value { font-size: 1.375rem; }
}

/* ==========================================================================
   Botões
   ========================================================================== */
.btn {
    --bs-btn-font-family: var(--font);
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 5px;
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-line-height: 1.43;
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-ring);
    font-family: var(--font); text-transform: none; letter-spacing: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn > i { font-size: 1em; }
.btn .me-1, .btn .me-2 { margin-right: 0 !important; }
.btn-sm { --bs-btn-padding-x: 10px; --bs-btn-padding-y: 3px; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: var(--radius-sm); }
.btn-lg { --bs-btn-padding-x: 16px; --bs-btn-padding-y: 9px; --bs-btn-font-size: .9375rem; --bs-btn-border-radius: var(--radius-sm); }

/* primária = cor da escola */
.btn-success, .btn-primary, .btn-brand {
    --bs-btn-color: var(--brand-fg);
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand-fg);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-color: var(--brand-fg);
    --bs-btn-active-bg: var(--brand-hover);
    --bs-btn-active-border-color: var(--brand-hover);
    --bs-btn-disabled-color: var(--brand-fg);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    box-shadow: 0 1px 1px rgba(26, 31, 54, .08);
    filter: none;
}
/* secundária = branca com borda */
.btn-outline-success, .btn-outline-primary, .btn-outline-secondary, .btn-outline-warning,
.btn-outline-info, .btn-outline-dark, .btn-light, .btn-secondary, .btn-default {
    --bs-btn-color: var(--text-2);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--hover);
    --bs-btn-hover-border-color: #bfc8d2;
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: #eef1f5;
    --bs-btn-active-border-color: #bfc8d2;
    --bs-btn-disabled-color: var(--faint);
    --bs-btn-disabled-bg: var(--surface);
    --bs-btn-disabled-border-color: var(--border);
    box-shadow: 0 1px 1px rgba(26, 31, 54, .05);
}
.btn-outline-success > i, .btn-outline-primary > i { color: var(--brand-ink); }
.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--danger);
    --bs-btn-hover-bg: var(--danger-bg);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--danger-dot) 45%, #fff);
    --bs-btn-active-color: var(--danger);
    --bs-btn-active-bg: var(--danger-bg);
    --bs-btn-active-border-color: var(--danger-dot);
    box-shadow: 0 1px 1px rgba(26, 31, 54, .05);
}
.btn-danger {
    --bs-btn-bg: #d92d20; --bs-btn-border-color: #d92d20;
    --bs-btn-hover-bg: #b42318; --bs-btn-hover-border-color: #b42318;
    --bs-btn-active-bg: #b42318; --bs-btn-active-border-color: #b42318;
}
.btn-warning {
    --bs-btn-color: #3d2600; --bs-btn-bg: #f5b83d; --bs-btn-border-color: #f5b83d;
    --bs-btn-hover-color: #3d2600; --bs-btn-hover-bg: #e8a825; --bs-btn-hover-border-color: #e8a825;
    --bs-btn-active-color: #3d2600; --bs-btn-active-bg: #e8a825; --bs-btn-active-border-color: #e8a825;
}
.btn-info, .btn-dark {
    --bs-btn-color: #fff; --bs-btn-bg: var(--text); --bs-btn-border-color: var(--text);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2e3450; --bs-btn-hover-border-color: #2e3450;
}
.btn-link { --bs-btn-color: var(--brand-ink); --bs-btn-hover-color: var(--text); text-decoration: none; }
.btn-close:focus { box-shadow: 0 0 0 3px var(--brand-ring); }

/* Ações de linha: ícones discretos */
.row-actions { display: inline-flex; gap: 2px; align-items: center; justify-content: flex-end; }
.row-actions .btn, .row-actions form { margin: 0 !important; }
.row-actions .btn {
    --bs-btn-padding-x: 0; --bs-btn-padding-y: 0;
    width: 30px; height: 30px;
    --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
    --bs-btn-color: var(--muted); --bs-btn-hover-bg: var(--neutral-bg); --bs-btn-hover-color: var(--text);
    --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #e2e6ec; --bs-btn-active-border-color: transparent;
    box-shadow: none;
}
.row-actions .btn > i { color: inherit; }
.row-actions .btn.is-danger { --bs-btn-hover-bg: var(--danger-bg); --bs-btn-hover-color: var(--danger); }
.row-actions .btn.is-primary {
    width: auto; padding: 0 10px; height: 28px; font-size: .8125rem;
    --bs-btn-color: var(--text-2); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-border-color: #bfc8d2; --bs-btn-hover-bg: var(--hover);
}
@media (hover: hover) and (pointer: fine) {
    .table-actions-reveal tbody tr .row-actions .btn:not(.is-primary) { opacity: .55; transition: opacity .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease); }
    .table-actions-reveal tbody tr:hover .row-actions .btn,
    .table-actions-reveal tbody tr:focus-within .row-actions .btn { opacity: 1; }
}

/* ==========================================================================
   Tabelas
   ========================================================================== */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--hover);
    --bs-table-hover-color: var(--text);
    --bs-table-striped-bg: var(--surface-2);
    margin-bottom: 0;
    font-size: .875rem;
}
.table > :not(caption) > * > * { padding: 11px 12px; border-bottom-color: var(--border); background-color: var(--bs-table-bg); }
.table > thead > tr > th, .table > thead.table-light > tr > th {
    --bs-table-bg: var(--surface-2);
    background: var(--surface-2);
    color: var(--muted);
    font-size: .75rem; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    padding-top: 8px; padding-bottom: 8px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.table > thead > tr > th:first-child, .table > tbody > tr > td:first-child { padding-left: 20px; }
.table > thead > tr > th:last-child, .table > tbody > tr > td:last-child { padding-right: 20px; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr { transition: background-color .12s var(--ease); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--hover); }
.table .text-end, .table th.num, .table td.num { text-align: right; }
.table td.money, .table td.num { font-weight: 500; white-space: nowrap; }
.table a { text-decoration: none; }
.table a:hover { text-decoration: underline; }
.table-light { --bs-table-bg: var(--surface-2); --bs-table-color: var(--muted); }
.table-responsive { border-radius: inherit; position: relative; }
.card > .table-responsive:last-child, .card-body.p-0 > .table-responsive:last-child { border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); }
.cell-main { font-weight: 500; color: var(--text); }
.cell-sub { font-size: .8125rem; color: var(--muted); }
.cell-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-person img, .cell-person .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }

/* DataTables */
div.dataTables_wrapper { font-size: .8125rem; color: var(--muted); }
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter { padding: 12px 20px 10px; }
div.dataTables_wrapper div.dataTables_info { padding: 12px 20px !important; color: var(--muted); }
div.dataTables_wrapper div.dataTables_paginate { padding: 8px 20px; }
div.dataTables_wrapper div.dataTables_filter input { margin-left: 6px; width: 220px; }
div.dataTables_wrapper div.dataTables_length select { margin: 0 4px; width: auto; display: inline-block; }
div.dataTables_wrapper > .row { margin: 0; }
div.dataTables_wrapper > .row > [class*="col-"] { padding: 0; }
table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; border-top: 1px solid var(--border); }
table.dataTable > thead > tr > th.sorting::before, table.dataTable > thead > tr > th.sorting::after,
table.dataTable > thead > tr > th.sorting_asc::before, table.dataTable > thead > tr > th.sorting_asc::after,
table.dataTable > thead > tr > th.sorting_desc::before, table.dataTable > thead > tr > th.sorting_desc::after { font-size: .6rem; opacity: .35; }
table.dataTable > thead > tr > th.sorting_asc::before, table.dataTable > thead > tr > th.sorting_desc::after { opacity: .9; color: var(--text); }
.card-body > div.dataTables_wrapper { margin: -20px; }
.page-link {
    --bs-pagination-color: var(--text-2);
    --bs-pagination-border-color: var(--border-strong);
    --bs-pagination-hover-color: var(--text);
    --bs-pagination-hover-bg: var(--hover);
    --bs-pagination-hover-border-color: var(--border-strong);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--brand-ring);
    --bs-pagination-active-bg: var(--brand-soft);
    --bs-pagination-active-color: var(--brand-ink);
    --bs-pagination-active-border-color: var(--border-strong);
    --bs-pagination-disabled-color: var(--faint);
    font-size: .8125rem; padding: 4px 10px;
}
.page-item.active .page-link { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--border-strong); font-weight: 600; }
@media (max-width: 767.98px) {
    div.dataTables_wrapper div.dataTables_length { display: none; }
    div.dataTables_wrapper div.dataTables_filter { text-align: left; padding: 12px 16px 10px; }
    div.dataTables_wrapper div.dataTables_filter label { display: flex; align-items: center; width: 100%; }
    div.dataTables_wrapper div.dataTables_filter input { width: 100%; flex: 1; }
}

/* ==========================================================================
   Status — pílulas suaves
   ========================================================================== */
.pill, .badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 999px;
    font-size: .75rem; font-weight: 500; line-height: 1.5;
    letter-spacing: 0; white-space: nowrap;
    background: var(--neutral-bg); color: var(--neutral);
    vertical-align: middle;
}
.pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-dot); flex: none;
}
.pill.no-dot::before { display: none; }
.pill-pago, .pill-ok       { background: var(--ok-bg); color: var(--ok); }
.pill-pago::before, .pill-ok::before { background: var(--ok-dot); }
.pill-pendente, .pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-pendente::before, .pill-warn::before { background: var(--warn-dot); }
.pill-atrasado, .pill-danger { background: var(--danger-bg); color: var(--danger); }
.pill-atrasado::before, .pill-danger::before { background: var(--danger-dot); }
.pill-info { background: var(--info-bg); color: var(--info); }
.pill-info::before { background: var(--info-dot); }
.pill-brand { background: var(--brand-soft); color: var(--brand-ink); }
.pill-brand::before { background: var(--brand); }

/* Bootstrap .badge bg-* → mesma linguagem */
.badge.bg-success, .badge.text-bg-success { background: var(--ok-bg) !important; color: var(--ok) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--warn-bg) !important; color: var(--warn) !important; }
.badge.bg-danger, .badge.text-bg-danger   { background: var(--danger-bg) !important; color: var(--danger) !important; }
.badge.bg-info, .badge.bg-primary         { background: var(--info-bg) !important; color: var(--info) !important; }
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark { background: var(--neutral-bg) !important; color: var(--neutral) !important; }
.badge.text-dark, .badge.text-white { color: inherit; }
.badge.rounded-pill { border-radius: 999px; }

/* ==========================================================================
   Formulários
   ========================================================================== */
.form-label { font-size: .8125rem; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.form-label.fw-bold { font-weight: 500 !important; }
.form-control, .form-select {
    font-size: .875rem; color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 6px 10px; min-height: 34px;
    background-color: var(--surface);
    box-shadow: 0 1px 1px rgba(26, 31, 54, .04);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-select { padding-right: 32px; }
.form-control::placeholder { color: #8a93a3; }
.form-control:hover, .form-select:hover { border-color: #bfc8d2; }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-ink);
    box-shadow: 0 0 0 3px var(--brand-ring);
    color: var(--text);
}
.form-control-sm, .form-select-sm { min-height: 30px; font-size: .8125rem; padding-top: 4px; padding-bottom: 4px; }
.form-control-lg, .form-select-lg { min-height: 42px; font-size: .9375rem; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background: var(--surface-2); color: var(--muted); }
.form-text { color: var(--muted); font-size: .8125rem; }
.form-check-input { border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-ring); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238792a2'/%3e%3c/svg%3e"); }
.input-group-text { background: var(--surface-2); border-color: var(--border-strong); color: var(--muted); font-size: .875rem; }
.is-invalid, .form-control.is-invalid { border-color: var(--danger-dot) !important; }
.invalid-feedback { color: var(--danger); }
@media (max-width: 767.98px) {
    /* evita zoom do iOS ao focar */
    .form-control, .form-select, div.dataTables_wrapper input { font-size: 16px; min-height: 42px; }
}

/* ==========================================================================
   Alertas, modais, listas, progresso
   ========================================================================== */
.alert {
    --bs-alert-padding-y: 10px; --bs-alert-padding-x: 14px;
    border-radius: var(--radius); border: 1px solid transparent;
    font-size: .875rem; display: flex; align-items: flex-start; gap: 10px;
}
.alert.alert-dismissible { padding-right: 44px; }
.alert .btn-close { padding: 13px 14px; }
.alert > i:first-child { margin: 2px 0 0 !important; }
.alert-success { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok-dot) 30%, transparent); }
.alert-warning { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn-dot) 35%, transparent); }
.alert-danger  { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger-dot) 30%, transparent); }
.alert-info, .alert-primary { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info-dot) 30%, transparent); }
.alert-secondary, .alert-light { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.alert .alert-link { color: inherit; }

.modal-content { border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop); }
.modal-header { border-bottom: 1px solid var(--border); padding: 16px 20px; }
.modal-title { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.modal-title > i { display: none; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 12px 12px; padding: 12px 20px; gap: 8px; }
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: .32; }
.modal.fade .modal-dialog { transition: transform .2s var(--ease), opacity .2s var(--ease); transform: translateY(8px) scale(.98); opacity: 0; }
.modal.show .modal-dialog { transform: none; opacity: 1; }

.list-group { --bs-list-group-border-color: var(--border); --bs-list-group-action-hover-bg: var(--hover); --bs-list-group-active-bg: var(--brand-soft); --bs-list-group-active-color: var(--brand-ink); --bs-list-group-active-border-color: var(--border); }
.list-group-item { padding: 12px 20px; font-size: .875rem; }

.progress { --bs-progress-bg: var(--neutral-bg); --bs-progress-bar-bg: var(--brand); height: 6px; border-radius: 6px; }
.progress-bar.bg-success { background-color: var(--ok-dot) !important; }
.progress-bar.bg-warning { background-color: var(--warn-dot) !important; }
.progress-bar.bg-danger  { background-color: var(--danger-dot) !important; }

.nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-color: var(--text); --bs-nav-tabs-link-active-border-color: transparent transparent var(--brand); }
.nav-tabs .nav-link { color: var(--muted); border: 0; border-bottom: 2px solid transparent; font-weight: 500; padding: 8px 2px; margin-right: 20px; }
.nav-tabs .nav-link.active { color: var(--text); border-bottom-color: var(--brand); background: transparent; }

/* Segmentos (filtros) */
.segmented {
    display: inline-flex; padding: 2px; gap: 2px;
    background: var(--neutral-bg); border-radius: var(--radius-sm);
}
.segmented a, .segmented button, .segmented label {
    border: 0; background: transparent; color: var(--muted);
    font-size: .8125rem; font-weight: 500; padding: 4px 10px; border-radius: 5px;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.segmented a:hover, .segmented button:hover, .segmented label:hover { color: var(--text); }
.segmented .active, .segmented input:checked + label {
    background: var(--surface); color: var(--text);
    box-shadow: 0 1px 2px rgba(26, 31, 54, .12);
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }

/* Linhas de lista (painéis do dashboard) */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { border-top: 1px solid var(--border); }
.rows > li:first-child { border-top: 0; }
.row-link, .row-static {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 20px; color: inherit; text-decoration: none;
    transition: background-color .12s var(--ease);
}
.row-link:hover { background: var(--hover); color: inherit; }
.row-link:hover .row-chevron { color: var(--text); transform: translateX(2px); }
.row-chevron { color: var(--faint); transition: transform .15s var(--ease), color .15s var(--ease); }
.row-grow { flex: 1; min-width: 0; }
.row-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: .8125rem; color: var(--muted); }
.date-chip {
    width: 44px; flex: none; text-align: center;
    border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
    line-height: 1.1; background: var(--surface);
}
.date-chip b { display: block; font-size: 1rem; font-weight: 600; padding: 4px 0 1px; font-variant-numeric: tabular-nums; }
.date-chip span { display: block; font-size: .6875rem; color: var(--muted); padding-bottom: 4px; text-transform: lowercase; }
.bar { height: 6px; border-radius: 6px; background: var(--neutral-bg); overflow: hidden; width: 100%; }
.bar > span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }

/* Vazio */
.empty {
    text-align: center; padding: 36px 20px; color: var(--muted);
}
.empty i { font-size: 1.5rem; color: var(--faint); display: block; margin-bottom: 8px; }
.empty-title { color: var(--text); font-weight: 600; margin-bottom: 2px; }
.empty p { margin: 0 auto 12px; max-width: 42ch; font-size: .875rem; }

/* Chart.js canvas: sem bordas extras */
canvas { max-width: 100%; }

/* Grids do dashboard */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 991.98px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* Utilidades */
.hstack-sm { display: flex; align-items: center; gap: 8px; }
.gap-list > * + * { margin-top: 16px; }
.tabular { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Páginas soltas (login, portal)
   ========================================================================== */
.auth {
    min-height: 100vh; min-height: 100dvh;
    display: grid; place-items: center;
    padding: 24px 16px;
    background: var(--bg);
}
.auth-card {
    width: 100%; max-width: 380px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 28px 28px 24px;
    box-shadow: 0 1px 2px rgba(26, 31, 54, .04), 0 8px 24px -12px rgba(26, 31, 54, .12);
}
.auth-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.auth-head .crest { width: 40px; height: 40px; }
.auth-title { font-size: 1.125rem; font-weight: 600; margin: 0; }
.auth-sub { font-size: .8125rem; color: var(--muted); margin: 2px 0 0; }
.auth-foot { text-align: center; font-size: .8125rem; color: var(--muted); margin-top: 16px; max-width: 380px; }
.auth .btn-lg { width: 100%; min-height: 42px; }

.portal-bar {
    background: var(--surface); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 1020;
}
.portal-bar-inner {
    max-width: 880px; margin: 0 auto; height: 60px; padding: 0 16px;
    display: flex; align-items: center; gap: 12px;
}
.portal-bar .crest { width: 34px; height: 34px; }
.portal-main { max-width: 880px; margin: 0 auto; padding: 24px 16px 64px; }
.portal-accent { height: 3px; background: var(--brand); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
    .btn:active, .icon-btn:active { transform: none; }
}

/* Menus suspensos */
.dropdown-menu {
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-border-radius: var(--radius);
    --bs-dropdown-link-hover-bg: var(--hover);
    --bs-dropdown-link-active-bg: var(--brand-soft);
    --bs-dropdown-link-active-color: var(--brand-ink);
    --bs-dropdown-font-size: .875rem;
    --bs-dropdown-padding-y: 4px;
    --bs-dropdown-divider-bg: var(--border);
    min-width: 11rem;
    box-shadow: var(--shadow-pop);
}
.dropdown-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; color: var(--text-2); border-radius: 0; }
.dropdown-item i { color: var(--faint); width: 16px; }
.dropdown-item.is-danger, .dropdown-item.is-danger i { color: var(--danger); }
.dropdown-item.is-danger:hover { background: var(--danger-bg); }
.dropdown-menu form { margin: 0; }
.dropdown-menu.show { animation: dd-in .14s var(--ease); }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.segmented label .text-muted { font-weight: 400; margin-left: 2px; }

/* ==========================================================================
   Legado: linhas de "cartões de número" viram uma faixa de KPIs
   (row > col > .card > .card-body.text-center.py-4 > [valor][rótulo])
   ========================================================================== */
.row:has(> [class*="col"] > .card > .card-body.text-center.py-4) {
    --bs-gutter-x: 0; --bs-gutter-y: 0;
    margin: 0 0 24px;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
}
.row:has(> [class*="col"] > .card > .card-body.text-center.py-4) > [class*="col"] {
    box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border);
}
.row:has(> [class*="col"] > .card > .card-body.text-center.py-4) > [class*="col"] > .card {
    border: 0 !important; border-radius: 0; background: transparent;
}
.card-body.text-center.py-4 {
    display: flex; flex-direction: column-reverse; justify-content: flex-end;
    align-items: flex-start; text-align: left !important;
    padding: 18px 20px 16px !important; gap: 6px;
}
.card-body.text-center.py-4 > div:first-child,
.card-body.text-center.py-4 > a > div:first-child {
    font-size: 1.625rem !important; font-weight: 600 !important; line-height: 1.2;
    letter-spacing: -.02em; color: var(--text) !important;
    font-variant-numeric: tabular-nums;
}
.card-body.text-center.py-4 > div.text-muted,
.card-body.text-center.py-4 > div:nth-child(2) {
    font-size: .8125rem !important; font-weight: 500;
    text-transform: none !important; letter-spacing: 0 !important;
    color: var(--muted) !important;
}
.card-body.text-center.py-4 > div.text-muted i { display: none; }

/* Legado master: .stat-card em linhas → faixa de KPIs */
.row:has(> [class*="col"] .stat-card) {
    --bs-gutter-x: 0; --bs-gutter-y: 0;
    margin: 0 0 24px;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
}
.row:has(> [class*="col"] .stat-card) > [class*="col"] { box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border); }
.row:has(> [class*="col"] .stat-card) > [class*="col"] > a { display: block; height: 100%; color: inherit; transition: background-color .15s var(--ease); }
.row:has(> [class*="col"] .stat-card) > [class*="col"] > a:hover { background: var(--hover); }
.stat-card { padding: 18px 20px 16px; height: 100%; background: transparent; }
.stat-card .text-muted[style] { font-size: .8125rem !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500; }
.stat-card .value { font-size: 1.625rem !important; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--text) !important; font-variant-numeric: tabular-nums; margin-top: 4px; }
.stat-card i.fs-3 { display: none; }
.stat-card > small { display: block; margin-top: 4px; }

/* Cabeçalhos legados quebram linha no celular */
.main-inner > .d-flex.justify-content-between.mb-4 { flex-wrap: wrap; gap: 12px 16px; }
.main-inner > .d-flex.justify-content-between.mb-4 > .d-flex { flex-wrap: wrap; }

/* Tabelas empilhadas no celular (.table-stack) */
@media (max-width: 767.98px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody { display: block; width: 100% !important; }
    .table-stack tbody tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
        padding: 14px 16px; border-bottom: 1px solid var(--border);
    }
    .table-stack tbody tr:last-child { border-bottom: 0; }
    .table.table-stack > tbody > tr > td {
        display: block; padding: 0 !important; border: 0; background: transparent; box-shadow: none;
    }
    .table-stack tbody td:first-child { flex: 1 0 100%; }
    .table-stack tbody td.stack-hide { display: none !important; }
    .table-stack tbody td:last-child { margin-left: auto; }
    .table-stack .row-actions .btn { opacity: 1 !important; width: 40px; height: 40px; }
    .table-stack .row-actions .btn.is-primary { width: auto; height: 36px; padding: 0 12px; }
    .table-stack td.dataTables_empty { flex: 1; text-align: center; }
}

/* ==========================================================================
   Login da equipe — painel da marca (cor da escola) + formulário
   ========================================================================== */
.login-body { background: var(--surface); }
.login {
    min-height: 100vh; min-height: 100dvh;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
.login-brand {
    position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--brand) 70%, #fff) 0%, transparent 60%),
        linear-gradient(160deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 72%, #000) 100%);
    color: var(--brand-fg);
    display: flex; align-items: flex-end;
    padding: 56px;
}
.login-pitch {
    position: absolute; inset: -4% -18% -4% auto; height: 108%; width: auto;
    color: var(--brand-fg); opacity: .13; z-index: -1;
    transform: rotate(-8deg); transform-origin: 70% 50%;
}
.login-brand-inner { max-width: 420px; }
.login-crest {
    width: 88px; height: 88px; border-radius: 20px;
    display: grid; place-items: center; overflow: hidden;
    background: #fff; padding: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 16px 32px -12px rgba(0,0,0,.35);
    margin-bottom: 28px;
}
.login-crest img { width: 100%; height: 100%; object-fit: contain; }
.login-crest-fallback {
    background: var(--brand-fg); color: var(--brand);
    font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em;
}
.login-brand-name {
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 650; line-height: 1.1;
    letter-spacing: -.025em; margin: 0 0 12px; text-wrap: balance;
}
.login-brand-sub {
    font-size: 1rem; line-height: 1.5; margin: 0; max-width: 34ch;
    color: color-mix(in srgb, var(--brand-fg) 82%, transparent);
}

.login-main { display: grid; place-items: center; padding: 48px 24px; }
.login-form-wrap { width: 100%; max-width: 360px; }
.login-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.login-lead { color: var(--muted); font-size: .9375rem; margin: 0 0 28px; }
.login-form .form-label { font-weight: 500; color: var(--text-2); margin-bottom: 6px; }

.login-field { position: relative; }
.login-field > .bi {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--faint); font-size: 1rem; pointer-events: none;
    transition: color .15s var(--ease);
}
.login-field:focus-within > .bi { color: var(--brand-ink); }
.login-field .form-control { padding-left: 42px; min-height: 46px; font-size: 1rem; }
.login-field .form-control[type="password"], .login-field #password { padding-right: 48px; }
.login-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; }
.login-caps {
    display: flex; align-items: center; gap: 6px; margin: 8px 0 0;
    font-size: .8125rem; color: var(--warn);
}
.login-caps[hidden] { display: none; }

.login-submit {
    width: 100%; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 600; font-size: 1rem;
}
.login-submit .bi { transition: transform .2s var(--ease); }
.login-submit:hover:not(:disabled) .bi { transform: translateX(3px); }

.login-portal {
    display: flex; gap: 12px; align-items: flex-start;
    margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border);
    font-size: .875rem;
}
.login-portal > .bi {
    flex: none; width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand-ink); font-size: 1.05rem;
}
.login-portal strong { display: block; font-weight: 600; color: var(--text); }
.login-portal a { color: var(--brand-ink); font-weight: 500; text-decoration: none; }
.login-portal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.login-portal a .bi { font-size: .75rem; }

@media (max-width: 899.98px) {
    .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .login-brand { padding: 32px 24px 28px; padding-top: max(32px, env(safe-area-inset-top)); align-items: center; }
    .login-brand-inner { display: flex; align-items: center; gap: 16px; }
    .login-pitch { inset: -60% -30% auto auto; height: 260%; transform: rotate(-18deg); }
    .login-crest { width: 56px; height: 56px; border-radius: 14px; padding: 6px; margin: 0; flex: none; }
    .login-crest-fallback { font-size: 1.5rem; }
    .login-brand-name { font-size: 1.375rem; margin: 0; }
    .login-brand-sub { display: none; }
    .login-main { place-items: start center; padding: 28px 20px 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .login-submit .bi, .login-field > .bi { transition: none; }
}

/* ==========================================================================
   Formulários em seções (padrão "settings" do Stripe)
   título + ajuda à esquerda, campos à direita; ações no rodapé
   ========================================================================== */
.form-sections { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.form-section {
    display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 16px 40px; padding: 24px;
}
.form-section + .form-section { border-top: 1px solid var(--border); }
.form-section-title { font-size: .9375rem; font-weight: 600; margin: 0 0 4px; }
.form-section-help { font-size: .8125rem; color: var(--muted); margin: 0; max-width: 32ch; }
.form-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.form-grid > * { grid-column: span 6; min-width: 0; }
.form-grid > .span-2 { grid-column: span 2; }
.form-grid > .span-3 { grid-column: span 3; }
.form-grid > .span-4 { grid-column: span 4; }
.form-grid .form-label { display: block; }
.form-grid .req::after { content: " *"; color: var(--danger); }
.form-foot {
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
    padding: 14px 24px; border-top: 1px solid var(--border);
    background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius);
}
.form-foot .form-foot-note { margin-right: auto; font-size: .8125rem; color: var(--muted); }
@media (max-width: 767.98px) {
    .form-section { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; gap: 14px; }
    .form-grid > .span-2, .form-grid > .span-3, .form-grid > .span-4 { grid-column: span 6; }
    .form-foot { padding: 12px 16px; position: sticky; bottom: 0; z-index: 5; }
    .form-foot .btn { flex: 1; min-height: 44px; }
    .form-foot .form-foot-note { display: none; }
}

/* Campo de arquivo/foto */
.file-field {
    display: flex; align-items: center; gap: 14px;
    padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius);
    background: var(--surface-2); cursor: pointer;
    transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.file-field:hover { border-color: var(--brand-ink); background: var(--brand-soft); }
.file-field:focus-within { border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-ring); }
.file-field input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-field-thumb {
    width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; background: var(--neutral-bg); color: var(--faint); font-size: 1.375rem;
}
.file-field-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-field-text { min-width: 0; font-size: .8125rem; color: var(--muted); }
.file-field-text strong { display: block; color: var(--text); font-weight: 500; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Layout lateral: formulário curto + lista */
.split { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.split > .card:first-child, .split > .panel-stack { position: sticky; top: 24px; }
.panel-stack > * + * { margin-top: 16px; }
@media (max-width: 991.98px) {
    .split { grid-template-columns: minmax(0, 1fr); }
    .split > .card:first-child, .split > .panel-stack { position: static; }
}

/* Lista chave → valor */
.kv { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); margin: 0; }
.kv > dt, .kv > dd { padding: 10px 20px; border-top: 1px solid var(--border); margin: 0; font-size: .875rem; }
.kv > dt { color: var(--muted); font-weight: 500; }
.kv > dt:first-of-type, .kv > dt:first-of-type + dd { border-top: 0; }
@media (max-width: 575.98px) {
    .kv { grid-template-columns: minmax(0, 1fr); }
    .kv > dd { border-top: 0; padding-top: 0; }
}

/* Voltar (migalha curta acima do título) */
.back-link {
    display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;
    font-size: .8125rem; font-weight: 500; color: var(--muted); text-decoration: none;
}
.back-link:hover { color: var(--text); }
.back-link .bi { transition: transform .15s var(--ease); }
.back-link:hover .bi { transform: translateX(-2px); }
.page-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; color: var(--muted); font-size: .875rem; }
.page-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.page-meta .bi { color: var(--faint); }

/* Callout de saúde / aviso em painel */
.callout {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; border-radius: var(--radius);
    background: var(--warn-bg); color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn-dot) 35%, transparent);
    margin-bottom: 24px; font-size: .875rem;
}
.callout > .bi { font-size: 1.125rem; line-height: 1.3; flex: none; }
.callout-title { font-weight: 600; color: var(--warn); margin-bottom: 4px; }
.callout ul { margin: 0; padding-left: 18px; }
.callout li + li { margin-top: 2px; }
.callout.is-danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger-dot) 30%, transparent); }
.callout.is-info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info-dot) 30%, transparent); }

/* Barra de progresso de presença em tabela */
.attend { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.attend .bar { flex: 1; }
.attend b { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

/* ==========================================================================
   Scanner (campo, celular, sol)
   ========================================================================== */
.scan { max-width: 520px; margin: 0 auto; }
.scan-viewport {
    position: relative; aspect-ratio: 1; width: 100%;
    background: #0b0e14; border-radius: 12px; overflow: hidden;
}
.scan-viewport #reader { width: 100%; height: 100%; border: 0 !important; }
.scan-viewport #reader video { object-fit: cover; width: 100% !important; height: 100% !important; }
.scan-viewport #reader__dashboard_section_csr button,
.scan-viewport #reader button {
    font: 600 .9375rem/1 var(--font); padding: 12px 18px; border-radius: var(--radius-sm);
    border: 0; background: var(--brand); color: var(--brand-fg); margin: 8px 0;
}
.scan-viewport #reader__dashboard_section_csr span, .scan-viewport #reader__status_span { color: #c9d1da !important; }
.scan-viewport #reader a { color: #c9d1da !important; }
.scan-viewport #reader select { font-size: 16px; padding: 8px; border-radius: 6px; max-width: 90%; }
.scan-idle {
    position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
    color: #c9d1da; padding: 24px; gap: 8px; pointer-events: none;
}
.scan-idle .bi { font-size: 2.5rem; color: #8792a2; }
.scan-result {
    position: absolute; inset: auto 12px 12px 12px; z-index: 5;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 12px;
    background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-pop);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.scan-result[hidden] { display: flex; opacity: 0; transform: translateY(12px); pointer-events: none; }
.scan-result img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--neutral-bg); }
.scan-result-icon { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; }
.scan-result.is-ok { border: 2px solid var(--ok-dot); }
.scan-result.is-ok .scan-result-icon { background: var(--ok-bg); color: var(--ok); }
.scan-result.is-err { border: 2px solid var(--danger-dot); }
.scan-result.is-err .scan-result-icon { background: var(--danger-bg); color: var(--danger); }
.scan-result-title { font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.scan-result-sub { font-size: .875rem; color: var(--muted); }
.scan-count { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: .875rem; color: var(--muted); }
.scan-count b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Calendário (FullCalendar) */
.fc { --fc-border-color: var(--border); --fc-today-bg-color: var(--brand-soft); --fc-button-bg-color: var(--surface); --fc-button-border-color: var(--border-strong); --fc-button-text-color: var(--text-2); --fc-button-hover-bg-color: var(--hover); --fc-button-hover-border-color: #bfc8d2; --fc-button-active-bg-color: var(--brand-soft); --fc-button-active-border-color: var(--border-strong); --fc-event-border-color: transparent; font-size: .8125rem; }
.fc .fc-button { font-weight: 500; font-size: .8125rem; padding: 5px 10px; box-shadow: 0 1px 1px rgba(26,31,54,.05); text-transform: none; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: var(--brand-ink); }
.fc .fc-button:focus { box-shadow: 0 0 0 3px var(--brand-ring) !important; }
.fc .fc-toolbar-title { font-size: 1.125rem; font-weight: 600; text-transform: capitalize; }
.fc .fc-col-header-cell-cushion { font-weight: 500; color: var(--muted); font-size: .75rem; text-transform: capitalize; padding: 8px 4px; }
.fc .fc-daygrid-day-number { color: var(--text-2); font-variant-numeric: tabular-nums; text-decoration: none; padding: 6px 8px; }
.fc .fc-event { border-radius: 4px; padding: 1px 4px; font-weight: 500; cursor: pointer; }
.fc a { text-decoration: none; }

/* Relatórios: lista de ações */
.report-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.report-row + .report-row { border-top: 1px solid var(--border); }
.report-row-icon { width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--neutral-bg); color: var(--text-2); font-size: 1rem; }
.report-row-body { flex: 1; min-width: 0; }
.report-row-title { font-weight: 600; }
.report-row-desc { font-size: .8125rem; color: var(--muted); }
.report-row-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.report-row-form .form-select { width: auto; min-width: 180px; }
@media (max-width: 767.98px) {
    .report-row { flex-wrap: wrap; }
    .report-row-form { width: 100%; justify-content: stretch; }
    .report-row-form .form-select { flex: 1; min-width: 0; }
}

/* Cabeçalho do aluno + abas */
.aluno-head { margin-bottom: 16px; align-items: center; }
.aluno-head .aluno-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; font-size: 1.25rem; }
.aluno-tabs { margin-bottom: 24px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.aluno-tabs::-webkit-scrollbar { display: none; }
.aluno-tabs .nav-link { white-space: nowrap; }
@media (max-width: 767.98px) {
    .aluno-head .aluno-foto { width: 44px; height: 44px; }
    .aluno-head h1 { font-size: 1.25rem; }
    .aluno-tabs { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
    .aluno-tabs .nav-link { padding: 10px 2px; }
}

/* Master dentro do painel de uma escola */
.banner-master { background: var(--info-bg); color: var(--info); border-bottom-color: color-mix(in srgb, var(--info-dot) 35%, transparent); gap: 12px; flex-wrap: wrap; }
.banner-master .btn { --bs-btn-padding-y: 2px; }
/* Segmentos nunca alargam a página no celular: rolam dentro de si */
.segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }