/* =========================================================
   Portal Académico — Tema Morado Oscuro
   Paleta base:
   --bg        #0f0a1f
   --panel     #1a1233
   --panel-2   #221a40
   --brand     #7c3aed (morado)
   --brand-2   #a78bfa (lila)
   --brand-3   #4c1d95 (morado profundo)
   --text      #e9e7f7
   --muted     #c9c5de
   --line      #2d2550
   Acentos estado:
   --ok        #10b981
   --err       #ef4444
   --warn      #f59e0b
   ========================================================= */

/* ===== Reset & base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { color-scheme: dark; }
:root{
  --bg:#0f0a1f;
  --panel:#1a1233;
  --panel-2:#221a40;
  --brand:#7c3aed;
  --brand-2:#a78bfa;
  --brand-3:#4c1d95;
  --text:#e9e7f7;
  --muted:#c9c5de;
  --line:#2d2550;

  --ok:#10b981;
  --err:#ef4444;
  --warn:#f59e0b;

  --shadow: 0 10px 30px rgba(20, 7, 45, .45);
  --radius: 14px;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(800px 600px at 120% 10%, rgba(167,139,250,.18), transparent 60%),
              var(--bg);
}

/* ===== Layout ===== */
.layout {
  display: grid;
  grid-template-rows: 56px 1fr;
  grid-template-columns: 260px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar content";
  min-height: 100vh;
}

@media (max-width: 900px){
  html, body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.layout {
    display:block;
  }

  #sidebar{
    position: fixed;
    top: 56px;
    left: -260px;
    width: 260px;
    height: calc(100vh - 56px);
    transition: left .25s ease;
    z-index: 1001;
    background:#2a004d;
    color:#fff;
    overflow-y:auto;
  }
  #sidebar.open{
    left: 0;
  }
}


