/* App de la plataforma — usa el sistema de marca PAME (colors_and_type.css).
   Cargar colors_and_type.css ANTES que este archivo. */

/* Tamaño de texto: +2 sobre la escala de marca (menos los títulos grandes),
   y todo multiplicado por --ui-scale para el control de accesibilidad (A- / A+). */
:root{
  --ui-scale:1;
  --fs-12: calc(14px * var(--ui-scale));
  --fs-14: calc(16px * var(--ui-scale));
  --fs-16: calc(18px * var(--ui-scale));
  --fs-18: calc(20px * var(--ui-scale));
  --fs-20: calc(22px * var(--ui-scale));
  --fs-24: calc(24px * var(--ui-scale));
  --fs-32: calc(32px * var(--ui-scale));
  --fs-40: calc(40px * var(--ui-scale));
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-sans);background:var(--pame-bg-soft);color:var(--fg-1);min-height:100vh}
.brand{font-family:var(--font-display)}

/* ---- Login ---- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:var(--sp-5)}
.card{background:var(--pame-bg);width:100%;max-width:410px;border:1px solid var(--pame-line);
  border-radius:var(--r-lg);padding:40px 36px;box-shadow:var(--shadow-lg)}
.logo{margin-bottom:var(--sp-6);line-height:1}
.logo .logo-main{display:block;font-family:var(--font-display);font-size:var(--fs-32);
  color:var(--pame-blue);letter-spacing:.01em}
.logo .logo-sub{display:block;margin-top:6px;font-size:var(--fs-12);font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;color:var(--pame-teal)}
h1{font-family:var(--font-display);font-weight:400;font-size:var(--fs-24);margin:0 0 var(--sp-2);color:var(--fg-1)}
.lead{margin:0 0 var(--sp-5);color:var(--fg-3);font-size:var(--fs-14)}
form{display:flex;flex-direction:column;gap:var(--sp-4)}
label{display:flex;flex-direction:column;gap:7px;font-size:var(--fs-12);font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:var(--fg-2)}
input{font-family:var(--font-sans);font-size:var(--fs-16);padding:12px 14px;border:1px solid var(--pame-line);
  border-radius:var(--r-sm);background:#fff;color:var(--fg-1)}
input::placeholder{color:var(--pame-ink-3);opacity:.6;text-transform:none;font-weight:400}
input:focus{outline:none;border-color:var(--pame-teal);box-shadow:0 0 0 3px rgba(0,168,193,.20)}
button{font-family:var(--font-sans);font-size:var(--fs-16);font-weight:700;cursor:pointer;border:none;
  border-radius:var(--r-md);padding:12px 22px;background:var(--pame-blue);color:var(--fg-on-brand);
  margin-top:var(--sp-1);transition:background var(--t-base) var(--ease-out)}
button:hover{background:var(--pame-blue-700)}
button:disabled{opacity:.6;cursor:default}
.err{color:var(--pame-danger);font-size:var(--fs-14);margin:2px 0 0;min-height:16px}
.link{display:inline-block;margin-top:var(--sp-5);color:var(--fg-3);font-size:var(--fs-14);
  text-decoration:none;border-bottom:1px solid transparent}
.link:hover{color:var(--pame-blue);border-color:var(--pame-blue)}

/* ---- Dashboard ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px var(--sp-6);
  background:var(--pame-bg);border-bottom:1px solid var(--pame-line)}
.topbar .brand{font-size:var(--fs-24);color:var(--pame-blue)}
.ghost{background:none;border:1px solid var(--pame-line);color:var(--fg-2);padding:9px 16px;
  border-radius:var(--r-sm);font-size:var(--fs-14);font-weight:600;cursor:pointer;
  transition:border-color var(--t-base),color var(--t-base)}
.ghost:hover{border-color:var(--pame-blue);color:var(--pame-blue);background:var(--pame-blue-10)}
.panel{max-width:1180px;margin:0 auto;padding:var(--sp-5) var(--sp-6) var(--sp-8)}
.panel.ancho{max-width:1140px}
.panel h1{font-family:var(--font-display);font-weight:400;font-size:var(--fs-40);margin:0 0 var(--sp-2)}
.panel .muted{color:var(--fg-3);font-size:var(--fs-14);margin:0}
.hint{margin-top:var(--sp-6);background:var(--pame-orange-10);border:1px solid var(--pame-orange-30);
  border-left:4px solid var(--pame-orange);border-radius:var(--r-md);padding:18px 20px;
  font-size:var(--fs-14);color:var(--pame-ink-2);line-height:var(--lh-normal)}
#app{visibility:hidden}

/* ---- Progreso general ---- */
.resumen{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-2) 0 var(--sp-7)}
.bar{flex:1;height:10px;background:var(--pame-blue-10);border-radius:var(--r-pill);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--pame-teal);border-radius:var(--r-pill);
  width:0;transition:width var(--t-base) var(--ease-out)}
.resumen .cifra{font-size:var(--fs-14);font-weight:700;color:var(--fg-2);white-space:nowrap}

/* ---- Curso ---- */
.curso-titulo{font-family:var(--font-display);font-weight:400;font-size:var(--fs-32);margin:0 0 6px}
/* Chip del grupo (cohorte) al que pertenece el alumno dentro del curso */
.ch-grupo{--gr:var(--pame-blue);display:inline-block;vertical-align:middle;margin-left:10px;
  font-family:var(--font-sans);font-size:var(--fs-12);font-weight:800;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--gr) 14%,transparent);
  color:var(--gr);border:1px solid color-mix(in srgb,var(--gr) 38%,transparent)}
.curso-desc{color:var(--fg-3);font-size:var(--fs-14);margin:0 0 var(--sp-6)}

/* Encabezado del curso: datos + portada + "continuar donde quedó" */
.curso-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,42%);
  gap:var(--sp-6);align-items:center;margin:var(--sp-2) 0 var(--sp-7)}
.curso-hero.sin-img{grid-template-columns:minmax(0,1fr)}
.curso-hero .curso-desc{margin-bottom:var(--sp-4)}
.curso-hero .resumen{margin:0 0 var(--sp-4)}
.ch-media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--pame-line);
  background:var(--pame-bg-soft);aspect-ratio:16/9;box-shadow:var(--shadow-sm)}
.ch-media img{width:100%;height:100%;object-fit:cover;display:block}
.ch-cta{display:inline-flex;align-items:center;gap:10px;background:var(--pame-orange);color:#fff;
  font-size:var(--fs-14);font-weight:800;padding:13px 24px;border-radius:var(--r-pill);
  text-decoration:none;box-shadow:var(--shadow-sm);transition:background var(--t-fast) var(--ease-out)}
.ch-cta:hover{background:#e07a04}
.ch-cta svg{width:20px;height:20px;flex:0 0 auto}
.ch-next{margin:10px 0 0;font-size:var(--fs-12);color:var(--fg-3)}
.ch-next b{color:var(--fg-2)}
@media(max-width:820px){
  .curso-hero{grid-template-columns:1fr;gap:var(--sp-4)}
  .ch-media{order:-1}
}

/* ---- Vista de módulos en tarjetas (cuadrícula con portada) ---- */
.mods-grid{display:grid;gap:var(--sp-5) var(--sp-4);margin-bottom:var(--sp-6);
  grid-template-columns:repeat(auto-fill,minmax(var(--mc-min,215px),1fr))}
.mods-grid.tam-chico{--mc-min:165px}
.mods-grid.tam-medio{--mc-min:215px}
.mods-grid.tam-grande{--mc-min:290px}
.mods-grid.cols{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.mod-card{display:block;text-decoration:none;color:inherit}
.mc-img{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--pame-bg-soft);
  border:1px solid var(--pame-line);box-shadow:var(--shadow-xs);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.mods-grid.apaisada .mc-img{aspect-ratio:16/9}
.mods-grid.cuadrada .mc-img{aspect-ratio:1/1}
.mc-img img{width:100%;height:100%;object-fit:cover;display:block}
.mod-card:hover .mc-img{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.mc-fallback{width:100%;height:100%;display:grid;place-items:center;padding:14px;text-align:center;
  background:linear-gradient(135deg,var(--pame-blue) 0%,var(--pame-teal) 100%)}
.mc-fallback[data-n="1"]{background:linear-gradient(135deg,var(--pame-blue-700) 0%,var(--pame-blue) 100%)}
.mc-fallback[data-n="2"]{background:linear-gradient(135deg,var(--pame-teal) 0%,var(--pame-blue) 100%)}
.mc-fallback[data-n="3"]{background:linear-gradient(135deg,var(--pame-orange) 0%,#f4b23e 100%)}
.mc-fallback[data-n="4"]{background:linear-gradient(160deg,var(--pame-blue) 0%,var(--pame-teal) 100%)}
.mc-fallback span{color:#fff;font-weight:800;font-size:var(--fs-14);line-height:1.25;
  text-shadow:0 1px 6px rgba(0,0,0,.18)}
.mc-lock,.mc-opc{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);border-radius:var(--r-pill);
  padding:3px 9px;font-size:var(--fs-12)}
/* El "Opcional" va en la otra punta para no pisarse con el candado del drip */
.mc-opc{right:auto;left:var(--sp-2);font-weight:700;color:var(--fg-3)}
.mod-card.bloq .mc-img img,.mod-card.bloq .mc-fallback{filter:grayscale(.75);opacity:.6}
.mc-prog{display:flex;align-items:center;gap:10px;margin:10px 0 6px}
.mc-pct{font-size:var(--fs-14);font-weight:800;color:var(--fg-1);min-width:34px}
.mc-prog .bar{flex:1;height:6px;background:var(--pame-line);border-radius:var(--r-pill);overflow:hidden}
.mc-prog .bar > i{display:block;height:100%;background:var(--pame-teal);border-radius:var(--r-pill)}
.mc-tit{font-size:var(--fs-16);font-weight:800;color:var(--fg-1);margin:0;line-height:1.25}
.mc-sub{font-size:var(--fs-12);color:var(--fg-3);margin:4px 0 0}
.volver-mods{display:inline-flex;align-items:center;gap:6px;background:var(--pame-blue-10);
  border:1px solid var(--pame-blue-20);color:var(--pame-blue-700);font-size:var(--fs-14);font-weight:700;
  padding:9px 16px;border-radius:var(--r-pill);cursor:pointer;width:auto;margin-bottom:var(--sp-4)}
.volver-mods:hover{background:var(--pame-blue);border-color:var(--pame-blue);color:#fff}
/* En pantallas chicas las columnas fijas se relajan para que no queden minúsculas */
@media(max-width:900px){ .mods-grid.cols{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} }
@media(max-width:560px){ .mods-grid,.mods-grid.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-3)} }

/* ---- Sección destacada (arriba del temario, dentro de un curso) ----
   Un módulo marcado como `destacado` en el admin: lo administrativo del
   programa (cómo se navega, el Zoom, el calendario). No es una tarjeta más de
   la cuadrícula, así que se distingue con el fondo crema y la línea naranja. */
.destacada{background:var(--pame-bg-cream);border:1px solid var(--pame-orange-30);
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-6);box-shadow:var(--shadow-glow)}
.dst-head{margin-bottom:var(--sp-3)}
.dst-eyebrow{font-size:var(--fs-12);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pame-orange-600)}
.dst-tit{font-size:var(--fs-20);font-weight:700;color:var(--fg-1);margin:2px 0 0}
.dst-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-2)}
/* min-width:0 es lo que le permite achicarse abajo del ancho de su contenido:
   sin eso, el `nowrap` de la descripción le impone un mínimo y la tarjeta se
   sale del panel en pantallas chicas. */
.dst-item{display:flex;align-items:center;gap:var(--sp-3);min-width:0;text-decoration:none;background:var(--pame-bg);
  border:1px solid var(--pame-orange-30);border-radius:var(--r-sm);padding:var(--sp-3);
  transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.dst-item:hover{border-color:var(--pame-orange);box-shadow:var(--shadow-sm)}
.dst-ico{width:32px;height:32px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--pame-orange-20);color:var(--pame-orange-600)}
.dst-ico svg{width:18px;height:18px}
.dst-txt{flex:1;min-width:0}
.dst-txt b{display:block;font-size:var(--fs-14);font-weight:700;color:var(--fg-1);line-height:1.3}
.dst-txt span{display:block;font-size:var(--fs-12);color:var(--fg-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dst-flecha{flex:none;color:var(--pame-orange-600);font-weight:700}
@media(max-width:560px){
  .destacada{padding:var(--sp-3) var(--sp-4)}
  .dst-items{grid-template-columns:1fr}
}

/* ---- Avisos y próximos eventos (arriba del curso, deslizante, ocultable) ---- */
#avisos-cont{max-width:1140px;margin:0 auto;padding:var(--sp-5) var(--sp-6) 0}
.avisos{margin:0}
.avisos-tit-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:var(--sp-3)}
.avisos-tit{font-family:var(--font-display);font-weight:400;font-size:var(--fs-20);margin:0;color:var(--fg-1)}
.avisos-hide{background:none;border:1px solid var(--pame-line);color:var(--fg-3);font-size:var(--fs-12);
  font-weight:700;padding:6px 12px;border-radius:var(--r-sm);cursor:pointer;width:auto;white-space:nowrap}
.avisos-hide:hover{border-color:var(--pame-blue);color:var(--pame-blue);background:var(--pame-blue-10)}
.avisos-min{padding:2px 0}
.avisos-open{background:var(--pame-blue-10);border:1px solid var(--pame-blue-20);color:var(--pame-blue-700);
  font-weight:700;font-size:var(--fs-14);padding:9px 18px;border-radius:var(--r-pill);cursor:pointer;width:auto}
.avisos-open:hover{background:var(--pame-blue-20)}
.avisos-wrap{position:relative}
.avisos-track{display:flex;flex-direction:column;gap:10px}
/* De la cuarta tarjeta en adelante: van en el HTML pero no se ven hasta que se
   toca "Ver N más". Se ocultan con display:none (y no con altura) para que el
   `gap` de la columna no deje huecos fantasma. */
.avisos:not(.abierto) .aviso.a-extra{display:none}
.avisos-track .aviso{margin-bottom:0}
/* Modo deslizante (3+ avisos): fila con scroll-snap, cada aviso ocupa el 100% */
.avisos.es-slider .avisos-track{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.avisos.es-slider .avisos-track::-webkit-scrollbar{display:none}
.avisos.es-slider .aviso{flex:0 0 100%;scroll-snap-align:start}
.av-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--pame-line);background:var(--pame-bg);color:var(--pame-blue);font-size:20px;cursor:pointer;
  display:grid;place-items:center;padding:0;box-shadow:var(--shadow-md)}
.av-arrow:hover{border-color:var(--pame-blue);background:var(--pame-blue-10)}
.av-arrow.prev{left:-6px}
.av-arrow.next{right:-6px}
.avisos-dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--pame-blue-10);cursor:pointer;padding:0}
.dot.active{background:var(--pame-blue)}
.aviso{display:flex;gap:16px;align-items:flex-start;padding:22px 26px;background:var(--pame-bg);
  border:1px solid var(--pame-line);border-radius:var(--r-lg)}
/* Destacado: fondo degradé suave (sin borde de color) */
.aviso.destacado{background:linear-gradient(120deg,var(--pame-blue-10),var(--pame-teal-10));border-color:var(--pame-blue-20)}
.aviso .ico{width:40px;height:40px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;background:var(--pame-blue-10);color:var(--pame-blue-700)}
.aviso .ico svg{width:22px;height:22px}
.aviso.evento .ico{background:var(--pame-teal-10);color:var(--pame-teal-700)}
.aviso.bonus .ico{background:var(--pame-orange-10);color:var(--pame-orange-600)}
.aviso.recordatorio .ico{background:var(--pame-blue-10);color:var(--pame-blue-700)}
.aviso .a-cont{flex:1;min-width:0}
.aviso .a-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.aviso .a-tipo{font-size:var(--fs-12);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-3)}
.aviso .a-star{font-size:11px;font-weight:800;background:var(--pame-orange);color:#fff;padding:2px 8px;border-radius:var(--r-pill)}
.aviso .a-fecha{font-size:var(--fs-12);color:var(--pame-teal-700);font-weight:600;margin-left:auto}
.aviso .a-fecha b{color:var(--pame-orange)}
.aviso .a-tit{font-weight:700;font-size:var(--fs-16);color:var(--fg-1)}
.aviso .a-body{font-size:var(--fs-14);color:var(--fg-3);margin-top:2px;line-height:var(--lh-normal)}
.aviso .a-cta{display:inline-block;margin-top:10px;background:var(--pame-blue);color:#fff;font-size:var(--fs-12);
  font-weight:700;padding:8px 16px;border-radius:var(--r-sm);text-decoration:none}
.aviso .a-cta:hover{background:var(--pame-blue-700)}
@media (max-width:640px){ .aviso .a-fecha{margin-left:0} }

/* ---- Módulo ---- */
.modulo{border:1px solid var(--pame-line);border-radius:var(--r-md);margin-bottom:var(--sp-4);
  background:var(--pame-bg);overflow:hidden}
.mod-head{display:flex;align-items:center;gap:var(--sp-3);cursor:pointer;user-select:none;
  padding:16px 20px;background:var(--pame-bg-soft);border-bottom:1px solid var(--pame-line)}
.mod-head:hover{background:var(--pame-blue-10)}
.mod-head h3{margin:0;font-size:var(--fs-16);font-weight:700;color:var(--fg-1);flex:1;min-width:0}
.mod-caret{font-size:12px;color:var(--fg-3);flex:none;transition:transform var(--t-fast) var(--ease-out)}
.mod-n{font-size:var(--fs-12);color:var(--fg-3);font-weight:700;white-space:nowrap}
.modulo.plegado .mod-caret{transform:rotate(-90deg)}
.modulo.plegado .lecciones{display:none}
.modulo.plegado .mod-head{border-bottom:none}
.tag{font-size:var(--fs-12);font-weight:700;padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap}
.tag.libre{background:var(--pame-teal-10);color:var(--pame-teal-700)}
.tag.lock{background:var(--pame-blue-10);color:var(--pame-blue-700)}
/* Módulo opcional: no suma al avance ni lo exige el certificado (neutro a propósito,
   es un dato, no un estado bueno ni malo) */
.tag.opc{background:#fff;color:var(--fg-3);border:1px solid var(--pame-line)}
.modulo.bloq .mod-head{opacity:.75}

/* ---- Lección ---- */
.lecciones{list-style:none;margin:0;padding:6px 8px}
.leccion{display:flex;align-items:center;gap:var(--sp-3);padding:11px 12px;border-radius:var(--r-sm)}
.leccion + .leccion{border-top:1px solid var(--pame-line)}
.leccion .chk{width:22px;height:22px;flex:none;border:2px solid var(--pame-line);border-radius:6px;
  display:grid;place-items:center;cursor:pointer;color:#fff;font-size:13px;background:#fff;
  transition:background var(--t-fast),border-color var(--t-fast)}
.leccion.vista .chk{background:var(--pame-teal);border-color:var(--pame-teal)}
.leccion .txt{flex:1;min-width:0}
.leccion .txt b{font-weight:600;font-size:var(--fs-14);color:var(--fg-1)}
.leccion .txt span{display:block;font-size:var(--fs-12);color:var(--fg-3)}
.leccion.vista .txt b{color:var(--fg-3)}
.ver{border:1px solid var(--pame-line);background:#fff;color:var(--pame-blue);font-size:var(--fs-12);
  font-weight:700;padding:7px 12px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap}
.ver:hover{border-color:var(--pame-blue);background:var(--pame-blue-10)}
.modulo.bloq .leccion{opacity:.5}
.modulo.bloq .chk,.modulo.bloq .ver{pointer-events:none}
/* Drip por CLASE: una clase puede liberarse más tarde que su módulo */
.tag.mini{font-size:11px;padding:2px 8px}
.leccion.bloq{opacity:.62}
.ver:disabled{opacity:.7;cursor:default;pointer-events:none;border-color:var(--pame-line);background:var(--pame-bg-soft);color:var(--fg-3)}

.topbar > div{display:flex;gap:10px;align-items:center}
.logo-link{display:inline-flex;align-items:center;line-height:0}
.logo-img{height:52px;width:auto;display:block}

/* ---- Home: tarjetas de curso ---- */
/* --cc-cols lo setea el dashboard (1/2/3 según cuántos cursos). Sin la var: auto-fill. */
.cursos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:var(--sp-2)}
.cursos-grid[style*="--cc-cols"]{grid-template-columns:repeat(var(--cc-cols,3),minmax(0,1fr))}
/* Tablet: máx 2 columnas. Mobile: siempre una debajo de la otra. */
@media(max-width:900px){
  .cursos-grid,.cursos-grid[style*="--cc-cols"]{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
@media(max-width:640px){
  .cursos-grid,.cursos-grid[style*="--cc-cols"]{grid-template-columns:1fr}
}
.curso-card{background:var(--pame-bg);border:1px solid var(--pame-line);border-radius:var(--r-md);padding:22px;
  display:flex;flex-direction:column;gap:10px}
.curso-card h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-20);color:var(--fg-1)}
.curso-card p{margin:0;font-size:var(--fs-14);color:var(--fg-3);flex:1}
.mini-bar{height:8px;background:var(--pame-blue-10);border-radius:var(--r-pill);overflow:hidden}
.mini-bar > i{display:block;height:100%;background:var(--pame-teal);border-radius:var(--r-pill);width:0}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:4px}
.card-foot span{font-size:var(--fs-12);color:var(--fg-2);font-weight:700}
.btn-card{background:var(--pame-blue);color:#fff;font-size:var(--fs-12);font-weight:700;padding:9px 16px;
  border-radius:var(--r-sm);text-decoration:none;white-space:nowrap}
