/* ════════════════════════════════════════════════════════════════
   COLEGIO CRISTIANO GAMALIEL — Plataforma Educativa
   ─────────────────────────────────────────────────────────────
   Paleta institucional:
   • Turquesa Claro  → fe, esperanza, crecimiento
   • Azul Marino     → sabiduría, autoridad, confianza
   • Blanco          → pureza, claridad, luz
════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Paleta institucional ── */
  --turquesa:       #14B8C8;
  --turquesa2:      #0E9DAC;
  --turquesa3:      #0C8A98;
  --turquesa-glow:  rgba(20,184,200,.25);
  --turquesa-light: #E0F7FA;
  --turquesa-mid:   #80DEEA;

  --navy:           #0F2D5A;
  --navy2:          #0A2040;
  --navy3:          #1A3A70;
  --navy-mid:       #2A4A80;

  --blanco:         #ffffff;
  --gris-bg:        #f0f9fb;
  --gris1:          #f1f5f9;
  --gris2:          #e2e8f0;
  --gris3:          #cbd5e1;
  --texto:          #0a2040;
  --texto2:         #1e3a5f;
  --muted:          #5a7fa0;
  --muted2:         #94a3b8;

  --rose:           #e11d48;
  --rose-light:     #fff1f2;
  --amber:          #f59e0b;
  --amber-light:    #fffbeb;
  --verde:          #059669;
  --verde-light:    #ecfdf5;

  /* ── Gradientes principales ── */
  --grad-turquesa:  linear-gradient(135deg, #14B8C8, #0C8A98);
  --grad-navy:      linear-gradient(135deg, #0F2D5A, #1A3A70);
  --grad-hero:      linear-gradient(135deg, #0F2D5A 0%, #0E9DAC 60%, #14B8C8 100%);
  --grad-premium:   linear-gradient(135deg, #0a2040, #0F2D5A, #1a3a6a);
  --grad-card:      linear-gradient(145deg, #ffffff, #f0f9fb);
  --grad-aurora:    linear-gradient(135deg, #14B8C8 0%, #0F2D5A 50%, #2A4A80 100%);
  --card-bg:        #ffffff;

  /* ── Layout ── */
  --sidebar-w:   260px;
  --radius:      16px;
  --radius-sm:   10px;
  --radius-lg:   24px;
  --radius-xl:   32px;

  /* ── Sombras ── */
  --shadow-xs:   0 1px 3px rgba(0,0,0,.08);
  --shadow:      0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
  --shadow-md:   0 8px 32px rgba(0,0,0,.12);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.16);
  --shadow-xl:   0 24px 64px rgba(0,0,0,.2);
  --shadow-turquesa: 0 8px 32px rgba(20,184,200,.3);
  --shadow-navy:     0 8px 32px rgba(15,45,90,.4);

  /* ── Tipografía ── */
  --font:         'Inter', system-ui, sans-serif;
  --font-head:    'Plus Jakarta Sans', system-ui, sans-serif;

  /* ── Transición ── */
  --ease:         cubic-bezier(.4,0,.2,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --t:            .2s;
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--texto);
  background: var(--gris-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--turquesa); text-decoration: none }
input, select, textarea, button { font-family: var(--font) }
img { max-width: 100% }

/* ── SCREENS ─────────────────────────────────────────────────── */
.screen { display: none; height: 100vh; width: 100% }
.screen.active { display: flex }
#login-screen { flex-direction: column }
#main-app { flex-direction: row; overflow: hidden }

/* ════════════════════════════════════════════════════════════════
   LOGIN
════════════════════════════════════════════════════════════════ */
.login-bg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--grad-premium);
}

.login-bg::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,200,.18) 0%, transparent 70%);
  top: -200px; left: -100px;
  animation: orbFlot 12s ease-in-out infinite;
}

.login-bg::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  bottom: -100px; right: -100px;
  animation: orbFlot 16s ease-in-out infinite reverse;
}

@keyframes orbFlot {
  0%,100% { transform: translate(0,0) scale(1) }
  33%     { transform: translate(30px,-30px) scale(1.05) }
  66%     { transform: translate(-20px,20px) scale(.97) }
}

.login-bg .dots-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 0;
}

.login-card {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(30px);
  border-radius: var(--radius-xl);
  padding: 52px 48px 44px;
  width: 440px;
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.1);
  animation: cardEntrada .6s var(--ease-spring);
}

@keyframes cardEntrada {
  from { transform: translateY(30px) scale(.95); opacity: 0 }
  to   { transform: translateY(0)    scale(1);   opacity: 1 }
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-turquesa);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.login-logo {
  text-align: center;
  margin-bottom: 40px;
}

.logo-circle {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: white;
  border: 3px solid rgba(20,184,200,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: var(--shadow-turquesa);
  animation: logoLatido 3s ease-in-out infinite;
  overflow: hidden;
}

.logo-circle img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

@keyframes logoLatido {
  0%,100% { box-shadow: var(--shadow-turquesa) }
  50%     { box-shadow: var(--shadow-turquesa), 0 0 0 8px rgba(20,184,200,.08) }
}

.login-logo h1 {
  color: var(--texto);
  font-size: 17px;
  font-weight: 800;
  font-family: var(--font-head);
  letter-spacing: 1.5px;
  margin-bottom: 5px;
}

.login-logo .tagline {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.login-logo .tagline::before,
.login-logo .tagline::after {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--gris3);
}

.field-group { position: relative; margin-bottom: 14px }

.field-group .field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--turquesa);
  font-size: 15px;
  pointer-events: none;
  transition: var(--t) var(--ease);
}

.field-group input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  background: var(--gris1);
  border: 1.5px solid var(--gris2);
  border-radius: var(--radius-sm);
  color: var(--texto);
  font-size: 14px;
  font-weight: 500;
  transition: var(--t) var(--ease);
}

.field-group input:focus {
  outline: none;
  border-color: var(--turquesa);
  background: var(--blanco);
  box-shadow: 0 0 0 4px var(--turquesa-glow);
}

.field-group:focus-within .field-icon { color: var(--turquesa2) }
.field-group input::placeholder { color: var(--muted2) }

.toggle-pass {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: var(--t);
}
.toggle-pass:hover { color: var(--turquesa) }

.login-error {
  color: var(--rose);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
  min-height: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-login {
  width: 100%;
  padding: 15px;
  background: var(--grad-turquesa);
  color: var(--blanco);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-head);
  letter-spacing: .8px;
  cursor: pointer;
  transition: var(--t) var(--ease);
  margin-top: 10px;
  box-shadow: var(--shadow-turquesa);
  position: relative;
  overflow: hidden;
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(20,184,200,.5);
}
.btn-login:active { transform: translateY(0) }

.login-motto {
  text-align: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--gris2);
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: .5px;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════════════════════════ */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--grad-premium);
  display: flex;
  flex-direction: column;
  padding: 0 12px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid rgba(255,255,255,.06);
  position: relative;
}

#sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--turquesa), rgba(255,255,255,.2), transparent);
  opacity: .4;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.sidebar-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: white;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-turquesa);
  border: 1.5px solid rgba(20,184,200,.35);
  overflow: hidden;
  padding: 4px;
}

.sidebar-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-title {
  color: var(--blanco);
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-head);
  letter-spacing: 1.2px;
  line-height: 1.2;
}

.sidebar-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--turquesa-mid);
  letter-spacing: 2.5px;
  margin-top: 2px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  margin: 8px 0;
  background: rgba(255,255,255,.04);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.06);
}

