/* ════════════════════════════════════════════════════════════════
   I.E.P. SOPHIANO COLLEGE — Elite Educational Platform v4.0
   ─────────────────────────────────────────────────────────────
   PALETA VIBRANTE — ENERGÍA ESTUDIANTIL:
   • Esmeralda Vivo   → identidad, crecimiento, energía
   • Ámbar Dorado     → excelencia, logro, calidez
   • Púrpura          → creatividad, innovación, sabiduría
   • Cielo Brillante  → claridad, libertad, apertura
   • Rosa/Coral       → entusiasmo, dinamismo, calor
════════════════════════════════════════════════════════════════ */
@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 VIBRANTE SOPHIANO COLLEGE ══
     Verde esmeralda vivo — identidad del colegio
     Ámbar dorado brillante — excelencia y logro
     Sidebar profundo con gradiente esmeralda   */

  --verde:        #10b981;   /* esmeralda vivo — energía y crecimiento */
  --verde2:       #059669;
  --verde3:       #047857;
  --verde-glow:   rgba(16,185,129,.28);
  --verde-light:  #d1fae5;   /* menta brillante */
  --verde-mid:    #6ee7b7;

  --dorado:       #f59e0b;   /* ámbar brillante — logro y excelencia */
  --dorado2:      #d97706;
  --dorado3:      #fbbf24;
  --dorado-light: #fef3c7;
  --dorado-glow:  rgba(245,158,11,.30);

  /* Sidebar: esmeralda oscuro profundo con riqueza visual */
  --navy:         #022c22;
  --navy2:        #064e3b;
  --navy3:        #065f46;
  --navy-mid:     #047857;

  --violet:       #8b5cf6;
  --violet2:      #7c3aed;
  --violet-light: #ede9fe;

  --sky:          #0ea5e9;
  --sky-light:    #e0f2fe;

  --rose:         #f43f5e;
  --rose-light:   #ffe4e6;

  --blanco:       #ffffff;
  --gris-bg:      #f0fdf9;   /* menta pálida — fresca y limpia */
  --gris1:        #ecfdf5;
  --gris2:        #d1fae5;
  --gris3:        #6ee7b7;
  --texto:        #022c22;
  --texto2:       #065f46;
  --muted:        #6b7280;
  --muted2:       #9ca3af;

  /* ── Gradientes principales ── */
  --grad-verde:   linear-gradient(135deg, #10b981, #059669);
  --grad-dorado:  linear-gradient(135deg, #f59e0b, #d97706);
  --grad-navy:    linear-gradient(135deg, #022c22, #065f46);
  --grad-violet:  linear-gradient(135deg, #8b5cf6, #6d28d9);
  --grad-hero:    linear-gradient(135deg, #022c22 0%, #064e3b 60%, #059669 100%);
  --grad-premium: linear-gradient(160deg, #022c22 0%, #064e3b 50%, #065f46 100%);
  --grad-card:    linear-gradient(145deg, #ffffff, #f0fdf9);
  --grad-aurora:  linear-gradient(135deg, #10b981 0%, #34d399 45%, #f59e0b 100%);

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

  /* ── Sombras vibrantes ── */
  --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,.20);
  --shadow-verde:  0 8px 32px rgba(16,185,129,.35);
  --shadow-dorado: 0 8px 24px rgba(245,158,11,.35);
  --shadow-navy:   0 8px 32px rgba(2,44,34,.45);

  /* ── 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;

  /* ── Aliases de compatibilidad con módulos Gamaliel ── */
  --turquesa:       var(--verde);
  --turquesa2:      var(--verde2);
  --turquesa3:      var(--verde3);
  --turquesa-glow:  var(--verde-glow);
  --turquesa-light: var(--verde-light);
  --turquesa-mid:   var(--verde-mid);
  --card-bg:        var(--blanco);
}

/* ── Nav group labels ────────────────────────────────────────── */
.nav-group-label {
  padding: 16px 16px 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6ee7b7;   /* esmeralda medio — visible y con color */
  user-select: none;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs { display:flex; gap:0; margin-bottom:18px; border-bottom:2px solid var(--gris2) }
.tab-btn {
  padding:10px 22px; border:none; background:none;
  font-weight:600; font-size:13px; cursor:pointer;
  border-bottom:3px solid transparent; margin-bottom:-2px; color:var(--muted);
  transition:.15s;
}
.tab-btn.active { border-bottom-color:var(--verde); color:var(--verde); font-weight:700 }
.tab-panel { display:none }
.tab-panel.active { display:block }

/* ── Badge turquesa (alias verde) ────────────────────────────── */
.badge-turquesa { background:var(--verde-light); color:var(--verde2); border:1px solid var(--verde-mid) }

/* ── 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(--verde); 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 — Hero institucional de élite
════════════════════════════════════════════════════════════════ */
.login-bg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--grad-premium);
}

/* Orbes de luz vibrantes — esmeralda + dorado */
.login-bg::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,.30) 0%, transparent 65%);
  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(245,158,11,.22) 0%, transparent 65%);
  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) }
}

