/* =========================================================
   UCENM — Plataforma Académica
   styles.css  |  v1.0.0  |  2026
   ========================================================= */

/* ── Variables ──────────────────────────────────────────── */
:root {
  --azul-osc : #003A75;
  --azul-med : #005BAA;
  --azul-cla : #E8F0FB;
  --dorado   : #C9A327;
  --dorado-cla: #FDF6E3;
  --blanco   : #FFFFFF;
  --gris-f   : #F4F6F9;
  --gris-b   : #E2E8F0;
  --gris-m   : #94A3B8;
  --gris-t   : #6B7280;
  --gris-d   : #1E293B;
  --rojo     : #DC2626;
  --verde    : #16A34A;
  --naranja  : #EA580C;
  --sombra   : 0 2px 8px rgba(0,58,117,.10);
  --sombra-m : 0 4px 16px rgba(0,58,117,.14);
  --radio    : 10px;
  --radio-s  : 6px;
  --font     : 'Inter', 'Roboto', system-ui, sans-serif;
  --mono     : 'Space Mono', 'Courier New', monospace;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--gris-f); color: var(--gris-d); min-height:100vh;
       display:flex; flex-direction:column; font-size:15px; }
a { color: var(--azul-med); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width:100%; }
button { font-family: var(--font); cursor:pointer; }
input, select, textarea { font-family: var(--font); }