.btn-card:hover{background:var(--pame-blue-700)}
.seccion-tit{font-family:var(--font-display);font-weight:400;font-size:var(--fs-24);margin:var(--sp-6) 0 var(--sp-2)}
.volver{display:inline-block;color:var(--fg-3);font-size:var(--fs-14);text-decoration:none;margin-bottom:var(--sp-3)}
.volver:hover{color:var(--pame-blue)}

/* ---- Datos del alumno (autogestión) ---- */
.datos-card{background:var(--pame-blue-10);border:1px solid var(--pame-blue-20);border-radius:var(--r-md);
  padding:20px 22px;margin-bottom:var(--sp-6)}
.datos-card h3{margin:0 0 4px;font-size:var(--fs-16);color:var(--pame-blue-700)}
.datos-card p{margin:0 0 14px;font-size:var(--fs-14);color:var(--fg-2)}
.datos-card .fila{display:flex;gap:var(--sp-3);margin-bottom:12px}
.datos-card .fila > label{flex:1}
.datos-card label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-12);font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;color:var(--fg-2)}
.datos-card input,.datos-card select{font-family:var(--font-sans);font-size:var(--fs-14);padding:10px 12px;
  border:1px solid var(--pame-line);border-radius:var(--r-sm);background:#fff;color:var(--fg-1)}
.datos-card .tipo{max-width:120px}
.datos-card button{width:auto;padding:12px 22px;margin-top:2px}
.d-msg{margin-left:12px;font-size:var(--fs-12);color:var(--pame-danger)}

/* ---- Panel admin ---- */
.admin-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:var(--sp-5);gap:var(--sp-4);flex-wrap:wrap}
.admin-head h1{margin:0}
.admin-head .cuenta{color:var(--fg-3);font-size:var(--fs-14)}
.tabla-wrap{overflow-x:auto;border:1px solid var(--pame-line);border-radius:var(--r-md);background:#fff}
table.alumnos{border-collapse:collapse;width:100%;min-width:760px;font-size:var(--fs-14)}
table.alumnos th,table.alumnos td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--pame-line);vertical-align:top}
table.alumnos tr:last-child td{border-bottom:none}
/* Alta de alumna nueva (panel Alumnos) */
.alta-form{border:1px solid var(--pame-line);border-radius:var(--r-md);padding:14px 16px;margin:12px 0;background:var(--pame-bg-soft)}
.alta-form[hidden]{display:none}
.alta-ok{margin-top:12px;padding:12px 14px;border:1px solid var(--pame-teal-700);border-radius:var(--r-sm);background:var(--pame-teal-10);line-height:1.7}
.alta-ok code{background:#fff;padding:2px 8px;border-radius:6px;border:1px solid var(--pame-line);font-weight:700;font-family:monospace}
/* Admin · Productos y planes */
.prod-list{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.prod-card{border:1px solid var(--pame-line);border-radius:var(--r-md);padding:14px 16px;background:#fff}
.prod-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}
.planes-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.plan-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--pame-line);border-radius:var(--r-sm);background:var(--pame-bg-soft)}
.plan-info{line-height:1.4}
.adm-panel{border:1px solid var(--pame-line);border-radius:var(--r-md);padding:16px 18px;margin:12px 0;background:var(--pame-bg-soft)}
.adm-panel h4{margin:0 0 12px}
table.alumnos th{background:var(--pame-bg-soft);font-size:var(--fs-12);text-transform:uppercase;
  letter-spacing:.03em;color:var(--fg-2)}
table.alumnos td.mail{color:var(--fg-2)}
table.alumnos input,table.alumnos select{font-family:var(--font-sans);font-size:var(--fs-14);padding:7px 9px;
  border:1px solid var(--pame-line);border-radius:6px;background:#fff;color:var(--fg-1);width:100%}
table.alumnos .doc-cell{display:flex;gap:6px}
table.alumnos .doc-cell select{width:82px;flex:none}
.mini{padding:8px 14px;font-size:var(--fs-12);width:auto}
.vistas-pill{display:inline-block;background:var(--pame-teal-10);color:var(--pame-teal-700);font-weight:700;
  padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-12)}
.row-msg{font-size:var(--fs-12);margin-left:8px}
.row-msg.ok{color:var(--pame-teal-700)}
.row-msg.no{color:var(--pame-danger)}

/* ---- Mi perfil ---- */
.perfil-form{max-width:560px}
.avatar-row{display:flex;align-items:center;gap:18px;margin-bottom:var(--sp-6)}
.avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;background:var(--pame-blue-10);
  border:1px solid var(--pame-line);display:grid;place-items:center;color:var(--pame-blue);
  font-family:var(--font-display);font-size:34px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-row .sub{font-size:var(--fs-12);color:var(--fg-3);margin-top:6px}
.file-btn{display:inline-block;cursor:pointer;border:1px solid var(--pame-line);color:var(--pame-blue);
  font-size:var(--fs-12);font-weight:700;padding:8px 14px;border-radius:var(--r-sm)}
.file-btn:hover{border-color:var(--pame-blue);background:var(--pame-blue-10)}
.file-btn input{display:none}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.campo > label{font-size:var(--fs-12);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--fg-2)}
.campo input,.campo textarea,.campo select{font-family:var(--font-sans);font-size:var(--fs-14);padding:11px 13px;
  border:1px solid var(--pame-line);border-radius:var(--r-sm);background:#fff;color:var(--fg-1)}
.campo textarea{resize:vertical;min-height:84px}
.campo .fijo{padding:11px 13px;background:var(--pame-bg-soft);border:1px dashed var(--pame-line);
  border-radius:var(--r-sm);color:var(--fg-3);font-size:var(--fs-14)}
.campo .nota{font-size:11px;color:var(--fg-3);font-weight:400;text-transform:none;letter-spacing:0}
/* Aclaración DEBAJO del control (la del huso horario cambia según lo que elija) */
.campo .sub{font-size:var(--fs-12);color:var(--fg-3);line-height:var(--lh-normal)}
.campo.doble{flex-direction:row;gap:12px;align-items:flex-end}
.campo.doble .tipo{max-width:120px;flex:none}
.campo.doble > div{display:flex;flex-direction:column;gap:6px}
.campo.doble > div:last-child{flex:1}
.guardar-row{display:flex;align-items:center;gap:12px;margin-top:var(--sp-4)}
.guardar-row button{width:auto;padding:12px 22px}

/* ---- Ver clase (3 partes) ---- */
/* Layout ancho: sidebar de clases + columna principal grande */
body[data-page="clase"]{--sub-w:300px}
.clase-wrap{margin-left:calc(var(--side-w) + var(--sub-w));margin-right:auto;max-width:1180px;padding:var(--sp-5) var(--sp-6) var(--sp-8);transition:margin-left var(--t-base)}
.clase-layout{display:flex;gap:var(--sp-5);align-items:flex-start}
.clase-main{flex:1;min-width:0}
.clase-topbar{display:flex;align-items:center;gap:12px;margin-bottom:var(--sp-4)}

/* Sidebar de clases: FIJO al borde izquierdo (igual que el del dashboard) */
.clase-side{width:300px;position:fixed;top:0;left:0;bottom:0;z-index:55;padding-top:88px;
  border:none;border-right:1px solid var(--pame-line);background:var(--pame-bg);
  overflow:hidden;display:flex;flex-direction:column}
.clase-side-list{flex:1;overflow:auto;min-height:0}
.clase-side .dash-tools{flex:none;margin-top:0;padding:12px 10px 12px}
/* En desktop la barra está siempre fija: sin botón de cerrar */
.side-head .side-close{display:none}
.side-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px;
  border-bottom:1px solid var(--pame-line);font-weight:700;font-size:var(--fs-14);color:var(--fg-1);
  position:sticky;top:0;background:var(--pame-bg);z-index:2}
.side-close{background:none;border:none;color:var(--fg-3);cursor:pointer;font-size:20px;line-height:1;
  width:auto;padding:0 4px;margin:0}
.side-close:hover{color:var(--pame-blue);background:none}
.side-mod{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;cursor:pointer;margin:0;
  padding:13px 16px;font-size:var(--fs-12);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--fg-2);text-align:left}
.side-mod:hover{color:var(--pame-blue);background:var(--pame-blue-10)}
.side-mod .chev{font-size:10px;transition:transform var(--t-fast);flex:none;color:var(--fg-3)}
.side-mod .cnt{margin-left:auto;background:var(--pame-blue-10);color:var(--pame-blue-700);border-radius:var(--r-pill);
  padding:1px 8px;font-size:10px;flex:none}
.side-mod-wrap{border-top:1px solid var(--pame-line)}
.side-mod-wrap:first-of-type{border-top:none}
.side-mod-wrap.collapsed .chev{transform:rotate(-90deg)}
.side-mod-wrap.collapsed .side-mod-list{display:none}
.side-mod-list{padding-bottom:6px}
.side-clase{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;font-size:var(--fs-14);
  cursor:pointer;color:var(--fg-2);line-height:var(--lh-tight);border-left:3px solid transparent}
.side-clase:hover{background:var(--pame-blue-10)}
.side-clase.actual{background:var(--pame-blue-10);color:var(--pame-blue-700);font-weight:700;border-left-color:var(--pame-blue)}
.side-clase .ic{width:16px;flex:none;color:var(--pame-teal);font-weight:700}
.side-clase .n{color:var(--fg-3);flex:none}

/* Botón para reabrir el sidebar (desktop colapsado) / abrirlo (celular) */
.side-open-btn{display:none;border:1px solid var(--pame-line);background:#fff;color:var(--pame-blue);
  font-weight:700;font-size:var(--fs-12);padding:9px 14px;border-radius:var(--r-sm);cursor:pointer;width:auto}
.side-open-btn:hover{border-color:var(--pame-blue);background:var(--pame-blue-10)}
.side-closed .clase-side{display:none}
.side-closed .side-open-btn{display:inline-block}
.clase-side:empty{display:none}
.side-backdrop{display:none}

.clase-head{margin-bottom:var(--sp-5)}
.clase-mod{font-size:var(--fs-12);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--pame-teal-700)}
.clase-titulo{font-family:var(--font-display);font-weight:400;font-size:var(--fs-32);margin:4px 0 2px;color:var(--fg-1)}
.clase-pos{font-size:var(--fs-14);color:var(--fg-3)}

/* Stepper de las 3 partes */
.stepper{display:flex;gap:8px;margin:var(--sp-4) 0 var(--sp-6);flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--pame-line);
  border-radius:var(--r-pill);background:var(--pame-bg);font-size:var(--fs-12);font-weight:700;color:var(--fg-3)}
.step .num{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--pame-blue-10);color:var(--pame-blue-700);font-size:12px}
.step.activo{border-color:var(--pame-blue);color:var(--pame-blue-700)}
.step.hecho{border-color:var(--pame-teal);color:var(--pame-teal-700)}
.step.hecho .num{background:var(--pame-teal);color:#fff}
.step.bloq{opacity:.5}

/* Bloque de cada parte */
.parte{border:1px solid var(--pame-line);border-radius:var(--r-md);background:var(--pame-bg);
  margin-bottom:var(--sp-4);overflow:hidden}
.parte-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:16px 20px;background:var(--pame-bg-soft);border-bottom:1px solid var(--pame-line)}
.parte-head h3{margin:0;font-size:var(--fs-16);font-weight:700;color:var(--fg-1);display:flex;align-items:center;gap:10px}
.parte-head .estado{font-size:var(--fs-12);font-weight:700;padding:4px 11px;border-radius:var(--r-pill)}
.estado.pend{background:var(--pame-blue-10);color:var(--pame-blue-700)}
.estado.ok{background:var(--pame-teal-10);color:var(--pame-teal-700)}
.parte-body{padding:20px}
.parte.locked{opacity:.55}
.parte.locked .parte-body{display:none}
.lock-msg{font-size:var(--fs-12);color:var(--fg-3);font-weight:600}

/* Contenido: player / instructivo */
.player{position:relative}
.fs-btn{position:absolute;right:12px;top:12px;z-index:4;background:rgba(0,0,0,.55);color:#fff;border:none;
  width:auto;margin:0;padding:8px 13px;border-radius:var(--r-sm);cursor:pointer;font-size:17px;line-height:1;font-weight:700;
  opacity:.6;transition:opacity .15s}
