/* ==========================================================================
   ABALE Gestão Acadêmica — Design System
   Fonte de verdade visual: referencias/*.png. Escala tipográfica compacta (Ajuste Visual 01):
   todos os tamanhos de fonte, controles e ícones derivam dos tokens em :root.
   Ordem: fontes · tokens · base · layout · componentes · login · páginas · responsivo · impressão
   ========================================================================== */

/* ---------- Fontes (Inter local, sem CDN) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 800; src: url("../fonts/inter/inter-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/inter/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/inter/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/inter/inter-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  /* Paleta oficial */
  --brand: #164194;          /* azul institucional */
  --cyan: #00A2E0;           /* azul-ciano */
  --bg: #F5F8FC;
  --white: #FFFFFF;
  --text: #172B4D;
  --text-2: #64748B;
  --border: #E2E8F0;
  --success: #16A34A;
  --warning: #F59E0B;
  --danger: #DC2626;

  /* Derivados observados nas referências */
  --heading: #0F2557;
  --primary: #0B4ACB;
  --primary-dark: #0A3AA6;
  --primary-50: #EAF2FF;
  --primary-100: #DCE9FD;
  --field-bg: #F1F5FB;
  --field-border: #D5DEEA;
  --row-hover: #F6F9FF;
  --line: #EDF1F6;
  --muted: #94A3B8;

  /* Tons dos ícones de indicador */
  --t-blue-bg: #E3EEFF;   --t-blue: #1D5FE0;
  --t-green-bg: #DDF7EA;  --t-green: #16A35F;
  --t-purple-bg: #EEE8FF; --t-purple: #7C4DDB;
  --t-teal-bg: #DAF5F3;   --t-teal: #0E9E95;
  --t-orange-bg: #FFF0DB; --t-orange: #F08C00;
  --t-red-bg: #FFE4E4;    --t-red: #E02424;
  --t-cyan-bg: #DDF4FD;   --t-cyan: #0A9BD6;

  /* Escala tipográfica (Ajuste Visual 01) */
  --fs-page: 24px;        /* título principal da página */
  --fs-section: 17px;     /* títulos de seções */
  --fs-card: 14px;        /* títulos de cards */
  --fs-nav: 13px;         /* menu lateral */
  --fs-body: 13px;        /* texto principal, campos, botões */
  --fs-table: 12.5px;     /* tabelas */
  --fs-label: 12px;       /* labels de formulário */
  --fs-small: 12px;       /* textos secundários */
  --fs-caption: 11px;     /* legendas e auxiliares */
  --fs-kpi: 28px;         /* indicadores numéricos */
  --fs-kpi-sm: 22px;      /* indicadores em cards estreitos */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh: 1.45;

  /* Dimensões de controles e ícones */
  --h-control: 34px;      /* inputs, selects, botões */
  --h-control-sm: 28px;
  --h-control-lg: 38px;
  --ic: 16px;             /* ícone padrão */
  --ic-sm: 14px;
  --ic-nav: 18px;
  --ic-tone: 18px;        /* ícone dentro de círculo tonal */

  /* Espaçamento e forma */
  --gap: 12px;
  --pad-card: 14px 16px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-card: 0 1px 2px rgba(16, 42, 92, .04), 0 4px 14px rgba(16, 42, 92, .05);
  --shadow-pop: 0 12px 32px rgba(16, 42, 92, .16);
  --shadow-btn: 0 3px 8px rgba(11, 74, 203, .22);

  --sidebar-w: 216px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh); color: var(--text);
  background: var(--bg); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; color: var(--heading); letter-spacing: -.005em; font-weight: var(--fw-bold); }