.topbar { grid-area: topbar; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 14px;
  background: linear-gradient(90deg, var(--panel), var(--panel-2));
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 50;
}
.topbar strong{
  font-weight:800; letter-spacing:.3px;
  background: linear-gradient(90deg, var(--brand-2), #fff);
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.burger{
  border:0; background:transparent; color:var(--muted); font-size:22px; cursor:pointer;
}
.userbox a{ color: var(--brand-2); text-decoration:none; font-weight:600; }
.userbox a:hover{ text-decoration:underline; }

.sidebar{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-right:1px solid var(--line);
  padding:12px; position: sticky; top:56px; height: calc(100vh - 56px);
  overflow:auto;
}
.sidebar .nav-group{
  margin:16px 10px 6px; color: var(--muted); font-size:12px; letter-spacing:.6px; text-transform: uppercase;
}
.sidebar nav a{
  display:block; padding:10px 12px; border-radius:10px; color: var(--text);
  text-decoration:none; margin:4px 6px;
  transition: .2s ease;
}
.sidebar nav a:hover{
  background: linear-gradient(90deg, rgba(124,58,237,.18), transparent 70%);
  transform: translateX(2px);
}
.sidebar nav a.active{
  background: linear-gradient(90deg, rgba(124,58,237,.28), rgba(124,58,237,.06));
  border:1px solid rgba(167,139,250,.28);
}

.content{
  padding: 18px; width: 100%;
}

/* ===== Cards, panels ===== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)),
              var(--panel);
  border:1px solid var(--line); border-radius: var(--radius); padding:16px 16px;
  box-shadow: var(--shadow);
  margin: 12px 0;
}
.card h2, .card h3, .card h4{ margin: 6px 0 12px; }
.tip{ color: var(--muted); font-size: 12px; margin-top: 8px; }

/* ===== Tables ===== */
table{ width:100%; border-collapse: collapse; }
thead th{
  text-align:left; font-weight:700; font-size:13px;
  background: linear-gradient(180deg, rgba(124,58,237,.16), rgba(124,58,237,.06));
  color:#eae6ff; border-bottom:1px solid var(--line);
  padding:10px;
  position: sticky; top:0; z-index:1;
}
tbody td{ padding:10px; border-bottom:1px solid var(--line); color: var(--text); }
tbody tr:hover{ background: rgba(167,139,250,.06); }
td.actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* Zebra (sutil) */
tbody tr:nth-child(even){ background: rgba(255,255,255,0.01); }

/* Scroll contenedores */
.scroll-x{ overflow:auto; padding-bottom:8px; border-radius: 10px; }
.scroll-x::-webkit-scrollbar{ height:10px; }
.scroll-x::-webkit-scrollbar-track{ background: #120b26; border-radius: 999px; }
.scroll-x::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius: 999px;
}

/* ===== Forms ===== */
label{ font-size:12px; color: var(--muted); display:block; margin-bottom:6px;}
input, select, textarea{
  width:100%; background: #120b26; color: var(--text); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; outline:none;
  transition: .18s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(167,139,250,.15);
}
.toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin:8px 0 6px; }
.grow{ flex:1 1 260px; }
.grid-1{ display:grid; gap:12px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
@media (max-width: 860px){
  .layout{ grid-template-columns: 0 1fr; }
  #sidebar{ position: fixed; left:-280px; width:260px; z-index: 60; height:100vh; top:56px; }
  #sidebar.open{ left:0; transition:left .2s ease; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }
}

/* ===== Buttons ===== */
.btn{
  appearance:none; border:1px solid transparent; background: linear-gradient(180deg, var(--brand), var(--brand-3));
  color:#fff; padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer;
  box-shadow: 0 6px 16px rgba(124,58,237,.35); transition: .18s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn.ghost{
  background: transparent; color: var(--brand-2); border:1px solid rgba(167,139,250,.35);
}
.btn.row{ padding:6px 10px; font-size: 12px; }
.btn.danger{
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  box-shadow: 0 6px 16px rgba(239,68,68,.35);
}

/* ===== Flash messages ===== */
.flash{ border:1px solid var(--line); padding:10px 12px; border-radius: 10px; margin:10px 0; }
.flash.ok{ background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.45); color:#c7f7e7; }
.flash.err{ background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.45); color:#ffd9d9; }

/* ===== Badges (asistencias) ===== */
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; color:#fff }
.badge.blue{   background:#3b82f6 }  /* P */
.badge.red{    background:#ef4444 }  /* A */
.badge.green{  background:#22c55e }  /* J */
.badge.orange{ background:#f59e0b }  /* L */

/* ===== Evaluaciones: fondos por bloque ===== */
.midterm { background: rgba(255, 235, 153, .14); }
.final   { background: rgba(255, 176, 120, .14); }
.continua{ background: rgba(167, 245, 189, .12); }

/* ===== Auth page (login/registro) ===== */
.auth-wrap{ display:flex; justify-content:center; align-items:center; min-height: calc(100dvh - 56px); padding: 16px; }
.auth-card{
  width:100%; max-width: 420px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.0)), var(--panel);
  border:1px solid var(--line); border-radius: var(--radius); padding:20px 18px;
  box-shadow: var(--shadow);
}
.auth-card h2{ margin-top: 4px; }
.auth-alt{ margin-top:12px; display:flex; gap:8px; justify-content:center; align-items:center; }

/* ===== Header/footer minimal ===== */
footer{ color:var(--muted); font-size:12px; text-align:center; padding:16px 6px; opacity:.85; }

/* ===== Forms (inline radios) ===== */
td input[type="radio"]{
  transform: translateY(1px);
}

/* ===== “Tip” Panel ===== */
.card .legend{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:10px; padding: 8px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(124,58,237,.10), rgba(124,58,237,.05));
  border:1px solid rgba(167,139,250,.25);
}

/* ===== Modals (si usas) ===== */
.modal-backdrop{ position:fixed; inset:0; background:#0008; display:none; align-items:center; justify-content:center; z-index: 80; }
.modal-backdrop.open{ display:flex; }
.modal{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding:16px; width:min(92vw, 680px);
  box-shadow: var(--shadow);
}

/* ===== Small utilities ===== */
.center { text-align:center; }
.right { text-align:right; }
.muted { color: var(--muted); }
hr{ border:0; border-top:1px solid var(--line); margin: 12px 0; }

/* ===== Active page highlight helper ===== */
a[aria-current="page"]{
  background: linear-gradient(90deg, rgba(124,58,237,.28), rgba(124,58,237,.06));
  border:1px solid rgba(167,139,250,.28);
}

/* ===== Table headers sticky on scroll containers ===== */
.scroll-x thead th{ position: sticky; top: 0; }

/* ===== Inputs small for notas ===== */
table input[type="number"]{
  width:80px;
  background:#100a25;
}

/* ===== Chips / counters (por si agregas tags) ===== */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid rgba(167,139,250,.35);
  background: rgba(124,58,237,.08); border-radius:999px; color: var(--text);
}

/* ===== Links ===== */
a { color: var(--brand-2); }
a:hover { color: #fff; }

/* ===== Focus ring global ===== */
:focus-visible{ outline: 3px solid rgba(167,139,250,.35); outline-offset: 2px; border-radius: 6px; }

/* ===== Tooltips (si los usas) ===== */
.tooltip{
  position:relative;
}
.tooltip:hover::after{
  content: attr(data-tip);
  position:absolute; left:50%; transform: translateX(-50%);
  bottom: 120%;
  background:#100a25; border:1px solid var(--line); color:var(--text);
  padding:6px 8px; border-radius:8px; white-space:nowrap; font-size:12px;
  box-shadow: var(--shadow);
}

/* ===== Attendance legend (si la presentas) ===== */
.legend-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.legend-p { background:#3b82f6; } /* Present */
.legend-a { background:#ef4444; } /* Absent  */
.legend-j { background:#22c55e; } /* Justified */
.legend-l { background:#f59e0b; } /* Late     */

 
/* =========================================================
   OVERRIDE: Tema claro (contenido blanco + barras morado)
   Pega este bloque al FINAL del CSS actual
   ========================================================= */

:root{
  /* Colores base claros */
  --bg:#ffffff;
  --panel:#ffffff;        /* tarjetas/paneles blancos */
  --panel-2:#ffffff;
  --text:#222222;         /* texto oscuro en contenido */
  --muted:#555555;        /* texto sutil */
  --line:#e5e7eb;         /* bordes claros */

  /* Conservamos la marca morada */
  --brand:#7c3aed;
  --brand-2:#6d28d9;
  --brand-3:#4c1d95;

  --shadow: 0 8px 18px rgba(0,0,0,.06);
  --radius: 14px;
}

/* Fondo general claro */
body{
  background:#fff !important;
  color:var(--text) !important;
}

/* Topbar morado oscuro */
.topbar{
  background:#3b006b !important;
  border-bottom: 1px solid #2f0a52 !important;
}
.topbar strong{
  background: none !important;
  color:#fff !important;
}

/* Sidebar morado oscuro */
.sidebar{
  background:#4a007a !important;
  border-right:1px solid #2f0a52 !important;
}
.sidebar .nav-group{ color: #e7dbff !important; opacity:.8; }
.sidebar nav a{ color:#fff !important; }
.sidebar nav a:hover{
  background: rgba(255,255,255,.10) !important;
  transform: translateX(2px);
}
.sidebar nav a.active,
a[aria-current="page"]{
  background: rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.28) !important;
}

/* Contenido: tarjetas blancas con sombra sutil */
.card{
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.card h2, .card h3, .card h4{ color:#3b006b; }

/* Tablas en claro */
thead th{
  background:#f5f5f7 !important;
  color:#333 !important;
  border-bottom:1px solid var(--line) !important;
}
tbody td{
  color:#222 !important; border-bottom:1px solid var(--line) !important;
}
tbody tr:hover{ background:#faf7ff !important; } /* toque lila muy suave */
tbody tr:nth-child(even){ background:#ffffff !important; }

/* Inputs claros */
input, select, textarea{
  background:#fff !important;
  color:#222 !important;
  border:1px solid var(--line) !important;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--brand-2) !important;
  box-shadow: 0 0 0 3px rgba(109,40,217,.15) !important;
}

/* Botones: mismos morados */
.btn{
  background: linear-gradient(180deg, var(--brand), var(--brand-3)) !important;
  color:#fff !important;
  box-shadow: 0 6px 16px rgba(124,58,237,.25) !important;
}
.btn.ghost{
  background: transparent !important;
  color: var(--brand-2) !important;
  border:1px solid rgba(109,40,217,.35) !important;
}
.btn.danger{
  background: linear-gradient(180deg, #ef4444, #b91c1c) !important;
  box-shadow: 0 6px 16px rgba(239,68,68,.25) !important;
}

/* Flash messages en claro */
.flash.ok{ background:#e8fff4 !important; border-color:#9ee6c7 !important; color:#0f5132 !important; }
.flash.err{ background:#ffecec !important; border-color:#ffb3b3 !important; color:#842029 !important; }

/* Scrollbar claro del contenedor horizontal */
.scroll-x::-webkit-scrollbar-track{ background:#f1f1f5 !important; }
.scroll-x::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, #7c3aed, #a78bfa) !important;
}

/* Fondos de bloques de evaluación (en claro, sutiles) */
.midterm { background: rgba(255, 235, 153, .28) !important; }
.final   { background: rgba(255, 176, 120, .28) !important; }
.continua{ background: rgba(167, 245, 189, .28) !important; }

/* Badges de asistencia se mantienen */
.badge.blue{ background:#2563eb !important; }
.badge.red{ background:#ef4444 !important; }
.badge.green{ background:#16a34a !important; }
.badge.orange{ background:#f59e0b !important; }

/* Tooltips en claro */
.tooltip:hover::after{
  background:#fff !important; border:1px solid var(--line) !important; color:#222 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
}

/* Inputs pequeños de notas en claro */
table input[type="number"]{
  background:#fff !important; color:#222 !important; border:1px solid var(--line) !important;
}


/* =========================================================
   Tema: Morado oscuro profundo
   ========================================================= */

:root{
  --brand:#3a0ca3;   /* morado base más oscuro */
  --brand-2:#5f0f40; /* acento vino/magenta */
  --brand-3:#240046; /* morado casi negro */
}

/* Sidebar */
.sidebar{
  background:#240046 !important;  /* morado profundo */
  border-right:1px solid #1b0033 !important;
}
.sidebar .nav-group{ 
  color: #d9c2ff !important; 
  opacity:.8; 
}

/* Links normales */
.sidebar nav a{
  color:#f5f3ff !important;
  transition: background .2s, transform .2s, color .2s;
}

/* Hover resaltante */
.sidebar nav a:hover{
  background: linear-gradient(90deg, rgba(58,12,163,.35), rgba(36,0,70,.35)) !important;
  color:#ffdaff !important;
  transform: translateX(4px);
}

/* Activo */
.sidebar nav a.active,
a[aria-current="page"]{
  background: linear-gradient(90deg, rgba(58,12,163,.55), rgba(36,0,70,.45)) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  color:#fff !important;
}



/* ===== Topbar ajustes ===== */
.topbar{
  background: linear-gradient(90deg, #240046, #3a0ca3) !important; /* gradiente morado profundo */
  border-bottom: 1px solid #1b0033 !important;
  color: #fff !important;   /* Texto blanco */
}

.topbar strong{
  background: none !important;
  color: #fff !important;   /* Forzamos blanco */
}

.topbar a, 
.topbar .userbox a, 
.topbar .burger{
  color: #fff !important;   /* Iconos y links blancos */
}
.topbar a:hover, 
.topbar .userbox a:hover, 
.topbar .burger:hover{
  color: #d9c2ff !important; /* Hover lila claro */
}

/* === Logo / Marca === */
.brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.brand img.brand-logo {
  height: 28px; width:auto; display:block;
  object-fit: contain;
}
@media (max-width: 860px){
  .brand img.brand-logo { height: 24px; }
}

/* Login: logo centrado grande */
.auth-logo {
  display:flex; justify-content:center; margin-bottom: 12px;
}
.auth-logo img {
  height: 70px; width:auto; object-fit: contain;
}


/* === Login con video de fondo === */
.login-page { position: relative; overflow: hidden; }
.login-video-bg{
  position: fixed; inset: 0; z-index: -2;
  background:#000;
}
.login-video{
  position: absolute; min-width:100%; min-height:100%;
  width:auto; height:auto; top:50%; left:50%; transform:translate(-50%,-50%);
  object-fit: cover;
}
.login-video-overlay{
  position: absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index: -1;
}

/* Centrado del formulario */
.login-centered{
  display:flex; align-items:center; justify-content:center;
  min-height: calc(100dvh - 56px);
  padding: 16px;
}
.login-card{
  /* Hacemos el card más legible sobre el video */
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  max-width: 440px;
  width: 100%;
}


/* ===== Overrides específicos para la página de login ===== */

/* El layout del login NO usa sidebar; forzamos una grilla simple */
.login-page.layout{
  display: grid !important;
  grid-template-rows: 56px 1fr !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "topbar"
    "content" !important;
}

/* Ocultar/ignorar sidebar si por alguna razón está presente */
.login-page .sidebar{ display:none !important; }

/* El contenido no debe dejar margen izquierdo (de otros layouts) */
.login-page .content{
  grid-area: content !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

/* Video de fondo (queda detrás de todo) */
.login-video-bg{
  position: fixed; inset: 0; z-index: -2 !important;
  background:#000;
}
.login-video{
  position: absolute; min-width:100%; min-height:100%;
  width:auto; height:auto; top:50%; left:50%; transform:translate(-50%,-50%);
  object-fit: cover;
}
.login-video-overlay{
  position: absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index: -1 !important;
}

/* Centrar el formulario vertical/horizontalmente */
.login-centered{
  min-height: calc(100vh - 56px);
  display:flex; align-items:center; justify-content:center;
  padding: 16px;
}

/* Card legible sobre video */
.login-card{
  max-width: 440px; width:100%;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
}

/* Quitar márgenes/paddings que “empujan” en login */
.login-page .auth-wrap{ margin:0 !important; }


/* Layout login sin sidebar y centrado */
.login-page.layout{
  display:grid !important;
  grid-template-rows:56px 1fr !important;
  grid-template-columns:1fr !important;
  grid-template-areas:"topbar" "content" !important;
}
.login-page .sidebar{ display:none !important; }
.login-page .content{ grid-area:content !important; margin-left:0 !important; padding:0 !important; }

/* Fondo con video/YouTube */
.login-video-bg{ position:fixed; inset:0; z-index:-2 !important; background:#000; }
.login-video{ position:absolute; min-width:100%; min-height:100%; width:auto; height:auto; top:50%; left:50%; transform:translate(-50%,-50%); object-fit:cover; }
.login-video-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); z-index:-1 !important; }

/* Fallback YouTube como background */
.login-bg-yt{ position:fixed; inset:0; z-index:-2; overflow:hidden; }
.login-bg-yt iframe{
  position:absolute; width:120vw; height:120vh;
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none; /* que no capture clicks */
}

/* Centrado del formulario */
.login-centered{
  min-height: calc(100vh - 56px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.login-card{
  max-width:440px; width:100%;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.12);
}



/* ===== Overrides específicos para la página de login ===== */
.login-page.layout{
  display:grid !important;
  grid-template-rows:56px 1fr !important;
  grid-template-columns:1fr !important;
  grid-template-areas:"topbar" "content" !important;
}
.login-page .sidebar{ display:none !important; }
.login-page .content{ grid-area:content !important; margin-left:0 !important; padding:0 !important; }

/* Fondo con tu video local o poster */
.login-video-bg{ position:fixed; inset:0; z-index:-2 !important; background:#000; }
.login-video{ position:absolute; min-width:100%; min-height:100%;
  width:auto; height:auto; top:50%; left:50%; transform:translate(-50%,-50%);
  object-fit:cover; }
.login-video-overlay{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); z-index:-1 !important; }

/* Si el video no carga, usamos la imagen poster como fondo fijo */
.poster-fallback{
  background: #000 url('../img/login_poster.jpg') center/cover no-repeat !important;
}
.poster-fallback .login-video{ display:none; }

/* Centrado del formulario */
.login-centered{
  min-height: calc(100vh - 56px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
/* Card legible sobre el fondo */
.login-card{
  max-width:440px; width:100%;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
}


/* Fondo con tu video local o poster */
.login-video-bg {
  position: fixed;
  inset: 0;
  z-index: -2 !important;
  background: #000;
  overflow: hidden;
}

.login-video {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* Capa extra de sombra y desenfoque */
.login-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55); /* sombra más oscura */
  backdrop-filter: blur(4px);      /* desenfoque gris/plomo */
  -webkit-backdrop-filter: blur(4px); /* compatibilidad Safari */
  z-index: -1 !important;
}

/* Si el video no carga, usamos la imagen poster como fondo fijo */
.poster-fallback {
  background: #000 url('../img/login_poster.jpg') center/cover no-repeat !important;
}
.poster-fallback .login-video { display: none; }


/* ===== Fondo con video ===== */
.login-video-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.login-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px); /* desenfoque directo */
}

/* Overlay gris oscuro encima */
.login-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.65); /* sombra oscura gris */
  z-index: 1;
}

/* ===== Formulario centrado ===== */
.auth-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  z-index: 2; /* encima del video y overlay */
}

.auth-card {
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

.logo-login {
  display: block;
  margin: 0 auto 12px;
  max-width: 140px;
}


/* ===== Logo superior ===== */
.logo-topbar {
  height: 46px;   /* 🔹 Ajusta la altura que quieras (ej: 40px, 50px, etc.) */
  width: 80px;    /* mantiene proporción */
  margin-right: 12px; /* espacio entre logo y texto */
}


/* Forzar tamaño del logo en la barra superior */
.logo-topbar {
  max-height: 52px !important;   /* ocupa casi toda la barra */
  width: auto !important;        /* mantiene proporción */
  margin-right: 14px;
  display: inline-block;
  vertical-align: middle;
}


/* Radios azules (asistencias) */
input[type="radio"]{ accent-color:#3b82f6; }

/* Datepicker visible/clicable */
input[type="date"]::-webkit-calendar-picker-indicator{ opacity:1; cursor:pointer; }

/* Botoneras ordenadas */
.actions, .btnbar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end;
}

th.date-col { text-align:center; white-space:nowrap; vertical-align:top; }
th.date-col .date{ font-weight:700; display:block; margin-bottom:6px; }
th.date-col .col-actions{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.btn.xs{ padding:4px 8px; font-size:11px; border-radius:8px; }
.btn.danger{ background: linear-gradient(180deg, #ef4444, #b91c1c); color:#fff; }




th.date-col { text-align:center; vertical-align:top; }
.date { display:block; font-weight:700; margin-bottom:6px; white-space:nowrap; }

thead .hdr-dates th,
thead .hdr-delete th { text-align:center; }

.btn.xs{ padding:4px 8px; font-size:11px; border-radius:8px; }
.btn.danger{ background: linear-gradient(180deg, #ef4444, #b91c1c); color:#fff; }

/* Mantén la primera columna fija y sin fondo negro */
.sticky-col{
  position: sticky; left: 0; background: #fff; z-index: 3;
}


th.date-col { text-align:center; vertical-align:top; }
.date { display:block; font-weight:700; margin-bottom:6px; white-space:nowrap; }

/* Botones pequeños */
.btn.xs{ padding:4px 8px; font-size:11px; border-radius:8px; }
.btn.danger{ background: linear-gradient(180deg, #ef4444, #b91c1c); color:#fff; }

/* Columna Alumno fija y con fondo blanco */
.sticky-col{ position: sticky; left: 0; background: #fff; z-index: 3; }

/* Si algún input date se colara en el header, lo ocultamos */
thead .hdr-dates input[type="date"],
thead .hdr-delete input[type="date"]{
  display: none !important;
}

/* ===== Ajustes para el logo ===== */
.brand-logo {
  height: 600px;   /* antes 40px */
  width: auto;
  display: block;
}

@media (max-width: 640px){
  .brand-logo {
    height: 600px; /* en pantallas pequeñas */
  }
}


.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 16px;
  position: relative;
}

.brand-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.brand-logo {
  height: 60px;  /* Ajusta el tamaño del logo */
  width: auto;
}


body.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar a la izquierda, contenido a la derecha */
  grid-template-rows: 56px auto;    /* topbar arriba, luego el resto */
  min-height: 100vh;
}

header.topbar {
  grid-column: 2; /* sólo encima de la columna de contenido */
  grid-row: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: #0f172a; color: #fff;
}

.sidebar {
  grid-column: 1; /* columna izquierda entera */
  grid-row: 1 / span 2; /* ocupa desde arriba hasta abajo (incluye fila del topbar) */
  background: #111827;
  color: #e5e7eb;
  overflow: auto;
}
/* =========================
   FIX GLOBAL DE LAYOUT
   (pegar al FINAL del CSS)
   ========================= */
:root{
  --topbar-h: 60px; /* usa 56 si prefieres, PERO CONSISTENTE */
}

/* Grid consistente: topbar en toda la fila 1, sidebar y contenido debajo */
body.layout{
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  grid-template-rows: var(--topbar-h) 1fr !important;
  grid-template-areas:
    "topbar topbar"
    "sidebar content" !important;
  min-height: 100vh;
}

/* Topbar ocupa la fila 1 completa */
header.topbar{
  grid-area: topbar !important;
  height: var(--topbar-h) !important;
  display:flex; align-items:center; gap:12px;
  padding: 0 14px;
  position: sticky; top: 0; z-index: 50;
}

/* Sidebar pega justo debajo del topbar, sin huecos */
.sidebar{
  grid-area: sidebar !important;
  position: sticky !important;
  top: var(--topbar-h) !important;
  height: calc(100vh - var(--topbar-h)) !important;
  overflow: auto;
  padding-top: 1px;               /* evita colapso de margen del primer hijo */
}
.sidebar nav{ margin-top: 0 !important; }
.sidebar .nav-group:first-child{ margin-top: 8px !important; }

/* Contenido normal sin márgenes raros */
main.content{
  grid-area: content !important;
  margin: 0 !important;
  padding: 18px;
  min-width: 0;
}

/* Mata reglas que movían el topbar a la columna 2 (causaban huecos) */
header.topbar { grid-column: 1 / -1 !important; grid-row: 1 !important; }

/* Logo en tamaño razonable */
.brand-logo{
  height: 40px !important;   /* ajusta si quieres 44/48 */
  width: auto !important;
  object-fit: contain;
}

/* Responsive: sidebar plegable bajo el topbar, sin superponer */
@media (max-width: 900px){
  body.layout{
    grid-template-columns: 1fr !important;
    grid-template-rows: var(--topbar-h) auto auto !important;
    grid-template-areas:
      "topbar"
      "content"
      "sidebar" !important;
  }
  .sidebar{
    position: static !important;
    height: auto !important;
    max-height: 60vh;
    display: none;
  }
  .sidebar.open{ display:block; }
}

/* =========================
   FIX: Sidebar sin huecos + footer pegado
   ========================= */
:root{ --topbar-h: 60px; } /* usa el mismo valor que tu topbar */

/* Grid consistente (topbar arriba, luego sidebar+content) */
body.layout{
  display:grid !important;
  grid-template-columns: 260px 1fr !important;
  grid-template-rows: var(--topbar-h) auto !important;
  grid-template-areas:
    "topbar topbar"
    "sidebar content" !important;
  min-height: 100vh;
}

/* Topbar en toda la fila 1 */
header.topbar{
  grid-area: topbar !important;
  height: var(--topbar-h) !important;
  display:flex; align-items:center; gap:12px;
  padding: 0 14px;
  position: sticky; top:0; z-index:50;
}

/* Sidebar: sticky + crece con la página (sin height fija) */
.sidebar{
  grid-area: sidebar !important;
  position: sticky !important;
  top: var(--topbar-h) !important;
  align-self: stretch !important;
  height: auto !important;                          /* ← quita height fija */
  min-height: calc(100vh - var(--topbar-h)) !important; /* llena el viewport como mínimo */
  overflow: auto;
  /* truco para evitar “colapso de márgenes” del primer hijo */
  padding-top: 1px;
}

/* Contenido en columna flex para “pegar” el footer abajo */
main.content{
  grid-area: content !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - var(--topbar-h)) !important;
  margin: 0 !important;
  width: 100%;
}
main.content > footer{ margin-top: auto !important; }

/* Responsive: sidebar debajo del contenido (plegable) */
@media (max-width: 900px){
  body.layout{
    grid-template-columns: 1fr !important;
    grid-template-rows: var(--topbar-h) auto auto !important;
    grid-template-areas:
      "topbar"
      "content"
      "sidebar" !important;
  }
  .sidebar{
    position: static !important;
    min-height: initial !important;
    display: none;
  }
  .sidebar.open{ display:block; }
}

/* IMPORTANTE: anula cualquier regla anterior que mueva el topbar a la columna 2 */
header.topbar{ grid-column: 1 / -1 !important; grid-row: 1 !important; }

/* Y evita logos gigantes que estiren el topbar */
.brand-logo{ height: 40px !important; width:auto !important; object-fit:contain; }


/* ===============================
   LAYOUT FIJO: topbar + sidebar fija
   =============================== */
:root{
  --topbar-h: 60px;      /* alto de la barra superior */
  --sidebar-w: 260px;    /* ancho de la barra lateral */
}

/* Topbar fija arriba (no participa del scroll del contenido) */
header.topbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 1000;
  display:flex; align-items:center; gap:12px;
  padding: 0 14px;
}

/* Sidebar fija a la izquierda, con SU propio scroll interno */
.sidebar{
  position: fixed !important;
  top: var(--topbar-h) !important;
  left: 0; width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h)) !important;
  overflow: auto !important;               /* ← solo la lista interna scrollea */
  z-index: 900;
  /* (tu fondo/estilos de sidebar permanecen) */
}

/* El contenido es el ÚNICO que scrollea la página */
main.content{
  position: relative;
  margin-left: var(--sidebar-w) !important;  /* deja espacio a la sidebar fija */
  padding: 16px !important;
  padding-top: calc(var(--topbar-h) + 8px) !important; /* despega del topbar fijo */
  min-height: 100vh;                          /* asegura altura de vista completa */
  box-sizing: border-box;
  display: flex; flex-direction: column;      /* para pegar el footer abajo */
}

/* El footer se queda pegado al final del contenido (sin hueco blanco) */
main.content > footer{ margin-top: auto; }

/* Elimina cualquier grid anterior que cause “doble scroll” o franjas */
body.layout{
  display: block !important;
  min-height: 100vh;
}

/* ——— Responsive: sidebar como panel deslizable ——— */
@media (max-width: 900px){
  .sidebar{
    left: -100%;
    transition: left .2s ease;
    width: min(82vw, 280px);
  }
  .sidebar.open{ left: 0; }
  main.content{ margin-left: 0 !important; }
}

/* Evita que un logo enorme deforme el topbar */
.brand-logo{ height: 40px !important; width:auto !important; object-fit:contain; }


/* ========= FULL VIEWPORT LAYOUT (solo para paneles con .layout) ========= */
body.layout {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden; /* solo el contenido scrollea */
}

/* Topbar fija */
body.layout header.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex; align-items: center;
  z-index: 1000;
}

/* Sidebar fija */
body.layout #sidebar.sidebar {
  position: fixed;
  top: 56px;        /* debajo de la topbar */
  bottom: 0;
  left: 0;
  width: 260px;
  overflow: auto;
  z-index: 900;
  border-right: 1px solid var(--line);
}

/* Contenido con scroll único */
body.layout main.content {
  position: relative;
  margin-left: 260px;
  padding: 16px;
  padding-top: calc(56px + 16px);
  height: calc(100vh - 56px);
  overflow: auto;
}

/* Footer dentro del contenido */
body.layout main.content > footer {
  margin-top: 24px;
}

/* Responsivo: sidebar oculta en móviles */
@media (max-width: 900px) {
  body.layout #sidebar.sidebar {
    left: -260px;
    transition: left .2s ease;
  }
  body.layout #sidebar.sidebar.open { left: 0; }
  body.layout main.content {
    margin-left: 0;
    padding-top: calc(56px + 12px);
    height: calc(100vh - 56px);
  }
}

/* =========================================================
   Tablas anchas con scroll horizontal + columnas fijas (global)
   Úsalo en cualquier vista envolviendo la tabla con .scroll-x
   y añadiendo la clase .table-freeze a la <table>
   ========================================================= */

/* contenedor de scroll (un solo scroll X/Y aquí) */
.scroll-x{
  display:block;
  overflow:auto;                 /* scroll X e Y dentro del contenedor */
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  border-radius:10px;
}

/* la tabla toma el ancho del contenido -> si es grande aparece el scroll X */
.table-freeze{
  width:max-content;             /* clave: la tabla crece “hasta el contenido” */
  min-width: 1700px;             /* fuerza scroll en pantallas medianas/pequeñas */
  border-collapse:collapse;
  table-layout:auto;             /* deja que cada th/td “pida” su ancho */
}

/* Encabezado pegado arriba al hacer scroll vertical */
.table-freeze thead th{
  position:sticky;
  top:0;
  z-index: 5;
  background: var(--panel, #fff);
}

/* Evita que se rompa a varias líneas (mejor para muchas columnas) */
.table-freeze th,
.table-freeze td{
  white-space:nowrap;
}

/* ========== Columnas congeladas (izquierda) ========== */
/* ajusta anchos desde variables */
:root{
  --w-dni: 140px;    /* ancho col 1  (DNI) */
  --w-est: 320px;    /* ancho col 2  (Estudiante) */
}

.table-freeze th.col-dni,
.table-freeze td.col-dni{ width:var(--w-dni); min-width:var(--w-dni); }

.table-freeze th.col-est,
.table-freeze td.col-est{ width:var(--w-est); min-width:var(--w-est); }

/* fija columna 1 */
.table-freeze .sticky-col-1{
  position:sticky; left:0; z-index:6;
  background: var(--panel, #fff);
  box-shadow: 1px 0 0 var(--line, #e5e7eb);
}

/* fija columna 2 (se apoya en el ancho de la 1) */
.table-freeze .sticky-col-2{
  position:sticky; left:var(--w-dni); z-index:6;
  background: var(--panel, #fff);
  box-shadow: 1px 0 0 var(--line, #e5e7eb);
}

/* (opcional) fija la última columna a la derecha: Total */
.table-freeze .sticky-right{
  position:sticky; right:0; z-index:6;
  background: var(--panel, #fff);
  box-shadow: -1px 0 0 var(--line, #e5e7eb);
}

/* Inputs numéricos compactos para celdas de nota */
.table-freeze input[type="number"]{
  width:74px;        /* entra bien en columnas estrechas */
}

/* Colores de bloques (si ya los tienes, estos son genéricos) */
.table-freeze td.midterm { background: rgba(255,235,153,.14); }
.table-freeze td.final   { background: rgba(255,176,120,.14); }
.table-freeze td.continua{ background: rgba(167,245,189,.12); }


/* Contenedor con scroll horizontal */
.scroll-x {
  overflow-x: auto;    /* scroll horizontal */
  overflow-y: hidden;  /* evitar scroll vertical fantasma */
  width: 100%;
}

/* Tabla siempre más ancha que el contenedor */
.scroll-x table {
  min-width: 1200px;   /* fuerza ancho mínimo (ajusta según tus columnas) */
  border-collapse: collapse;
  table-layout: fixed; /* columnas con ancho fijo */
}

/* Ajustar celdas */
.scroll-x th,
.scroll-x td {
  padding: 8px 10px;
  white-space: nowrap; /* evita que se rompan en varias líneas */
  text-overflow: ellipsis;
  overflow: hidden;
}

/* === Scroll horizontal robusto para tablas anchas === */
.scroll-x{
  overflow-x: auto;        /* habilita scroll horizontal */
  overflow-y: hidden;      /* evita scroll vertical fantasma */
  width: 100%;
  -webkit-overflow-scrolling: touch; /* suave en móviles */
}

/* La tabla debe ser MÁS ancha que el contenedor para que aparezca el scroll */
.scroll-x > table{
  width: max-content;      /* crece según contenido */
  min-width: 1800px;       /* ajusta según tus columnas (13+); prueba 1800–2200px */
  table-layout: fixed;     /* columnas de ancho fijo (respetan colgroup) */
  border-collapse: collapse;
}

/* Celdas que no se rompen en 2 líneas (evita “aplastar” columnas) */
.scroll-x th,
.scroll-x td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Header sticky: que no tape el scroll ni parpadee */
.scroll-x thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel, #fff);
}

/* (Opcional) primera columna fija a la izquierda */
.scroll-x .sticky-col{
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--panel, #fff);
  box-shadow: 2px 0 0 rgba(0,0,0,.04);
}

/* Asegúrate de NO cortar el overflow del contenedor con estas capas */
.card, .content{ overflow: visible; }

/* =========================
   HOTFIX — Página de Notas
   (pegar AL FINAL del CSS)
   ========================= */

/* 1) Añade un scope para evitar choques globales */
.notas-scope .grades-scroll{
  overflow: auto !important;              /* scroll X/Y solo aquí */
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

.notas-scope .grades-table{
  /* La tabla debe medir su ancho REAL por columnas */
  width: max-content !important;
  min-width: unset !important;
  table-layout: auto !important;
  border-collapse: separate !important;   /* evita bugs de sticky */
  border-spacing: 0 !important;
}

/* 2) Neutraliza reglas globales que pisan la tabla de notas */
.scroll-x .grades-table{
  min-width: unset !important;
  table-layout: auto !important;
}
.notas-scope table{
  width: auto !important;                 /* anula table{width:100%} global */
}

/* 3) Cols fijas + anchos consistentes */
:root{
  --w-dni: 140px;
  --w-est: 320px;
  --w-crit: 96px;
}
.notas-scope .col-dni{  width:var(--w-dni);  min-width:var(--w-dni); }
.notas-scope .col-est{  width:var(--w-est);  min-width:var(--w-est); }
.notas-scope .col-crit{ width:var(--w-crit); min-width:var(--w-crit); }
.notas-scope .col-total{width:var(--w-crit); min-width:var(--w-crit); }

.notas-scope .sticky-1{
  position: sticky; left: 0; z-index: 6;
  background: var(--panel, #fff);
  box-shadow: 2px 0 0 rgba(0,0,0,.06);
}
.notas-scope .sticky-2{
  position: sticky; left: var(--w-dni); z-index: 6;
  background: var(--panel, #fff);
  box-shadow: 2px 0 0 rgba(0,0,0,.06);
}
.notas-scope thead th{
  position: sticky; top: 0; z-index: 5;
  background: var(--panel, #fff);
}

.notas-scope .grades-table th,
.notas-scope .grades-table td{
  white-space: nowrap;                    /* no rompas líneas */
}

/* 4) Un “colchón” al final para que SIEMPRE puedas llegar a la última col */
.notas-scope .scroll-pad{
  width: 96px; min-width: 96px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* 5) Asegura que ningún contenedor corte el overflow de la tabla */
.notas-scope .card,
.notas-scope .content{
  overflow: visible !important;
}

/* ==========================
   Scope local (sólo ANCHO)
   ========================== */
#notas-scope{
  /* ↓↓↓ anchos más estrechos */
  --w-dni:   92px;   /* antes 110/140 */
  --w-est:  200px;   /* antes 240/320 */
  --w-crit:  52px;   /* antes 72/96 */
  --w-total: 64px;   /* antes 84/96 */
}

/* Tabla: NO alteramos alto (line-height igual), sólo ancho */
#notas-scope .grades-table{
  width: max-content !important;
  table-layout: fixed !important;      /* fija ancho de columnas */
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 12px;                     /* igual que tenías */
  line-height: 1.2;                    /* mismo alto de fila */
}

/* Encabezado sticky (igual) */
#notas-scope .grades-table thead th{
  position: sticky; top: 0; z-index: 5;
  background: var(--panel,#fff);
}

/* Celdas: mantenemos altura; sólo reducimos padding lateral */
#notas-scope .grades-table th,
#notas-scope .grades-table td{
  white-space: nowrap;                 /* sin salto de línea -> menos ancho */
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 4px;                    /* 6px (vertical igual) | 4px (horizontal MÁS chico) */
}

/* Anchos por variable (sólo afectan ANCHO) */
#notas-scope .col-dni{ width: var(--w-dni);  min-width: var(--w-dni); }
#notas-scope .col-est{ width: var(--w-est);  min-width: var(--w-est); }
#notas-scope .col-crit{width: var(--w-crit); min-width: var(--w-crit); text-align:center;}
#notas-scope .col-tot {width: var(--w-total);min-width: var(--w-total);text-align:center;}

/* Columnas pegajosas (sin cambios de alto) */
#notas-scope .sticky-1{ position: sticky; left: 0; background: var(--panel,#fff); z-index: 6; box-shadow: 2px 0 0 rgba(0,0,0,.06); }
#notas-scope .sticky-2{ position: sticky; left: var(--w-dni); background: var(--panel,#fff); z-index: 6; box-shadow: 2px 0 0 rgba(0,0,0,.06); }
#notas-scope .sticky-right{ position: sticky; right: 0; background: var(--panel,#fff); z-index: 6; box-shadow: -2px 0 0 rgba(0,0,0,.06); }

/* Inputs numéricos: ocupan el ancho de la celda, sin crecer altura */
#notas-scope .grades-table input[type="number"]{
  width: 100%;          /* llena la celda */
  min-width: 0;
  box-sizing: border-box;
  font-size: 12px;      /* mismo alto visual */
  padding: 3px 4px;     /* menos ancho, mismo alto aproximado */
}

/* Contenedor de scroll (igual, sólo aseguramos que no tape la última col) */
#notas-scope .grades-scroll{
  overflow: auto !important;
  max-width: 100% !important;
  max-height: calc(100vh - 320px);
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  padding-right: calc(var(--w-total) + 8px);
}

/* Barra superior de scroll (sin cambios de alto de tabla) */
#notas-scope .grades-scroll-top{
  position: sticky; top: 0; z-index: 7;
  height: 12px; overflow-x: auto !important; overflow-y: hidden !important;
  background: var(--panel,#fff); border-bottom: 1px solid var(--line,#ddd);
}
#notas-scope .grades-scroll-top::-webkit-scrollbar{ height: 10px; }
#notas-scope .grades-scroll-top .ghost-width{ height: 1px; }


/* === Ajuste para sidebar fijo === */
.sidebar {
  width: 260px;              /* ancho del panel izquierdo */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  background: var(--panel,#111827);
  border-right: 1px solid var(--line,#374151);
  z-index: 1000;
}

/* Empujar todo el contenido hacia la izquierda automáticamente */
.page-wrap {
  margin-left: 260px;        /* mismo ancho que el sidebar */
  width: calc(100% - 260px); /* que ocupe lo restante de pantalla */
}





/* === Sidebar colapsable al hover === */
.sidebar {
  position: fixed !important;
  top: var(--topbar-h, 56px) !important;  /* debajo de la barra superior */
  left: 0 !important;
  bottom: 0 !important;
  width: 0 !important;                   /* oculto por defecto */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--panel, #111827) !important;
  border-right: 1px solid var(--line, #374151) !important;
  transition: width 0.25s ease-in-out;
  z-index: 1000;
}

/* Al pasar el mouse aparece */
.sidebar:hover {
  width: 240px !important;  /* ancho normal */
}

/* Contenido ocupa toda la pantalla cuando sidebar está oculto */
main.content {
  margin-left: 0 !important;
  transition: margin-left 0.25s ease-in-out;
}

/* Cuando el sidebar aparece, empuja el contenido */
.sidebar:hover ~ main.content {
  margin-left: 240px !important;
}


/* === Forzar sidebar oscuro con hover === */
.sidebar {
  background: #240046 !important;   /* morado profundo */
  color: #f5f3ff !important;
  border-right: 1px solid #1b0033 !important;
}

.sidebar nav a {
  color: #f5f3ff !important;
}
.sidebar nav a:hover {
  background: rgba(58,12,163,.35) !important;
  color: #ffdaff !important;
}
.sidebar .nav-group {
  color: #d9c2ff !important;
  opacity: .85 !important;
}

main.content {
  margin: 0 10px !important; /* 20px a izquierda y derecha */
}

/* 🔹 El contenido nunca se sale, si se pasa habilita scroll horizontal */
main.content {
  width: 100%;
  max-width: 100vw;        /* nunca más ancho que la pantalla */
  overflow-x: auto;        /* activa scroll horizontal si algo se desborda */
  overflow-y: auto;        /* scroll vertical normal */
  box-sizing: border-box;  /* asegura que padding cuente dentro del ancho */
}

/* 🔹 Las tablas o divs internos se ajustan */
main.content table,
main.content .wide {
  width: max-content;  /* crece solo hasta lo necesario */
  min-width: 100%;     /* como mínimo ocupa el ancho de la pantalla */
  border-collapse: collapse;
}

/* Sidebar oculto por defecto */
.sidebar {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
  white-space: nowrap;
  background: #240046;  /* color morado profundo */
  border-right: 1px solid #1b0033;
  position: fixed;
  top: 60px;   /* debajo del topbar */
  bottom: 0;
  left: 0;
  z-index: 1000;
}

/* Mostrar sidebar al pasar el mouse sobre ÉL MISMO */
.sidebar:hover {
  width: 240px;
  overflow: visible;
}

/* Mostrar sidebar también al pasar el mouse sobre el icono burger */
.burger:hover ~ .sidebar {
  width: 240px;
  overflow: visible;
}

/* Ajustar contenido cuando el sidebar esté visible */
.sidebar:hover ~ .page-wrap,
.burger:hover ~ .sidebar ~ .page-wrap {
  margin-left: 240px;
  transition: margin-left 0.3s ease;
}

/* Sidebar cerrado por defecto */
.sidebar {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
  background: #240046;
}

/* Cuando el mouse está sobre el sidebar o el botón */
.sidebar:hover,
.burger:hover ~ .sidebar {
  width: 240px;
  overflow: auto;
}

/* Empuja el contenido solo mientras sidebar está visible */
.sidebar:hover ~ .page-wrap,
.burger:hover ~ .page-wrap {
  margin-left: 240px;
}

/* ===== FIX: Historial de asistencias visible ===== */

/* El card debe crecer lo que necesite */
#historial.card {
  height: auto !important;       /* elimina altura rígida */
  min-height: 400px;             /* asegúrate que se vea el área */
  max-height: none !important;   /* sin recorte artificial */
  display: flex;
  flex-direction: column;
}

/* Contenido interno flexible con scroll si hace falta */
#historial .history-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;                /* scroll vertical si se llena */
}

/* Barra inferior de acciones: SIEMPRE visible */
#historial .history-actions {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 8px 12px;
  text-align: center;
}
/* ===== FIX: Historial de asistencias visible ===== */

/* El card debe crecer lo que necesite */
#historial.card {
  height: auto !important;       /* elimina altura rígida */
  min-height: 400px;             /* asegúrate que se vea el área */
  max-height: none !important;   /* sin recorte artificial */
  display: flex;
  flex-direction: column;
}

/* Contenido interno flexible con scroll si hace falta */
#historial .history-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;                /* scroll vertical si se llena */
}

/* Barra inferior de acciones: SIEMPRE visible */
#historial .history-actions {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 8px 12px;
  text-align: center;
}
/* Sidebar oculto en móviles */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 56px; left: 0; bottom: 0;
    width: 240px;
    background: #111827;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }

  /* Cuando el checkbox está marcado -> sidebar visible */
  #menu-toggle:checked ~ .sidebar {
    transform: translateX(0);
  }

  /* El contenido se desplaza cuando sidebar está abierto */
  #menu-toggle:checked ~ .content {
    margin-left: 240px;
  }

  /* Botón ☰ */
  .burger {
    font-size: 22px;
    cursor: pointer;
    color: #fff;
  }
}


/* Sidebar oculto por defecto en móviles */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 56px; left: 0; bottom: 0;
    width: 240px;
    background: #111827;
    transform: translateX(-100%); /* Oculto */
    transition: transform 0.3s ease;
    z-index: 1000;
  }

  /* Cuando el checkbox está marcado -> se abre */
  #menu-toggle:checked ~ .sidebar {
    transform: translateX(0);
  }

  /* El contenido se desplaza si el menú está abierto */
  #menu-toggle:checked ~ .content {
    margin-left: 240px;
  }

  /* Botón ☰ estilo */
  .burger {
    font-size: 22px;
    cursor: pointer;
    color: #fff;
    user-select: none;
  }
}
/* ===== Sidebar oculto/visible con checkbox ===== */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 56px; left: 0; bottom: 0;
    width: 240px;
    background: #111827;
    transform: translateX(-100%); /* oculto */
    transition: transform 0.3s ease;
    z-index: 1000;
  }

  /* Sidebar abierto cuando el checkbox está marcado */
  #menu-toggle:checked ~ .sidebar {
    transform: translateX(0);
  }

  /* El contenido se ajusta cuando sidebar está abierto */
  #menu-toggle:checked ~ .content {
    margin-left: 240px;
  }

  /* Estilo botón ☰ */
  .burger {
    font-size: 0px;
    cursor: pointer;
    color: #fff;
    user-select: none;
  }
}

/* === Toggle Sidebar por clase .open (mínimo) === */
@media (max-width: 900px){
  /* si ya tenías left:-280px o translateX, esto lo anula al abrir */
  #sidebar.open{
    left: 0 !important;
    transform: translateX(0) !important;
  }
  /* overlay controlado por clase */
  .overlay{ display: none; }
  .overlay.open{ display: block !important; }
}

/* ===== Offcanvas móvil sin checkbox (solo móvil) ===== */
@media (max-width: 900px){
  /* Sidebar: parte oculta fuera de pantalla */
  .sidebar{
    position: fixed;            /* no cambia tu estilo desktop */
    top: 56px;                  /* altura de tu topbar */
    left: 0;
    width: 240px;
    height: calc(100vh - 56px);
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 1000;              /* por encima del contenido */
  }

  /* Al abrir (clase en <body>) */
  body.nav-open .sidebar{
    transform: translateX(0);
  }

  /* Overlay */
  .overlay[hidden]{ display:none; }
  .overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 900;               /* debajo de la sidebar, encima del contenido */
  }

  /* El contenido NO se desplaza (no rompemos layout) */
  .content{ margin-left: 0 !important; }

  /* Asegura que el botón sea clickeable */
  .burger{
    width: 28px; height: 22px; display: inline-block;
    background: transparent; border: 0; cursor: pointer;
  }
  .burger::before, .burger::after, .burger span{
    content:""; position:absolute; left:0; width:100%; height:3px;
    background:#fff; border-radius:2px; transition:.2s ease;
  }
  .burger{ position: relative; }
  .burger::before{ top: 0; }
  .burger span{ top: 50%; transform: translateY(-50%); position:absolute; }
  .burger::after{ bottom: 0; }
}

/* === REFUERZO VISUAL MÓVIL (último en el CSS) === */
@media (max-width: 900px){
  #sidebar{
    background: inherit !important;
    box-shadow: 2px 0 24px rgba(0,0,0,.25) !important;
  }
  /* por si alguna regla deja width:0 o display:none */
  html[data-nav="open"] #sidebar{
    width: 260px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* =========================================================
   OFF-CANVAS NUEVO (sin JS, con checkbox #oc-toggle)
   No pisa tu diseño: IDs únicos y media queries.
   ========================================================= */

/* Escritorio: se usa el sidebar original; ocultamos el off-canvas */
@media (min-width: 901px){
  #oc-panel, #oc-backdrop{ display: none !important; }
}

/* Móvil: ocultamos el sidebar original y activamos el off-canvas */
@media (max-width: 900px){

  /* Oculta tu sidebar original para evitar choques */
  #sidebar{ display: none !important; }

  /* Backdrop */
  #oc-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    z-index: 1000000;
  }

  /* Panel */
  #oc-panel{
    position: fixed;
    left: 0;
    /* top = altura de la topbar. Si usas 56px, déjalo; si usas 60px, cámbialo */
    top: 56px;
    height: calc(100vh - 56px);
    width: 260px;
    overflow: auto;

    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000001;

    /* Colores propios, no dependen de tu tema */
    background: #240046;
    color: #f5f3ff;
    border-right: 1px solid #1b0033;
    box-shadow: 2px 0 24px rgba(0,0,0,.35);
  }

  #oc-panel nav a{
    display: block; padding: 10px 12px; text-decoration: none;
    color: #f5f3ff;
  }
  #oc-panel nav a:hover{ background: rgba(255,255,255,.12); }
  #oc-panel .nav-group{
    margin:12px 10px 6px; font-size:12px; letter-spacing:.4px;
    text-transform:uppercase; color:#d9c2ff; opacity:.85;
  }

  /* ✅ Estado ABIERTO cuando el checkbox está marcado */
  #oc-toggle:checked ~ #oc-backdrop{ display:block; }
  #oc-toggle:checked ~ #oc-panel{ transform: translateX(0); }

  /* Asegura que el botón quede por encima de todo */
  .topbar .burger{ position: relative; z-index: 1000002; }
}


/* =========================================================
   OFF-CANVAS con :target (sin JS, sin dependencias)
   ========================================================= */
:root{ --x-topbar: 56px; } /* si tu topbar mide 60px, cambia a 60px */

#xmenu{
  position: fixed;
  inset: 0;
  z-index: 2147483600;           /* super alto */
  pointer-events: none;          /* inactivo por defecto */
}

/* Panel lateral */
#xmenu .x-panel{
  position: absolute;
  top: var(--x-topbar);
  left: 0;
  height: calc(100vh - var(--x-topbar));
  width: 260px;
  background: #240046;           /* morado profundo propio (no depende de tu tema) */
  color: #f5f3ff;
  border-right: 1px solid #1b0033;
  box-shadow: 2px 0 24px rgba(0,0,0,.35);
  transform: translateX(-100%);  /* oculto */
  transition: transform .25s ease;
  overflow: auto;
}

/* Cabezera del panel */
#xmenu .x-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.12);
}
#xmenu .x-close{
  color:#f5f3ff; text-decoration:none; font-size:18px; line-height:1;
  padding:4px 8px; border-radius:6px; background:rgba(255,255,255,.10);
}

