/* Source Sans 3 — fonte da família 1517, servida localmente (public/fonts) */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

/* ==========================================================================
   GESTÃO ESCOLAR MUNICIPAL — CUMARU DO NORTE
   Design: limpo, institucional, tabelas estilo planilha
   ========================================================================== */

/* Identidade visual OFFICE — padrão único da prefeitura (mesma do
   PESQUISAPRECOS / gestao-atas-contratos / CERTIFICADOS): tudo reto (zero
   cantos arredondados), superfícies chapadas com borda fina, azul
   institucional #2a56a4, fonte Segoe UI e neutros limpos do Fluent.
   Os nomes dos tokens ficaram pela compatibilidade com o HTML inline. */
:root {
    /* Paleta */
    /* "Azul" institucional = azul Office do produto (#2a56a4 / #2a56a4, mesma família dos demais sistemas 1517) (nomes mantidos pela base) */
    --blue:        #2a56a4;
    --blue-dark:   #2a56a4;
    --blue-hover:  #3b6cc0;
    --blue-light:  #e6edf8;
    --orange:      #8a6c00;
    --green:       #0e700e;
    --red:         #a4262c;

    /* Semânticos Fluent (fundo / texto) */
    --ok-bg:       #dff6dd;  --ok-text:    #0e700e;
    --warn-bg:     #fff4ce;  --warn-text:  #8a6c00;
    --err-bg:      #fde7e9;  --err-text:   #a4262c;
    --info-bg:     #e6edf8;  --info-text:  #2a56a4;

    /* Superfícies */
    --bg:          #f3f4f6;
    --surface:     #ffffff;
    --surface-2:   #f5f5f5;
    --hover:       #f5f8fc;

    /* Textos */
    --text:        #20252c;
    --text-muted:  #616161;
    --text-light:  #8a8a8a;

    /* Bordas */
    --border:      #dfe2e5;
    --border-light:#ebebeb;
    --border-btn:  #d1d1d1;

    /* Tabela planilha */
    --th-bg:       #f5f5f5;
    --th-text:     #424242;
    --tr-even:     #fafafa;
    --tr-hover:    #f5f8fc;
    --cell-border: #e0e0e0;

    /* Sidebar / cabeçalho escuros */
    --sidebar-bg:  #2a56a4;
    --sidebar-hover:rgba(255,255,255,0.08);
    --sidebar-active:#2a56a4;
    --sidebar-text:#e8f0fb;
    --sidebar-active-text:#ffffff;
    --sidebar-accent:#ffffff;

    /* Sombras */
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:   0 2px 6px rgba(0,0,0,0.07);

    /* Foco */
    --focus-ring:  2px solid rgba(42,86,164,0.55);

    /* Fonte */
    --font-ui:     "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

    /* Família 1517 — cada produto troca só as --produto-*; o layout é o mesmo.
       ESCOLAS (2026-10-10): cores da logo da Prefeitura de Cumaru do Norte (--municipio-*): azul royal na moldura,
       laranja nas ações, ciano no "1517"; faixa de quatro cores sob o topo. Sem o dourado da família; cantos retos.
       Outra prefeitura: trocar só as --municipio-* e as --produto-* abaixo. */
    --municipio-marinho:  #001c4b;
    --municipio-azul:     #2a56a4;
    --municipio-verde:    #1aa450;
    --municipio-amarelo:  #f7d826;
    --municipio-laranja:  #f58a34;
    --municipio-ciano:    #1cbaee;
    --municipio-faixa:    linear-gradient(90deg, var(--municipio-verde) 0 25%, var(--municipio-amarelo) 25% 50%, var(--municipio-laranja) 50% 75%, var(--municipio-ciano) 75% 100%);
    --primary:            #2a56a4;
    --primary-dark:       #2a56a4;
    --muted:              #686d74;
    --gold:               #f58a34;
    --produto-site:       #0c2a24;
    --produto-site-topo:  rgba(12, 42, 36, 0.95);
    --produto-site-texto: #e8f0fb;
    --produto-acao:       #f58a34;
    --produto-acao-hover: #ec7e35;
    --produto-acao-texto: #001c4b;
    --produto-app:        #2a56a4;
    --produto-app-ativo:  #2a56a4;
    --produto-app-faixa:  #3060ae;
    --familia-1517:       #8fdcf7;

    /* Cantos: tudo reto no ESCOLAS (pedido do usuário em 2026-10-10) */
    --raio:        0;
    --raio-painel: 0;

    /* Compatibilidade com variáveis antigas usadas no HTML inline */
    --pref-navy:       #2a56a4;
    --pref-navy-dark:  #2a56a4;
    --pref-navy-light: #3b6cc0;
    --pref-orange:     #8a6c00;
    --pref-green:      #0e700e;
    --pref-sky:        #2a56a4;
    --bg-stage:        #fafafa;
    --card-bg:         #ffffff;
    --border-color:    #e0e0e0;
    --border-width:    1px;
    --radius-pro:      0;
    --shadow-pro:      var(--shadow-sm);
    --shadow-hover:    var(--shadow-md);
    --btn-shadow:      none;
    --btn-hover-shadow:none;
    --btn-hover-transform: none;
    --btn-active-transform: none;
    --btn-active-shadow: none;
    --sidebar-border:  none;
    --sidebar-active-bg: #2a56a4;
    --text-main:       #242424;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* cantos: controles 6px, painéis 14px (bloco "Cantos 1517" no fim do arquivo) */

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    display: flex;
    height: 100vh;
    overflow: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.app-shell, .app-wrapper { display: flex; width: 100%; height: 100%; }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar-pro {
    width: 240px;
    min-width: 240px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.brand-area {
    padding: 20px 16px;
    background: rgba(0,0,0,0.2);
    border-bottom: 2px solid var(--sidebar-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.brand-area .city-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--sidebar-accent);
    text-align: center;
    line-height: 1.3;
}

.nav-pro {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
}

.nav-section-title {
    padding: 12px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-item-pro {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}

.nav-item-pro:hover {
    background: var(--sidebar-hover);
    color: #fff;
    text-decoration: none;
}

.nav-item-pro.active {
    background: var(--sidebar-active);
    color: var(--sidebar-active-text);
    border-left-color: var(--sidebar-accent);
    font-weight: 600;
}

.nav-item-pro .icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }

/* Usuário na sidebar */
.sidebar-user {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
.sidebar-user .name { font-weight: 600; color: #fff; font-size: 13px; }
.sidebar-user .role { color: var(--sidebar-text); font-size: 11px; }

/* ── Stage / Conteúdo ─────────────────────────────────────────────────── */
.stage-pro {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    background: var(--bg);
}

/* ── Header ────────────────────────────────────────────────────────────── */
.header-pro {
    height: 56px;
    min-height: 56px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-pro h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-pro h2::before {
    content: '';
    width: 3px;
    height: 18px;
    background: var(--blue);
    border-radius: 0;
    flex-shrink: 0;
}

/* ── Workspace ─────────────────────────────────────────────────────────── */
.workspace-pro {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

/* ── Status Bar ────────────────────────────────────────────────────────── */
.status-bar-pro {
    height: 28px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 11px;
    color: var(--text-muted);
    gap: 20px;
}

/* ── Filtros ───────────────────────────────────────────────────────────── */
.filters-bar {
    background: var(--surface);
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 0;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}

.filters-bar .form-group { margin-bottom: 0; flex: 1 1 auto; min-width: 120px; }

.filters-bar label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

.filters-bar .form-control,
.filters-bar input,
.filters-bar select {
    height: 34px;
    padding: 5px 10px;
    font-size: 13px;
}

/* ── ★ TABELA ESTILO PLANILHA ★ ────────────────────────────────────────── */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--cell-border);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 13px;
    table-layout: auto;
}

/* Cabeçalho — azul acinzentado como Excel */
.table thead tr {
    background: var(--th-bg);
    position: sticky;
    top: 0;
    z-index: 2;
}

.table th {
    padding: 8px 10px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--th-text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-right: 1px solid var(--cell-border);
    border-bottom: 2px solid #c8c8c8;
    white-space: nowrap;
    user-select: none;
}

.table th:last-child { border-right: none; }

/* Células */
.table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    color: var(--text);
    vertical-align: middle;
    font-size: 13px;
}

.table td:last-child { border-right: none; }
.table tr:last-child td { border-bottom: none; }

/* Zebra stripe — linhas pares levemente acinzentadas */
.table tbody tr:nth-child(even) { background: var(--tr-even); }
.table tbody tr:nth-child(odd)  { background: var(--surface); }

/* Hover destaca a linha inteira */
.table tbody tr:hover { background: var(--tr-hover) !important; }

/* Linha selecionada */
.table tbody tr.selected { background: var(--info-bg) !important; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card-pro {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-pro:hover { border-color: var(--blue); background: var(--hover); box-shadow: var(--shadow-md); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
    overflow: hidden;
}

.card-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-body { padding: 16px; }

/* ── Stat mini (barra de indicadores em listagens) ─────────────────────── */
.stat-mini {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 12px 20px;
    box-shadow: var(--shadow-sm);
}
.stat-mini .val { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; }
.stat-mini .lab { font-size: 11px; color: var(--text-muted); font-weight: 600; }

/* ── Stat card (indicador com ícone) ───────────────────────────────────── */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}
.stat-card .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--blue);
}

/* ── Dashboard Cards ───────────────────────────────────────────────────── */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

@media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .dash-grid { grid-template-columns: 1fr; } }

.dash-card {
    background: var(--surface);
    padding: 18px 20px;
    border-radius: 0;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow 0.2s;
}

.dash-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }

