:root{
  --bg: #E7E2D6;
  --surface: #FBF9F4;
  --surface-alt: #DED5C3;
  --text: #2A2724;
  --text-muted: #6E6759;
  --line: #C9BFA8;
  --primary: #52704F;
  --primary-dark: #3B5238;
  --primary-tint: #E1E8DD;
  --swap: #A1592E;
  --swap-tint: #F3E3D6;
  --danger: #A23B2E;
  --danger-tint: #F4DCD6;
  /* Ítem #6 (27-sept-2026, código de colores de avisos): un cuarto tono
     tierra (dorado/ocre), para el aviso general de renovación — no se
     reutiliza --primary porque esa ya es "Primera clase" y quedarían
     iguales en la misma tarjeta. */
  --renov: #8A6D1F;
  --renov-tint: #EFE6C8;
  --radius: 3px;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5;
}
.app{ max-width:960px; margin:0 auto; padding:28px 20px 80px; }

/* ---------- LOGIN ---------- */
.login-wrap{ min-height:80vh; display:flex; align-items:center; justify-content:center; }
.login-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; max-width:360px; width:100%;
}
.login-card h1{
  font-family:"Roboto Condensed","Arial Narrow",sans-serif; font-size:24px;
  margin:0 0 4px; color:var(--primary-dark);
}
.login-logo{ display:block; width:96px; height:96px; margin:0 auto 14px; }
.login-card p.subtitle{ color:var(--text-muted); margin:0 0 22px; font-size:14px; text-align:center; }
label{ display:block; font-size:13px; color:var(--text-muted); margin-bottom:6px; }
input[type=text], input[type=tel], input[type=password], select, textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius);
  font-size:15px; font-family:inherit; margin-bottom:16px; background:#fff; color:var(--text);
}
.btn{
  background:var(--primary-dark); color:#fff; border:none; padding:11px 18px;
  border-radius:var(--radius); font-size:14px; cursor:pointer; font-family:inherit;
  font-weight:600; width:100%;
}
.btn.secondary{ background:none; border:1px solid var(--line); color:var(--text); }
.btn.small{ width:auto; padding:7px 14px; font-size:13px; }
.error-msg{
  background:var(--danger-tint); color:var(--danger); border-radius:var(--radius);
  padding:10px 12px; font-size:13px; margin-bottom:14px; display:none;
}
.error-msg.active{ display:block; }

/* ---------- APP (post-login) ---------- */
.topbar{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px; gap:12px;
}
.topbar h1{
  font-family:"Roboto Condensed","Arial Narrow",sans-serif; font-weight:700;
  font-size:22px; margin:0; color:var(--primary-dark);
}
.topbar .subtitle{ color:var(--swap); font-size:13.5px; margin-top:2px; }
.linkbtn{
  background:none; border:none; color:var(--primary-dark); font-size:13px; cursor:pointer;
  text-decoration:underline; font-family:inherit; padding:0;
}
.linkbtn.muted{ color:var(--text-muted); text-decoration:underline; }
.topbar .linkbtn + .linkbtn{ margin-left:16px; }

/* ---------- Menú hamburguesa (28-sept-2026, ronda 8; panel lateral desde ronda 9) ---------- */
/* Un solo botón, arriba a la izquierda en las 3 vistas — abre un
   panel que se desliza desde el costado (antes era un modal centrado;
   Saúl pidió el cambio el 28-sept). Qué opciones se ven depende del
   rol activo (ver actualizarMenuHamburguesa en comun.js); las de
   "Cambiar contraseña" y "Cerrar sesión" son los mismos botones de
   siempre, con sus mismos ids y listeners — solo se movieron acá
   adentro. */
.btn-hamburguesa{
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  color:var(--primary-dark); font-size:20px; line-height:1; cursor:pointer;
  padding:6px 11px;
}
.btn-hamburguesa:hover{ border-color:var(--primary-dark); }

/* El overlay del menú (y de cualquier otro panel lateral que se sume
   después) usa esta variante: en vez de centrar el .modal, empuja el
   panel contra el borde izquierdo y lo deja ocupar todo el alto.
   (28-sept-2026, ronda 10): el selector tenía que ser
   ".overlay.sidepanel-overlay", no ".sidepanel-overlay" solo — con la
   misma especificidad que ".overlay" (una sola clase cada uno), gana
   el que aparece más abajo en el archivo, que es ".overlay" (más
   abajo, en la sección de modales) — por eso el panel se veía
   centrado en vez de pegado a la izquierda, pese a tener la clase
   puesta. Un selector compuesto (dos clases) tiene más especificidad
   y gana siempre, sin depender del orden. */