/* Navegación interna */
#xmenu .x-nav a{
  display:block; padding:10px 12px; color:#f5f3ff; text-decoration:none;
}
#xmenu .x-nav a:hover{ background: rgba(255,255,255,.12); }
#xmenu .x-group{
  margin:12px 10px 6px; font-size:12px; letter-spacing:.4px;
  text-transform:uppercase; color:#d9c2ff; opacity:.85;
}

/* Máscara clicable para cerrar */
#xmenu .x-mask{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .25s ease;
  /* deja al panel por encima */
  z-index: -1;
}

/* ===== Estado abierto por :target ===== */
#xmenu:target{
  pointer-events: auto;          /* ahora sí captura clicks */
}
#xmenu:target .x-panel{
  transform: translateX(0);      /* se muestra */
}
#xmenu:target .x-mask{
  opacity: 1; z-index: 0;        /* activa máscara */
}

/* Móvil: oculta tu sidebar original si molesta */
@media (max-width: 900px){
  #sidebar{ display:none !important; } /* solo si lo quieres oculto en móvil */
}

/* Accesibilidad: si alguien llega a #xmenu con tab */
#xmenu:focus-within .x-panel{ transform: translateX(0); }


/* Pinned sólo en escritorio: NO sustituye tu hover, lo complementa */
@media (min-width: 901px){
  body.sidebar-pinned .sidebar{
    width: 240px !important;
    overflow: auto !important;
  }
  /* Si tu layout necesita empujar el contenido cuando está pineado, descomenta: */
  /* body.sidebar-pinned main.content{ margin-left: 240px !important; } */
}