.user-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad-turquesa);
  color: var(--blanco);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(20,184,200,.4);
  box-shadow: 0 0 0 4px rgba(20,184,200,.1);
}

.user-name {
  color: var(--blanco);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-rol {
  font-size: 10px;
  color: var(--turquesa-mid);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: .3px;
}

.nav-section {
  padding: 14px 4px 4px;
  color: rgba(255,255,255,.3);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: var(--t) var(--ease);
  margin-bottom: 2px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  position: relative;
  font-weight: 500;
}

.nav-item:hover {
  background: rgba(255,255,255,.07);
  color: var(--blanco);
}

.nav-item.active {
  background: rgba(20,184,200,.2);
  color: var(--blanco);
  border: 1px solid rgba(20,184,200,.3);
}

.nav-item.active .nav-icon {
  background: var(--grad-turquesa);
  color: var(--blanco);
  box-shadow: var(--shadow-turquesa);
}

.nav-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  transition: var(--t) var(--ease);
}

.nav-item:hover .nav-icon {
  background: rgba(255,255,255,.12);
  color: var(--turquesa-mid);
}

.nav-item span { font-size: 13px; font-weight: 600 }

.nav-badge {
  margin-left: auto;
  background: var(--rose);
  color: var(--blanco);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.btn-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  color: rgba(225,29,72,.7);
  border: 1px solid rgba(225,29,72,.15);
  background: transparent;
  cursor: pointer;
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  transition: var(--t) var(--ease);
}

.btn-logout:hover {
  background: rgba(225,29,72,.12);
  color: var(--rose);
  border-color: rgba(225,29,72,.3);
}

/* ════════════════════════════════════════════════════════════════
   TOPBAR + CONTENIDO PRINCIPAL
════════════════════════════════════════════════════════════════ */
#main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--gris-bg);
}

.topbar {
  height: 64px;
  background: var(--blanco);
  border-bottom: 1px solid var(--gris2);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-xs);
}

.topbar-title {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-head);
  color: var(--texto);
  flex: 1;
}

.topbar-bimestre {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--turquesa-light);
  border: 1px solid rgba(20,184,200,.2);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--turquesa2);
}

.topbar-bimestre i { color: var(--turquesa) }

#content-area {
  min-height: calc(100vh - 64px);
  padding: 28px 32px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.page-title-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.page-title-icon.turquesa { background: var(--turquesa-light); color: var(--turquesa) }
.page-title-icon.verde    { background: var(--verde-light);    color: var(--verde) }
.page-title-icon.navy     { background: rgba(15,45,90,.08);    color: var(--navy2) }
.page-title-icon.rose     { background: var(--rose-light);     color: var(--rose) }
.page-title-icon.amber    { background: var(--amber-light);    color: var(--amber) }
/* Aliases para compatibilidad con módulos existentes */
.page-title-icon.dorado   { background: var(--amber-light);    color: var(--amber) }
.page-title-icon.violet   { background: rgba(20,184,200,.1);   color: var(--turquesa2) }
.page-title-icon.sky      { background: var(--turquesa-light); color: var(--turquesa) }

.page-title h2 {
  font-size: 24px;
  font-weight: 800;
  font-family: var(--font-head);
  color: var(--texto);
  letter-spacing: -.3px;
}

.page-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 24px;
  margin-left: 62px;
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════
   STAT CARDS
════════════════════════════════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--blanco);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--t) var(--ease);
  cursor: default;
  border: 1px solid var(--gris2);
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  opacity: 0;
  transition: var(--t);
}

.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) }
.stat-card:hover::after { opacity: 1 }

.stat-card.turquesa::after { background: var(--grad-turquesa) }
.stat-card.navy::after     { background: var(--grad-navy) }
.stat-card.verde::after    { background: linear-gradient(135deg, #059669, #047857) }
.stat-card.rose::after     { background: linear-gradient(135deg, #e11d48, #be123c) }
.stat-card.dorado::after   { background: linear-gradient(135deg, #f59e0b, #d97706) }
.stat-card.violet::after   { background: var(--grad-turquesa) }

.stat-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.stat-icon.turquesa { background: var(--turquesa-light); color: var(--turquesa) }
.stat-icon.navy     { background: rgba(15,45,90,.07);    color: var(--navy2) }
.stat-icon.verde    { background: var(--verde-light);    color: var(--verde) }
.stat-icon.rose     { background: var(--rose-light);     color: var(--rose) }
.stat-icon.amber    { background: var(--amber-light);    color: var(--amber) }
.stat-icon.dorado   { background: var(--amber-light);    color: var(--amber) }
.stat-icon.sky      { background: var(--turquesa-light); color: var(--turquesa) }
.stat-icon.violet   { background: var(--turquesa-light); color: var(--turquesa2) }

.stat-value {
  font-size: 32px;
  font-weight: 900;
  font-family: var(--font-head);
  color: var(--texto);
  line-height: 1;
  letter-spacing: -1px;
}

.stat-label { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .2px }

.stat-trend { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700 }
.stat-trend.up   { color: var(--verde) }
.stat-trend.down { color: var(--rose) }

/* ════════════════════════════════════════════════════════════════
   CARDS
════════════════════════════════════════════════════════════════ */
.card {
  background: var(--blanco);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  border: 1px solid var(--gris2);
  transition: var(--t) var(--ease);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gris1);
}

.card-header h3 {
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-head);
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header h3 i {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: var(--turquesa-light);
  color: var(--turquesa);
}

.card-hero {
  background: var(--grad-premium);
  color: var(--blanco);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  border: none;
}

.card-hero::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,200,.2), transparent 70%);
  top: -80px; right: -60px;
}

/* ════════════════════════════════════════════════════════════════
   FORMULARIOS
════════════════════════════════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px }

.field { display: flex; flex-direction: column; gap: 6px }

.field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--texto2);
  text-transform: uppercase;
  letter-spacing: .8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.field label i { color: var(--turquesa); font-size: 11px }

.field input,
.field select,
.field textarea {
  padding: 10px 13px;
  border: 1.5px solid var(--gris2);
  border-radius: var(--radius-sm);
  transition: var(--t) var(--ease);
  background: var(--blanco);
  color: var(--texto);
  font-weight: 500;
  font-size: 13px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--turquesa);
  box-shadow: 0 0 0 3px var(--turquesa-glow);
  background: var(--turquesa-light);
}

.field textarea { resize: vertical; min-height: 80px }

.section-title {
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-head);
  color: var(--turquesa2);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 16px 0 10px;
  border-bottom: 2px solid;
  border-image: var(--grad-turquesa) 1;
  margin: 20px 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title i {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--turquesa-light);
  color: var(--turquesa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* ════════════════════════════════════════════════════════════════
   BOTONES
════════════════════════════════════════════════════════════════ */
.btn {
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: var(--t) var(--ease);
  letter-spacing: .2px;
  position: relative;
  overflow: hidden;
}

.btn:hover { transform: translateY(-1px) }
.btn:active { transform: translateY(0) }

.btn-primary {
  background: var(--grad-turquesa);
  color: var(--blanco);
  box-shadow: var(--shadow-turquesa);
}
.btn-primary:hover { box-shadow: 0 8px 24px rgba(20,184,200,.5) }

.btn-secondary {
  background: var(--grad-navy);
  color: var(--blanco);
  box-shadow: var(--shadow-navy);
}

.btn-gold {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: var(--navy);
}

.btn-success {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: var(--blanco);
}

.btn-danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: var(--blanco);
}

.btn-warning {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: var(--blanco);
}

.btn-violet {
  background: var(--grad-turquesa);
  color: var(--blanco);
}

.btn-ghost {
  background: transparent;
  color: var(--texto2);
  border: 1.5px solid var(--gris2);
}

.btn-ghost:hover {
  border-color: var(--turquesa);
  color: var(--turquesa);
  background: var(--turquesa-light);
}

.btn-sm  { padding: 6px 12px; font-size: 12px }
.btn-lg  { padding: 12px 24px; font-size: 15px }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-sm); justify-content: center }
.btn-xs { padding: 3px 10px; font-size: 11px; font-weight: 600; border: 1.5px solid var(--turquesa); color: var(--turquesa); background: white; border-radius: 6px; cursor: pointer; transition: all .2s }
.btn-xs:hover { background: var(--turquesa); color: white }