.overlay.sidepanel-overlay{ justify-content:flex-start; align-items:stretch; padding:0; }
.sidepanel{
  background:var(--surface); width:300px; max-width:85vw; height:100%;
  border-right:1px solid var(--line); padding:22px 20px; overflow-y:auto;
  transform:translateX(-100%); transition:transform .22s ease;
  box-shadow:3px 0 14px rgba(42,39,36,0.18);
}
.sidepanel-overlay.active .sidepanel{ transform:translateX(0); }
.sidepanel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.sidepanel-head h3{ margin:0; font-family:"Roboto Condensed","Arial Narrow",sans-serif; font-size:19px; }
.sidepanel-cerrar{
  background:none; border:none; color:var(--text-muted); font-size:20px; line-height:1;
  cursor:pointer; padding:4px;
}
.sidepanel-cerrar:hover{ color:var(--text); }

.menu-lista{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.menu-lista .linkbtn{ font-size:14px; text-decoration:none; }
.menu-separador{ width:100%; border:none; border-top:1px solid var(--line); margin:2px 0; }

.grid-dos-col{ display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:start; }
@media (max-width:760px){ .grid-dos-col{ grid-template-columns:1fr; } }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; }

/* ---------- Tarjetas colapsables (admin): título visible, resto se
   expande al tocarlo. Se usa el <details>/<summary> nativo — el
   triángulo de apertura lo pone el navegador solo. ---------- */
.card details > summary{
  font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-size:16px; font-weight:700;
  color:var(--text); cursor:pointer; list-style:revert; margin:0;
}
.card details > summary::marker{ color:var(--text-muted); }
.card details[open] > summary{ margin-bottom:4px; }

/* ---------- "Bienvenida al taller" (vista alumna) ---------- */
.faqtitulo{
  font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-size:14px; font-weight:700;
  color:var(--primary-dark); margin:16px 0 4px;
}
.faqtitulo:first-child{ margin-top:0; }
.faqlista{ margin:4px 0 12px; padding-left:20px; }
.faqlista li{ color:var(--text-muted); font-size:14px; margin-bottom:6px; }
.faqlista li:last-child{ margin-bottom:0; }
.subtitle a{ color:var(--primary-dark); }

/* ---------- Anillo de cuota ---------- */
.quota{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.quota-ring{
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--primary) 0turn calc(var(--pct,0)*1turn), var(--surface-alt) 0);
  display:flex; align-items:center; justify-content:center;
}
.quota-ring::after{
  content:attr(data-label); width:44px; height:44px; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
}
.quota-text b{ display:block; font-size:15px; }
.quota-text span{ color:var(--text-muted); font-size:13px; }

/* ---------- Lista de semanas ---------- */
.weektable-head{
  display:flex; justify-content:space-between; font-size:12px; color:var(--text-muted);
  padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:4px;
}
.weeklist{ list-style:none; margin:0; padding:0; }
.weekrow{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 0; border-top:1px solid var(--line); gap:12px;
}
.weekrow:first-child{ border-top:none; }
.weekmeta{ display:flex; align-items:baseline; gap:10px; }
.weeknum{ font-family:"SFMono-Regular",Consolas,monospace; color:var(--text-muted); font-size:13px; width:18px; }
.weekdate{ font-weight:600; font-size:14px; }
.weekdate.tachado{ text-decoration:line-through; color:var(--text-muted); font-weight:400; }
.weekdestino{ color:var(--swap); font-weight:600; font-size:14px; }
.weekhorario{ font-size:12.5px; color:var(--text-muted); }

.status{ font-size:12px; padding:4px 10px; border-radius:999px; font-weight:600; white-space:nowrap; }
.status.native{ background:var(--primary-tint); color:var(--primary-dark); }
.status.swapped{ background:var(--swap-tint); color:var(--swap); }
.status.perdida{ background:var(--danger-tint); color:var(--danger); }
.status.baja{ background:var(--surface-alt); color:var(--text-muted); }
.status.pendiente{ background:var(--swap-tint); color:var(--swap); }

.note{
  background:var(--surface-alt); border-radius:var(--radius); padding:12px 14px;
  font-size:13px; color:var(--text-muted); margin-top:16px;
}

.payrow{ display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line); font-size:13.5px; }
.payrow:first-of-type{ border-top:none; }
.payrow.horario-clickable{ cursor:pointer; border-radius:var(--radius); padding-left:8px; padding-right:8px; margin:0 -8px; }
.payrow.horario-clickable:hover{ background:var(--surface-alt); }
.payrow.horario-clickable.activo{ background:var(--primary-tint); }
.payrow.horario-clickable.activo span:first-child{ color:var(--primary-dark); font-weight:600; }

.empty-msg{ padding:16px 0; color:var(--text-muted); font-size:13.5px; }

/* ---------- MODAL ---------- */
/* (28-sept-2026, ronda 9): antes esto se mostraba/ocultaba con
   display:none/flex, lo que no permite animar la aparición. Se
   cambió a opacity+visibility (con pointer-events para que, mientras
   está oculto, no se pueda interactuar ni con Tab) — así se puede
   animar tanto el fondo oscuro como, en el caso del menú lateral más
   abajo, el panel deslizándose. No cambia cómo se abre/cierra ningún
   modal existente (JS solo pone o quita la clase "active", igual que
   antes). */