.dash-icon {
    width: 46px;
    height: 46px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.dash-info .val {
    font-size: 24px;
    font-weight: 800;
    color: var(--blue);
    display: block;
    line-height: 1.1;
}

.dash-info .lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 3px;
    letter-spacing: 0.4px;
}

/* ── Formulários ───────────────────────────────────────────────────────── */
label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.form-control,
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.4;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    outline: var(--focus-ring);
    outline-offset: 1px;
    border-color: var(--blue);
}

.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-group label { margin-bottom: 0; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-full  { grid-column: 1 / -1; }

@media (min-width: 1024px) {
    .form-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Botões ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    line-height: 1.4;
    text-decoration: none;
}

.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

.btn-outline {
    background: #fff;
    color: var(--text);
    border-color: var(--border-btn);
}
.btn-outline:hover { background: #f5f5f5; border-color: #ababab; }

.btn-success { background: var(--green); color: #fff; border-color: var(--green); }
.btn-success:hover { background: #0b5a0b; }

.btn-danger  { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover  { background: #8b1f25; }

.btn-warning { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-warning:hover { background: #6f5700; }

.btn-sm { padding: 4px 10px; font-size: 11.5px; }

.btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text);
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
}
.btn-icon:hover { background: #f5f5f5; border-color: #ababab; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.badge-success   { background: var(--ok-bg); color: var(--ok-text); }
.badge-danger    { background: var(--err-bg); color: var(--err-text); }
.badge-warning   { background: var(--warn-bg); color: var(--warn-text); }
.badge-info      { background: var(--info-bg); color: var(--info-text); }
.badge-primary   { background: var(--blue-light); color: var(--blue-dark); }
.badge-secondary { background: #f0f0f0; color: #616161; border: 1px solid #e0e0e0; }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
    overflow-x: auto;
}

.tab-btn {
    background: none;
    border: none;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.tab-btn:hover { color: var(--text); background: var(--hover); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); background: none; }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.2s ease; }

/* ── Avatar ────────────────────────────────────────────────────────────── */
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg  { width: 56px; height: 56px; font-size: 20px; }

/* ── Modals ────────────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.modal-overlay.active,
.modal-overlay.open { display: flex; }

.modal {
    background: var(--surface);
    width: 100%;
    max-width: 520px;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
    animation: fadeIn 0.2s ease;
    overflow: hidden;
}

.modal-header {
    background: var(--surface-2);
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body   { padding: 18px; }
.modal-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--surface-2);
}

/* ── Modal-box (variante usada por listagens: cabeçalho azul, corpo amplo) ─ */
.modal-box {
    background: var(--surface);
    border-radius: 0;
    width: 95%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
}
.modal-box .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
}
.modal-box .modal-header h3 { font-size: 16px; font-weight: 800; color: var(--blue); margin: 0; }
.modal-box .modal-body   { padding: 24px; }
.modal-box .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--surface);
}

/* ── Empty / Loading / Alerts ──────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}
.empty-state .icon { font-size: 36px; margin-bottom: 10px; opacity: 0.5; }
.empty-state h3    { margin: 0 0 6px 0; font-size: 15px; color: var(--text); }
.empty-state p     { margin: 0; font-size: 13px; }

.loading  { display: flex; justify-content: center; padding: 24px; }
.spinner  {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.alert          { padding: 10px 14px; border-radius: 0; font-size: 13px; font-weight: 500; margin-bottom: 12px; border: 1px solid transparent; }
.alert-info     { background: var(--info-bg); color: var(--info-text); border-color: #b4c7e0; }
.alert-danger   { background: var(--err-bg); color: var(--err-text); border-color: #f1bfc3; }
.alert-success  { background: var(--ok-bg); color: var(--ok-text); border-color: #b8e0b4; }
.alert-warning  { background: var(--warn-bg); color: var(--warn-text); border-color: #ecd98a; }

/* ── Paginação ─────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.pagination-pages { display: flex; gap: 3px; }

.pagination button,
.pagination-pages button {
    padding: 4px 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 0;
    cursor: pointer;
    font-size: 12px;
    color: var(--text);
    transition: background 0.15s;
}

.pagination button:hover,
.pagination-pages button:hover    { background: var(--surface-2); }
.pagination-pages button.active   { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700; }
.pagination button:disabled,
.pagination-pages button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Toast ─────────────────────────────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
}

.toast {
    padding: 10px 16px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 240px;
    max-width: 380px;
    animation: fadeIn 0.25s ease;
}

.toast-success { background: var(--green); }
.toast-danger  { background: var(--red); }
.toast-warning { background: var(--orange); }
.toast-info    { background: var(--blue); }

/* ── Info Grid (fichas) ─────────────────────────────────────────────────── */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.info-item { display: flex; flex-direction: column; gap: 3px; }
.info-item .label { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.info-item .value { font-size: 13.5px; color: var(--text); font-weight: 600; }
.info-item .value.empty { color: var(--text-light); font-style: italic; }

.section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

/* ── Profile header (ficha aluno) ──────────────────────────────────────── */
.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}

.profile-header h2  { margin: 0 0 2px 0; font-size: 18px; font-weight: 700; color: var(--text); }
.profile-header p   { margin: 0 0 8px 0; color: var(--text-muted); font-size: 13px; }
.profile-meta       { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.profile-meta span  { display: flex; align-items: center; gap: 4px; color: var(--text-muted); }

/* ── Wizard steps ──────────────────────────────────────────────────────── */
.wizard-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
    position: relative;
    overflow-x: auto;
    gap: 10px;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
    cursor: pointer;
    min-width: 80px;
}

.wizard-step .step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e0e0e0;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid transparent;
    z-index: 2;
}

.wizard-step .step-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 13px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
    height: 2px;
    background: #e0e0e0;
    z-index: 1;
}

.wizard-step.active .step-num { background: var(--blue); color: #fff; border-color: var(--blue-dark); }
.wizard-step.active .step-label { color: var(--blue); }
.wizard-step.done .step-num { background: var(--green); color: #fff; }
.wizard-step.done .step-label { color: var(--green); }
.wizard-step.done::after { background: var(--green); }

.wizard-panel { display: none; }
.wizard-panel.active { display: flex; flex-direction: column; animation: fadeIn 0.2s ease; }

.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
}

/* ── Quick nav / Pills ─────────────────────────────────────────────────── */
.quick-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.nav-pill {
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    text-decoration: none;
    color: var(--blue);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.nav-pill:hover { background: var(--hover); border-color: var(--blue); text-decoration: none; }
.nav-pill.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ── Quick actions bar ─────────────────────────────────────────────────── */
.quick-actions-bar {
    display: flex;
    gap: 10px;
    background: var(--surface);
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 0;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.qa-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 0;
    background: var(--surface-2);
    color: var(--blue);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border);
    transition: background 0.15s, border-color 0.15s;
}

.qa-item:hover { background: var(--hover); border-color: var(--blue); text-decoration: none; }

/* ── Activity card ─────────────────────────────────────────────────────── */
.activity-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0; overflow: hidden; }
.activity-item { padding: 10px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-light); transition: background 0.15s; }
.activity-item:hover { background: var(--hover); }
.activity-item:last-child { border-bottom: none; }
.activity-img  { width: 36px; height: 36px; border-radius: 50%; background: #e0e0e0; flex-shrink: 0; }
.activity-text .name { font-weight: 600; font-size: 13px; color: var(--text); }
.activity-text .info { font-size: 11.5px; color: var(--text-muted); }
.activity-time { margin-left: auto; font-size: 11px; color: var(--text-light); }

/* ── Switch toggle ─────────────────────────────────────────────────────── */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: 8px; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-track { position: relative; width: 40px; height: 22px; background: #c8c8c8; border-radius: 0; transition: background 0.2s; flex-shrink: 0; }
.switch-track::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 0; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.switch input:checked + .switch-track { background: var(--blue); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }
.switch-label { font-size: 13px; font-weight: 500; color: var(--text); }

/* ── Photo wrapper ─────────────────────────────────────────────────────── */
.photo-wrapper {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
}
.photo-wrapper:hover { border-color: var(--blue); }
.photo-wrapper img { width: 100%; height: 100%; object-fit: cover; }
#foto-input { display: none; }

/* ── Utilitários ───────────────────────────────────────────────────────── */
.page-content { padding: 20px 24px; }
.grid-pro { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.text-muted { color: var(--text-muted); }
.text-right { text-align: right; }
.fw-bold { font-weight: 700; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 20px; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 20px; }
.d-flex { display: flex; }
.gap-1  { gap: 6px; }
.gap-2  { gap: 12px; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ── Foco (padrão Office) ──────────────────────────────────────────────── */
button:focus-visible, a:focus-visible, .btn:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }


/* ── Cantos 1517 (sobrepõe os border-radius: 0 acima) ─────────────────── */
.btn, .btn-sm, .btn-icon, .form-control, input[type="text"], input[type="number"], input[type="date"],
input[type="password"], input[type="email"], input[type="search"], select, textarea,
.filters-bar input, .filters-bar select, .alert, .toast { border-radius: var(--raio); }
.card, .panel, .modal-box, .modal, .stat-card, .stat-mini, .dash-card, .graf-card, .kpi,
.table-wrapper, .filters-bar, .empty-state { border-radius: var(--raio-painel); }
.badge, .badge-perfil, .badge-ativo, .badge-inativo { border-radius: 999px; }
.btn { min-height: 38px; }