.player:hover .fs-btn{opacity:1}
.fs-btn:hover{background:rgba(0,0,0,.78)}
.player:fullscreen{display:grid;place-items:center;background:#000}
.player:fullscreen .player-stub{width:min(100%,177vh);height:auto;border-radius:0}
.player-stub{aspect-ratio:16/9;background:var(--pame-blue-700);border-radius:var(--r-sm);display:grid;
  place-items:center;color:#fff;text-align:center;padding:20px}
.player-stub .play{font-size:44px;opacity:.85}
.player-stub p{margin:8px 0 0;font-size:var(--fs-12);opacity:.85}
/* Contenido: PDF embebido */
.pdf-frame{width:100%;height:70vh;min-height:460px;border:1px solid var(--pame-line);border-radius:var(--r-sm);background:#fff}
/* Reproductor de video (Bunny, embed firmado) */
.bunny-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-sm);background:#000;display:block}
.player:fullscreen .bunny-frame{height:100vh;aspect-ratio:auto}
/* Marca de agua con el nombre del alumno (disuasiva; encima del video) */
.video-wm{position:absolute;top:10px;left:14px;z-index:3;pointer-events:none;color:#fff;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  opacity:.45;text-shadow:0 1px 3px rgba(0,0,0,.8);letter-spacing:.02em}
.video-wm .wm-name{font-size:var(--fs-12);font-weight:700}
.video-wm .wm-prog{font-size:11px;font-weight:600;opacity:.9}
.pdf-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

/* Material adjunto (descargable) — bloque destacado para que no quede perdido */
.materiales-parte .parte-head{background:var(--pame-teal-10)}
.materiales{display:flex;flex-direction:column;gap:8px}
.material{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--pame-line);
  border-radius:var(--r-sm);text-decoration:none;color:var(--fg-1);background:#fff;
  transition:border-color var(--t-fast),background var(--t-fast)}
.material:hover{border-color:var(--pame-teal);background:var(--pame-teal-10)}
.material .m-ico{font-size:22px;flex:none;line-height:1}
.material .m-tit{flex:1;font-weight:600;font-size:var(--fs-14);min-width:0}
.material .m-dl{font-size:var(--fs-12);font-weight:700;color:var(--pame-teal-700);flex:none}

/* La tipografía del contenido escrito (títulos, listas, citas, tablas,
   alineación, sangría) vive UNA sola vez en `.rt-doc` (ui.css): es la misma
   que se ve al escribir la clase en el panel. Acá solo va lo propio de la
   pantalla del alumno. */
.instructivo{max-width:78ch}

/* Simulación */
.consigna{font-size:var(--fs-14);line-height:var(--lh-normal);color:var(--fg-1);margin:0 0 var(--sp-3)}
.sim-tag{display:inline-block;font-size:var(--fs-12);font-weight:700;padding:3px 10px;border-radius:var(--r-pill);
  background:var(--pame-orange-10);color:var(--pame-orange);margin-bottom:12px}

/* Quiz */
.pregunta{margin-bottom:var(--sp-4)}
.pregunta > p{font-weight:700;font-size:var(--fs-14);margin:0 0 10px;color:var(--fg-1)}
/* Aviso de "marcá todas las que correspondan": va pegado al enunciado, con menos peso */
.preg-multi{font-weight:600;font-size:var(--fs-12);color:var(--fg-3)}
.opcion{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--pame-line);
  border-radius:var(--r-sm);cursor:pointer;margin-bottom:8px;font-size:var(--fs-14);background:#fff;
  transition:border-color var(--t-fast),background var(--t-fast)}
.opcion:hover{border-color:var(--pame-blue)}
.opcion input{width:18px;height:18px;flex:none;accent-color:var(--pame-blue)}
.opcion.sel{border-color:var(--pame-blue);background:var(--pame-blue-10)}
/* Quiz aprobado: opciones bloqueadas (grisadas); la elegida queda resaltada */
.opcion.locked{cursor:default;opacity:.5}
.opcion.locked:hover{border-color:var(--pame-line)}
.opcion.locked.sel{opacity:1}
.opcion input:disabled{cursor:default}
.quiz-foot{display:flex;align-items:center;gap:14px;margin-top:var(--sp-3)}
.quiz-foot button{width:auto;padding:12px 22px}
.quiz-umbral{font-size:var(--fs-12);color:var(--fg-3)}
.quiz-msg{font-size:var(--fs-14);font-weight:700}

/* ════════════════════════════════════════════════════════════════════════
   Consultas del alumno (bloque que aparece SOLO en las clases donde está
   prendido `lecciones.acepta_consultas`).
   Graba la pantalla desde el navegador, suma capturas y manda un texto.
   ════════════════════════════════════════════════════════════════════════ */
.consulta-parte .parte-head{background:var(--pame-orange-10)}
.cns-campo{width:100%;font-family:var(--font-sans);font-size:var(--fs-14);line-height:var(--lh-normal);
  padding:var(--sp-3);border:var(--ctl-bd);border-radius:var(--ctl-r);background:#fff;color:var(--fg-1);
  resize:vertical}
.cns-campo:focus{outline:none;border-color:var(--pame-teal);box-shadow:0 0 0 3px rgba(0,168,193,.20)}

/* Botonera de adjuntos: grabar / subir un video / capturas */
.cns-acciones{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.cns-btn{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--ctl-h);width:auto;margin:0;
  padding:0 var(--sp-4);border:var(--ctl-bd);border-radius:var(--ctl-r);background:#fff;color:var(--fg-1);
  font-size:var(--fs-14);font-weight:700}
.cns-btn:hover{background:var(--pame-orange-10);border-color:var(--pame-orange);color:var(--pame-orange-600)}
.cns-btn[disabled]{opacity:.45}
.cns-btn[disabled]:hover{background:#fff;border-color:var(--pame-line);color:var(--fg-1)}

/* Mientras graba: punto rojo latiendo + cuenta regresiva + cortar */
/* Los bloques que se prenden y apagan con [hidden] llevan su guarda: una clase
   con `display` le gana a la regla del navegador y quedarían siempre a la vista. */
.cns-rec[hidden],.cns-prev[hidden],.cns-barra[hidden],.cns-lista[hidden]{display:none}
.cns-rec{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border:1px solid var(--pame-danger);border-radius:var(--r-md);
  background:#fff;font-size:var(--fs-14);font-weight:700;color:var(--fg-1)}
.cns-dot{width:var(--sp-3);height:var(--sp-3);flex:none;border-radius:50%;background:var(--pame-danger);
  animation:cns-late 1s var(--ease-in-out) infinite}
@keyframes cns-late{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .cns-dot{animation:none} }
.cns-reloj{font-variant-numeric:tabular-nums}
.cns-rec .grow{flex:1}

/* Lo que quedó grabado / las capturas elegidas, antes de mandar */
.cns-prev{margin-top:var(--sp-3)}
/* Es una revisión, no una función: alcanza con verlo y confirmar que quedó
   bien. Si ocupara media pantalla, el botón de enviar quedaría fuera de vista. */
.cns-video{width:100%;max-height:42vh;border-radius:var(--r-sm);background:#000;display:block}
.cns-thumbs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.cns-thumb{position:relative;width:var(--sp-9);height:var(--sp-9);border:1px solid var(--pame-line);
  border-radius:var(--r-sm);overflow:hidden;background:var(--pame-bg-soft)}
.cns-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cns-quitar{position:absolute;top:var(--sp-1);right:var(--sp-1);width:var(--sp-5);height:var(--sp-5);
  display:grid;place-items:center;padding:0;margin:0;border:none;border-radius:50%;
  background:rgba(2,51,77,.72);color:#fff;font-size:var(--fs-12);font-weight:800;line-height:1}
.cns-quitar:hover{background:var(--pame-danger)}

/* Zona para pegar/soltar capturas */
.cns-soltar{margin-top:var(--sp-3);padding:var(--sp-4);border:1px dashed var(--pame-line);
  border-radius:var(--r-md);background:var(--pame-bg-soft);color:var(--fg-3);font-size:var(--fs-12);
  text-align:center;transition:border-color var(--t-fast),background var(--t-fast)}
.cns-soltar.encima{border-color:var(--pame-teal);background:var(--pame-teal-10);color:var(--pame-teal-700)}

/* Barra de subida */
.cns-barra{height:var(--sp-2);margin-top:var(--sp-3);border-radius:var(--r-pill);
  background:var(--pame-blue-10);overflow:hidden}
.cns-barra > i{display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:var(--pame-teal);transition:width var(--t-base) var(--ease-out)}
.cns-msg{font-size:var(--fs-14);font-weight:700;margin:var(--sp-3) 0 0;min-height:var(--sp-4)}
.cns-msg.no{color:var(--pame-danger)}
.cns-msg.ok{color:var(--pame-success)}

/* Las consultas que ya mandó, con tu respuesta */
.cns-lista{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5);
  padding-top:var(--sp-5);border-top:1px solid var(--pame-line)}
.cns-lista > h4{margin:0;font-size:var(--fs-14)}
.cns-item{border:1px solid var(--pame-line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);background:#fff}
.cns-item-head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  font-size:var(--fs-12);color:var(--fg-3)}
.cns-item-head .grow{flex:1}
.cns-item p{margin:var(--sp-2) 0 0;font-size:var(--fs-14);color:var(--fg-1)}
.cns-estado{font-size:var(--fs-12);font-weight:700;padding:2px var(--sp-3);border-radius:var(--r-pill);
  background:var(--pame-blue-10);color:var(--pame-blue-700);white-space:nowrap}
.cns-estado.resp{background:var(--pame-teal-10);color:var(--pame-teal-700)}
.cns-resp{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--pame-teal);
  border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--pame-teal-10)}
.cns-resp b{display:block;font-size:var(--fs-12);color:var(--pame-teal-700);margin-bottom:var(--sp-1)}
.cns-resp p{margin:0;white-space:pre-wrap}

/* Cierre + navegación */
.clase-done{background:var(--pame-teal-10);border:1px solid var(--pame-teal);border-radius:var(--r-md);
  padding:18px 20px;margin:var(--sp-5) 0;color:var(--pame-teal-700);font-weight:700;font-size:var(--fs-16);
  display:flex;align-items:center;gap:10px}
.nav-clases{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--pame-line)}
.nav-btn{border:1px solid var(--pame-line);background:#fff;color:var(--fg-2);font-size:var(--fs-14);font-weight:700;
  padding:11px 18px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;white-space:nowrap}
.nav-btn:hover:not(.off){border-color:var(--pame-blue);color:var(--pame-blue)}
.nav-btn.next{background:var(--pame-blue);color:#fff;border-color:var(--pame-blue)}
.nav-btn.next:hover:not(.off){background:var(--pame-blue-700)}
.nav-btn.next.destacado{box-shadow:0 0 0 4px var(--pame-teal-10)}
.nav-btn.off{opacity:.4;pointer-events:none}

/* ---- Ver clase: sidebar como cajón en pantallas chicas ---- */
@media (max-width:900px){
  body[data-page="clase"]{--sub-w:0px}
  .clase-wrap{margin-left:0}
  .clase-side{position:fixed;left:0;top:0;bottom:0;z-index:70;width:84%;max-width:330px;
    padding-top:16px;border-right:none;box-shadow:var(--shadow-lg);max-height:none}
  .side-head .side-close{display:grid}
  .side-open-btn{display:inline-block}
  .side-backdrop{display:block;position:fixed;inset:0;background:rgba(20,30,50,.45);z-index:69}
  .side-closed .clase-side{display:none}
  .side-closed .side-backdrop{display:none}
}

/* ---- Responsive (celular) ---- */
@media (max-width:640px){
  .topbar{flex-wrap:wrap;gap:10px;padding:14px 18px}
  .topbar .brand{font-size:var(--fs-18)}
  .logo-img{height:26px}
  .topbar > div{flex-wrap:wrap;gap:8px}
  .ghost{padding:8px 12px;font-size:var(--fs-12)}
  .panel{padding:32px 18px}
  .panel h1{font-size:var(--fs-32)}
  .card{padding:32px 24px}
  .campo.doble{flex-direction:column;align-items:stretch}
  .campo.doble .tipo{max-width:none}
  .datos-card .fila{flex-direction:column}
  .datos-card .tipo{max-width:none}
  .leccion{flex-wrap:wrap}
  .leccion .ver{margin-left:34px}
  .mod-head{flex-wrap:wrap}
}

/* ---- Control de tamaño de texto (accesibilidad) ---- */
.size-ctl{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:2px;
  background:var(--pame-bg);border:1px solid var(--pame-line);border-radius:var(--r-pill);
  padding:4px;box-shadow:var(--shadow-md)}
.size-ctl button{background:none;border:none;color:var(--pame-blue);font-weight:700;cursor:pointer;
  width:34px;height:34px;border-radius:50%;font-size:15px;padding:0;line-height:1}
.size-ctl button:hover{background:var(--pame-blue-10)}
.size-ctl button:disabled{opacity:.35;cursor:default}
.size-ctl .lbl{font-size:12px;color:var(--fg-3);padding:0 4px;user-select:none}

/* ---- PaoBot: botón flotante transversal (shell) ---- */
.paobot-fab{position:fixed;right:20px;bottom:20px;z-index:80;width:60px;height:60px;border-radius:50%;
  background:var(--pame-blue);color:#fff;border:none;cursor:pointer;box-shadow:var(--shadow-lg);padding:0;
  display:grid;place-items:center;transition:transform var(--t-base) var(--ease-out),background var(--t-base)}
.paobot-fab:hover{background:var(--pame-blue-700);transform:translateY(-2px)}
.paobot-fab svg{width:30px;height:30px}
.paobot-fab .badge{position:absolute;top:-4px;right:-4px;background:var(--pame-orange);color:#fff;
  font-size:9px;font-weight:800;padding:3px 6px;border-radius:var(--r-pill);letter-spacing:.04em;text-transform:uppercase}
.paobot-panel{position:fixed;right:20px;bottom:92px;z-index:80;width:340px;max-width:calc(100vw - 40px);
  background:var(--pame-bg);border:1px solid var(--pame-line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  overflow:hidden;display:none}
.paobot-panel.open{display:block}
.pb-head{background:var(--pame-blue);color:#fff;padding:16px 18px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pb-head h4{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-20);color:#fff}
.pb-head p{margin:2px 0 0;font-size:var(--fs-12);color:#fff;opacity:.9}
.pb-close{background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;width:auto;padding:0;margin:0;opacity:.85}
.pb-close:hover{opacity:1;background:none}
.pb-body{padding:18px}
.pb-soon{background:var(--pame-orange-10);border:1px solid var(--pame-orange-30);border-left:4px solid var(--pame-orange);
  border-radius:var(--r-md);padding:14px 16px;font-size:var(--fs-14);color:var(--pame-ink-2);line-height:var(--lh-normal)}
.pb-input{display:flex;gap:8px;margin-top:14px}
.pb-input input{flex:1;font-size:var(--fs-14);padding:10px 12px;border:1px solid var(--pame-line);border-radius:var(--r-sm);background:#fff;color:var(--fg-1)}
.pb-input button{width:auto;padding:10px 16px;margin:0}
.pb-input input:disabled,.pb-input button:disabled{opacity:.55;cursor:not-allowed}

/* --- PaoBot en modo chat (.vivo). El cartel de "pronto" sigue usando .pb-soon. --- */
.paobot-panel.vivo .pb-body{display:flex;flex-direction:column;height:min(60vh,460px)}
.pb-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-3);padding-right:var(--sp-1)}
.pb-bienvenida{background:var(--pame-blue-10);border-radius:var(--r-md);padding:var(--sp-3);
  font-size:var(--fs-12);color:var(--pame-ink-2);line-height:var(--lh-normal)}
/* El alumno tiene que saber que Pao lee esto, y saberlo ANTES de escribir. */
.pb-aviso{display:block;margin-top:var(--sp-2);font-size:var(--fs-12);color:var(--fg-3)}
.pb-msg{max-width:85%;padding:var(--sp-3);border-radius:var(--r-md);font-size:var(--fs-14);
  line-height:var(--lh-normal);word-wrap:break-word}
.pb-msg--yo{align-self:flex-end;background:var(--pame-blue);color:#fff}
.pb-msg--bot{align-self:flex-start;background:var(--pame-bg-soft);color:var(--pame-ink);
  border:1px solid var(--pame-line)}
.pb-err{background:var(--pame-orange-10);border-color:var(--pame-orange-30);color:var(--pame-ink-2)}
/* La cita "Clase 3 · 24:29" que devuelve el bot. Cuando reconocemos la clase es un
   link que abre el video en ese segundo; si no, queda como texto destacado. */
.pb-cita{display:inline-block;background:var(--pame-teal-20);color:var(--pame-teal-700);
  border-radius:var(--r-pill);padding:0 var(--sp-2);font-size:var(--fs-12);font-weight:600;white-space:nowrap}
a.pb-cita{text-decoration:none;cursor:pointer}
a.pb-cita:hover,a.pb-cita:focus-visible{background:var(--pame-teal-30);color:var(--pame-teal-700)}
/* Los tres puntitos mientras piensa */
.pb-pensando{display:flex;gap:var(--sp-1);align-items:center}
.pb-pensando span{width:var(--sp-2);height:var(--sp-2);border-radius:50%;background:var(--pame-ink-3);
  animation:pb-latido 1.2s infinite ease-in-out}
.pb-pensando span:nth-child(2){animation-delay:.15s}
.pb-pensando span:nth-child(3){animation-delay:.3s}
@keyframes pb-latido{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .pb-pensando span{animation:none;opacity:.5} }

@media (max-width:640px){ .paobot-panel{right:12px;bottom:84px} .paobot-fab{right:14px;bottom:14px} }

/* ============================================================
   PANEL ADMIN — pestañas + editores (Contenido / Avisos / Alumnos / Config)
   ============================================================ */
/* (9) Layout admin estilo Bunny: sidebar azul oscuro con íconos + contenido */
/* Admin dentro del shell: rail principal + menú admin FIJO (como en clase) + contenido */
body[data-page="admin"]{--sub-w:230px}
body[data-page="admin"] .panel.ancho{margin-left:calc(var(--side-w) + var(--sub-w));max-width:none;transition:margin-left var(--t-base)}
.adm-layout{display:flex;gap:var(--sp-6);align-items:flex-start;margin-top:var(--sp-5)}
.adm-content{flex:1;min-width:0}
/* Menú admin en CLARO y FIJO a la derecha del rail (panel al ras, como el de clase) */
.admin-tabs.adm-sidebar{display:flex;flex-direction:column;gap:2px;position:fixed;top:0;left:var(--side-w);bottom:0;width:var(--sub-w);z-index:54;
  background:#fff;border:none;border-right:1px solid var(--pame-line);border-radius:0;padding:84px 10px 16px;overflow-y:auto;box-shadow:none;transition:left var(--t-base)}
.admin-tabs.adm-sidebar .admin-tab{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:none;border-radius:var(--r-md);color:var(--fg-2);font-size:var(--fs-14);
  font-weight:600;padding:11px 14px;margin:0;transition:background var(--t-fast),color var(--t-fast)}
.admin-tabs.adm-sidebar .admin-tab svg{width:20px;height:20px;flex:none;opacity:.85}
.admin-tabs.adm-sidebar .admin-tab:hover{background:var(--pame-blue-10);color:var(--pame-blue-700)}
.admin-tabs.adm-sidebar .admin-tab.on{background:var(--pame-blue-900);color:#fff}
.admin-tabs.adm-sidebar .admin-tab.on svg{opacity:1}
/* Contador de pendientes en la pestaña (hoy: consultas sin responder). */
.adm-pip{margin-left:auto;flex:none;min-width:var(--sp-5);height:var(--sp-5);padding:0 var(--sp-2);
  display:grid;place-items:center;border-radius:var(--r-pill);background:var(--pame-orange);
  color:#fff;font-size:var(--fs-12);font-weight:800;font-style:normal;line-height:1}
.adm-pip[hidden]{display:none}
.admin-sec{display:none}
.admin-sec.on{display:block}
@media(max-width:820px){
  body[data-page="admin"]{--sub-w:0px}
  body[data-page="admin"] .panel.ancho{margin-left:0}
  .adm-layout{flex-direction:column}
  .admin-tabs.adm-sidebar{flex-direction:row;flex-wrap:wrap;width:100%;box-sizing:border-box;position:static;top:auto;padding:8px;border-right:none;border:1px solid var(--pame-line);border-radius:var(--r-lg)}
  .admin-tabs.adm-sidebar .admin-tab{width:auto}
  .admin-tabs.adm-sidebar .admin-tab span{display:none}
  .admin-tabs.adm-sidebar .admin-tab svg{width:22px;height:22px}
}
.adm-msg{font-size:var(--fs-12);margin-left:8px}
.adm-msg.ok{color:var(--pame-teal-700)}
.adm-msg.no{color:var(--pame-danger)}

/* Barra de acciones + botones semánticos reutilizables */
.adm-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:var(--sp-5)}
.adm-bar .grow{flex:1}
/* Alto de todos los botones y selects = --ctl-h (ui.css), para que apoyen
   en la misma línea base que los inputs cuando comparten una fila. */
.btn-add{background:var(--pame-teal);color:#fff;width:auto;padding:4px 14px;margin:0;font-size:var(--fs-12);
  min-height:var(--ctl-h);border-radius:var(--ctl-r)}
.btn-add:hover{background:var(--pame-teal-700)}
.btn-del{background:none;border:var(--ctl-bd);color:var(--pame-danger);width:auto;padding:4px 14px;
  margin:0;font-size:var(--fs-12);min-height:var(--ctl-h);border-radius:var(--ctl-r)}
.btn-del:hover{border-color:var(--pame-danger);background:#fdecea}
.btn-mini{background:#fff;border:var(--ctl-bd);color:var(--pame-blue);width:auto;padding:4px 14px;
  margin:0;font-size:var(--fs-12);min-height:var(--ctl-h);border-radius:var(--ctl-r)}
.btn-mini:hover{border-color:var(--pame-blue);background:var(--pame-blue-10)}
/* Botón chico que además es un interruptor (Cert: Sí/No, Destacada: Sí/No).
   `.on` = la opción está activa. Antes esto se pintaba con un style="…" armado
   en el JS; ahora es una clase. */
.btn-mini.on{background:var(--pame-teal-10);color:var(--pame-teal-700);border-color:var(--pame-teal-30)}
.btn-mini.on:hover{background:var(--pame-teal-20);border-color:var(--pame-teal)}
/* Botón de solo ícono: el ✎ de editar, en cualquier fila o tabla. La palabra
   "Editar" repetida por fila es ruido; lo que dice va en title + aria-label
   (el title lo muestra el navegador al pasar el mouse, el aria lo lee el lector
   de pantalla). Cuadrado, del mismo alto que el resto de los controles. */
.btn-ico{padding:4px;min-width:var(--ctl-h);font-size:var(--fs-14);line-height:1}
.adm-select{font-family:var(--font-sans);font-size:var(--fs-14);min-height:var(--ctl-h);
  padding:0 var(--ctl-px);border:var(--ctl-bd);
  border-radius:var(--ctl-r);background:#fff;color:var(--fg-1)}

/* Tarjetas de módulo / clase en el árbol de contenido */
.adm-mod{border:1px solid var(--pame-line);border-radius:var(--r-md);background:#fff;margin-bottom:var(--sp-4);overflow:hidden}
.adm-mod-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--pame-bg-soft);
  border-bottom:1px solid var(--pame-line);flex-wrap:wrap}
.adm-mod-head .t{font-weight:700;font-size:var(--fs-16);color:var(--fg-1);flex:1;min-width:120px}
.adm-mod-head .drip{font-size:var(--fs-12);color:var(--pame-blue-700);background:var(--pame-blue-10);
  padding:3px 10px;border-radius:var(--r-pill);font-weight:700}
/* Módulo marcado como sección destacada (va arriba de todo en la vista del alumno) */
.adm-mod-head .dest-chip{background:var(--pame-orange-20);color:var(--pame-orange-600);
  border:1px solid var(--pame-orange-30)}
/* Contraer/expandir módulos en la visión general del admin */
.adm-fold{background:none;border:1px solid var(--pame-line);color:var(--fg-2);width:26px;height:26px;padding:0;
  border-radius:var(--r-sm);cursor:pointer;font-size:11px;line-height:1;flex:none;
  transition:transform var(--t-fast) var(--ease-out)}
.adm-fold:hover{border-color:var(--pame-blue);color:var(--pame-blue);background:var(--pame-blue-10)}
.adm-mod.plegado .adm-fold{transform:rotate(-90deg)}
.adm-mod.plegado .adm-clase-list{display:none}
.adm-mod.plegado .adm-mod-head{border-bottom:none}
.adm-mod-thumb{width:52px;height:30px;object-fit:cover;border-radius:4px;border:1px solid var(--pame-line);flex:none}
.adm-mod-n{font-size:var(--fs-12);color:var(--fg-3);font-weight:700;flex:none}
.mods-bar{margin-bottom:var(--sp-3)}

.adm-clase-list{list-style:none;margin:0;padding:6px}
.adm-clase{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);flex-wrap:wrap}
.adm-clase + .adm-clase{border-top:1px solid var(--pame-line)}
.adm-clase .n{font-size:var(--fs-12);color:var(--fg-3);font-weight:700;flex:none;width:22px}
.adm-clase .t{flex:1 1 180px;min-width:150px;font-size:var(--fs-14);color:var(--fg-1);font-weight:600}
.adm-clase .badges{display:flex;gap:5px;flex-wrap:wrap;flex:none;margin-left:auto}
.adm-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;
  border-radius:var(--r-pill);background:var(--pame-blue-10);color:var(--pame-blue-700)}
.adm-badge.sim{background:var(--pame-orange-10);color:var(--pame-orange-600)}
.adm-badge.quiz{background:var(--pame-teal-10);color:var(--pame-teal-700)}
.adm-badge.off{background:var(--pame-bg-soft);color:var(--fg-3)}
/* Etiquetas de contenido: presente = verde, ausente = tachado */
.adm-badge.tag-on{background:rgba(46,154,107,.14);color:var(--pame-success)}
.adm-badge.tag-off{background:transparent;color:var(--fg-3);border:1px solid var(--pame-line);text-decoration:line-through;opacity:.7}
.adm-badge.tag-drip{background:var(--pame-orange-10);color:var(--pame-orange-600)}
.adm-empty{color:var(--fg-3);font-size:var(--fs-14);padding:14px;text-align:center}

/* Editor (clase / aviso / config) — bloque de formulario */
.adm-editor{border:1px solid var(--pame-line);border-radius:var(--r-md);background:#fff;padding:var(--sp-5);margin-top:var(--sp-4)}
.adm-editor h3{margin:0 0 4px;font-size:var(--fs-20)}
.adm-editor .sub{color:var(--fg-3);font-size:var(--fs-14);margin:0 0 var(--sp-4)}
.adm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.adm-grid .full{grid-column:1 / -1}
.adm-field{display:flex;flex-direction:column;gap:var(--gap-fld);margin-bottom:14px}
/* La etiqueta de un campo va en versalitas; la de un check no: ahí el texto es la
   opción que se lee al lado de la casilla, no el rótulo de un control de abajo. */
.adm-field > label:not(.adm-check){font-size:var(--fs-12);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--fg-2)}
/* Fuera de acá quedan los controles que no son "una caja de ancho completo":
   - el selector de color, que estila `.ui-color` (ui.css §4) con su propio ancho;
   - las casillas y los radios, que miden 18px y los estila `.adm-check input`.
   Sin estas exclusiones el width:100% + min-height de acá los estira a lo ancho del
   campo y empuja el texto de la opción fuera de la pantalla. */
.adm-field input:not([type=color]):not([type=checkbox]):not([type=radio]),.adm-field textarea,.adm-field select{font-family:var(--font-sans);font-size:var(--fs-14);
  padding:8px var(--ctl-px);border:var(--ctl-bd);border-radius:var(--ctl-r);background:#fff;color:var(--fg-1);width:100%}
.adm-field input:not([type=color]):not([type=checkbox]):not([type=radio]),.adm-field select{min-height:var(--ctl-h);padding-top:0;padding-bottom:0}
.adm-field input.err,.adm-field select.err,.adm-field textarea.err{border-color:var(--pame-danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--pame-danger) 18%,transparent)}
.adm-acciones{display:flex;gap:8px;justify-content:flex-end;white-space:nowrap}
.adm-field textarea{resize:vertical;min-height:90px;line-height:var(--lh-normal)}
.adm-field textarea.tall{min-height:180px;font-family:var(--font-mono);font-size:var(--fs-14)}
.adm-field .nota{font-size:11px;color:var(--fg-3);font-weight:400;text-transform:none;letter-spacing:0}
/* La casilla, la opción y su aclaración van en una línea. Si la aclaración es larga y
   no entra, baja entera al renglón siguiente (flex-wrap) en vez de partir en dos el
   nombre de la opción, que es lo que se lee primero. */
.adm-check{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:9px;font-size:var(--fs-14);color:var(--fg-1);
  font-weight:600;text-transform:none;letter-spacing:0;cursor:pointer}
.adm-check .nota{min-width:0}
.adm-check h4{text-transform:none}
/* Dentro de un .adm-field el check ya viene espaciado por el grid del formulario:
   sin esto arrastra el margen de `label` y queda desalineado con la fila de al lado. */
.adm-field > .adm-check{margin:0}
.adm-check input{width:18px;height:18px;flex:none;accent-color:var(--pame-teal);cursor:pointer}
.adm-sub-block{border:1px dashed var(--pame-line);border-radius:var(--r-md);padding:var(--sp-4);margin-top:var(--sp-4);background:var(--pame-bg-soft)}
.adm-sub-block > .bh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:var(--sp-3)}
.adm-sub-block h4{margin:0;font-size:var(--fs-16)}
.adm-actions{display:flex;align-items:center;gap:12px;margin-top:var(--sp-5);flex-wrap:wrap}
.adm-actions button{width:auto;padding:12px 22px;margin:0}
.adm-actions .grow{flex:1}

/* Quiz editor */
.adm-preg{border:1px solid var(--pame-line);border-radius:var(--r-sm);background:#fff;padding:12px 14px;margin-bottom:12px}
.adm-preg-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.adm-preg-head .qn{font-weight:700;color:var(--fg-3);font-size:var(--fs-12);flex:none}
.adm-preg-head input{flex:1}
/* "Respuesta múltiple": va entre el enunciado y las opciones, sangrado como ellas */
.p-multi-lab{margin:0 0 var(--sp-2);padding-left:var(--sp-1)}
.adm-op{display:flex;align-items:center;gap:9px;margin:6px 0}
.adm-op input[type=radio]{width:18px;height:18px;flex:none;accent-color:var(--pame-teal)}
.adm-op input[type=text]{flex:1}
.adm-op .ok-lab{font-size:11px;color:var(--pame-teal-700);font-weight:700;flex:none}

/* Materiales / inscripciones / notas — filas simples */
.adm-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.adm-row input:not([type=checkbox]):not([type=radio]):not([type=color]),.adm-row select{
  font-size:var(--fs-14);min-height:var(--ctl-h);height:var(--ctl-h);
  padding:0 var(--ctl-px);border:var(--ctl-bd);
  border-radius:var(--r-sm);background:#fff;color:var(--fg-1)}
.adm-row .flex1{flex:1;min-width:120px}

/* Drawer de gestión de alumno */
.adm-drawer-bg{position:fixed;inset:0;background:rgba(2,51,77,.34);z-index:90;display:none}
.adm-drawer-bg.open{display:block}
/* Modal "Duplicar clase" */
.dup-ov{position:fixed;inset:0;background:rgba(2,51,77,.34);z-index:95;display:none;align-items:flex-start;justify-content:center;padding:56px 16px;overflow:auto}
.dup-ov.open{display:flex}
.dup-card{background:var(--pame-bg);border-radius:16px;padding:20px 24px 22px;width:520px;max-width:100%;box-shadow:var(--shadow-lg)}
.dup-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dup-head h3{margin:0;font-size:var(--fs-20)}
.dup-x{background:none;border:0;font-size:18px;line-height:1;cursor:pointer;color:var(--fg-3);padding:4px}
.dup-card .sub{margin:4px 0 14px}
/* Tilde "Avisarle por mail" del diálogo de bloqueo de acceso */
.blq-mail{margin-top:var(--sp-4);font-weight:700;color:var(--fg-1)}
/* Recorte manual de imágenes: marco del aspecto final + arrastre y zoom */
.crop-ov{position:fixed;inset:0;background:rgba(2,51,77,.5);z-index:120;display:none;align-items:center;justify-content:center;padding:24px 16px;overflow:auto}
.crop-ov.open{display:flex}
.crop-card{width:680px}
.crop-frame{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--pame-blue-900);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);cursor:grab;touch-action:none}
.crop-frame:active{cursor:grabbing}
.crop-frame img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;user-select:none;-webkit-user-drag:none;display:block}
.crop-zoom{display:flex;align-items:center;gap:12px;margin-top:14px}
.crop-zoom input[type=range]{flex:1;accent-color:var(--pame-blue);cursor:pointer}
.crop-zoom button{flex:none;margin:0}
.crop-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.crop-actions button{width:auto;margin:0;padding:11px 20px}
.imp-tree{max-height:320px;overflow:auto;border:1px solid var(--pame-line);border-radius:10px;padding:10px 12px;margin:4px 0 14px}
.imp-mod{padding:6px 0}
.imp-mod+.imp-mod{border-top:1px solid var(--pame-line)}
.imp-modlbl{display:flex;align-items:center;gap:7px;cursor:pointer}
.imp-mod ul{list-style:none;margin:5px 0 0 24px;padding:0}
.imp-mod li{padding:2px 0}
.imp-lec{display:flex;align-items:center;gap:7px;cursor:pointer}
.imp-lec.is-incl{opacity:.5}
.imp-tree input[type=checkbox]{width:16px;height:16px;flex:none}
/* Ancho: la ficha del alumno tiene tablas de 4 columnas (formación, grupo, acceso,
   motivo del bloqueo). Con 520px la última quedaba cortada contra el borde.
   `min()` para que en una pantalla angosta no se pase de largo. */
.adm-drawer{position:fixed;top:0;right:0;height:100vh;width:min(760px,92vw);max-width:100vw;background:var(--pame-bg);
  z-index:91;box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform var(--t-base) var(--ease-out);
  overflow:auto;display:flex;flex-direction:column}
.adm-drawer.open{transform:translateX(0)}
.adm-drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:18px 22px;
  border-bottom:1px solid var(--pame-line);position:sticky;top:0;background:var(--pame-bg);z-index:2}
.adm-drawer-head h3{margin:0;font-size:var(--fs-20)}
.adm-drawer-head .who{font-size:var(--fs-12);color:var(--fg-3);margin-top:2px}
.adm-drawer-body{padding:20px 22px}
.adm-block{margin-bottom:var(--sp-6)}
.adm-block > h4{margin:0 0 10px;font-size:var(--fs-16);display:flex;align-items:center;gap:8px}
.adm-nota{background:var(--pame-bg-soft);border:1px solid var(--pame-line);border-left:3px solid var(--pame-teal);
  border-radius:var(--r-sm);padding:12px 14px;margin-bottom:10px}
.adm-nota .cuerpo{font-size:var(--fs-14);color:var(--fg-1);line-height:var(--lh-normal);white-space:pre-wrap;word-break:break-word}
.adm-nota .meta{font-size:11px;color:var(--fg-3);margin-top:9px;padding-top:9px;border-top:1px solid var(--pame-line);
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.adm-nota .meta .n-del{background:none;border:none;color:var(--pame-danger);font-size:11px;font-weight:700;
  cursor:pointer;padding:0;margin:0;width:auto}
.adm-nota .meta .n-del:hover{text-decoration:underline;background:none}

/* Manija de puntitos para arrastrar y reordenar módulos/clases */
.drag-grip{flex:none;display:inline-grid;place-items:center;width:20px;height:26px;color:var(--fg-3);
  cursor:grab;border-radius:6px;transition:background var(--t-fast),color var(--t-fast)}
.drag-grip:hover{background:var(--pame-blue-10);color:var(--pame-blue)}
.drag-grip:active{cursor:grabbing}
.drag-grip svg{fill:currentColor}
.adm-mod.dragging,.adm-clase.dragging{opacity:.45}
.adm-clase.dragging{background:var(--pame-blue-10)}
.adm-mod.dragging{outline:2px dashed var(--pame-blue-40);outline-offset:2px}
/* Al arrastrar una clase, cada módulo se marca como destino posible */
.adm-clase-list.drop-zone{min-height:42px;border-radius:var(--r-sm);
  outline:1px dashed var(--pame-blue-40);outline-offset:-3px}

/* Grilla de secciones del simulador (selector de ejercicio) */
.adm-secs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 14px}
.adm-secs .adm-check{font-weight:500;font-size:var(--fs-14)}
/* Acceso a cursos en la ficha del alumno. Un solo grid (.ui-rows), así el
   selector de grupo y el de acceso quedan alineados entre todas las filas. */
.insc-rows{--ui-cols:minmax(120px,1.3fr) minmax(120px,1fr) minmax(130px,1fr) minmax(140px,1.2fr);
  --ui-cols-mob:1fr 1fr}
.insc-rows .ui-row > .cn{justify-self:stretch;font-weight:700;align-self:center;
  min-width:0;overflow-wrap:anywhere}
.insc-rows .cn small{display:block;font-weight:500;font-size:var(--fs-12);color:var(--fg-3)}
/* Bloqueado: la fila se marca sola, para verlo sin leer el selector. */
.insc-rows .ui-row.bloqueada > .cn{color:var(--pame-danger)}
.insc-rows .ui-row.bloqueada .i-est{background:var(--pame-bg-soft);font-weight:700}
.insc-rows .i-motivo:disabled{opacity:.45}
@media (max-width:720px){
  .insc-rows > .ui-head{display:none}
  .insc-rows .ui-row > .cn,.insc-rows .i-motivo{grid-column:1/-1}
}
.adm-cert{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--pame-line);font-size:var(--fs-14)}
.adm-cert code{font-size:11px;color:var(--fg-2)}
@media (max-width:720px){ .adm-grid{grid-template-columns:1fr} .adm-drawer{width:100vw} }

/* ---- Simulador embebido en la clase (parte "simulación") ---- */
/* Simulador BM: se abre en pestaña nueva (a pantalla completa), no embebido. */
.sim-open{margin:14px 0 4px}
.btn-sim-open{background:var(--pame-blue);color:#fff;border:none;border-radius:var(--r-md);padding:12px 22px;
  font-size:var(--fs-16);font-weight:700;cursor:pointer;width:auto}
.btn-sim-open:hover{background:var(--pame-blue-700)}
.sim-prog{font-size:var(--fs-14);font-weight:600;color:var(--fg-3);margin:10px 0 0}

/* Link discreto tipo botón (p. ej. "↩ deshacer") */
.mini-link{background:none;border:none;color:var(--pame-blue);font-size:var(--fs-12);font-weight:700;
  cursor:pointer;padding:6px 4px;margin:0;width:auto}
.mini-link:hover{background:none;text-decoration:underline}

/* ---- Programas (agrupan cursos en el dashboard) ---- */
.prog-tit{font-family:var(--font-display);font-weight:400;font-size:var(--fs-20);color:var(--pame-blue);
  margin:var(--sp-6) 0 var(--sp-2)}
.prog-tit:first-child{margin-top:0}

/* Gestor de programas en el panel admin (Contenido) */
.prog-mgr{margin-bottom:var(--sp-5);padding:16px 18px;background:#fff;border:1px solid var(--pame-line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-xs)}
.prog-mgr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.prog-mgr-tit{display:flex;flex-direction:column;gap:3px;max-width:640px}
.prog-mgr-tit b{font-size:var(--fs-16);color:var(--fg-1)}
.prog-mgr-tit .nota{font-weight:400}
.prog-list{display:flex;flex-direction:column;gap:8px}
.prog-item{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--pame-bg-soft);
  border:1px solid var(--pame-line);border-radius:var(--r-md);flex-wrap:wrap}
.prog-item-name{font-weight:700;color:var(--fg-1);font-size:var(--fs-14)}
.prog-item-count{flex:1;font-weight:400;min-width:60px}

/* Celda de progreso enriquecida en la tabla de alumnos */
.prog-cell{display:flex;flex-direction:column;gap:4px;min-width:150px}
.prog-top{display:flex;align-items:center;gap:8px}
.prog-x{font-size:var(--fs-12);color:var(--fg-3);font-weight:600}
.prog-cur{font-size:var(--fs-12);color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
table.alumnos td.desde{font-size:var(--fs-12);color:var(--fg-2);white-space:nowrap}

/* ============================================================
   AJUSTES 2026-08-12 — header fijo, volver notorio, herramientas,
   notas del alumno, ventas
   ============================================================ */

/* ── (6+8) Header principal FIJO en todo el sistema ── */
.topbar{position:sticky;top:0;z-index:60;box-shadow:var(--shadow-xs)}
/* En fullscreen (video) el contenedor se pone por encima; el sticky no molesta. */

/* ── (1) Botón "Volver" notorio (antes era un link tenue) ── */
.volver{display:inline-flex;align-items:center;gap:8px;background:var(--pame-blue-10);
  border:1.5px solid var(--pame-blue-20);color:var(--pame-blue-700);font-size:var(--fs-14);
  font-weight:700;text-decoration:none;padding:9px 16px;border-radius:var(--r-pill);
  margin-bottom:var(--sp-4);transition:all var(--t-base);box-shadow:var(--shadow-xs)}
.volver::before{content:"←";font-size:16px;font-weight:800;line-height:1}
.volver:hover{background:var(--pame-blue);border-color:var(--pame-blue);color:#fff;
  transform:translateX(-2px);box-shadow:var(--shadow-sm)}
/* Ocultamos la flecha textual vieja si el texto ya la traía (se agrega vía ::before) */

/* ── (6+8) Herramientas flotantes: calculadora + timer ── */
.tool-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:none;
  border:1px solid var(--pame-line);color:var(--fg-2);padding:9px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-14);font-weight:600;cursor:pointer;transition:all var(--t-base)}
.tool-btn:hover{border-color:var(--pame-blue);color:var(--pame-blue);background:var(--pame-blue-10)}
.tool-btn svg{width:18px;height:18px;display:block}
.tool-pop{position:fixed;z-index:120;background:#fff;border:1px solid var(--pame-line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:14px;width:250px;display:none}
.tool-pop.open{display:block}
.tool-pop h4{margin:0 0 10px;font-size:var(--fs-14);color:var(--fg-1);display:flex;
  justify-content:space-between;align-items:center}
.tool-pop .tp-close{background:none;border:none;font-size:18px;color:var(--fg-3);cursor:pointer;width:auto;padding:0}
/* Calculadora */
.calc-scr{width:100%;box-sizing:border-box;text-align:right;font-family:var(--font-mono);
  font-size:20px;padding:10px 12px;border:1px solid var(--pame-line);border-radius:var(--r-sm);
  background:var(--pame-bg-soft);color:var(--fg-1);margin-bottom:10px;min-height:24px;overflow:hidden}
.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.calc-grid button{padding:11px 0;border:1px solid var(--pame-line);background:#fff;border-radius:var(--r-sm);
  font-size:var(--fs-16);font-weight:600;cursor:pointer;color:var(--fg-1);transition:background var(--t-fast)}
.calc-grid button:hover{background:var(--pame-blue-10)}
.calc-grid button.op{background:var(--pame-blue-10);color:var(--pame-blue-700)}
.calc-grid button.eq{background:var(--pame-blue);color:#fff;grid-column:span 2}
.calc-grid button.clr{background:var(--pame-orange-10);color:var(--pame-orange-600)}
/* Timer */
.timer-disp{text-align:center;font-family:var(--font-mono);font-size:38px;font-weight:700;color:var(--fg-1);
  margin:6px 0 12px;letter-spacing:1px}
.timer-presets{display:flex;gap:6px;justify-content:center;margin-bottom:10px;flex-wrap:wrap}
.timer-presets button{padding:6px 10px;border:1px solid var(--pame-line);background:#fff;border-radius:var(--r-pill);
  font-size:var(--fs-12);font-weight:600;cursor:pointer;color:var(--fg-2)}
.timer-presets button:hover{border-color:var(--pame-blue);color:var(--pame-blue)}
.timer-ctrls{display:flex;gap:6px}
.timer-ctrls button{flex:1;padding:9px 0;border:none;border-radius:var(--r-sm);font-size:var(--fs-14);
  font-weight:700;cursor:pointer}
.timer-ctrls .go{background:var(--pame-success);color:#fff}
.timer-ctrls .rst{background:var(--pame-bg-soft);color:var(--fg-2);border:1px solid var(--pame-line)}
.timer-disp.done{color:var(--pame-danger);animation:tblink 1s steps(2,start) infinite}
@keyframes tblink{50%{opacity:.35}}

/* ── (7) Notas del alumno en el curso ── */
.notas-alumno{background:#fff;border:1px solid var(--pame-line);border-radius:var(--r-md);
  padding:18px 20px;margin-top:var(--sp-5);box-shadow:var(--shadow-xs)}
.notas-alumno h3{font-size:var(--fs-18);margin:0 0 4px;display:flex;align-items:center;gap:8px}
.notas-alumno .na-sub{font-size:var(--fs-12);color:var(--fg-3);margin:0 0 12px}
.notas-alumno textarea{width:100%;box-sizing:border-box;min-height:120px;resize:vertical;
  border:1px solid var(--pame-line);border-radius:var(--r-sm);padding:12px 14px;font-family:var(--font-sans);
  font-size:var(--fs-14);line-height:1.6;color:var(--fg-1)}
.notas-alumno textarea:focus{outline:none;border-color:var(--pame-blue);box-shadow:0 0 0 3px var(--pame-blue-10)}
.na-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.na-count{font-size:var(--fs-12);color:var(--fg-3)}
.na-count.over{color:var(--pame-danger);font-weight:700}
.na-save{background:var(--pame-blue);color:#fff;border:none;border-radius:var(--r-sm);padding:9px 18px;
  font-size:var(--fs-14);font-weight:700;cursor:pointer}
.na-save:disabled{opacity:.55;cursor:default}
.na-msg{font-size:var(--fs-12);font-weight:600;color:var(--pame-success)}

/* ── (3) Recuperar contraseña / auth extra ── */
.auth-note{font-size:var(--fs-12);color:var(--fg-3);text-align:center;margin-top:10px;line-height:1.5}
/* Pie de la landing de la plataforma (plataforma.html): los accesos van uno debajo del
   otro. `.link` es inline-block, así que dos seguidos caen en la misma línea y se leen
   como una sola frase — el acceso al panel quedaba invisible. El margen propio de `.link`
   se anula porque acá el espaciado lo pone el gap. */
.pf-pie{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);margin-top:var(--sp-5)}
.pf-pie .link{margin-top:0}
/* Logo imagen en el login */
.logo-img-wrap{margin-bottom:var(--sp-5);text-align:center}
.logo-img-wrap .logo-img{height:64px;width:auto;display:inline-block}

/* ── (12) Ventas ── */
.ventas-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:var(--sp-5)}
@media(max-width:720px){.ventas-cards{grid-template-columns:repeat(2,1fr)}}
.ventas-cards .vc{background:#fff;border:1px solid var(--pame-line);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.ventas-cards .vc-n{font-size:var(--fs-24);font-weight:800;color:var(--fg-1);font-family:var(--font-sans)}
.ventas-cards .vc.money .vc-n{font-size:var(--fs-18);color:var(--pame-success)}
.ventas-cards .vc-l{font-size:var(--fs-12);color:var(--fg-3);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.pago-pill{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-12);font-weight:700;white-space:nowrap}
.pago-pill.pagado{background:#E4F5EC;color:#1E7A4E}
.pago-pill.pendiente{background:var(--pame-orange-10);color:var(--pame-orange-600)}
.pago-pill.rechazado{background:#FBE8E6;color:var(--pame-danger)}
/* Alumno con el acceso cortado a alguna formación (ver db/bloqueo-acceso.sql) */
.pago-pill.bloqueado{background:#FBE8E6;color:var(--pame-danger);margin-top:var(--sp-1)}

/* ── (11) Filtros de alumnos ── */
.alumnos-filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.alumnos-filtros .adm-select,.alumnos-filtros input{width:auto}

/* ── (2) Selector de varios cursos en el editor de avisos ── */
.av-multi-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 14px;
  border:1px solid var(--pame-line);border-radius:var(--r-sm);padding:12px 14px;background:var(--pame-bg-soft);max-height:220px;overflow:auto}
.av-multi-item{display:flex;align-items:center;gap:8px;font-size:var(--fs-14);color:var(--fg-2);cursor:pointer}
.av-multi-item input{width:16px;height:16px;accent-color:var(--pame-blue);flex:none}

/* ============================================================
   DASHBOARD rediseñado (2026-08-13) — sidebar + stats + cards
   ============================================================ */
.dash-body-page{background:var(--pame-bg-soft)}
.topbar .ghost{display:inline-flex;align-items:center;gap:7px}
.topbar .ghost svg{width:16px;height:16px}

/* ── Campanita de novedades (la monta notificaciones.js en la barra) ────────
   Es lo único de la barra que cambia solo, así que va primera y con el punto
   naranja de la marca: se busca siempre en el mismo lugar. */
.notif{position:relative;display:flex}
.notif-btn{position:relative;padding:9px 11px}
.notif-btn svg{width:18px;height:18px}
.notif-pip{position:absolute;top:2px;right:2px;min-width:var(--sp-4);height:var(--sp-4);
  padding:0 var(--sp-1);display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--pame-orange);color:#fff;font-size:11px;font-weight:800;font-style:normal;line-height:1;
  border:2px solid var(--pame-bg)}
.notif-pip[hidden]{display:none}

.notif-panel{position:absolute;top:calc(100% + var(--sp-2));right:0;z-index:80;
  width:min(360px, calc(100vw - var(--sp-6)));max-height:min(70vh, 460px);overflow-y:auto;
  background:var(--pame-bg);border:1px solid var(--pame-line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:var(--sp-2)}
.notif-panel[hidden]{display:none}
.notif-head{font-size:var(--fs-12);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  color:var(--fg-3);padding:var(--sp-2) var(--sp-3)}
.notif-item{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3);border-radius:var(--r-sm);
  text-decoration:none;color:var(--fg-1);transition:background var(--t-fast)}
a.notif-item:hover{background:var(--pame-blue-10)}
/* La no leída se marca con una barrita, no con fondo: el fondo se pisaba con el
   del hover y no se distinguía cuál era cuál. */
.notif-item.nueva{border-left:3px solid var(--pame-orange);padding-left:calc(var(--sp-3) - 3px)}
.notif-t{font-size:var(--fs-14);font-weight:700;line-height:var(--lh-snug)}
.notif-c{font-size:var(--fs-12);color:var(--fg-2);line-height:var(--lh-normal);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-f{font-size:11px;color:var(--fg-3)}
.notif-vacio{margin:0;padding:var(--sp-3);font-size:var(--fs-12);color:var(--fg-3);line-height:var(--lh-normal)}

/* En pantalla chica la campanita queda a la IZQUIERDA de la barra, así que un
   panel colgado de su borde derecho se sale de la pantalla por el costado.
   Soltando el `position` del botón, el panel se ancla a la barra —que ya es
   sticky, o sea posicionada— y se estira de lado a lado, debajo de ella. */
@media (max-width:720px){
  .notif{position:static}
  .notif-panel{left:var(--sp-3);right:var(--sp-3);width:auto}
}
:root{--side-w:295px;--sub-w:0px}
body.side-collapsed{--side-w:74px}
.tb-left{display:flex;align-items:center;gap:10px}
.dash-menu-btn{display:none;background:none;border:1px solid var(--pame-line);border-radius:var(--r-sm);color:var(--fg-2);width:38px;height:38px;place-items:center;cursor:pointer;padding:0}
.dash-menu-btn svg{width:20px;height:20px}
.dash-body{display:block;margin-left:calc(var(--side-w) + var(--sub-w));padding:var(--sp-5) var(--sp-6) var(--sp-8);transition:margin-left var(--t-base)}
/* Menú secundario (lista de clases / pestañas admin): panel fijo a la derecha del rail */
.subnav{position:fixed;top:0;left:var(--side-w);bottom:0;width:var(--sub-w);z-index:54;padding-top:84px;
  background:#fff;border-right:1px solid var(--pame-line);overflow-y:auto;transition:left var(--t-base),transform var(--t-base);display:flex;flex-direction:column}
/* Sidebar FIJO al borde izquierdo, de punta a punta */
.dash-side{position:fixed;top:0;left:0;bottom:0;width:var(--side-w);z-index:55;background:#fff;border-right:1px solid var(--pame-line);
  display:flex;flex-direction:column;gap:var(--sp-4);padding:84px 12px 16px;overflow-y:auto;transition:width var(--t-base),transform var(--t-base)}
.dash-collapse{align-self:flex-end;background:none;border:1px solid var(--pame-line);border-radius:var(--r-sm);color:var(--fg-3);
  width:34px;height:30px;display:grid;place-items:center;cursor:pointer;padding:0;flex:none;transition:all var(--t-fast)}
.dash-collapse:hover{border-color:var(--pame-blue);color:var(--pame-blue);background:var(--pame-blue-10)}
.dash-collapse svg{width:16px;height:16px;transition:transform var(--t-base)}
body.side-collapsed .dash-collapse{align-self:center}
body.side-collapsed .dash-collapse svg{transform:rotate(180deg)}
.dash-nav{display:flex;flex-direction:column;gap:2px}
body.side-collapsed .dash-nav-item{justify-content:center;padding:12px 0;gap:0}
body.side-collapsed .dash-nav-item span,body.side-collapsed .dash-promo{display:none}
.dash-side-backdrop{display:none}
.dash-nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);color:var(--fg-2);
  font-size:var(--fs-14);font-weight:600;cursor:pointer;text-decoration:none;transition:all var(--t-fast);margin-bottom:2px}
.dash-nav-item svg{width:20px;height:20px;flex:none;opacity:.85}
.dash-nav-item:hover{background:var(--pame-blue-10);color:var(--pame-blue-700)}
.dash-nav-item.on{background:var(--pame-blue-900);color:#fff}
.dash-nav-item.on svg{opacity:1}
.dash-promo{background:linear-gradient(160deg,var(--pame-teal-10),var(--pame-blue-10));border:1px solid var(--pame-blue-20);
  border-radius:var(--r-lg);padding:20px;text-align:left;position:relative;overflow:hidden}
.dash-promo h4{margin:0 0 6px;font-size:var(--fs-16);color:var(--fg-1)}
.dash-promo p{margin:0 0 60px;font-size:var(--fs-12);color:var(--fg-2);line-height:1.5}
.dash-promo-ic{position:absolute;right:14px;bottom:52px;color:var(--pame-teal);opacity:.5}
.dash-promo-ic svg{width:52px;height:52px}
.dash-promo-btn{display:inline-block;background:#fff;border:1px solid var(--pame-blue-20);color:var(--pame-blue-700);
  border-radius:var(--r-pill);padding:9px 16px;font-size:var(--fs-12);font-weight:700;cursor:pointer;text-decoration:none}
.dash-promo-btn:hover{background:var(--pame-blue);color:#fff;border-color:var(--pame-blue)}
/* Main */
.dash-main{max-width:1180px;margin:0 auto;min-width:0}
.dash-hola{font-family:var(--font-display);font-weight:400;font-size:var(--fs-40);margin:0 0 4px}
.dash-sub{color:var(--fg-3);font-size:var(--fs-14);margin:0 0 var(--sp-5)}
/* Stats */
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid var(--pame-line);
  border-radius:var(--r-lg);padding:6px 4px;box-shadow:var(--shadow-xs);margin-bottom:var(--sp-6)}
.stat{display:flex;align-items:center;gap:14px;padding:18px 20px;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:22%;height:56%;width:1px;background:var(--pame-line)}
.stat-ic{width:48px;height:48px;flex:none;border-radius:var(--r-md);display:grid;place-items:center}
.stat-ic svg{width:24px;height:24px}
.stat-ic.teal{background:var(--pame-teal-10);color:var(--pame-teal-700)}
.stat-ic.orange{background:var(--pame-orange-10);color:var(--pame-orange-600)}
.stat-ic.blue{background:var(--pame-blue-10);color:var(--pame-blue-700)}
.stat-donut{width:52px;height:52px;flex:none}
.stat-donut svg{width:52px;height:52px}
.stat-txt{display:flex;flex-direction:column;min-width:0}
.stat-lbl{font-size:var(--fs-12);color:var(--fg-3);font-weight:600}
.stat-num{font-size:var(--fs-24);font-weight:800;color:var(--fg-1);line-height:1.1;font-family:var(--font-sans)}
.stat-sub{font-size:11px;color:var(--fg-3)}
/* Sección cursos */
.dash-sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 var(--sp-4)}
.dash-sec-tit{font-family:var(--font-display);font-weight:400;font-size:var(--fs-24);color:var(--pame-blue);margin:0}
.dash-verall{color:var(--pame-teal-700);font-size:var(--fs-14);font-weight:700;text-decoration:none;cursor:pointer}
.dash-verall:hover{text-decoration:underline}
/* Card nueva con ilustración */
.curso-card.cc-new{padding:0;overflow:hidden;display:flex;flex-direction:column}
.cc-ilus{position:relative;background:var(--pame-bg-soft);border-bottom:1px solid var(--pame-line);height:188px;display:grid;place-items:center;overflow:hidden}
.cc-ilus svg{height:104px;width:auto}
.cc-ilus.has-img{padding:0}
.cc-ilus .cc-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cc-badge{position:absolute;top:12px;right:12px;padding:4px 11px;border-radius:var(--r-pill);font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.cc-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.cc-badge.prog{background:var(--pame-teal-10);color:var(--pame-teal-700)}
.cc-badge.new{background:var(--pame-orange-10);color:var(--pame-orange-600)}
.cc-badge.done{background:#E4F5EC;color:#1E7A4E}
.cc-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.cc-prog{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--pame-orange);margin-bottom:4px}
.cc-body h3{font-family:var(--font-display);font-weight:400;font-size:var(--fs-20);color:var(--fg-1);margin:0 0 6px;line-height:1.15}
.cc-body p{font-size:var(--fs-14);color:var(--fg-3);margin:0 0 14px;flex:1}
.cc-barwrap{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cc-barwrap .mini-bar{flex:1}
.cc-pct{font-size:var(--fs-12);font-weight:700;color:var(--pame-teal-700)}
.cc-clases{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--fg-3);font-weight:600}
.cc-clases svg{width:13px;height:13px;color:var(--pame-blue)}

/* ── Formación con el acceso suspendido ────────────────────────────────────
   El alumno bloqueado (inscripción 'pausada', ver db/bloqueo-acceso.sql) sigue
   viendo la tarjeta, pero apagada y sin botón para entrar: que el curso
   desapareciera del panel sin explicación era la peor manera de avisarle. */
.curso-card.cc-bloq{opacity:.9}
.cc-bloq .cc-ilus{filter:grayscale(1)}
.cc-bloq .cc-ilus::after{content:"";position:absolute;inset:0;background:var(--pame-bg-soft);opacity:.45}
.cc-badge.bloq{background:#FBE8E6;color:var(--pame-danger);z-index:1}
.cc-bloq-motivo{font-size:var(--fs-14);color:var(--fg-2);margin:0 0 var(--sp-3);flex:1}
.cc-bloq-motivo b{color:var(--pame-danger)}
.cc-bloq .cc-clases{color:var(--fg-3)}
.cc-bloq .btn-card{background:var(--pame-bg-soft);color:var(--fg-1);border:1px solid var(--pame-line)}
.cc-bloq .btn-card:hover{background:var(--pame-line)}
/* El mismo aviso, a pantalla completa, cuando entra derecho a la formación. */
.bloq-cartel{background:var(--pame-bg);border:1px solid var(--pame-line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:var(--sp-6);margin-top:var(--sp-6);max-width:620px;text-align:center}
.bloq-icono{font-size:var(--fs-32);line-height:1;display:block;margin-bottom:var(--sp-3)}
.bloq-cartel h1{margin:0 0 var(--sp-3)}
.bloq-txt{font-size:var(--fs-16);color:var(--fg-2);margin:0 0 var(--sp-3);line-height:1.55}
.bloq-txt b{color:var(--pame-danger)}
.bloq-desde{font-size:var(--fs-12);font-weight:700;color:var(--fg-3);margin:0 0 var(--sp-5)}
.bloq-cartel .btn-card{display:inline-block}

/* Desglose de progreso por curso (página Progreso) */
.prog-cards{display:flex;flex-direction:column;gap:12px}
.prog-row{background:#fff;border:1px solid var(--pame-line);border-radius:var(--r-lg);padding:16px 20px;box-shadow:var(--shadow-xs)}
.pr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.pr-tit{min-width:0}
.pr-tit h3{margin:0;font-size:var(--fs-16);color:var(--pame-blue)}
.pr-tit .cc-prog{display:block}
.pr-head .cc-badge{position:static;top:auto;right:auto;flex:none}
.pr-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* Banner impulso */
.dash-banner{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--pame-line);
  border-left:4px solid var(--pame-orange);border-radius:var(--r-lg);padding:18px 22px;margin-top:var(--sp-6);box-shadow:var(--shadow-xs)}
.db-ic{width:48px;height:48px;flex:none;border-radius:var(--r-md);background:var(--pame-blue-10);color:var(--pame-blue-700);display:grid;place-items:center}
.db-ic svg{width:26px;height:26px}
.db-txt{flex:1;display:flex;flex-direction:column}
.db-txt b{font-size:var(--fs-16);color:var(--fg-1)}
.db-txt span{font-size:var(--fs-14);color:var(--fg-3)}
.db-btn{flex:none;background:var(--pame-blue-900);color:#fff;border-radius:var(--r-md);padding:11px 18px;font-size:var(--fs-14);font-weight:700;text-decoration:none;cursor:pointer}
.db-btn:hover{background:var(--pame-blue-700)}
/* #avisos-cont dentro del main del dashboard no debe recentrarse */
.dash-main #avisos-cont{max-width:none;margin:0;padding:0 0 var(--sp-5)}
@media(max-width:980px){
  .dash-menu-btn{display:grid}
  .dash-body{margin-left:0}
  .dash-side{transform:translateX(-100%);width:250px;box-shadow:var(--shadow-lg);padding-top:20px}
  body.side-open .dash-side{transform:none}
  /* En móvil el panel siempre se ve completo (con textos), aunque esté "colapsado" en desktop */
  body.side-collapsed .dash-nav-item{justify-content:flex-start;padding:12px 14px;gap:12px}
  body.side-collapsed .dash-nav-item span{display:inline}
  body.side-collapsed .dash-promo{display:block}
  .dash-collapse{display:none}
  .dash-side-backdrop{display:block;position:fixed;inset:0;background:rgba(2,51,77,.4);z-index:54;opacity:0;pointer-events:none;transition:opacity var(--t-base)}
  body.side-open .dash-side-backdrop{opacity:1;pointer-events:auto}
  .dash-stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2)::after{display:none}
}
@media(max-width:560px){ .dash-stats{grid-template-columns:1fr} .stat::after{display:none!important} }

/* Herramientas dentro del sidebar del dashboard (calc, timer, tamaño de texto) */
.dash-tools{margin-top:auto;border-top:1px solid var(--pame-line);padding-top:12px;display:flex;flex-direction:column;gap:4px}
.dash-tools-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-3);padding:0 8px 4px}
.dash-tools .tool-btn.side{width:100%;justify-content:flex-start;gap:12px;border:none;background:none;padding:11px 14px;border-radius:var(--r-md);color:var(--fg-2);font-size:var(--fs-14);font-weight:600}
.dash-tools .tool-btn.side svg{width:20px;height:20px}
.dash-tools .tool-btn.side:hover{background:var(--pame-blue-10);color:var(--pame-blue-700)}
.size-ctl.in-side{position:static;left:auto;bottom:auto;z-index:auto;margin:6px 6px 0;justify-content:center;
  border:1px solid var(--pame-line);border-radius:var(--r-md);background:#fff;padding:4px}
/* Colapsado: solo íconos, sin etiqueta ni barra de tipografía */
body.side-collapsed .dash-tools-lbl{display:none}
body.side-collapsed .dash-tools .tool-btn.side{justify-content:center;padding:11px 0;gap:0}
body.side-collapsed .dash-tools .tool-btn.side span{display:none}
body.side-collapsed .size-ctl.in-side{display:none}
@media(max-width:980px){
  body.side-collapsed .dash-tools .tool-btn.side{justify-content:flex-start;padding:11px 14px;gap:12px}
  body.side-collapsed .dash-tools .tool-btn.side span{display:inline}
  body.side-collapsed .size-ctl.in-side{display:flex}
}
/* Orden dentro de Herramientas: label, calc, timer, y el tamaño de texto al final */
.dash-tools .dash-tools-lbl{order:0}
.dash-tools .tool-btn.side{order:1}
.dash-tools .size-ctl.in-side{order:2}

/* Timer activo visible en la barra (color + tiempo restante) */
.tt-time{font-weight:800;font-variant-numeric:tabular-nums}
.tool-btn.side .tt-time{margin-left:auto;padding-left:8px;font-size:var(--fs-12)}
.tool-btn:not(.side) .tt-time:not(:empty){margin-left:6px;font-size:11px}
.tool-btn.tmr-on{color:var(--pame-teal-700)!important;background:var(--pame-teal-10)!important;border-color:var(--pame-teal-40)!important}
.tool-btn.tmr-on svg{color:var(--pame-teal)}
.tool-btn.tmr-done{color:var(--pame-orange-600)!important;background:var(--pame-orange-10)!important;border-color:var(--pame-orange-40)!important;animation:tmrPulse 1.1s ease-in-out infinite}
@keyframes tmrPulse{50%{opacity:.55}}

/* Editor de ficha de producto (admin) */
.pf-li{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.pf-li input{flex:1}
.pf-li-del{flex:none;padding:6px 10px}
/* Ficha: listas con ícono elegible (barra de stats + "qué incluye").
   Ojo: `.adm-field input/select` fuerza width:100%, así que acá hay que ganarle
   con selectores de 2 clases (misma especificidad, pero declarados después). */
.pf-ico-lista{display:flex;flex-direction:column;gap:8px}
.pf-ico-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:#fff;border:1px solid var(--pame-line);border-radius:var(--r-md);padding:8px 10px}
.pf-ico-prev{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--pame-line);border-radius:var(--r-md);background:var(--pame-cream,#f7f4ee)}
.pf-ico-prev svg{width:20px;height:20px;color:var(--pame-blue)}
.pf-ico-row .pf-ico-sel{flex:0 0 172px;width:172px;min-width:0;padding:8px 10px}
.pf-ico-row .pf-ico-inp{flex:1 1 160px;width:auto;min-width:0}
.pf-ico-row .pf-ico-inp.wide{flex:1 1 260px}
.pf-ico-row .pf-ico-del{flex:none;margin-left:auto;padding:6px 10px}
.pf-ico-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:4px}
@media (max-width:760px){
  .pf-ico-row .pf-ico-sel{flex:1 1 140px;width:auto}
  .pf-ico-row .pf-ico-inp{flex:1 1 100%}
}
/* Dónde va cada media en la ficha: checkboxes del video + botones por imagen */
.pf-slots{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:2px}
/* `label{}` global los pone en columna y en mayúsculas: hay que revertir las dos cosas. */
.pf-slot{display:flex;flex-direction:row;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--fg-2);
  font-weight:600;cursor:pointer;text-transform:none;letter-spacing:0}
.pf-slot input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--pame-teal);cursor:pointer}
.pf-img-box{display:flex;flex-direction:column;gap:6px;width:150px;cursor:grab;border-radius:var(--r-md);
  transition:opacity var(--t-fast),box-shadow var(--t-fast)}
.pf-img-box:active{cursor:grabbing}
.pf-img-box.dragging{opacity:.4}
.pf-img-box.over{box-shadow:0 0 0 2px var(--pame-blue)}
.pf-img-slots{display:flex;gap:6px}
.pf-img-mov{display:flex;gap:6px}
.pf-mov{flex:1;width:auto;margin:0;padding:3px 4px;min-height:0;font-size:11px;line-height:1.4;cursor:pointer;
  background:#fff;border:1px solid var(--pame-line);color:var(--fg-2);border-radius:var(--r-sm)}
.pf-mov:hover:not(:disabled){border-color:var(--pame-blue);color:var(--pame-blue)}
.pf-mov:disabled{opacity:.35;cursor:default}
/* Número de orden + botón de recorte sobre la miniatura */
.pf-img-n{position:absolute;top:6px;left:6px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;
  background:rgba(2,51,77,.72);color:#fff;border-radius:var(--r-pill);font-size:11px;font-weight:800;line-height:1}
.pf-img-crop{position:absolute;bottom:6px;right:6px;width:26px;height:26px;padding:0;margin:0;display:grid;place-items:center;
  background:rgba(2,51,77,.72);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;
  box-shadow:0 1px 4px rgba(2,51,77,.3);transition:background var(--t-fast)}
.pf-img-crop:hover{background:var(--pame-blue)}
.pf-slot-btn{flex:1;width:auto;margin:0;padding:5px 4px;min-height:0;font-size:11px;font-weight:700;cursor:pointer;
  background:#fff;border:1px solid var(--pame-line);color:var(--fg-3);border-radius:var(--r-sm);white-space:nowrap}
.pf-slot-btn:hover{border-color:var(--pame-blue);color:var(--pame-blue)}
.pf-slot-btn.on{background:var(--pame-blue-10);border-color:var(--pame-blue);color:var(--pame-blue-700)}
/* Rotación de la galería: etiqueta + select, en una línea */
.pf-rot{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.pf-rot span{font-size:var(--fs-12);color:var(--fg-2);font-weight:600}
.pf-rot .adm-select{width:auto}
.pf-imgs{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.pf-img{position:relative;width:150px;height:100px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--pame-line);box-shadow:var(--shadow-xs)}
.pf-img img{width:100%;height:100%;object-fit:cover;display:block}
.pf-img-del{position:absolute;top:6px;right:6px;width:26px;height:26px;padding:0;margin:0;display:grid;place-items:center;
  background:rgba(2,51,77,.72);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;
  box-shadow:0 1px 4px rgba(2,51,77,.3);transition:background var(--t-fast)}
.pf-img-del:hover{background:var(--pame-danger)}
.pf-img-add{width:150px;height:100px;border:1.5px dashed var(--pame-blue-30);border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;padding:8px;
  color:var(--pame-blue-700);font-weight:700;font-size:var(--fs-12);cursor:pointer;background:var(--pame-blue-10);transition:all var(--t-fast)}
.pf-img-add svg{width:22px;height:22px;opacity:.85}
.pf-img-add small{font-weight:500;font-size:11px;color:var(--fg-3)}
.pf-img-add:hover,.pf-img-add.drag{border-color:var(--pame-blue);background:var(--pame-blue-20)}
.pf-img-add.drag{border-style:solid;transform:scale(1.02)}

/* ── Tipografía de interfaz: Montserrat bold en títulos (sin Bohemian) ── */
.panel h1,.dash-hola,.pp-title,.clase-titulo,.curso-titulo,.panel-title{font-family:var(--font-sans);font-weight:800;letter-spacing:-0.02em}
.panel-title{font-size:var(--fs-40);margin:0 0 4px;color:var(--fg-1)}
h1,.seccion-tit,.dash-sec-tit,.prog-tit,.avisos-tit,.curso-card h3,.cc-body h3,.pb-head h4,.logo .logo-main,.brand,.pame-display,h1.pame,.dash-tools-lbl{font-family:var(--font-sans)}
h1,.seccion-tit,.dash-sec-tit,.prog-tit,.avisos-tit,.curso-card h3,.cc-body h3,.pb-head h4,.pame-display{font-weight:700;letter-spacing:-0.01em}

/* Link público editable del curso (admin) */
.c-link-row{display:flex;align-items:center;gap:0;border:1px solid var(--pame-line);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.c-link-base{padding:9px 4px 9px 12px;color:var(--fg-3);font-size:var(--fs-14);white-space:nowrap;background:var(--pame-bg-soft)}
.c-link-row input{flex:1;border:none!important;border-radius:0!important;padding:9px 10px}
.c-link-row input:focus{outline:none;box-shadow:none}
.c-link-row .btn-mini{flex:none;border-radius:0;border:none;border-left:1px solid var(--pame-line)}
@media(max-width:560px){.c-link-base{display:none}}

/* ── Menú superior sin subrayado + contenedores con sombra delicada (Bunny) ── */
.ghost{text-decoration:none}
.ghost:hover{text-decoration:none}
.curso-card,.aviso,.modulo,.datos-card,.notas-alumno,.adm-panel,.adm-editor,.prod-card,.co-card{box-shadow:var(--shadow-sm)}
.curso-card,.aviso,.modulo{border-radius:var(--r-lg)}

/* Título de avisos con ícono SVG (megáfono) */
.avisos-tit{display:flex;align-items:center;gap:8px}
.avisos-tit svg{width:22px;height:22px;color:var(--pame-orange);flex:none}

/* PaoBot: agrandar el chat + botones del header */
.pb-actions{display:flex;align-items:center;gap:8px;flex:none}
.pb-expand,.pb-reset{background:none;border:none;color:#fff;cursor:pointer;width:auto;padding:0;margin:0;opacity:.85;display:grid;place-items:center}
.pb-expand:hover,.pb-reset:hover{opacity:1;background:none}
.pb-expand svg,.pb-reset svg{width:17px;height:17px}
.paobot-panel.big{width:560px;max-width:calc(100vw - 40px)}
.paobot-panel.big .pb-body{min-height:440px;max-height:72vh;overflow:auto;display:flex;flex-direction:column}
.paobot-panel.big .pb-input{margin-top:auto}
/* En modo chat el que scrollea es .pb-msgs, no el cuerpo: si scrollean los dos, el
   campo de escribir se va de pantalla al crecer la conversación. */
.paobot-panel.vivo.big .pb-body{height:min(72vh,620px);overflow:hidden}

/* Integraciones en una sola columna: bloques y campos apilados (evita desfasajes) */
.adm-integ{max-width:none;display:flex;flex-direction:column;gap:var(--sp-5)}
.adm-integ .adm-sub-block{margin:0}
.adm-integ .adm-grid{grid-template-columns:1fr}
.adm-integ .adm-field{max-width:none}
/* Lista de cuentas del panel de plataforma (una fila por cliente) */
.ct-rows{
  --ui-cols:     minmax(140px,1.2fr) minmax(180px,1.6fr) minmax(90px,.6fr) auto;
  --ui-cols-mob: 1fr auto;
}
/* Estado de un secreto al lado de su etiqueta ("· cargada ✓" / "· sin cargar") */
.adm-ok{color:var(--pame-teal-700)}
.adm-nop{color:var(--fg-3)}
/* Campo de clave: se le pone tope de ancho porque un input a lo ancho de la pantalla
   no ayuda a leer un secreto pegado. Va con la especificidad de .adm-integ .adm-field,
   que arriba lo saca. */
.adm-integ .bn-clave{--bn-clave-max:560px;max-width:var(--bn-clave-max)}
.bn-grid{margin-top:var(--gap-blk)}

/* Vista previa de los subtítulos: la franja de abajo de un video, con el estilo que se
   está por aplicar. El tamaño llega en px medidos sobre un player de --cap-ref de ancho,
   así que se traduce a un porcentaje del ancho del recuadro (100cqw): la proporción
   letra/pantalla se mantiene aunque acá la caja sea más chica que el player real.
   Los valores los pone capPintar() en admin.html como variables, no como estilos. */
.cap-prev{
  --cap-ref:1280;        /* ancho de player al que se refiere el tamaño en px */
  --cap-pad:.15em .4em;  /* la caja crece con la letra: acá va em, no --sp-* */
  --cap-prev-max:720px;  /* tope de ancho: a lo ancho del panel quedaba un cartelón */
  max-width:var(--cap-prev-max);
  container-type:inline-size;
  display:flex;align-items:flex-end;justify-content:center;
  aspect-ratio:16/5;
  padding:var(--sp-3);
  border-radius:var(--r-sm);
  background:#000;
  overflow:hidden;
}
.cap-prev-cue{
  font-family:var(--cap-fam,var(--font-sans));
  font-size:calc(var(--cap-fs,22) / var(--cap-ref) * 100cqw);
  line-height:var(--lh-normal);
  text-align:center;
  color:var(--cap-color,#fff);
  background:var(--cap-bg,#000);
  padding:var(--cap-pad);
}

/* Vista previa de la marca de agua del video: el rincón de arriba a la izquierda del
   player, con los mismos dos renglones que ve el alumno. No redefine nada: pone la caja
   negra y deja que la dibuje .video-wm, la misma clase que usa la clase de verdad. */
.wm-prev{
  --wm-prev-max:720px;   /* mismo tope que .cap-prev: son dos previews hermanas */
  max-width:var(--wm-prev-max);
  position:relative;
  aspect-ratio:16/5;
  border-radius:var(--r-sm);
  background:#000;
  overflow:hidden;
}

/* Filtro por fecha + columnas ordenables (Ventas / Alumnos) */
.filtro-fecha{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--fg-3);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.filtro-fecha input{font-size:var(--fs-14);padding:7px 9px;border:1px solid var(--pame-line);border-radius:var(--r-sm);font-family:var(--font-sans);color:var(--fg-1)}
table.sortable th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
table.sortable th[data-sort]:hover{color:var(--pame-blue)}
table.sortable th[data-sort]::after{content:"↕";opacity:.35;margin-left:5px;font-size:10px}
table.sortable th.sorted-asc::after{content:"↑";opacity:1;color:var(--pame-blue)}
table.sortable th.sorted-desc::after{content:"↓";opacity:1;color:var(--pame-blue)}

/* ── Pie de página compartido (footer.js) ── */
/* Oculto hasta que footer.js lo revela (cuando el contenido #app ya se ve), para que
   no se vea SOLO el footer sobre la página en blanco durante la carga. */
.site-footer{border-top:1px solid var(--pame-line);background:var(--pame-bg);opacity:0;transition:opacity var(--t-slow) var(--ease-out)}
.site-footer.sf-on{opacity:1}
/* Sticky footer: el body se vuelve una columna flex de alto mínimo = viewport y el pie
   se empuja al fondo con margin-top:auto. Así el footer nunca "sube" cuando el contenido
   es corto. footer.js agrega .sf-sticky al body en cada página que tiene footer. */
body.sf-sticky{display:flex;flex-direction:column;min-height:100vh}
body.sf-sticky .site-footer{margin-top:auto}
body.dash-body-page .site-footer{margin-left:calc(var(--side-w) + var(--sub-w));transition:margin-left var(--t-base)}
.sf-inner{max-width:1180px;margin:0 auto;padding:22px var(--sp-6);display:flex;flex-wrap:wrap;gap:10px 24px;
  align-items:center;justify-content:space-between}
.sf-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.sf-links a{color:var(--fg-3);font-size:var(--fs-12);font-weight:600;text-decoration:none}
.sf-links a:hover{color:var(--pame-blue)}
.sf-arrep{color:var(--pame-orange-600)}
.sf-legal{color:var(--fg-3);font-size:var(--fs-12)}
@media(max-width:980px){ body.dash-body-page .site-footer{margin-left:0} }
@media(max-width:640px){ .sf-inner{flex-direction:column;align-items:flex-start;gap:12px} }

/* ── Páginas legales/informativas ── */
.legal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px var(--sp-6);
  background:var(--pame-bg);border-bottom:1px solid var(--pame-line)}
.legal-top img{height:38px;width:auto;display:block}
.legal-wrap{max-width:820px;margin:0 auto;padding:var(--sp-6) var(--sp-5) var(--sp-8)}
.legal-wrap h1{font-family:var(--font-sans);font-weight:800;font-size:var(--fs-32);letter-spacing:-0.02em;margin:0 0 6px}
.legal-wrap .upd{color:var(--fg-3);font-size:var(--fs-12);margin:0 0 var(--sp-5)}
.legal-wrap h2{font-size:var(--fs-20);margin:var(--sp-6) 0 8px}
.legal-wrap p,.legal-wrap li{font-size:var(--fs-14);color:var(--fg-2);line-height:var(--lh-loose)}
.legal-wrap ul{margin:0 0 var(--sp-4);padding-left:20px}
.legal-wrap a{color:var(--pame-blue);font-weight:600}
.legal-note{background:var(--pame-orange-10);border:1px solid var(--pame-orange-30);border-radius:var(--r-md);
  padding:14px 16px;margin:0 0 var(--sp-6);font-size:var(--fs-12);color:var(--pame-ink-2)}
.legal-note b{color:var(--fg-1)}

/* Filas de plan de precio (editor de curso) */
.price-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr auto;gap:10px;align-items:end;margin-bottom:10px}
.price-row .adm-field{margin-bottom:0}
.price-row .btn-del{align-self:center}
.bump-row{grid-template-columns:1.5fr 1fr 1fr auto}
.price-row:has(.p-grupo){grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr auto}
@media(max-width:720px){.price-row,.price-row:has(.p-grupo){grid-template-columns:1fr 1fr}}

/* Grupos del curso (cohortes) — panel del admin + chips de visibilidad */
.gr-panel[data-vacio]{background:transparent}
/* Filas de grupo: un solo grid (.ui-rows), así las columnas se alinean
   entre TODAS las filas aunque alguna no tenga el badge de vigente. */
.gr-rows{--ui-cols:auto minmax(160px,1.4fr) minmax(150px,1.2fr) auto auto auto;
  --ui-cols-mob:auto 1fr auto}
.gr-rows .gr-nombre{font-weight:700}
.gr-rows .gr-vig{white-space:nowrap;background:var(--pame-teal-10);color:var(--pame-teal-700);
  border:1px solid var(--pame-teal-30);text-transform:none;letter-spacing:0}
.gr-rows .gr-alu,.gr-rows .gr-del{white-space:nowrap}
@media(max-width:720px){
  .gr-rows .gr-inicio,.gr-rows .gr-vig{grid-column:2/-1}
  .gr-rows > .ui-head{display:none}
}
.adm-badge.gr-chip{background:color-mix(in srgb,var(--gr) 14%,transparent);color:var(--gr);
  border:1px solid color-mix(in srgb,var(--gr) 38%,transparent);text-transform:none;letter-spacing:0}
/* FAQ curada de PaoBot. Una sola LÍNEA por pregunta: se recorre la lista de un vistazo
   y se edita ahí mismo. Un solo grid, así las columnas se alinean entre todas las filas. */
.faq-rows{--ui-cols:auto minmax(240px,3fr) minmax(110px,.9fr) minmax(110px,.9fr) auto auto auto;
  --ui-cols-mob:auto 1fr auto auto}
/* ui.css alinea las celdas de texto con justify-self:start, así que la celda se encoge
   al ancho del texto y el recorte con puntos suspensivos nunca llega a activarse: la
   pregunta larga se montaba sobre la columna de al lado. Estas tres ocupan su columna. */
.faq-rows .ui-row > .faq-preg,
.faq-rows .ui-row > .faq-cat,
.faq-rows .ui-row > .faq-curso{justify-self:stretch}
/* La pregunta no puede empujar la fila a dos renglones: se corta con puntos suspensivos
   y el texto completo queda en el title. */
.faq-rows .faq-preg{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.faq-rows .faq-cat,.faq-rows .faq-curso{color:var(--fg-3);font-size:var(--fs-12);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.faq-rows .faq-sin{opacity:.5}
.faq-rows .faq-usos{color:var(--fg-3);font-size:var(--fs-12);text-align:right;white-space:nowrap}
.faq-rows .faq-edit,.faq-rows .faq-del{padding-left:var(--sp-3);padding-right:var(--sp-3)}

/* Semáforo de activa/pausada: un punto que además es el interruptor.
   min-height:0 y align-self:center porque ui.css estira los botones de una fila a
   --ctl-h; sin esto el punto sale como un óvalo de 38px de alto. */
.faq-rows .faq-estado{width:var(--sp-3);height:var(--sp-3);min-height:0;border-radius:50%;padding:0;margin:0;
  align-self:center;justify-self:center;
  border:1px solid var(--pame-line);background:var(--bg-3);cursor:pointer}
.faq-rows .faq-estado.on{background:var(--pame-success);border-color:var(--pame-success)}
.faq-rows .faq-estado:hover{outline:2px solid var(--pame-teal-30)}

/* ── Bandeja de consultas (panel admin) ───────────────────────────────────
   Mismo patrón que la FAQ: una línea por consulta y el detalle —el video, las
   capturas y el cuadro de respuesta— se despliega justo debajo, dentro del
   mismo grid. */
.cns-rows{--ui-cols:auto minmax(140px,1.2fr) minmax(160px,1.6fr) auto auto auto;
  --ui-cols-mob:auto 1fr auto}
.cns-rows .ui-row > .cns-quien,
.cns-rows .ui-row > .cns-donde{justify-self:stretch}
.cns-rows .cns-quien{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cns-rows .cns-donde{color:var(--fg-3);font-size:var(--fs-12);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.cns-rows .cns-adj,.cns-rows .cns-fecha{color:var(--fg-3);font-size:var(--fs-12);white-space:nowrap}
/* Semáforo: naranja sin abrir, azul leída, verde respondida. min-height:0 porque
   ui.css estira los hijos de una fila a --ctl-h. */
.cns-rows .cns-pin{width:var(--sp-3);height:var(--sp-3);min-height:0;border-radius:50%;
  align-self:center;justify-self:center;background:var(--pame-orange)}
.cns-rows .cns-pin.leida{background:var(--pame-blue-50)}
.cns-rows .cns-pin.respondida{background:var(--pame-success)}
.cns-detalle{grid-column:1/-1;background:var(--pame-bg-soft);border:1px solid var(--pame-line);
  border-radius:var(--r-md);padding:var(--sp-4)}
.cns-adm-ruta{margin:0 0 var(--sp-3);font-size:var(--fs-12);color:var(--fg-3)}
.cns-adm-texto{margin:0 0 var(--sp-4);font-size:var(--fs-14);color:var(--fg-1);white-space:pre-wrap}
.cns-adm-video{width:100%;max-height:70vh;border-radius:var(--r-sm);background:#000;display:block}
.cns-adm-imgs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0}
.cns-adm-img{display:block;width:var(--sp-9);height:var(--sp-9);border:1px solid var(--pame-line);
  border-radius:var(--r-sm);overflow:hidden;background:#fff}
.cns-adm-img img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:720px){
  .cns-rows > .ui-head{display:none}
  .cns-rows .cns-quien{grid-column:2/-1}
  .cns-rows .cns-donde{grid-column:2/-1}
  .cns-rows .cns-adj{grid-column:2}
  .cns-rows .cns-fecha{grid-column:3}
}

/* Filtro por categoría */
/* Uso de PaoBot: las preguntas que hicieron los alumnos.
   Las cifras de arriba reusan .dash-stats/.stat del panel del alumno; acá solo
   está lo que esa pieza no cubre. */
.pbq-rows{--ui-cols:auto minmax(120px,1fr) minmax(220px,3fr) auto auto auto auto;
  --ui-cols-mob:1fr auto}
/* Sin el stretch, .ui-rows deja cada celda del ancho de su contenido (justify-self:start)
   y el text-align:right no tiene contra qué alinearse. */
.pbq-rows .ui-row > .pbq-quien,
.pbq-rows .ui-row > .pbq-preg,
.pbq-rows .ui-row > .pbq-costo{justify-self:stretch}
/* Tokens: números tabulares para que los dígitos queden en columna. */
.pbq-rows .pbq-costo{text-align:right;white-space:nowrap}
.pbq-tok{font-size:var(--fs-12);color:var(--fg-2);font-weight:600;font-variant-numeric:tabular-nums}
.pbq-tok--cero{color:var(--pame-success)}
.pbq-donde{margin:0 0 var(--sp-2);font-size:var(--fs-12);color:var(--fg-3)}
/* Paginado */
.pbq-paginado{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4)}
.pbq-paginado .btn-mini{width:auto;margin:0}
.pbq-pag-txt{font-size:var(--fs-12);color:var(--fg-3);margin:0 var(--sp-2)}
.pbq-porpag{height:var(--ctl-h);width:auto;margin:0;font-size:var(--fs-12)}
/* Configuración: el textarea del prompt necesita ancho y fuente pareja para que se lea
   como el texto que es, no como un campo de formulario. */
.pbcfg-instr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-12);line-height:1.55}
.pbcfg-abrir,.pbcfg-cerrar{width:auto;margin:0 0 0 var(--sp-3);font-size:var(--fs-12);
  font-weight:600;vertical-align:middle;font-family:var(--font-sans)}
.pbq-rows .pbq-preg{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Día y hora en la misma celda: la hora va más apagada para que la fecha siga siendo lo
   primero que se lee. Tabulares, así los dos puntos quedan en columna entre filas. */
.pbq-rows .pbq-fecha{color:var(--fg-3);font-size:var(--fs-12);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pbq-rows .pbq-fecha i{font-style:normal;opacity:.7}
.pbq-rows .pbq-quien,.pbq-rows .pbq-clase{color:var(--fg-3);font-size:var(--fs-12);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pbq-detalle{grid-column:1/-1;background:var(--pame-bg-soft);border:1px solid var(--pame-line);
  border-radius:var(--r-md);padding:var(--sp-4);margin-bottom:var(--sp-2)}
.pbq-rta{margin:0;font-size:var(--fs-14);color:var(--fg-2);white-space:pre-wrap}
.pbq-tokens{margin:var(--sp-3) 0 0;font-size:var(--fs-12);color:var(--fg-3);
  border-top:1px solid var(--pame-line);padding-top:var(--sp-2)}
/* Ranking de clases: una línea, no una tabla. Es para mirar de reojo. */
.pbq-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-4)}
.pbq-top-lbl{font-size:var(--fs-12);font-weight:700;color:var(--fg-3);text-transform:uppercase;letter-spacing:.04em}
.pbq-top-item{font-size:var(--fs-12);color:var(--fg-3)}
.pbq-top-item b{color:var(--pame-blue);font-size:var(--fs-14)}
.pbq-busca{flex:1;min-width:180px;height:var(--ctl-h);margin:0}
/* Cabeceras ordenables: se ven como el resto de las etiquetas de columna, pero se tocan.
   La flechita queda siempre reservada para que el título no se corra al ordenar. */
.pbq-ord{background:none;border:none;padding:0;margin:0;width:auto;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  display:inline-flex;align-items:center;gap:var(--sp-1)}
.pbq-ord:hover{background:none;color:var(--pame-blue)}
.pbq-ord i{font-style:normal;opacity:.35;font-size:10px;width:9px;display:inline-block}
.pbq-ord.on{color:var(--pame-blue)}
.pbq-ord.on i{opacity:1}
/* Las dos de tokens van alineadas a la derecha, como sus números. */
.pbq-rows .ui-head > span:nth-child(4) .pbq-ord,
.pbq-rows .ui-head > span:nth-child(5) .pbq-ord{justify-content:flex-end;width:100%}
/* Va dentro del <h4>, así que hay que devolverle el peso y el tamaño de un botón. */
.pbq-refrescar{width:auto;margin:0 0 0 var(--sp-3);font-size:var(--fs-12);font-weight:600;
  vertical-align:middle;font-family:var(--font-sans)}
/* Rango de fechas. Los campos miden --ctl-h como cualquier control del sistema. */
.pbq-fechas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4)}
/* El `label` global apila en columna y pone el texto en mayúsculas (es el de los
   formularios): acá hay que revertir las dos cosas, o "Desde" queda arriba del campo y la
   fila entera se descentra contra los chips de al lado. */
.pbq-fecha-campo{display:flex;flex-direction:row;align-items:center;gap:var(--sp-2);
  height:var(--ctl-h);margin:0;padding:0;font-size:var(--fs-12);color:var(--fg-3);
  font-weight:600;white-space:nowrap;text-transform:none;letter-spacing:0}
.pbq-fecha-campo input{height:var(--ctl-h);margin:0;width:auto;font-size:var(--fs-14)}
.faq-filtros{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-4) 0}
.faq-chip{width:auto;margin:0;padding:0 var(--sp-3);height:var(--ctl-h);border-radius:var(--r-pill);
  border:1px solid var(--pame-line);background:#fff;color:var(--fg-2);font-size:var(--fs-12);
  font-weight:700;cursor:pointer;white-space:nowrap}
.faq-chip span{opacity:.55;margin-left:var(--sp-1)}
/* Sin esto se comen el `button:hover` global, que los pinta de azul lleno dejando el
   texto gris oscuro encima: ilegible. Apagado, el hover solo se insinúa; encendido,
   apenas oscurece el azul y el texto sigue blanco. */
.faq-chip:hover{background:var(--pame-bg-soft);border-color:var(--pame-blue);color:var(--pame-blue)}
.faq-chip.on{background:var(--pame-blue);border-color:var(--pame-blue);color:#fff}
.faq-chip.on:hover{background:var(--pame-blue-700);border-color:var(--pame-blue-700);color:#fff}
.faq-chip.on span{opacity:.75}

/* El editor se despliega dentro del mismo grid, ocupando el ancho completo justo debajo
   de su fila. Por eso es hijo directo de .ui-rows y no un panel aparte al pie. */
.faq-editor{grid-column:1/-1;background:var(--pame-bg-soft);border:1px solid var(--pame-line);
  border-radius:var(--r-md);padding:var(--sp-4)}
.faq-alta{margin-top:var(--sp-4)}

@media(max-width:720px){
  /* En el celular la pregunta pasa a ocupar el ancho entero y se lee completa;
     el resto queda como una línea de datos arriba y los botones abajo. */
  .pbq-rows > .ui-head{display:none}
  .pbq-rows .pbq-fecha{grid-column:1}
  .pbq-rows .pbq-quien{grid-column:2;text-align:right}
  .pbq-rows .pbq-preg{grid-column:1/-1;white-space:normal}
  /* Sin cabecera no hay forma de saber cuál es cuál, y en el celular no hay hover que
     valga: se etiquetan en la propia celda. */
  .pbq-rows .pbq-leidos{grid-column:1;text-align:left}
  .pbq-rows .pbq-escritos{grid-column:2;text-align:right}
  .pbq-rows .pbq-leidos::before{content:'leyó '}
  .pbq-rows .pbq-escritos::before{content:'escribió '}
  .pbq-rows .pbq-leidos::before,
  .pbq-rows .pbq-escritos::before{font-size:var(--fs-12);color:var(--fg-3);font-weight:600}
  .pbq-rows .pbq-ver{grid-column:2;justify-self:end}
  .pbq-rows .ui-row > .pbq-fecha{margin-top:var(--sp-4)}

  .faq-rows > .ui-head{display:none}
  .faq-rows .faq-preg{grid-column:2/-1}
  .faq-rows .faq-cat{grid-column:2}
  .faq-rows .faq-curso{grid-column:3}
  .faq-rows .faq-usos{grid-column:4;text-align:left}
  .faq-rows .faq-edit{grid-column:2}
  .faq-rows .faq-del{grid-column:3/-1}
  /* Sin esto, el hueco entre las líneas de una fila y el hueco entre filas son iguales
     y no se ve dónde termina cada una. */
  .faq-rows .ui-row > .faq-estado{margin-top:var(--sp-4)}
}

.gv-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.gv-grupos{display:flex;flex-direction:column;gap:7px}

/* Pantalla "Alumnos y grupos": asignar uno por uno */
.dup-card.ancha{width:660px}
.ga-tools{display:flex;gap:10px;margin-bottom:10px}
.ga-tools input{flex:1;font-family:var(--font-sans);font-size:var(--fs-14);padding:8px 10px;
  border:1px solid var(--pame-line);border-radius:6px;background:#fff;color:var(--fg-1)}
.ga-bulk{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--pame-bg-soft);border:1px solid var(--pame-line);margin-bottom:10px}
.ga-list{max-height:46vh;overflow:auto;border:1px solid var(--pame-line);border-radius:var(--r-sm)}
/* Un solo grid para todas las filas (.ui-rows): antes cada fila era su propio
   grid y las columnas no se alineaban entre alumnos. */
.ga-rows{--ui-cols:auto minmax(160px,1fr) minmax(150px,190px) auto;
  --ui-cols-mob:auto 1fr;padding:var(--sp-2) var(--sp-3)}
.ga-rows .ga-chk{width:16px;height:16px;accent-color:var(--pame-blue);align-self:center}
.ga-rows .ui-row > .ga-nom{justify-self:stretch;align-self:center;
  line-height:1.35;min-width:0;overflow-wrap:anywhere}
.ga-rows .ga-bloq{white-space:nowrap}
/* Chip del alumno sin acceso: se ve de un vistazo quién está cortado y por qué. */
.ga-bloq-chip{display:inline-block;margin-top:var(--sp-1);font-size:var(--fs-12);font-weight:700;
  padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--pame-danger) 12%,transparent);color:var(--pame-danger)}
@media(max-width:720px){
  .ga-rows > .ui-head{display:none}
  .ga-rows .ga-sel,.ga-rows .ga-bloq{grid-column:2}
}

/* Progreso · constancia (días activos, racha, tira de actividad) — dashboard */
.dash-constancia{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--pame-line);border-radius:var(--r-lg);padding:18px 22px;box-shadow:var(--shadow-xs);margin-bottom:var(--sp-6)}
.dc-nums{display:flex;gap:30px;flex-wrap:wrap}
.dc-num{display:flex;flex-direction:column}
.dc-num b{font-size:var(--fs-24);font-weight:800;color:var(--fg-1);line-height:1.1}
.dc-num span{font-size:var(--fs-12);color:var(--fg-3);font-weight:600;margin-top:2px}
.dc-strip{display:flex;flex-direction:column;gap:8px}
.dc-strip-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-3)}
.dc-dots{display:flex;gap:4px;flex-wrap:wrap;max-width:340px}
.dc-dot{width:12px;height:12px;border-radius:3px;background:var(--pame-blue-10);flex:none}
.dc-dot.on{background:var(--pame-teal)}

/* ── Home / vitrina de cursos (deslogueado) ── */
body.landing{background:var(--pame-bg-soft)}
.land-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px var(--sp-6);
  background:#fff;border-bottom:1px solid var(--pame-line);position:sticky;top:0;z-index:10}
.land-logo{height:38px;width:auto;display:block}
.land-hero{max-width:1100px;margin:0 auto;padding:48px var(--sp-6) 8px;text-align:center}
.land-hero h1{font-family:var(--font-sans);font-weight:800;font-size:var(--fs-40);letter-spacing:-0.02em;margin:0 0 8px;color:var(--fg-1)}
.land-hero p{color:var(--fg-2);margin:0}
.land-hero a{color:var(--pame-blue);font-weight:700}
.land-cat{max-width:1100px;margin:0 auto;padding:24px var(--sp-6) 40px}
.land-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.land-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--pame-line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;transition:transform var(--t-fast),box-shadow var(--t-fast)}
.land-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.land-card-img{height:150px;background:var(--pame-blue-900);display:grid;place-items:center;color:#cfe3ee;font-weight:700;padding:12px;text-align:center}
.land-card-img img{width:100%;height:100%;object-fit:cover}
.land-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.land-card-body h3{font-size:var(--fs-18);margin:0 0 6px;color:var(--fg-1)}
.land-card-body p{font-size:var(--fs-14);color:var(--fg-3);margin:0 0 14px;flex:1}
.land-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.land-price{font-weight:800;color:var(--fg-1);font-size:var(--fs-16)}
.land-cta{color:var(--pame-teal-700);font-weight:700;font-size:var(--fs-14)}
body.landing .auth-wrap{min-height:auto;padding:16px var(--sp-6) 56px}
#login{scroll-margin-top:80px}
.land-empty{grid-column:1/-1;text-align:center;color:var(--fg-3);font-size:var(--fs-16);padding:40px 0}
.land-empty a{color:var(--pame-blue);font-weight:700}

/* ══════════════════════════════════════════════════════════════════════════
   "A CONTINUACIÓN" AL TERMINAR EL VIDEO  ·  .autoav
   --------------------------------------------------------------------------
   Overlay que tapa el reproductor cuando se termina la clase: dice cuál sigue
   y muestra un botón de play con un aro que se completa mientras corre la
   cuenta regresiva. Vive DENTRO de .player (que ya es position:relative), así
   que también se ve en pantalla completa.
   ══════════════════════════════════════════════════════════════════════════ */

.autoav{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-3);
  padding:var(--sp-5);
  text-align:center; color:#fff;
  background:rgba(2,51,77,.97);
  border-radius:var(--r-sm);
  /* Medidas propias de este componente. El botón de play no entra en ninguna
     escala existente (no es un control de formulario, es una diana para el
     mouse), así que se declara acá una vez y las pantallas chicas solo cambian
     estos tres valores, en vez de repetir los anchos más abajo. */
  --autoav-play:92px;   /* diámetro del botón */
  --autoav-tri:34px;    /* triangulito de play adentro */
  --autoav-aro:4;       /* grosor del aro (sin unidad: es un stroke de SVG) */
  /* Sin fill-mode: el estado en reposo ya es el visible. Si el navegador tiene
     las animaciones congeladas (pestaña en segundo plano), el overlay se ve
     igual en vez de quedarse pegado en el primer fotograma. */
  animation:autoav-entra var(--t-base) var(--ease-out);
}
@keyframes autoav-entra{ from{ opacity:0 } to{ opacity:1 } }

.autoav-kicker{
  margin:0; font-size:var(--fs-14); color:rgba(255,255,255,.7);
}
.autoav-titulo{
  /* El color va explícito: hay una regla general de h3 en esta misma capa que
     los pinta del azul de marca, y como el overlay tiene ESE MISMO azul de
     fondo, el título quedaba invisible. */
  margin:0; color:#fff;
  font-size:var(--fs-24); font-weight:700; line-height:var(--lh-snug);
  max-width:32ch;
}

/* ── Botón de play con el aro de la cuenta regresiva ── */
.autoav-play{
  position:relative; display:grid; place-items:center;
  width:var(--autoav-play); height:var(--autoav-play); margin:var(--sp-2) 0;
  border-radius:var(--r-pill); text-decoration:none; color:#fff;
  transition:transform var(--t-fast) var(--ease-out);
}
.autoav-play:hover{ transform:scale(1.06) }

.autoav-aro{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) }
.autoav-aro circle{ fill:none; stroke-width:var(--autoav-aro); }
.autoav-aro-bg{ stroke:rgba(255,255,255,.28) }
.autoav-aro-fg{
  stroke:var(--pame-orange);
  stroke-linecap:round;
  /* pathLength="100" en el SVG: el trazo se mide de 0 a 100, sin calcular 2πr. */
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset 1s linear;
}
.autoav-tri{ width:var(--autoav-tri); height:var(--autoav-tri); fill:#fff; margin-left:var(--sp-1) }

.autoav-cancelar{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:var(--fs-16); font-weight:700; color:#fff;
}
.autoav-cancelar:hover{ text-decoration:underline }

.autoav-nunca{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:var(--fs-12);
  color:rgba(255,255,255,.55); text-decoration:underline;
}
.autoav-nunca:hover{ color:#fff }

/* En pantallas chicas el video es bajito: achicamos todo para que entre. */
@media (max-width:640px){
  .autoav{ gap:var(--sp-2); padding:var(--sp-4);
           --autoav-play:68px; --autoav-tri:26px }
  .autoav-titulo{ font-size:var(--fs-18) }
  .autoav-play{ margin:var(--sp-1) 0 }
  .autoav-kicker{ font-size:var(--fs-12) }
}

@media (prefers-reduced-motion:reduce){
  .autoav{ animation:none }
  .autoav-play{ transition:none }
}

/* ============================================================
   PANEL ADMIN · FORMACIONES (pestaña Contenido)
   ------------------------------------------------------------
   La lista es la misma tabla que Avisos (.tabla-wrap + table.alumnos);
   acá solo se define lo propio: la celda con chip/cuenta + botón, y el
   encabezado de las tres pantallas de una formación (volver + título +
   navegación Detalles / Grupos / Temario).
   ============================================================ */

.fm-tabla{ min-width:840px }
.fm-tabla td{ vertical-align:middle }
/* Proporciones fijas: si no, el título se come la fila y las columnas de
   edición quedan tan angostas que todo cae en dos líneas. */
.fm-tabla th:nth-child(1){ width:38% }   /* Formación */
.fm-tabla th:nth-child(2){ width:26% }   /* Contenido */
.fm-tabla th:nth-child(3){ width:22% }   /* Grupos    */
.fm-tabla th:nth-child(4){ width:10% }   /* Detalles  */

/* Celda de la tabla: dato a la izquierda, su botón de edición a la derecha.
   El botón no se parte en dos líneas aunque la columna quede angosta. */
.fm-cel{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap }
.fm-cel .btn-mini{ flex:none; white-space:nowrap }
/* El lápiz va PRIMERO, contra el borde izquierdo de su columna: así queda
   alineado en todas las filas (arrancan todas en el mismo x) y al mismo tiempo
   pegado al dato que edita. Puesto detrás del texto, cada fila lo dejaba en un
   lugar distinto porque los títulos y las cuentas nunca miden lo mismo. */
.fm-sub{ display:block; margin-top:var(--sp-1); color:var(--fg-3); font-size:var(--fs-12) }
/* Los chips ocupan el ancho que queda y se apilan entre ellos: así el lápiz
   nunca se cae a una segunda línea por tener muchos grupos. */
.fm-chips{ display:flex; gap:var(--sp-1); flex-wrap:wrap; flex:1 1 0; min-width:0 }
.fm-nada{ color:var(--fg-3); font-size:var(--fs-14) }
.fm-cuenta{ color:var(--fg-2); font-size:var(--fs-14); white-space:nowrap }
.fm-ver{ display:inline-flex; align-items:center; gap:var(--sp-1); text-decoration:none }

/* Encabezado de una formación abierta (detalles / grupos / temario). */
.fm-head{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  margin-bottom:var(--sp-5) }
.fm-head .volver{ width:auto; margin:0 }
.fm-head .fm-ver{ white-space:nowrap }
.fm-tit{ margin:0; font-size:var(--fs-24) }

/* margin-left:auto en vez de un separador flexible: si el encabezado se parte
   en dos líneas, la navegación sigue quedando a la derecha de la suya. */
.fm-nav{ display:flex; gap:var(--sp-1); padding:var(--sp-1); margin-left:auto;
  background:var(--pame-bg-soft); border-radius:var(--r-pill) }
.fm-nav-btn{ margin-top:0; padding:var(--sp-2) var(--sp-4); border-radius:var(--r-pill);
  background:none; color:var(--fg-2); font-size:var(--fs-14) }
.fm-nav-btn:hover{ background:#fff; color:var(--pame-blue) }
.fm-nav-btn.on{ background:#fff; color:var(--pame-blue-700); box-shadow:var(--shadow-xs) }

@media (max-width:720px){
  .fm-tit{ width:100%; font-size:var(--fs-20) }
  .fm-nav{ width:100%; justify-content:space-between }
}

/* ============================================================
   CALENDARIO DEL ALUMNO  (calendario.html)
   ------------------------------------------------------------
   Los hitos son los avisos con fecha. Dos piezas: el panel de
   suscripción (una sola vez, se actualiza solo) y la lista de
   próximos eventos, cada uno con su botón para agendarlo suelto.
   ============================================================ */

.cal-sub{ display:flex; gap:var(--sp-5); align-items:center;
  background:linear-gradient(120deg,var(--pame-blue-10),var(--pame-teal-10));
  border:1px solid var(--pame-blue-20); border-radius:var(--r-md);
  padding:var(--sp-5); margin-bottom:var(--sp-6) }
.cal-sub-txt{ flex:1; min-width:0 }
.cal-sub-tit{ font-size:var(--fs-20); font-weight:700; color:var(--fg-1); margin:0 0 var(--sp-2) }
.cal-sub-p{ font-size:var(--fs-14); color:var(--fg-2); margin:0 0 var(--sp-3); max-width:70ch }
.cal-sub-btns{ display:flex; gap:var(--sp-2); flex-wrap:wrap }
.cal-sub-nota{ font-size:var(--fs-12); color:var(--fg-3); margin:var(--sp-3) 0 0; max-width:70ch }
.cal-sub-nota b{ color:var(--fg-2) }

/* Botón del calendario: mismo alto que cualquier control del sistema, sirva de
   <a> (los links a Google/webcal) o de <button> (copiar, bajar el .ics). */
.cal-btn{ display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--ctl-h); padding:0 var(--sp-4); width:auto; margin:0;
  border:var(--ctl-bd); border-radius:var(--r-pill); background:var(--pame-bg);
  color:var(--pame-blue); font-family:var(--font-sans); font-size:var(--fs-12);
  font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out) }
.cal-btn:hover{ border-color:var(--pame-blue); background:var(--pame-blue-10) }
.cal-btn.primario{ background:var(--pame-blue); border-color:var(--pame-blue); color:#fff }
.cal-btn.primario:hover{ background:var(--pame-blue-700); border-color:var(--pame-blue-700) }

.cal-mes{ font-size:var(--fs-14); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--fg-3); margin:var(--sp-6) 0 var(--sp-3) }
.cal-mes:first-child{ margin-top:0 }

.cal-item{ display:flex; gap:var(--sp-4); background:var(--pame-bg);
  border:1px solid var(--pame-line); border-left:4px solid var(--pame-blue-30);
  border-radius:var(--r-md); padding:var(--sp-4); margin-bottom:var(--sp-3);
  box-shadow:var(--shadow-xs) }
.cal-item.evento{ border-left-color:var(--pame-teal) }
.cal-item.bonus{ border-left-color:var(--pame-orange) }

/* Bloque de la fecha, a la izquierda */
.cal-fecha{ flex:none; width:56px; text-align:center; padding-top:2px }
.cal-dia{ display:block; font-size:var(--fs-32); font-weight:800; line-height:1; color:var(--fg-1) }
.cal-mes-mini{ display:block; font-size:var(--fs-12); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--fg-3); margin-top:2px }

.cal-cuerpo{ flex:1; min-width:0 }
.cal-top{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-1) }
.cal-ico{ width:22px; height:22px; flex:none; display:grid; place-items:center; color:var(--pame-teal-700) }
.cal-ico svg{ width:16px; height:16px }
.cal-tipo{ font-size:var(--fs-12); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--fg-3) }
.cal-curso{ font-size:var(--fs-12); font-weight:700; color:var(--pame-blue-700);
  background:var(--pame-blue-10); padding:2px var(--sp-2); border-radius:var(--r-pill) }
.cal-rel{ font-size:var(--fs-12); font-weight:700; color:var(--pame-orange-600); margin-left:auto }
.cal-tit{ font-size:var(--fs-16); font-weight:700; color:var(--fg-1); margin:0 }
.cal-hora{ font-size:var(--fs-12); color:var(--pame-teal-700); font-weight:600; margin:var(--sp-1) 0 0 }
.cal-body{ font-size:var(--fs-14); color:var(--fg-3); margin:var(--sp-2) 0 0; line-height:var(--lh-normal) }
.cal-acciones{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3) }

@media (max-width:720px){
  .cal-sub{ padding:var(--sp-4) }
  .cal-item{ gap:var(--sp-3); padding:var(--sp-3) }
  .cal-fecha{ width:44px }
  .cal-dia{ font-size:var(--fs-24) }
  .cal-rel{ margin-left:0 }
  .cal-acciones .cal-btn{ flex:1 1 auto }
}

/* ============================================================
   PUERTA DEL ENCUENTRO EN VIVO  (vivo.html)
   ------------------------------------------------------------
   Pantalla PÚBLICA y suelta: es el link que se comparte en el
   grupo de WhatsApp. Sin menú ni barra a propósito — quien llega
   viene a entrar a una clase que empieza en dos minutos, con el
   teléfono en la mano y probablemente en el navegador interno de
   WhatsApp. Un solo campo por pantalla y botones grandes.
   ============================================================ */

.vivo-body{ margin:0; min-height:100vh; display:grid; place-items:center;
  padding:var(--sp-5); background:var(--pame-bg-soft); font-family:var(--font-sans) }
.vivo-caja{ width:100%; max-width:420px; background:var(--pame-bg);
  border:1px solid var(--pame-line); border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5); box-shadow:var(--shadow-md); text-align:center }
.vivo-logo{ height:44px; width:auto; margin:0 auto var(--sp-5); display:block }
.vivo-tit{ font-size:var(--fs-24); font-weight:700; color:var(--fg-1); margin:0 0 var(--sp-2) }
.vivo-sub{ font-size:var(--fs-14); color:var(--fg-2); margin:0 0 var(--sp-5); line-height:var(--lh-normal) }
.vivo-sub b{ color:var(--fg-1); overflow-wrap:anywhere }

/* Controles grandes: acá no aplica --ctl-h (38px es de escritorio). Un dedo
   apurado necesita 52px, y en iOS un input de menos de 16px hace zoom solo. */
.vivo-input{ width:100%; box-sizing:border-box; height:52px; padding:0 var(--sp-4);
  font-family:var(--font-sans); font-size:var(--fs-16); color:var(--fg-1);
  border:var(--ctl-bd); border-radius:var(--r-md); background:var(--pame-bg);
  text-align:center; margin-bottom:var(--sp-3) }
.vivo-input:focus{ outline:none; border-color:var(--pame-teal); box-shadow:0 0 0 3px var(--pame-teal-20) }
.vivo-codigo{ font-size:var(--fs-32); font-weight:700; letter-spacing:.4em; text-indent:.4em }

.vivo-btn{ width:100%; min-height:52px; margin:0; border:0; border-radius:var(--r-pill);
  background:var(--pame-orange); color:#fff; font-family:var(--font-sans);
  font-size:var(--fs-16); font-weight:800; cursor:pointer }
.vivo-btn:hover{ background:var(--pame-orange-600) }
.vivo-btn:disabled{ opacity:.65; cursor:default }

.vivo-link{ background:none; border:0; margin:var(--sp-4) 0 0; padding:0; width:auto;
  color:var(--pame-blue); font-family:var(--font-sans); font-size:var(--fs-14);
  font-weight:700; text-decoration:underline; cursor:pointer }
.vivo-pie{ font-size:var(--fs-12); color:var(--fg-3); margin:var(--sp-4) 0 0 }
.vivo-cargando{ font-size:var(--fs-16); color:var(--fg-2); margin:var(--sp-6) 0 }
.vivo-error{ font-size:var(--fs-14); color:var(--pame-danger); background:#fdecea;
  border:1px solid #f5c6c0; border-radius:var(--r-sm);
  padding:var(--sp-3); margin:0 0 var(--sp-4); line-height:var(--lh-normal) }

/* Elegir entre dos encuentros (solo aparece si tiene acceso a más de uno) */
.vivo-lista{ display:flex; flex-direction:column; gap:var(--sp-2) }
.vivo-item{ width:100%; margin:0; text-align:left; cursor:pointer;
  background:var(--pame-bg); border:1px solid var(--pame-line); border-radius:var(--r-md);
  padding:var(--sp-4) }
.vivo-item:hover{ border-color:var(--pame-teal); background:var(--pame-teal-10) }
.vivo-item b{ display:block; font-size:var(--fs-16); font-weight:700; color:var(--fg-1) }
.vivo-item span{ display:block; font-size:var(--fs-12); color:var(--fg-3); margin-top:2px }

/* Encuentros en vivo, en el panel de Avisos (columnas de las filas repetidas) */
.vivos-panel{ margin-bottom:var(--sp-5) }
.vivos-tit{ font-size:var(--fs-18); margin:0 0 var(--sp-2) }
.vivos-filas{ --ui-cols: minmax(200px,1.6fr) minmax(140px,1fr) auto auto auto auto;
  --ui-cols-mob: 1fr auto }
.asis-filas{ --ui-cols: minmax(140px,1.2fr) minmax(140px,1.2fr) auto;
  --ui-cols-mob: 1fr auto }