/* === Resaltado amarillo para celdas/encabezados específicos === */
.hl-yellow {
  background: #fff59d !important;  /* amarillo suave */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* === Bloque de notas del estudiante === */
.notas-estudiante {
  background: #ffff66;       /* amarillo fosforescente */
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.notas-estudiante h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 700;
  color: #333;
}

#chat-widget {
  position: fixed;
  bottom: 10px;
  right: 15px;
  width: 300px;
  font-family: Arial, sans-serif;
  z-index: 9999;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background: #fff;       /* ✅ Fondo solo del chat */
  border: 1px solid #ccc; /* ✅ Borde visible */
}

#chat-header {
  background: #4B0082;
  color: #fff;
  padding: 8px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#chat-body {
  display: none;          /* Oculto al inicio */
  flex-direction: column;
  height: 350px;
}

#chat-box {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
  background: #fafafa;
  font-size: 14px;
}

#chat-input {
  display: flex;
  border-top: 1px solid #ccc;
}

#chat-input input {
  flex: 1;
  border: none;
  padding: 6px;
  font-size: 14px;
}

#chat-input button {
  border: none;
  background: #4B0082;
  color: #fff;
  padding: 6px 12px;
  cursor: pointer;
}

#chat-input button:hover {
  background: #36005c;
}