.btn-group { display: flex; gap: 8px; flex-wrap: wrap }
.btn-group.end { justify-content: flex-end }

/* ════════════════════════════════════════════════════════════════
   TABLA
════════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--gris2) }
table { width: 100%; border-collapse: collapse }

thead th {
  background: var(--gris1);
  color: var(--texto2);
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-head);
  letter-spacing: .8px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid var(--turquesa);
}

thead th:first-child { border-radius: var(--radius-sm) 0 0 0 }
thead th:last-child  { border-radius: 0 var(--radius-sm) 0 0 }

tbody tr { border-bottom: 1px solid var(--gris1); transition: var(--t) var(--ease) }
tbody tr:hover { background: var(--turquesa-light) }
tbody td { padding: 12px 16px; font-size: 13px; color: var(--texto2); font-weight: 500 }
tbody tr:last-child { border-bottom: none }

/* ════════════════════════════════════════════════════════════════
   BADGES
════════════════════════════════════════════════════════════════ */
.badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-verde    { background: rgba(5,150,105,.12);   color: #047857 }
.badge-rojo     { background: rgba(220,38,38,.12);   color: #b91c1c }
.badge-amber    { background: rgba(217,119,6,.12);   color: #92400e }
.badge-navy     { background: rgba(15,45,90,.10);    color: var(--navy2) }
.badge-turquesa { background: rgba(20,184,200,.12);  color: var(--turquesa2) }
.badge-gold     { background: rgba(245,158,11,.15);  color: #92400e }
.badge-violet   { background: rgba(20,184,200,.12);  color: var(--turquesa2) }
.badge-sky      { background: var(--turquesa-light); color: var(--turquesa2) }
.badge-dorado   { background: rgba(245,158,11,.15);  color: #92400e }

/* ════════════════════════════════════════════════════════════════
   SEMÁFORO BIMESTRAL
════════════════════════════════════════════════════════════════ */
.semaforo-verde { color: #16a34a }
.semaforo-amber { color: #d97706 }
.semaforo-rojo  { color: #dc2626 }
.semaforo-ico   { font-size: 18px }

/* ════════════════════════════════════════════════════════════════
   MODAL
════════════════════════════════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,45,90,.7);
  backdrop-filter: blur(8px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open { display: flex }

.modal-box {
  background: var(--blanco);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: modalIn .25s var(--ease-spring);
  border: 1px solid var(--gris2);
}

@keyframes modalIn {
  from { transform: scale(.92) translateY(24px); opacity: 0 }
  to   { transform: scale(1)   translateY(0);    opacity: 1 }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gris2);
  background: var(--gris1);
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-head);
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-header h3 i {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--turquesa-light);
  color: var(--turquesa);
  font-size: 14px;
}

.modal-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--gris2);
  border: none;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: var(--t);
}
.modal-close:hover { background: var(--rose-light); color: var(--rose) }
.modal-body   { padding: 24px; overflow-y: auto; flex: 1 }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--gris2);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--gris1);
}

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

.toast {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  color: var(--blanco);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn .35s var(--ease-spring);
  max-width: 360px;
  backdrop-filter: blur(10px);
}

@keyframes toastIn {
  from { transform: translateX(80px) scale(.9); opacity: 0 }
  to   { transform: translateX(0)    scale(1);  opacity: 1 }
}

.toast-success { background: var(--grad-turquesa) }
.toast-error   { background: linear-gradient(135deg, #dc2626, #b91c1c) }
.toast-warning { background: linear-gradient(135deg, #d97706, #b45309); color: var(--blanco) }
.toast-info    { background: var(--grad-navy) }

/* ════════════════════════════════════════════════════════════════
   MENSAJERÍA
════════════════════════════════════════════════════════════════ */
.chat-container { display: flex; gap: 16px; height: calc(100vh - 200px) }

.chat-list {
  width: 300px; flex-shrink: 0;
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gris2);
}

.chat-list-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--gris2);
  font-weight: 800;
  font-family: var(--font-head);
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.chat-list-header i {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--turquesa-light);
  color: var(--turquesa);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-search {
  padding: 10px 16px;
  border: none;
  border-bottom: 1px solid var(--gris2);
  width: 100%;
  outline: none;
  font-size: 13px;
  background: var(--gris1);
}

.chat-contacts { flex: 1; overflow-y: auto }

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: var(--t) var(--ease);
  border-bottom: 1px solid var(--gris1);
}

.contact-item:hover { background: var(--turquesa-light) }
.contact-item.active { background: var(--turquesa-light); border-left: 3px solid var(--turquesa) }

.contact-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad-turquesa);
  color: var(--blanco);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info { flex: 1; min-width: 0 }
.contact-name { font-size: 13px; font-weight: 700; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.contact-role { font-size: 11px; color: var(--muted); font-weight: 500 }
.contact-preview { font-size: 11px; color: var(--muted) }

.chat-window {
  flex: 1;
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gris2);
}

.chat-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--gris2);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gris1);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--gris-bg);
}

.msg-bubble {
  max-width: 66%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}

.msg-bubble .msg-time { font-size: 10px; opacity: .6; margin-top: 4px }

.msg-sent {
  align-self: flex-end;
  background: var(--grad-turquesa);
  color: var(--blanco);
  border-bottom-right-radius: 4px;
}

.msg-recv {
  align-self: flex-start;
  background: var(--blanco);
  color: var(--texto);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--gris2);
}

.msg-sent .msg-time { text-align: right }

.chat-input-area {
  padding: 14px;
  border-top: 1px solid var(--gris2);
  display: flex;
  gap: 10px;
  align-items: flex-end;
  background: var(--blanco);
}

.chat-input {
  flex: 1;
  resize: none;
  border: 1.5px solid var(--gris2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  outline: none;
  font-size: 13px;
  max-height: 120px;
  transition: var(--t);
  font-family: var(--font);
}

.chat-input:focus { border-color: var(--turquesa); box-shadow: 0 0 0 3px var(--turquesa-glow) }

.btn-send {
  width: 40px; height: 40px;
  background: var(--grad-turquesa);
  color: var(--blanco);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-turquesa);
  transition: var(--t);
  flex-shrink: 0;
}

.btn-send:hover { transform: scale(1.08) }

/* ════════════════════════════════════════════════════════════════
   NOTAS
════════════════════════════════════════════════════════════════ */
.notas-table input[type="number"] {
  width: 72px;
  padding: 7px;
  border: 1.5px solid var(--gris2);
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  transition: var(--t);
}

