@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
@import './ats-design-system.css';

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESIGN TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* ── Brand — Vibrant institutional blue ── */
  --primary:        #1A56DB;
  --primary-dark:   #1342B8;
  --primary-light:  #BFDBFE;
  --primary-glow:   rgba(26,86,219,0.18);
  --secondary:      #5f5e5e;

  /* ── Semantic ── */
  --success:        #55A454;     /* on_tertiary_container */
  --success-dim:    rgba(85,164,84,0.10);
  --success-border: rgba(85,164,84,0.25);
  --warning:        #D97706;
  --warning-dim:    rgba(217,119,6,0.10);
  --warning-border: rgba(217,119,6,0.25);
  --danger:         #BA1A1A;     /* Stitch error */
  --danger-dim:     rgba(186,26,26,0.10);
  --danger-border:  rgba(186,26,26,0.25);
  --info:           #405F91;     /* inst-info */

  /* ── Surfaces — LIGHT THEME ── */
  --bg:             #F2F5FC;
  --bg-subtle:      #E6EAF7;
  --bg-card:        #ffffff;
  --bg-card-hover:  #EBEff9;
  --bg-elevated:    #EDF0F8;
  --bg-input:       #ffffff;

  /* ── Borders ── */
  --border:         rgba(0,0,0,0.08);
  --border-hover:   rgba(0,0,0,0.14);
  --border-focus:   var(--primary);
  --border-strong:  rgba(0,0,0,0.18);

  /* ── Text ── */
  --text-primary:   #1a1c1c;     /* on_surface */
  --text-secondary: #43474f;     /* on_surface_variant */
  --text-muted:     #747780;     /* outline */
  --text-dim:       #a0a3ab;

  /* ── Sidebar — stays dark institutional navy ── */
  --sidebar-bg:     #002B5B;
  --sidebar-w:      256px;

  /* ── INSTITUTIONAL DESIGN SYSTEM — Solution Educacional ───────────────────
     Source: Stitch export "Institutional Authority" · Brand: Authoritative,
     Human, Kinetic · Visual direction: Educational Operational Center
     ──────────────────────────────────────────────────────────────────────── */
  --inst-navy:           #002B5B;   /* Command layer: sidebar, primary actions */
  --inst-navy-deep:      #001736;   /* Deepest navy for depth/shadow */
  --inst-navy-mid:       #264778;   /* Mid-tone: hover states, secondary buttons */
  --inst-navy-highlight: rgba(255,255,255,0.10); /* Active bg on navy */
  --inst-navy-hover:     rgba(255,255,255,0.06); /* Hover bg on navy */
  --inst-navy-border:    rgba(255,255,255,0.08); /* Subtle dividers on navy */

  /* On-navy text */
  --inst-on-navy:        rgba(255,255,255,0.92);
  --inst-on-navy-dim:    rgba(255,255,255,0.55);
  --inst-on-navy-faint:  rgba(255,255,255,0.28);

  /* Semantic colors — institutional palette */
  --inst-success:        #55A454;
  --inst-success-bg:     rgba(85,164,84,0.12);
  --inst-warning:        #D97706;
  --inst-warning-bg:     rgba(217,119,6,0.12);
  --inst-danger:         #BA1A1A;
  --inst-danger-bg:      rgba(186,26,26,0.10);
  --inst-info:           #405F91;
  --inst-info-bg:        rgba(64,95,145,0.12);
  --inst-neutral:        #747780;
  --inst-neutral-bg:     rgba(116,119,128,0.12);

  /* Role accent colors (light variants for visibility on navy) */
  --inst-gestao-accent:      #60A5FA;
  --inst-professor-accent:   #34D399;
  --inst-coord-accent:       #405F91;
  --inst-secretaria-accent:  #FBBF24;
  --inst-diretora-accent:    #34D399;

  /* Card / surface */
  --inst-card-shadow:    0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --inst-card-shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);

  /* Typography */
  --inst-mono: 'JetBrains Mono', 'Fira Mono', 'Courier New', monospace;

  /* Spacing & Shape */
  --r:   10px;
  --r-sm: 6px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadows — light theme */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow:     0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.07);
  --shadow-glow:0 0 24px var(--primary-glow);

  /* Spinner/skeleton track (light theme) */
  --spinner-track:   rgba(0,0,0,0.08);
  --skeleton-base:   rgba(0,0,0,0.04);
  --skeleton-shine:  rgba(0,0,0,0.07);

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t: 0.16s;

  /* Spacing */
  --page-px: 32px;
  --topbar-h: 64px;

  /* Topbar — light */
  --topbar-bg: #F2F5FC;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESET & BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  font-feature-settings: "rlig" 1, "calt" 1, "cv05" 1;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
svg { display: block; flex-shrink: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   APP SHELL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.app-layout { display: flex; min-height: 100vh; }
.main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #002B5B 0%, #001732 100%);
  border-right: 1px solid rgba(255,255,255,0.05);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; height: 100vh;
  z-index: 100; overflow-y: auto;
}

.sidebar-header { padding: 18px 14px 14px; }
.sidebar-logo { display: flex; align-items: center; gap: 10px; }
.sidebar-logo-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--inst-navy-mid);
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
}
.sidebar-logo-mark span { font-size: 16px; font-weight: 900; color: white; letter-spacing: -0.5px; }
.sidebar-logo-text { min-width: 0; }
.sidebar-logo-name { font-size: 13px; font-weight: 600; color: var(--inst-on-navy); line-height: 1.2; letter-spacing: -0.1px; }
.sidebar-logo-tag  { font-size: 10px; color: var(--inst-on-navy-faint); font-weight: 400; margin-top: 1px; letter-spacing: 0.3px; }

.sidebar-sep { height: 1px; background: var(--border); margin: 0 14px; }

.sidebar-nav { flex: 1; padding: 8px 8px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.sidebar-section-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--inst-on-navy-faint);
  padding: 14px 10px 4px;
  user-select: none;
}
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--inst-on-navy-dim); font-size: 13px; font-weight: 500;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
  position: relative; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left;
  line-height: 1.3;
}
.nav-link:hover { color: var(--text-secondary); background: rgba(0,0,0,0.04); }
.nav-link.active {
  color: var(--inst-navy);
  background: rgba(0,27,54,0.07);
  font-weight: 600;
}
.nav-link.active::before {
  content: '';
  position: absolute; left: 0; top: 5px; bottom: 5px;
  width: 2px; border-radius: 0 2px 2px 0;
  background: var(--inst-navy);
}
.nav-link svg { opacity: 0.6; transition: opacity var(--t); }
.nav-link:hover svg { opacity: 0.8; }
.nav-link.active svg { opacity: 1; color: var(--inst-navy); }
.nav-link-text { flex: 1; }
.nav-chip {
  font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 20px; background: var(--danger); color: white;
}