@media (max-width: 900px){
  /* ... */
  #sidebar{
    position: fixed;
    top: 56px;
    left: -260px;
    width: 260px;
    height: calc(100vh - 56px);
    transition: left .25s ease;
    z-index: 1001;
    background:#2a004d;
    color:#fff;
    overflow-y:auto;
  }
  #sidebar.is-open{
    left: 0;
  }
}


@media (max-width: 860px){
  .layout{ grid-template-columns: 0 1fr; }
  #sidebar{ position: fixed; left:-280px; width:260px; z-index: 60; height:100vh; top:56px; }
  #sidebar.is-open{ left:0; transition:left .2s ease; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }
}

/* Popup treemap (web y móvil) con fondo atenuado */
#treemap-popup {
  position: fixed;
  inset: 0;
  z-index: 2001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.55); /* ATENÚA FONDO */
}

#treemap-popup.show {
  display:flex;
}

/* Caja del popup */
#treemap-popup .card {
  max-height: 90vh;
  max-width: 900px;
  width: 100%;
  overflow-y: auto;
}


/* Texto blanco sólo dentro del popup */
#treemap-popup .treemap-card {
  color: #fff;
}

#treemap-popup .treemap-links a {
  color: #0f172a;       /* enlaces siguen oscuros sobre las píldoras blancas */
}