/* ── Utilidades ─────────────────────────────────────────── */
.hidden { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.flex    { display:flex; }
.flex-col{ display:flex; flex-direction:column; }
.gap-1   { gap:.5rem; }  .gap-2 { gap:1rem; } .gap-3 { gap:1.5rem; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.text-sm  { font-size:.85rem; }
.text-xs  { font-size:.75rem; }
.fw-600   { font-weight:600; }
.fw-700   { font-weight:700; }
.mt-1     { margin-top:.5rem; }
.mt-2     { margin-top:1rem; }
.mt-3     { margin-top:1.5rem; }
.mb-1     { margin-bottom:.5rem; }
.mb-2     { margin-bottom:1rem; }
.w-full   { width:100%; }
.text-right { text-align:right; }
.truncate { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* ── Badge / Chips ──────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.2rem .6rem; border-radius:20px; font-size:.72rem; font-weight:600;
  white-space: nowrap;
}
.badge-azul  { background:var(--azul-cla); color:var(--azul-osc); }
.badge-oro   { background:var(--dorado-cla); color:#7a5c0a; }
.badge-verde { background:#DCFCE7; color:#166534; }
.badge-rojo  { background:#FEE2E2; color:#991B1B; }
.badge-gris  { background:var(--gris-b); color:var(--gris-t); }
.badge-naranja{ background:#FEF3C7; color:#92400E; }

/* ── Botones ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1rem; border-radius:var(--radio-s); font-size:.875rem; font-weight:600;
  border:none; transition: all .15s ease; cursor:pointer; white-space:nowrap;
}
.btn-primary   { background:var(--azul-med); color:#fff; }
.btn-primary:hover { background:var(--azul-osc); }
.btn-outline   { background:transparent; color:var(--azul-med); border:1.5px solid var(--azul-med); }
.btn-outline:hover { background:var(--azul-cla); }
.btn-gold      { background:var(--dorado); color:#fff; }
.btn-gold:hover{ background:#b08920; }
.btn-danger    { background:var(--rojo); color:#fff; }
.btn-danger:hover { background:#B91C1C; }
.btn-ghost     { background:transparent; color:var(--gris-t); border:1.5px solid var(--gris-b); }
.btn-ghost:hover { background:var(--gris-f); }
.btn-sm        { padding:.3rem .7rem; font-size:.78rem; }
.btn-icon      { padding:.4rem; border-radius:var(--radio-s); background:transparent; border:none; color:var(--gris-t); }
.btn-icon:hover{ background:var(--gris-b); color:var(--gris-d); }

/* ── Tarjetas ────────────────────────────────────────────── */
.card {
  background:var(--blanco); border-radius:var(--radio); padding:1.25rem;
  box-shadow: var(--sombra); border:1px solid var(--gris-b);
}
.card-header { display:flex; align-items:center; justify-content:space-between;
               margin-bottom:.875rem; gap:.5rem; }
.card-title  { font-size:1rem; font-weight:700; color:var(--azul-osc); }
.card-subtitle { font-size:.82rem; color:var(--gris-t); margin-top:.15rem; }

/* ── Formularios ─────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:.35rem; }
.form-label { font-size:.82rem; font-weight:600; color:var(--gris-d); }
.form-control {
  padding:.55rem .75rem; border:1.5px solid var(--gris-b); border-radius:var(--radio-s);
  font-size:.875rem; color:var(--gris-d); background:var(--blanco);
  transition: border-color .15s;
  width:100%;
}
.form-control:focus { outline:none; border-color:var(--azul-med); box-shadow:0 0 0 3px rgba(0,91,170,.12); }
.form-control::placeholder { color:var(--gris-m); }
textarea.form-control { resize:vertical; min-height:80px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-hint { font-size:.75rem; color:var(--gris-t); }

/* ── Cabecera institucional ──────────────────────────────── */
#app-header {
  background: linear-gradient(135deg, var(--azul-osc) 0%, var(--azul-med) 100%);
  color:#fff; padding:.75rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; position:sticky; top:0; z-index:100;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.header-logo { display:flex; align-items:center; gap:.875rem; }
.logo-siglas {
  background:var(--dorado); color:#fff; font-weight:800; font-size:1.1rem;
  padding:.4rem .7rem; border-radius:var(--radio-s); font-family:var(--font);
  letter-spacing:.5px; flex-shrink:0;
}
.header-inst h1 { font-size:.95rem; font-weight:700; line-height:1.2; }
.header-inst p  { font-size:.75rem; opacity:.8; font-family:var(--mono); }
.header-breadcrumb {
  display:flex; align-items:center; gap:.4rem; flex:1;
  justify-content:center; flex-wrap:wrap;
}
.breadcrumb-item { font-size:.78rem; opacity:.9; white-space:nowrap; }
.breadcrumb-sep  { opacity:.5; font-size:.9rem; }
.breadcrumb-active { font-weight:700; color:var(--dorado); }
.header-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.header-actions .btn { font-size:.78rem; padding:.3rem .7rem; }
.btn-header-out { background:transparent; border:1.5px solid rgba(255,255,255,.4); color:#fff; }
.btn-header-out:hover { background:rgba(255,255,255,.12); }
#ciclo-badge {
  font-size:.7rem; background:rgba(201,163,39,.25); color:var(--dorado);
  padding:.15rem .5rem; border-radius:20px; border:1px solid rgba(201,163,39,.4);
  white-space:nowrap; font-family:var(--mono);
}

/* ── Navegación principal ────────────────────────────────── */
#app-nav {
  background:var(--blanco); border-bottom:2px solid var(--gris-b);
  padding:0 1.5rem; display:flex; align-items:stretch; gap:0; overflow-x:auto;
  position:sticky; top:66px; z-index:99;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.nav-link {
  display:flex; align-items:center; gap:.35rem; padding:.7rem 1rem;
  font-size:.83rem; font-weight:600; color:var(--gris-t);
  border-bottom:3px solid transparent; cursor:pointer; white-space:nowrap;
  transition: all .15s; border-top:none; border-left:none; border-right:none;
  background:transparent;
}
.nav-link:hover { color:var(--azul-med); background:var(--gris-f); }
.nav-link.active { color:var(--azul-osc); border-bottom-color:var(--azul-med); background:var(--azul-cla); }
.nav-link .icon  { font-size:1rem; }

/* ── Contenido principal ─────────────────────────────────── */
#app-content { flex:1; padding:1.5rem; max-width:1200px; margin:0 auto; width:100%; }

/* ── Login ───────────────────────────────────────────────── */
#view-login {
  min-height:100vh; background:linear-gradient(155deg, var(--azul-osc) 0%, var(--azul-med) 50%, #004a8c 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2rem; gap:2rem;
}
.login-header { text-align:center; color:#fff; }
.login-siglas {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--dorado); color:#fff; font-weight:800; font-size:2rem;
  width:80px; height:80px; border-radius:20px; margin-bottom:1rem;
  box-shadow: 0 4px 20px rgba(201,163,39,.4);
}
.login-header h1 { font-size:1.4rem; font-weight:700; margin-bottom:.35rem; }
.login-header p  { font-size:.85rem; opacity:.75; }
.login-card {
  background:#fff; border-radius:var(--radio); padding:2rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.25); width:100%; max-width:440px;
}
.login-card h2 { font-size:1.1rem; font-weight:700; color:var(--azul-osc); margin-bottom:1.25rem; text-align:center; }
.role-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:1.5rem; }
.role-btn {
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:.875rem .5rem; border-radius:var(--radio); border:2px solid var(--gris-b);
  background:var(--gris-f); cursor:pointer; transition:all .15s;
  font-size:.78rem; font-weight:600; color:var(--gris-t);
}
.role-btn .ri { font-size:1.75rem; }
.role-btn:hover { border-color:var(--azul-med); background:var(--azul-cla); color:var(--azul-osc); }
.role-btn.selected { border-color:var(--azul-osc); background:var(--azul-cla); color:var(--azul-osc);
                     box-shadow:0 0 0 3px rgba(0,91,170,.15); }
.login-input-area { display:none; flex-direction:column; gap:1rem; }
.login-input-area.show { display:flex; }
.login-hint { font-size:.75rem; color:var(--gris-t); text-align:center; margin-top:.25rem; }
.login-footer { text-align:center; font-size:.72rem; color:rgba(255,255,255,.55); margin-top:1rem; }

/* ── Selector de Clases ──────────────────────────────────── */
#view-selector { padding:1.5rem; max-width:900px; margin:0 auto; }
.selector-header { margin-bottom:1.5rem; }
.selector-header h2 { font-size:1.3rem; font-weight:700; color:var(--azul-osc); }
.selector-header p  { color:var(--gris-t); margin-top:.25rem; }
.clases-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:1rem; }
.clase-card {
  background:var(--blanco); border-radius:var(--radio); padding:1.25rem;
  border:2px solid var(--gris-b); cursor:pointer; transition:all .2s;
  box-shadow: var(--sombra);
}
.clase-card:hover { border-color:var(--azul-med); box-shadow:var(--sombra-m); transform:translateY(-2px); }
.clase-card-codigo { font-family:var(--mono); font-size:.72rem; color:var(--gris-t); margin-bottom:.4rem; }
.clase-card-nombre { font-size:1rem; font-weight:700; color:var(--azul-osc); margin-bottom:.3rem; }
.clase-card-carrera { font-size:.78rem; color:var(--gris-t); margin-bottom:.75rem; }
.clase-card-meta { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── Dashboard ───────────────────────────────────────────── */
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1rem; }
.stat-card { background:var(--blanco); border-radius:var(--radio); padding:1.25rem;
             box-shadow:var(--sombra); border:1px solid var(--gris-b);
             border-left:4px solid var(--azul-med); }
.stat-card.gold { border-left-color:var(--dorado); }
.stat-card.green { border-left-color:var(--verde); }
.stat-card.red { border-left-color:var(--rojo); }
.stat-label { font-size:.78rem; color:var(--gris-t); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.stat-value { font-size:1.75rem; font-weight:800; color:var(--azul-osc); margin:.15rem 0; }
.stat-desc  { font-size:.8rem; color:var(--gris-t); }

.quick-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }

/* ── Calendario ──────────────────────────────────────────── */
.cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.cal-nav h2 { font-size:1.1rem; font-weight:700; color:var(--azul-osc); text-transform:capitalize; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-day-name { text-align:center; font-size:.7rem; font-weight:700; color:var(--gris-t);
                padding:.4rem 0; text-transform:uppercase; }
.cal-day {
  min-height:80px; background:var(--blanco); border:1px solid var(--gris-b);
  border-radius:var(--radio-s); padding:.3rem .4rem; cursor:pointer; transition:background .1s;
  display:flex; flex-direction:column; gap:2px; overflow:hidden;
}
.cal-day:hover { background:var(--gris-f); }
.cal-day.otro-mes { opacity:.35; background:var(--gris-f); cursor:default; }
.cal-day.hoy .cal-day-num {
  background:var(--azul-med); color:#fff; border-radius:50%;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
}
.cal-day-num { font-size:.78rem; font-weight:600; color:var(--gris-d); margin-bottom:2px; width:22px; text-align:center; }
.cal-chip {
  font-size:.65rem; font-weight:600; padding:1px 4px; border-radius:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chip-sesion  { background:#DBEAFE; color:#1E40AF; }
.chip-tarea   { background:#FEF3C7; color:#92400E; }
.chip-evento  { background:#DCFCE7; color:#166534; }
.chip-anuncio { background:#F3E8FF; color:#6B21A8; }

/* ── Lista eventos ───────────────────────────────────────── */
.event-list { display:flex; flex-direction:column; gap:.75rem; }
.event-item {
  background:var(--blanco); border-radius:var(--radio); padding:1rem 1.25rem;
  box-shadow:var(--sombra); border:1px solid var(--gris-b);
  display:flex; align-items:flex-start; gap:1rem;
}
.event-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:.3rem; }
.dot-sesion { background:var(--azul-med); }
.dot-tarea  { background:var(--dorado); }
.dot-evento { background:var(--verde); }
.event-body { flex:1; min-width:0; }
.event-title { font-weight:600; color:var(--gris-d); }
.event-meta  { font-size:.78rem; color:var(--gris-t); margin-top:.2rem; font-family:var(--mono); }
.event-actions { display:flex; gap:.25rem; flex-shrink:0; }

/* ── Tareas ──────────────────────────────────────────────── */
.tarea-card {
  background:var(--blanco); border-radius:var(--radio); padding:1.25rem;
  box-shadow:var(--sombra); border:1px solid var(--gris-b); margin-bottom:.75rem;
}
.tarea-card.entregada { border-left:4px solid var(--verde); }
.tarea-card.vencida   { border-left:4px solid var(--rojo); }
.tarea-card.pendiente { border-left:4px solid var(--dorado); }
.tarea-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.tarea-titulo { font-weight:700; color:var(--azul-osc); font-size:1rem; }
.tarea-desc   { color:var(--gris-t); font-size:.85rem; margin:.5rem 0; }
.tarea-meta   { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.tarea-fecha  { font-family:var(--mono); font-size:.75rem; color:var(--gris-t); }
.tarea-puntos { font-size:.78rem; font-weight:600; color:var(--azul-osc); }

/* Entregas maestro */
.entregas-bar { height:8px; background:var(--gris-b); border-radius:4px; overflow:hidden; margin:.3rem 0; }
.entregas-fill{ height:100%; background:var(--verde); border-radius:4px; transition:width .3s; }

/* ── Anuncios ────────────────────────────────────────────── */
.anuncio-card {
  background:var(--blanco); border-radius:var(--radio); padding:1.25rem;
  box-shadow:var(--sombra); border:1px solid var(--gris-b); margin-bottom:.75rem;
}
.anuncio-header { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.5rem; }
.anuncio-titulo { font-weight:700; color:var(--azul-osc); font-size:1rem; }
.anuncio-meta   { display:flex; align-items:center; gap:.75rem; margin-top:.5rem; flex-wrap:wrap; }
.anuncio-autor  { font-size:.78rem; color:var(--gris-t); }
.anuncio-fecha  { font-family:var(--mono); font-size:.72rem; color:var(--gris-m); }
.anuncio-contenido { font-size:.87rem; color:var(--gris-d); line-height:1.6; }

/* ── Pensum ──────────────────────────────────────────────── */
.pensum-progress { background:var(--blanco); border-radius:var(--radio); padding:1.25rem;
                   box-shadow:var(--sombra); border:1px solid var(--gris-b); margin-bottom:1.5rem; }
.pensum-barra { height:12px; background:var(--gris-b); border-radius:6px; overflow:hidden; margin:.5rem 0 .3rem; }
.pensum-fill  { height:100%; background:linear-gradient(90deg, var(--azul-med), var(--dorado)); border-radius:6px; transition:width .5s ease; }
.pensum-periodo { margin-bottom:1rem; }
.periodo-header {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--azul-osc); color:#fff; padding:.75rem 1rem;
  border-radius:var(--radio) var(--radio) 0 0; cursor:pointer; user-select:none;
}
.periodo-header h3 { font-size:.9rem; font-weight:700; }
.periodo-body { border:1px solid var(--gris-b); border-top:none;
                border-radius:0 0 var(--radio) var(--radio); overflow:hidden; }
.materia-row {
  display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
  border-bottom:1px solid var(--gris-b); background:var(--blanco);
  transition:background .1s;
}
.materia-row:last-child { border-bottom:none; }
.materia-row:hover { background:var(--gris-f); }
.materia-check { width:18px; height:18px; cursor:pointer; accent-color:var(--azul-med); flex-shrink:0; }
.materia-nombre { flex:1; font-size:.88rem; color:var(--gris-d); }
.materia-nombre.completada { text-decoration:line-through; color:var(--gris-m); }
.materia-cred { font-family:var(--mono); font-size:.72rem; color:var(--gris-t); white-space:nowrap; }
.materia-link { font-size:.72rem; color:var(--azul-med); font-weight:600; padding:.15rem .4rem;
                border-radius:4px; border:1px solid var(--azul-cla); background:var(--azul-cla); }
.materia-link:hover { background:var(--azul-med); color:#fff; border-color:var(--azul-med); text-decoration:none; }

/* ── Panel Admin ─────────────────────────────────────────── */
.admin-tabs { display:flex; gap:.25rem; flex-wrap:wrap; margin-bottom:1.5rem; overflow-x:auto; }
.admin-tab  {
  padding:.5rem 1rem; border-radius:var(--radio-s); font-size:.82rem; font-weight:600;
  color:var(--gris-t); background:transparent; border:1.5px solid var(--gris-b); cursor:pointer;
  transition:all .15s; white-space:nowrap;
}
.admin-tab:hover  { background:var(--azul-cla); color:var(--azul-osc); border-color:var(--azul-med); }
.admin-tab.active { background:var(--azul-osc); color:#fff; border-color:var(--azul-osc); }

.admin-section { display:none; }
.admin-section.active { display:block; }

/* Tabla */
.table-wrap { overflow-x:auto; border-radius:var(--radio); border:1px solid var(--gris-b); }
table { width:100%; border-collapse:collapse; background:var(--blanco); }
thead tr { background:var(--azul-osc); color:#fff; }
th { padding:.65rem 1rem; text-align:left; font-size:.78rem; font-weight:700;
     text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
td { padding:.7rem 1rem; font-size:.85rem; border-bottom:1px solid var(--gris-b);
     vertical-align:middle; }
tbody tr:hover { background:var(--gris-f); }
tbody tr:last-child td { border-bottom:none; }
.td-actions { display:flex; gap:.35rem; }

/* ── Modal ───────────────────────────────────────────────── */
#modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
  display:flex; align-items:flex-start; justify-content:center;
  padding:2rem 1rem; overflow-y:auto;
}
#modal-overlay.hidden { display:none; }
.modal-box {
  background:var(--blanco); border-radius:var(--radio); padding:1.75rem;
  width:100%; max-width:560px; box-shadow:0 8px 40px rgba(0,0,0,.2);
  position:relative; margin:auto;
}
.modal-box.modal-lg { max-width:720px; }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.modal-title  { font-size:1.1rem; font-weight:700; color:var(--azul-osc); }
.modal-form-grid { display:flex; flex-direction:column; gap:1rem; }
.modal-confirm-message { color:var(--gris-d); font-size:.95rem; line-height:1.6; }
.modal-footer { display:flex; gap:.5rem; justify-content:flex-end; margin-top:1.5rem; padding-top:1rem;
                border-top:1px solid var(--gris-b); }

/* ── Toast ───────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:2000;
                   display:flex; flex-direction:column; gap:.5rem; align-items:flex-end;
                   pointer-events:none; }
.toast {
  background:var(--gris-d); color:#fff; padding:.75rem 1rem; border-radius:var(--radio-s);
  font-size:.85rem; font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.2);
  display:flex; align-items:flex-start; gap:.6rem; min-width:240px; max-width:min(320px, calc(100vw - 2rem));
  animation: toastIn .25s ease; border-left:4px solid var(--dorado);
  pointer-events:auto;
}
.toast.success { border-left-color:var(--verde); }
.toast.error   { border-left-color:var(--rojo); }
.toast.notification { background:linear-gradient(135deg, var(--azul-osc), var(--azul)); }
.toast-icon { font-size:1rem; line-height:1; margin-top:.08rem; }
.toast-body { display:flex; flex-direction:column; gap:.2rem; }
.toast-body strong { font-size:.9rem; font-weight:700; }
.toast-body span { font-size:.8rem; line-height:1.4; color:rgba(255,255,255,.9); }
.toast-closing { opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease; }
@keyframes toastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

@media (max-width: 640px) {
  #toast-container { left:1rem; right:1rem; bottom:1rem; align-items:stretch; }
  .toast { max-width:none; min-width:0; width:100%; }
}

/* ── Empty state ─────────────────────────────────────────── */
.empty-state { text-align:center; padding:3rem 1.5rem; color:var(--gris-t); }
.empty-state .icon { font-size:3rem; margin-bottom:.75rem; opacity:.4; }
.empty-state p { font-size:.9rem; }

/* ── Footer ──────────────────────────────────────────────── */
#app-footer {
  background:var(--azul-osc); color:rgba(255,255,255,.7);
  padding:1.75rem 1.5rem; margin-top:auto;
}
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-top { display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; margin-bottom:1.25rem; }
.footer-brand h3 { color:#fff; font-size:1rem; font-weight:700; margin-bottom:.3rem; }
.footer-brand p  { font-size:.78rem; }
.footer-links { display:flex; flex-direction:column; gap:.3rem; }
.footer-links a { font-size:.78rem; color:rgba(255,255,255,.65); }
.footer-links a:hover { color:#fff; text-decoration:none; }
.footer-links h4 { font-size:.75rem; font-weight:700; color:var(--dorado); text-transform:uppercase; letter-spacing:.5px; margin-bottom:.4rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:1rem;
                 display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.footer-bottom p { font-size:.72rem; }

/* ── Sección títulos ─────────────────────────────────────── */
.section-title { font-size:1.2rem; font-weight:700; color:var(--azul-osc); margin-bottom:1.25rem;
                 display:flex; align-items:center; gap:.5rem; }
.section-title::after { content:''; flex:1; height:2px; background:var(--gris-b); margin-left:.5rem; }

/* ── Tabs de contenido ───────────────────────────────────── */
.content-tabs { display:flex; gap:.5rem; margin-bottom:1.25rem; border-bottom:2px solid var(--gris-b); }
.content-tab { padding:.5rem 1rem; font-size:.83rem; font-weight:600; color:var(--gris-t);
               border:none; background:transparent; cursor:pointer; border-bottom:2.5px solid transparent;
               margin-bottom:-2px; transition:all .15s; }
.content-tab:hover { color:var(--azul-osc); }
.content-tab.active { color:var(--azul-osc); border-bottom-color:var(--azul-med); }

/* ── Alumnos tabla (dashboard maestro) ───────────────────── */
.alumno-row-status { display:flex; gap:.25rem; flex-wrap:wrap; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:768px) {
  #app-header { padding:.65rem 1rem; }
  .header-inst h1 { font-size:.82rem; }
  .header-breadcrumb { display:none; }
  #app-content { padding:1rem; }
  .form-row { grid-template-columns:1fr; }
  .role-grid { grid-template-columns:repeat(3,1fr); }
  .cal-day { min-height:55px; }
  .cal-chip { display:none; }
  .cal-day.has-events::after { content:'•'; color:var(--azul-med); font-size:1rem; }
  #app-nav { top:56px; }
  .admin-tabs { gap:.25rem; }
  .footer-top { flex-direction:column; gap:1rem; }
  .modal-box { padding:1.25rem; }
  th, td { padding:.5rem .6rem; }
}
@media (max-width:480px) {
  .clases-grid { grid-template-columns:1fr; }
  .dashboard-grid { grid-template-columns:1fr; }
  .header-actions .btn span { display:none; }
}