.sidebar-footer { padding: 8px 8px 12px; border-top: 1px solid var(--border); flex-shrink: 0; }
.sidebar-plan-badge { margin-bottom: 8px; padding: 0 2px; }
.sidebar-user {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: var(--r);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--inst-navy-border);
  transition: background var(--t);
}
.sidebar-user:hover { background: var(--inst-navy-hover); }
.sidebar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--inst-navy-mid);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.9); flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-email { font-size: 11px; color: var(--inst-on-navy-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.sidebar-user-school { font-size: 10.5px; color: var(--inst-on-navy-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout-btn {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  border: none; background: transparent; color: var(--text-dim);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--t); flex-shrink: 0;
}
.logout-btn:hover { background: var(--danger-dim); color: var(--danger); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR — COMMAND CENTER  (Stitch "Institutional Authority")
   Dark navy #002B5B · on-navy text system always applies
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── On-navy base overrides ── */
.sidebar                           { border-right-color: var(--inst-navy-border); }
.sidebar .sidebar-logo-name        { color: var(--inst-on-navy);      font-weight: 700; letter-spacing: -.2px; }
.sidebar .sidebar-logo-tag         { color: var(--inst-on-navy-dim); }
.sidebar .sidebar-logo-img         { border-radius: 0; }

.sidebar .sidebar-section-label    { color: var(--inst-on-navy-faint); font-size: 9px; letter-spacing: .15em; padding-top: 18px; padding-bottom: 5px; }
.sidebar .nav-item                 { color: var(--inst-on-navy-dim);   border-radius: 6px; }
.sidebar .nav-item:hover           { color: var(--inst-on-navy);       background: rgba(255,255,255,0.07); }
.sidebar .nav-item.active          { color: #ffffff;                   background: rgba(96,165,250,0.18); font-weight: 600; }
.sidebar .nav-item.active::before  { background: #60A5FA; width: 3px; border-radius: 0 2px 2px 0; }
.sidebar .nav-item .nav-svg        { opacity: .55; transition: opacity var(--t); }
.sidebar .nav-item:hover .nav-svg  { opacity: .8; }
.sidebar .nav-item.active .nav-svg { opacity: 1; }

/* Footer on-navy */
.sidebar .sidebar-footer     { border-top-color: var(--inst-navy-border); }
.sidebar .sidebar-user       { background: rgba(255,255,255,.03); border-color: var(--inst-navy-border); }
.sidebar .sidebar-user:hover { background: var(--inst-navy-hover); }
.sidebar .sidebar-user-email { color: var(--inst-on-navy-dim); }
.sidebar .sidebar-avatar     { background: var(--inst-navy-mid); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.9); }
.sidebar .btn-logout         { color: var(--inst-on-navy-dim); }
.sidebar .btn-logout:hover   { background: rgba(186,26,26,.2); color: #F87171; }
.sidebar .sidebar-role-badge { opacity: .75; filter: brightness(.9); }
.sidebar .plan-badge         { opacity: .65; }

/* Live status strip on-navy */
.sidebar .sls-wrap  { border-top-color: var(--inst-navy-border); border-bottom-color: var(--inst-navy-border); background: rgba(0,0,0,.08); }
.sidebar .sls-row   { color: var(--inst-on-navy-dim); }
.sidebar .sls-sync  { color: var(--inst-on-navy-faint); }
.sidebar .sls-dot   { background: var(--inst-success); }
.sidebar .sls-dot.yellow { background: var(--inst-warning); }
.sidebar .sls-dot.red    { background: var(--inst-danger); }
.sidebar .sls-dot.gray   { background: rgba(255,255,255,.25); }

/* Nav badge on-navy */
.sidebar .nav-badge {
  background: rgba(248,113,113,.28);
  color: #F87171;
  border-radius: 8px;
  font-family: var(--inst-mono);
}

/* ── Role context block (below logo, above nav) ── */
.sdb-ctx {
  margin: 0 10px 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
}
.sdb-ctx-role {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: #F4B942;
  background: rgba(244,185,66,0.15);
  border: 1px solid rgba(244,185,66,0.25);
  border-radius: 4px;
  padding: 1px 6px;
  margin-bottom: 4px;
}
.sdb-ctx-school {
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

/* ── Separador antes do CTA no nav ── */
.sdb-cta-sep {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 6px 8px;
}

/* ── Ação principal como nav item (mantém compatibilidade) ── */
.sdb-cta {
  display: block;
  margin: 4px 8px 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.84);
  text-decoration: none;
  transition: background .13s, color .13s;
}
.sdb-cta:hover { background: rgba(255,255,255,.11); color: white; }

/* ── Nav item inline indicators (end-slot) ── */
.nav-iend {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.nav-ibadge {
  min-width: 18px; height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(248,113,113,.26);
  color: #F87171;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--inst-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-ibadge.amber { background: rgba(251,191,36,.2);  color: #FBBF24; }
.nav-ibadge.green { background: rgba(52,211,153,.15); color: #34D399; }
.nav-idot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-idot.red   { background: #BA1A1A; }
.nav-idot.amber { background: #D97706; }
.nav-idot.green { background: #55A454; }

/* ── Institutional documentation table (Stitch "compliance" view) ── */
.inst-doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.inst-doc-table thead th {
  font-family: var(--inst-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  padding: 6px 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.inst-doc-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
}
.inst-doc-table tbody tr:last-child { border-bottom: none; }
.inst-doc-table tbody tr:hover { background: var(--bg-card-hover); }
.inst-doc-table tbody td {
  padding: 10px 10px;
  color: var(--text-secondary);
  vertical-align: middle;
}
.inst-doc-table .doc-id {
  font-family: var(--inst-mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
.inst-doc-table .doc-nome {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.inst-doc-table .doc-turma {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--inst-mono);
}
.inst-doc-table .doc-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  width: 80px;
  min-width: 60px;
}
.inst-doc-table .doc-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .8s cubic-bezier(0.22,1,0.36,1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOP BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242,245,252,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(26,86,219,0.10);
  padding: 0 var(--page-px);
  height: var(--topbar-h, 64px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-title { font-size: 15px; font-weight: 650; color: var(--text-primary); letter-spacing: -0.2px; }
.topbar-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE CONTENT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page { padding: 24px var(--page-px); flex: 1; }

/* Section title inside page */
.section-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card {
  background: var(--bg-card);
  border: 1px solid rgba(26,86,219,0.08);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06);
  transition: border-color var(--t), box-shadow var(--t);
}
.card:hover {
  border-color: rgba(26,86,219,0.16);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 6px 20px rgba(26,86,219,0.08);
}
.card-inner { padding: 22px 24px; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
}
.card-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.1px; color: var(--text-primary); }
.card-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.card-body { padding: 16px 24px 22px; }
.card-divider { height: 1px; background: var(--border); margin: 0 24px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   METRIC CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }

.kpi {
  background: var(--bg-card);
  border: 1px solid rgba(26,86,219,0.08);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  position: relative; overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.05);
  cursor: default;
}
.kpi:hover {
  border-color: rgba(26,86,219,0.16);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 6px 20px rgba(26,86,219,0.08);
  transform: translateY(-1px);
}
.kpi::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.kpi.kpi-primary::before { background: linear-gradient(90deg, var(--primary), #60A5FA); }
.kpi.kpi-success::before { background: linear-gradient(90deg, var(--success), #34D399); }
.kpi.kpi-warning::before { background: linear-gradient(90deg, var(--warning), #FCD34D); }
.kpi.kpi-danger::before  { background: linear-gradient(90deg, var(--danger),  #F87171); }

.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); }
.kpi-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kpi-icon.primary { background: rgba(0,27,54,0.08);   color: var(--inst-navy); }
.kpi-icon.success { background: rgba(85,164,84,0.10);  color: var(--success); }
.kpi-icon.warning { background: rgba(217,119,6,0.10);  color: var(--warning); }
.kpi-icon.danger  { background: rgba(186,26,26,0.10);  color: var(--danger); }

.kpi-value { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1; letter-spacing: -0.5px; margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.kpi-foot { font-size: 12px; color: var(--text-muted); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 15px; height: 34px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
  white-space: nowrap; font-family: inherit;
  text-decoration: none; user-select: none;
  letter-spacing: -0.1px;
}
.btn:disabled { opacity: 0.42; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn-primary {
  background: linear-gradient(180deg, #2563EB 0%, var(--primary) 100%);
  color: white; border-color: var(--primary-dark);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(26,86,219,0.25), 0 2px 8px rgba(26,86,219,0.15), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: 0 2px 8px rgba(26,86,219,0.30), 0 4px 16px rgba(26,86,219,0.18);
}
.btn-primary:active { box-shadow: 0 1px 2px rgba(26,86,219,0.2); transform: translateY(1px); }

.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-ghost:hover { background: rgba(0,0,0,0.04); border-color: var(--border-hover); color: var(--text-primary); }
.btn-ghost:active { background: rgba(0,0,0,0.06); }

.btn-danger { background: var(--danger); color: white; border-color: #BA1A1A; box-shadow: 0 1px 2px rgba(186,26,26,0.20); }
.btn-danger:hover { background: #9B1111; box-shadow: 0 2px 6px rgba(186,26,26,0.25); }

.btn-success { background: var(--success); color: white; border-color: #3D8B3C; box-shadow: 0 1px 2px rgba(85,164,84,0.20); }
.btn-success:hover { background: #3D8B3C; box-shadow: 0 2px 6px rgba(85,164,84,0.25); }

.btn-sm { height: 28px; padding: 0 11px; font-size: 12px; border-radius: 5px; }
.btn-sm svg { width: 12px; height: 12px; }
.btn-lg { height: 40px; padding: 0 22px; font-size: 13.5px; font-weight: 600; }

.icon-btn {
  width: 34px; height: 34px; padding: 0; display: flex;
  align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: rgba(0,0,0,0.04);
  border: 1px solid var(--border); color: var(--text-secondary);
  cursor: pointer; transition: all var(--t); font-family: inherit;
}
.icon-btn:hover { background: rgba(0,0,0,0.07); border-color: var(--border-hover); color: var(--text-primary); }
.icon-btn svg { width: 15px; height: 15px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORMS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.field-label .req { color: var(--danger); margin-left: 2px; }
.field-hint  { font-size: 11.5px; color: var(--text-muted); }
.field-error { font-size: 11.5px; color: var(--danger); }

.input, .select {
  width: 100%; height: 38px; padding: 0 13px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-primary);
  font-size: 13.5px; font-family: inherit;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
}
.input::placeholder { color: var(--text-dim); }
.input:hover, .select:hover { border-color: var(--border-hover); }
.input:focus, .select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,86,219,0.15);
}
.input.is-error { border-color: var(--danger); }
.select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23747780' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  padding-right: 36px;
}
.select option { background: var(--bg-elevated); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.col-full { grid-column: 1 / -1; }

/* Search box */
.search-wrap { position: relative; }
.search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; width: 15px; height: 15px; }
.search-wrap .input { padding-left: 36px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-card); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
  padding: 10px 16px; text-align: left;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.02); white-space: nowrap;
}
.tbl tbody td {
  padding: 12px 16px; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background var(--t); }
.tbl tbody tr:hover td { background: rgba(26,86,219,0.04); }
.td-name { font-weight: 600; color: var(--text-primary); letter-spacing: -0.1px; }
.td-dim  { color: var(--text-muted); font-size: 12px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BADGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.1px;
}
.dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-success { background: var(--success-dim); color: #2e7d32; border: 1px solid var(--success-border); }
.badge-warning { background: var(--warning-dim); color: #92400e; border: 1px solid var(--warning-border); }
.badge-danger  { background: var(--danger-dim);  color: var(--danger); border: 1px solid var(--danger-border); }
.badge-info    { background: rgba(64,95,145,0.10); color: var(--inst-info); border: 1px solid rgba(64,95,145,0.25); }
.badge-muted   { background: rgba(116,119,128,0.10); color: var(--text-muted); border: 1px solid rgba(116,119,128,0.25); }
.badge-primary { background: rgba(26,86,219,0.08); color: #1A56DB; border: 1px solid rgba(26,86,219,0.20); }

/* Plan badges */
.plan-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.plan-pill.basico    { background: rgba(85,164,84,0.10);  color: #2e7d32; border: 1px solid rgba(85,164,84,0.25); }
.plan-pill.pro       { background: rgba(0,27,54,0.08);    color: var(--inst-navy); border: 1px solid rgba(0,27,54,0.2); }
.plan-pill.municipal { background: rgba(64,95,145,0.10); color: #405F91; border: 1px solid rgba(64,95,145,0.25); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROGRESS  (.progress-bar = container · .progress-fill = fill)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.progress-bar { height:5px; background:rgba(0,0,0,0.07); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; transition:width 0.6s var(--ease); }
.progress-fill.primary { background: var(--inst-navy); }
.progress-fill.success { background: var(--success); }
.progress-fill.warning { background: var(--warning); }
.progress-fill.danger  { background: var(--danger); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MODAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(6px);
  z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl); width: 100%; max-width: 540px; max-height: 92vh;
  overflow-y: auto; box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.98); transition: transform 0.22s var(--ease);
}
.overlay.open .modal { transform: translateY(0) scale(1); }
.modal-head {
  padding: 22px 24px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.1px; }
.modal-close {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.06); color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--t);
}
.modal-close:hover { background: var(--danger-dim); color: var(--danger); }
.modal-close svg { width: 14px; height: 14px; }
.modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { padding: 14px 24px 20px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--border); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOASTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  background: var(--bg-elevated); border-radius: var(--r);
  padding: 12px 16px; display: flex; align-items: center; gap: 11px;
  max-width: 320px; box-shadow: var(--shadow-lg);
  pointer-events: all; animation: toastIn 0.3s var(--ease);
  border: 1px solid var(--border-strong);
}
@keyframes toastIn { from { transform: translateX(110%) scale(0.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
.toast.out { animation: toastOut 0.25s var(--ease) forwards; }
@keyframes toastOut { to { transform: translateX(110%) scale(0.95); opacity: 0; } }
.toast svg { width: 17px; height: 17px; flex-shrink: 0; }
.toast-body { flex: 1; }
.toast-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.toast-desc  { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.toast.success { border-left: 2.5px solid var(--success); }
.toast.error   { border-left: 2.5px solid var(--danger); }
.toast.warning { border-left: 2.5px solid var(--warning); }
.toast.info    { border-left: 2.5px solid var(--info); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPINNER / SKELETON
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--spinner-track);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton {
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
  background-size: 200% 100%; animation: shimmer 1.6s infinite; border-radius: 5px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NOTIFICATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.notif-wrap { position: relative; }
.notif-trigger {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.04); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; color: var(--text-secondary);
  transition: all var(--t); position: relative;
}
.notif-trigger:hover { border-color: var(--border-hover); color: var(--text-primary); }
.notif-trigger svg { width: 16px; height: 16px; }
.notif-pip {
  position: absolute; top: -3px; right: -3px;
  background: var(--danger); color: white; font-size: 9px; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 336px; background: var(--bg-elevated);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); z-index: 200; display: none;
  overflow: hidden;
}
.notif-panel.open { display: block; animation: fadeDown 0.18s var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.notif-panel-head {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.notif-panel-title { font-size: 13px; font-weight: 600; }
.notif-scroll { max-height: 310px; overflow-y: auto; }
.notif-row { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--t); }
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: rgba(0,0,0,0.03); }
.notif-row.unread { border-left: 2px solid var(--primary); }
.notif-msg  { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.notif-time { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.notif-empty { padding: 32px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FILTER BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CHART
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.chart-wrap { position: relative; height: 210px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RANKING
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.rank-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.rank-row:last-child { border-bottom: none; }
.rank-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: rgba(0,0,0,0.06); color: var(--text-muted);
}
.rank-num.gold   { background: rgba(245,158,11,0.15); color: var(--warning); }
.rank-num.silver { background: rgba(148,163,184,0.12); color: var(--text-secondary); }
.rank-num.bronze { background: rgba(234,88,12,0.12); color: #FB923C; }
.rank-name { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.rank-bar-wrap { width: 90px; }
.rank-pct { font-size: 13.5px; font-weight: 700; min-width: 38px; text-align: right; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RISK LIST
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.risk-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.risk-row:last-child { border-bottom: none; }
.risk-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--danger-dim); border: 1px solid var(--danger-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #F87171;
}
.risk-name  { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.risk-meta  { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.risk-info  { flex: 1; min-width: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ATTENDANCE (frequencia.html)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.steps { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.step.active { color: var(--inst-navy); }
.step.done   { color: var(--success); }
.step-dot {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.step.active .step-dot { border-color: var(--primary); background: rgba(0,23,54,0.08); color: var(--inst-navy); }
.step.done .step-dot   { border-color: var(--success); background: rgba(16,185,129,0.15); color: var(--success); }
.step-connector { width: 28px; height: 1px; background: var(--border); }

.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.att-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--bg-subtle);
  border: 1.5px solid var(--border); border-radius: var(--r);
  transition: border-color var(--t), background var(--t);
}
.att-card.ok { border-color: var(--success); background: rgba(16,185,129,0.05); }
.att-card.no { border-color: var(--danger);  background: rgba(239,68,68,0.05); }
.att-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.att-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.att-info { flex: 1; min-width: 0; }
.att-btns { display: flex; gap: 6px; flex-shrink: 0; }
.att-btn {
  width: 30px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--border); font-size: 11px; font-weight: 700;
  cursor: pointer; background: transparent; color: var(--text-muted);
  transition: all var(--t); font-family: inherit;
}
.att-btn.p:hover, .att-btn.p.on { background: var(--success-dim); border-color: var(--success); color: var(--success); }
.att-btn.a:hover, .att-btn.a.on { background: var(--danger-dim);  border-color: var(--danger);  color: var(--danger); }

.save-bar {
  position: sticky; bottom: 20px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--shadow-lg); margin-top: 20px; z-index: 10;
}
.save-stats { display: flex; gap: 24px; }
.save-stat { text-align: center; }
.save-stat-val { font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.save-stat-lbl { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PLAN PROGRESS BAR (alunos.html)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.plan-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  margin-bottom: 18px;
}
.plan-bar-info { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.plan-bar-nums { font-size: 13px; color: var(--text-muted); }
.plan-bar-nums strong { color: var(--text-primary); font-weight: 700; }
.plan-bar-prog { flex: 1; }
.plan-bar-msg { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EMPTY STATE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.empty { text-align: center; padding: 48px 20px; }
.empty-icon { margin: 0 auto 14px; width: 48px; height: 48px; border-radius: 14px; background: rgba(0,0,0,0.04); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.empty-icon svg { width: 22px; height: 22px; }
.empty-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.empty-desc  { font-size: 13px; color: var(--text-muted); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ALERT BANNER (inline errors)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.alert-err {
  display: none; padding: 10px 14px;
  background: var(--danger-dim); border: 1px solid var(--danger-border);
  border-radius: var(--r-sm); font-size: 13px; color: #F87171;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOGIN PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }

.auth-brand {
  background: #08080F;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 52px; position: relative; overflow: hidden;
}
.auth-brand::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
}
.auth-brand-top { position: relative; z-index: 1; }
.auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 56px; }
.auth-logo-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: #1E3A8A;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  border: 1px solid rgba(59,130,246,0.2);
}
.auth-logo-mark span { font-size: 22px; font-weight: 900; color: white; }
.auth-logo-name { font-size: 16px; font-weight: 700; color: white; }
.auth-logo-sub  { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.auth-headline { font-size: 30px; font-weight: 700; color: white; line-height: 1.3; margin-bottom: 16px; letter-spacing: -0.3px; }
.auth-headline em { font-style: normal; color: #93C5FD; }
.auth-desc { font-size: 15px; color: var(--text-secondary); line-height: 1.7; max-width: 380px; }

.auth-features { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.auth-feat {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--r);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
}
.auth-feat-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: rgba(29,78,216,0.12); border: 1px solid rgba(29,78,216,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-light);
}
.auth-feat-icon svg { width: 16px; height: 16px; }
.auth-feat-text { font-size: 13.5px; color: var(--text-secondary); }

.auth-brand-bot { position: relative; z-index: 1; }
.auth-brand-copy { font-size: 11px; color: var(--text-muted); }

.auth-form-panel {
  background: #ffffff; display: flex; align-items: center; justify-content: center; padding: 60px 48px;
}
.auth-form-box { width: 100%; max-width: 380px; }
.auth-form-eyebrow { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--inst-navy); margin-bottom: 10px; }
.auth-form-title  { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; margin-bottom: 6px; }
.auth-form-sub    { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; line-height: 1.5; }
.auth-form-body   { display: flex; flex-direction: column; gap: 16px; }
.auth-form-link   { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 20px; }
.auth-form-link a { color: var(--inst-navy); font-weight: 500; }
.auth-form-link a:hover { text-decoration: underline; }
.auth-copy { text-align: center; font-size: 11px; color: var(--text-dim); margin-top: 40px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UTILITIES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.flex { display: flex; }
.items-c { align-items: center; }
.justify-b { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.w-full { width: 100%; }
.text-c { text-align: center; }
.text-s { color: var(--success); }
.text-w { color: var(--warning); }
.text-d { color: var(--danger); }
.text-m { color: var(--text-muted); }
.fw-bold { font-weight: 700; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLLBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,100,100,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,100,100,0.35); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
/* ── Mobile hamburger button ── */
.mob-ham {
  display: none;
  align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background var(--t), color var(--t);
  margin-right: 4px;
}
.mob-ham:hover { background: rgba(0,0,0,.05); color: var(--text-primary); }

/* ── Mobile backdrop ── */
.mob-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.mob-backdrop.mob-open { opacity: 1; pointer-events: auto; }

@media (max-width: 768px) {
  .main-content { margin-left: 0; }

  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    display: flex;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(0.25,0.46,0.45,0.94);
    z-index: 200;
    box-shadow: none;
  }
  .sidebar.mob-open {
    transform: translateX(0);
    box-shadow: 4px 0 40px rgba(0,0,0,.65);
  }

  .mob-ham { display: flex; }

  /* Top bar */
  .top-bar { padding: 0 16px; gap: 8px; --page-px: 16px; }
  .top-bar-title { font-size: 13.5px; }
  .top-bar-subtitle { font-size: 11px; }
  .top-bar-actions { gap: 5px; }
  .top-bar-actions .btn { font-size: 11px; padding: 5px 9px; }
  .top-bar-search { display: none; }

  /* Page content */
  .page-content { padding: 14px 16px; }
  .page { padding: 16px; }
  .topbar { padding: 0 16px; --page-px: 16px; }
}

@media (max-width: 480px) {
  /* Top bar stacks: actions scroll below title */
  .top-bar {
    flex-wrap: wrap;
    height: auto; min-height: 60px;
    padding: 10px 16px;
    gap: 6px;
    align-items: flex-start;
  }
  .top-bar > div:first-child { flex: 1 1 100%; }
  .top-bar-actions {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0; flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .top-bar-actions::-webkit-scrollbar { display: none; }
  .top-bar-actions .btn-sm { white-space: nowrap; font-size: 11px; padding: 5px 9px; }
  /* Charts section stacks */
  #charts-section { grid-template-columns: 1fr !important; }
  .forecast-grid  { grid-template-columns: 1fr !important; }
  /* Modal: full-width on small screens */
  .modal-overlay { padding: 10px; }
  .modal-overlay .modal { width: 100%; max-width: 100% !important; }
  .modal-header { padding: 16px 16px 12px; }
  .modal-body   { padding: 14px 16px; }
  .modal-footer { padding: 12px 16px 14px; }
  /* Filters: full-width selects */
  .filters-bar .form-select,
  .filters-bar select { width: 100% !important; min-width: 0; }
  .filters-bar .search-box { width: 100%; }
  .filters-bar .search-box .form-input { width: 100%; }
  /* KPI rows wrap tightly */
  .hist-kpi-row > .hist-kpi { min-width: 90px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLET — 769px–1024px
   Sidebar narrows; content uses full remaining width
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: 210px; }

  .sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
  }

  /* Slightly smaller nav text so items don't truncate */
  .nav-item {
    font-size: 12.5px;
    padding: 9px 12px;
  }

  /* Hide long school name if overflows — show tooltip */
  .sdb-ctx-school { font-size: 11px; }

  /* Dashboard KPI grid: 2-col minimum on tablet */
  .inst-kpi-strip,
  .dash-kpi-row {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  /* 2-col grids become single if content is tight */
  .inst-grid-2col { gap: 14px; }

  /* Page padding reduces slightly */
  .page-content { padding: 18px 20px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE LANDSCAPE — phone rotated (height < 500px)
   Sidebar collapses automatically; top-bar compresses
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (orientation: landscape) and (max-height: 500px) {
  /* Force drawer mode even if width > 768px (wide but short phone) */
  .main-content { margin-left: 0; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 200;
    box-shadow: none;
    width: 220px;
    min-width: 220px;
  }
  .sidebar.mob-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.6);
  }
  .mob-ham { display: flex !important; }

  /* Compact top-bar */
  .top-bar { height: 48px; padding: 0 12px; gap: 6px; }
  .top-bar-title { font-size: 13px; }
  .top-bar-subtitle { display: none; }

  /* Page padding */
  .page-content { padding: 10px 14px; }

  /* KPI grid goes 2-col */
  .inst-kpi-strip,
  .dash-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 2-col dashboard grids stay 2-col but with less gap */
  .inst-grid-2col { gap: 10px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOUCH TARGETS — all interactive elements ≥ 44px on mobile
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
  /* Nav items taller for finger taps */
  .nav-item { min-height: 44px; display: flex; align-items: center; }

  /* Buttons at least 44px tall */
  .btn, button.btn, a.btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }

  /* Form inputs taller */
  .form-input, .form-select, select, input[type="text"],
  input[type="email"], input[type="password"] {
    min-height: 44px;
  }

  /* KPI strip responsive */
  .inst-kpi-strip { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* 2-col grid collapses on true mobile */
}

@media (max-width: 640px) {
  /* 2-col dashboard grids → 1-col */
  .inst-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* KPI cards → 2-col at most */
  .inst-kpi-strip,
  .dash-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Municipal builder grids */
  ._muni-fund-row,
  ._muni-mini-row {
    flex-direction: column;
    gap: 8px;
  }

  /* Auditoria drill-down modal panels stack */
  ._dm-body { flex-direction: column; }
  ._dm-panel { min-width: 0; width: 100%; }

  /* Chamada rápida card stacks buttons */
  #chamada-rapida-card > div[style*="flex"] {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MUNICIPAL SIDEBAR BADGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Logo personalizada da escola na sidebar ── */
.sidebar-school-logo {
  width: auto !important;
  max-width: 140px;
  max-height: 52px;
  height: auto !important;
  object-fit: contain;
  border-radius: 6px;
}

.sdb-powered {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.02em;
  line-height: 1;
}
.sdb-powered-img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  opacity: 0.5;
  border-radius: 3px;
}

.sdb-muni-badge {
  display: inline-block;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.28);
  border-radius: 20px;
  padding: 1px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPATIBILITY ALIASES
   Maps legacy HTML class names → design system classes
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Sidebar */
.sidebar-logo-icon { width:36px;height:36px;flex-shrink:0;border-radius:9px;background:var(--inst-navy-mid);border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:white;box-shadow:0 1px 3px rgba(0,0,0,0.35); }
.sidebar-logo-img { width:36px;height:36px;flex-shrink:0;border-radius:9px;object-fit:contain; }
.sidebar-logo-tagline { font-size:10px;color:var(--text-muted);font-weight:400;margin-top:1px;letter-spacing:0.3px; }
.sidebar-user-role { font-size:11px;color:var(--text-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.btn-logout { width:28px;height:28px;border-radius:var(--r-sm);border:none;background:transparent;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--t);flex-shrink:0; }
.btn-logout:hover { background:var(--danger-dim);color:var(--danger); }

/* Navigation */
.nav-section-label { font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--inst-on-navy-faint);padding:14px 8px 6px; }
.nav-item { display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;color:var(--inst-on-navy-dim);font-size:13px;font-weight:500;transition:color var(--t) var(--ease), background var(--t) var(--ease);position:relative;cursor:pointer;border:none;background:none;width:100%;text-align:left;text-decoration:none;line-height:1.3; }
.nav-item:hover { color:var(--text-secondary);background:rgba(0,0,0,0.04); }
.nav-item.active { color:var(--inst-navy);background:rgba(0,27,54,0.07); font-weight:600; }
.nav-item.active::before { content:'';position:absolute;left:0;top:5px;bottom:5px;width:2px;border-radius:0 2px 2px 0;background:var(--inst-navy); }
.nav-icon { font-size:15px;opacity:0.7; }
.nav-item.active .nav-icon { opacity:1; }

/* Top bar */
.top-bar { position:sticky;top:0;z-index:50;background:var(--topbar-bg);border-bottom:1px solid var(--border);padding:0 var(--page-px);height:var(--topbar-h,60px);display:flex;align-items:center;justify-content:space-between;gap:20px; }
.top-bar-title { font-size:14.5px;font-weight:600;letter-spacing:-0.1px;color:var(--text-primary); }
.top-bar-subtitle { font-size:11px;color:var(--text-muted);margin-top:1px; }
.top-bar-actions { display:flex;align-items:center;gap:8px; }

/* Page content */
.page-content { padding:24px var(--page-px);flex:1; }

/* ── Metric / KPI cards — design reference ───────────────────────────────── */
.metric-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:20px 22px;
  position:relative;
  transition:box-shadow var(--t), transform var(--t);
  box-shadow:0 1px 4px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.04);
}
.metric-card:hover {
  box-shadow:0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  transform:translateY(-2px);
}
.metric-header {
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:12px;
}
.metric-label { font-size:13px;font-weight:500;color:var(--text-secondary);line-height:1.4; }
.metric-icon {
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.metric-icon svg { width:22px;height:22px;stroke:white;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.metric-icon.primary { background:#1a56db; }
.metric-icon.success { background:#0e9f6e; }
.metric-icon.warning { background:#d97706; }
.metric-icon.danger  { background:#e02424; }
.metric-icon.info    { background:#0694a2; }
.metric-icon.purple  { background:#7c3aed; }
.metric-icon.teal    { background:#0694a2; }
.metric-value {
  font-size:32px;font-weight:700;color:var(--text-primary);
  line-height:1;letter-spacing:-1px;margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.metric-footer { font-size:12px;color:var(--text-muted); }
.metric-trend {
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:500;margin-top:8px;
}
.metric-trend.up   { color:#0e9f6e; }
.metric-trend.down { color:#e02424; }
.metric-trend.flat { color:var(--text-muted); }
.metric-trend-arrow { font-size:14px;line-height:1; }

/* ── Dashboard panels: pendências + comunicados ──────────────────────────── */
.dash-panel {
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden;
}
.dash-panel-hd {
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 12px;border-bottom:1px solid var(--border);
}
.dash-panel-title { font-size:14px;font-weight:600;color:var(--text-primary); }
.dash-panel-link  { font-size:12px;color:var(--primary);font-weight:500;text-decoration:none; }
.dash-panel-link:hover { text-decoration:underline; }
.dash-panel-item {
  display:flex;align-items:center;gap:12px;
  padding:11px 20px;border-bottom:1px solid var(--border);
  transition:background var(--t);cursor:pointer;text-decoration:none;
}
.dash-panel-item:last-child { border-bottom:none; }
.dash-panel-item:hover { background:var(--bg-subtle); }
.dash-pi-icon {
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.dash-pi-icon.red    { background:rgba(224,36,36,0.10);  color:#e02424; }
.dash-pi-icon.yellow { background:rgba(217,119,6,0.10);  color:#d97706; }
.dash-pi-icon.blue   { background:rgba(26,86,219,0.10);  color:#1a56db; }
.dash-pi-icon.green  { background:rgba(14,159,110,0.10); color:#0e9f6e; }
.dash-pi-icon.gray   { background:rgba(116,119,128,0.10);color:var(--text-muted); }
.dash-pi-body   { flex:1;min-width:0; }
.dash-pi-title  { font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.dash-pi-sub    { font-size:11.5px;color:var(--text-muted);margin-top:1px; }
.dash-pi-arrow  { color:var(--text-muted);font-size:14px;flex-shrink:0; }

/* ── Comunicado item ─────────────────────────────────────────────────────── */
.dash-com-icon { width:32px;height:32px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.dash-com-icon.blue   { background:rgba(26,86,219,0.10); }
.dash-com-icon.green  { background:rgba(14,159,110,0.10); }
.dash-com-icon.yellow { background:rgba(217,119,6,0.10); }
.dash-com-date { font-size:11px;color:var(--text-muted); }
.dash-com-title { font-size:13px;font-weight:500;color:var(--text-primary); }
.dash-com-sub   { font-size:11.5px;color:var(--text-muted);margin-top:1px; }
@media(max-width:960px) { .overview-panels-row { grid-template-columns:1fr!important; } }
@media(max-width:640px) { .overview-panels-row { display:flex!important;flex-direction:column; } }

/* Card subtitle */
.card-subtitle { font-size:12px;color:var(--text-muted);margin-top:2px; }

/* Table */
.table-container { overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg); }
.table { width:100%;border-collapse:collapse;font-size:13.5px; }
.table thead th { padding:11px 16px;text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.7px;color:var(--text-muted);border-bottom:1px solid var(--border);background:rgba(0,0,0,0.02);white-space:nowrap; }
.table tbody td { padding:13px 16px;color:var(--text-secondary);border-bottom:1px solid var(--border);vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr { transition:background var(--t); }
.table tbody tr:hover td { background:rgba(0,0,0,0.025); }
.cell-name { font-weight:600;color:var(--text-primary); }
.cell-muted { color:var(--text-muted);font-size:12.5px; }

/* Filters */
.filters-bar { display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px; }
.search-box { position:relative;display:flex;align-items:center; }
/* Search icon: emoji substituído por ícone SVG via CSS mask — nenhum HTML alterado */
.search-icon {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  font-size:0;        /* esconde o caractere emoji */
  pointer-events:none; z-index:1;
  width:15px; height:15px; flex-shrink:0;
  background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.search-box .form-input { padding-left:34px; }

/* Forms */
.form-group { display:flex;flex-direction:column;gap:6px; }
.form-label { font-size:12.5px;font-weight:500;color:var(--text-secondary); }
.req { color:var(--danger);margin-left:2px; }
.form-input { width:100%;height:38px;padding:0 13px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-primary);font-size:13.5px;font-family:inherit;transition:border-color var(--t),box-shadow var(--t);outline:none; }
.form-input::placeholder { color:var(--text-dim); }
.form-input:hover { border-color:var(--border-hover); }
.form-input:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,23,54,0.12); }
.form-select { width:100%;height:38px;padding:0 36px 0 13px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-primary);font-size:13.5px;font-family:inherit;transition:border-color var(--t);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23747780' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px; }
.form-select:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,23,54,0.12); }
.form-select option { background:var(--bg-elevated); }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.form-full { grid-column:1/-1; }
.form-hint { font-size:11.5px;color:var(--text-muted); }
.form-optgroup { font-size:11px;color:var(--text-muted); }

/* Loading spinner */
.loading-spinner { display:inline-block;width:20px;height:20px;border:2px solid var(--spinner-track);border-top-color:var(--primary);border-radius:50%;animation:spin 0.6s linear infinite; }

/* Modal */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity 0.2s; }
.modal-overlay.active { opacity:1;pointer-events:all; }
.modal-overlay.active .modal { transform:translateY(0) scale(1); }
.modal-header { padding:22px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.modal-footer { padding:14px 24px 20px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--border); }

/* Plan badges */
.plan-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600; }
.plan-badge.basico    { background:rgba(85,164,84,0.10);  color:#2e7d32; border:1px solid rgba(85,164,84,0.25); }
.plan-badge.pro       { background:rgba(0,27,54,0.08);   color:var(--inst-navy); border:1px solid rgba(0,27,54,0.2); }
.plan-badge.municipal { background:rgba(64,95,145,0.10); color:var(--inst-navy); border:1px solid rgba(64,95,145,0.25); }


/* Badge dot */
.badge-dot { width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;display:inline-block; }

/* Empty state */
.empty-state { text-align:center;padding:48px 20px; }
.empty-icon { margin:0 auto 14px;font-size:0; }
.empty-title { font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:6px; }
.empty-msg { font-size:13px;color:var(--text-muted); }

/* Steps */
.steps-header { display:flex;align-items:center;gap:8px;margin-bottom:24px;flex-wrap:wrap; }
.step-item { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text-muted); }
.step-item.active { color:var(--inst-navy); }
.step-item.done   { color:var(--success); }
.step-num { width:24px;height:24px;border-radius:50%;border:2px solid var(--border-hover);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0; }
.step-item.active .step-num { border-color:var(--primary);background:rgba(0,23,54,0.08);color:var(--inst-navy); }
.step-item.done   .step-num { border-color:var(--success);background:rgba(16,185,129,0.15);color:var(--success); }

/* Attendance */
.attendance-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px; }
.attendance-card { display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-subtle);border:1.5px solid var(--border);border-radius:var(--r);transition:border-color var(--t),background var(--t); }
.attendance-card.presente { border-color:var(--success);background:rgba(16,185,129,0.05); }
.attendance-card.ausente  { border-color:var(--danger);background:rgba(239,68,68,0.05); }
.att-student-name { font-size:13.5px;font-weight:600;color:var(--text-primary); }
.att-student-info { font-size:11px;color:var(--text-muted);margin-top:1px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE LOADING OVERLAY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#app-page-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
#app-page-overlay.ov-in  { opacity: 1; pointer-events: all; }
#app-page-overlay.ov-out { opacity: 0; pointer-events: none; }

.ov-ring {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--spinner-track);
  border-top-color: var(--primary);
  animation: spin 0.7s linear infinite;
}
.ov-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTON LOADING STATE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-spin-sm {
  display: inline-block;
  width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.btn.is-loading { opacity: 0.75; cursor: not-allowed; pointer-events: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ERROR BANNER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.app-err-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 20px;
  background: var(--danger-dim);
  border-bottom: 1px solid var(--danger-border);
  font-size: 13px; color: #F87171;
  animation: slideDown 0.2s var(--ease);
}
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.app-err-content { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.app-err-icon { flex-shrink: 0; }
.app-err-msg { color: rgba(248,113,113,0.8); }
.app-err-close {
  background: transparent; border: none; color: #F87171; cursor: pointer;
  font-size: 14px; padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
  transition: background var(--t);
}
.app-err-close:hover { background: rgba(239,68,68,0.12); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TREND INDICATORS (relatórios)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; padding: 2px 8px;
  border-radius: 20px; white-space: nowrap;
}
.trend-up     { background: rgba(74,222,128,0.1);  color: #4ADE80; border: 1px solid rgba(74,222,128,0.2); }
.trend-down   { background: rgba(248,113,113,0.1); color: #F87171; border: 1px solid rgba(248,113,113,0.2); }
.trend-stable { background: rgba(82,82,91,0.15);   color: #71717A; border: 1px solid rgba(82,82,91,0.3); }
.trend-nodata { background: transparent;            color: var(--text-dim); border: none; font-weight: 400; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE CONTENT ENTER ANIMATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-content { animation: pageFadeIn 0.18s var(--ease) both; }
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.att-toggle { display:flex;gap:6px;flex-shrink:0; }
.toggle-btn { width:30px;height:28px;border-radius:var(--r-sm);border:1px solid var(--border);font-size:11px;font-weight:700;cursor:pointer;background:transparent;color:var(--text-muted);transition:all var(--t);font-family:inherit; }
.toggle-btn.p-btn:hover,.toggle-btn.p-btn.active { background:var(--success-dim);border-color:var(--success);color:var(--success); }
.toggle-btn.a-btn:hover,.toggle-btn.a-btn.active { background:var(--danger-dim);border-color:var(--danger);color:var(--danger); }

/* Save bar stats */
.save-bar-stats { display:flex;gap:24px; }
.save-stat-value { font-size:22px;font-weight:700;line-height:1;letter-spacing:-0.3px;font-variant-numeric:tabular-nums; }
.save-stat-label { font-size:10.5px;color:var(--text-muted);margin-top:3px;text-transform:uppercase;letter-spacing:0.5px; }

/* Rankings */
.ranking-item { display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border); }
.ranking-item:last-child { border-bottom:none; }
.ranking-pos { width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:rgba(0,0,0,0.06);color:var(--text-muted); }
.ranking-pos.gold   { background:rgba(245,158,11,0.15);color:var(--warning); }
.ranking-pos.silver { background:rgba(148,163,184,0.12);color:var(--text-secondary); }
.ranking-pos.bronze { background:rgba(234,88,12,0.12);color:#FB923C; }
.ranking-name { flex:1;font-size:13.5px;font-weight:500;color:var(--text-primary); }
.ranking-bar-wrap { width:90px; }
.ranking-pct { font-size:13.5px;font-weight:700;min-width:38px;text-align:right; }

/* Notifications */
.notif-wrapper { position:relative; }
.notif-btn { width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.04);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;color:var(--text-secondary);transition:all var(--t);position:relative;font-size:16px; }
.notif-btn:hover { border-color:var(--border-hover);color:var(--text-primary); }
.notif-badge-dot { position:absolute;top:-3px;right:-3px;background:#EF4444;color:white;font-size:9px;font-weight:800;min-width:16px;height:16px;border-radius:8px;padding:0 4px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);transition:transform .2s; }
.notif-badge-dot.pulse { animation:notif-pulse 2s ease-in-out infinite; }
@keyframes notif-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.5); }
  50%      { box-shadow:0 0 0 5px rgba(239,68,68,.0); }
}
.notif-dropdown { position:absolute;top:calc(100% + 10px);right:0;width:min(336px, calc(100vw - 24px));background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:200;display:none;overflow:hidden; }
.notif-dropdown.active { display:block;animation:fadeDown 0.18s var(--ease); }
.notif-dropdown-header { padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.notif-dropdown-title { font-size:13px;font-weight:600; }
.notif-list { max-height:310px;overflow-y:auto; }
.notif-item { padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--t); }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:rgba(0,0,0,0.03); }
.notif-item.unread { border-left:2px solid var(--primary); }
.notif-item-msg  { font-size:12.5px;color:var(--text-secondary);line-height:1.5; }
.notif-item-time { font-size:11px;color:var(--text-muted);margin-top:3px; }
.notif-empty { padding:32px;text-align:center;color:var(--text-muted);font-size:13px; }

/* Buttons compat */
.btn-secondary { background:rgba(0,0,0,0.05);color:var(--text-secondary);border:1px solid var(--border); }
.btn-secondary:hover { background:rgba(0,0,0,0.08);border-color:var(--border-hover);color:var(--text-primary); }
.btn-outline { background:transparent;color:var(--text-secondary);border:1px solid var(--border); }
.btn-outline:hover { background:rgba(0,0,0,0.04);border-color:var(--border-hover);color:var(--text-primary); }

/* Text color aliases */
.text-success { color:var(--success); }
.text-warning { color:var(--warning); }
.text-danger  { color:var(--danger); }
.font-bold { font-weight:700; }

/* Chart container */
.chart-container { position:relative;height:210px; }

.toast-close { background:none;border:none;cursor:pointer;color:var(--text-dim);font-size:15px;padding:0 0 0 4px;line-height:1;flex-shrink:0;opacity:.6;transition:opacity var(--t); }
.toast-close:hover { opacity:1; }

/* Grid 2 (already in utilities but ensure it's here) */
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:16px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONFIRM DIALOG
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.confirm-overlay {
  position:fixed;inset:0;z-index:10001;
  background:rgba(0,0,0,0.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 0.15s;
}
.confirm-overlay.active { opacity:1;pointer-events:all; }
.confirm-dialog {
  background:var(--bg-card);border:1px solid var(--border-hover);
  border-radius:14px;padding:28px 28px 22px;
  min-width:300px;max-width:400px;width:90%;
  box-shadow:0 24px 56px rgba(0,0,0,0.5);
  transform:scale(0.93) translateY(10px);
  transition:transform 0.18s var(--ease),opacity 0.18s;
  opacity:0;
}
.confirm-overlay.active .confirm-dialog { transform:scale(1) translateY(0);opacity:1; }
.confirm-icon { font-size:26px;margin-bottom:10px; }
.confirm-title { font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:7px; }
.confirm-msg { font-size:13px;color:var(--text-muted);line-height:1.55;margin-bottom:22px; }
.confirm-actions { display:flex;justify-content:flex-end;gap:10px; }
.btn-danger { background:var(--danger);color:white;border:1px solid var(--danger); }
.btn-danger:hover { background:#DC2626;border-color:#DC2626; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOP BAR SCHOOL BADGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.top-school-badge {
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;
  background:var(--bg-subtle);border:1px solid var(--border);
  border-radius:20px;font-size:12px;font-weight:600;
  color:var(--text-secondary);white-space:nowrap;
}
.top-school-badge::before { content:'🏫';font-size:13px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ONBOARDING MODAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.onboarding-overlay {
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,0.65);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 0.2s;
}
.onboarding-overlay.active { opacity:1;pointer-events:all; }
.onboarding-modal {
  background:var(--bg-card);border:1px solid var(--border-hover);
  border-radius:18px;padding:36px 36px 28px;
  max-width:520px;width:92%;
  box-shadow:0 32px 72px rgba(0,0,0,0.5);
  transform:translateY(24px) scale(0.95);
  transition:transform 0.22s var(--ease),opacity 0.22s;
  opacity:0;
}
.onboarding-overlay.active .onboarding-modal { transform:translateY(0) scale(1);opacity:1; }
.onboarding-header { text-align:center;margin-bottom:28px; }
.onboarding-emoji { font-size:40px;margin-bottom:10px; }
.onboarding-title { font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:6px; }
.onboarding-subtitle { font-size:14px;color:var(--text-muted); }
/* Checklist progress bar */
.onboarding-progress-wrap { display:flex;align-items:center;gap:10px;margin-bottom:20px; }
.onboarding-progress-bar  { flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden; }
.onboarding-progress-fill { height:100%;background:linear-gradient(90deg,var(--primary),#60A5FA);border-radius:3px;transition:width .4s ease; }
.onboarding-pct { font-size:12px;font-weight:700;color:var(--primary);min-width:32px;text-align:right; }

/* Steps list */
.onboarding-steps { display:flex;flex-direction:column;gap:8px;margin-bottom:24px; }
.onboarding-step {
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;background:var(--bg-subtle);
  border:1px solid var(--border);border-radius:10px;
  cursor:pointer;transition:border-color 0.15s,background 0.15s;
}
.onboarding-step:hover:not(.done) { border-color:var(--primary);background:var(--bg-card-hover); }
.onboarding-step.done { opacity:.7;cursor:default; }
.onboarding-step.done:hover { border-color:var(--border);background:var(--bg-subtle); }
.onboarding-step-check {
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:transparent;transition:all .2s;
}
.onboarding-step.done .onboarding-step-check { background:var(--primary);border-color:var(--primary);color:#fff; }
.onboarding-step-icon  { font-size:20px;flex-shrink:0; }
.onboarding-step-body  { flex:1;min-width:0; }
.onboarding-step-title { font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:1px; }
.onboarding-step-desc  { font-size:11px;color:var(--text-muted);line-height:1.4; }
.onboarding-step-arrow { font-size:14px;color:var(--text-dim,var(--text-muted));flex-shrink:0; }

/* Close button */
.onboarding-close {
  position:absolute;top:16px;right:16px;
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--border);background:var(--bg-subtle);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;cursor:pointer;color:var(--text-muted);
  transition:background .12s,color .12s;
}
.onboarding-close:hover { background:var(--border);color:var(--text-primary); }
.onboarding-modal { position:relative; }

.onboarding-footer { text-align:center; }
.onboarding-skip {
  font-size:12px;color:var(--text-muted);cursor:pointer;
  margin-top:10px;display:inline-block;
}
.onboarding-skip:hover { color:var(--text-secondary); }

/* Role-based nav hiding */
.nav-item.nav-hidden { display: none !important; }

/* Sidebar role badge */
.sidebar-role-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 10px;
  margin-top: 2px; text-transform: uppercase;
}
.role-dev     { background: rgba(239,68,68,0.15);  color: #F87171;  border: 1px solid rgba(239,68,68,0.25); }
.role-gestao  { background: rgba(29,78,216,0.15); color: #60A5FA; border: 1px solid rgba(29,78,216,0.25); }
.role-prof    { background: rgba(16,185,129,0.15); color: #34D399; border: 1px solid rgba(16,185,129,0.25); }
.role-coord   { background: rgba(64,95,145,0.15); color: var(--inst-info); border: 1px solid rgba(64,95,145,0.25); }
.role-aluno   { background: rgba(252,211,77,0.15); color: #FCD34D; border: 1px solid rgba(252,211,77,0.25); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BODY-TYPE THEMES  (data-body-type="admin|escola|aluno")
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ADMIN — Design Institucional
   Referência: Stitch Educational · ATS · Sistemas públicos BR
   Valores: clareza · autoridade · operacional
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body[data-body-type="admin"] {
  /* ── Azul institucional (diferente do navy da escola, não é roxo) ── */
  --primary:       #1A56DB;
  --primary-dark:  #1546B8;
  --primary-light: #DBEAFE;
  --primary-glow:  rgba(26,86,219,0.14);
  --secondary:     #3B82F6;

  /* ── Superfícies: herda o tema claro do :root — sem escuro ── */
  --sidebar-bg:    #002B5B;   /* Navy institucional — igual à escola */

  /* bg-*, border-*, text-* herdados do :root (tema claro) */
  --topbar-bg: rgba(248,250,252,0.97);

  /* Spinner/skeleton — fundo claro */
  --spinner-track:  rgba(0,0,0,0.08);
  --skeleton-base:  rgba(0,0,0,0.04);
  --skeleton-shine: rgba(0,0,0,0.07);
}

/* ──────────────────────────────────────────
   SIDEBAR — navy institucional (igual à escola)
────────────────────────────────────────── */
body[data-body-type="admin"] .sidebar {
  background: #002B5B;
  border-right: 1px solid var(--inst-navy-border);
  box-shadow: none;
}
body[data-body-type="admin"] .sidebar::before,
body[data-body-type="admin"] .sidebar::after { display: none; }

body[data-body-type="admin"] .sidebar-header { padding: 20px 14px 14px; }

/* Logo — texto simples, sem gradiente */
body[data-body-type="admin"] .sidebar-logo-name {
  font-size: 13px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--inst-on-navy);
  background: none; -webkit-background-clip: unset;
  -webkit-text-fill-color: unset; background-clip: unset;
}
body[data-body-type="admin"] .sidebar-logo-tag {
  color: var(--inst-on-navy-faint); font-size: 9.5px;
}

/* Section labels */
/* ── Admin sidebar — redesign completo ─────────────────────────────────────── */
body[data-body-type="admin"] .sidebar-section-label,
body[data-body-type="admin"] .nav-section-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.8px;
  color: rgba(255,255,255,.22); padding: 18px 12px 5px;
  text-transform: uppercase; user-select: none;
}

body[data-body-type="admin"] .nav-item {
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 13px; font-weight: 500; gap: 10px;
  color: rgba(255,255,255,.55);
  transition: color .15s, background .15s;
  position: relative;
}
body[data-body-type="admin"] .nav-item:hover {
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.07);
}
body[data-body-type="admin"] .nav-item.active {
  color: #ffffff;
  background: rgba(255,255,255,.13);
  font-weight: 600;
}
body[data-body-type="admin"] .nav-item.active::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--sdb-accent, #60A5FA);
}
body[data-body-type="admin"] .nav-item .nav-svg {
  width: 17px; height: 17px; opacity: .45; flex-shrink: 0;
  transition: opacity .15s;
}
body[data-body-type="admin"] .nav-item:hover .nav-svg { opacity: .85; }
body[data-body-type="admin"] .nav-item.active .nav-svg { opacity: 1; }

/* Nav badge (alertas críticos) */
body[data-body-type="admin"] .nav-badge {
  margin-left: auto;
  background: #DC2626; color: #fff;
  font-size: 9.5px; font-weight: 700;
  padding: 1px 5px; border-radius: 10px; min-width: 18px; text-align: center;
}

/* Footer */
body[data-body-type="admin"] .sidebar-footer {
  padding: 6px 8px 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
body[data-body-type="admin"] .sdb-footer-row {
  border-radius: 8px; padding: 8px 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}
body[data-body-type="admin"] .sdb-footer-row:hover {
  background: rgba(255,255,255,.08);
}
body[data-body-type="admin"] .sdb-user-name {
  color: rgba(255,255,255,.9); font-size: 12.5px; font-weight: 600;
}
body[data-body-type="admin"] .sdb-user-role {
  color: rgba(255,255,255,.38); font-size: 10.5px;
}
body[data-body-type="admin"] .sidebar-avatar {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: 13px; font-weight: 700;
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
}
body[data-body-type="admin"] .btn-logout {
  color: rgba(255,255,255,.35);
  border-radius: 6px; padding: 5px;
  transition: background .15s, color .15s;
}
body[data-body-type="admin"] .btn-logout:hover {
  background: rgba(220,38,38,.2); color: #F87171;
}

/* ──────────────────────────────────────────
   TOPBAR — institucional, claro
────────────────────────────────────────── */
body[data-body-type="admin"] .top-bar,
body[data-body-type="admin"] .topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
}
body[data-body-type="admin"] .top-bar-title,
body[data-body-type="admin"] .topbar-title {
  font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--text-primary);
}
body[data-body-type="admin"] .top-bar-subtitle,
body[data-body-type="admin"] .topbar-sub {
  color: var(--text-muted); font-size: 11.5px;
}

/* ──────────────────────────────────────────
   CARDS E MÉTRICAS — leve, institucional
────────────────────────────────────────── */
body[data-body-type="admin"] .card,
body[data-body-type="admin"] .metric-card,
body[data-body-type="admin"] .kpi,
body[data-body-type="admin"] .sum-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.14s, box-shadow 0.14s;
}
body[data-body-type="admin"] .card:hover,
body[data-body-type="admin"] .metric-card:hover,
body[data-body-type="admin"] .kpi:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
}

/* Valores de métrica */
body[data-body-type="admin"] .kpi-value,
body[data-body-type="admin"] .metric-value {
  font-size: 30px; font-weight: 800; letter-spacing: -1px;
  color: var(--text-primary); line-height: 1;
}
body[data-body-type="admin"] .kpi-label,
body[data-body-type="admin"] .metric-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  color: var(--text-muted); text-transform: uppercase;
}
body[data-body-type="admin"] .kpi-foot,
body[data-body-type="admin"] .metric-footer { font-size: 12px; color: var(--text-muted); }

body[data-body-type="admin"] .card-title  { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
body[data-body-type="admin"] .card-sub,
body[data-body-type="admin"] .card-subtitle { color: var(--text-muted); font-size: 12px; }

/* ──────────────────────────────────────────
   TABELA — estrutura institucional
────────────────────────────────────────── */
body[data-body-type="admin"] .tbl-wrap,
body[data-body-type="admin"] .table-container,
body[data-body-type="admin"] .table-scroll {
  border: 1px solid var(--border); border-radius: 10px;
}
body[data-body-type="admin"] .tbl thead th,
body[data-body-type="admin"] .table thead th {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  padding: 10px 16px;
}
body[data-body-type="admin"] .tbl tbody td,
body[data-body-type="admin"] .table tbody td {
  border-bottom: 1px solid var(--border);
  padding: 12px 16px; color: var(--text-secondary);
}
body[data-body-type="admin"] .tbl tbody tr:last-child td,
body[data-body-type="admin"] .table tbody tr:last-child td { border-bottom: none; }
body[data-body-type="admin"] .tbl tbody tr:hover td,
body[data-body-type="admin"] .table tbody tr:hover td { background: var(--bg-subtle); }
body[data-body-type="admin"] .td-name,
body[data-body-type="admin"] .cell-name { color: var(--text-primary); font-weight: 600; }
body[data-body-type="admin"] .td-dim,
body[data-body-type="admin"] .cell-muted { color: var(--text-muted); font-size: 12px; }

/* ──────────────────────────────────────────
   BOTÕES — azul institucional
────────────────────────────────────────── */
body[data-body-type="admin"] .btn-primary {
  background: var(--primary);
  border: none; color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  font-weight: 600;
}
body[data-body-type="admin"] .btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 3px 10px rgba(26,86,219,0.25);
}
body[data-body-type="admin"] .btn-ghost {
  border-color: var(--border-hover); color: var(--text-secondary);
}
body[data-body-type="admin"] .btn-ghost:hover {
  background: var(--bg-subtle); border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ──────────────────────────────────────────
   INPUTS — fundo branco, borda institucional
────────────────────────────────────────── */
body[data-body-type="admin"] .form-input:focus,
body[data-body-type="admin"] .form-select:focus,
body[data-body-type="admin"] .field-input:focus,
body[data-body-type="admin"] .input:focus,
body[data-body-type="admin"] .select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ──────────────────────────────────────────
   SPINNERS / LOADERS
────────────────────────────────────────── */
body[data-body-type="admin"] .ov-ring,
body[data-body-type="admin"] .saving-ring,
body[data-body-type="admin"] .loading-spinner,
body[data-body-type="admin"] .spinner {
  border-color: rgba(26,86,219,0.14); border-top-color: var(--primary);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   USER THEMES  (dim · light)
   Token overrides via html[data-theme="x"]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── DIM (slate/navy — softer dark) ─────────────────────── */
html[data-theme="dim"] {
  --bg:            #0F172A;
  --bg-subtle:     #111827;
  --bg-card:       #1E293B;
  --bg-card-hover: #263347;
  --bg-elevated:   #1E293B;
  --bg-input:      #0D1526;
  --sidebar-bg:    #0B1221;
  --border:        rgba(148,163,184,.1);
  --border-hover:  rgba(148,163,184,.16);
  --border-strong: rgba(148,163,184,.2);
  --text-primary:  #F1F5F9;
  --text-secondary:#94A3B8;
  --text-muted:    #475569;
  --text-dim:      #334155;
  --topbar-bg:     rgba(15,23,42,.9);
}
html[data-theme="dim"] body[data-body-type="admin"] {
  --bg:            #0A0A1A;
  --bg-subtle:     #0D0D22;
  --bg-card:       #13132A;
  --bg-card-hover: #181832;
  --bg-elevated:   #181832;
  --bg-input:      #0A0A18;
  --sidebar-bg:    #080818;
  --topbar-bg:     rgba(10,10,26,.9);
}

/* ── LIGHT — fundo pérola, sidebar mantida escura/colorida ── */
/*
   Filosofia: só o conteúdo fica claro.
   A sidebar permanece com a identidade escura (admin=indigo, escola=branding).
   Isso evita o visual "template genérico" de tudo branco.
*/
html[data-theme="light"] {
  --bg:            #F2F5FC;
  --bg-subtle:     #E6EAF7;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #EBEff9;
  --bg-elevated:   #EDF0F8;
  --bg-input:      #FFFFFF;
  --sidebar-bg:    #002B5B;      /* Navy sidebar stays institutional */

  /* Primary = vibrant institutional blue (buttons, links, focus) */
  --primary:       #1A56DB;
  --primary-dark:  #1342B8;
  --primary-light: #BFDBFE;
  --primary-glow:  rgba(26,86,219,0.18);

  /* Stitch surface outline */
  --border:        rgba(26,28,28,.09);   /* Stitch: outline-variant tinted */
  --border-hover:  rgba(26,28,28,.16);
  --border-strong: rgba(26,28,28,.20);
  --border-focus:  #002B5B;

  /* Stitch on-surface typography */
  --text-primary:  #1A1C1C;      /* Stitch: on-surface */
  --text-secondary:#43474F;      /* Stitch: on-surface-variant */
  --text-muted:    #747780;      /* Stitch: outline */
  --text-dim:      #C4C6D0;      /* Stitch: outline-variant */

  /* Elevation / depth — soft ambient (Stitch Level 1) */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02);
  --shadow:        0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  --shadow-lg:     0 4px 16px rgba(0,0,0,0.08), 0 12px 24px rgba(0,0,0,0.05);

  /* Card shadow — Stitch: "Level 1" */
  --inst-card-shadow:    0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  --inst-card-shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);

  /* Topbar — crisp white, light border, high contrast title */
  --topbar-bg:     rgba(255,255,255,.97);
}

/* Admin light: sidebar mantém indigo escuro do body-type */
html[data-theme="light"] body[data-body-type="admin"] {
  --bg:            #F0F1F8;
  --bg-subtle:     #E8EAF4;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F8F8FF;
  --bg-elevated:   #FFFFFF;
  --bg-input:      #FFFFFF;
  /* --sidebar-bg NÃO sobrescrito → herda do body[data-body-type="admin"] = #06060F */
  --border:        rgba(29,78,216,.11);
  --border-hover:  rgba(29,78,216,.19);
  --border-strong: rgba(29,78,216,.19);
  --text-primary:  #0F172A;
  --text-secondary:#1E293B;
  --text-muted:    #64748B;
  --text-dim:      #94A3B8;
  --topbar-bg:     rgba(240,241,248,.94);
}

/* ── Superfícies hardcoded → versão Stitch clara ─────────── */
html[data-theme="light"] .tbl thead th,
html[data-theme="light"] .table thead th           { background: rgba(0,43,91,.025); color: #747780; }
html[data-theme="light"] .tbl tbody tr:hover td,
html[data-theme="light"] .table tbody tr:hover td  { background: rgba(0,43,91,.025); }
html[data-theme="light"] .btn-secondary            { background: rgba(26,28,28,.06); color: var(--text-secondary); border-color: var(--border); }
html[data-theme="light"] .btn-secondary:hover      { background: rgba(26,28,28,.10); }
html[data-theme="light"] .btn-outline              { border-color: rgba(26,28,28,.18); color: var(--text-secondary); }
html[data-theme="light"] .btn-outline:hover        { background: rgba(0,43,91,.05); color: #002B5B; border-color: rgba(0,43,91,.25); }
html[data-theme="light"] .btn-sm.btn-outline       { border-color: rgba(26,28,28,.16); }
html[data-theme="light"] .icon-btn                 { background: rgba(26,28,28,.05); border-color: var(--border); color: var(--text-secondary); }
html[data-theme="light"] .icon-btn:hover           { background: rgba(26,28,28,.09); color: var(--text-primary); }
html[data-theme="light"] .spinner,
html[data-theme="light"] .loading-spinner          { border-color: rgba(26,28,28,.1); border-top-color: var(--primary); }
html[data-theme="light"] .skeleton                 { background: linear-gradient(90deg,rgba(26,28,28,.05) 25%,rgba(26,28,28,.09) 50%,rgba(26,28,28,.05) 75%); background-size:200% 100%; }
html[data-theme="light"] .modal-close             { background: rgba(15,23,42,.07); }
html[data-theme="light"] .empty-icon              { background: rgba(15,23,42,.05); }
html[data-theme="light"] .rank-num,
html[data-theme="light"] .ranking-pos             { background: rgba(15,23,42,.06); }
html[data-theme="light"] .notif-btn,
html[data-theme="light"] .notif-trigger           { background: rgba(15,23,42,.05); border-color: var(--border); }
html[data-theme="light"] ::-webkit-scrollbar-thumb       { background: rgba(15,23,42,.13); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.22); }

/* ── Textos de conteúdo — alta nitidez ───────────────────── */
html[data-theme="light"] .tbl tbody td,
html[data-theme="light"] .table tbody td           { color: #334155; }
html[data-theme="light"] .td-name,
html[data-theme="light"] .cell-name                { color: #0F172A; font-weight: 600; }
html[data-theme="light"] .td-dim,
html[data-theme="light"] .cell-muted               { color: #64748B; font-size: 12px; }
html[data-theme="light"] .topbar-title,
html[data-theme="light"] .top-bar-title            { color: #0F172A; font-weight: 700; }
html[data-theme="light"] .topbar-sub,
html[data-theme="light"] .top-bar-subtitle         { color: #64748B; }
html[data-theme="light"] .card-title               { color: #0F172A; }
html[data-theme="light"] .card-sub,
html[data-theme="light"] .card-subtitle            { color: #64748B; }
html[data-theme="light"] .section-title            { color: #475569; }
/* Cards com sombra real (não flat) */
html[data-theme="light"] .card,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .kpi                      { box-shadow: 0 1px 3px rgba(15,23,42,.07), 0 4px 16px rgba(15,23,42,.05); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ADMIN LIGHT — FIX GLOBAL: dark-palette hardcoded colors
   Todas as páginas admin usam #DDDDF0 / #B0B4D0 / #EDEDFF /
   rgba(180,184,220,...) que ficam invisíveis em fundo claro.
   Este bloco corrige TODOS de uma vez, sem tocar nas páginas.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Toda célula de tabela em admin light → texto legível */
html[data-theme="light"] body[data-body-type="admin"] td { color: #374151; }
html[data-theme="light"] body[data-body-type="admin"] th { color: rgba(29,78,216,.55); background: rgba(29,78,216,.03); }

/* Nomes de escola / entidades → máxima nitidez */
html[data-theme="light"] body[data-body-type="admin"] .school-name,
html[data-theme="light"] body[data-body-type="admin"] .esc-nome,
html[data-theme="light"] body[data-body-type="admin"] .drawer-title,
html[data-theme="light"] body[data-body-type="admin"] .hist-nome,
html[data-theme="light"] body[data-body-type="admin"] .sp-nome { color: #0F172A; }

/* IDs, subtítulos, datas → medium gray legível */
html[data-theme="light"] body[data-body-type="admin"] .school-id,
html[data-theme="light"] body[data-body-type="admin"] .esc-id,
html[data-theme="light"] body[data-body-type="admin"] .drawer-sub,
html[data-theme="light"] body[data-body-type="admin"] .drawer-kv-k,
html[data-theme="light"] body[data-body-type="admin"] .td-date,
html[data-theme="light"] body[data-body-type="admin"] .act-meta,
html[data-theme="light"] body[data-body-type="admin"] .act-time { color: #64748B; }

/* Valores / métricas → texto principal escuro */
html[data-theme="light"] body[data-body-type="admin"] .sum-value,
html[data-theme="light"] body[data-body-type="admin"] .sc-val,
html[data-theme="light"] body[data-body-type="admin"] .fin-metric-value,
html[data-theme="light"] body[data-body-type="admin"] .as-val,
html[data-theme="light"] body[data-body-type="admin"] .drawer-kv-v,
html[data-theme="light"] body[data-body-type="admin"] .kv-v { color: #0F172A; }

/* Labels uppercase (tipo "TOTAL", "STATUS") → indigo medium */
html[data-theme="light"] body[data-body-type="admin"] .sum-label,
html[data-theme="light"] body[data-body-type="admin"] .sc-label,
html[data-theme="light"] body[data-body-type="admin"] .fin-metric-label,
html[data-theme="light"] body[data-body-type="admin"] .as-label,
html[data-theme="light"] body[data-body-type="admin"] .admin-metric-label { color: rgba(29,78,216,.55); }

/* Subtextos fracos (rgba(180,184,...) / rgba(99,102,...,.3-.4)) → legível */
html[data-theme="light"] body[data-body-type="admin"] .sum-sub,
html[data-theme="light"] body[data-body-type="admin"] .sc-sub,
html[data-theme="light"] body[data-body-type="admin"] .fin-metric-sub,
html[data-theme="light"] body[data-body-type="admin"] .as-sub,
html[data-theme="light"] body[data-body-type="admin"] .admin-metric-sub { color: #64748B; }

/* Títulos de seção hardcoded escuros → texto primário claro */
html[data-theme="light"] body[data-body-type="admin"] .section-title,
html[data-theme="light"] body[data-body-type="admin"] .section-sub { color: #475569; }

/* Texto geral de cards e listas → readable */
html[data-theme="light"] body[data-body-type="admin"] .act-label,
html[data-theme="light"] body[data-body-type="admin"] .hs-name,
html[data-theme="light"] body[data-body-type="admin"] .sp-assunto,
html[data-theme="light"] body[data-body-type="admin"] .hist-esc { color: #0F172A; }

/* Tbody rows hovering admin-light → sutil, não desaparecer */
html[data-theme="light"] body[data-body-type="admin"] tbody tr:hover td { background: rgba(29,78,216,.04); }

/* thead dark bg → branco puro */
html[data-theme="light"] body[data-body-type="admin"] thead tr { background: rgba(248,249,255,1); border-bottom: 1px solid rgba(29,78,216,.1); }

/* ── Sidebar — Institutional Navy on light theme ─────────────
   Sidebar is #002B5B (Stitch primary-container) in all modes.
   On-navy text system handles all items inside .sidebar.
   Only nav-item active background needs a theme-level override.
   ─────────────────────────────────────────────────────────── */
html[data-theme="light"] .sidebar                  { background: var(--sidebar-bg); border-right-color: var(--inst-navy-border); }
html[data-theme="light"] .nav-item                 { color: var(--inst-on-navy-dim); }
html[data-theme="light"] .nav-item:hover           { color: var(--inst-on-navy);  background: var(--inst-navy-hover); }
html[data-theme="light"] .nav-item.active          { color: #FFFFFF;              background: var(--inst-navy-highlight); font-weight: 600; }
html[data-theme="light"] .nav-item .nav-svg        { opacity: .55; }
html[data-theme="light"] .nav-item:hover .nav-svg  { opacity: .85; }
html[data-theme="light"] .nav-item.active .nav-svg { opacity: 1; }
html[data-theme="light"] .sidebar-section-label,
html[data-theme="light"] .nav-section-label        { color: var(--inst-on-navy-faint); }
html[data-theme="light"] .sidebar-logo-name        { color: var(--inst-on-navy); }
html[data-theme="light"] .sidebar-logo-tag,
html[data-theme="light"] .sidebar-logo-tagline     { color: var(--inst-on-navy-dim); }
html[data-theme="light"] .sidebar-user-email       { color: var(--inst-on-navy-dim); }
html[data-theme="light"] .sidebar-user             { background: rgba(255,255,255,.04); border-color: var(--inst-navy-border); }
html[data-theme="light"] .sidebar-user:hover       { background: var(--inst-navy-hover); }
html[data-theme="light"] .sidebar-avatar           { background: var(--inst-navy-mid); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.9); }
html[data-theme="light"] .btn-logout               { color: var(--inst-on-navy-dim); }
html[data-theme="light"] .btn-logout:hover         { background: rgba(186,26,26,.2); color: #F87171; }
html[data-theme="light"] ._tp-label                { color: var(--inst-on-navy-faint); }

/* ── Inputs & selects — light mode contrast ──────────────── */
/*
 * FIX CRÍTICO: As regras base de .form-input e .input usam
 * border: rgba(255,255,255,0.09) — borda branca quase invisível
 * em fundo claro. Estas regras sobrescrevem com borda visível.
 */
html[data-theme="light"] .input,
html[data-theme="light"] .select {
  border-color: rgba(26,28,28,.18);
  color: var(--text-primary);
  background: #FFFFFF;
}
html[data-theme="light"] .input::placeholder { color: #A0A3AD; }
html[data-theme="light"] .input:hover,
html[data-theme="light"] .select:hover       { border-color: rgba(26,28,28,.30); }
html[data-theme="light"] .input:focus,
html[data-theme="light"] .select:focus       { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,43,91,.10); }

/* form-input / form-select (usados em modais como Novo Aluno) */
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select {
  background: #FFFFFF;
  border: 1.5px solid rgba(26,28,28,.18);
  color: #1A1C1C;
}
html[data-theme="light"] .form-input::placeholder { color: #A0A3AD; }
html[data-theme="light"] .form-input:hover        { border-color: rgba(26,28,28,.30); }
html[data-theme="light"] .form-input:focus        {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,43,91,.12);
}
html[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23747780' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
html[data-theme="light"] .form-label { color: #43474F; }
html[data-theme="light"] .form-hint  { color: #747780; }

/* Textarea em light */
html[data-theme="light"] textarea.form-input,
html[data-theme="light"] textarea.input {
  background: #FFFFFF;
  border: 1.5px solid rgba(26,28,28,.18);
  color: #1A1C1C;
  resize: vertical;
}

/* notas.html / ferramentas.html — grade-input e notas-select */
html[data-theme="light"] .grade-input,
html[data-theme="light"] .notas-select {
  background: #FFFFFF;
  border-color: rgba(26,28,28,.18);
  color: #1A1C1C;
}
html[data-theme="light"] .grade-input:focus,
html[data-theme="light"] .notas-select:focus { border-color: var(--primary); }

/* ── Modal em light mode — fundo branco, borda visível ──── */
html[data-theme="light"] .modal {
  background: #FFFFFF;
  border-color: rgba(26,28,28,.12);
}
html[data-theme="light"] .modal-header { border-bottom-color: rgba(26,28,28,.08); }
html[data-theme="light"] .modal-footer { border-top-color:    rgba(26,28,28,.08); }
html[data-theme="light"] .modal-title  { color: #0F172A; }
html[data-theme="light"] .modal-close  { background: rgba(26,28,28,.06); color: #43474F; }
html[data-theme="light"] .modal-close:hover { background: rgba(186,26,26,.08); color: #BA1A1A; }
html[data-theme="light"] .modal-overlay { background: rgba(15,23,42,.55); }

/* form-grid gap um pouco maior para respirar */
html[data-theme="light"] .form-grid { gap: 16px; }

/* select dropdown — opção legível */
html[data-theme="light"] .form-select option,
html[data-theme="light"] .select option { background: #FFFFFF; color: #1A1C1C; }

html[data-theme="light"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23747780' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

/* ── Badges — accessible contrast on warm white ─────────── */
html[data-theme="light"] .badge-success  { background: rgba(85,164,84,.10);  color: #1A6B33; border-color: rgba(85,164,84,.25); }
html[data-theme="light"] .badge-warning  { background: rgba(217,119,6,.10);  color: #7C4A00; border-color: rgba(217,119,6,.25); }
html[data-theme="light"] .badge-danger   { background: rgba(186,26,26,.09);  color: #9B0007; border-color: rgba(186,26,26,.22); }
html[data-theme="light"] .badge-info     { background: rgba(64,95,145,.10);  color: #264778; border-color: rgba(64,95,145,.25); }
html[data-theme="light"] .badge-muted    { background: rgba(116,119,128,.09);color: #43474F; border-color: rgba(116,119,128,.22); }
html[data-theme="light"] .badge-primary  { background: rgba(0,43,91,.09);    color: #001736; border-color: rgba(0,43,91,.22); }
html[data-theme="light"] .badge-dark     { background: rgba(26,28,28,.09);   color: #1A1C1C; border-color: rgba(26,28,28,.22); }

/* ── Primary button — institutional navy on light ─────────── */
html[data-theme="light"] .btn-primary              { background: #002B5B; border-color: #001736; box-shadow: 0 1px 3px rgba(0,43,91,.25); }
html[data-theme="light"] .btn-primary:hover        { background: #001736; box-shadow: 0 2px 8px rgba(0,43,91,.30); }
html[data-theme="light"] .btn-ghost                { border-color: rgba(26,28,28,.18); color: var(--text-secondary); background: transparent; }
html[data-theme="light"] .btn-ghost:hover          { background: rgba(26,28,28,.05); border-color: rgba(26,28,28,.25); color: var(--text-primary); }

/* ── Metric card icons — navy tint on light ──────────────── */
html[data-theme="light"] .metric-icon.primary      { background: rgba(0,43,91,.09);  color: #002B5B; }
html[data-theme="light"] .kpi-icon.primary         { background: rgba(0,43,91,.09);  color: #002B5B; }
html[data-theme="light"] .metric-icon.success      { background: rgba(85,164,84,.10);color: #1A6B33; }
html[data-theme="light"] .kpi-icon.success         { background: rgba(85,164,84,.10);color: #1A6B33; }
html[data-theme="light"] .metric-icon.warning      { background: rgba(217,119,6,.10);color: #7C4A00; }
html[data-theme="light"] .kpi-icon.warning         { background: rgba(217,119,6,.10);color: #7C4A00; }
html[data-theme="light"] .metric-icon.danger       { background: rgba(186,26,26,.09);color: #9B0007; }
html[data-theme="light"] .kpi-icon.danger          { background: rgba(186,26,26,.09);color: #9B0007; }

/* ── Topbar — crisp white, strong title ──────────────────── */
html[data-theme="light"] .top-bar,
html[data-theme="light"] .topbar                   { border-bottom-color: rgba(26,28,28,.09); }
html[data-theme="light"] .topbar-title,
html[data-theme="light"] .top-bar-title            { color: #1A1C1C; font-weight: 700; }
html[data-theme="light"] .topbar-sub,
html[data-theme="light"] .top-bar-subtitle         { color: #747780; }

/* ── Institutional panel cards — Stitch Level 1 elevation ── */
html[data-theme="light"] .inst-panel               { box-shadow: var(--inst-card-shadow); border-color: rgba(26,28,28,.08); }
html[data-theme="light"] .inst-panel:hover         { box-shadow: var(--inst-card-shadow-md); border-color: rgba(0,43,91,.16); }

/* ── Table — clean institutional look ───────────────────── */
html[data-theme="light"] .inst-doc-table tbody tr:hover { background: rgba(0,43,91,.025); }
html[data-theme="light"] .inst-doc-table .doc-nome      { color: #1A1C1C; }
html[data-theme="light"] .inst-doc-table .doc-id        { color: #747780; }
html[data-theme="light"] .inst-doc-table .doc-turma     { color: #747780; }

/* ── Status strip (inst-mode-strip) — warm accent on light ─ */
html[data-theme="light"] .inst-mode-strip          { background: rgba(0,43,91,.04); border-color: rgba(0,43,91,.10); }
html[data-theme="light"] .inst-mode-label          { color: #002B5B; background: rgba(0,43,91,.08); border-color: rgba(0,43,91,.15); }

/* ── Progress bars on light ──────────────────────────────── */
html[data-theme="light"] .progress-bar             { background: rgba(26,28,28,.08); }
html[data-theme="light"] .progress-fill.primary    { background: var(--inst-navy); }

/* ── Admin light: sidebar já é escura pelo body-type CSS ──── */
/* Não precisa de override — body[data-body-type="admin"] .sidebar já tem */
/* o gradiente escuro indigo. O light theme não o sobrescreve. */
html[data-theme="light"] body[data-body-type="admin"] .ov-ring,
html[data-theme="light"] body[data-body-type="admin"] .spinner { border-top-color: #1A56DB; }

/* ── Command palette: dim overrides ──────────────────────── */
html[data-theme="dim"] #cp-box              { background:#1E293B; border-color:rgba(29,78,216,.2); box-shadow:0 24px 64px rgba(0,0,0,.5); }
html[data-theme="dim"] #cp-input           { color:#F1F5F9; }
html[data-theme="dim"] #cp-input-wrap      { border-bottom-color:rgba(148,163,184,.1); }
html[data-theme="dim"] #cp-badge           { background:#263347; border-color:#334155; color:#64748B; }
html[data-theme="dim"] .cp-section-label   { color:#475569; }
html[data-theme="dim"] .cp-item-label      { color:#E2E8F0; }
html[data-theme="dim"] .cp-item:hover,
html[data-theme="dim"] .cp-item.active     { background:rgba(29,78,216,.1); }
html[data-theme="dim"] .cp-footer          { border-top-color:rgba(148,163,184,.06); color:#475569; }
html[data-theme="dim"] .cp-footer kbd      { background:#263347; border-color:#334155; color:#64748B; }

/* ── Command palette: light overrides ────────────────────── */
html[data-theme="light"] #cp-overlay       { background:rgba(0,0,0,.35); }
html[data-theme="light"] #cp-box           { background:#FFFFFF; border-color:rgba(29,78,216,.2); box-shadow:0 24px 64px rgba(0,0,0,.12); }
html[data-theme="light"] #cp-input         { color:#0F172A; }
html[data-theme="light"] #cp-input-wrap    { border-bottom-color:rgba(0,0,0,.08); }
html[data-theme="light"] #cp-input::placeholder { color:#94A3B8; }
html[data-theme="light"] #cp-badge         { background:#F1F5F9; border-color:#CBD5E1; color:#94A3B8; }
html[data-theme="light"] .cp-section-label { color:#94A3B8; }
html[data-theme="light"] .cp-item-label    { color:#0F172A; }
html[data-theme="light"] .cp-item-sub      { color:#94A3B8; }
html[data-theme="light"] .cp-item-icon     { background:rgba(0,0,0,.04); }
html[data-theme="light"] .cp-item-icon svg { color:var(--primary); }
html[data-theme="light"] .cp-item:hover,
html[data-theme="light"] .cp-item.active   { background:rgba(29,78,216,.06); }
html[data-theme="light"] .cp-footer        { border-top-color:rgba(0,0,0,.06); color:#94A3B8; }
html[data-theme="light"] .cp-footer kbd    { background:#F1F5F9; border-color:#CBD5E1; color:#64748B; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   THEME PICKER  (._tp  in sidebar footer)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* sdb-footer-actions: slot inline para tema + pwa */
.sdb-footer-actions {
  display: flex; align-items: center; gap: 5px;
  flex-shrink: 0;
}

._tp {
  display: flex; align-items: center; gap: 5px;
}
._tp-btns { display:flex; gap:5px; }
._tp-btn {
  width:17px; height:17px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; padding:0; flex-shrink:0;
  transition:transform .15s, border-color .15s;
  position:relative;
}
/* As bolinhas usam cores fixas — funcionam em qualquer fundo de sidebar */
._tp-btn[data-t="dark"]  { background:#09090B; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35), 0 0 0 1px rgba(255,255,255,.08); }
._tp-btn[data-t="dim"]   { background:linear-gradient(135deg,#334155,#1E293B); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2), 0 0 0 1px rgba(255,255,255,.06); }
._tp-btn[data-t="light"] { background:#EEF0F5; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.15); }
._tp-btn.active          { border-color:#3B82F6 !important; transform:scale(1.25); box-shadow:0 0 0 3px rgba(129,140,248,.25) !important; }
._tp-btn:hover:not(.active) { border-color:rgba(129,140,248,.7) !important; transform:scale(1.15); }
._tp-btn::after {
  content:attr(title);
  position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%);
  background:var(--bg-elevated); border:1px solid var(--border);
  color:var(--text-secondary); font-size:10px;
  padding:2px 7px; border-radius:4px;
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .15s; z-index:1000;
}
._tp-btn:hover::after { opacity:1; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PWA — install chip + update banner
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
._pwa-chip {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 6px;
  color: #93C5FD;
  font-size: 11.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: background .14s, border-color .14s;
}
._pwa-chip:hover { background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.4); }
._pwa-chip svg   { flex-shrink: 0; }

._pwa-update-banner {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: var(--primary); color: #fff;
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  font-size: 13px; font-weight: 600;
  z-index: 9999; animation: fadeInUp .3s ease;
}
._pwa-update-banner button {
  padding: 5px 14px; background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 7px; color: #fff;
  font-size: 12px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: background .12s;
}
._pwa-update-banner button:hover { background: rgba(255,255,255,.28); }

body[data-body-type="admin"] .sidebar-role-badge.role-dev {
  background: rgba(29,78,216,0.15);
  color: #93C5FD;
  border-color: rgba(29,78,216,0.3);
}

/* Logo mark admin — indigo puro, sem cyan */
.sidebar-logo-mark--admin {
  background: linear-gradient(135deg, #4338CA 0%, #1A56DB 60%, #3B82F6 100%);
  box-shadow: 0 0 18px rgba(29,78,216,0.45), 0 2px 8px rgba(0,0,0,0.5);
}

.admin-logo-img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }

/* Nav SVG icon base */
.nav-svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; transition: opacity var(--t); }
.nav-item:hover .nav-svg, .nav-item.active .nav-svg { opacity: 1; }

/* Toast semantic borders */
body[data-body-type="admin"] .toast.success { border-left-color: var(--success); }
body[data-body-type="admin"] .toast.error   { border-left-color: var(--danger); }
body[data-body-type="admin"] .toast.info    { border-left-color: #1A56DB; }

/* ── ESCOLA theme — Stitch "Institutional Authority" ── */
body[data-body-type="escola"] {
  --sidebar-bg:    #002B5B;      /* Navy sidebar stays institutional */
  --primary:       #1A56DB;      /* Vibrant blue for buttons/links */
  --primary-dark:  #1342B8;
  --primary-light: #BFDBFE;
  --primary-glow:  rgba(26,86,219,0.18);
  --secondary:     #D97706;      /* Soft amber — "requires attention" */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ADMIN LIGHT — PAGE-SPECIFIC CARD BACKGROUNDS
   Covers cards/panels that use background:#0E0E1D hardcoded
   in <style> blocks of: admin.html, admin-auditoria.html,
   admin-funcionalidades.html, admin-comunicados.html.
   (Other pages already carry their own light-theme overrides.)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Card / panel backgrounds */
html[data-theme="light"] body[data-body-type="admin"] .admin-metric,
html[data-theme="light"] body[data-body-type="admin"] .forecast-card,
html[data-theme="light"] body[data-body-type="admin"] .chart-card,
html[data-theme="light"] body[data-body-type="admin"] .activity-section,
html[data-theme="light"] body[data-body-type="admin"] .pulse-item,
html[data-theme="light"] body[data-body-type="admin"] .qa-btn,
html[data-theme="light"] body[data-body-type="admin"] .platform-status,
html[data-theme="light"] body[data-body-type="admin"] .hs-section,
html[data-theme="light"] body[data-body-type="admin"] .audit-table-wrap,
html[data-theme="light"] body[data-body-type="admin"] .plan-card,
html[data-theme="light"] body[data-body-type="admin"] .flags-section,
html[data-theme="light"] body[data-body-type="admin"] .compose-card,
html[data-theme="light"] body[data-body-type="admin"] .history-card {
  background:   var(--bg-card) !important;
  border-color: var(--border)  !important;
  box-shadow:   0 1px 3px rgba(15,23,42,.06) !important;
}

/* Primary value text (was #EDEDFF / #DDDDF0 — invisible on white) */
html[data-theme="light"] body[data-body-type="admin"] .admin-metric-value,
html[data-theme="light"] body[data-body-type="admin"] .alerta-banner-title,
html[data-theme="light"] body[data-body-type="admin"] .pulse-val,
html[data-theme="light"] body[data-body-type="admin"] .qa-label { color: var(--text-primary); }

/* Secondary / muted text (was #8080A8 — too faint on white) */
html[data-theme="light"] body[data-body-type="admin"] .alerta-banner-msg,
html[data-theme="light"] body[data-body-type="admin"] .forecast-scenario,
html[data-theme="light"] body[data-body-type="admin"] .ps-label { color: var(--text-secondary); }

/* Forecast period toggle (nearly-black on dark → readable on light) */
html[data-theme="light"] body[data-body-type="admin"] .forecast-toggle {
  background: var(--bg-elevated) !important; border-color: var(--border) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .forecast-toggle-btn       { color: var(--text-secondary); }
html[data-theme="light"] body[data-body-type="admin"] .forecast-toggle-btn.active { background: rgba(29,78,216,.12); color: #4338CA; }

/* Quick-action button hover on light (was dark glow → subtle) */
html[data-theme="light"] body[data-body-type="admin"] .qa-btn:hover {
  border-color: rgba(29,78,216,.25) !important;
  box-shadow: 0 2px 12px rgba(29,78,216,.08) !important;
}

/* ── ALUNO theme ── */
/* ── Responsável theme ───────────────────────────────────────────────────────── */
body[data-body-type="responsavel"] {
  --sidebar-bg:    #1e1b4b;
  --primary:       #6366f1;
  --primary-dark:  #4338ca;
  --primary-light: #818cf8;
  --primary-glow:  rgba(99,102,241,0.25);
  --secondary:     #a5b4fc;
}
body[data-body-type="responsavel"] .sidebar {
  border-right-color: rgba(99,102,241,.18);
}
body[data-body-type="responsavel"] .nav-item.active {
  color: #818cf8;
  background: rgba(99,102,241,.12);
}
body[data-body-type="responsavel"] .nav-item.active::before {
  background: #6366f1;
}

body[data-body-type="aluno"] {
  --sidebar-bg:    #022C22;
  --primary:       #10B981;
  --primary-dark:  #065F46;
  --primary-light: #34D399;
  --primary-glow:  rgba(16,185,129,0.25);
  --secondary:     #FCD34D;
}
body[data-body-type="aluno"] .sidebar {
  border-right-color: rgba(16,185,129,0.15);
}
body[data-body-type="aluno"] .nav-item.active {
  color: #34D399;
  background: rgba(16,185,129,0.1);
}
body[data-body-type="aluno"] .nav-item.active::before {
  background: #10B981;
}
.sidebar-logo-mark--aluno {
  background: linear-gradient(135deg, #065F46 0%, #10B981 100%) !important;
  box-shadow: 0 0 20px rgba(16,185,129,0.4), 0 2px 8px rgba(0,0,0,0.4);
}

/* ── Sidebar section label (used by new buildSidebarHTML) ── */
.sidebar-section-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--text-muted);
  padding: 14px 8px 6px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MAINTENANCE BANNER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.maint-toggle-bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px;
}
.maint-toggle-bar.active-maint {
  border-color: var(--danger-border); background: var(--danger-dim);
}
.maint-toggle-label { flex: 1; font-size: 13px; font-weight: 600; }
.maint-toggle-msg   { font-size: 12px; color: var(--text-muted); }
.maint-switch {
  position: relative; width: 44px; height: 24px; flex-shrink: 0;
}
.maint-switch input { opacity: 0; width: 0; height: 0; }
.maint-switch-track {
  position: absolute; inset: 0;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer; transition: background 0.2s;
}
.maint-switch input:checked + .maint-switch-track { background: var(--danger); border-color: var(--danger); }
.maint-switch-track::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  background: white; top: 2px; left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.maint-switch input:checked + .maint-switch-track::after { transform: translateX(20px); }

/* Error banner retry button */
.app-err-retry {
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;
  background:rgba(248,113,113,0.12);border:1px solid rgba(248,113,113,0.3);
  border-radius:5px;font-size:12px;font-weight:600;
  color:#F87171;cursor:pointer;margin-left:8px;
  transition:background 0.15s;
}
.app-err-retry:hover { background:rgba(248,113,113,0.22); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PREMIUM POLISH — global micro-refinements
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Better focus ring for accessibility & premium feel */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* Premium form inputs — admin context */
body[data-body-type="admin"] .form-input,
body[data-body-type="admin"] .field-input {
  font-size: 13px; letter-spacing: -0.05px;
  transition: border-color .12s, box-shadow .12s;
}

/* Admin page content — slightly more breathing room */
body[data-body-type="admin"] .page-content {
  padding: 26px var(--page-px);
}

/* Admin topbar right: kbd shortcut hint for command palette */
body[data-body-type="admin"] .top-bar::after {
  content: '⌘K';
  font-size: 10px; font-weight: 600; color: rgba(29,78,216,.35);
  letter-spacing: .5px;
  display: flex; align-items: center;
  padding: 2px 7px; border-radius: 5px;
  border: 1px solid rgba(29,78,216,.12);
  background: rgba(29,78,216,.05);
  font-family: 'SF Mono', 'Fira Code', monospace;
  cursor: pointer;
  transition: opacity .15s;
}
body[data-body-type="admin"] .top-bar:has(.top-bar-actions):after {
  order: 999;
}

/* Improve select appearance in admin */
body[data-body-type="admin"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%231A56DB' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}

/* Admin section separator ─── */
.section-sep {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0 16px;
}
.section-sep-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px;
  color: rgba(29,78,216,.4); white-space: nowrap;
}
.section-sep-line { flex: 1; height: 1px; background: rgba(29,78,216,.08); }

/* Metric number — tabular nums everywhere in admin */
body[data-body-type="admin"] .admin-metric-value,
body[data-body-type="admin"] .kpi-value,
body[data-body-type="admin"] .metric-value {
  font-variant-numeric: tabular-nums;
}

/* Better toast positioning */
body[data-body-type="admin"] .toast-stack {
  bottom: 24px; right: 24px;
}

/* Better skeleton in admin — dark */
body[data-body-type="admin"] .sk,
body[data-body-type="admin"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(29,78,216,.04) 25%,
    rgba(29,78,216,.09) 50%,
    rgba(29,78,216,.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
/* Skeleton admin light — suave, sem fundo escuro */
html[data-theme="light"] body[data-body-type="admin"] .sk,
html[data-theme="light"] body[data-body-type="admin"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(29,78,216,.06) 25%,
    rgba(29,78,216,.12) 50%,
    rgba(29,78,216,.06) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer-light 1.8s infinite !important;
}
@keyframes shimmer-light {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Better empty states in admin */
body[data-body-type="admin"] .empty-icon {
  background: rgba(29,78,216,.07);
  border-color: rgba(29,78,216,.12);
  color: rgba(29,78,216,.4);
}
body[data-body-type="admin"] .empty-title { color: rgba(220,225,255,.6); }
body[data-body-type="admin"] .empty-desc  { color: #484868; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ADMIN + LIGHT THEME  —  component-level overrides
   ─────────────────────────────────────────────────────────
   Admin CSS hardcodes colors directly on elements (bypassing
   CSS variables). We need specificity 0,3,2 to beat admin's
   0,2,1, and !important where admin itself uses !important.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Topbar ── */
html[data-theme="light"] body[data-body-type="admin"] .top-bar,
html[data-theme="light"] body[data-body-type="admin"] .topbar {
  background: rgba(240,241,248,0.96) !important;
  border-bottom: 1px solid rgba(29,78,216,0.12) !important;
  box-shadow: 0 1px 8px rgba(29,78,216,0.06) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .top-bar-title,
html[data-theme="light"] body[data-body-type="admin"] .topbar-title {
  color: #0F172A !important;
}
html[data-theme="light"] body[data-body-type="admin"] .top-bar-subtitle,
html[data-theme="light"] body[data-body-type="admin"] .topbar-sub {
  color: rgba(29,78,216,0.6) !important;
}

/* ── Cards e superfícies ── */
html[data-theme="light"] body[data-body-type="admin"] .card,
html[data-theme="light"] body[data-body-type="admin"] .metric-card,
html[data-theme="light"] body[data-body-type="admin"] .kpi,
html[data-theme="light"] body[data-body-type="admin"] .sum-card {
  background: #FFFFFF;
  border-color: rgba(29,78,216,0.1);
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 4px 16px rgba(29,78,216,.05);
}
html[data-theme="light"] body[data-body-type="admin"] .card:hover,
html[data-theme="light"] body[data-body-type="admin"] .metric-card:hover,
html[data-theme="light"] body[data-body-type="admin"] .kpi:hover {
  border-color: rgba(29,78,216,0.2);
  box-shadow: 0 4px 20px rgba(29,78,216,.1), 0 1px 4px rgba(15,23,42,.06);
}

/* ── Métricas / KPI ── */
html[data-theme="light"] body[data-body-type="admin"] .kpi-value,
html[data-theme="light"] body[data-body-type="admin"] .metric-value {
  color: #0F172A;
}
html[data-theme="light"] body[data-body-type="admin"] .kpi-foot,
html[data-theme="light"] body[data-body-type="admin"] .metric-footer {
  color: #64748B;
}
html[data-theme="light"] body[data-body-type="admin"] .kpi-label,
html[data-theme="light"] body[data-body-type="admin"] .metric-label {
  color: rgba(29,78,216,0.55);
}

/* ── Card títulos ── */
html[data-theme="light"] body[data-body-type="admin"] .card-title {
  color: #0F172A;
}
html[data-theme="light"] body[data-body-type="admin"] .card-sub,
html[data-theme="light"] body[data-body-type="admin"] .card-subtitle {
  color: #64748B;
}

/* ── Tabelas ── */
html[data-theme="light"] body[data-body-type="admin"] .tbl-wrap,
html[data-theme="light"] body[data-body-type="admin"] .table-container,
html[data-theme="light"] body[data-body-type="admin"] .table-scroll {
  border-color: rgba(29,78,216,0.1);
  background: #FFFFFF;
}
html[data-theme="light"] body[data-body-type="admin"] .tbl thead th,
html[data-theme="light"] body[data-body-type="admin"] .table thead th {
  background: rgba(29,78,216,0.03);
  color: rgba(29,78,216,0.55);
}
html[data-theme="light"] body[data-body-type="admin"] .tbl tbody td,
html[data-theme="light"] body[data-body-type="admin"] .table tbody td {
  color: #374151;
  border-bottom-color: rgba(29,78,216,0.07);
}
html[data-theme="light"] body[data-body-type="admin"] .tbl tbody tr:hover td,
html[data-theme="light"] body[data-body-type="admin"] .table tbody tr:hover td {
  background: rgba(29,78,216,0.04);
}
html[data-theme="light"] body[data-body-type="admin"] .td-name,
html[data-theme="light"] body[data-body-type="admin"] .cell-name {
  color: #0F172A;
}
html[data-theme="light"] body[data-body-type="admin"] .td-dim,
html[data-theme="light"] body[data-body-type="admin"] .cell-muted {
  color: #64748B;
}

/* ── Botões ghost / icon ── */
html[data-theme="light"] body[data-body-type="admin"] .btn-ghost {
  border-color: rgba(29,78,216,0.18);
  color: #1546B8;
}
html[data-theme="light"] body[data-body-type="admin"] .btn-ghost:hover {
  background: rgba(29,78,216,0.07);
  color: #3730A3;
}
html[data-theme="light"] body[data-body-type="admin"] .icon-btn {
  background: rgba(29,78,216,0.05);
  border-color: rgba(29,78,216,0.14);
  color: #1A56DB;
}
html[data-theme="light"] body[data-body-type="admin"] .icon-btn:hover {
  background: rgba(29,78,216,0.1);
  color: #1546B8;
}

/* ── Inputs / selects ── */
html[data-theme="light"] body[data-body-type="admin"] .form-input,
html[data-theme="light"] body[data-body-type="admin"] .form-select,
html[data-theme="light"] body[data-body-type="admin"] .field-input,
html[data-theme="light"] body[data-body-type="admin"] .input,
html[data-theme="light"] body[data-body-type="admin"] .select {
  background: #FFFFFF;
  border-color: rgba(29,78,216,0.18);
  color: #0F172A;
}
html[data-theme="light"] body[data-body-type="admin"] .form-input::placeholder,
html[data-theme="light"] body[data-body-type="admin"] .input::placeholder {
  color: #94A3B8;
}

/* ── Modal ── */
html[data-theme="light"] body[data-body-type="admin"] .modal,
html[data-theme="light"] body[data-body-type="admin"] .modal-overlay .modal {
  background: #FFFFFF;
  border-color: rgba(29,78,216,0.14);
  box-shadow: 0 24px 64px rgba(15,23,42,.14), 0 4px 16px rgba(29,78,216,.07);
}
html[data-theme="light"] body[data-body-type="admin"] .modal-title {
  color: #0F172A;
}
html[data-theme="light"] body[data-body-type="admin"] .modal-head {
  border-bottom-color: rgba(29,78,216,0.1);
}
html[data-theme="light"] body[data-body-type="admin"] .modal-foot {
  border-top-color: rgba(29,78,216,0.1);
  background: rgba(240,241,248,0.6);
}
html[data-theme="light"] body[data-body-type="admin"] .modal-close {
  background: rgba(29,78,216,0.07);
  color: #1A56DB;
}
html[data-theme="light"] body[data-body-type="admin"] .modal-close:hover {
  background: rgba(29,78,216,0.14);
}

/* ── Toast ── */
html[data-theme="light"] body[data-body-type="admin"] .toast {
  background: #FFFFFF;
  border-color: rgba(29,78,216,0.15);
  box-shadow: 0 12px 32px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
}
html[data-theme="light"] body[data-body-type="admin"] .toast-title {
  color: #0F172A;
}
html[data-theme="light"] body[data-body-type="admin"] .toast-msg {
  color: #475569;
}

/* ── Manutenção banner ── */
html[data-theme="light"] body[data-body-type="admin"] .maint-toggle-bar {
  background: #FFFFFF;
  border-color: rgba(29,78,216,0.1);
}

/* ── Spinner ── */
html[data-theme="light"] body[data-body-type="admin"] .ov-ring,
html[data-theme="light"] body[data-body-type="admin"] .saving-ring,
html[data-theme="light"] body[data-body-type="admin"] .loading-spinner,
html[data-theme="light"] body[data-body-type="admin"] .spinner {
  border-color: rgba(29,78,216,0.14);
  border-top-color: #1A56DB;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ADMIN LIGHT — Dashboard Operacional Components
   (admin-metric, ops-strip, qa-btn, platform-status,
    activity-section, hs-section, forecast-card, alerta-banner)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Admin metrics cards ── */
html[data-theme="light"] body[data-body-type="admin"] .admin-metric {
  background: #FFFFFF !important;
  border-color: rgba(29,78,216,0.1) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 4px 16px rgba(29,78,216,.04) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .admin-metric:hover {
  border-color: rgba(29,78,216,0.2) !important;
  box-shadow: 0 4px 20px rgba(29,78,216,.1), 0 1px 4px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .admin-metric:nth-child(n+5) {
  background: rgba(255,255,255,0.7) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .admin-metric-value {
  color: #0F172A !important;
}
html[data-theme="light"] body[data-body-type="admin"] .admin-metric-label {
  color: rgba(29,78,216,0.55) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .admin-metric-sub {
  color: #64748B !important;
}

/* ── Section dividers ── */
html[data-theme="light"] body[data-body-type="admin"] .section-hd-label {
  color: rgba(29,78,216,0.5) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .section-hd-line {
  background: rgba(29,78,216,0.1) !important;
}

/* ── Alert banners ── */
html[data-theme="light"] body[data-body-type="admin"] .alerta-banner {
  background: #FFFFFF !important;
}
html[data-theme="light"] body[data-body-type="admin"] .alerta-banner.ab-danger {
  background: rgba(239,68,68,.04) !important;
  border-color: rgba(239,68,68,.2) !important;
  border-left-color: #F87171 !important;
}
html[data-theme="light"] body[data-body-type="admin"] .alerta-banner.ab-warning {
  background: rgba(245,158,11,.04) !important;
  border-color: rgba(245,158,11,.2) !important;
  border-left-color: #FBBF24 !important;
}
html[data-theme="light"] body[data-body-type="admin"] .alerta-banner.ab-info {
  background: rgba(29,78,216,.04) !important;
  border-color: rgba(29,78,216,.18) !important;
  border-left-color: #3B82F6 !important;
}
html[data-theme="light"] body[data-body-type="admin"] .alerta-banner-title {
  color: #0F172A !important;
}
html[data-theme="light"] body[data-body-type="admin"] .alerta-banner-msg {
  color: #475569 !important;
}
html[data-theme="light"] body[data-body-type="admin"] .alerta-banner-btn {
  color: #1546B8 !important;
  border-color: rgba(29,78,216,.25) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .alerta-banner-btn:hover {
  background: rgba(29,78,216,.07) !important;
  color: #3730A3 !important;
}

/* ── Quick Actions ── */
html[data-theme="light"] body[data-body-type="admin"] .qa-btn {
  background: #FFFFFF !important;
  border-color: rgba(29,78,216,0.1) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .qa-btn:hover {
  border-color: rgba(29,78,216,.25) !important;
  box-shadow: 0 4px 16px rgba(29,78,216,.1) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .qa-label {
  color: #0F172A !important;
}
html[data-theme="light"] body[data-body-type="admin"] .qa-sub {
  color: rgba(29,78,216,.5) !important;
}

/* ── Platform Status ── */
html[data-theme="light"] body[data-body-type="admin"] .platform-status {
  background: #FFFFFF !important;
  border-color: rgba(29,78,216,0.1) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .ps-head {
  border-bottom-color: rgba(29,78,216,0.08) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .ps-item {
  border-bottom-color: rgba(29,78,216,0.06) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .ps-label {
  color: #475569 !important;
}

/* ── Chart cards ── */
html[data-theme="light"] body[data-body-type="admin"] .chart-card {
  background: #FFFFFF !important;
  border-color: rgba(29,78,216,0.1) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
}

/* ── Activity / Feed Operacional ── */
html[data-theme="light"] body[data-body-type="admin"] .activity-section {
  background: #FFFFFF !important;
  border-color: rgba(29,78,216,0.1) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .activity-head {
  border-bottom-color: rgba(29,78,216,0.08) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .activity-title {
  color: rgba(29,78,216,0.5) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .activity-item {
  border-bottom-color: rgba(29,78,216,0.06) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .activity-item:hover {
  background: rgba(29,78,216,0.04) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .act-label {
  color: #0F172A !important;
}
html[data-theme="light"] body[data-body-type="admin"] .act-meta,
html[data-theme="light"] body[data-body-type="admin"] .act-time,
html[data-theme="light"] body[data-body-type="admin"] .act-empty {
  color: #64748B !important;
}

/* ── Health Score (Escolas em Atenção) ── */
html[data-theme="light"] body[data-body-type="admin"] .hs-section {
  background: #FFFFFF !important;
  border-color: rgba(29,78,216,0.1) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .hs-head {
  border-bottom-color: rgba(29,78,216,0.08) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .hs-row {
  border-bottom-color: rgba(29,78,216,0.06) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .hs-row:hover {
  background: rgba(29,78,216,0.04) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .hs-name {
  color: #0F172A !important;
}
html[data-theme="light"] body[data-body-type="admin"] .hs-bar-s {
  background: rgba(29,78,216,0.1) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .hs-empty {
  color: rgba(29,78,216,0.35) !important;
}

/* ── MRR Forecast ── */
html[data-theme="light"] body[data-body-type="admin"] .forecast-card {
  background: #FFFFFF !important;
  border-color: rgba(29,78,216,0.1) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .forecast-card:hover {
  border-color: rgba(29,78,216,0.2) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .forecast-scenario {
  color: #64748B !important;
}
html[data-theme="light"] body[data-body-type="admin"] .forecast-delta {
  color: #475569 !important;
}
html[data-theme="light"] body[data-body-type="admin"] .forecast-bar-bg {
  background: rgba(29,78,216,0.08) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .forecast-toggle {
  background: rgba(240,241,248,0.8) !important;
  border-color: rgba(29,78,216,0.15) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .forecast-toggle-btn {
  color: #64748B !important;
}
html[data-theme="light"] body[data-body-type="admin"] .forecast-toggle-btn.active {
  background: rgba(29,78,216,.15) !important;
  color: #3730A3 !important;
}
html[data-theme="light"] body[data-body-type="admin"] .fc-realista .forecast-value {
  color: #1546B8 !important;
}
html[data-theme="light"] body[data-body-type="admin"] .forecast-hz-badge {
  background: rgba(29,78,216,.08) !important;
  color: rgba(79,70,229,.7) !important;
  border-color: rgba(29,78,216,.15) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ADMIN LIGHT — Page-specific components (financeiro, suporte,
   cobranca, alertas, clientes, auditoria, funcionalidades,
   comunicados)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Shared light surface mixin applied to all card-like elements */
html[data-theme="light"] body[data-body-type="admin"] .fin-metric,
html[data-theme="light"] body[data-body-type="admin"] .fin-table-wrap,
html[data-theme="light"] body[data-body-type="admin"] .hist-drawer,
html[data-theme="light"] body[data-body-type="admin"] .sp-panel,
html[data-theme="light"] body[data-body-type="admin"] .sp-stat,
html[data-theme="light"] body[data-body-type="admin"] .sp-filters,
html[data-theme="light"] body[data-body-type="admin"] .sp-table-wrap,
html[data-theme="light"] body[data-body-type="admin"] .sc,
html[data-theme="light"] body[data-body-type="admin"] .section-block,
html[data-theme="light"] body[data-body-type="admin"] .pix-box,
html[data-theme="light"] body[data-body-type="admin"] .alert-section,
html[data-theme="light"] body[data-body-type="admin"] .as-card,
html[data-theme="light"] body[data-body-type="admin"] .tbl-wrap,
html[data-theme="light"] body[data-body-type="admin"] .audit-table-wrap,
html[data-theme="light"] body[data-body-type="admin"] .plan-card,
html[data-theme="light"] body[data-body-type="admin"] .flags-section,
html[data-theme="light"] body[data-body-type="admin"] .compose-card,
html[data-theme="light"] body[data-body-type="admin"] .history-card {
  background: #FFFFFF !important;
  border-color: rgba(29,78,216,0.1) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 4px 16px rgba(29,78,216,.04) !important;
}

/* Hover lifts */
html[data-theme="light"] body[data-body-type="admin"] .fin-metric:hover,
html[data-theme="light"] body[data-body-type="admin"] .sc:hover,
html[data-theme="light"] body[data-body-type="admin"] .as-card:hover,
html[data-theme="light"] body[data-body-type="admin"] .plan-card:hover {
  border-color: rgba(29,78,216,0.2) !important;
  box-shadow: 0 4px 20px rgba(29,78,216,.1) !important;
}

/* Labels (uppercase muted) */
html[data-theme="light"] body[data-body-type="admin"] .fin-metric-label,
html[data-theme="light"] body[data-body-type="admin"] .sc-label,
html[data-theme="light"] body[data-body-type="admin"] .sp-stat-label,
html[data-theme="light"] body[data-body-type="admin"] .as-label {
  color: rgba(29,78,216,0.55) !important;
}

/* Values */
html[data-theme="light"] body[data-body-type="admin"] .fin-metric-value,
html[data-theme="light"] body[data-body-type="admin"] .sc-val {
  color: #0F172A !important;
}

/* Table heads (all admin pages) */
html[data-theme="light"] body[data-body-type="admin"] .fin-table th,
html[data-theme="light"] body[data-body-type="admin"] .sp-table th,
html[data-theme="light"] body[data-body-type="admin"] .clients-table th,
html[data-theme="light"] body[data-body-type="admin"] .audit-table th,
html[data-theme="light"] body[data-body-type="admin"] .cobranca-table th {
  background: rgba(29,78,216,0.03) !important;
  color: rgba(29,78,216,0.55) !important;
}

/* Table cells */
html[data-theme="light"] body[data-body-type="admin"] .fin-table td,
html[data-theme="light"] body[data-body-type="admin"] .sp-table td,
html[data-theme="light"] body[data-body-type="admin"] .clients-table td,
html[data-theme="light"] body[data-body-type="admin"] .audit-table td,
html[data-theme="light"] body[data-body-type="admin"] .cobranca-table td {
  color: #374151 !important;
  border-bottom-color: rgba(29,78,216,0.06) !important;
}

/* Table row hover */
html[data-theme="light"] body[data-body-type="admin"] .fin-table tbody tr:hover td,
html[data-theme="light"] body[data-body-type="admin"] .sp-table tbody tr:hover td,
html[data-theme="light"] body[data-body-type="admin"] .clients-table tbody tr:hover td,
html[data-theme="light"] body[data-body-type="admin"] .audit-table tbody tr:hover td,
html[data-theme="light"] body[data-body-type="admin"] .cobranca-table tbody tr:hover td {
  background: rgba(29,78,216,0.04) !important;
}

/* Alert items rows */
html[data-theme="light"] body[data-body-type="admin"] .alert-item {
  border-bottom-color: rgba(29,78,216,0.06) !important;
  color: #374151 !important;
}
html[data-theme="light"] body[data-body-type="admin"] .alert-item:hover {
  background: rgba(29,78,216,0.04) !important;
}

/* Feature rows (funcionalidades) */
html[data-theme="light"] body[data-body-type="admin"] .feat-row,
html[data-theme="light"] body[data-body-type="admin"] .flag-row {
  border-bottom-color: rgba(29,78,216,0.06) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .flag-row:hover {
  background: rgba(29,78,216,0.04) !important;
}

/* Comunicados compose/history internals */
html[data-theme="light"] body[data-body-type="admin"] .compose-head,
html[data-theme="light"] body[data-body-type="admin"] .history-head,
html[data-theme="light"] body[data-body-type="admin"] .compose-foot {
  border-color: rgba(29,78,216,0.08) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .history-item {
  border-bottom-color: rgba(29,78,216,0.06) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .history-item:hover {
  background: rgba(29,78,216,0.04) !important;
}
html[data-theme="light"] body[data-body-type="admin"] .preview-box {
  background: rgba(240,241,248,0.6) !important;
  border-color: rgba(29,78,216,0.09) !important;
}

/* Pix box (cobranca) */
html[data-theme="light"] body[data-body-type="admin"] .pix-box {
  border-color: rgba(29,78,216,0.14) !important;
  box-shadow: 0 8px 32px rgba(29,78,216,.08) !important;
}

/* Suporte panel (side drawer) */
html[data-theme="light"] body[data-body-type="admin"] .sp-panel {
  background: rgba(248,249,255,0.98) !important;
  border-left-color: rgba(29,78,216,0.12) !important;
  box-shadow: -8px 0 32px rgba(29,78,216,.06) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MICROINTERACTION & MOTION LAYER
   Adds life, depth and human feel — without excess.
   Principle: natural physics, not theatrical animation.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Core keyframes ─────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.975) translateY(5px); }
  to   { opacity: 1; transform: scale(1)     translateY(0); }
}
@keyframes subtlePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}
@keyframes shimmerSweep {
  from { left: -100%; right: 100%; }
  to   { left: 100%;  right: -100%; }
}

/* ── Page content entrance ── upgrade existing pageFadeIn ── */
/* (pageFadeIn still runs at 0.18s, this adds depth to cards) */

/* ── Metric cards — staggered entrance ──────────────────── */
.metrics-grid .metric-card,
.metrics-grid .kpi {
  animation: fadeInUp 0.38s cubic-bezier(0.22,1,0.36,1) both;
}
.metrics-grid .metric-card:nth-child(1),
.metrics-grid .kpi:nth-child(1) { animation-delay: 0.05s; }
.metrics-grid .metric-card:nth-child(2),
.metrics-grid .kpi:nth-child(2) { animation-delay: 0.10s; }
.metrics-grid .metric-card:nth-child(3),
.metrics-grid .kpi:nth-child(3) { animation-delay: 0.15s; }
.metrics-grid .metric-card:nth-child(4),
.metrics-grid .kpi:nth-child(4) { animation-delay: 0.20s; }

/* ── Card hover — subtle depth lift ─────────────────────── */
.card {
  transition: border-color var(--t) var(--ease),
              box-shadow  0.18s var(--ease);
}
.card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
}
.metric-card {
  transition: border-color var(--t) var(--ease),
              transform   0.22s var(--ease),
              box-shadow  0.22s var(--ease);
}
.metric-card:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.15);
}

/* ── Sidebar nav — animated active indicator ────────────── */
/* Base state exists on all nav-items (width: 0, invisible) */
.nav-item::before {
  content: '';
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 0;
  border-radius: 0 2px 2px 0;
  background: rgba(255,255,255,0.7);
  transition: width 0.22s var(--ease), opacity 0.22s var(--ease);
  opacity: 0;
}
.nav-item.active::before { width: 2px; opacity: 1; }
/* Icon micro-movement */
.nav-item .nav-svg {
  transition: transform 0.2s var(--ease), opacity 0.16s;
}
.nav-item:hover .nav-svg { transform: scale(1.07); }
.nav-item.active .nav-svg { transform: scale(1); }

/* ── Quick action card — icon scale + tilt ───────────────── */
.qa-icon {
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.qa-card:hover .qa-icon { transform: scale(1.12) rotate(-3deg); }

/* ── Buttons — shimmer sweep on hover ───────────────────── */
.btn-primary,
.btn-login {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.btn-login::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -100%; right: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent
  );
  transform: skewX(-12deg);
  transition: left 0.55s var(--ease), right 0.55s var(--ease);
  pointer-events: none;
}
.btn-primary:hover:not(:disabled)::after,
.btn-login:hover:not(:disabled)::after {
  left: 100%; right: -100%;
}
/* Refined press feedback */
.btn-primary:active { transition-duration: 0.06s; opacity: 0.88; }
.btn:active:not(.btn-primary) { opacity: 0.88; transition-duration: 0.06s; }

/* ── Ranking items — staggered entrance ─────────────────── */
.ranking-item {
  animation: fadeInUp 0.32s cubic-bezier(0.22,1,0.36,1) both;
}
.ranking-item:nth-child(1) { animation-delay: 0.04s; }
.ranking-item:nth-child(2) { animation-delay: 0.09s; }
.ranking-item:nth-child(3) { animation-delay: 0.14s; }
.ranking-item:nth-child(4) { animation-delay: 0.19s; }
.ranking-item:nth-child(5) { animation-delay: 0.24s; }

/* ── Table row hover — subtle tint ─────────────────────── */
.tbl  tbody tr:hover td,
.table tbody tr:hover td { background: rgba(0,23,54,0.03); }

/* ── Notification button — badge breathing ───────────────── */
.notif-badge-dot[style*="flex"] {
  animation: subtlePulse 2.8s ease-in-out infinite;
}

/* ── Form inputs — smoother hover + focus ring ───────────── */
.form-input {
  transition: border-color 0.2s var(--ease),
              box-shadow   0.2s var(--ease),
              background   0.2s var(--ease);
}
.form-input:hover:not(:focus) {
  border-color: var(--border-hover);
  background: var(--bg-input);
}
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,23,54,0.12);
  background: var(--bg-input);
}

/* ── Grid cards — staggered entrance ────────────────────── */
.grid-2 > .card:nth-child(1) { animation: fadeInUp 0.38s cubic-bezier(0.22,1,0.36,1) 0.08s both; }
.grid-2 > .card:nth-child(2) { animation: fadeInUp 0.38s cubic-bezier(0.22,1,0.36,1) 0.14s both; }

/* ── Top bar scroll depth ────────────────────────────────── */
.top-bar.scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.2);
}

/* ── Onboarding step — hover lift ────────────────────────── */
.onboarding-step {
  transition: border-color 0.18s, background 0.18s, transform 0.2s var(--ease);
}
.onboarding-step:hover { border-color: var(--border-hover); }

/* ── Plan badge — hover ──────────────────────────────────── */
.plan-badge {
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.plan-badge:hover { transform: scale(1.04); }

/* ── Escola status bar dot — breathing ───────────────────── */
.esb-dot { animation: subtlePulse 2.2s ease-in-out infinite; }

/* ── Modal entrance ─────────────────────────────────────── */
.overlay.open .modal,
.modal-overlay.active .modal {
  animation: fadeInScale 0.24s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Sidebar — initial entrance ──────────────────────────── */
.sidebar {
  animation: sidebarIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes sidebarIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INSTITUTIONAL ECOSYSTEM — Operational Components
   Operational Timeline · Pendency Cards · Approval Queue
   Compliance Monitor · Demo Bar · Role Sections
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Demo mode bar ──────────────────────────────────────── */
.demo-mode-bar {
  display:flex; align-items:center; gap:8px;
  padding:7px 16px; margin-bottom:12px;
  background:rgba(245,158,11,0.08);
  border:1px solid rgba(245,158,11,0.22);
  border-radius:8px; font-size:12px;
  color:rgba(253,230,138,0.85);
}
.demo-mode-bar strong { color:#FCD34D; }
.demo-mode-bar a { color:#FBBF24; margin-left:auto; font-weight:600; text-decoration:none; }
.demo-mode-bar a:hover { text-decoration:underline; }
.demo-mode-bar svg { flex-shrink:0; opacity:0.7; }

/* ── Dash section header ────────────────────────────────── */
.dash-section-hd { display:flex;align-items:center;gap:10px;margin:22px 0 12px; }
.dash-section-label { font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);white-space:nowrap; }
.dash-section-line { flex:1;height:1px;background:var(--border); }

/* ── Operational Timeline ───────────────────────────────── */
.op-timeline { display:flex;flex-direction:column;gap:0; }
.op-event {
  display:flex; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--border);
  animation: fadeInUp 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
.op-event:last-child { border-bottom:none; }
.op-event-time { font-size:11px; color:var(--text-muted); min-width:40px; font-variant-numeric:tabular-nums; padding-top:1px; flex-shrink:0; }
.op-event-mark { display:flex; flex-direction:column; align-items:center; gap:0; flex-shrink:0; }
.op-event-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px;
  background:var(--text-muted);
}
.op-event-dot.ok       { background:#10B981; }
.op-event-dot.pending  { background:#F59E0B; }
.op-event-dot.alert    { background:#EF4444; }
.op-event-dot.approved { background:var(--inst-info); }
.op-event-dot.returned { background:#8B5CF6; }
.op-event-dot.info     { background:#64748B; }
.op-event-dot.system   { background:#475569; }
.op-event-line { width:1px; flex:1; background:var(--border); margin-top:3px; min-height:16px; }
.op-event-body { flex:1; min-width:0; }
.op-event-desc { font-size:12.5px; color:var(--text-secondary); line-height:1.45; }
.op-event-desc strong { color:var(--text-primary); font-weight:600; }
.op-event-meta { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* Stagger timeline items */
.op-event:nth-child(1)  { animation-delay:0.03s; }
.op-event:nth-child(2)  { animation-delay:0.07s; }
.op-event:nth-child(3)  { animation-delay:0.11s; }
.op-event:nth-child(4)  { animation-delay:0.15s; }
.op-event:nth-child(5)  { animation-delay:0.19s; }
.op-event:nth-child(6)  { animation-delay:0.23s; }
.op-event:nth-child(7)  { animation-delay:0.27s; }
.op-event:nth-child(8)  { animation-delay:0.31s; }

/* ── Pendency Cards ─────────────────────────────────────── */
.pendency-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:4px; }
.pendency-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-left-width:3px; border-radius:10px;
  padding:14px 16px; position:relative; overflow:hidden;
  transition:transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s;
  animation: fadeInUp 0.32s cubic-bezier(0.22,1,0.36,1) both;
}
.pendency-card:hover { box-shadow:var(--shadow); border-color:var(--border-hover); }
.pendency-card.critical { border-left-color:#EF4444; }
.pendency-card.high     { border-left-color:#F59E0B; }
.pendency-card.medium   { border-left-color:var(--inst-info); }
.pendency-card.low      { border-left-color:#10B981; }
.pendency-count { font-size:26px; font-weight:700; line-height:1; letter-spacing:-0.5px; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.pendency-card.critical .pendency-count { color:#F87171; }
.pendency-card.high     .pendency-count { color:#FCD34D; }
.pendency-card.medium   .pendency-count { color:var(--inst-info); }
.pendency-card.low      .pendency-count { color:#6EE7B7; }
.pendency-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); margin-bottom:6px; }
.pendency-detail { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* Stagger pendency cards */
.pendency-card:nth-child(1) { animation-delay:0.04s; }
.pendency-card:nth-child(2) { animation-delay:0.09s; }
.pendency-card:nth-child(3) { animation-delay:0.14s; }
.pendency-card:nth-child(4) { animation-delay:0.19s; }

/* ── Approval Queue ─────────────────────────────────────── */
.approval-list { display:flex; flex-direction:column; gap:0; }
.approval-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--border);
  animation: fadeInUp 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
.approval-item:last-child { border-bottom:none; }
.approval-type-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; font-size:14px;
  flex-shrink:0; margin-top:1px;
}
.approval-type-badge.plano   { background:rgba(29,78,216,0.12); }
.approval-type-badge.acao    { background:rgba(249,115,22,0.12); }
.approval-type-badge.relat   { background:rgba(64,95,145,0.12); }
.approval-type-badge.freq    { background:rgba(16,185,129,0.12); }
.approval-body { flex:1; min-width:0; }
.approval-title { font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:2px; }
.approval-meta  { font-size:11.5px; color:var(--text-muted); }
.approval-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; margin-top:2px; }
.approval-btn {
  padding:4px 12px; border-radius:6px; font-size:11.5px; font-weight:600;
  cursor:pointer; border:1px solid transparent; transition:all 0.16s;
  font-family:inherit;
}
.approval-btn.approve {
  background:rgba(16,185,129,0.12); border-color:rgba(16,185,129,0.25); color:#34D399;
}
.approval-btn.approve:hover { background:rgba(16,185,129,0.22); }
.approval-btn.return  {
  background:rgba(245,158,11,0.1); border-color:rgba(245,158,11,0.2); color:#FBBF24;
}
.approval-btn.return:hover  { background:rgba(245,158,11,0.2); }

/* Stagger approval items */
.approval-item:nth-child(1) { animation-delay:0.04s; }
.approval-item:nth-child(2) { animation-delay:0.09s; }
.approval-item:nth-child(3) { animation-delay:0.14s; }
.approval-item:nth-child(4) { animation-delay:0.19s; }
.approval-item:nth-child(5) { animation-delay:0.24s; }

/* ── Compliance Grid (Secretaria) ───────────────────────── */
.compliance-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.compliance-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:10px; padding:16px;
  transition:border-color 0.2s;
  animation: fadeInUp 0.32s cubic-bezier(0.22,1,0.36,1) both;
}
.compliance-card:hover { border-color:var(--border-hover); }
.compliance-card.urgent  { border-top:2px solid #EF4444; }
.compliance-card.warning { border-top:2px solid #F59E0B; }
.compliance-card.ok      { border-top:2px solid #10B981; }
.compliance-card.info    { border-top:2px solid var(--inst-info); }
.compliance-card-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); margin-bottom:8px; }
.compliance-value { font-size:24px; font-weight:700; color:var(--text-primary); line-height:1; letter-spacing:-0.4px; font-variant-numeric:tabular-nums; margin-bottom:4px; }
.compliance-card.urgent  .compliance-value { color:#F87171; }
.compliance-card.warning .compliance-value { color:#FCD34D; }
.compliance-card.ok      .compliance-value { color:#6EE7B7; }
.compliance-card.info    .compliance-value { color:var(--inst-info); }
.compliance-desc { font-size:12px; color:var(--text-muted); line-height:1.4; }

/* Stagger compliance cards */
.compliance-card:nth-child(1) { animation-delay:0.04s; }
.compliance-card:nth-child(2) { animation-delay:0.09s; }
.compliance-card:nth-child(3) { animation-delay:0.14s; }
.compliance-card:nth-child(4) { animation-delay:0.19s; }

/* ── Late Professors table row ──────────────────────────── */
.late-prof-row {
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--border);
  animation: fadeInUp 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
.late-prof-row:last-child { border-bottom:none; }
.late-prof-avatar {
  width:32px; height:32px; border-radius:50%; background:rgba(0,27,54,0.08);
  border:1px solid rgba(0,27,54,0.18); display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; color:var(--inst-navy);
  flex-shrink:0;
}
.late-prof-name  { font-size:13px; font-weight:600; color:var(--text-primary); }
.late-prof-detail { font-size:11.5px; color:var(--text-muted); margin-top:1px; }
.late-tag {
  padding:3px 8px; border-radius:5px; font-size:10.5px; font-weight:700;
  letter-spacing:0.2px; flex-shrink:0;
}
.late-tag.freq   { background:rgba(239,68,68,0.12); color:#F87171; }
.late-tag.plano  { background:rgba(245,158,11,0.12); color:#FCD34D; }
.late-tag.acao   { background:rgba(217,119,6,0.12); color:var(--warning); }

/* ── Devolutiva card (Professor) ────────────────────────── */
.devolutiva-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-left:3px solid #8B5CF6; border-radius:10px;
  padding:14px 16px; margin-bottom:10px;
  animation: fadeInUp 0.3s cubic-bezier(0.22,1,0.36,1) both;
  transition:border-color 0.2s, transform 0.2s var(--ease);
}
.devolutiva-card:hover { border-color:rgba(64,95,145,0.3); }
.devolutiva-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.devolutiva-from { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--inst-info); }
.devolutiva-date { font-size:11px; color:var(--text-muted); margin-left:auto; }
.devolutiva-subject { font-size:13.5px; font-weight:600; color:var(--text-primary); margin-bottom:4px; }
.devolutiva-text { font-size:12.5px; color:var(--text-secondary); line-height:1.5; }
.devolutiva-status {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:4px; font-size:10.5px; font-weight:700;
  margin-top:8px;
}
.devolutiva-status.novo    { background:rgba(239,68,68,0.12); color:#F87171; }
.devolutiva-status.lido    { background:rgba(100,116,139,0.12); color:#94A3B8; }
.devolutiva-status.resolvido { background:rgba(16,185,129,0.12); color:#34D399; }

/* ── Prof performance row (Coordenação) ─────────────────── */
.prof-perf-row {
  display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--border);
  animation: fadeInUp 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
.prof-perf-row:last-child { border-bottom:none; }
.prof-perf-avatar {
  width:34px; height:34px; border-radius:50%;
  background:rgba(64,95,145,0.12); border:1px solid rgba(64,95,145,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--inst-info); flex-shrink:0;
}
.prof-perf-name   { font-size:13px; font-weight:600; color:var(--text-primary); flex:1; }
.prof-perf-detail { font-size:11.5px; color:var(--text-muted); margin-top:1px; }
.prof-perf-badge {
  padding:3px 9px; border-radius:5px; font-size:11px; font-weight:700;
  flex-shrink:0;
}
.prof-perf-badge.ok      { background:rgba(16,185,129,0.12); color:#34D399; }
.prof-perf-badge.pending { background:rgba(245,158,11,0.12); color:#FCD34D; }
.prof-perf-badge.late    { background:rgba(239,68,68,0.12); color:#F87171; }

/* ── Institutional Health Score (Gestão) ───────────────── */
.inst-health {
  display:flex; align-items:center; gap:20px;
  padding:16px 20px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:12px;
  margin-bottom:16px;
  animation: fadeInUp 0.35s cubic-bezier(0.22,1,0.36,1) 0.02s both;
}
.inst-health-score { text-align:center; flex-shrink:0; }
.inst-health-num { font-size:36px; font-weight:800; line-height:1; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.inst-health-num.ok      { color:#10B981; }
.inst-health-num.warning { color:#F59E0B; }
.inst-health-num.alert   { color:#EF4444; }
.inst-health-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-muted); margin-top:3px; }
.inst-health-divider { width:1px; height:48px; background:var(--border); flex-shrink:0; }
.inst-health-items { display:flex; gap:24px; flex:1; flex-wrap:wrap; }
.inst-health-item { display:flex; flex-direction:column; gap:2px; }
.inst-health-item-val { font-size:15px; font-weight:700; color:var(--text-primary); }
.inst-health-item-lbl { font-size:10.5px; color:var(--text-muted); }

/* ── Quick-action card — escola style ───────────────────── */
.qa-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width: 900px) { .qa-grid { grid-template-columns:repeat(2,1fr); } }
.qa-card {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:10px;
  text-decoration:none; cursor:pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  animation: fadeInUp 0.32s cubic-bezier(0.22,1,0.36,1) both;
}
.qa-card:hover { border-color:rgba(26,86,219,.3); background:var(--bg-subtle); color:var(--primary); }
.qa-card:nth-child(1) { animation-delay:0.04s; }
.qa-card:nth-child(2) { animation-delay:0.09s; }
.qa-card:nth-child(3) { animation-delay:0.14s; }
.qa-card:nth-child(4) { animation-delay:0.19s; }
.qa-icon { width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.qa-icon svg { width:18px;height:18px; }
.qa-label { font-size:13px;font-weight:600;color:var(--text-primary); }
.qa-sub { font-size:11px;color:var(--text-muted);margin-top:1px; }

/* ── Role-section wrapper ────────────────────────────────── */
#role-sections { margin-top:4px; }

/* ── Acompanhamento tab page ────────────────────────────── */
.ac-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px; overflow-x:auto; }
.ac-tab {
  padding:9px 16px; font-size:12.5px; font-weight:600;
  color:var(--text-muted); border:none; background:none; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
  transition:color 0.16s, border-color 0.16s;
  font-family:inherit;
}
.ac-tab:hover { color:var(--text-secondary); }
.ac-tab.active { color:var(--primary-light,#93C5FD); border-bottom-color:var(--primary,#1D4ED8); }
.ac-panel { display:none; }
.ac-panel.active { display:block; animation: fadeInUp 0.28s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Nav sidebar badge ───────────────────────────────────── */
.nav-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; font-size:10px; font-weight:700;
  background:var(--danger,#ef4444); color:#fff;
  margin-left:auto; line-height:1;
  animation: badgePop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
.nav-badge:empty, .nav-badge[data-count="0"] { display:none; }
@keyframes badgePop {
  from { transform: scale(0.5); opacity:0; }
  to   { transform: scale(1);   opacity:1; }
}

/* ── Workflow status badges ──────────────────────────────── */
.badge-muted   { background:#374151; color:#9ca3af; }
.badge-info    { background:#1e3a5f; color:#60a5fa; }
.badge-dark    { background:#111827; color:#6b7280; }

/* ── Status filter tabs ──────────────────────────────────── */
.status-tabs {
  display:flex; gap:4px; flex-wrap:wrap; margin-bottom:16px;
}
.status-tab {
  padding:6px 14px; font-size:12px; font-weight:600;
  border:1px solid var(--border); border-radius:20px;
  background:transparent; color:var(--text-muted);
  cursor:pointer; transition:all 0.16s; font-family:inherit;
}
.status-tab:hover { border-color:var(--primary,#1D4ED8); color:var(--text-primary); }
.status-tab.active {
  background:var(--primary,#1D4ED8); border-color:var(--primary,#1D4ED8);
  color:#fff;
}

/* ── Correction / draft banners ──────────────────────────── */
.correcao-banner {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 18px; border-radius:12px; margin-bottom:20px;
  background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.3);
  animation: fadeInUp 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
.correcao-banner-icon { font-size:22px; flex-shrink:0; margin-top:1px; }
.correcao-banner-body { flex:1 }
.correcao-banner-title { font-size:13.5px; font-weight:700; color:#f87171; margin-bottom:4px; }
.correcao-banner-list { margin:0; padding-left:16px; }
.correcao-banner-list li { font-size:12.5px; color:var(--text-secondary); line-height:1.7; }
.correcao-banner-action { font-size:12px; font-weight:600; color:#f87171; cursor:pointer;
  text-decoration:underline; background:none; border:none; font-family:inherit; padding:0; }

.draft-banner {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:10px; margin-bottom:16px;
  background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.3);
}
.draft-banner-text { font-size:12.5px; color:#fbbf24; flex:1; }
.draft-banner-btn {
  font-size:12px; font-weight:600; padding:5px 12px; border-radius:7px;
  background:rgba(245,158,11,0.2); border:1px solid rgba(245,158,11,0.4);
  color:#fbbf24; cursor:pointer; font-family:inherit;
  transition:background 0.16s;
}
.draft-banner-btn:hover { background:rgba(245,158,11,0.3); }
.draft-banner-dismiss { font-size:18px; color:var(--text-muted); cursor:pointer;
  background:none; border:none; line-height:1; }

/* ── Autosave indicator ──────────────────────────────────── */
.autosave-indicator {
  font-size:11px; color:var(--text-muted); display:flex; align-items:center; gap:5px;
}
.autosave-indicator.saving { color:#60a5fa; }
.autosave-indicator.saved  { color:#34d399; }
.autosave-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ── Workflow history timeline ────────────────────────────── */
.hist-timeline {
  display:flex; flex-direction:column; gap:0; padding:4px 0;
}
.hist-item {
  display:flex; gap:14px; padding-bottom:20px; position:relative;
}
.hist-item:last-child { padding-bottom:0; }
.hist-item:not(:last-child)::before {
  content:''; position:absolute; left:15px; top:32px;
  width:2px; bottom:0; background:var(--border);
}
.hist-dot {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; background:var(--surface-2,#1e293b);
  border:2px solid var(--border); z-index:1;
}
.hist-dot.rascunho  { border-color:#6b7280; background:rgba(107,114,128,0.15); }
.hist-dot.enviado   { border-color:#f59e0b; background:rgba(245,158,11,0.15); }
.hist-dot.em_analise{ border-color:var(--inst-info); background:rgba(64,95,145,0.12); }
.hist-dot.aprovado  { border-color:#10b981; background:rgba(16,185,129,0.15); }
.hist-dot.correcao  { border-color:#ef4444; background:rgba(239,68,68,0.15); }
.hist-dot.recusado  { border-color:#374151; background:rgba(55,65,81,0.15); }
.hist-body { flex:1; }
.hist-header { display:flex; align-items:baseline; gap:8px; margin-bottom:3px; }
.hist-by { font-size:13px; font-weight:600; color:var(--text-primary); }
.hist-role { font-size:11px; color:var(--text-muted); }
.hist-time { font-size:11px; color:var(--text-muted); margin-left:auto; }
.hist-transition { font-size:12px; color:var(--text-secondary); }
.hist-obs {
  margin-top:6px; padding:8px 12px; border-radius:8px;
  background:var(--surface-2,#1e293b); font-size:12px;
  color:var(--text-secondary); border-left:3px solid var(--border);
  font-style:italic;
}
.hist-elogio {
  display:inline-flex; align-items:center; gap:4px;
  margin-top:6px; padding:4px 10px; border-radius:6px;
  background:rgba(245,158,11,0.15); border:1px solid rgba(245,158,11,0.3);
  font-size:11.5px; font-weight:600; color:#fbbf24;
}

/* ── Analysis panel (coord/gestão modal actions) ─────────── */
.analise-panel {
  border-top:1px solid var(--border); margin-top:20px; padding-top:20px;
}
.analise-panel-title {
  font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:12px;
}
.analise-obs {
  width:100%; padding:10px 14px; border-radius:9px; resize:vertical; min-height:80px;
  background:var(--surface-2,#1e293b); border:1px solid var(--border);
  color:var(--text-primary); font-size:13px; font-family:inherit;
  margin-bottom:12px; transition:border-color 0.16s;
}
.analise-obs:focus { outline:none; border-color:var(--primary,#1D4ED8); }
.analise-obs::placeholder { color:var(--text-muted); }
.analise-actions { display:flex; gap:8px; flex-wrap:wrap; }
.analise-actions .btn-analise { font-family:inherit; }
.btn-aprovar {
  padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600;
  background:rgba(16,185,129,0.15); border:1px solid rgba(16,185,129,0.35);
  color:#34d399; cursor:pointer; transition:all 0.16s;
}
.btn-aprovar:hover { background:rgba(16,185,129,0.25); }
.btn-correcao {
  padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600;
  background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.3);
  color:#fbbf24; cursor:pointer; transition:all 0.16s;
}
.btn-correcao:hover { background:rgba(245,158,11,0.22); }
.btn-recusar {
  padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600;
  background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3);
  color:#f87171; cursor:pointer; transition:all 0.16s;
}
.btn-recusar:hover { background:rgba(239,68,68,0.2); }
.btn-elogio {
  padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600;
  background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.25);
  color:#fbbf24; cursor:pointer; transition:all 0.16s; margin-left:auto;
}
.btn-elogio:hover { background:rgba(245,158,11,0.2); }
.btn-em-analise {
  padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600;
  background:rgba(0,27,54,0.08); border:1px solid rgba(0,27,54,0.2);
  color:var(--inst-navy); cursor:pointer; transition:all 0.16s;
}
.btn-em-analise:hover { background:rgba(0,27,54,0.14); }

/* ── Workflow table status col ───────────────────────────── */
.plano-row-correcao { border-left:3px solid #ef4444; }
.plano-row-aprovado { border-left:3px solid #10b981; }
.plano-row-enviado  { border-left:3px solid #f59e0b; }

/* ── Elogio star badge on plan cards ─────────────────────── */
.elogio-star {
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; color:#fbbf24; font-weight:600;
  background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.25);
  border-radius:5px; padding:2px 7px;
}

/* ═══════════════════════════════════════════════════════════════════════
   INSTITUTIONAL REFINEMENT — Humanize & professionalize the experience
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sidebar — institutional presence ──────────────────────────────────── */
body[data-body-type="escola"] .sidebar-header {
  padding: 0;
  border-bottom: 1px solid var(--border);
}
body[data-body-type="escola"] .sidebar-logo {
  padding: 18px 16px 14px;
  gap: 12px;
}
body[data-body-type="escola"] .sidebar-logo-img {
  width: 42px; height: 42px; border-radius: 0; object-fit: contain;
}
body[data-body-type="escola"] .sidebar-logo-name {
  font-size: 14px; font-weight: 800; color: #fff;
  letter-spacing: -0.3px; line-height: 1.15;
}
body[data-body-type="escola"] .sidebar-logo-tag {
  font-size: 9px; color: rgba(255,255,255,0.5); margin-top: 3px;
  font-weight: 500; letter-spacing: 0.7px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}

/* ── Header compacto horizontal (logo + info escola) ── */
.sdb-header {
  padding: 12px 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sdb-header-link {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; border-radius: 8px;
  padding: 6px 8px;
  transition: background .15s;
}
.sdb-header-link:hover { background: rgba(255,255,255,0.06); }
.sdb-logo-img {
  width: 40px; height: 40px; flex-shrink: 0;
  object-fit: contain; border-radius: 8px;
  background: rgba(255,255,255,0.08);
}
.sdb-logo-img--solution {
  padding: 4px;
}
.sdb-header-info {
  flex: 1; min-width: 0;
}

/* Mantém compatibilidade com classes antigas usadas em admin/aluno */
.sidebar-header--logo-center { padding: 12px 14px 8px; }
.sidebar-logo--full {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.sidebar-logo-full-img {
  width: 56px; height: 56px; object-fit: contain;
  border-radius: 10px;
}

/* Operational status strip below header */
.sidebar-status-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; background: rgba(16,185,129,0.05);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px; color: var(--text-muted);
}
.sidebar-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981; flex-shrink: 0;
  animation: statusPulse 2.5s ease-in-out infinite;
}
.sidebar-status-dot.warning { background: #f59e0b; }
.sidebar-status-dot.error   { background: #ef4444; }
@keyframes statusPulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(16,185,129,0.4); }
  50%      { opacity:.7; box-shadow:0 0 0 4px rgba(16,185,129,0); }
}

/* Sidebar pending summary */
.sidebar-pending-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 16px 8px;
  border-bottom: 1px solid var(--border);
}
.sps-item {
  display: flex; flex-direction: column; align-items: center;
  font-size: 10px; color: var(--text-muted); gap: 1px;
}
.sps-val {
  font-size: 15px; font-weight: 700; line-height: 1;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.sps-val.red    { color: #f87171; }
.sps-val.yellow { color: #fbbf24; }
.sps-val.green  { color: #34d399; }

/* Sidebar section labels — more prominent */
body[data-body-type="escola"] .sidebar-section-label {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.6px; color: var(--text-muted);
  padding: 16px 16px 4px; opacity: 0.55;
  line-height: 1;
}

/* Nav items — left-border active style, tighter vertical */
body[data-body-type="escola"] .sidebar-nav {
  padding: 6px 6px 6px 0;
}
body[data-body-type="escola"] .nav-item {
  padding: 7px 12px 7px 14px;
  font-size: 13px; font-weight: 500;
  border-radius: 0 8px 8px 0;
  border-left: 2px solid transparent;
  letter-spacing: -0.1px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
body[data-body-type="escola"] .nav-item:hover:not(.active) {
  color: var(--inst-on-navy);
  background: var(--inst-navy-hover);
  border-left-color: var(--inst-navy-border);
}
body[data-body-type="escola"] .nav-item.active {
  color: #ffffff;
  background: var(--inst-navy-highlight);
  border-left-color: rgba(255,255,255,0.7);
  font-weight: 600;
}
body[data-body-type="escola"] .nav-item.active::before { display: none; }
body[data-body-type="escola"] .nav-item .nav-svg { opacity: 0.45; }
body[data-body-type="escola"] .nav-item:hover .nav-svg { opacity: 0.75; }
body[data-body-type="escola"] .nav-item.active .nav-svg { opacity: 1; }

/* Badge sits naturally in the flex row */
body[data-body-type="escola"] .nav-item .nav-badge { margin-left: auto; }

/* Sidebar footer */
body[data-body-type="escola"] .sidebar-footer {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
}
body[data-body-type="escola"] .sidebar-user {
  padding: 8px 4px;
}
body[data-body-type="escola"] .sidebar-avatar {
  width: 30px; height: 30px; font-size: 12px;
  font-weight: 700;
}

/* ── Page density — more content per viewport ───────────────────────────── */
.page-content {
  padding: 18px 24px 32px;
}
.card { padding: 16px 18px; }
.card-header { margin-bottom: 12px; }
.card-title  { font-size: 13.5px; }
.card-subtitle { font-size: 11.5px; }

/* Metric grid tighter */
.metric-card { padding: 14px 16px; }

/* Table rows tighter */
.table td, .table th { padding: 10px 12px; }

/* ── Live Operational Feed (replaces flat timeline) ─────────────────────── */
.feed-list {
  display: flex; flex-direction: column; gap: 0;
}
.feed-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  animation: fadeInUp 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
.feed-item:last-child { border-bottom: none; padding-bottom: 4px; }

.feed-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  flex-shrink: 0; margin-top: 1px;
  letter-spacing: -0.3px;
}
.feed-avatar.ok       { background: linear-gradient(135deg,#059669,#10b981); }
.feed-avatar.pending  { background: linear-gradient(135deg,#b45309,#f59e0b); }
.feed-avatar.alert    { background: linear-gradient(135deg,#b91c1c,#ef4444); }
.feed-avatar.returned { background: linear-gradient(135deg,#7c3aed,#8b5cf6); }
.feed-avatar.approved { background: linear-gradient(135deg,#1d4ed8,#3b82f6); }
.feed-avatar.info     { background: linear-gradient(135deg,#374151,#6b7280); }
.feed-avatar.diretora { background: linear-gradient(135deg,#065f46,#10b981); }

.feed-body { flex: 1; min-width: 0; }
.feed-person {
  font-size: 12.5px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-person .feed-subrole {
  font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 5px;
}
.feed-action {
  font-size: 12.5px; color: var(--text-secondary);
  line-height: 1.45; margin-top: 1px;
}
.feed-time {
  font-size: 10.5px; color: var(--text-muted);
  margin-top: 3px;
}

.feed-indicator {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.feed-indicator.ok       { background: #10b981; }
.feed-indicator.pending  { background: #f59e0b; }
.feed-indicator.alert    { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.5); }
.feed-indicator.returned { background: #8b5cf6; }
.feed-indicator.approved { background: #3b82f6; }
.feed-indicator.info     { background: #6b7280; }

/* Feed time groupers */
.feed-time-group {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--text-muted);
  padding: 12px 0 4px; opacity: 0.5;
}

/* ── Contextual SLA banners ──────────────────────────────────────────────── */
.sla-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: 10px;
  margin-bottom: 14px; border: 1px solid;
  animation: fadeInUp 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
.sla-banner.critical {
  background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.25);
}
.sla-banner.warning {
  background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.25);
}
.sla-banner.info {
  background: rgba(64,95,145,0.06); border-color: rgba(64,95,145,0.2);
}
.sla-banner-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.sla-banner-body { flex: 1; }
.sla-banner-title {
  font-size: 12.5px; font-weight: 700; margin-bottom: 3px;
}
.sla-banner.critical .sla-banner-title { color: #f87171; }
.sla-banner.warning  .sla-banner-title { color: #fbbf24; }
.sla-banner.info     .sla-banner-title { color: #93c5fd; }
.sla-banner-items {
  margin: 0; padding: 0 0 0 14px;
  font-size: 12px; color: var(--text-secondary); line-height: 1.7;
}
.sla-banner-action {
  font-size: 11.5px; font-weight: 600; margin-top: 5px;
  color: inherit; opacity: 0.75;
}
.sla-badge-days {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; padding: 1px 7px;
  border-radius: 4px; margin-left: 6px;
}
.sla-badge-days.overdue {
  background: rgba(239,68,68,0.15); color: #f87171;
}
.sla-badge-days.soon {
  background: rgba(245,158,11,0.15); color: #fbbf24;
}

/* ── Pend-row variant — with avatar initials ────────────────────────────── */
.pend-row-v2 {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.pend-row-v2:last-child { border-bottom: none; }
.pend-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
  letter-spacing: -0.3px;
}
.pend-avatar.freq    { background: linear-gradient(135deg,#0369a1,#0ea5e9); }
.pend-avatar.plano   { background: linear-gradient(135deg,#4338ca,#1A56DB); }
.pend-avatar.acao    { background: linear-gradient(135deg,#b45309,#f97316); }
.pend-avatar.alert   { background: linear-gradient(135deg,#991b1b,#ef4444); }
.pend-body-v2 { flex: 1; min-width: 0; }
.pend-name-v2 { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.pend-detail-v2 {
  font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.5;
}
.pend-sla {
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 4px; flex-shrink: 0; white-space: nowrap;
  align-self: center;
}
.pend-sla.critical { background: rgba(239,68,68,0.15); color: #f87171; }
.pend-sla.high     { background: rgba(245,158,11,0.15); color: #fbbf24; }
.pend-sla.medium   { background: rgba(64,95,145,0.10);  color: var(--inst-info); }
.pend-sla.low      { background: rgba(16,185,129,0.12); color: #6ee7b7; }

/* ── Profile differentiation — role body classes ────────────────────────── */
body[data-role="professor"]   .top-bar-title::after {
  content: " · Prof."; font-size: 11px; font-weight: 400;
  color: var(--text-muted); letter-spacing: 0.3px;
}
body[data-role="secretaria"] .top-bar { border-bottom-color: rgba(245,158,11,0.2); }
body[data-role="coordenador"] .top-bar { border-bottom-color: rgba(64,95,145,0.2); }
body[data-role="diretora"]    .top-bar { border-bottom-color: rgba(16,185,129,0.25); }

/* Role accent lines on sidebar for visual differentiation */
body[data-role="professor"]   .sidebar { border-right-color: rgba(16,185,129,0.15); }
body[data-role="coordenador"] .sidebar { border-right-color: rgba(64,95,145,0.15); }
body[data-role="secretaria"]  .sidebar { border-right-color: rgba(245,158,11,0.15); }
body[data-role="diretora"]    .sidebar { border-right-color: rgba(16,185,129,0.2); }

/* ── Diretora role badge ─────────────────────────────────────────────────── */
.role-diretora { background: rgba(5,150,105,0.15); color: #34d399; border-color: rgba(16,185,129,0.2); }

/* ── Demo mode bar ───────────────────────────────────────────────────────── */
.demo-mode-bar {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 7px 16px; margin-bottom: 14px;
  background: rgba(64,95,145,0.07); border: 1px solid rgba(64,95,145,0.2);
  border-radius: 8px; font-size: 11.5px; color: var(--inst-info);
  flex-wrap: wrap; text-align: center;
}
.demo-mode-bar strong { font-weight: 700; }
.demo-mode-bar a {
  color: #a78bfa; font-weight: 600; margin-left: 4px;
  text-decoration: none;
}
.demo-mode-bar a:hover { text-decoration: underline; }

/* ── Approval card with person context ──────────────────────────────────── */
.appr-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.appr-card:last-child { border-bottom: none; }
.appr-avatar {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
  letter-spacing: -0.3px;
}
.appr-avatar.plano { background: linear-gradient(135deg,#4338ca,#1A56DB); }
.appr-avatar.acao  { background: linear-gradient(135deg,#b45309,#f97316); }
.appr-avatar.relat { background: linear-gradient(135deg,#0369a1,#0ea5e9); }
.appr-body { flex: 1; }
.appr-type-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-muted); margin-bottom: 2px;
}
.appr-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.appr-person { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.appr-sla {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  margin-top: 5px; display: inline-flex; align-items: center; gap: 3px;
}
.appr-sla.overdue { background: rgba(239,68,68,0.12); color: #f87171; }
.appr-sla.warn    { background: rgba(245,158,11,0.12); color: #fbbf24; }
.appr-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.appr-btn {
  padding: 5px 12px; border-radius: 6px; font-size: 11.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; border: 1px solid; white-space: nowrap;
  transition: background 0.15s;
}
.appr-btn.approve {
  background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3);
  color: #34d399;
}
.appr-btn.approve:hover { background: rgba(16,185,129,0.18); }
.appr-btn.return  {
  background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25);
  color: #fbbf24;
}
.appr-btn.return:hover { background: rgba(245,158,11,0.16); }

/* ── Institutional health score ─────────────────────────────────────────── */
.inst-score-ring {
  position: relative; width: 72px; height: 72px; flex-shrink: 0;
}
.inst-score-ring svg { transform: rotate(-90deg); }
.inst-score-num {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 18px; font-weight: 800;
  color: var(--text-primary); line-height: 1;
}

/* ── Card visual hierarchy variants ─────────────────────────────────────── */
.card-featured {
  border-color: rgba(0,43,91,0.18);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0,23,54,0.03) 100%);
}
.card-alert {
  border-color: rgba(239,68,68,0.2);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(239,68,68,0.03) 100%);
}
.card-success {
  border-color: rgba(16,185,129,0.2);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(16,185,129,0.03) 100%);
}

/* ── Login slide — more institutional copywriting ───────────────────────── */
.slide-stat-row {
  display: flex; align-items: center; gap: 20px; margin-top: 24px;
}
.slide-stat {
  display: flex; flex-direction: column;
}
.slide-stat-val {
  font-size: 22px; font-weight: 800; color: #F4F4F5;
  letter-spacing: -0.5px; line-height: 1;
}
.slide-stat-lbl {
  font-size: 10.5px; color: #71717A; margin-top: 3px; letter-spacing: 0.3px;
}
.slide-stat-sep { width: 1px; height: 32px; background: rgba(255,255,255,0.08); }

/* ── Top bar role chip ───────────────────────────────────────────────────── */
.topbar-role-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px;
}
.topbar-role-chip.gestao      { background:rgba(64,95,145,.10);   color:var(--inst-info); }
.topbar-role-chip.professor   { background:rgba(85,164,84,.10);   color:#2e7d32; }
.topbar-role-chip.coordenador { background:rgba(64,95,145,.10);   color:var(--inst-info); }
.topbar-role-chip.secretaria  { background:rgba(180,110,0,.10);   color:#92400e; }
.topbar-role-chip.diretora    { background:rgba(5,150,105,.12);   color:#34D399; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — NAMESPACE E REGRAS DE ESCOPO
   Solution Educacional · CSS Architecture
   ═══════════════════════════════════════════════════════════════════════════

   HIERARQUIA DE data-body-type (injetado por setupSidebar):
   ┌─ data-body-type="admin"   → admin-*.html, admin.html (dev/superadmin)
   ├─ data-body-type="escola"  → TODAS as páginas de papel escolar
   │   ├─ data-page="dashboard"      → dashboard.html (painel operacional)
   │   ├─ data-page="acompanhamento" → acompanhamento.html
   │   ├─ data-page="settings"       → escola.html (branding, configurações)
   │   └─ data-page="module"         → todas as outras páginas da escola
   └─ data-body-type="aluno"   → aluno-*.html

   REGRA CRÍTICA — NUNCA fazer isso:
   ✗  body[data-body-type="escola"] .card { padding: ... }
      (aplica em TODAS as páginas escola incluindo settings — causa cascata)

   CORRETO — sempre escopar ao data-page:
   ✓  body[data-page="dashboard"] .card { padding: ... }
   ✓  body[data-page="settings"] .card-body { padding: ... }

   GUARDS (settings page) — usam !important para garantir isolamento total:
   ✓  body[data-page="settings"] .card { padding: 0 !important; }

   ═══════════════════════════════════════════════════════════════════════════
   REFINAMENTO INSTITUCIONAL — FASE FINAL
   Solution Educacional · Identidade Visual Premium
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Densidade operacional — SOMENTE dashboard e acompanhamento ─────────
   IMPORTANTE: Não usar body[data-body-type="escola"] aqui.
   setupSidebar() injeta data-body-type="escola" em TODAS as páginas de
   escola-role (incluindo settings). Usar data-page para isolar.
   ─────────────────────────────────────────────────────────────────────── */
body[data-page="dashboard"] .page-content,
body[data-page="acompanhamento"] .page-content { padding: 16px 20px 40px; }

/* Padding no .card externo — APENAS no dashboard (conteúdo gerado sem .card-body) */
body[data-page="dashboard"] .card { padding: 14px 16px; }
body[data-page="dashboard"] .card-header { margin-bottom: 10px; padding-bottom: 10px; }

/* ── Settings guard — protege tela de escola/branding de qualquer override ── */
body[data-page="settings"] .card            { padding: 0 !important; }
body[data-page="settings"] .card-header     { padding: 20px 24px 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
body[data-page="settings"] .card-body       { padding: 20px !important; }
body[data-page="settings"] .page-content    { padding: 24px var(--page-px) !important; }

/* Card hover microinteração — reforça a transição institucional (sem neon/glow)
   O comportamento base já está definido na seção CARDS no topo do arquivo.
   Este bloco apenas refina a sombra para contexto escola/dashboard. */
body[data-body-type="escola"] .card,
body[data-body-type="escola"] .card {
  transition: border-color .18s ease, box-shadow .18s ease;
}
body[data-body-type="escola"] .card:hover {
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}

/* ── Sidebar — presença institucional reforçada ─────────────────────────── */
body[data-body-type="escola"] .sidebar {
  border-right-width: 1px;
  border-right-style: solid;
  transition: border-color .4s;
}
body[data-body-type="escola"] .sidebar-header {
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
/* School name inside logo-tag — ellipsis */
.sidebar-logo-tag {
  font-size: 10.5px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .65;
}

/* Nav item — left-border active, refined hover */
body[data-body-type="escola"] .nav-item {
  padding: 8px 14px 8px 17px;
  margin: 1px 10px 1px 0;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  transition: background .13s, padding-left .13s, color .13s;
}
body[data-body-type="escola"] .nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 2px; border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background .13s, top .13s, bottom .13s;
}
body[data-body-type="escola"] .nav-item.active {
  background: rgba(29,78,216,.09);
  color: var(--text-primary);
}
body[data-body-type="escola"] .nav-item.active::before {
  background: var(--accent);
  top: 14%; bottom: 14%;
}
body[data-body-type="escola"] .nav-item:hover:not(.active) {
  background: rgba(255,255,255,.04);
  padding-left: 19px;
}

/* Section labels — ultra-thin institutional dividers */
body[data-body-type="escola"] .sidebar-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: .45;
  padding: 14px 18px 5px;
  color: var(--text-muted);
}

/* ── Sidebar live operational strip ─────────────────────────────────────── */
.sls-wrap {
  margin: 8px 12px 4px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sls-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-secondary);
}
.sls-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sls-dot.green  { background: #10b981; animation: slsPulse 2.8s ease-in-out infinite; }
.sls-dot.yellow { background: #f59e0b; animation: slsPulse 2s ease-in-out infinite; }
.sls-dot.red    { background: #ef4444; animation: slsPulse 1.4s ease-in-out infinite; }
.sls-dot.gray   { background: #6b7280; }
@keyframes slsPulse { 0%,100%{opacity:1} 50%{opacity:.25} }
.sls-val { font-weight: 700; color: var(--text-primary); }
.sls-sync {
  font-size: 10px;
  color: var(--text-muted);
  opacity: .5;
  padding-top: 3px;
  border-top: 1px solid rgba(255,255,255,.05);
}

/* ── Role-specific sidebar atmosphere ───────────────────────────────────── */
body[data-role="gestao"]      .sidebar { border-right-color: rgba(59,130,246,.18);  }
body[data-role="professor"]   .sidebar { border-right-color: rgba(16,185,129,.18);  }
body[data-role="coordenador"] .sidebar { border-right-color: rgba(64,95,145,.18);   }
body[data-role="secretaria"]  .sidebar { border-right-color: rgba(245,158,11,.18);  }
body[data-role="diretora"]    .sidebar { border-right-color: rgba(16,185,129,.22);  }

body[data-role="gestao"]      .sidebar-header { background: rgba(59,130,246,.04);   }
body[data-role="professor"]   .sidebar-header { background: rgba(16,185,129,.04);   }
body[data-role="coordenador"] .sidebar-header { background: rgba(64,95,145,.04);    }
body[data-role="secretaria"]  .sidebar-header { background: rgba(245,158,11,.03);   }
body[data-role="diretora"]    .sidebar-header { background: rgba(16,185,129,.05);   }

body[data-role="gestao"]      .nav-item.active { background: rgba(59,130,246,.10);  }
body[data-role="professor"]   .nav-item.active { background: rgba(16,185,129,.10);  }
body[data-role="coordenador"] .nav-item.active { background: rgba(64,95,145,.10);   }
body[data-role="secretaria"]  .nav-item.active { background: rgba(245,158,11,.08);  }
body[data-role="diretora"]    .nav-item.active { background: rgba(16,185,129,.10);  }

body[data-role="gestao"]      .nav-item.active::before { background: #3b82f6; }
body[data-role="professor"]   .nav-item.active::before { background: #10b981; }
body[data-role="coordenador"] .nav-item.active::before { background: #8b5cf6; }
body[data-role="secretaria"]  .nav-item.active::before { background: #f59e0b; }
body[data-role="diretora"]    .nav-item.active::before { background: #10b981; }

/* ── Operational top-strip (injected by JS under top-bar) ───────────────── */
.op-topstrip {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 22px;
  background: rgba(255,255,255,.018);
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 11px;
  color: var(--text-muted);
  gap: 0;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  z-index: 5;
}
.op-ts-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
  line-height: 1;
}
.op-ts-item:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.op-ts-item strong { color: var(--text-primary); font-weight: 600; }
.op-ts-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  animation: slsPulse 2.8s ease-in-out infinite;
}
.op-ts-dot.warn  { background: #f59e0b; }
.op-ts-dot.alert { background: #ef4444; animation-duration: 1.4s; }
.op-ts-schoolname {
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: -.1px;
}

/* ── Feed state indicators — critical must feel critical ────────────────── */
.feed-item.is-alert {
  border-left: 2px solid rgba(239,68,68,.6);
  padding-left: 9px;
  background: rgba(239,68,68,.025);
  border-radius: 0 6px 6px 0;
  margin-left: -2px;
}
.feed-item.is-pending {
  border-left: 2px solid rgba(245,158,11,.5);
  padding-left: 9px;
  background: rgba(245,158,11,.02);
  border-radius: 0 6px 6px 0;
  margin-left: -2px;
}

/* ── Feed time-group label ──────────────────────────────────────────────── */
.feed-time-group {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-muted);
  opacity: .5;
  padding: 10px 0 4px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  margin-bottom: 2px;
}

/* ── Metric strip (horizontal compact KPI bar) ──────────────────────────── */
.metric-strip {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.mstrip-item {
  flex: 1;
  padding: 13px 16px;
  border-right: 1px solid var(--border);
  text-align: center;
  transition: background .15s;
}
.mstrip-item:last-child { border-right: none; }
.mstrip-item:hover { background: var(--bg-card-hover); }
.mstrip-val {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--text-primary);
  line-height: 1;
}
.mstrip-lbl {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .7px;
}

/* ── SLA banner left-border accent ─────────────────────────────────────── */
.sla-banner.critical { border-left: 3px solid rgba(239,68,68,.6); }
.sla-banner.warning  { border-left: 3px solid rgba(245,158,11,.5); }
.sla-banner.info     { border-left: 3px solid rgba(64,95,145,.4); }

/* ── Compliance cards — stronger state differentiation ──────────────────── */
.compliance-card.urgent  { border-left: 3px solid rgba(239,68,68,.6); }
.compliance-card.warning { border-left: 3px solid rgba(245,158,11,.5); }
.compliance-card.ok      { border-left: 3px solid rgba(16,185,129,.5); }

/* ── Notification badge — live pulse ────────────────────────────────────── */
@keyframes urgentPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  50%      { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
.notif-badge-dot:not([style*="none"]) {
  animation: urgentPulse 2.2s ease-in-out infinite;
}

/* ── Top-bar refinements ────────────────────────────────────────────────── */
.top-bar-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.top-bar-subtitle {
  font-size: 11px;
  opacity: .65;
}

/* ── Metric card tightening — dashboard only (avoid tightening admin/settings) */
body[data-page="dashboard"] .metric-card { padding: 14px 16px; }
body[data-page="dashboard"] .metric-value { letter-spacing: -.8px; }

/* ── Role chip in top-bar ───────────────────────────────────────────────── */
.topbar-school-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  white-space: nowrap;
}
.topbar-school-chip-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #10b981;
  animation: slsPulse 2.8s ease-in-out infinite;
}

/* ── Pendency card depth refinement ─────────────────────────────────────── */
.pendency-card.critical { border-left: 3px solid rgba(239,68,68,.6); }
.pendency-card.high     { border-left: 3px solid rgba(245,158,11,.5); }
.pendency-card.medium   { border-left: 3px solid rgba(64,95,145,.4); }
.pendency-card.low      { border-left: 3px solid rgba(16,185,129,.4); }

/* ═══════════════════════════════════════════════════════════════════════════
   INSTITUTIONAL DESIGN SYSTEM
   Solution Educacional — "Educational Operational Center"
   Source: Stitch export "Institutional Authority"
   Brand pillars: Authoritative · Human · Kinetic
   ═══════════════════════════════════════════════════════════════════════════

   NAMESPACE: All new classes use .inst-* prefix for zero collision risk.
   SCOPE:     These rules are additive — nothing existing is overridden here
              except sidebar colors (which are now institutional navy).
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. SIDEBAR INSTITUTIONAL NAVY ─────────────────────────────────────────
   Override the default .nav-item text/bg colors so they are legible on the
   institutional navy (#002B5B) sidebar rather than the old near-black.
   ──────────────────────────────────────────────────────────────────────── */

/* All escola-role nav items — white-tinted text on navy */
body[data-body-type="escola"] .nav-item {
  color: var(--inst-on-navy-dim);
}
body[data-body-type="escola"] .nav-item:hover:not(.active) {
  color: var(--inst-on-navy);
  background: var(--inst-navy-hover);
  padding-left: 19px;
}

/* Active nav item — white highlight, role-colored left stripe */
body[data-body-type="escola"] .nav-item.active {
  color: #ffffff;
  background: var(--inst-navy-highlight);
}

/* Role-specific active colors on navy — azul institucional padrão */
body[data-role="gestao"]      .nav-item.active { background: rgba(107,159,212,0.15); }
body[data-role="professor"]   .nav-item.active { background: rgba(85,164,84,0.14);  }
body[data-role="coordenador"] .nav-item.active { background: rgba(107,159,212,0.15); }
body[data-role="secretaria"]  .nav-item.active { background: rgba(217,119,6,0.12);  }
body[data-role="diretora"]    .nav-item.active { background: rgba(107,159,212,0.15); }

/* Active left-stripe — cor institucional uniforme */
body[data-role="gestao"]      .nav-item.active::before { background: #6B9FD4; }
body[data-role="professor"]   .nav-item.active::before { background: #7EC67D; }
body[data-role="coordenador"] .nav-item.active::before { background: #6B9FD4; }
body[data-role="secretaria"]  .nav-item.active::before { background: #F7BE6A; }
body[data-role="diretora"]    .nav-item.active::before { background: #6B9FD4; }
body[data-body-type="escola"] .nav-item.active::before { top: 12%; bottom: 12%; }

/* ── NAV ITEM SVG — sem escala decorativa ── */
.nav-item .nav-svg { transition: opacity 0.13s; }
.nav-item:hover .nav-svg { transform: none; }
.nav-item.active .nav-svg { transform: none; }

/* Sidebar section labels — compactas, discretas */
body[data-body-type="escola"] .sidebar-section-label {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--inst-on-navy-faint);
  text-transform: uppercase;
  padding: 12px 16px 3px;
}

/* ── FASE 6: Nav items ainda mais compactos ── */
body[data-body-type="escola"] .nav-item {
  padding: 6px 12px 6px 14px !important;
  font-size: 12.5px !important;
  gap: 9px !important;
}
body[data-body-type="escola"] .nav-item .nav-svg {
  width: 14px !important; height: 14px !important;
}

/* Sidebar header — subtle dark overlay on navy */
body[data-body-type="escola"] .sidebar-header {
  background: rgba(0,0,0,0.18);
  border-bottom-color: var(--inst-navy-border);
}

/* Sidebar logo text — white on navy */
.sidebar-logo-name { color: var(--inst-on-navy) !important; }
.sidebar-logo-tag  { color: var(--inst-on-navy-faint) !important; }

/* Sidebar user block — white text on navy */
#sidebar-email { color: var(--inst-on-navy-dim); font-size: 12px; }
.sidebar-user .sidebar-avatar {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.15);
}

/* Role badges — institution-tone on navy */
.sidebar-role-badge {
  font-family: var(--inst-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
}
.role-gestao    { background: rgba(96,165,250,0.18);  color: var(--inst-gestao-accent);     }
.role-prof      { background: rgba(52,211,153,0.15);  color: var(--inst-professor-accent);  }
.role-coord     { background: rgba(167,139,250,0.16); color: var(--inst-coord-accent);      }
.role-diretora  { background: rgba(52,211,153,0.15);  color: var(--inst-diretora-accent);   }
.role-muni      { background: rgba(249,115,22,0.15);  color: #F97316;                       }
.role-aluno     { background: rgba(96,165,250,0.14);  color: #93C5FD; }

/* Logout button */
.btn-logout { color: var(--inst-on-navy-faint); }
.btn-logout:hover { color: var(--inst-on-navy); }

/* Plan badge on navy */
.sidebar-plan-badge { padding: 0 18px 12px; }
.plan-badge {
  font-family: var(--inst-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Role-specific sidebar right border — higher contrast on navy */
body[data-role="gestao"]      .sidebar { border-right-color: rgba(96,165,250,0.25);  }
body[data-role="professor"]   .sidebar { border-right-color: rgba(52,211,153,0.22);  }
body[data-role="coordenador"] .sidebar { border-right-color: rgba(167,139,250,0.22); }
body[data-role="secretaria"]  .sidebar { border-right-color: rgba(251,191,36,0.20);  }
body[data-role="diretora"]    .sidebar { border-right-color: rgba(52,211,153,0.25);  }

/* Role-based sidebar-header tint — subtle, visible on navy */
body[data-role="gestao"]      .sidebar-header { background: rgba(96,165,250,0.08);  }
body[data-role="professor"]   .sidebar-header { background: rgba(52,211,153,0.06);  }
body[data-role="coordenador"] .sidebar-header { background: rgba(167,139,250,0.07); }
body[data-role="secretaria"]  .sidebar-header { background: rgba(251,191,36,0.06);  }
body[data-role="diretora"]    .sidebar-header { background: rgba(52,211,153,0.07);  }

/* SLS live strip — legible on navy */
.sls-row { color: var(--inst-on-navy-dim); }
.sls-val  { color: var(--inst-on-navy); }
.sls-sync { color: var(--inst-on-navy-faint); border-top-color: var(--inst-navy-border); }


/* ── 2. INSTITUTIONAL STATUS CHIPS ─────────────────────────────────────────
   Small, compact chips for operational mode indicators, quick status tags.
   Use .inst-chip + modifier. Font: JetBrains Mono.
   ──────────────────────────────────────────────────────────────────────── */
.inst-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 3px;
  font-family: var(--inst-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.inst-chip-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.inst-chip.active   { background: var(--inst-success-bg);  color: var(--inst-success); border: 1px solid rgba(85,164,84,0.25); }
.inst-chip.pending  { background: var(--inst-warning-bg);  color: var(--inst-warning); border: 1px solid rgba(217,119,6,0.25); }
.inst-chip.alert    { background: var(--inst-danger-bg);   color: var(--inst-danger);  border: 1px solid rgba(186,26,26,0.22); }
.inst-chip.info     { background: var(--inst-info-bg);     color: var(--inst-info);    border: 1px solid rgba(64,95,145,0.22); }
.inst-chip.neutral  { background: var(--inst-neutral-bg);  color: var(--inst-neutral); border: 1px solid rgba(116,119,128,0.2); }
.inst-chip.navy     { background: var(--inst-navy); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.1); }

.inst-chip.active  .inst-chip-dot { background: var(--inst-success); }
.inst-chip.pending .inst-chip-dot { background: var(--inst-warning); animation: slsPulse 2s ease-in-out infinite; }
.inst-chip.alert   .inst-chip-dot { background: var(--inst-danger);  animation: slsPulse 1.4s ease-in-out infinite; }
.inst-chip.info    .inst-chip-dot { background: var(--inst-info); }


/* ── 3. OPERATIONAL MODE STRIP ──────────────────────────────────────────────
   Contextual header under .top-bar for special operational modes.
   E.g., "Modo Auditoria Ativo", "Supervisão Institucional".
   ──────────────────────────────────────────────────────────────────────── */
.inst-mode-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: rgba(0,43,91,0.05);
  border: 1px solid rgba(0,43,91,0.1);
  border-radius: var(--r-md, 8px);
  font-size: 11.5px;
  color: var(--text-secondary);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.inst-mode-strip-icon { font-size: 13px; flex-shrink: 0; }
.inst-mode-strip strong { color: var(--text-primary); font-weight: 600; }
.inst-mode-strip-sep {
  width: 1px; height: 14px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 4px;
}
.inst-mode-strip-actions { margin-left: auto; display: flex; gap: 8px; }
/* Role identity label inside mode strip */
.inst-mode-label {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--inst-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-primary);
  flex-shrink: 0;
}


/* ── 4. INSTITUTIONAL SECTION HEADER ────────────────────────────────────────
   Upgrade of .dash-section-hd with monospaced label.
   Compatible: can be applied alongside existing .dash-section-hd.
   ──────────────────────────────────────────────────────────────────────── */
.inst-section-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 0;
}
.inst-section-label {
  font-family: var(--inst-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.inst-section-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.inst-section-count {
  font-family: var(--inst-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* Apply inst-mono label to existing dash-section-label as upgrade */
.dash-section-label {
  font-family: var(--inst-mono);
  letter-spacing: 0.06em;
}


/* ── 5. OPERATIONAL FEED — ENHANCED ─────────────────────────────────────────
   Institutional upgrade to the existing .feed-item component.
   Adds: richer avatars, status icons, time grouping, action-type indicators.
   ──────────────────────────────────────────────────────────────────────── */

/* Feed container */
.inst-feed { display: flex; flex-direction: column; }

/* Feed time-group divider — institutional mono */
.feed-time-group {
  font-family: var(--inst-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--inst-info) !important;
  opacity: 0.7 !important;
}

/* Feed avatar — richer state colors */
.feed-avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  border: 1.5px solid transparent;
  position: relative;
}
.feed-avatar.ok       { background: rgba(85,164,84,0.14);  color: var(--inst-success); border-color: rgba(85,164,84,0.25); }
.feed-avatar.pending  { background: rgba(217,119,6,0.12);  color: var(--inst-warning); border-color: rgba(217,119,6,0.25); animation: pendingPulse 3s ease-in-out infinite; }
.feed-avatar.alert    { background: rgba(186,26,26,0.12);  color: var(--inst-danger);  border-color: rgba(186,26,26,0.25); }
.feed-avatar.approved { background: rgba(85,164,84,0.14);  color: var(--inst-success); border-color: rgba(85,164,84,0.22); }
.feed-avatar.returned { background: rgba(217,119,6,0.12);  color: var(--inst-warning); border-color: rgba(217,119,6,0.22); }
.feed-avatar.info     { background: rgba(64,95,145,0.12);  color: var(--inst-info);    border-color: rgba(64,95,145,0.2);  }
.feed-avatar.diretora { background: rgba(52,211,153,0.10); color: #34D399; border-color: rgba(52,211,153,0.2); }
.feed-avatar.late     { background: rgba(186,26,26,0.12);  color: var(--inst-danger);  border-color: rgba(186,26,26,0.25); }

@keyframes pendingPulse {
  0%,100% { box-shadow: none; }
  50%      { box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }
}

/* Feed item base */
.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
  position: relative;
  animation: fadeInUp 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
.feed-item:last-child { border-bottom: none; }

/* Feed body text */
.feed-person {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.feed-subrole {
  font-family: var(--inst-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.feed-action {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}
.feed-time {
  font-family: var(--inst-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0.03em;
}

/* Feed action-type tag */
.feed-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 2px;
  font-family: var(--inst-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}
.feed-tag.ok       { background: var(--inst-success-bg); color: var(--inst-success); }
.feed-tag.pending  { background: var(--inst-warning-bg); color: var(--inst-warning); }
.feed-tag.alert    { background: var(--inst-danger-bg);  color: var(--inst-danger);  }
.feed-tag.approved { background: var(--inst-success-bg); color: var(--inst-success); }
.feed-tag.returned { background: var(--inst-warning-bg); color: var(--inst-warning); }
.feed-tag.info     { background: var(--inst-info-bg);    color: var(--inst-info);    }
.feed-tag.late     { background: var(--inst-danger-bg);  color: var(--inst-danger);  }
.feed-tag.diretora { background: rgba(64,95,145,0.14);   color: var(--inst-info);    }

/* Feed state — alert/pending border accents (existing, kept + refined) */
.feed-item.is-alert {
  border-left: 2px solid rgba(186,26,26,0.55);
  padding-left: 9px; margin-left: -2px;
  background: rgba(186,26,26,0.025);
  border-radius: 0 6px 6px 0;
}
.feed-item.is-pending {
  border-left: 2px solid rgba(217,119,6,0.5);
  padding-left: 9px; margin-left: -2px;
  background: rgba(217,119,6,0.02);
  border-radius: 0 6px 6px 0;
}

/* Approval feed — action buttons */
.approval-btn {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--inst-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid;
  transition: background .15s, border-color .15s;
}
.approval-btn.approve {
  background: var(--inst-success-bg);
  color: var(--inst-success);
  border-color: rgba(85,164,84,0.3);
}
.approval-btn.approve:hover { background: rgba(85,164,84,0.2); }
.approval-btn.return {
  background: var(--inst-warning-bg);
  color: var(--inst-warning);
  border-color: rgba(217,119,6,0.3);
}
.approval-btn.return:hover { background: rgba(217,119,6,0.2); }


/* ── 6. SLA BANNERS — INSTITUTIONAL REFINEMENT ───────────────────────────────
   Upgrades existing .sla-banner with institutional weight.
   ──────────────────────────────────────────────────────────────────────── */
.sla-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}
.sla-banner-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.4;
}
.sla-banner-body { flex: 1; min-width: 0; }
.sla-banner-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.sla-banner-items {
  margin: 0; padding: 0 0 0 14px;
  list-style: disc;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* State variants — stronger left border */
.sla-banner.critical {
  border-left: 3px solid rgba(186,26,26,0.7);
  background: rgba(186,26,26,0.03);
}
.sla-banner.warning {
  border-left: 3px solid rgba(217,119,6,0.55);
  background: rgba(217,119,6,0.025);
}
.sla-banner.info {
  border-left: 3px solid rgba(64,95,145,0.45);
  background: rgba(64,95,145,0.025);
}
.sla-banner.success {
  border-left: 3px solid rgba(85,164,84,0.5);
  background: rgba(85,164,84,0.025);
}


/* ── 7. INSTITUTIONAL RECORD TABLE ──────────────────────────────────────────
   Clean tabular layout for documents, registros, matrículas.
   Namespace: .inst-table
   ──────────────────────────────────────────────────────────────────────── */
.inst-table-wrap {
  overflow-x: auto;
  border-radius: var(--r);
}
.inst-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.inst-table thead th {
  font-family: var(--inst-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-strong);
  text-align: left;
  white-space: nowrap;
}
.inst-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: middle;
  line-height: 1.4;
}
.inst-table tbody tr:last-child td { border-bottom: none; }
.inst-table tbody tr:hover td {
  background: rgba(0,0,0,0.02);
}
.inst-table .inst-table-id {
  font-family: var(--inst-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.inst-table .inst-table-primary {
  font-weight: 600;
  color: var(--text-primary);
}
.inst-table .inst-table-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}


/* ── 8. COMPLIANCE CALENDAR / QUEUE PANEL ────────────────────────────────────
   Numbered queue items for regulatory deadlines, compliance tasks, etc.
   ──────────────────────────────────────────────────────────────────────── */
.inst-queue { display: flex; flex-direction: column; gap: 0; }

.inst-queue-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  animation: fadeInUp 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
.inst-queue-item:last-child { border-bottom: none; }

.inst-queue-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--inst-navy);
  color: rgba(255,255,255,0.9);
  font-family: var(--inst-mono);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.inst-queue-num.urgent  { background: var(--inst-danger);  }
.inst-queue-num.warning { background: var(--inst-warning); }
.inst-queue-num.ok      { background: var(--inst-success); }
.inst-queue-num.alert   { background: var(--inst-danger);  }
.inst-queue-num.pending { background: var(--inst-warning); }
.inst-queue-num.info    { background: var(--inst-info);    }

/* Done state for professor task queue */
.inst-queue-item.inst-queue-done { opacity: .65; }
.inst-queue-item.inst-queue-done .inst-queue-title { text-decoration: line-through; }

.inst-queue-body { flex: 1; min-width: 0; }
.inst-queue-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 2px;
}
.inst-queue-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.inst-queue-meta {
  font-family: var(--inst-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0.03em;
}

.inst-queue-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.inst-queue-deadline {
  font-family: var(--inst-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}


/* ── 9. INSTITUTIONAL METRIC STRIP ──────────────────────────────────────────
   Horizontal compact KPI bar — refined variant.
   ──────────────────────────────────────────────────────────────────────── */
.inst-metric-strip {
  display: flex;
  border-radius: var(--r);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 16px;
}
.inst-metric-item {
  flex: 1;
  padding: 14px 18px;
  border-right: 1px solid var(--border);
  text-align: center;
  transition: background .15s;
  position: relative;
}
.inst-metric-item:last-child { border-right: none; }
.inst-metric-item:hover { background: var(--bg-card-hover); }

.inst-metric-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 20%; right: 20%;
  height: 2px;
  border-radius: 1px;
  opacity: 0;
  transition: opacity .2s;
}
.inst-metric-item.ok::after      { background: var(--inst-success); opacity: 1; }
.inst-metric-item.warning::after { background: var(--inst-warning); opacity: 1; }
.inst-metric-item.alert::after   { background: var(--inst-danger);  opacity: 1; }

.inst-metric-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--text-primary);
  line-height: 1;
}
.inst-metric-lbl {
  font-family: var(--inst-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 5px;
}
.inst-metric-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}


/* ── 10. INSTITUTIONAL PANEL CARD ────────────────────────────────────────────
   Enhanced card variant for institutional operational panels.
   ──────────────────────────────────────────────────────────────────────── */
.inst-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.inst-panel:hover {
  border-color: var(--border-hover);
  box-shadow: var(--inst-card-shadow-md);
}
.inst-panel-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.inst-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}
.inst-panel-subtitle {
  font-family: var(--inst-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 1px;
}
.inst-panel-body { padding: 14px 18px; }
.inst-panel-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
}
.inst-panel-footer-mono {
  font-family: var(--inst-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
}


/* ── 11. INSTITUTIONAL HEALTH SCORE ─────────────────────────────────────────
   Circular score ring — upgraded typography.
   ──────────────────────────────────────────────────────────────────────── */
.inst-score-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inst-score-ring svg {
  transform: rotate(-90deg);
}
.inst-score-num {
  position: absolute;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}
.inst-score-label {
  font-family: var(--inst-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 4px;
}


/* ── 12. INSTITUTIONAL EMPTY STATE ──────────────────────────────────────────
   Consistent empty state for feeds, tables, and panels.
   ──────────────────────────────────────────────────────────────────────── */
.inst-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  gap: 8px;
}
.inst-empty-icon {
  font-size: 28px;
  opacity: 0.4;
  margin-bottom: 4px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   SOLUTION SaaS PREMIUM v2 — Sidebar & Dashboard Redesign
   Paleta: #0F3D75 primary · #1D4ED8 secondary · inspirado em Notion / ClickUp
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
:root {
  --sdb-bg:          #0F3D75;
  --sdb-bg-deep:     #0a2d5a;
  --sdb-bg-mid:      #1a4d85;
  --sdb-accent:      #3B82F6;          /* active bar & highlights */
  --sdb-on:          rgba(255,255,255,.92);
  --sdb-on-dim:      rgba(255,255,255,.55);
  --sdb-on-faint:    rgba(255,255,255,.28);
  --sdb-divider:     rgba(255,255,255,.08);
  --sdb-hover:       rgba(255,255,255,.06);
  --sdb-active:      rgba(255,255,255,.12);
  --sdb-w:           252px;
  --sdb-w-col:       64px;
  --t-sdb:           .22s cubic-bezier(.4,0,.2,1);
}

/* ── Sidebar base ────────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--sdb-bg) !important;
  border-right: 1px solid var(--sdb-divider) !important;
  width: var(--sdb-w) !important;
  transition: width var(--t-sdb) !important;
  overflow: hidden !important;
  overflow-y: auto !important;
}
.main-content {
  margin-left: var(--sdb-w);
  transition: margin-left var(--t-sdb);
}

/* ── Collapsed state ─────────────────────────────────────────────────────────── */
body.sidebar-collapsed .sidebar {
  width: var(--sdb-w-col) !important;
  overflow-y: visible !important;
}
body.sidebar-collapsed .main-content { margin-left: var(--sdb-w-col); }
body.sidebar-collapsed .sdb-brand-name,
body.sidebar-collapsed .sidebar-section-label,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .sdb-school-card,
body.sidebar-collapsed .nav-iend,
body.sidebar-collapsed .sdb-user-name,
body.sidebar-collapsed .sdb-user-role,
body.sidebar-collapsed .sdb-footer-actions { display: none !important; }
body.sidebar-collapsed .sdb-footer-row { justify-content: center !important; padding: 10px 0 !important; }
body.sidebar-collapsed .sidebar-avatar { flex-shrink: 0; }
body.sidebar-collapsed .btn-logout { margin: 0 auto; }
body.sidebar-collapsed .nav-item { justify-content: center !important; padding: 10px !important; border-radius: 8px !important; }
body.sidebar-collapsed .nav-item .nav-svg { margin: 0 !important; }
body.sidebar-collapsed .nav-item .nav-svg,
body.sidebar-collapsed .sdb-brand-logo { width: 28px !important; height: 28px !important; padding: 2px !important; }
body.sidebar-collapsed .sdb-brand { padding: 14px 0 !important; justify-content: center !important; }
body.sidebar-collapsed .sdb-toggle svg { transform: rotate(180deg); }

/* ── Brand header — compacto e proporcional ──────────────────────────────────── */
.sdb-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 13px;
  border-bottom: 1px solid var(--sdb-divider);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 100%);
}
.sdb-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}
.sdb-brand-logo {
  width: 44px !important;
  height: 44px !important;
  border-radius: 11px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  background: rgba(255,255,255,.1);
  display: block !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.18);
  padding: 4px !important;
}
.sdb-brand-name { display: flex; flex-direction: column; min-width: 0; }
.sdb-brand-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--sdb-on);
  letter-spacing: -.3px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdb-brand-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--sdb-on-faint);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-top: 2px;
}
.sdb-toggle {
  width: 24px; height: 24px;
  border-radius: 6px; border: none;
  background: transparent; color: var(--sdb-on-faint);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .14s, color .14s;
}
.sdb-toggle:hover { background: var(--sdb-hover); color: var(--sdb-on); }
.sdb-toggle svg { transition: transform var(--t-sdb); }

/* ── School card — proporcional ──────────────────────────────────────────────── */
.sdb-school-card {
  margin: 6px 10px 3px;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--sdb-divider);
  flex-shrink: 0;
}
.sdb-school-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sdb-on);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdb-school-type {
  font-size: 10.5px;
  color: var(--sdb-on-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdb-school-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #93C5FD;
  letter-spacing: .25px;
}
.sdb-school-role-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #3B82F6; flex-shrink: 0;
}

/* Zerar espaço extra da section-label logo após o card */
.sidebar-nav > .sidebar-section-label:first-child { padding-top: 8px !important; }

/* Neutralizar regra antiga sdb-header apenas no contexto escola */
body[data-body-type="escola"] .sdb-header { display: none !important; }
body[data-body-type="aluno"]  .sdb-header { display: none !important; }

/* ── Nav items v2 ────────────────────────────────────────────────────────────── */
.sidebar-nav { padding: 6px 8px !important; gap: 1px !important; }

.sidebar .sidebar-section-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  color: var(--sdb-on-faint) !important;
  padding: 12px 10px 3px !important;
  text-transform: uppercase;
}
.sidebar-nav > .sidebar-section-label:first-child { padding-top: 6px !important; }

.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--sdb-on-dim) !important;
  font-size: 13px;
  font-weight: 500;
  transition: color .15s, background .15s;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar .nav-item:hover {
  color: var(--sdb-on) !important;
  background: var(--sdb-hover) !important;
}
.sidebar .nav-item.active {
  color: #ffffff !important;
  background: var(--sdb-active) !important;
  font-weight: 600;
}
.sidebar .nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 5px; bottom: 5px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #3B82F6 !important;
}
.sidebar .nav-item .nav-svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  opacity: .5;
  transition: opacity .15s;
}
.sidebar .nav-item:hover .nav-svg,
.sidebar .nav-item.active .nav-svg { opacity: 1 !important; }

/* Nav label (wraps text so we can hide it on collapse) */
.nav-item .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* CTA nav item */
.sidebar .nav-item.sdb-cta-item {
  color: #93C5FD !important;
  margin-top: 2px;
}
.sidebar .nav-item.sdb-cta-item:hover { background: rgba(59,130,246,.12) !important; color: #BFDBFE !important; }
.sdb-cta-sep { height: 1px; background: var(--sdb-divider); margin: 6px 10px; }

/* ── Footer v2 ───────────────────────────────────────────────────────────────── */
.sidebar-footer {
  padding: 0 !important;
  border-top: 1px solid var(--sdb-divider) !important;
  flex-shrink: 0;
}
.sdb-footer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  transition: background .14s;
  cursor: default;
}
.sdb-footer-row:hover { background: var(--sdb-hover); }
.sidebar-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  flex-shrink: 0;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}
.sdb-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--sdb-on);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdb-user-role {
  font-size: 10px;
  color: var(--sdb-on-faint);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdb-footer-actions {
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.btn-logout {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--sdb-on-faint) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background .14s, color .14s !important;
  padding: 0 !important;
}
.btn-logout:hover { background: rgba(239,68,68,.2) !important; color: #F87171 !important; }

/* ── Theme picker v2 — hidden (removed from sidebar) ─────────────────────────── */
._tp {
  display: none !important;
}
._tp-btn {
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  color: var(--sdb-on-faint) !important;
  transition: background .14s, color .14s, border-color .14s !important;
  padding: 0 !important;
  flex-shrink: 0;
}
._tp-btn:hover { background: var(--sdb-hover) !important; color: var(--sdb-on-dim) !important; }
._tp-btn.active {
  background: rgba(59,130,246,.2) !important;
  border-color: rgba(59,130,246,.4) !important;
  color: #93C5FD !important;
}

/* ── Page transition ─────────────────────────────────────────────────────────── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.page-content {
  animation: pageFadeIn .2s cubic-bezier(.22,1,.36,1) both;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────────── */
.sdb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.sdb-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .12s;
  white-space: nowrap;
}
.sdb-breadcrumb a:hover { color: var(--primary); }
.sdb-breadcrumb-sep { opacity: .45; font-size: 10px; }
.sdb-breadcrumb-current { color: var(--text-secondary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Dashboard KPI cards ──────────────────────────────────────────────────────── */
.metric-card {
  position: relative;
  overflow: hidden;
}
.metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
}
.metric-card--primary::before  { background: #0F3D75; }
.metric-card--success::before  { background: #10B981; }
.metric-card--warning::before  { background: #F59E0B; }
.metric-card--danger::before   { background: #EF4444; }
.metric-card--teal::before     { background: #0694A2; }
.metric-card--purple::before   { background: #7C3AED; }
.metric-card--info::before     { background: #1D4ED8; }

/* Staggered animation on load */
.metrics-grid .metric-card:nth-child(1) { --_d: 0ms; }
.metrics-grid .metric-card:nth-child(2) { --_d: 60ms; }
.metrics-grid .metric-card:nth-child(3) { --_d: 120ms; }
.metrics-grid .metric-card:nth-child(4) { --_d: 180ms; }

/* Label above value */
.metric-card .metric-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--text-muted) !important;
  margin-bottom: 4px;
}
.metric-card .metric-value {
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -1.5px !important;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums;
}
.metric-card .metric-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.metric-card .metric-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}
.metric-card .metric-trend {
  font-size: 11.5px !important;
  margin-top: 8px;
}

/* Dashboard section headers */
.dash-section-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  margin-top: 6px;
}
.dash-section-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  white-space: nowrap;
}
.dash-section-line { flex: 1; height: 1px; background: var(--border); }

/* Quick action chips */
.qa-card {
  border-radius: 8px !important;
  font-size: 12.5px !important;
  transition: all .15s !important;
}
.qa-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ── Skeleton melhorado — forma do conteúdo real ─────────────────────────────── */
.skeleton-kpi {
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.skeleton-kpi-icon { width: 40px; height: 40px; border-radius: 10px; }
.skeleton-kpi-lbl  { height: 11px; width: 90px; border-radius: 4px; margin-bottom: 8px; }
.skeleton-kpi-val  { height: 30px; width: 64px; border-radius: 6px; }
.skeleton-kpi-trend{ height: 10px; width: 120px; border-radius: 4px; }

/* ── Tooltip nos nav-items quando sidebar colapsada ─────────────────────────── */
body.sidebar-collapsed .sidebar .nav-item {
  position: relative;
}
body.sidebar-collapsed .sidebar .nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
body.sidebar-collapsed .sidebar .nav-item:hover::after { opacity: 1; }

/* ── Sidebar mobile overlay ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  body.sidebar-collapsed .main-content { margin-left: 0; }
}

/* ── Ensure legacy overrides don't fight ────────────────────────────────────── */
html[data-theme="light"] .sidebar { background: var(--sdb-bg) !important; }
html[data-theme="dark"]  .sidebar { background: var(--sdb-bg-deep) !important; }
html[data-theme="dim"]   .sidebar { background: #132d50 !important; }

html[data-theme="light"] .sidebar .nav-item         { color: var(--sdb-on-dim) !important; }
html[data-theme="light"] .sidebar .nav-item:hover   { color: var(--sdb-on) !important; background: var(--sdb-hover) !important; }
html[data-theme="light"] .sidebar .nav-item.active  { color: #fff !important; background: var(--sdb-active) !important; }
html[data-theme="dark"]  .sidebar .nav-item         { color: var(--sdb-on-dim) !important; }
html[data-theme="dark"]  .sidebar .nav-item:hover   { color: var(--sdb-on) !important; background: var(--sdb-hover) !important; }
html[data-theme="dark"]  .sidebar .nav-item.active  { color: #fff !important; background: var(--sdb-active) !important; }

/* Sidebar plan badge */
.sidebar-plan-badge { display: none; } /* moved to footer area */
.inst-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.inst-empty-desc {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 260px;
  line-height: 1.5;
}


/* ── 13. REAL-TIME PULSE INDICATORS ─────────────────────────────────────────
   Live status indicators for operational dashboards.
   ──────────────────────────────────────────────────────────────────────── */
.inst-live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}
.inst-live-dot.green  { background: var(--inst-success); animation: instLive 2.8s ease-in-out infinite; }
.inst-live-dot.amber  { background: var(--inst-warning); animation: instLive 2.0s ease-in-out infinite; }
.inst-live-dot.red    { background: var(--inst-danger);  animation: instLive 1.4s ease-in-out infinite; }
.inst-live-dot.blue   { background: var(--inst-info);    animation: instLive 3.0s ease-in-out infinite; }
.inst-live-dot.grey   { background: var(--inst-neutral); }

@keyframes instLive {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50%      { opacity: 0.3; }
}

/* Live ring pulse (larger — visible center dot + animated ring) */
.inst-live-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 8px; height: 8px;
  flex-shrink: 0;
}
.inst-live-ring::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.inst-live-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  animation: instRingPulse 2.5s ease-in-out infinite;
}
.inst-live-ring.green::before { background: var(--inst-success); }
.inst-live-ring.green::after  { border: 1.5px solid rgba(85,164,84,0.4); }
.inst-live-ring.red::before   { background: var(--inst-danger); }
.inst-live-ring.red::after    { border: 1.5px solid rgba(186,26,26,0.4); }
.inst-live-ring.amber::before { background: var(--inst-warning); }
.inst-live-ring.amber::after  { border: 1.5px solid rgba(217,119,6,0.4); }
@keyframes instRingPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0;transform:scale(1.6)} }


/* ── 14. INSTITUTIONAL NOTIFICATION BADGE ────────────────────────────────────
   Upgraded version of .notif-badge-dot.
   ──────────────────────────────────────────────────────────────────────── */
.notif-badge-dot:not([style*="none"]) {
  background: var(--inst-danger);
  font-family: var(--inst-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}


/* ── 15. NAV BADGE (sidebar counts) ─────────────────────────────────────────
   Monospaced count badge on sidebar nav items.
   ──────────────────────────────────────────────────────────────────────── */
.nav-badge {
  font-family: var(--inst-mono) !important;
  font-size: 9px !important;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  background: var(--inst-danger);
  color: white;
  letter-spacing: 0;
  margin-left: auto;
}


/* ── 16. MOBILE SIDEBAR (institutional) ─────────────────────────────────────
   Hamburger button styled for institutional navy sidebar.
   ──────────────────────────────────────────────────────────────────────── */
.mob-ham {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.mob-ham:hover { background: rgba(255,255,255,0.12); }
@media (max-width: 768px) {
  .mob-ham { display: flex; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPONENTES OPERACIONAIS — ATS Reference
   Frequência, Filas de Trabalho, Pendências
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Lista de Frequência (padrão ATS aluno-freq-item) ── */
.freq-list { list-style: none; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg-card); }
.freq-list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  gap: 12px; transition: background var(--t);
}
.freq-list-item:last-child { border-bottom: none; }
.freq-list-item:hover { background: var(--bg-subtle); }
.freq-item-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.freq-item-num { font-size: 11px; font-weight: 600; color: var(--text-muted); min-width: 22px; }
.freq-item-name { font-size: 13.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.freq-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.freq-status-btn {
  padding: 4px 14px; min-height: 30px; border-radius: 20px;
  border: 1.5px solid var(--border-strong); background: transparent;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t);
  font-family: inherit;
}
.freq-status-btn:hover { border-color: var(--border-hover); background: var(--bg-subtle); }
.freq-status-btn.presente { background: var(--success); border-color: var(--success); color: white; }
.freq-status-btn.falta    { background: var(--danger);  border-color: var(--danger);  color: white; }
.freq-status-btn.justificada { background: var(--warning); border-color: var(--warning); color: white; }

/* ── Contador de frequência (tira de estatísticas) ── */
.freq-counter {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 10px 0; margin-bottom: 4px;
}
.freq-counter-pill {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg-card);
}
.freq-counter-pill .pill-num { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.freq-counter-pill .pill-label { font-size: 10px; color: var(--text-muted); margin-top: 2px; font-weight: 500; }
.freq-counter-pill.presente .pill-num { color: var(--success); }
.freq-counter-pill.falta .pill-num    { color: var(--danger); }
.freq-counter-pill.justificada .pill-num { color: var(--warning); }

/* ── Fila de Trabalho / Pendências Operacionais ── */
.work-queue { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg-card); }
.work-queue-header {
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-subtle);
}
.work-queue-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.work-queue-count { font-size: 11px; font-weight: 700; background: var(--inst-navy); color: white; padding: 2px 7px; border-radius: 20px; }
.work-queue-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  transition: background var(--t);
}
.work-queue-item:last-child { border-bottom: none; }
.work-queue-item:hover { background: var(--bg-subtle); }
.work-queue-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.work-queue-dot.urgente { background: var(--danger); }
.work-queue-dot.normal  { background: var(--info); }
.work-queue-dot.ok      { background: var(--success); }
.work-queue-body { flex: 1; min-width: 0; }
.work-queue-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.work-queue-sub   { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.work-queue-meta  { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.work-queue-action { flex-shrink: 0; align-self: center; }
.work-queue-empty {
  padding: 28px 16px; text-align: center;
  color: var(--text-muted); font-size: 13px;
}

/* ── Lista de Aprovações ── */
.approval-list { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg-card); }
.approval-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.approval-item:last-child { border-bottom: none; }
.approval-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 4px; flex-shrink: 0;
}
.approval-tag.pendente  { background: var(--warning-dim); color: var(--warning); border: 1px solid var(--warning-border); }
.approval-tag.aprovado  { background: var(--success-dim); color: var(--success); border: 1px solid var(--success-border); }
.approval-tag.devolvido { background: var(--danger-dim);  color: var(--danger);  border: 1px solid var(--danger-border); }
.approval-body { flex: 1; min-width: 0; }
.approval-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.approval-detail { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.approval-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Indicadores Operacionais (linha de stats simples) ── */
.op-stats { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg-card); }
.op-stat-item { flex: 1; padding: 14px 16px; border-right: 1px solid var(--border); text-align: center; }
.op-stat-item:last-child { border-right: none; }
.op-stat-num { font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.op-stat-num.danger  { color: var(--danger); }
.op-stat-num.success { color: var(--success); }
.op-stat-num.warning { color: var(--warning); }
.op-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-weight: 500; }

/* ── Seção de página operacional ── */
.op-section { margin-bottom: 24px; }
.op-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA DE COMPONENTES GLOBAIS — v2
   Aplica-se a todas as páginas do sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── KPI / Metric strip ─────────────────────────────────────────────────── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.kpi-strip .kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow var(--t);
}
.kpi-strip .kpi-card:hover { box-shadow: var(--shadow); }
.kpi-card-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
}
.kpi-card-val {
  font-size: 26px; font-weight: 700; letter-spacing: -1px;
  color: var(--text-primary); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.kpi-card-sub {
  font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 4px;
}
.kpi-card-sub .up   { color: var(--success); }
.kpi-card-sub .down { color: var(--danger); }
.kpi-card-accent { width: 3px; border-radius: 2px; align-self: stretch; flex-shrink: 0; }
.kpi-card-accent.success { background: var(--success); }
.kpi-card-accent.danger  { background: var(--danger); }
.kpi-card-accent.warning { background: var(--warning); }
.kpi-card-accent.info    { background: var(--info); }
.kpi-card-inner { display: flex; gap: 12px; }

/* ── Page section header ────────────────────────────────────────────────── */
.section-hd {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; margin-top: 6px;
}
.section-hd-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); white-space: nowrap;
}
.section-hd-line { flex: 1; height: 1px; background: var(--border); }
.section-hd-action { font-size: 12px; color: var(--primary); font-weight: 600; white-space: nowrap; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center; gap: 10px;
}
.empty-state-icon { font-size: 36px; opacity: .4; }
.empty-state-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.empty-state-desc  { font-size: 13px; color: var(--text-muted); max-width: 320px; line-height: 1.5; }

/* ── Error banner ───────────────────────────────────────────────────────── */
.error-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r);
  background: var(--danger-dim); border: 1px solid var(--danger-border);
  color: var(--danger); font-size: 13px; font-weight: 500; margin-bottom: 16px;
}
.warning-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r);
  background: var(--warning-dim); border: 1px solid var(--warning-border);
  color: var(--warning); font-size: 13px; font-weight: 500; margin-bottom: 16px;
}
.info-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r);
  background: var(--inst-info-bg); border: 1px solid rgba(64,95,145,.2);
  color: var(--info); font-size: 13px; font-weight: 500; margin-bottom: 16px;
}
.success-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r);
  background: var(--success-dim); border: 1px solid var(--success-border);
  color: var(--success); font-size: 13px; font-weight: 500; margin-bottom: 16px;
}

/* ── Data table aprimorada ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); }
.data-table {
  width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap;
}
.data-table thead th {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); padding: 8px 14px 10px; border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap; background: var(--bg-subtle);
}
.data-table tbody td {
  padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle;
  color: var(--text-primary); white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td     { background: var(--bg-subtle); }

/* ── Card grid responsivo ───────────────────────────────────────────────── */
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

/* ── Action bar (barra de ações acima de tabelas) ───────────────────────── */
.action-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.action-bar-left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.action-bar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Stat inline (número + label lado a lado) ───────────────────────────── */
.stat-inline { display: flex; align-items: baseline; gap: 5px; }
.stat-inline-num   { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.stat-inline-label { font-size: 12px; color: var(--text-muted); }

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--inst-info-bg); color: var(--info);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.avatar-sm  { width: 28px; height: 28px; font-size: 11px; }
.avatar-lg  { width: 48px; height: 48px; font-size: 16px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.gestao      { background: rgba(96,165,250,.12); color: var(--inst-gestao-accent); }
.avatar.professor   { background: rgba(52,211,153,.12); color: var(--inst-professor-accent); }
.avatar.secretaria  { background: rgba(251,191,36,.12); color: var(--inst-secretaria-accent); }
.avatar.diretora    { background: rgba(52,211,153,.12); color: var(--inst-diretora-accent); }

/* ── List item padrão (pessoa, item, registro) ──────────────────────────── */
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: none; }
.list-item-body { flex: 1; min-width: 0; }
.list-item-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item-sub   { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.list-item-aside { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

/* ── Progress bar aprimorada ────────────────────────────────────────────── */
.progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 3px; transition: width .6s cubic-bezier(.22,1,.36,1); }
.progress-bar.primary { background: var(--primary); }
.progress-bar.success { background: var(--success); }
.progress-bar.warning { background: var(--warning); }
.progress-bar.danger  { background: var(--danger); }

/* ── Inline form fields ─────────────────────────────────────────────────── */
.field       { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.field-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ── Paginação ──────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.pagination-info { font-size: 12px; color: var(--text-muted); }
.pagination-btns { display: flex; gap: 4px; }
.page-btn {
  min-width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-card);
  font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
  transition: all var(--t);
}
.page-btn:hover   { border-color: var(--primary); color: var(--primary); }
.page-btn.active  { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE GLOBAL — Componentes de página
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 900px) ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .field-row-3 { grid-template-columns: 1fr 1fr; }

  .fin-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .admin-metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .profs-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .alunos-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .turmas-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .dir-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hist-kpi-row { flex-wrap: wrap !important; }
  .hist-kpi-row > .hist-kpi { flex: 1 1 calc(50% - 8px) !important; }
}

/* ── Mobile (≤ 600px) ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .kpi-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card-grid-4, .card-grid-3, .card-grid-2 { grid-template-columns: 1fr; }
  .card-grid-auto { grid-template-columns: 1fr; }
  .field-row, .field-row-3 { grid-template-columns: 1fr; }
  .action-bar { flex-direction: column; align-items: stretch; }
  .action-bar-right { justify-content: flex-end; }
  .filters-bar { flex-direction: column !important; gap: 8px !important; }
  .filters-bar .search-box { width: 100%; }
  .filters-bar .search-box .form-input { width: 100%; }
  .filters-bar .form-select { width: 100%; }
  .filters-bar select        { width: 100%; }

  .fin-kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .metrics-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .admin-metrics { grid-template-columns: 1fr !important; }
  .profs-grid   { grid-template-columns: 1fr !important; }
  .turmas-grid  { grid-template-columns: 1fr !important; }
  .dir-kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  .data-table { font-size: 12px; }
  .data-table thead th,
  .data-table tbody td { padding: 8px 10px; }

  .pagination { flex-direction: column; gap: 10px; align-items: center; }

  .top-bar-actions .btn-outline:not(.btn-icon) { display: none; }

  .kpi-card-val { font-size: 22px; }
  .op-stat-num  { font-size: 18px; }
  .op-stats     { flex-direction: column; }
  .op-stat-item { border-right: none; border-bottom: 1px solid var(--border); }
  .op-stat-item:last-child { border-bottom: none; }

  .cat-bar-track { flex: 1 !important; }
}

/* ── Mobile pequeno (≤ 380px) ───────────────────────────────────────────── */
@media (max-width: 380px) {
  .kpi-strip    { grid-template-columns: 1fr; }
  .fin-kpi-grid { grid-template-columns: 1fr !important; }
  .metrics-grid { grid-template-columns: 1fr !important; }
  .dir-kpi-grid { grid-template-columns: 1fr !important; }
}

/* ── Dark theme aprimorado ──────────────────────────────────────────────── */
html[data-theme="dim"] .data-table thead th { background: var(--bg-elevated); }
html[data-theme="dim"] .kpi-strip .kpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.4); }

/* ══════════════════════════════════════════════════════════════════════════
   MELHORIAS VISUAIS V1
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Dark mode — tokens ausentes corrigidos ───────────────────────────── */
html[data-theme="dark"] {
  --bg:             #111827;
  --bg-subtle:      #1a2233;
  --bg-card:        #1f2937;
  --bg-card-hover:  #273344;
  --bg-elevated:    #1f2937;
  --bg-input:       #111827;
  --sidebar-bg:     #0a1628;
  --border:         rgba(255,255,255,.08);
  --border-hover:   rgba(255,255,255,.14);
  --border-strong:  rgba(255,255,255,.20);
  --border-focus:   #3B82F6;
  --text-primary:   #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted:     #6b7280;
  --text-dim:       #4b5563;
  --topbar-bg:      rgba(17,24,39,.92);
  --primary:        #3B82F6;
}
html[data-theme="dark"] .data-table thead th   { background: var(--bg-elevated); }
html[data-theme="dark"] .kpi-strip .kpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.5); }
html[data-theme="dark"] .btn-secondary         { background: rgba(255,255,255,.07); color: var(--text-secondary); border-color: var(--border); }
html[data-theme="dark"] .btn-secondary:hover   { background: rgba(255,255,255,.11); }
html[data-theme="dark"] .skeleton             { background: linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.05) 75%); background-size:200% 100%; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb       { background: rgba(255,255,255,.12); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.20); }
html[data-theme="dark"] .tbl tbody td,
html[data-theme="dark"] .table tbody td    { color: #d1d5db; }
html[data-theme="dark"] .td-name,
html[data-theme="dark"] .cell-name         { color: #f9fafb; }
html[data-theme="dark"] .td-dim,
html[data-theme="dark"] .cell-muted        { color: #6b7280; }
html[data-theme="dark"] .topbar-title,
html[data-theme="dark"] .top-bar-title     { color: #f9fafb; font-weight: 700; }
html[data-theme="dark"] .topbar-sub,
html[data-theme="dark"] .top-bar-subtitle  { color: #6b7280; }
html[data-theme="dark"] .card-title        { color: #f9fafb; }
html[data-theme="dark"] .card-sub,
html[data-theme="dark"] .card-subtitle     { color: #6b7280; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .kpi               { box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2); }
html[data-theme="dark"] .modal-close       { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .notif-btn,
html[data-theme="dark"] .notif-trigger     { background: rgba(255,255,255,.06); border-color: var(--border); }

/* ── 2. Sparkline nos KPI cards ─────────────────────────────────────────── */
.kpi-spark-wrap {
  display: flex; align-items: center; justify-content: flex-end;
  margin-top: 4px; width: 100%;
}
.kpi-spark {
  width: 72px; height: 22px; display: block; flex-shrink: 0;
  opacity: .65; transition: opacity .2s;
}
.metric-card:hover .kpi-spark { opacity: 1; }

/* Color by trend direction */
.kpi-spark--up   .kpi-spark { color: var(--inst-success); }
.kpi-spark--down .kpi-spark { color: var(--inst-danger); }
.kpi-spark--flat .kpi-spark { color: var(--inst-neutral); }

/* ── 3. Empty states ilustrados ─────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 24px; text-align: center; gap: 12px;
}
.empty-state-icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--bg-subtle); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.empty-state-title {
  font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0;
}
.empty-state-desc {
  font-size: 13px; color: var(--text-muted); max-width: 300px;
  line-height: 1.6; margin: 0;
}
.empty-state-action {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 8px;
  background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 600; text-decoration: none;
  border: none; cursor: pointer; transition: opacity .15s;
}
.empty-state-action:hover { opacity: .88; }

/* notif-empty upgrade */
.notif-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 20px; text-align: center;
}
.notif-empty-icon { font-size: 28px; opacity: .4; }
.notif-empty-text { font-size: 13px; color: var(--text-muted); }

/* ── Aliases — cobre variações antigas (.empty-icon / .empty-title / .empty-msg) ── */
/* Garante que páginas que usam classes antigas herdem o novo estilo sem editar cada arquivo */
.empty-state .empty-icon,
.empty-state .empty-icon svg {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--bg-subtle); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin: 0 auto 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.empty-state .empty-icon svg { padding: 10px; box-sizing: border-box; opacity: .5; }
.empty-state .empty-title {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
}
.empty-state .empty-msg {
  font-size: 13px; color: var(--text-muted); max-width: 300px;
  line-height: 1.6; margin: 0 auto;
}

/* ── Dark mode — empty states mais visíveis ───────────────────────────── */
html[data-theme="dark"] .empty-state .empty-icon,
html[data-theme="dark"] .empty-state-icon {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dim"] .empty-state .empty-icon,
html[data-theme="dim"] .empty-state-icon {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   IMPRESSÃO / PDF — padronizado para toda a solution
   ══════════════════════════════════════════════════════════════════════════ */
#print-header { display: none; }

@media print {
  /* Ocultar elementos de navegação e ação */
  .sidebar, .top-bar, .op-topstrip, .mob-ham, .mob-backdrop,
  .filters-bar, .action-bar, .top-bar-actions,
  .modal, .overlay, .sdb-breadcrumb,
  .no-print, ._tbl-export-btn, ._btn-pdf { display: none !important; }

  /* Reset layout — sem sidebar */
  body, html { background: #fff !important; color: #000 !important; }
  .app-layout { display: block !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; }
  .page-content { padding: 20px 24px !important; }

  /* Cabeçalho institucional */
  #print-header {
    display: flex !important; align-items: center; gap: 16px;
    padding: 18px 24px 14px; border-bottom: 2px solid #405F91;
    margin-bottom: 20px; page-break-inside: avoid;
  }
  #print-header img { width: 60px; height: 60px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
  #print-header .ph-no-logo {
    width: 60px; height: 60px; border-radius: 6px; background: #e8edf5;
    display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
  }
  #print-header .ph-info { flex: 1; }
  #print-header .ph-escola { font-size: 17px; font-weight: 800; color: #1a1a2e; line-height: 1.2; }
  #print-header .ph-titulo { font-size: 12px; font-weight: 600; color: #405F91; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
  #print-header .ph-meta   { font-size: 10.5px; color: #666; margin-top: 6px; line-height: 1.6; }
  #print-header .ph-meta span { margin-right: 16px; }

  /* Tabelas e cards ficam limpos */
  .card { box-shadow: none !important; border: 1px solid #e0e0e0 !important; break-inside: avoid; }
  .data-table thead th, .lanc-table thead th, .pat-table thead th,
  .est-table thead th { background: #f8f8f8 !important; color: #333 !important; }
  .data-table tbody td, .lanc-table td, .pat-table td, .est-table td { color: #222 !important; }

  /* KPI cards em linha */
  .fin-kpi-grid, .est-kpi-grid, .pat-kpi-grid, .kpi-strip,
  .dir-kpi-grid { break-inside: avoid; }

  /* Texto e links */
  a { color: #000 !important; text-decoration: none !important; }

  /* Quebra de página */
  .print-break { page-break-before: always; }
}

/* ============================================================
   UX AVANÇADO V39
   ============================================================ */

/* ── 2. Skeleton shimmer ─────────────────────────────────── */
@keyframes skel-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-subtle) 25%, var(--bg-elevated) 50%, var(--bg-subtle) 75%);
  background-size: 1200px 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}
.skel-line        { height: 13px; border-radius: 4px; }
.skel-line.sm     { height:  9px; }
.skel-line.lg     { height: 20px; }
.skel-circle      { border-radius: 50%; }
.skel-block       { border-radius: var(--r); }

/* Auto-skeleton on .loading-spinner parent rows in data tables */
table._loading tbody tr._skel-row td > div {
  animation: skel-shimmer 1.6s ease-in-out infinite;
  background: linear-gradient(90deg,
    var(--bg-subtle) 25%, var(--bg-elevated) 50%, var(--bg-subtle) 75%);
  background-size: 1200px 100%;
  border-radius: 4px; height: 13px;
}

/* ── 3. Confirmação elegante ─────────────────────────────── */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 10010;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s; padding: 20px;
}
.confirm-overlay.active { opacity: 1; }
.confirm-overlay.active .confirm-box { transform: none; opacity: 1; }
.confirm-box {
  background: var(--bg-card); border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  padding: 28px 28px 22px; max-width: 400px; width: 100%;
  transform: translateY(18px) scale(.97); opacity: 0;
  transition: transform .24s cubic-bezier(0.22,1,0.36,1), opacity .2s;
}
.confirm-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.confirm-icon.danger  { background: rgba(186,26,26,.1);  color: #BA1A1A; }
.confirm-icon.warning { background: rgba(217,119,6,.1);  color: #D97706; }
.confirm-icon.info    { background: rgba(64,95,145,.1);  color: #405F91; }
.confirm-title  { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; line-height: 1.3; }
.confirm-msg    { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 22px; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn-danger { background: #BA1A1A; color: #fff; border-color: #BA1A1A; }
.btn-danger:hover { background: #9b1616; border-color: #9b1616; }

/* ── 4. Atalhos de teclado — painel ─────────────────────── */
._shortcuts-overlay {
  position: fixed; inset: 0; z-index: 10005;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .18s; padding: 20px;
}
._shortcuts-overlay.active { opacity: 1; pointer-events: all; }
._shortcuts-overlay.active ._shortcuts-box { transform: none; opacity: 1; }
._shortcuts-box {
  background: var(--bg-card); border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  padding: 24px 28px 22px; max-width: 480px; width: 100%;
  transform: translateY(18px); opacity: 0;
  transition: transform .24s cubic-bezier(0.22,1,0.36,1), opacity .2s;
}
._shortcuts-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
._shortcuts-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
._shortcuts-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 5px; }
._shortcuts-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
._shortcuts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
._shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
._shortcut-row:last-child { border-bottom: none; }
._shortcut-label { font-size: 12.5px; color: var(--text-secondary); }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border: 1px solid var(--border);
  border-radius: 5px; background: var(--bg-elevated);
  font-size: 11px; font-family: var(--inst-mono, monospace);
  color: var(--text-primary); box-shadow: 0 1px 0 var(--border);
  white-space: nowrap; line-height: 1.5;
}

/* ── 5. Notificações in-app ──────────────────────────────── */
._notif-wrap {
  position: relative; display: inline-flex; flex-shrink: 0;
}
._notif-btn {
  background: none; border: none; cursor: pointer;
  padding: 6px 7px; border-radius: 8px; color: var(--text-muted);
  transition: background .12s, color .12s; display: flex; align-items: center;
}
._notif-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
._notif-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; background: #BA1A1A; color: #fff;
  border-radius: 8px; font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1; pointer-events: none;
  transform: scale(0); transition: transform .2s cubic-bezier(0.34,1.56,0.64,1);
}
._notif-badge.show { transform: scale(1); }
._notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; width: 320px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: 0 16px 44px rgba(0,0,0,.2);
  z-index: 9000; max-height: 420px; overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-8px) scale(.97); pointer-events: none;
  transition: opacity .18s, transform .2s cubic-bezier(0.22,1,0.36,1);
}
._notif-dropdown.open { opacity: 1; transform: none; pointer-events: all; }
._notif-hd { padding: 13px 16px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
._notif-hd-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
._notif-hd-clear { font-size: 11px; color: var(--primary); background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
._notif-hd-clear:hover { text-decoration: underline; }
._notif-list { overflow-y: auto; flex: 1; }
._notif-item { padding: 10px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-start; transition: background .1s; cursor: default; }
._notif-item:last-child { border-bottom: none; }
._notif-item:hover { background: var(--bg-subtle); }
._notif-item._unread { background: var(--primary-glow, rgba(64,95,145,.07)); }
._notif-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
._notif-dot.success { background: #55A454; }
._notif-dot.error   { background: #BA1A1A; }
._notif-dot.warning { background: #D97706; }
._notif-dot.info    { background: #405F91; }
._notif-content { flex: 1; min-width: 0; }
._notif-item-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
._notif-item-body  { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
._notif-item-time  { font-size: 10px; color: var(--text-muted); margin-top: 3px; opacity: .7; }
._notif-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
._notif-empty svg { display: block; margin: 0 auto 10px; opacity: .3; }

/* ============================================================
   VISUAL PREMIUM V40
   ============================================================ */

/* ============================================================
   PWA / STANDALONE — PROFISSIONAL V42
   ============================================================ */

/* ── Botões: feedback tátil nativo ───────────────────────── */
button, a, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ── Overscroll: sem bounce na raiz do app ───────────────── */
html, body { overscroll-behavior: none; }

/* ── Safe area — iOS notch / Dynamic Island / home bar ───── */
:root {
  --sat: env(safe-area-inset-top,    0px);
  --sar: env(safe-area-inset-right,  0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
}

/* Topbar absorve a status bar */
.top-bar {
  padding-top: var(--sat);
  height: calc(var(--topbar-h, 60px) + var(--sat));
}

/* Sidebar absorve safe areas dos dois lados */
.sidebar {
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
}

/* Conteúdo principal: clearance do home indicator */
.main-content { padding-bottom: var(--sab); }

/* ── Modo standalone — body recebe classe _pwa-sa ────────── */
body._pwa-sa .top-bar { background: var(--topbar-bg); }

/* ── Bottom tab bar (standalone mobile escola) ───────────── */
._bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
  padding-right: var(--sar);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
html[data-theme="light"] ._bottom-nav { background: rgba(255,255,255,.92); }
html[data-theme="dark"]  ._bottom-nav { background: rgba(14,16,28,.92); }
html[data-theme="dim"]   ._bottom-nav { background: rgba(22,26,38,.92); }

._bottom-nav-inner {
  display: flex; align-items: stretch;
  height: 56px;
}

._bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; text-decoration: none;
  color: var(--text-muted); font-size: 10px; font-weight: 600;
  letter-spacing: .02em; padding: 6px 4px;
  border: none; background: none; cursor: pointer;
  transition: color .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
}
._bn-item:active { transform: scale(.93); }
._bn-item.active { color: var(--primary); }
._bn-item.active ._bn-icon { transform: translateY(-2px); }
._bn-icon { transition: transform .18s cubic-bezier(0.34,1.56,0.64,1); }
._bn-pip {
  position: absolute; top: 8px; right: calc(50% - 14px);
  width: 7px; height: 7px; border-radius: 50%; background: #BA1A1A;
  border: 1.5px solid var(--bg-card);
  display: none;
}
._bn-pip.show { display: block; }

/* Show bottom nav only in standalone OR narrow screen in standalone mode */
@media (display-mode: standalone) {
  body[data-body-type="escola"] ._bottom-nav { display: block; }
  body[data-body-type="escola"] .page-content {
    padding-bottom: calc(56px + var(--sab) + 16px);
  }
}
/* Also show on very small screens when _pwa-sa class is set */
body._pwa-sa[data-body-type="escola"] ._bottom-nav { display: block; }
body._pwa-sa[data-body-type="escola"] .page-content {
  padding-bottom: calc(56px + var(--sab) + 16px);
}

/* ── Back button no topbar (standalone) ──────────────────── */
._pwa-back {
  width: 36px; height: 36px; border-radius: 10px; background: none;
  border: none; cursor: pointer; display: none; align-items: center;
  justify-content: center; color: var(--text-secondary); flex-shrink: 0;
  transition: background .12s, color .12s; touch-action: manipulation;
}
._pwa-back:hover { background: var(--bg-elevated); color: var(--text-primary); }
._pwa-back.show { display: flex; }

/* ── Window Controls Overlay (desktop PWA titlebar) ──────── */
@media (display-mode: window-controls-overlay) {
  .top-bar {
    position: fixed;
    top: env(titlebar-area-y, 0);
    left: env(titlebar-area-x, 0);
    width: env(titlebar-area-width, 100%);
    height: calc(env(titlebar-area-height, 60px));
    padding-top: 0;
    -webkit-app-region: drag;
    app-region: drag;
  }
  .top-bar > *, .top-bar button, .top-bar a, .top-bar input, .top-bar select {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
  .main-content { padding-top: env(titlebar-area-height, 60px); }
  .sidebar { top: env(titlebar-area-height, 0); height: calc(100dvh - env(titlebar-area-height, 60px)); }
}

/* ── Seleção de texto com cor da marca ─────────────────── */
::selection { background: rgba(64,95,145,.18); color: inherit; }

/* ── Scrollbars temáticas ────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(64,95,145,.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(64,95,145,.42); }

/* ── Body — fundo com micro-textura (light only) ─────────── */
html[data-theme="light"] body {
  background-image: radial-gradient(rgba(64,95,145,.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── Topbar glass ────────────────────────────────────────── */
.top-bar {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
html[data-theme="light"] .top-bar {
  background: rgba(249,250,255,.88) !important;
  border-bottom-color: rgba(64,95,145,.12) !important;
}
html[data-theme="dark"]  .top-bar { background: rgba(14,16,28,.88) !important; }
html[data-theme="dim"]   .top-bar { background: rgba(22,26,38,.88) !important; }

/* ── Sidebar active item — gradient pill ─────────────────── */
.sidebar .nav-item.active {
  background: linear-gradient(120deg, var(--primary,#405F91) 0%, #5a7fbb 100%) !important;
  box-shadow: 0 3px 14px rgba(64,95,145,.38), inset 0 1px 0 rgba(255,255,255,.12) !important;
  color: #fff !important;
  font-weight: 600;
}
.sidebar .nav-item.active::before {
  display: none !important;  /* remove the left stripe — gradient speaks for itself */
}
.sidebar .nav-item.active .nav-svg { opacity: 1 !important; color: #fff !important; }

/* ── Card polish — elevation + accent on hover ───────────── */
.card {
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  transition: box-shadow .22s cubic-bezier(0.22,1,0.36,1),
              transform .22s cubic-bezier(0.22,1,0.36,1),
              border-color .22s !important;
}
.card:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(64,95,145,.18) !important;
}
/* Cards inside modals / nested cards — no lift */
.modal .card:hover, .overlay .card:hover,
.card .card:hover { transform: none !important; box-shadow: none !important; }

/* ── Metric cards — gradient top-accent on hover ─────────── */
.metric-card { overflow: visible; }
.metric-card::after {
  content: '';
  position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary,#405F91), #76a0d8);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  opacity: 0; transition: opacity .22s;
}
.metric-card:hover::after { opacity: 1; }

/* ── Primary button — gradient + glow ────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #405F91 0%, #5a7fbb 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(64,95,145,.38), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 22px rgba(64,95,145,.5), inset 0 1px 0 rgba(255,255,255,.14) !important;
  transform: translateY(-1px) scale(1.01) !important;
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(.98) !important;
  box-shadow: 0 2px 8px rgba(64,95,145,.3) !important;
}

/* ── Section header line — gradient ──────────────────────── */
.section-hd-line, .dash-section-line {
  height: 2px !important;
  background: linear-gradient(90deg, rgba(64,95,145,.5) 0%, transparent 100%) !important;
  border: none !important;
  border-radius: 2px;
}

/* ── Input focus — ring + soft glow ──────────────────────── */
input:focus, textarea:focus, select:focus,
.form-input:focus, .form-select:focus, .form-control:focus,
.form-field input:focus, .form-field select:focus,
.form-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(64,95,145,.16), 0 1px 4px rgba(0,0,0,.08) !important;
  border-color: var(--primary) !important;
  outline: none !important;
}

/* ── Toast premium ───────────────────────────────────────── */
.toast {
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08),
              inset 0 1px 0 rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
html[data-theme="light"] .toast { background: rgba(255,255,255,.95) !important; }

/* ── Modal / confirm backdrops ───────────────────────────── */
.modal-overlay { backdrop-filter: blur(6px) saturate(160%); }
.modal, .modal-box {
  box-shadow: 0 32px 80px rgba(0,0,0,.28),
              0 0 0 1px rgba(255,255,255,.06),
              inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.confirm-box {
  box-shadow: 0 32px 80px rgba(0,0,0,.28),
              0 0 0 1px rgba(255,255,255,.06) !important;
}

/* ── Dropdown menus premium ──────────────────────────────── */
._notif-dropdown, .global-search-results {
  box-shadow: 0 16px 48px rgba(0,0,0,.2),
              0 4px 12px rgba(0,0,0,.08),
              0 0 0 1px rgba(64,95,145,.08) !important;
  backdrop-filter: blur(8px);
}

/* ── Focus ring global ───────────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(64,95,145,.6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Badges / chips polish ───────────────────────────────── */
.badge, .chip, .freq-badge, .status-badge, .role-badge {
  font-weight: 700 !important;
  letter-spacing: .03em;
}

/* ── Table row hover — more visible ──────────────────────── */
.data-table tbody tr:hover td,
.lanc-table tr:hover td,
.table tbody tr:hover td {
  background: rgba(64,95,145,.04) !important;
}

/* ── Sidebar logo area — subtle gradient border ──────────── */
.sidebar-logo, .sidebar-logo--full {
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

/* ── PWA install / update banner ────────────────────────── */
._pwa-banner {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(120%);
  z-index: 9500; display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 12px 16px; max-width: 420px; width: calc(100% - 32px);
  box-shadow: 0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
  transition: transform .38s cubic-bezier(0.22,1,0.36,1), opacity .25s;
  opacity: 0;
}
._pwa-banner.show { transform: translateX(-50%) translateY(0); opacity: 1; }
._pwa-update { border-color: rgba(64,95,145,.3); background: rgba(64,95,145,.04); }
._pwa-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
._pwa-sub   { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
._pwa-x {
  background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px;
  color: var(--text-muted); flex-shrink: 0; line-height: 1;
  transition: background .12s, color .12s;
}
._pwa-x:hover { background: var(--bg-elevated); color: var(--text-primary); }

/* ── "Ao vivo" badge ─────────────────────────────────────── */
._live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 20px; font-size: 11px; font-weight: 700;
  color: var(--text-muted); border: 1px solid var(--border);
  background: var(--bg-subtle); opacity: 0; transition: opacity .3s;
  pointer-events: none; user-select: none; letter-spacing: .03em;
}
._live-badge.active { opacity: 1; color: #55A454; border-color: rgba(85,164,84,.3); background: rgba(85,164,84,.07); }
._live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #55A454;
  animation: esbpulse 2s ease-in-out infinite;
}
._live-label { text-transform: lowercase; }

/* ── Offline queue badge ─────────────────────────────────── */
._queue-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 20px; font-size: 11px; font-weight: 700;
  color: #D97706; border: 1px solid rgba(217,119,6,.3);
  background: rgba(217,119,6,.08);
}

/* ── Page-enter animation — keep from V39 ────────────────── */
/* ── 6. Micro-animações de página ───────────────────────── */
@keyframes _pg-in  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes _pg-out { to   { opacity: 0; transform: translateY(-8px); } }

.page-content { animation: _pg-in .38s cubic-bezier(0.22,1,0.36,1) both; }

body._page-exit .page-content,
body._page-exit .top-bar,
body._page-exit .op-topstrip { animation: _pg-out .22s ease-in forwards !important; }

/* Hover nos links da sidebar — micro-bounce */
.sidebar-nav-link { transition: background var(--t), color var(--t), transform .15s cubic-bezier(0.34,1.56,0.64,1) !important; }
.sidebar-nav-link:active { transform: scale(.97) !important; }

/* Botões com feedback tátil */
.btn { transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform .12s !important; }
.btn:active:not(:disabled) { transform: scale(.96) !important; }

/* ── IA Assistente Pedagógica ────────────────────────────────────────────────── */
._ia-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1200;
  width: 52px; height: 52px;
  border-radius: 16px;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  box-shadow: 0 4px 20px rgba(99,102,241,.45), 0 1px 4px rgba(0,0,0,.2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s;
  padding: 0;
}
body._pwa-sa ._ia-fab { bottom: calc(64px + var(--sab, 0px) + 12px); }
._ia-fab:hover { transform: scale(1.07); box-shadow: 0 6px 28px rgba(99,102,241,.55); }
._ia-fab.active { background: linear-gradient(135deg, #4f46e5, #7c3aed); transform: scale(.97); }
._ia-fab-label { font-size: 9px; font-weight: 700; letter-spacing: .04em; line-height: 1; }

._ia-panel {
  position: fixed;
  bottom: 88px; right: 24px;
  z-index: 1199;
  width: 360px; max-width: calc(100vw - 32px);
  height: min(560px, calc(100dvh - 120px));
  background: var(--surface, #fff);
  border-radius: 20px;
  box-shadow: 0 8px 48px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08), 0 0 0 1px rgba(99,102,241,.12);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: scale(.92) translateY(12px);
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom right;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s ease;
}
body._pwa-sa ._ia-panel { bottom: calc(64px + var(--sab, 0px) + 76px); }
._ia-panel.open { transform: none; opacity: 1; pointer-events: auto; }

._ia-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(139,92,246,.04));
}
._ia-header-info { display: flex; align-items: center; gap: 10px; }
._ia-avatar {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
._ia-header-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
._ia-header-status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
._ia-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; display: inline-block; }
._ia-header-close {
  width: 28px; height: 28px; border-radius: 8px; border: none;
  background: transparent; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s;
}
._ia-header-close:hover { background: var(--surface-alt, rgba(0,0,0,.06)); color: var(--text-primary); }

._ia-messages {
  flex: 1; overflow-y: auto; padding: 14px 14px 8px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
._ia-messages::-webkit-scrollbar { width: 4px; }
._ia-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

._ia-msg {
  max-width: 88%; padding: 10px 13px;
  border-radius: 14px; font-size: 13.5px; line-height: 1.55;
  animation: _ia-pop .18s cubic-bezier(.34,1.56,.64,1) both;
}
._ia-msg p { margin: 0 0 6px; }
._ia-msg p:last-child { margin-bottom: 0; }
@keyframes _ia-pop { from { opacity:0; transform:translateY(6px) scale(.97); } to { opacity:1; transform:none; } }

._ia-msg--ai {
  background: var(--surface-alt, rgba(0,0,0,.04));
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
._ia-msg--user {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  margin-left: auto;
}
._ia-msg--error { background: rgba(239,68,68,.08); color: #dc2626; border: 1px solid rgba(239,68,68,.2); }

._ia-typing { display: flex; align-items: center; }
._ia-dots { display: flex; gap: 4px; padding: 2px 0; }
._ia-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted);
  animation: _ia-bounce 1.2s ease-in-out infinite;
}
._ia-dots span:nth-child(2) { animation-delay: .2s; }
._ia-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes _ia-bounce { 0%,80%,100% { transform: scale(.7); opacity:.5; } 40% { transform: scale(1); opacity:1; } }

._ia-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-self: flex-start;
}
._ia-sug {
  padding: 6px 11px; border-radius: 20px; font-size: 12px; cursor: pointer;
  background: var(--surface, #fff);
  border: 1px solid rgba(99,102,241,.3);
  color: #6366f1;
  transition: background .14s, border-color .14s, transform .12s;
  text-align: left; line-height: 1.3;
}
._ia-sug:hover { background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.5); transform: translateY(-1px); }

._ia-composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
  flex-shrink: 0;
}
._ia-input {
  flex: 1; resize: none; border-radius: 10px; border: 1.5px solid var(--border, rgba(0,0,0,.1));
  background: var(--surface-alt, rgba(0,0,0,.03));
  color: var(--text-primary); font-size: 13.5px; line-height: 1.5;
  padding: 8px 11px; outline: none;
  font-family: inherit; transition: border-color .15s;
  max-height: 120px; overflow-y: auto;
}
._ia-input:focus { border-color: #6366f1; }
._ia-input::placeholder { color: var(--text-muted); }
._ia-send {
  width: 36px; height: 36px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s, transform .12s;
}
._ia-send:hover { opacity: .9; transform: scale(1.05); }
._ia-send:disabled { opacity: .45; cursor: default; transform: none; }

._ia-footer-note {
  text-align: center; font-size: 10.5px; color: var(--text-muted);
  padding: 0 12px 10px; flex-shrink: 0;
}

@media (max-width: 480px) {
  ._ia-panel { right: 12px; bottom: 76px; width: calc(100vw - 24px); }
  ._ia-fab   { right: 16px; bottom: 20px; }
  body._pwa-sa ._ia-panel { bottom: calc(64px + var(--sab, 0px) + 68px); }
  body._pwa-sa ._ia-fab   { bottom: calc(64px + var(--sab, 0px) + 8px); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESIGN UNIFICATION UTILITIES — Sprint 3
   Normaliza KPI cards, empty states, tabelas, animações e toasts
   em toda a aplicação sem quebrar páginas existentes.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 1. KPI card unificado ────────────────────────────────────
   Todas as variantes de KPI card passam a ter sombra suave
   e hover consistente. Não altera layout (padding/grid ficam
   nas páginas individuais). */
.ba-kpi, .pm-kpi, .est-kpi, .dir-kpi, .hist-kpi, .ver-kpi, .kpi-card {
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.ba-kpi:hover, .pm-kpi:hover, .est-kpi:hover,
.dir-kpi:hover, .hist-kpi:hover, .kpi-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-hover);
}
/* Classes genéricas para novas páginas */
.kpi-card { padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); }
.kpi-card-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 4px; }
.kpi-card-val   { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-card-sub   { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* ── 2. Cores semânticas via CSS vars (override hardcoded) ── */
.ba-kpi-val.danger, .pm-kpi-val.danger, .est-kpi-val.danger,
.text-danger  { color: var(--danger)  !important; }
.ba-kpi-val.amber,  .pm-kpi-val.amber,  .est-kpi-val.amber,
.text-warning { color: var(--warning) !important; }
.ba-kpi-val.green,  .pm-kpi-val.green,  .pm-school-freq.green,
.text-success { color: var(--success) !important; }
.pm-school-freq.amber  { color: var(--warning) !important; }
.pm-school-freq.danger { color: var(--danger)  !important; }
.ba-pct.crit           { color: var(--danger)  !important; }
.ba-pct.alert,
.ba-pct.risk           { color: var(--warning) !important; }
.pm-risco-pct          { color: var(--danger)  !important; }
.ba-tab .cnt.red       { background: var(--danger)  !important; }
.pm-alert-dot.red      { background: var(--danger)  !important; }
.pm-alert-dot.amber    { background: var(--warning) !important; }
.pm-alert-dot.blue     { background: var(--info)    !important; }

/* ── 3. Empty state unificado ─────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 56px 24px; text-align: center; gap: 8px;
}
.empty-state-icon  { font-size: 36px; color: var(--text-dim); margin-bottom: 4px; }
.empty-state-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.empty-state-sub   { font-size: 13px; color: var(--text-muted); max-width: 300px; line-height: 1.5; }
/* Normaliza variantes existentes */
.ba-empty, .pm-empty { display: flex; flex-direction: column; align-items: center; }

/* ── 4. Tabela responsiva com header sticky ─────────────────
   Use: <div class="table-wrap"> ou <div class="table-wrap scrollable"> */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
}
.table-wrap.scrollable { max-height: 480px; overflow-y: auto; }
.table-wrap table thead th,
.table-wrap > table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-card);
  box-shadow: 0 1px 0 var(--border);
}

/* ── 5. KPI grids mobile-safe ───────────────────────────────
   Garante que grids com 4–5 colunas não vazem em telas pequenas */
@media (max-width: 520px) {
  .ba-kpi-grid  { grid-template-columns: 1fr 1fr !important; }
  .pm-kpi-grid  { grid-template-columns: 1fr 1fr !important; }
  .est-kpi-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 360px) {
  .ba-kpi-grid, .pm-kpi-grid, .est-kpi-grid { grid-template-columns: 1fr !important; }
}

/* ── 6. Animações de entrada nas páginas ────────────────────
   .page-content > * recebe fadeUp escalonado automático */
@keyframes _fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-content > * {
  animation: _fadeUp .22s var(--ease, cubic-bezier(.25,.46,.45,.94)) both;
}
.page-content > *:nth-child(1) { animation-delay: 0s;    }
.page-content > *:nth-child(2) { animation-delay: .05s;  }
.page-content > *:nth-child(3) { animation-delay: .09s;  }
.page-content > *:nth-child(4) { animation-delay: .12s;  }
.page-content > *:nth-child(5) { animation-delay: .15s;  }
.page-content > *:nth-child(n+6) { animation-delay: .18s; }

/* ── 7. Toast queue com empilhamento ────────────────────────
   O container já existe no DOM via showToast(); estas regras
   padronizam o visual e permitem múltiplos toasts simultâneos */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 48px));
}
#toast-container .toast {
  pointer-events: auto; min-width: 200px;
  padding: 12px 16px; border-radius: var(--r-lg);
  background: var(--primary); color: #fff;
  font-size: 13.5px; font-weight: 500; line-height: 1.4;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: flex-start; gap: 10px;
  animation: _fadeUp .2s var(--ease) both;
}
#toast-container .toast.success { background: var(--success); }
#toast-container .toast.error   { background: var(--danger);  }
#toast-container .toast.warning { background: var(--warning); }
#toast-container .toast._out    { animation: _fadeUp .2s var(--ease) reverse forwards; }

/* ── 8. Print base consolidado ──────────────────────────────
   @media print aplicado globalmente; cada página pode sobrescrever
   adicionando suas próprias regras de print sem repetir o reset */
@media print {
  .sidebar, .top-bar, .top-bar-actions,
  .no-print, ._ia-fab, ._ia-panel { display: none !important; }
  .main-content { margin-left: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  @page { margin: 18mm 20mm; }
}
.doc-print-wrap { display: none; }
@media print { .doc-print-wrap { display: block !important; } }

/* ── 9. Focus ring consistente em formulários ───────────────
   Aplica globalmente em campos de todas as páginas */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.ba-field select:focus,
.ba-field textarea:focus,
.ba-field input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  border-color: var(--primary) !important;
}

/* ── 10. Breadcrumb / top-bar contextual ───────────────────
   Adicione <nav class="breadcrumb"> antes do .top-bar-title */
.breadcrumb {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--text-muted);
  margin-bottom: 2px;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb-sep { color: var(--text-dim); user-select: none; }

/* ── 11. Micro-interações em cards e botões ─────────────────
   Press effect leve para todos os botões .btn */
.btn:active { transform: translateY(1px); }
.card:hover { box-shadow: var(--shadow); }

/* ── 12. WhatsApp floating support button ──────────────────── */
.wa-float-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,.4);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.wa-float-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(37,211,102,.55);
}
@media(max-width:600px) {
  .wa-float-btn { bottom: 16px; right: 16px; width: 46px; height: 46px; }
  .wa-float-btn svg { width: 22px; height: 22px; }
}