p { margin: 0; }
small { font-size: var(--fs-caption); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid rgba(11, 74, 203, .45); outline-offset: 2px; }
.icon { width: var(--ic); height: var(--ic); flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--text-2); }
.text-sm { font-size: var(--fs-small); }
.text-xs { font-size: var(--fs-caption); }
.text-strong { font-weight: var(--fw-semibold); color: var(--heading); }
.text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); }
.nowrap { white-space: nowrap; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mb-3 { margin-bottom: 12px; }
.fieldset-reset { border: 0; padding: 0; margin: 0; min-width: 0; }
.list-row { padding: 7px 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }

/* ---------- Layout do app ---------- */
.app {
  min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 14px; padding: 10px 14px 14px 10px;
  background: radial-gradient(1200px 600px at 100% 0%, rgba(0, 162, 224, .05), transparent 60%), var(--bg);
}

/* Sidebar */
.sidebar {
  position: sticky; top: 10px; height: calc(100vh - 24px);
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFE 100%);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; padding: 14px 10px; overflow: hidden;
}
.sidebar::after {
  content: ""; position: absolute; left: -40px; bottom: -40px; width: 200px; height: 230px;
  background: radial-gradient(closest-side, rgba(22, 65, 148, .06), transparent);
  border-radius: 60% 40% 55% 45%; pointer-events: none;
}
.sidebar__logo { display: block; padding: 4px 8px 16px; }
.sidebar__logo img { width: 164px; height: auto; }
.nav { display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.nav__link {
  display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px;
  border-radius: var(--radius); color: #1C2C4F; font-size: var(--fs-nav); font-weight: var(--fw-medium);
  transition: background .15s, color .15s;
}
.nav__link .icon { width: var(--ic-nav); height: var(--ic-nav); color: #2A4171; stroke-width: 1.8; }
.nav__link:hover { background: #F0F5FD; text-decoration: none; }
.nav__link.is-active { background: var(--primary-50); color: var(--primary); font-weight: var(--fw-semibold); }
.nav__link.is-active .icon { color: var(--primary); stroke-width: 2.1; }
.sidebar__footer { margin-top: auto; position: relative; z-index: 1; padding: 8px 4px 0; }
.demo-flag {
  display: block; text-align: center; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .05em; line-height: 1.35;
  color: #9A5B00; background: #FFF3D6; border: 1px solid #FFE1A1; border-radius: var(--radius-sm); padding: 5px;
}

/* Área principal */
.main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* Topbar */
.topbar {
  display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 16px 0 10px;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.topbar .topbar__menu { display: none; }
.search { position: relative; flex: 0 1 380px; display: flex; align-items: center; }
.search .icon { position: absolute; left: 11px; color: #334A75; }
.search input {
  width: 100%; height: var(--h-control-lg); border: 1px solid transparent; border-radius: var(--radius);
  background: var(--field-bg); padding: 0 12px 0 36px; font-size: var(--fs-body); color: var(--text);
}
.search input::placeholder { color: #6B7A93; }
.search input:focus { outline: none; border-color: #BFD3F6; background: #fff; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.bell { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #1F3B73; background: none; border: 0; cursor: pointer; }
.bell .icon { width: 20px; height: 20px; }
.bell__dot {
  position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px;
  background: #E5262B; color: #fff; font-size: 9.5px; font-weight: var(--fw-bold); display: grid; place-items: center; border: 2px solid #fff;
}
.topbar__divider { width: 1px; height: 28px; background: var(--border); }
.user-menu { position: relative; }
.user-menu__btn {
  display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 3px; border-radius: var(--radius);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--heading);
}
.user-menu__btn .icon { width: var(--ic-sm); height: var(--ic-sm); color: #334A75; }
.avatar-user {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #E9F1FE, #D6E5FC); color: #4D74C4;
}
.avatar-user svg { width: 22px; height: 22px; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; z-index: 40;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 6px;
}
.dropdown__head { padding: 6px 8px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.dropdown__head strong { display: block; color: var(--heading); }
.dropdown__head span { display: block; font-size: var(--fs-small); color: var(--text-2); }
.dropdown__item {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-sm);
  background: none; border: 0; cursor: pointer; color: var(--text); font-size: var(--fs-body); text-align: left;
}
.dropdown__item:hover { background: var(--row-hover); text-decoration: none; }
.dropdown__item .icon { color: var(--text-2); }

/* Conteúdo e cabeçalho de página */
.content { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 2px 2px 0; }
.page-head--nowrap { flex-wrap: nowrap; }
.page-head--flush { padding: 0; }
.page-title { font-size: var(--fs-page); font-weight: var(--fw-bold); line-height: 1.2; }
.page-subtitle { font-size: var(--fs-body); color: var(--text-2); margin-top: 2px; }
.page-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-2); margin-top: 2px; }
.breadcrumb .icon { width: 12px; height: 12px; }
.breadcrumb a { color: var(--text-2); }

/* ---------- Componentes ---------- */

/* Card */
.card {
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  border: 1px solid rgba(226, 232, 240, .6); padding: var(--pad-card); min-width: 0;
}
.card--flush { padding: 0; }
.card--inset { box-shadow: none; border-color: #EDF1F7; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.card__title { font-size: var(--fs-card); font-weight: var(--fw-semibold); color: var(--heading); }
.card__title--lg { font-size: var(--fs-section); font-weight: var(--fw-bold); }
.card__subtitle { font-size: var(--fs-small); color: var(--text-2); margin-top: 1px; }
.card__link { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.card__divider { padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.section-icon { width: 30px; height: 30px; border-radius: var(--radius); display: grid; place-items: center; flex: none; }
.section-icon--solid { background: var(--primary); color: #fff; }
.section-icon--solid .icon { width: var(--ic); height: var(--ic); }
.section-title { display: flex; gap: 10px; align-items: flex-start; }
.section-glyph { color: var(--primary); display: inline-flex; }
.section-glyph svg { width: 22px; height: 22px; }

/* Grids utilitárias */
.grid { display: grid; gap: var(--gap); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Ícone tonal */
.tone { display: grid; place-items: center; border-radius: 50%; flex: none; }
.tone .icon { width: var(--ic-tone); height: var(--ic-tone); }
.tone--sq { width: 30px; height: 30px; border-radius: var(--radius); }
.tone--sq .icon { width: var(--ic); height: var(--ic); }
.tone--lg { width: 46px; height: 46px; border-radius: var(--radius-lg); }
.tone--lg .icon { width: 22px; height: 22px; }
.tone--blue { background: var(--t-blue-bg); color: var(--t-blue); }
.tone--green { background: var(--t-green-bg); color: var(--t-green); }
.tone--purple { background: var(--t-purple-bg); color: var(--t-purple); }
.tone--teal { background: var(--t-teal-bg); color: var(--t-teal); }
.tone--orange { background: var(--t-orange-bg); color: var(--t-orange); }
.tone--red { background: var(--t-red-bg); color: var(--t-red); }
.tone--cyan { background: var(--t-cyan-bg); color: var(--t-cyan); }

/* Card de indicador vertical (dashboard) */
.kpi { display: flex; flex-direction: column; gap: 1px; padding: 12px 14px; }
.kpi__icon { width: 36px; height: 36px; margin-bottom: 6px; }
.kpi__label { font-size: var(--fs-card); font-weight: var(--fw-semibold); color: var(--heading); }
.kpi__value { font-size: var(--fs-kpi); font-weight: var(--fw-bold); color: var(--heading); line-height: 1.15; letter-spacing: -.02em; }
.kpi__delta { display: flex; align-items: center; gap: 4px; font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.kpi__delta .icon { width: 13px; height: 13px; stroke-width: 3; }
.kpi__delta--up { color: var(--success); } .kpi__delta--down { color: var(--danger); } .kpi__delta--bad-up { color: var(--danger); }
.kpi__delta--none { color: var(--text-2); font-weight: var(--fw-regular); }
.kpi__note { font-size: var(--fs-caption); color: var(--text-2); }

/* KPI horizontal (pagamentos, professores, notas) */
.kpi-h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px 14px; }
.kpi-h__icon { width: 40px; height: 40px; border-radius: 10px; }
.kpi-h__icon .icon { width: 20px; height: 20px; }
.kpi-h__label { font-size: var(--fs-small); color: var(--heading); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-h__value { font-size: var(--fs-kpi-sm); font-weight: var(--fw-bold); color: var(--heading); line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
.kpi-h__meta { font-size: var(--fs-caption); color: var(--text-2); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.kpi-h__meta .icon { width: 12px; height: 12px; }
.kpi-h__bar { grid-column: 1 / -1; }
.kpi-h__foot { font-size: var(--fs-caption); margin-top: 6px; color: var(--text-2); }
.kpi-h__foot--alert { color: var(--danger); font-weight: var(--fw-semibold); }
.kpi-h--sm { padding: 12px; gap: 4px 10px; }
.kpi-h--sm .kpi-h__icon { width: 36px; height: 36px; }
.kpi-h--sm .kpi-h__icon .icon { width: 18px; height: 18px; }
.kpi-h--sm .kpi-h__label { white-space: normal; line-height: 1.25; }

/* Barra de progresso */
.progress { height: 6px; border-radius: 6px; background: #EEF2F7; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--success); }
.progress--orange > span { background: var(--warning); } .progress--red > span { background: #F05252; }
.progress--purple > span { background: #7C4DDB; } .progress--blue > span { background: var(--primary); }

/* Card de gráfico */
.chart-card { display: flex; flex-direction: column; }
.chart-card__title { font-size: var(--fs-card); font-weight: var(--fw-semibold); color: var(--heading); margin-bottom: 8px; }
.chart-box { position: relative; flex: 1; min-height: 170px; }
.chart-box--sm { min-height: 0; height: 112px; flex: none; }
.chart-box--md { min-height: 190px; }
.chart-legend { display: flex; justify-content: center; gap: 18px; font-size: var(--fs-caption); color: var(--text); margin-top: 6px; flex-wrap: wrap; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.legend-dot--sq { border-radius: 2px; }
.empty-chart {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--text-2); font-size: var(--fs-small);
  background: repeating-linear-gradient(0deg, transparent 0 28px, #F1F5F9 28px 29px);
}
.empty-chart span { background: #fff; padding: 4px 10px; border-radius: var(--radius-sm); }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h-control); padding: 0 14px;
  border-radius: var(--radius); border: 1px solid transparent; font-size: var(--fs-body); font-weight: var(--fw-semibold); cursor: pointer;
  white-space: nowrap; transition: background .15s, box-shadow .15s, border-color .15s; text-decoration: none !important; line-height: 1;
}
.btn .icon { width: var(--ic); height: var(--ic); }
.btn--primary { background: linear-gradient(180deg, #1157DE 0%, var(--primary-dark) 100%); color: #fff; box-shadow: var(--shadow-btn); }
.btn--primary:hover { background: linear-gradient(180deg, #0E4FCB 0%, #08308C 100%); }
.btn--outline { background: #fff; color: var(--primary); border-color: #B9CCF0; }
.btn--outline:hover { background: var(--primary-50); }
.btn--ghost { background: #fff; color: var(--heading); border-color: var(--border); }
.btn--ghost:hover { background: #F8FAFC; }
.btn--soft { background: #F3F7FD; color: var(--heading); border-color: #DCE6F4; }
.btn--soft:hover { background: #EAF1FB; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #B91C1C; }
.btn--danger-outline { background: #fff; color: var(--danger); border-color: #F7C1C1; }
.btn--danger-outline:hover { background: #FEF2F2; }
.btn--lg { height: var(--h-control-lg); padding: 0 18px; }
.btn--sm { height: var(--h-control-sm); padding: 0 10px; font-size: var(--fs-small); }
.btn--sm .icon { width: var(--ic-sm); height: var(--ic-sm); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.icon-btn {
  width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: var(--radius);
  border: 1px solid var(--border); background: #fff; color: var(--heading); cursor: pointer; vertical-align: middle;
}
.icon-btn .icon { width: var(--ic); height: var(--ic); }
.icon-btn:hover { background: #F8FAFC; text-decoration: none; }
.icon-btn--primary { background: var(--primary-50); border-color: #BFD3F6; color: var(--primary); }
.icon-btn--danger { color: var(--danger); border-color: #F7C1C1; }
.icon-btn--plain { border: 0; background: none; width: 26px; }
.icon-btn--md { width: var(--h-control); height: var(--h-control); }
.actions { display: inline-flex; gap: 4px; align-items: center; }

/* Formulários */
.form-grid { display: grid; gap: 10px 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.label { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--heading); }
.label .req { color: var(--danger); margin-left: 2px; }
.label .opt, .opt { font-weight: var(--fw-regular); color: var(--text-2); }
.input, .select, .textarea {
  width: 100%; height: var(--h-control); border: 1px solid var(--field-border); border-radius: var(--radius); background: #fff;
  padding: 0 10px; font-size: var(--fs-body); color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: var(--h-control); padding: 7px 10px; resize: vertical; line-height: 1.4; }
.input::placeholder, .textarea::placeholder { color: #8A97AB; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: #6E9BEA; box-shadow: 0 0 0 3px rgba(11, 74, 203, .12); }
.input[readonly], .input:disabled, .select:disabled { background: #F1F4F9; color: #6B7A93; }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); }
.input--sm { height: var(--h-control-sm); font-size: var(--fs-small); }
.input--soft { background: var(--field-bg); border-color: transparent; }
.field__help { font-size: var(--fs-caption); color: var(--text-2); line-height: 1.35; }
.field__error { font-size: var(--fs-caption); color: var(--danger); }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23172B4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon > .icon { position: absolute; left: 10px; width: var(--ic); height: var(--ic); color: #3A5283; pointer-events: none; }
.input-icon > .input, .input-icon > .select { padding-left: 32px; }
.input-icon--right > .icon { left: auto; right: 10px; }
.input-icon--right > .input { padding-left: 10px; padding-right: 32px; }
.input-icon__sep > .input, .input-icon__sep > .select { padding-left: 42px; }
.input-icon__sep::before { content: ""; position: absolute; left: 32px; top: 1px; bottom: 1px; width: 1px; background: #E3E9F2; }
.status-select { position: relative; }
.status-select::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--success); }
.status-select .select { padding-left: 26px; }
.input-group { display: flex; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group__btn {
  width: var(--h-control); height: var(--h-control); flex: none; display: grid; place-items: center; border: 1px solid var(--field-border); border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0; background: #fff; color: var(--heading); cursor: pointer;
}
.counter { position: absolute; right: 10px; bottom: 6px; font-size: 10px; color: var(--muted); }
.date-range { display: flex; align-items: center; gap: 4px; height: var(--h-control); border: 1px solid var(--field-border); border-radius: var(--radius); padding-left: 10px; background: #fff; }
.date-range .input { border: 0; height: calc(var(--h-control) - 2px); padding: 0 4px; box-shadow: none; }

/* Checkbox / Radio */
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-body); }
.check input, .checkbox { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; margin: 0; }
.choice {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--field-border); border-radius: var(--radius); background: #fff; cursor: pointer; min-height: 44px;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__mark {
  width: 16px; height: 16px; flex: none; margin-top: 2px; border: 1.5px solid #9AA8BD; border-radius: 4px; background: #fff;
  display: grid; place-items: center; transition: all .15s;
}
.choice--radio .choice__mark { border-radius: 50%; width: 15px; height: 15px; }
.choice__title { display: block; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--heading); line-height: 1.3; }
.choice__desc { display: block; font-size: var(--fs-caption); color: var(--text-2); line-height: 1.3; }
.choice:has(input:checked) { border-color: #3D7BEA; background: #F1F6FF; box-shadow: inset 0 0 0 1px #3D7BEA; }
.choice:has(input:checked) .choice__mark { background: var(--primary); border-color: var(--primary); }
.choice:has(input:checked) .choice__mark::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.choice--radio:has(input:checked) .choice__mark { background: #fff; border-color: var(--primary); }
.choice--radio:has(input:checked) .choice__mark::after { width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--primary); transform: none; }
.choice:has(input:focus-visible) { outline: 2px solid rgba(11, 74, 203, .4); }

/* Seção de formulário (cadastro de aluno) */
.form-section { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
.form-section--side { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
.form-section__head { display: flex; gap: 10px; align-items: flex-start; }
.form-section__head .icon { width: 20px; height: 20px; color: var(--primary); margin-top: 1px; }
.form-section__title { font-size: var(--fs-card); font-weight: var(--fw-bold); color: var(--heading); line-height: 1.3; }
.form-section__sub { font-size: var(--fs-caption); color: var(--text-2); }

/* Tabela */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-table); }
.table th {
  text-align: left; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--heading); background: #F5F8FD;
  padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--border);
}
.table th:first-child { border-top-left-radius: var(--radius); } .table th:last-child { border-top-right-radius: var(--radius); }
.table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table--compact td { padding: 5px 10px; }
.table--dense th { padding: 8px 8px; }
.table--dense td { padding: 6px 8px; }
.table tbody tr:hover td { background: var(--row-hover); }
.table tr.is-selected td { background: #F1F6FF; }
.table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.table .num { text-align: center; }
.table .right { text-align: right; }
.table .col-check { width: 36px; }
.table .col-index { width: 42px; }
.table .col-wide { min-width: 220px; }
.th-sort { display: inline-flex; align-items: center; gap: 3px; }
.th-sort .icon { width: 11px; height: 11px; color: var(--muted); }
.cell-person { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.cell-strong { font-weight: var(--fw-semibold); color: var(--heading); }
.cell-ellipsis { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-row td { text-align: center; padding: 24px 10px; color: var(--text-2); }
.row-tall td { height: 56px; }

/* Avatar com iniciais */
.avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 10.5px; font-weight: var(--fw-bold); background: #E5EEFC; color: #2852A8;
}
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.avatar--c1 { background: #E5EEFC; color: #2852A8; } .avatar--c2 { background: #E3F4F1; color: #11826F; }
.avatar--c3 { background: #EFE7FD; color: #6D3FC8; } .avatar--c4 { background: #FFF0DD; color: #B7650B; }
.avatar--c5 { background: #FDE6E6; color: #C42B2B; } .avatar--c6 { background: #E1F3FC; color: #0D7FB0; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--radius-sm);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); white-space: nowrap;
}
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--success { background: #DFF6E8; color: #128A43; }
.badge--warning { background: #FFF0D6; color: #B45F00; }
.badge--danger { background: #FDE2E2; color: #C81E1E; }
.badge--info { background: #E2EEFF; color: #1650C4; }
.badge--purple { background: #EEE6FF; color: #6A3BC9; }
.badge--neutral { background: #EEF2F7; color: #475569; }
.badge--cyan { background: #DDF2FB; color: #0A7FB0; }
.badge--pill { border-radius: 20px; }

/* Abas */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 12px; }
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 12px 9px; color: #475569;
  font-size: var(--fs-small); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px;
}
.tab .icon { width: var(--ic); height: var(--ic); }
.tab:hover { text-decoration: none; color: var(--heading); }
.tab.is-active { color: var(--primary); font-weight: var(--fw-semibold); border-bottom-color: var(--primary); }
.pills { display: flex; gap: 4px; padding: 3px; background: #F3F6FB; border-radius: var(--radius); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-sm); font-size: var(--fs-small); color: #3B4B66; background: none; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none !important; }
.pill .icon { width: var(--ic-sm); height: var(--ic-sm); }
.pill.is-active { background: var(--primary); color: #fff; font-weight: var(--fw-semibold); }

/* Lista de definição */
.dl { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; margin: 0; }
.dl dt, .dl dd { padding: 7px 0; border-bottom: 1px solid #EEF2F7; margin: 0; }
.dl dt { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-small); white-space: nowrap; }
.dl dt .icon { width: var(--ic-sm); height: var(--ic-sm); color: #3C568A; }
.dl dd { color: var(--heading); font-size: var(--fs-body); }
.dl > :nth-last-child(-n+2) { border-bottom: 0; }
.dl--compact dt, .dl--compact dd { padding: 4px 0; border: 0; }

/* Paginação */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 2px 0; font-size: var(--fs-small); color: var(--text-2); }
.pager { display: flex; gap: 4px; align-items: center; }
.pager a, .pager span {
  min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: #fff; color: var(--heading); font-weight: var(--fw-medium); text-decoration: none;
}
.pager .is-current { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager .is-gap { border: 0; background: none; }
.pager .icon { width: var(--ic-sm); height: var(--ic-sm); }

/* Filtros */
.filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.filters .field { flex: 1 1 180px; }
.filters .grow { flex: 2 1 260px; }
.filters--nowrap { flex-wrap: nowrap; }

/* Feedback */
.alert {
  display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: var(--radius); font-size: var(--fs-body); border: 1px solid; line-height: 1.4;
}
.alert .icon { margin-top: 1px; }
.alert--error { background: #FEF2F2; border-color: #FBCACA; color: #A61B1B; }
.alert--success { background: #F0FDF4; border-color: #BBF0CD; color: #13703A; }
.alert--info { background: #EFF6FF; border-color: #C9DDFB; color: #1846A3; }
.alert--warning { background: #FFFBEB; border-color: #FBE3A6; color: #8A5300; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.toast { box-shadow: var(--shadow-pop); animation: toast-in .2s ease-out; background: #fff; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(15, 37, 87, .38); }
.modal[hidden] { display: none; }
.modal__dialog { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.modal__title { font-size: var(--fs-section); }
.modal__body { padding: 14px 16px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); }

/* Drawer lateral */
.drawer {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid rgba(226, 232, 240, .6);
  display: flex; flex-direction: column; min-width: 0;
}
.drawer__head { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 10px; }
.drawer__head--center { align-items: center; }
.drawer__title { font-size: var(--fs-section); display: flex; align-items: center; gap: 8px; }
.drawer__name { font-size: var(--fs-section); font-weight: var(--fw-bold); color: var(--heading); }
.drawer__close { margin-left: auto; }
.drawer__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.drawer__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
.drawer__foot--3 { grid-template-columns: auto auto auto; }
.drawer__pad { padding: 0 14px; }
.with-drawer { display: grid; grid-template-columns: minmax(0, 1fr) var(--drawer-w, 380px); gap: 12px; align-items: start; }
.panel { border: 1px solid #E8EEF6; border-radius: var(--radius-lg); padding: 10px 14px; }
.panel--flush { padding: 10px 0 0; }
.panel__title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-card); font-weight: var(--fw-semibold); color: var(--heading); margin-bottom: 6px; }
.panel--flush .panel__title { padding: 0 12px; }
.panel__title .icon { color: var(--primary); }
.panel__title .btn { margin-left: auto; }
.panel__text { font-size: var(--fs-body); line-height: 1.5; }

/* Listas de atividades (dashboard) */
.feed { display: flex; flex-direction: column; gap: 6px; }
.feed__item {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 5px 10px 5px 5px; border: 1px solid #EDF1F7; border-radius: var(--radius);
}
.feed__item--date { grid-template-columns: 46px minmax(0, 1fr) auto; }
.feed__icon { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; }
.feed__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed__text { font-size: var(--fs-caption); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed__meta { font-size: var(--fs-caption); color: var(--text-2); white-space: nowrap; }
.feed__body { min-width: 0; }
.date-chip { width: 46px; height: 34px; border-radius: var(--radius-sm); background: #EDF3FD; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.date-chip b { font-size: 14px; color: var(--primary); }
.date-chip small { font-size: 10px; font-weight: var(--fw-bold); color: var(--primary); margin-top: 2px; }

/* Botão-chip de data */
.date-btn {
  display: inline-flex; align-items: center; gap: 8px; height: var(--h-control); padding: 0 12px; background: #fff;
  border-radius: var(--radius); border: 1px solid #E5ECF6; box-shadow: var(--shadow-card); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--heading);
}
.date-btn .icon { color: var(--primary); }
.date-btn--flat { box-shadow: none; }

/* Presença */
.att { display: flex; gap: 6px; }
.att__opt { position: relative; flex: 1 1 0; }
.att__opt input { position: absolute; opacity: 0; }
.att__opt span {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 26px; min-width: 96px; padding: 0 10px;
  border: 1px solid #D9E1EC; border-radius: var(--radius); color: #334155; font-size: var(--fs-small); cursor: pointer; background: #fff;
}
.att__opt span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #94A3B8; }
.att__opt input:checked + span { font-weight: var(--fw-semibold); }
.att__opt input:checked + span::before { border: 0; width: 8px; height: 8px; background: currentColor; }
.att__opt--p input:checked + span { background: #E2F7EA; border-color: #4CC384; color: #127A3D; }
.att__opt--a input:checked + span { background: #FDE4E4; border-color: #F07C7C; color: #D11F1F; }
.att__opt--j input:checked + span { background: #FFF1D9; border-color: #F7B54F; color: #B86800; }
.att__opt input:focus-visible + span { outline: 2px solid rgba(11, 74, 203, .4); }

/* Notas */
.grade-input { width: 88px; }
.status-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; min-width: 116px; padding: 0 8px; border-radius: var(--radius-sm); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.status-chip .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.status-chip--up { background: #DFF6E8; color: #128A43; }
.status-chip--eq { background: #E2EEFF; color: #1650C4; }
.status-chip--down { background: #FDE2E2; color: #C81E1E; }

/* Relatórios: cartões de tipo */
.report-type {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-align: left; cursor: pointer;
  border: 1.5px solid transparent; transition: border-color .15s, box-shadow .15s; color: inherit; text-decoration: none !important;
}
.report-type:hover { border-color: #C7D8F6; }
.report-type.is-active { border-color: #3D7BEA; box-shadow: 0 0 0 3px rgba(61, 123, 234, .12); }
.report-type__icon { width: 38px; height: 38px; margin-bottom: 6px; }
.report-type__title { font-size: var(--fs-card); font-weight: var(--fw-semibold); color: var(--heading); }
.report-type__desc { font-size: var(--fs-small); color: var(--text-2); line-height: 1.4; }
.big-number { font-size: var(--fs-kpi-sm); font-weight: var(--fw-bold); color: var(--primary); line-height: 1.1; }

/* Planos (pagamentos) */
.plan { border: 1px solid #E5ECF5; border-radius: var(--radius-lg); padding: 10px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.plan__head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--heading); margin-bottom: 6px; white-space: nowrap; }
.plan__head .tone { width: 28px; height: 28px; }
.plan__head .tone .icon { width: 14px; height: 14px; }
.plan__value { font-size: 17px; font-weight: var(--fw-bold); color: var(--heading); }
.plan__desc { font-size: var(--fs-caption); color: var(--text-2); line-height: 1.35; }

/* Estado vazio */
.empty-state { text-align: center; padding: 20px 12px; color: var(--text-2); font-size: var(--fs-small); }
.empty-state .icon { width: 26px; height: 26px; color: #A7B6CD; margin: 0 auto 6px; }
.empty-state strong { display: block; color: var(--heading); margin-bottom: 2px; font-size: var(--fs-body); }

/* Aviso de fase */
.phase-note { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); color: #8A5300; background: #FFF7E3; border: 1px solid #FBE3A6; padding: 3px 9px; border-radius: 20px; }
.phase-note .icon { width: 12px; height: 12px; }

/* Ícone de planilha (CSV) */
.icon--excel { color: #16A34A; }

/* ---------- Login ---------- */
.auth-body {
  min-height: 100vh; display: grid; place-items: center; padding: 20px; overflow-x: hidden;
  background: linear-gradient(160deg, #F7FBFF 0%, #EEF6FD 55%, #F4F9FE 100%); position: relative;
}
.auth-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.auth-bg svg { width: 100%; height: 100%; }
.auth-card { position: relative; z-index: 1; max-width: 440px; text-align: center; padding: 28px; }
.auth-card__logo { width: 160px; margin: 0 auto 16px; }
.auth-card h1 { font-size: 20px; }
.auth-card p { margin: 6px 0 16px; }
.login {
  position: relative; z-index: 1; width: min(920px, 100%); min-height: 500px; display: grid; grid-template-columns: 1fr 1fr;
  background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(22, 65, 148, .14), 0 2px 6px rgba(22, 65, 148, .06);
}
.login__brand {
  position: relative; color: #fff; padding: 52px 52px 48px; overflow: hidden;
  background: linear-gradient(150deg, #0C55D6 0%, #0A44B8 45%, #0A3A9E 100%);
}
.login__brand::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 260px at 20% 10%, rgba(255, 255, 255, .12), transparent 60%); }
.login__logo { position: relative; width: 300px; max-width: 100%; margin: 0 0 22px 8px; }
.login__title { position: relative; color: #fff; font-size: 30px; font-weight: var(--fw-bold); letter-spacing: -.01em; line-height: 1.15; }
.login__lead { position: relative; font-size: 16px; line-height: 1.45; margin-top: 8px; color: #EAF1FF; max-width: 340px; }
.login__features { position: relative; list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.login__features li { display: flex; align-items: center; gap: 18px; font-size: 14px; color: #F3F7FF; }
.login__features .icon { width: 24px; height: 24px; color: #fff; }
.login__wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 170px; }
.login__form { padding: 88px 44px 44px 52px; display: flex; flex-direction: column; }
.login__welcome { font-size: 30px; font-weight: var(--fw-bold); color: var(--heading); letter-spacing: -.02em; }
.login__sub { font-size: 15px; color: #4A5A75; margin: 4px 0 30px; }
.login__fields { display: flex; flex-direction: column; gap: 14px; }
.login .input-icon > .icon { left: 15px; width: 20px; height: 20px; color: #253C6B; stroke-width: 1.7; }
.login .input { height: 46px; padding-left: 46px; font-size: 14px; border-color: #D8E1EC; }
.login .input::placeholder { color: #6E7D95; }
.login .pw-toggle { position: absolute; right: 10px; background: none; border: 0; cursor: pointer; color: #253C6B; padding: 4px; display: grid; }
.login .pw-toggle .icon { width: 20px; height: 20px; stroke-width: 1.7; }
.login .btn--lg { height: 48px; font-size: 15px; font-weight: var(--fw-bold); margin-top: 2px; gap: 10px; }
.login .btn--lg .icon { width: 18px; height: 18px; }
.login__forgot { text-align: center; margin-top: 18px; font-size: var(--fs-body); }

/* ---------- Páginas: grades específicas ---------- */
.dash-charts { grid-template-columns: 465fr 476fr 364fr; }
.dash-bottom { grid-template-columns: 670fr 648fr; }
.donut-wrap { position: relative; height: 150px; }
.donut-wrap--md { width: 160px; height: 160px; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-center--static { position: static; }
.donut-center b { font-size: var(--fs-kpi-sm); font-weight: var(--fw-bold); color: var(--heading); line-height: 1; }
.donut-center small { font-size: var(--fs-caption); color: var(--text-2); margin-top: 3px; }
.donut-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; font-size: var(--fs-small); }
.donut-legend div { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; }
.donut-legend span:not(.legend-dot) { grid-column: 2; color: var(--text-2); font-size: var(--fs-caption); line-height: 1.3; }
.pay-top { grid-template-columns: 590fr 762fr; }
.pay-donut { display: grid; grid-template-columns: 160px 1fr; gap: 22px; align-items: center; }
.pay-legend { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px 16px; font-size: var(--fs-body); align-items: center; }
.notes-top { grid-template-columns: 307fr 265fr 293fr 450fr; }
.report-actions { display: grid; grid-template-columns: 0.88fr 0.95fr 0.94fr; gap: 10px; margin-top: 12px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1440px) {
  .with-drawer { grid-template-columns: minmax(0, 1fr) min(var(--drawer-w, 380px), 360px); }
}
@media (max-width: 1280px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-charts { grid-template-columns: 1fr 1fr; }
  .dash-charts > :last-child { grid-column: 1 / -1; }
  .notes-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notes-top > :last-child { grid-column: 1 / -1; }
  .with-drawer { grid-template-columns: 1fr; }
  .form-section--side { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; padding: 8px; }
  .sidebar {
    position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; height: 100vh; width: 240px; border-radius: 0 12px 12px 0;
    transform: translateX(-105%); transition: transform .2s ease;
  }
  .sidebar.is-open { transform: none; box-shadow: var(--shadow-pop); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(15, 37, 87, .35); }
  .topbar .topbar__menu { display: inline-grid; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .pay-top, .dash-bottom { grid-template-columns: 1fr; }
  .filters--nowrap { flex-wrap: wrap; }
  .login { grid-template-columns: 1fr; }
  .login__brand { padding: 36px 32px 130px; }
  .login__form { padding: 36px 32px; }
}
@media (max-width: 900px) { .page-head--nowrap { flex-wrap: wrap; } }
/* Celular: texto não encolhe; campos com 16px evitam zoom automático do iOS; alvos de toque ≥ 40px */
@media (max-width: 720px) {
  :root { --fs-body: 14px; --fs-table: 13px; --fs-label: 13px; --fs-small: 12.5px; --fs-caption: 12px; --fs-page: 22px; --h-control: 40px; --h-control-sm: 34px; }
  .grid-5, .grid-4, .grid-3, .grid-2, .dash-charts, .notes-top, .report-actions { grid-template-columns: 1fr; }
  .dash-charts > :last-child, .notes-top > :last-child { grid-column: auto; }
  .topbar { height: 52px; padding: 0 8px; gap: 8px; }
  .search { display: none; }
  .user-menu__btn span { display: none; }
  .topbar__divider { display: none; }
  .input, .select, .textarea { font-size: 16px; }
  .nav__link { height: 42px; font-size: 14px; }
  .form-grid { grid-template-columns: 1fr !important; }
  .form-grid > * { grid-column: auto !important; }
  .pay-donut { grid-template-columns: 1fr; justify-items: center; }
  .att { flex-direction: column; gap: 4px; }
  .att__opt span { height: 32px; }
  .icon-btn { width: 36px; height: 36px; }
  .drawer__foot, .drawer__foot--3 { grid-template-columns: 1fr; }
  .login__title, .login__welcome { font-size: 24px; }
}

/* ---------- Impressão / PDF ---------- */
@media print {
  .sidebar, .topbar, .page-head__actions, .no-print, .toasts { display: none !important; }
  .app { display: block; padding: 0; background: #fff; }
  .card, .drawer { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  body { background: #fff; }
}

/* Cursos: ações em linha e formulário no painel lateral */
.actions form { display: contents; }
.status-select--off::before { background: var(--muted); }
.drawer__foot--inline { padding: 4px 0 0; margin-top: auto; }
.drawer__foot form { display: contents; }

/* Cards de KPI em linha com gráfico: conteúdo no topo, barra/rodapé na base */
.notes-top > .kpi-h { align-content: space-between; }
/* Rodapés de painel: botões encolhem sem estourar a largura */
.drawer__foot .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.drawer__foot--3 .btn { padding: 0 8px; font-size: var(--fs-small); gap: 5px; }
.pills { flex-wrap: wrap; }
.drawer .pills { flex-wrap: nowrap; overflow-x: auto; }
.drawer .pill { padding: 6px 8px; gap: 4px; }

/* Usuários: campo de senha com mostrar/ocultar e navegação de configurações */
.input-icon .pw-toggle { position: absolute; right: 6px; display: grid; place-items: center; padding: 4px; background: none; border: 0; color: #3A5283; cursor: pointer; border-radius: var(--radius-sm); }
.input-icon .pw-toggle .icon { width: var(--ic); height: var(--ic); }
.input-icon--right > .input[type="password"], .input-icon--right > .input[type="text"] { padding-right: 36px; }
.config-nav { align-self: flex-start; }

/* Disciplinas: vínculos turma × professores */
.vinculos { display: flex; flex-direction: column; gap: 8px; }
.vinculo { border: 1px solid #E8EEF6; border-radius: var(--radius); padding: 6px; }
.vinculo .choice { border: 0; box-shadow: none; background: none; min-height: 0; padding: 4px 6px; }
.vinculo .choice:has(input:checked) { background: none; box-shadow: none; }
.vinculo:has([data-turma-check]:checked) { border-color: #3D7BEA; background: #F7FAFF; }
.vinculo__profs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 4px 32px; }
.chip-check { position: relative; display: inline-flex; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--field-border); border-radius: 20px; background: #fff; font-size: var(--fs-small); color: var(--text); }
.chip-check input:checked + span { background: var(--primary-50); border-color: #3D7BEA; color: var(--primary); font-weight: var(--fw-semibold); }
.chip-check input:checked + span::before { content: "✓"; margin-right: 5px; font-weight: var(--fw-bold); }
.chip-check input:focus-visible + span { outline: 2px solid rgba(11, 74, 203, .4); }
.list-row .icon { width: var(--ic-sm); height: var(--ic-sm); vertical-align: -2px; color: var(--text-2); }

/* Submenu da sidebar (Cursos → Disciplinas) */
.nav__link--sub { height: 30px; padding-left: 42px; font-size: var(--fs-small); gap: 8px; }
.nav__link--sub .icon { width: var(--ic-sm); height: var(--ic-sm); }
.nav__link--sub.is-active { background: none; color: var(--primary); }
.nav__link--parent.is-active { background: var(--primary-50); }

/* Relatórios: cartões de tipo quebram em linhas conforme a largura */
.report-types { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.chart-box--fixed { flex: none; min-height: 0; height: 220px; }

/* Grupos familiares: linha de integrante compacta no painel lateral */
.member-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.member-row > span:first-child { min-width: 0; }
.member-row > form, .member-row > .badge, .member-row > .member-row__note { flex-shrink: 0; }
.member-row__note { max-width: 120px; text-align: right; }