.overlay{
  position:fixed; inset:0; background:rgba(42,39,36,0.45);
  align-items:center; justify-content:center; padding:20px; z-index:10;
  display:flex; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease;
}
.overlay.active{ opacity:1; visibility:visible; pointer-events:auto; }
.modal{
  background:var(--surface); border-radius:var(--radius); padding:24px; max-width:820px;
  width:100%; border:1px solid var(--line); max-height:88vh; overflow-y:auto;
  position:relative;
}
.modal h3{ margin:0 0 4px; font-family:"Roboto Condensed","Arial Narrow",sans-serif; font-size:19px; }
.modal .subtitle{ color:var(--text-muted); margin:0 0 16px; font-size:13px; }

.tabtoggle{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; margin-bottom:16px; }
.tabtoggle button{
  border:none; background:none; padding:7px 16px; font-size:13.5px; cursor:pointer;
  color:var(--text-muted); font-family:inherit;
}
.tabtoggle button.active{ background:var(--primary-dark); color:#fff; }

.slotoption{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--line); border-radius:var(--radius); padding:11px 14px; margin-bottom:8px;
  cursor:pointer; font-size:14px; background:#fff;
}
.slotoption:hover{ border-color:var(--primary); }
.slotoption.selected{ border-color:var(--primary); border-width:2px; }
.slotoption .cap{ font-size:12px; color:var(--text-muted); font-family:"SFMono-Regular",Consolas,monospace; }

.schedule{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
table.grid{ width:100%; border-collapse:collapse; min-width:680px; }
table.grid th{
  text-align:left; padding:10px 10px; font-size:12px; color:var(--text-muted);
  border-bottom:1px solid var(--line); font-weight:600; white-space:nowrap;
}
table.grid td{ padding:8px 8px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); vertical-align:top; }
table.grid td:last-child, table.grid th:last-child{ border-right:none; }
table.grid tr:last-child td{ border-bottom:none; }
td.weeklabel{ font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; color:var(--text-muted); white-space:nowrap; }

.chip{
  font-size:11.5px; padding:3px 7px; border-radius:var(--radius);
  margin-bottom:3px; background:var(--primary-tint); color:var(--primary-dark);
}
.chip.swapped{ background:var(--swap-tint); color:var(--swap); }
.chip.empty{
  border:1px dashed var(--line); color:var(--text-muted); cursor:pointer; text-align:center;
}
.chip.empty.selected{
  background:var(--swap-tint); color:var(--swap); border-color:var(--swap);
  border-style:solid; font-weight:600;
}
.chip.empty:hover{ border-color:var(--primary); color:var(--primary-dark); }
.chip.origen{
  background:var(--primary-dark); color:#fff; font-weight:600; text-align:center;
}
.celda-header{
  font-size:11px; color:var(--text-muted); font-weight:600; margin-bottom:5px;
  padding-bottom:4px; border-bottom:1px solid var(--line); line-height:1.35;
}
td.celda-cerrada{ opacity:0.55; }
.chip.cerrado{
  border:1px dashed var(--line); color:var(--text-muted); text-align:center; cursor:default;
}
.chip.bloqueado{
  border:1px dashed var(--line); color:var(--text-muted); text-align:center; cursor:not-allowed;
}
.chip-clickable{ cursor:pointer; }
.chip-clickable:hover{ border-color:var(--swap); color:var(--swap); }
.chip.cancelada{ background:var(--danger-tint); color:var(--danger); font-weight:600; text-align:center; }
.aviso-cancelacion{
  background:var(--danger-tint); color:var(--danger); border-radius:var(--radius);
  padding:10px 12px; font-size:13px; margin-bottom:10px;
}
.slotoption.disabled{
  cursor:not-allowed; opacity:0.6; background:var(--surface-alt);
}
.slotoption.disabled:hover{ border-color:var(--line); }
.slotoption .nota-bloqueo{ font-size:11.5px; color:var(--danger); }

.legend{ display:flex; gap:16px; font-size:12px; color:var(--text-muted); margin-top:10px; flex-wrap:wrap; }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.native{ background:var(--primary); }
.dot.swapped{ background:var(--swap); }

.warn{
  background:var(--danger-tint); color:var(--danger); border-radius:var(--radius);
  padding:10px 12px; font-size:13px; margin-top:14px; display:none;
}
.warn.active{ display:block; }
.modalactions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.modal-loading{ padding:20px 0; text-align:center; color:var(--text-muted); font-size:13.5px; }

.hidden{ display:none !important; }

.pwa-banner{
  display:flex; align-items:center; gap:10px;
  background:var(--primary-dark); color:#fff;
  padding:10px 14px; font-size:13.5px; line-height:1.35;
  position:sticky; top:0; z-index:100;
}
.pwa-banner span#pwa-banner-icono{ font-size:18px; flex-shrink:0; }
.pwa-banner span#pwa-banner-texto{ flex:1; }
.pwa-banner .btn.small{
  background:#fff; color:var(--primary-dark); white-space:nowrap;
  padding:7px 14px; font-size:13px;
}
.pwa-banner-cerrar{
  background:none; border:none; color:#fff; opacity:0.8;
  font-size:20px; line-height:1; cursor:pointer; padding:0 2px; flex-shrink:0;
}
.pwa-banner-cerrar:hover{ opacity:1; }
.pwa-banner .linkbtn{ text-decoration:underline; white-space:nowrap; flex-shrink:0; }