.notas-table input[type="number"]:focus {
  border-color: var(--turquesa);
  outline: none;
  box-shadow: 0 0 0 3px var(--turquesa-glow);
}

.nota-alta  { color: #16a34a; font-weight: 800 }
.nota-media { color: #d97706; font-weight: 800 }
.nota-baja  { color: #dc2626; font-weight: 800 }

/* ════════════════════════════════════════════════════════════════
   CALENDARIO
════════════════════════════════════════════════════════════════ */
.cal-events { display: flex; flex-direction: column; gap: 10px }

.cal-event {
  display: flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: var(--t) var(--ease);
  border: 1px solid var(--gris2);
}

.cal-event:hover { transform: translateX(4px); box-shadow: var(--shadow) }
.cal-event-stripe { width: 5px; flex-shrink: 0 }
.cal-event-body { flex: 1; padding: 12px 16px; background: var(--blanco) }
.cal-event-title { font-weight: 700; font-size: 13px; color: var(--texto); font-family: var(--font-head) }
.cal-event-dates { font-size: 11px; color: var(--muted); margin-top: 3px }

.ev-actividad .cal-event-stripe { background: var(--turquesa) }
.ev-examen    .cal-event-stripe { background: #dc2626 }
.ev-feriado   .cal-event-stripe { background: #f59e0b }
.ev-bimestre  .cal-event-stripe { background: var(--navy) }
.ev-otro      .cal-event-stripe { background: var(--muted) }

/* ════════════════════════════════════════════════════════════════
   HUELLA
════════════════════════════════════════════════════════════════ */
.huella-panel { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px }

.huella-circle {
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 4px solid var(--turquesa);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: var(--t) var(--ease);
  background: var(--turquesa-light);
  position: relative;
}

.huella-circle i { font-size: 56px; color: var(--turquesa) }

.huella-circle.scanning {
  border-color: #f59e0b;
  background: var(--amber-light);
  animation: huellaLatido 1.2s infinite;
}

.huella-circle.scanning i { color: #d97706 }

@keyframes huellaLatido {
  0%,100% { box-shadow: 0 0 0 0 var(--turquesa-glow) }
  50%     { box-shadow: 0 0 0 20px rgba(20,184,200,0) }
}

.huella-circle.ok    { border-color: #16a34a; background: rgba(22,163,74,.08) }
.huella-circle.ok i  { color: #16a34a }
.huella-circle.error { border-color: #dc2626; background: rgba(220,38,38,.06) }
.huella-circle.error i { color: #dc2626 }
.huella-status { font-size: 14px; font-weight: 700; color: var(--texto); text-align: center; font-family: var(--font-head) }

/* ════════════════════════════════════════════════════════════════
   TABS
════════════════════════════════════════════════════════════════ */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--gris1);
  padding: 4px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  width: fit-content;
}

.tab-btn {
  padding: 8px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 8px;
  transition: var(--t) var(--ease);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.tab-btn:hover { color: var(--texto) }

.tab-btn.active {
  background: var(--blanco);
  color: var(--turquesa);
  box-shadow: var(--shadow-xs);
  font-weight: 700;
}

.tab-panel { display: none }
.tab-panel.active { display: block }

/* ════════════════════════════════════════════════════════════════
   ALERTAS
════════════════════════════════════════════════════════════════ */
.alert-item {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--blanco);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  margin-bottom: 10px;
  border: 1px solid var(--gris2);
  border-left: 4px solid var(--turquesa);
  transition: var(--t) var(--ease);
}

.alert-item:hover { transform: translateX(3px); box-shadow: var(--shadow) }
.alert-item.leida { opacity: .5; border-left-color: var(--gris3) }
.alert-item.critico { border-left-color: #dc2626 }
.alert-icon { font-size: 20px; flex-shrink: 0; padding-top: 2px }
.alert-content { flex: 1 }
.alert-tipo { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 4px }
.alert-msg { font-size: 13px; color: var(--texto2); margin-bottom: 4px; font-weight: 500 }
.alert-fecha { font-size: 11px; color: var(--muted2) }

/* ════════════════════════════════════════════════════════════════
   MATERIAL
════════════════════════════════════════════════════════════════ */
.material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px }

.material-card {
  background: var(--blanco);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--t) var(--ease);
  border: 1px solid var(--gris2);
}

.material-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) }

.mat-ico { width: 46px; height: 46px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center }
.mat-ico.pdf   { background: rgba(220,38,38,.1);  color: #dc2626 }
.mat-ico.video { background: rgba(20,184,200,.1); color: var(--turquesa2) }
.mat-ico.yt    { background: rgba(220,38,38,.1);  color: #dc2626 }
.mat-ico.img   { background: rgba(20,184,200,.1); color: var(--turquesa) }
.mat-ico.link  { background: var(--turquesa-light); color: var(--turquesa) }
.mat-ico.file  { background: var(--amber-light);  color: var(--amber) }
.mat-ico i { font-size: 20px }

.mat-nombre { font-weight: 800; font-size: 14px; color: var(--texto); font-family: var(--font-head) }
.mat-desc   { font-size: 12px; color: var(--muted) }
.mat-meta   { font-size: 11px; color: var(--muted2) }
.yt-preview { border-radius: var(--radius-sm); overflow: hidden }
.yt-preview img { width: 100%; display: block }

/* ════════════════════════════════════════════════════════════════
   EXÁMENES
════════════════════════════════════════════════════════════════ */
.pregunta-item {
  background: var(--gris1);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--gris2);
  border-left: 3px solid var(--turquesa);
}

.pregunta-num  { font-size: 10px; font-weight: 800; color: var(--turquesa); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px }
.pregunta-txt  { font-weight: 700; font-size: 14px; color: var(--texto); margin-bottom: 12px; font-family: var(--font-head) }
.alt-list      { display: flex; flex-direction: column; gap: 6px }
.alt-item      { display: flex; gap: 8px; font-size: 13px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--blanco); border: 1px solid var(--gris2) }
.alt-item.correcta { background: rgba(20,184,200,.08); color: var(--turquesa2); font-weight: 700; border-color: rgba(20,184,200,.25) }
.alt-item input[type=radio] { accent-color: var(--turquesa) }
.alt-key { width: 22px; font-weight: 800; flex-shrink: 0; color: var(--turquesa2) }

/* ════════════════════════════════════════════════════════════════
   FICHA ALUMNO
════════════════════════════════════════════════════════════════ */
.alumno-foto {
  width: 100px; height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--turquesa);
  box-shadow: var(--shadow-turquesa);
}

.alumno-foto-placeholder {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--turquesa-light);
  border: 4px solid var(--turquesa);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--turquesa);
  font-size: 38px;
  box-shadow: var(--shadow-turquesa);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --sidebar-w: 70px }
  .nav-item span, .sidebar-title, .sidebar-sub,
  .user-name, .user-rol, .btn-logout span { display: none }
  .nav-item { justify-content: center; padding: 10px }
  .nav-icon { margin: 0 }
  .sidebar-header { justify-content: center }
  .sidebar-user { justify-content: center }
  #content-area { padding: 20px 16px }
}

@media (max-width: 768px) {
  #content-area { padding: 16px }
  .form-grid { grid-template-columns: 1fr }
  .chat-container { flex-direction: column; height: auto }
  .chat-list { width: 100%; max-height: 200px }
  .stats-grid { grid-template-columns: repeat(2,1fr) }
}

/* ════════════════════════════════════════════════════════════════
   UTILIDADES
════════════════════════════════════════════════════════════════ */
.flex { display: flex } .flex-1 { flex: 1 } .flex-col { flex-direction: column }
.flex-center { align-items: center } .flex-wrap { flex-wrap: wrap }
.gap-4 { gap: 4px } .gap-8 { gap: 8px } .gap-12 { gap: 12px }
.gap-16 { gap: 16px } .gap-20 { gap: 20px } .gap-24 { gap: 24px }
.mt-4  { margin-top: 4px  } .mt-8  { margin-top: 8px  } .mt-12 { margin-top: 12px }
.mt-16 { margin-top: 16px } .mt-20 { margin-top: 20px } .mt-24 { margin-top: 24px }
.mb-4  { margin-bottom: 4px  } .mb-8  { margin-bottom: 8px  }
.mb-12 { margin-bottom: 12px } .mb-16 { margin-bottom: 16px } .mb-20 { margin-bottom: 20px }
.py-4  { padding: 4px 0 } .p-0 { padding: 0 }

.text-muted   { color: var(--muted) } .text-muted2 { color: var(--muted2) }
.text-sm      { font-size: 12px }     .text-xs     { font-size: 11px }
.text-turquesa { color: var(--turquesa) } .text-navy { color: var(--navy) }
.text-verde   { color: var(--verde) }  .text-rojo   { color: #dc2626 }
.text-dorado  { color: var(--amber) }  .text-violet { color: var(--turquesa2) }
.text-right   { text-align: right }    .text-center { text-align: center }

.bold  { font-weight: 700 } .heavy { font-weight: 800 } .w-100 { width: 100% }
.d-flex { display: flex } .justify-between { justify-content: space-between }
.justify-end { justify-content: flex-end } .align-center { align-items: center }
.rounded { border-radius: var(--radius-sm) } .rounded-lg { border-radius: var(--radius) }
.rounded-xl { border-radius: var(--radius-lg) }

.bg-turquesa-light { background: var(--turquesa-light) }
.bg-verde-light    { background: var(--verde-light) }
.bg-rose-light     { background: var(--rose-light) }
.bg-amber-light    { background: var(--amber-light) }
.bg-dorado-light   { background: var(--amber-light) }
.bg-violet-light   { background: var(--turquesa-light) }
.bg-sky-light      { background: var(--turquesa-light) }

.border-turquesa { border: 1px solid rgba(20,184,200,.25) }
.border-verde    { border: 1px solid rgba(5,150,105,.25) }
.border-dorado   { border: 1px solid rgba(245,158,11,.25) }

.shadow { box-shadow: var(--shadow) } .shadow-md { box-shadow: var(--shadow-md) }
.shadow-lg { box-shadow: var(--shadow-lg) }

.divider-grad {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--turquesa), rgba(255,255,255,.3), transparent);
  border: none;
  margin: 16px 0;
  opacity: .4;
}

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700 }
.pill-turquesa { background: var(--turquesa-light); color: var(--turquesa2) }
.pill-verde    { background: var(--verde-light);    color: #047857 }
.pill-dorado   { background: var(--amber-light);    color: #92400e }
.pill-violet   { background: var(--turquesa-light); color: var(--turquesa2) }

.empty-state { text-align: center; padding: 56px 24px; color: var(--muted) }
.empty-state i { font-size: 52px; margin-bottom: 16px; display: block; color: var(--gris3) }
.empty-state p { font-size: 14px; font-weight: 600; color: var(--muted) }
.empty-state p2 { font-size: 12px; color: var(--muted2); margin-top: 4px; display: block }

.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(20,184,200,.2);
  border-top-color: var(--turquesa);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

.progress-bar { height: 6px; background: var(--gris2); border-radius: 3px; overflow: hidden }
.progress-fill { height: 100%; background: var(--grad-turquesa); border-radius: 3px; transition: width .6s var(--ease) }

::-webkit-scrollbar { width: 5px; height: 5px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--gris3); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: var(--turquesa) }

::selection { background: rgba(20,184,200,.2); color: var(--turquesa2) }

/* ════════════════════════════════════════════════════════════════
   GRADEBOOK
════════════════════════════════════════════════════════════════ */
.gradebook-card { background: var(--blanco); border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.08); margin-top: 20px; overflow: hidden; border: 1px solid rgba(20,184,200,.12) }
.gradebook-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 16px 20px; background: var(--grad-navy); color: white }
.gradebook-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px }
.gb-prof { font-size: 12px; opacity: .8; white-space: nowrap }
.gb-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .3px }
.gb-badge-nivel { background: rgba(20,184,200,.35); color: #80DEEA }
.gb-badge-sec   { background: rgba(255,255,255,.2); color: #E0F7FA }

.gradebook-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 16px; background: #f8fafc; border-bottom: 2px solid #e2e8f0 }
.gb-tool-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 12px; border: 1.5px solid #e2e8f0; border-radius: 8px; background: var(--blanco); color: #374151; font-size: 10px; font-weight: 600; cursor: pointer; transition: all .2s; min-width: 60px; letter-spacing: .3px }
.gb-tool-btn i { font-size: 16px; color: #475569 }
.gb-tool-btn:hover { background: var(--navy); color: white; border-color: var(--navy); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,45,90,.25) }
.gb-tool-btn:hover i { color: var(--turquesa-mid) }
.gb-tool-save { background: var(--turquesa-light); border-color: var(--turquesa); color: var(--turquesa2) }
.gb-tool-save i { color: var(--turquesa) }
.gb-tool-save:hover { background: var(--turquesa); color: white }

.gradebook-table-wrap { overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 380px); min-height: 200px }
.gradebook-table { border-collapse: collapse; font-size: 12px; width: 100%; min-width: 600px }
.gradebook-table thead { position: sticky; top: 0; z-index: 10 }
.gb-hrow1 th, .gb-hrow2 th { padding: 6px 5px; border: 1px solid #e2e8f0; white-space: nowrap; font-weight: 700; user-select: none }
.gb-hrow1 { background: var(--navy) }
.gb-hrow2 { background: var(--navy2) }

.gb-th-fix   { background: var(--navy) !important; color: #e2e8f0; text-align: left; position: sticky; left: 0; z-index: 11 }
.gb-th-alumno { min-width: 180px; padding-left: 12px !important }
.gb-th-comp  { color: var(--turquesa-mid); font-size: 10px; text-align: center; border-color: #334155 !important }
.gb-th-sub   { color: #94a3b8; font-size: 10px; text-align: center; font-weight: 600 }
.gb-th-prom  { color: #80DEEA; font-size: 10px; text-align: center; font-weight: 700; background: var(--navy2) }
.gb-th-extra { color: #80DEEA; font-size: 10px; text-align: center; font-weight: 600 }

.gb-row    { background: var(--blanco) }
.gb-row-alt { background: #f0f9fb }
.gb-row:hover, .gb-row-alt:hover { background: var(--turquesa-light) }

.gb-td-fix  { position: sticky; left: 0; z-index: 2; background: inherit; border-right: 2px solid #e2e8f0 }
.gb-td-num  { color: #94a3b8; font-size: 11px; text-align: center; min-width: 28px; width: 28px; padding: 4px }
.gb-td-alumno { min-width: 180px; padding: 5px 12px 5px 8px; font-weight: 600; font-size: 12px; color: #0f172a; white-space: nowrap; border-right: 2px solid #e2e8f0 }
.gb-td { padding: 3px; text-align: center; border: 1px solid #e2e8f0; vertical-align: middle }
.gb-td-prom { background: rgba(20,184,200,.04); border: 1px solid #cbd5e1 }

.gb-input { width: 42px; border: none; text-align: center; font-weight: 700; font-size: 12px; background: transparent; outline: none; padding: 3px 2px; border-radius: 4px; transition: background .15s }
.gb-input:focus { background: rgba(20,184,200,.08); box-shadow: 0 0 0 2px rgba(20,184,200,.3) }
.gb-input::-webkit-inner-spin-button, .gb-input::-webkit-outer-spin-button { opacity: .4 }

.gb-prom       { font-weight: 800; font-size: 13px; display: block }
.gb-prom-empty { color: #cbd5e1; font-size: 13px }

.nota-rojo  { color: #dc2626 !important }
.nota-azul  { color: #0E9DAC !important }
.nota-verde { color: #059669 !important }

.gradebook-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid #e2e8f0; background: #f8fafc }
.gb-legend-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: white; border: 1.5px solid currentColor }
.gradebook-empty { text-align: center; padding: 60px 32px; color: #64748b }
.cfg-comp-block { margin-bottom: 4px }
.cfg-inds-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px }
.cfg-ind-item { display: inline-flex; align-items: center; gap: 2px }
.cfg-ind-input { padding: 4px 6px; border: 1.5px solid #e2e8f0; border-radius: 6px; font-size: 12px; width: 68px; text-align: center }
.cfg-check-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; color: #374151 }
.cfg-check-lbl input[type=checkbox] { accent-color: var(--turquesa) }
.btn-icon { background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: 4px; transition: background .15s }
.btn-icon:hover { background: rgba(0,0,0,.05) }

@media print {
  #sidebar, .gradebook-toolbar, .gradebook-controls, .gradebook-legend,
  .page-title, .page-subtitle, button, nav, .topbar { display: none !important }
  .gradebook-table-wrap { max-height: none !important; overflow: visible !important }
  .gradebook-card { box-shadow: none !important; border: none !important }
  .gb-input { border: none !important; box-shadow: none !important }
  body { background: white !important }
}

/* ════════════════════════════════════════════════════════════════
   PROPIETARIO
════════════════════════════════════════════════════════════════ */
.prop-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:24px }
.prop-title { font-size:26px; font-weight:800; color:var(--navy); margin:0; display:flex; align-items:center; gap:10px }
.prop-sub   { color:#64748b; margin:4px 0 0; font-size:14px }
.prop-date  { color:#64748b; font-size:13px; display:flex; align-items:center; gap:6px }
.prop-kpis  { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-bottom:20px }
.prop-kpi   { background:white; border-radius:14px; padding:20px 16px; box-shadow:0 2px 12px rgba(0,0,0,.07); text-align:center; border-top:4px solid transparent; transition:transform .2s }
.prop-kpi:hover { transform:translateY(-3px) }
.prop-kpi-icon { font-size:24px; margin-bottom:8px; opacity:.8 }
.prop-kpi-val  { font-size:36px; font-weight:900; line-height:1 }
.prop-kpi-lbl  { font-size:11px; color:#64748b; margin-top:4px; font-weight:600; text-transform:uppercase; letter-spacing:.5px }
.prop-kpi-verde    { border-top-color:#059669 } .prop-kpi-verde    .prop-kpi-val,.prop-kpi-verde    .prop-kpi-icon { color:#059669 }
.prop-kpi-azul     { border-top-color:#2563eb } .prop-kpi-azul     .prop-kpi-val,.prop-kpi-azul     .prop-kpi-icon { color:#2563eb }
.prop-kpi-dorado   { border-top-color:#f59e0b } .prop-kpi-dorado   .prop-kpi-val { color:#d97706 } .prop-kpi-dorado .prop-kpi-icon { color:#f59e0b }
.prop-kpi-turquesa { border-top-color:var(--turquesa) } .prop-kpi-turquesa .prop-kpi-val,.prop-kpi-turquesa .prop-kpi-icon { color:var(--turquesa) }
.prop-kpi-navy     { border-top-color:var(--navy) } .prop-kpi-navy .prop-kpi-val,.prop-kpi-navy .prop-kpi-icon { color:var(--navy) }
.prop-kpi-rojo     { border-top-color:#dc2626 } .prop-kpi-rojo .prop-kpi-val,.prop-kpi-rojo .prop-kpi-icon { color:#dc2626 }
.prop-kpi-violet   { border-top-color:var(--turquesa) } .prop-kpi-violet .prop-kpi-val { color:var(--turquesa2) }
.prop-kpi-gray     { border-top-color:#e2e8f0 } .prop-kpi-gray .prop-kpi-val { color:#94a3b8 }
.prop-grid    { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px }
.prop-card    { background:white; border-radius:14px; padding:20px; box-shadow:0 2px 12px rgba(0,0,0,.07) }
.prop-card-wide { grid-column:1/-1 }
.prop-card-title { font-size:14px; font-weight:700; color:#0f172a; margin-bottom:16px; display:flex; align-items:center; gap:8px }
.prop-finance    { display:flex; flex-direction:column; gap:10px }
.prop-finance-item { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:#f8fafc; border-radius:8px }
.prop-finance-lbl { font-size:13px; color:#64748b; font-weight:500 }
.prop-finance-val { font-size:18px; font-weight:800 }
.prop-finance-val.verde { color:#059669 } .prop-finance-val.rojo { color:#dc2626 }
.prop-bar-track { background:#e2e8f0; border-radius:4px; height:8px; overflow:hidden; flex:1 }
.prop-bar       { height:8px; border-radius:4px; transition:width .6s ease }
.prop-bar-verde { background:linear-gradient(90deg,#059669,#34d399) }
.prop-bar-azul  { background:linear-gradient(90deg,var(--turquesa),var(--turquesa-mid)) }
.prop-bar-rojo  { background:linear-gradient(90deg,#dc2626,#f87171) }
.prop-promedio-row { display:flex; align-items:center; gap:10px; margin-bottom:10px }
.prop-nivel-lbl    { font-size:12px; font-weight:600; color:#374151; min-width:90px }
.prop-promedio-num { font-size:14px; font-weight:800; min-width:36px; text-align:right }
.prop-promedio-num.verde { color:#059669 } .prop-promedio-num.azul { color:var(--turquesa) } .prop-promedio-num.rojo { color:#dc2626 }
.prop-legend { display:flex; gap:12px; font-size:11px; margin-top:12px; flex-wrap:wrap }
.prop-audit-list { display:flex; flex-direction:column; gap:8px }
.prop-audit-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:#fef2f2; border-radius:10px; border-left:3px solid #dc2626 }
.prop-audit-ico  { width:28px; height:28px; background:#fee2e2; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#dc2626; font-size:11px; flex-shrink:0 }
.prop-audit-info { flex:1 }
.prop-audit-info p { font-size:12px; color:#64748b; margin:2px 0 0 }
.prop-audit-tipo { font-size:10px; font-weight:700; color:#dc2626; background:#fee2e2; padding:1px 6px; border-radius:4px; margin-left:6px }
.prop-audit-time { font-size:11px; color:#94a3b8; white-space:nowrap }

/* ════════════════════════════════════════════════════════════════
   GRUPO ELITE
════════════════════════════════════════════════════════════════ */
.elite-crown { background:var(--grad-turquesa); color:white; font-size:11px; font-weight:800; padding:3px 12px; border-radius:20px; letter-spacing:1px; box-shadow:var(--shadow-turquesa) }
.elite-banner { background:linear-gradient(135deg,var(--turquesa-light),#b2ebf2); border:1.5px solid var(--turquesa-mid); border-radius:10px; padding:12px 16px; margin-bottom:12px; display:flex; align-items:center; gap:8px; font-weight:700; color:var(--turquesa2); font-size:14px }
.elite-banner i { color:var(--turquesa); font-size:18px }
.elite-row { background:linear-gradient(90deg,var(--turquesa-light) 0%,white 40%) }
.elite-row:hover { background:var(--turquesa-light) !important }
.elite-alumno { display:flex; align-items:center; gap:10px }
.elite-avatar { width:36px; height:36px; border-radius:50%; background:var(--grad-turquesa); display:flex; align-items:center; justify-content:center; color:white; font-size:14px; flex-shrink:0 }
.elite-badge  { background:var(--grad-turquesa); color:white; font-size:9px; font-weight:800; padding:2px 7px; border-radius:10px; letter-spacing:.5px; box-shadow:var(--shadow-turquesa) }
.elite-puntaje { font-size:22px; font-weight:900; color:var(--turquesa2) }
.badge-dorado { background:rgba(245,158,11,.15); color:#92400e; font-weight:700 }
.badge-navy   { background:rgba(15,45,90,.1); color:var(--navy); font-weight:700 }
.alumno-elite-tag { background:var(--grad-turquesa); color:white; font-size:9px; font-weight:800; padding:1px 5px; border-radius:6px; margin-left:4px; letter-spacing:.3px }

/* ════════════════════════════════════════════════════════════════
   SIMULACROS
════════════════════════════════════════════════════════════════ */
.sim-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; padding:4px }
.sim-card { background:white; border-radius:14px; padding:18px; box-shadow:0 2px 12px rgba(0,0,0,.07); border:1.5px solid #e2e8f0; display:flex; flex-direction:column; gap:10px }
.sim-card-header { display:flex; align-items:center; gap:8px }
.sim-bim-badge { background:var(--grad-navy); color:white; font-size:10px; font-weight:800; padding:2px 9px; border-radius:12px }
.sim-fecha  { font-size:11px; color:#94a3b8; margin-left:auto }
.sim-titulo { font-size:15px; font-weight:700; color:#0f172a; margin:0 }
.sim-desc   { font-size:12px; color:#64748b; margin:0; line-height:1.4 }
.sim-meta   { display:flex; gap:12px; font-size:11px; color:#94a3b8 }
.sim-meta i { margin-right:3px }
.sim-actions { display:flex; gap:8px; margin-top:auto }

/* ════════════════════════════════════════════════════════════════
   AUDITORIA
════════════════════════════════════════════════════════════════ */
.audit-warning { background:#fef2f2; border:1.5px solid #fca5a5; border-radius:10px; padding:12px 16px; display:flex; align-items:center; gap:10px; font-size:13px; color:#7f1d1d; margin-bottom:16px; font-weight:600 }

/* ════════════════════════════════════════════════════════════════
   MODO OSCURO — body.dark-mode
════════════════════════════════════════════════════════════════ */
body.dark-mode {
  --gris-bg:        #0b1928;
  --gris1:          #0f2035;
  --gris2:          #1a2f48;
  --gris3:          #243d5c;
  --texto:          #ddeaf7;
  --texto2:         #b8d0ea;
  --muted:          #7a9fc0;
  --muted2:         #5a7fa0;
  --blanco:         #0f2035;
  --card-bg:        #0f2035;
  --grad-card:      linear-gradient(145deg, #0f2035, #0b1928);
  --turquesa-light: rgba(20,184,200,.08);
  background:       #0b1928;
  color:            #ddeaf7;
}

/* ── Overrides generales para inline styles hardcodeados ── */
body.dark-mode #main-content,
body.dark-mode #content-area > * { background-color: inherit }

body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"] {
  background-color: #0f2035 !important;
}
body.dark-mode [style*="color:#0f172a"],
body.dark-mode [style*="color: #0f172a"],
body.dark-mode [style*="color:#1e293b"],
body.dark-mode [style*="color:#334155"],
body.dark-mode [style*="color:#374151"] {
  color: #ddeaf7 !important;
}
body.dark-mode [style*="color:#64748b"],
body.dark-mode [style*="color: #64748b"],
body.dark-mode [style*="color:#475569"],
body.dark-mode [style*="color:#6b7280"] {
  color: #7a9fc0 !important;
}
body.dark-mode [style*="border-color:#e2e8f0"],
body.dark-mode [style*="border:1px solid #e2e8f0"],
body.dark-mode [style*="border:1.5px solid #e2e8f0"],
body.dark-mode [style*="border-bottom:1px solid #e2e8f0"] {
  border-color: #1a2f48 !important;
}
body.dark-mode [style*="background:var(--gris1)"],
body.dark-mode [style*="background: var(--gris1)"] {
  background-color: #0f2035 !important;
}
body.dark-mode [style*="background:#f8fafc"],
body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f1f5f9"],
body.dark-mode [style*="background: #f1f5f9"] {
  background-color: #0a1928 !important;
}

/* ── Pantalla de login ── */
body.dark-mode .login-bg    { background: linear-gradient(135deg, #071220, #0a1d35, #0b2640) }
body.dark-mode .login-card  { background: #0f2035; border:1px solid #1e3a58; box-shadow:0 20px 60px rgba(0,0,0,.5) }
body.dark-mode .login-card h1 { color:#ddeaf7 }
body.dark-mode .login-card .tagline { color:#7a9fc0 }
body.dark-mode .login-card .login-motto { color:#5a7fa0 }
body.dark-mode .field-group { background:#172d45; border-color:#1e3a58 }
body.dark-mode .field-group input { background:transparent; color:#ddeaf7 }
body.dark-mode .field-group input::placeholder { color:#5a7fa0 }
body.dark-mode .field-icon  { color:#14B8C8 }

/* ── Sidebar ── */
body.dark-mode #sidebar { background: linear-gradient(160deg, #071220 0%, #0a1d35 60%, #091825 100%); border-right:1px solid #1a2f48 }
body.dark-mode .sidebar-title { color:#ddeaf7 }
body.dark-mode .sidebar-sub   { color:#7a9fc0 }
body.dark-mode .sidebar-user  { background:rgba(20,184,200,.08); border-color:rgba(20,184,200,.15) }
body.dark-mode .user-name     { color:#ddeaf7 }
body.dark-mode .user-rol      { color:#7a9fc0 }
body.dark-mode .nav-link      { color:#b8d0ea }
body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active { background:rgba(20,184,200,.15); color:#14B8C8 }

/* ── Área de contenido ── */
body.dark-mode #main-content  { background:#0b1928 }
body.dark-mode #content-area  { background:#0b1928 }

/* ── Cards y paneles ── */
body.dark-mode .card          { background:#0f2035 !important; border-color:#1a2f48 !important; color:#ddeaf7 }
body.dark-mode .panel         { background:#0f2035; border-color:#1a2f48 }
body.dark-mode .card-header   { border-bottom-color:#1a2f48 }
body.dark-mode .section-card  { background:#0f2035; border-color:#1a2f48 }

/* ── Stat cards del dashboard ── */
body.dark-mode .stat-card     { background:linear-gradient(145deg,#0f2035,#0b1928) !important; border-color:#1a2f48 !important }
body.dark-mode .stat-label    { color:#7a9fc0 }
body.dark-mode .stat-val      { color:#ddeaf7 }
body.dark-mode .stat-sub      { color:#5a7fa0 }

/* ── Tablas ── */
body.dark-mode table          { color:#ddeaf7 }
body.dark-mode th             { background:#0a1928 !important; color:#b8d0ea; border-color:#1a2f48 }
body.dark-mode td             { border-color:#1a2f48; color:#ddeaf7 }
body.dark-mode tr:hover td    { background:rgba(20,184,200,.06) !important }
body.dark-mode .table-container { background:#0f2035; border-color:#1a2f48 }
body.dark-mode .reg-header    { background:#0a1928; color:#b8d0ea; border-color:#1a2f48 }
body.dark-mode .reg-row:hover { background:rgba(20,184,200,.06) }
body.dark-mode .reg-cell-num  { background:#0f2035; color:#ddeaf7; border-color:#1a2f48 }

/* ── Inputs, selects, textareas ── */
body.dark-mode input:not([type=checkbox]):not([type=radio]),
body.dark-mode select,
body.dark-mode textarea       { background:#0a1928 !important; color:#ddeaf7 !important; border-color:#1a2f48 !important }
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color:#5a7fa0 }
body.dark-mode select option  { background:#0f2035; color:#ddeaf7 }
body.dark-mode .form-group label { color:#b8d0ea }

/* ── Botones secundarios / outline ── */
body.dark-mode .btn-outline   { background:transparent; border-color:#14B8C8; color:#14B8C8 }
body.dark-mode .btn-outline:hover { background:rgba(20,184,200,.12) }
body.dark-mode .btn-ghost     { color:#b8d0ea }
body.dark-mode .btn-ghost:hover { background:rgba(255,255,255,.06) }

/* ── Modal ── */
body.dark-mode .modal-overlay { background:rgba(0,0,0,.7) }
body.dark-mode .modal-box     { background:#0f2035; border:1px solid #1a2f48; color:#ddeaf7 }
body.dark-mode .modal-header  { border-bottom-color:#1a2f48 }
body.dark-mode .modal-footer  { border-top-color:#1a2f48 }
body.dark-mode #modal-title   { color:#ddeaf7 }
body.dark-mode .modal-close   { color:#7a9fc0 }
body.dark-mode .modal-close:hover { color:#14B8C8 }

/* ── Badges y etiquetas ── */
body.dark-mode .badge-gris    { background:#172d45; color:#b8d0ea }
body.dark-mode .badge-status  { color:#ddeaf7 }

/* ── Mensajería ── */
body.dark-mode .msg-item      { background:#0f2035; border-color:#1a2f48 }
body.dark-mode .msg-item:hover { background:#172d45 }
body.dark-mode .msg-unread    { background:#0a1e38 }
body.dark-mode .msg-asunto    { color:#ddeaf7 }
body.dark-mode .msg-preview   { color:#7a9fc0 }
body.dark-mode .msg-bubble-yo { background:linear-gradient(135deg,#0E9DAC,#14B8C8) }
body.dark-mode .msg-bubble    { background:#172d45; color:#ddeaf7 }
body.dark-mode .msg-input-bar { background:#0f2035; border-top-color:#1a2f48 }
body.dark-mode .msg-input-bar textarea { background:#0a1928; color:#ddeaf7; border-color:#1a2f48 }

/* ── Alumnos ── */
body.dark-mode .alumno-card   { background:#0f2035; border-color:#1a2f48 }
body.dark-mode .alumno-card:hover { border-color:#14B8C8 }
body.dark-mode .alumno-name   { color:#ddeaf7 }
body.dark-mode .alumno-meta   { color:#7a9fc0 }

/* ── Libreta ── */
body.dark-mode .libreta-seccion { background:#0f2035; border-color:#1a2f48 }
body.dark-mode .libreta-row   { border-bottom-color:#1a2f48 }
body.dark-mode .libreta-row:hover { background:rgba(20,184,200,.06) }
body.dark-mode .libreta-comp  { color:#b8d0ea }
body.dark-mode .libreta-ind   { color:#7a9fc0 }
body.dark-mode .minedu-txt    { background:#0a1928; border-color:#1a2f48; color:#7a9fc0 }

/* ── Asistencia ── */
body.dark-mode .asist-header  { background:#0a1928; color:#b8d0ea }
body.dark-mode .asist-row:hover { background:rgba(20,184,200,.06) }

/* ── Simulacros / Exámenes ── */
body.dark-mode .sim-card      { background:#0f2035; border-color:#1a2f48 }
body.dark-mode .sim-titulo    { color:#ddeaf7 }
body.dark-mode .sim-desc      { color:#7a9fc0 }
body.dark-mode .sim-meta      { color:#5a7fa0 }

/* ── Grupo Elite ── */
body.dark-mode .elite-banner  { background:linear-gradient(135deg,rgba(20,184,200,.12),rgba(14,157,172,.08)); border-color:rgba(20,184,200,.25); color:#14B8C8 }
body.dark-mode .elite-row     { background:linear-gradient(90deg,rgba(20,184,200,.08) 0%,transparent 40%) }
body.dark-mode .elite-row:hover { background:rgba(20,184,200,.12) !important }

/* ── Configuración (card de tema) ── */
body.dark-mode .config-theme-preview.light-prev { border-color:#1a2f48; filter:brightness(.7) }
body.dark-mode .config-theme-preview.dark-prev  { border-color:#14B8C8; box-shadow:0 0 0 3px rgba(20,184,200,.35) }

/* ── Propietario / Auditoría ── */
body.dark-mode .prop-card     { background:#0f2035; border-color:#1a2f48 }
body.dark-mode .prop-audit-row { border-color:#1a2f48 }
body.dark-mode .audit-warning { background:#1a1015; border-color:#7f1d1d; color:#fca5a5 }

/* ── Scrollbars ── */
body.dark-mode ::-webkit-scrollbar-track { background:#0b1928 }
body.dark-mode ::-webkit-scrollbar-thumb { background:#1a2f48 }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background:#14B8C8 }

/* ── Texto genérico inline ── */
body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,
body.dark-mode h4,body.dark-mode h5,body.dark-mode h6 { color:#ddeaf7 }
body.dark-mode p  { color:#b8d0ea }
body.dark-mode small,body.dark-mode .text-muted { color:#5a7fa0 }
body.dark-mode hr { border-color:#1a2f48 }

/* ── Topbar / Breadcrumb (si existe) ── */
body.dark-mode .topbar        { background:#0f2035; border-bottom:1px solid #1a2f48 }
body.dark-mode .breadcrumb    { color:#7a9fc0 }

/* ── Registro de Notas — cabeceras en dark mode (atenuar) ── */
body.dark-mode .rn-comp-th {
  color: rgba(20,184,200,.4) !important;
}
body.dark-mode .rn-ind-th {
  color: rgba(255,255,255,.35) !important;
}

/* ── Etiquetas de grupo en el sidebar ── */
.nav-group-label {
  padding: 14px 18px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  user-select: none;
  pointer-events: none;
}
.nav-group-label:first-child { padding-top: 8px; }

body.dark-mode .nav-group-label { color: rgba(255,255,255,.22); }

/* ── Toast no necesita override (usa colores de éxito/error absolutos) ── */