/* Grid de puntos decorativo */
.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 }
}

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

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

.logo-circle {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #022c22 100%);
  color: var(--dorado3);
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 32px rgba(16,185,129,.45);
  border: 3px solid rgba(245,158,11,.55);
  animation: logoLatido 3s ease-in-out infinite;
}

@keyframes logoLatido {
  0%,100% { box-shadow: 0 8px 32px rgba(16,185,129,.45) }
  50%     { box-shadow: 0 8px 32px rgba(16,185,129,.45), 0 0 0 12px rgba(16,185,129,.10) }
}

.login-logo h1 {
  color: var(--texto);
  font-size: 18px;
  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(--verde);
  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(--verde);
  background: var(--blanco);
  box-shadow: 0 0 0 4px var(--verde-glow);
}

.field-group input:focus + .field-icon,
.field-group:focus-within .field-icon { color: var(--verde2) }

.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(--verde) }

.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-verde);
  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-verde);
  position: relative;
  overflow: hidden;
}

.btn-login::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245,158,11,.15), transparent);
  opacity: 0;
  transition: var(--t);
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(16,185,129,.40);
}

.btn-login:hover::after { opacity: 1 }
.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;
}

/* Badges de seguridad en login */
.login-badges {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.login-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}

.login-badge i { color: var(--verde); font-size: 11px }

/* ════════════════════════════════════════════════════════════════
   SIDEBAR — Premium dark con iconografía moderna
════════════════════════════════════════════════════════════════ */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--grad-premium);
  display: flex;
  flex-direction: column;
  padding: 0 10px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid rgba(255,255,255,.05);
  position: relative;
}

#sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--verde) 30%, var(--dorado) 70%, transparent 100%);
  opacity: .35;
}

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

.sidebar-logo {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981, #022c22);
  color: var(--dorado3);
  font-size: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(16,185,129,.40);
  border: 1.5px solid rgba(245,158,11,.45);
}

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

.sidebar-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--dorado3);
  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-aurora);
  color: var(--blanco);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(245,158,11,.45);
  box-shadow: 0 0 0 4px rgba(16,185,129,.18);
}

.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(--dorado3);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: .3px;
}

/* Sección del nav */
.nav-section {
  padding: 14px 4px 4px;
  color: #6ee7b7;   /* esmeralda medio — etiquetas de sección visibles */
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: #a7f3d0;   /* esmeralda claro — visible y con color */
  cursor: pointer;
  transition: var(--t) var(--ease);
  margin-bottom: 1px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  position: relative;
  font-weight: 600;
}

.nav-item:hover {
  background: rgba(255,255,255,.10);
  color: #ffffff;
}

.nav-item.active {
  background: rgba(16,185,129,.25);
  color: #ffffff;
  border-left: 3px solid #34d399;
  padding-left: 9px;
}

.nav-item.active .nav-icon {
  background: var(--grad-verde);
  color: var(--dorado3);
  box-shadow: 0 4px 12px rgba(16,185,129,.50);
}

.nav-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: #6ee7b7;   /* ícono esmeralda medio */
  transition: var(--t) var(--ease);
}

.nav-item:hover .nav-icon {
  background: rgba(16,185,129,.25);
  color: #34d399;
}

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

/* Badge notificaciones */
.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);
  display: flex;
  flex-direction: column;
}

.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: 0 1px 4px rgba(0,0,0,.06);
}

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

.topbar-bimestre {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--navy2);
  border: none;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dorado3);
  box-shadow: 0 2px 8px rgba(2,44,34,.18);
}

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

#content-area {
  flex: 1;
  padding: 28px 32px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* ── Breadcrumb/título ─────────────────────────────────────────*/