/* ---------- Ventana "Instalar la app" (pasos numerados) ---------- */
.pwa-pasos{ margin:0; padding-left:20px; }
.pwa-pasos li{ margin-bottom:10px; font-size:14px; }
.pwa-pasos li:last-child{ margin-bottom:0; }

/* ---------- Confirmación en línea al elegir destino (modal de
   cambio de cupo) — ítem #5. Queda pegada abajo del modal, siempre
   visible, en vez de depender del botón de siempre más lejos. ---------- */
.confirm-inline{
  position:sticky; bottom:-24px; left:0; right:0; margin:14px -24px -24px;
  padding:14px 24px; background:var(--surface); border-top:2px solid var(--primary);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.confirm-inline-texto{ font-size:13.5px; }
.confirm-inline-acciones{ display:flex; gap:16px; align-items:center; }

/* ---------- Vista profesora ---------- */
.weeknav-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:16px; flex-wrap:wrap;
}
.weeknav{
  display:flex; align-items:center; gap:14px;
}
.weeknav button{
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  width:30px; height:30px; cursor:pointer; color:var(--text); font-size:14px;
  display:flex; align-items:center; justify-content:center; font-family:inherit;
}
.weeknav button:hover:not(:disabled){ border-color:var(--primary); }
.weeknav button:disabled{ opacity:0.35; cursor:not-allowed; }
.weeknav h2{
  font-family:"Roboto Condensed","Arial Narrow",sans-serif; font-size:16px;
  margin:0; text-align:center; min-width:220px;
}

.claseprofesora{ border-top:1px solid var(--line); padding-top:18px; margin-top:18px; }
.claseprofesora:first-child{ border-top:none; padding-top:0; margin-top:0; }
.claseprofesora-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:14.5px; margin-bottom:10px; gap:12px; font-weight:600;
}
.claseprofesora-head span{ color:var(--text-muted); font-size:12.5px; font-weight:400; }

table.rostertable{ width:100%; border-collapse:collapse; }
table.rostertable thead th{
  text-align:left; font-size:12px; color:var(--text-muted); font-weight:600;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
table.rostertable thead th:last-child{ text-align:center; width:70px; }
table.rostertable tbody td{
  padding:11px 0; border-top:1px solid var(--line); font-size:13.5px; vertical-align:middle;
}
table.rostertable tbody tr:first-child td{ border-top:none; }
table.rostertable tbody td:last-child{ text-align:center; }

.badge-cupo{
  font-size:11px; padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:var(--primary-tint); color:var(--primary-dark);
}
.badge-cupo.cambio{ background:var(--swap-tint); color:var(--swap); }

.chk-asistio{ width:18px; height:18px; cursor:pointer; accent-color:var(--primary-dark); }
.chk-asistio:disabled{ cursor:not-allowed; opacity:0.4; }

/* ---------- Pestañas de mes (admin) ---------- */
/* (28-sept-2026, ronda 9): antes, en pantallas angostas, esta píldora
   se reemplazaba por un <select> nativo porque los botones se
   encimaban (flex-wrap:wrap, varios meses por línea). Saúl pidió lo
   contrario: que la píldora se mantenga SIEMPRE visible, en una sola
   línea, con scroll horizontal si no caben todos los meses — mismo
   estilo que el switcher de "Mis clases / Admin" (.tabtoggle). El
   <select> sigue existiendo en el HTML (sigue siendo la única fuente
   de verdad para el resto del código, ver comentario en admin.js),
   pero ya no se muestra nunca — queda oculto con display:none.

   (2-oct-2026): Saúl pidió que SIEMPRE se vean exactamente 3 meses a
   la vez (el anterior a la izquierda, el actual al centro, el
   siguiente a la derecha), con scroll para llegar a los demás — antes
   la píldora crecía hasta mostrar TODOS los meses de una vez en
   pantallas anchas, dejando un espacio vacío enorme y el mes actual
   corrido hacia la izquierda. Ahora cada botón ocupa siempre un
   tercio del ancho de la píldora (flex-basis:33.3334%), y la píldora
   misma tiene un ancho máximo fijo — así, sin importar cuántos meses
   haya para atrás o adelante, siempre se ven 3 enteros, en mobile y
   en desktop por igual. scroll-snap-type/scroll-snap-align hacen que,
   al deslizar (con el dedo, el trackpad o las flechitas), el scroll
   "enganche" siempre en un mes completo, nunca a medio camino. El mes
   activo se vuelve a centrar solo cada vez que se pinta la píldora o
   se toca otra pestaña (ver centrarPestanaMes en admin.js).

   (3-oct-2026, ítem 21): las flechas ‹ › pasan a ser parte de la
   misma píldora, en los extremos — antes eran dos círculos sueltos a
   los costados. Ahora el borde redondeado lo pone .monthtabs-wrap
   (envuelve flechas + meses), y las flechas quedan separadas de los
   meses con la misma línea divisoria que hay entre mes y mes.
   .monthtabs sola (sin el envoltorio) conserva su borde propio,
   porque también se usa para elegir la clase del día en la vista
   profesora (ver renderProfesoraDetalleDia en profesora.js). */
.monthtabs-wrap{
  display:flex; align-items:stretch; margin-bottom:18px;
  border:1px solid var(--line); border-radius:999px; overflow:hidden;
  background:var(--surface); max-width:520px; width:100%;
}
.monthtabs{
  display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface); max-width:460px; width:100%;
  scrollbar-width:none; scroll-snap-type:x mandatory; margin-bottom:0;
  position:relative; /* para que centrarPestanaMes mida cada mes desde el borde de la píldora */
}
.monthtabs::-webkit-scrollbar{ display:none; }
.monthtabs button{
  border:none; background:none; padding:8px 6px; font-size:12.5px; cursor:pointer;
  color:var(--text-muted); font-family:inherit; border-right:1px solid var(--line);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:0 0 33.3334%; text-align:center; scroll-snap-align:center;
}
.monthtabs button:last-child{ border-right:none; }
.monthtabs button.active{ background:var(--primary-dark); color:#fff; }
/* Dentro del envoltorio, la píldora de meses pierde su propio borde
   (lo pone el envoltorio) y ocupa todo el espacio entre las flechas. */
.monthtabs-wrap .monthtabs{
  border:none; border-radius:0; background:none; max-width:none;
  flex:1 1 auto; min-width:0; width:auto;
}
.monthtabs-flecha{
  flex:0 0 36px; background:none; border:none; padding:0; cursor:pointer;
  color:var(--text-muted); font-size:16px; line-height:1; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
}
.monthtabs-flecha:first-child{ border-right:1px solid var(--line); }
.monthtabs-flecha:last-child{ border-left:1px solid var(--line); }
.monthtabs-flecha:hover{ background:var(--surface-alt); color:var(--text); }

/* Ítem 18 (testeo 2, 7-oct-2026): pestañas de clases de un mismo día en
   la vista profesora. Mismo estilo que el selector de meses, pero la
   píldora mide lo que miden sus clases (sin huecos) y queda centrada. */
.sesiontabs-wrap{ display:flex; justify-content:center; margin-bottom:14px; }
.monthtabs.sesiontabs{ width:auto; max-width:100%; scroll-snap-type:none; }
.monthtabs.sesiontabs button{ flex:0 0 auto; padding:8px 16px; }

.mesver-select{ display:none; }

/* ---------- Píldora de acciones (28-sept-2026, ronda 10) ---------- */
/* Mismo estilo visual que .monthtabs/.tabtoggle (píldora conectada,
   un solo borde alrededor) pero sin estado "activo" — acá los dos
   botones son dos acciones distintas, no un selector de una opción.
   Usado por ahora en "Dejar un aviso" / "Enviados (N)" (vista
   profesora). */
.pildora-acciones{
  display:inline-flex; border:1px solid var(--line); border-radius:999px;
  overflow:hidden; background:var(--surface);
}
.pildora-acciones button{
  border:none; background:none; padding:8px 16px; font-size:13.5px; cursor:pointer;
  color:var(--primary-dark); font-family:inherit; white-space:nowrap;
}
.pildora-acciones button:hover{ background:var(--surface-alt); }
.pildora-acciones button+button{ border-left:1px solid var(--line); }

/* Fila que envuelve la píldora de "Dejar un aviso"/"Enviados" en la
   vista profesora: centrada en mobile, alineada a la izquierda en
   desktop (28-sept-2026, ronda 10). */
.fila-avisos-profesora{ display:flex; justify-content:center; margin-bottom:16px; }
@media (min-width:761px){ .fila-avisos-profesora{ justify-content:flex-start; } }

/* ---------- Botonera de "Horarios y cupos por mes" ---------- */
.calbotonera{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:4px; margin-bottom:6px;
}

/* ---------- Vista "un día a la vez" (mobile) ---------- */
.diaunico-nav{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-bottom:1px solid var(--line); background:var(--bg);
}
.diaunico-titulo{ font-size:12.5px; font-weight:700; color:var(--text); text-align:center; flex:1; }
.diaunico-celda{ padding:10px; }

/* ---------- Calendario admin: columnas por día de la semana ---------- */
.admincal{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
table.admingrid{ width:100%; border-collapse:collapse; min-width:1080px; table-layout:fixed; }
table.admingrid th{
  text-align:left; padding:9px 10px; font-size:11.5px; color:var(--text-muted);
  border-bottom:1px solid var(--line); border-right:1px solid var(--line); font-weight:700;
  white-space:nowrap; background:var(--bg);
}
table.admingrid th:last-child{ border-right:none; }
table.admingrid td{
  padding:8px; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  vertical-align:top; width:14.5%;
}
table.admingrid td.weeklabel{
  width:9%; font-family:"SFMono-Regular",Consolas,monospace; font-size:11px;
  color:var(--text-muted); white-space:nowrap; background:var(--bg);
}
table.admingrid td:last-child, table.admingrid th:last-child{ border-right:none; }
table.admingrid tr:last-child td{ border-bottom:none; }
table.admingrid tr.currentweek td{ background:#F4F0E6; }
table.admingrid tr.currentweek td.weeklabel{ background:#EDE6D4; color:var(--primary-dark); font-weight:700; }
td.nodia-cell{ background:repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, var(--bg) 6px, var(--bg) 7px); }

.daynum{ font-size:12px; font-weight:700; color:var(--text); margin-bottom:5px; }
.daynum.muted{ color:var(--text-muted); font-weight:400; }

/* ---------- Semanas pasadas colapsadas (calendario admin) ---------- */
tr.weeksummary-row td.weeksummary-cell{
  padding:0; border-right:none; background:var(--bg);
}
.weeksummary-toggle{
  width:100%; text-align:left; border:none; background:none; cursor:pointer;
  padding:8px 10px; font-size:11.5px; color:var(--text-muted); font-family:inherit;
}
.weeksummary-toggle:hover{ color:var(--text); }
tr.weekdetail-row.hidden{ display:none; }

/* ---------- Planilla por horario: mismo lenguaje visual que el calendario admin, en columnas ---------- */
.plancal{ overflow-x:auto; padding-bottom:4px; }
.plancal-row{ display:flex; gap:10px; min-width:min-content; }
.plancol{
  flex:0 0 180px; width:180px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:9px;
}
.plancol .horblock-head{ margin-bottom:6px; }
.plancol .plhead-dia{ font-size:10.5px; color:var(--text-muted); font-weight:700; white-space:nowrap; flex:1 1 100%; margin-bottom:3px; }
.plancol .plhead-cupos{
  flex:1 1 100%; margin-top:5px; margin-bottom:6px; font-size:10.5px; color:var(--text-muted); cursor:pointer;
  text-decoration:underline dotted; text-underline-offset:2px; width:fit-content;
}
.plchip{
  display:flex; align-items:center; justify-content:space-between; gap:4px; cursor:pointer;
}
.plchip.pl-boleta{ background:var(--primary-dark); color:#fff; font-weight:600; }
.plchip.pl-sinboleta{ background:var(--primary-tint); color:var(--primary-dark); }
.plchip.pl-mitad{ background:var(--swap-tint); color:var(--swap); }
.plchip.pl-nopagado{ background:var(--danger-tint); color:var(--danger); }
.plchip.pl-sinregistro{ background:var(--surface-alt); color:var(--text-muted); }

.renovbadge{ font-size:9px; font-weight:700; padding:1px 6px; border-radius:8px; margin-left:5px; display:inline-block; vertical-align:middle; }
.renovbadge.renov-pendiente{ background:var(--surface-alt); color:var(--text-muted); border:1px solid var(--line); }
.renovbadge.renov-renueva_mismo_horario{ background:var(--primary-tint); color:var(--primary-dark); }
.renovbadge.renov-renueva_otro_horario{ background:var(--swap-tint); color:var(--swap); }
.renovbadge.renov-no_renueva{ background:var(--danger-tint); color:var(--danger); }
/* renovbadge-clickable: retirado (27-sept, revisión 2) — el badge de
   la planilla ahora es solo informativo, la acción vive en el modal
   que abre la pastilla completa (ítems #4/#6/#7). */

/* ---------- Modal de acciones de una alumna: opciones de pago como
   una lista de casillas apiladas (mismo lenguaje visual .plchip que
   la planilla), la actual queda resaltada con un borde. ---------- */
.pagostatusgrid{ display:flex; flex-direction:column; gap:6px; margin-top:8px; margin-bottom:4px; }
/* (27-sept-2026, revisión 3) Fila del monto + botón de guardar como
   excepción, en el modal de acciones de la alumna — reemplaza el
   botón suelto con margen negativo que quedaba superpuesto al
   cuadro de Monto. */
.montorow{ display:flex; gap:8px; align-items:center; }
.montorow input{ flex:1; }
.montorow .btn{ flex-shrink:0; white-space:nowrap; }
.pagostatusgrid .plchip{ padding:9px 12px; border-radius:var(--radius); justify-content:flex-start; }
.pagostatusgrid .plchip.pl-activo{ outline:2px solid var(--primary-dark); outline-offset:1px; }
/* Ítems #4/#6/#7 (27-sept, revisión 2): mismas casillas que el estado
   de pago, reutilizadas para las 3 opciones de renovación dentro del
   modal de acciones de la alumna — mismos tintes que ya usaba el
   badge de la planilla (.renovbadge.renov-x), aplicados acá al chip. */
.plchip.renov-pendiente{ background:var(--surface-alt); color:var(--text-muted); }
.plchip.renov-renueva_mismo_horario{ background:var(--primary-tint); color:var(--primary-dark); }
.plchip.renov-renueva_otro_horario{ background:var(--swap-tint); color:var(--swap); }
.plchip.renov-no_renueva{ background:var(--danger-tint); color:var(--danger); }

/* Ítem #15 (28-sept-2026, tarde, seguimiento) — antes la lista de
   asistencia de la profesora tenía un solo checkbox (asistió / sin
   marcar), sin forma de decir que una alumna faltó.
   (Ronda 16, 28-sept-2026, noche) Estética a pedido de Saúl: una sola
   píldora conectada de dos mitades — mismo lenguaje visual que
   .tabtoggle/.monthtabs (un solo borde alrededor, un divisor entre
   las dos mitades) — en vez de dos chips sueltos. Tilde a la
   izquierda, X a la derecha, ambas en un color claro por defecto; al
   tocar una mitad, esa mitad pasa a un color más oscuro (con su
   propio tinte — verde para "asistió", rojo para "no asistió") y la
   otra queda liberada, porque son excluyentes. */
.asispildora{
  display:inline-flex; border:1px solid var(--line); border-radius:999px;
  overflow:hidden;
}
.asispildora button{
  border:none; background:var(--surface-alt); color:var(--text-muted);
  width:34px; height:30px; font-size:15px; line-height:1; cursor:pointer;
  font-family:inherit; display:flex; align-items:center; justify-content:center;
}
.asispildora button.asis-check{ border-right:1px solid var(--line); }
.asispildora button:hover:not(:disabled){ background:var(--surface); }
.asispildora button.asis-check.activo{ background:var(--primary-dark); color:#fff; }
.asispildora button.asis-x.activo{ background:var(--danger); color:#fff; }
.asispildora button:disabled{ opacity:0.5; cursor:not-allowed; }

/* ---------- Alumna clickeable dentro de una clase (calendario admin) ---------- */
.chip-alumna-click{ cursor:pointer; text-decoration:underline dotted; text-underline-offset:2px; }

.horblock{ margin-bottom:8px; padding-bottom:8px; border-bottom:1px dashed var(--line); }
.horblock:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
.horblock-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; font-size:10.5px; font-weight:700; margin-bottom:5px; gap:4px; }
.horblock-head .prof{ font-weight:400; color:var(--text-muted); white-space:nowrap; }
.horblock-actions{ display:flex; gap:2px; margin-left:auto; }

.iconbtn{
  border:none; background:none; color:var(--text-muted); cursor:pointer; font-size:12px;
  width:18px; height:18px; line-height:1; padding:0; border-radius:999px;
}
.iconbtn:hover{ background:var(--surface-alt); color:var(--text); }

.chip.sm{ font-size:10.5px; padding:2px 6px; margin-bottom:3px; }

.profbadge{ font-size:10.5px; font-weight:700; color:#fff; padding:2px 7px; border-radius:999px; white-space:nowrap; }
.profbadge-clickable{ cursor:pointer; text-decoration:underline dotted; text-underline-offset:2px; }
.profbadge-clickable:active{ opacity:0.75; }

.addclassbtn{
  display:block; width:100%; margin-top:6px; padding:5px 6px; font-size:10.5px; text-align:center;
  background:none; border:1px dashed var(--line); border-radius:var(--radius); color:var(--text-muted);
  cursor:pointer; font-family:inherit;
}
.addclassbtn:hover{ border-color:var(--primary); color:var(--primary-dark); }
.profbadge-0{ background:var(--primary-dark); }
.profbadge-1{ background:var(--swap); }
.profbadge-2{ background:#435A73; }
.profbadge-3{ background:#7A5240; }
.profbadge-4{ background:#6E5E8C; }
.profbadge-5{ background:#8C6E1F; }

/* ---------- Calendario mensual de profesora ---------- */
table.pfcal{ width:100%; border-collapse:collapse; table-layout:fixed; }
table.pfcal th{
  background:var(--bg); font-size:11.5px; color:var(--text-muted); font-weight:600;
  padding:8px 4px; text-align:center; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
}
table.pfcal th:last-child{ border-right:none; }
table.pfcal td{
  border:1px solid var(--line); height:34px; vertical-align:top; padding:6px; font-size:12px; color:var(--text-muted);
}
table.pfcal td.nodia{
  background:repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, var(--bg) 6px, var(--bg) 7px);
  color:var(--line);
}
table.pfcal td.classday{ background:#fff; height:auto; cursor:pointer; }
table.pfcal td.classday:hover{ border-color:var(--primary); }
table.pfcal td.classday.selected{ border-color:var(--primary); border-width:2px; background:#F4F0E6; }
table.pfcal tr.currentrow td.classday{ border-color:var(--primary); }
table.pfcal .pfdatenum{ font-size:12px; font-weight:700; color:var(--text); display:block; margin-bottom:5px; }
table.pfcal td.classday .pfdatenum{ color:var(--primary-dark); }
table.pfcal .pfchips{ display:flex; flex-wrap:wrap; gap:3px; }
table.pfcal .pfchip{ font-size:10px; padding:1px 6px; border-radius:999px; background:var(--primary-tint); color:var(--primary-dark); }
table.pfcal .pfchip.swapped{ background:var(--swap-tint); color:var(--swap); }
table.pfcal .pfchip.cancelada{ background:var(--danger-tint); color:var(--danger); }
table.pfcal .pfchip.empty{ background:none; border:1px dashed var(--line); color:var(--text-muted); }

.cal-legend{ display:flex; gap:16px; font-size:12px; color:var(--text-muted); margin-top:10px; flex-wrap:wrap; }
.cal-legend span{ display:inline-flex; align-items:center; gap:6px; }

/* ---------- Notificaciones de profesora ---------- */
.notifcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:18px; }
.notifhead{ padding:13px 16px; border-bottom:1px solid var(--line); }
.notifhead h3{ margin:0; font-size:15px; font-family:"Roboto Condensed","Arial Narrow",sans-serif; }
.notifhead span{ color:var(--text-muted); font-size:12.5px; }
.notifrow{ display:flex; align-items:flex-start; gap:12px; padding:11px 16px; border-top:1px solid var(--line); }
.notifrow:first-of-type{ border-top:none; }
.notiftag{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; flex-shrink:0; margin-top:1px; }
.notiftag.new{ background:var(--primary-tint); color:var(--primary-dark); }
.notiftag.last{ background:var(--danger-tint); color:var(--danger); }
.notiftag.swap{ background:var(--swap-tint); color:var(--swap); }
.notiftag.leave{ background:var(--danger-tint); color:var(--danger); }
/* Ítem #6 (27-sept-2026): "Renovación" con su propio color (dorado);
   "Aviso" (mensajes del admin, o "todo el taller") en gris neutro
   tierra, para que se lea como informativo y no compita con los tonos
   de estado (verde/naranjo/rojo) que ya tienen un significado propio. */
.notiftag.renov{ background:var(--renov-tint); color:var(--renov); }
.notiftag.aviso{ background:var(--surface-alt); color:var(--text-muted); }
.notifrow p{ margin:0; font-size:13.5px; }
.notifrow p b{ font-weight:700; }

/* ---------- Ítem #6 (27-sept-2026): sistema de avisos ---------- */
/* Radios de duración en el modal "Dejar un aviso" */
.duracionrow{ display:flex; flex-direction:column; gap:8px; margin-top:8px; margin-bottom:4px; }
.duracionopt{
  display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text);
  font-weight:normal; margin-bottom:0; cursor:pointer;
}
.duracionopt input{ width:auto; margin:0; }

/* Fila de un aviso recibido (tarjeta .notifcard, ver alumna/profesora) —
   igual que .notifrow pero con botón de cerrar propio, porque acá SÍ se
   puede descartar sin esperar a que expire. */
.notifrow.avisorecibido{ justify-content:space-between; }
.notifrow.avisorecibido p{ flex:1; }
.btn-cerrar-aviso{
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:18px; line-height:1; padding:0 2px; flex-shrink:0;
}
.btn-cerrar-aviso:hover{ color:var(--text); }

/* Fila de gestión de un aviso (listas de admin/profesora, con borrar) */
.avisogestionrow{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:11px 0; border-top:1px solid var(--line);
}
.avisogestionrow:first-child{ border-top:none; }
.avisogestionrow-texto{ font-size:13.5px; flex:1; }
.avisogestionrow-meta{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.avisogestionrow .linkbtn{ flex-shrink:0; white-space:nowrap; }

/* ---------- Ítem 24 (6-oct-2026): última acción y "Deshacer" ----------
   Barra fija abajo que aparece después de generar un mes, cambiar un
   horario nativo, marcar una renovación o dar de alta/baja — resume lo
   que hizo y permite deshacerlo (solo la última acción). Se arma desde
   admin.js (asegurarBarraUltimaAccion). */
.barra-ultima-accion{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  width:calc(100% - 32px); max-width:640px; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--primary);
  border-radius:var(--radius); padding:10px 12px 10px 14px;
  box-shadow:0 4px 16px rgba(42,39,36,0.16);
}
.barra-ultima-accion-texto{ font-size:13px; min-width:0; }
.barra-ultima-accion-texto b{ display:block; color:var(--text); font-weight:600; }
.barra-ultima-accion-texto span{ display:block; color:var(--text-muted); font-size:12.5px; margin-top:1px; }
.barra-ultima-accion-acciones{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.barra-ultima-accion .btn.small:disabled{ opacity:0.45; cursor:not-allowed; }
.barra-ultima-accion-cerrar{
  background:none; border:none; color:var(--text-muted); font-size:20px; line-height:1;
  cursor:pointer; padding:0 4px;
}
.barra-ultima-accion-cerrar:hover{ color:var(--text); }