.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.verde  { background: var(--verde-light);  color: var(--verde) }
.page-title-icon.dorado { background: var(--dorado-light); color: var(--dorado2) }
.page-title-icon.violet { background: var(--violet-light); color: var(--violet) }
.page-title-icon.sky    { background: var(--sky-light);    color: var(--sky) }
.page-title-icon.navy   { background: rgba(14,165,233,.12); color: var(--sky) }

.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 — Hero dashboard
════════════════════════════════════════════════════════════════ */
.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);
  border-top: 4px solid transparent;
  position: relative;
  overflow: hidden;
}

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

/* Stat cards con gradiente completo — aspecto vibrante */
.stat-card.verde  {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-top: none; color: #fff;
}
.stat-card.dorado {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-top: none; color: #fff;
}
.stat-card.violet {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  border-top: none; color: #fff;
}
.stat-card.navy   {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  border-top: none; color: #fff;
}
.stat-card.rose   {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  border-top: none; color: #fff;
}
.stat-card.sky    {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  border-top: none; color: #fff;
}

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

.stat-icon.verde  { background: rgba(255,255,255,.22); color: #fff }
.stat-icon.dorado { background: rgba(255,255,255,.22); color: #fff }
.stat-icon.violet { background: rgba(255,255,255,.22); color: #fff }
.stat-icon.navy   { background: rgba(255,255,255,.22); color: #fff }
.stat-icon.rose   { background: rgba(255,255,255,.22); color: #fff }
.stat-icon.sky    { background: rgba(255,255,255,.22); color: #fff }

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

.stat-label {
  font-size: 12px;
  color: rgba(255,255,255,.85);
  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: rgba(255,255,255,.9) }
.stat-trend.down { color: rgba(255,255,255,.75) }

/* ════════════════════════════════════════════════════════════════
   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(--verde-light);
  color: var(--verde);
}

/* Card hero con gradiente */
.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(16,185,129,.22), transparent 70%);
  top: -80px; right: -60px;
}

.card-hero::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.22), transparent 70%);
  bottom: -60px; left: 30%;
}

/* ════════════════════════════════════════════════════════════════
   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(--verde); 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(--verde);
  box-shadow: 0 0 0 3px var(--verde-glow);
  background: var(--verde-light);
}

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

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

.section-title i {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--verde-light);
  color: var(--verde);
  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-verde);
  color: var(--blanco);
  box-shadow: var(--shadow-verde);
}

.btn-primary:hover { box-shadow: 0 8px 24px rgba(16,185,129,.40) }

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

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

.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  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-violet);
  color: var(--blanco);
}

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

.btn-ghost:hover {
  border-color: var(--verde);
  color: var(--verde);
  background: var(--verde-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-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(--verde);
}

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(--verde-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(16,185,129,.15);   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(2,44,34,.10);   color: var(--navy2) }
.badge-gold   { background: rgba(245,158,11,.15); color: #92400e }
.badge-violet { background: rgba(124,58,237,.12); color: #5b21b6 }
.badge-sky    { background: rgba(14,165,233,.12); color: #0369a1 }

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

/* ════════════════════════════════════════════════════════════════
   MODAL
════════════════════════════════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2,44,34,.65);
  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(--verde-light);
  color: var(--verde);
  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-verde) }
.toast-error   { background: linear-gradient(135deg, #dc2626, #b91c1c) }
.toast-warning { background: var(--grad-dorado); color: var(--navy) }
.toast-info    { background: var(--grad-navy) }

/* Placeholder en inputs oscuros (cabecera del chat) */
#chat-search::placeholder { color: rgba(167,243,208,.65) }

/* ════════════════════════════════════════════════════════════════
   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(--verde-light);
  color: var(--verde);
  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(--verde-light) }
.contact-item.active { background: var(--verde-light); border-left: 3px solid var(--verde) }

.contact-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad-aurora);
  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-verde);
  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(--verde); box-shadow: 0 0 0 3px var(--verde-glow) }

.btn-send {
  width: 40px; height: 40px;
  background: var(--grad-verde);
  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-verde);
  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(--verde);
  outline: none;
  box-shadow: 0 0 0 3px var(--verde-glow);
}

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

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

.pension-card {
  background: var(--blanco);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  border-left: 5px solid var(--gris3);
  transition: var(--t) var(--ease);
  border: 1px solid var(--gris2);
  border-left-width: 5px;
}

.pension-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) }
.pension-card.pendiente { border-left-color: #dc2626 }
.pension-card.pagado    { border-left-color: #10b981 }
.pension-card.exonerado { border-left-color: #d97706 }
.pension-card .alumno-name { font-weight: 800; font-size: 14px; font-family: var(--font-head); color: var(--texto) }

.deuda-alert {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(220,38,38,.07);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  margin-top: 10px;
  color: #dc2626;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(220,38,38,.15);
}

/* ════════════════════════════════════════════════════════════════
   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(--verde) }
.ev-examen    .cal-event-stripe { background: #dc2626 }
.ev-feriado   .cal-event-stripe { background: var(--dorado) }
.ev-bimestre  .cal-event-stripe { background: var(--violet) }
.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(--verde);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: var(--t) var(--ease);
  background: var(--verde-light);
  position: relative;
}

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

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

.huella-circle.scanning i { color: var(--dorado2) }

@keyframes huellaLatido {
  0%,100% { box-shadow: 0 0 0 0 var(--verde-glow) }
  50%     { box-shadow: 0 0 0 20px rgba(16,185,129,0) }
}

.huella-circle.ok    { border-color: #10b981; background: rgba(16,185,129,.08) }
.huella-circle.ok i  { color: #10b981 }
.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(--verde);
  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(--dorado);
  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(124,58,237,.1); color: var(--violet) }
.mat-ico.yt     { background: rgba(220,38,38,.1);  color: #dc2626 }
.mat-ico.img    { background: rgba(14,165,233,.1); color: var(--sky) }
.mat-ico.link   { background: var(--verde-light);  color: var(--verde) }
.mat-ico.file   { background: var(--dorado-light); color: var(--dorado2) }
.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(--verde);
}

.pregunta-num  { font-size: 10px; font-weight: 800; color: var(--verde); 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(16,185,129,.10); color: #047857; font-weight: 700; border-color: rgba(16,185,129,.25) }
.alt-item input[type=radio] { accent-color: var(--verde) }
.alt-key { width: 22px; font-weight: 800; flex-shrink: 0; color: var(--verde2) }

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

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

/* ════════════════════════════════════════════════════════════════
   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-verde  { color: var(--verde) }
.text-dorado { color: var(--dorado2) }
.text-rojo   { color: #dc2626 }
.text-violet { color: var(--violet) }
.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-verde-light  { background: var(--verde-light) }
.bg-dorado-light { background: var(--dorado-light) }
.bg-violet-light { background: var(--violet-light) }
.bg-sky-light    { background: var(--sky-light) }
.bg-rose-light   { background: var(--rose-light) }

.border-verde  { border: 1px solid rgba(16,185,129,.22) }
.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) }

/* Divisor con gradiente */
.divider-grad {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--verde), var(--dorado), transparent);
  border: none;
  margin: 16px 0;
  opacity: .4;
}

/* Pill info */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.pill-verde  { background: var(--verde-light);  color: var(--verde2) }
.pill-dorado { background: var(--dorado-light); color: var(--dorado2) }
.pill-violet { background: var(--violet-light); color: var(--violet2) }

.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 */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(16,185,129,.18);
  border-top-color: var(--verde);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg) } }

/* Progress bar */
.progress-bar {
  height: 6px;
  background: var(--gris2);
  border-radius: 3px;
  overflow: hidden;
}

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

/* Scrollbar personalizado */
::-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(--verde) }

/* Selección */
::selection { background: rgba(16,185,129,.20); color: var(--verde2) }

/* ════════════════════════════════════════════════════════════════
   GRADEBOOK — Registro de Notas Profesional
════════════════════════════════════════════════════════════════ */

/* ── Tarjeta del registro ───────────────────────────────────── */
.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(16,185,129,.12);
}

/* ── Encabezado del registro ────────────────────────────────── */
.gradebook-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--navy) 0%, #064e3b 100%);
  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(16,185,129,.35); color: #6ee7b7 }
.gb-badge-sec   { background: rgba(245,158,11,.3);  color: #fcd34d }

/* ── Barra de herramientas ──────────────────────────────────── */
.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(2,44,34,.22);
}
.gb-tool-btn:hover i { color: var(--dorado) }
.gb-tool-save { background: var(--verde-light); border-color: var(--verde); color: var(--verde2) }
.gb-tool-save i { color: var(--verde) }
.gb-tool-save:hover { background: var(--verde); color: white }

/* ── Contenedor de tabla ────────────────────────────────────── */
.gradebook-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 380px);
  min-height: 200px;
}

/* ── Tabla ──────────────────────────────────────────────────── */
.gradebook-table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
  min-width: 600px;
}

/* Cabecera */
.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: #065f46 }

.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(--dorado3); 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: #fcd34d; font-size: 10px; text-align: center; font-weight: 700; background: #064e3b }
.gb-th-extra { color: #c4b5fd; font-size: 10px; text-align: center; font-weight: 600 }

/* Filas */
.gb-row    { background: var(--blanco) }
.gb-row-alt { background: #f8fafc }
.gb-row:hover, .gb-row-alt:hover { background: #e4f4eb }

.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(15,39,68,.04); border: 1px solid #cbd5e1 }

/* Input de nota */
.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(16,185,129,.08); box-shadow: 0 0 0 2px rgba(16,185,129,.28) }
.gb-input::-webkit-inner-spin-button,
.gb-input::-webkit-outer-spin-button { opacity: .4 }

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

/* ── Colores de notas ───────────────────────────────────────── */
.nota-rojo   { color: #dc2626 !important }
.nota-azul   { color: #2563eb !important }
.nota-verde  { color: #059669 !important }

/* ── Leyenda ────────────────────────────────────────────────── */
.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;
}

/* ── Tabla vacía ────────────────────────────────────────────── */
.gradebook-empty {
  text-align: center;
  padding: 60px 32px;
  color: #64748b;
}

/* ── Configuración modal ────────────────────────────────────── */
.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(--verde) }

.btn-xs {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1.5px solid var(--verde);
  color: var(--verde);
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s;
}
.btn-xs:hover { background: var(--verde); color: white }

.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) }

/* ── Print ──────────────────────────────────────────────────── */
@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 — Dashboard ejecutivo
================================================================ */
.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:#10b981 } .prop-kpi-verde .prop-kpi-val,.prop-kpi-verde .prop-kpi-icon { color:#10b981 }
.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-violet { border-top-color:#8b5cf6 } .prop-kpi-violet .prop-kpi-val,.prop-kpi-violet .prop-kpi-icon { color:#8b5cf6 }
.prop-kpi-navy   { border-top-color:#0ea5e9 } .prop-kpi-navy .prop-kpi-val,.prop-kpi-navy .prop-kpi-icon { color:#0284c7 }
.prop-kpi-rojo   { border-top-color:#dc2626 } .prop-kpi-rojo   .prop-kpi-val,.prop-kpi-rojo   .prop-kpi-icon { color:#dc2626 }
.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,#10b981,#34d399) }
.prop-bar-azul   { background:linear-gradient(90deg,#2563eb,#60a5fa) }
.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:#2563eb } .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:linear-gradient(135deg,#f59e0b,#d97706); color:white; font-size:11px; font-weight:800; padding:3px 12px; border-radius:20px; letter-spacing:1px; box-shadow:0 2px 8px rgba(245,158,11,.4) }
.elite-banner { background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1.5px solid #fcd34d; border-radius:10px; padding:12px 16px; margin-bottom:12px; display:flex; align-items:center; gap:8px; font-weight:700; color:#92400e; font-size:14px }
.elite-banner i { color:var(--dorado); font-size:18px }
.elite-row { background:linear-gradient(90deg,#fffbeb 0%,white 40%) }
.elite-row:hover { background:#fef3c7 !important }
.elite-alumno { display:flex; align-items:center; gap:10px }
.elite-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#f59e0b,#d97706); display:flex; align-items:center; justify-content:center; color:white; font-size:14px; flex-shrink:0 }
.elite-badge  { background:linear-gradient(135deg,#f59e0b,#d97706); color:white; font-size:9px; font-weight:800; padding:2px 7px; border-radius:10px; letter-spacing:.5px; box-shadow:0 2px 6px rgba(245,158,11,.35) }
.elite-puntaje { font-size:22px; font-weight:900; color:#d97706 }
.badge-dorado { background:rgba(245,158,11,.15); color:#92400e; font-weight:700 }
.badge-navy   { background:rgba(2,44,34,.10); color:var(--navy); font-weight:700 }
.alumno-elite-tag { background:linear-gradient(135deg,#f59e0b,#d97706); 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:linear-gradient(135deg,#8b5cf6,#6d28d9); 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 }
.btn-sm { padding:5px 12px; font-size:12px }

/* ================================================================
   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 }