/* App de la plataforma — usa el sistema de marca PAME (colors_and_type.css).
Cargar colors_and_type.css ANTES que este archivo. */
/* La escala tipográfica (+2 sobre nominal en el texto, títulos grandes nominales,
todo × --ui-scale para el A-/A+) vive AHORA en colors_and_type.css, en un solo
lugar. Antes se redefinía acá y pisaba la capa 1, dejando afuera tamaños nuevos
(fs-11/13/15). No volver a duplicarla acá. */
*{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(--btn-bg);color:var(--fg-on-brand);
margin-top:var(--sp-1);transition:background var(--t-base) var(--ease-out)}
/* Hover del botón base (fondo azul primario) — SOLO cuando el botón es "pelado" (sin clase),
típico de los forms de auth (login/reset/plataforma). Un botón con clase propia
(.btn-add, .btn-mini, .btn-del, .btn-card, .ghost, .rsn-send, .pp-btn…) trae su
propio :hover: dejarle este azul lleno rompe el contraste (fondo azul + texto oscuro).
Antes había ~10 overrides "sin esto queda azul" — este scope los vuelve innecesarios. */
button:not([class]):hover{background:var(--btn-bg-h)}
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;gap:var(--sp-4);
height:var(--topbar-h);padding:0 var(--sp-6);color:var(--top-fg,inherit);
background:var(--top-bg,var(--surface-card));border-bottom:1px solid var(--slate-200)}
.topbar .brand{font-size:var(--fs-24);color:var(--top-fg,var(--pame-blue))}
/* El nombre de la academia (sin logo) sigue el texto de la barra: sobre una barra oscura
del tema quedaba navy sobre negro, ilegible. */
.topbar .logo-txt{color:var(--top-fg,var(--pame-blue-900))}
.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)}
/* CTA bajo el estado vacío: lleva al catálogo (tienda) para que nadie quede sin salida. */
.hint-cta{margin-top:var(--sp-4);display:flex}
/* Aviso "esperando verificación": una transferencia del alumno subida y a la espera del dueño. */
.tr-pend-box{position:relative;display:flex;align-items:flex-start;gap:12px;margin:var(--sp-4) 0 0;
background:var(--pame-blue-10);border:1px solid var(--pame-blue-30);border-left:4px solid var(--pame-blue);
border-radius:var(--r-md);padding:16px 18px}
.tr-pend-x{position:absolute;top:8px;right:10px;background:none;border:0;font-size:20px;line-height:1;
cursor:pointer;color:var(--fg-3);padding:2px 6px;border-radius:var(--r-sm)}
.tr-pend-x:hover{background:var(--pame-blue-20);color:var(--fg-1)}
.tr-pend-ic{font-size:22px;line-height:1.2;flex:none}
.tr-pend-txt{min-width:0}
.tr-pend-txt b{display:block;color:var(--fg-1);font-size:var(--fs-15);margin-bottom:2px}
.tr-pend-txt span{color:var(--fg-2);font-size:var(--fs-13);line-height:1.5}
.tr-pend-chip{display:inline-flex;align-items:center;gap:6px;margin-top:8px;background:#fff;
border:1px solid var(--pame-blue-30);color:var(--pame-blue-700,#02334D);border-radius:var(--r-pill);
padding:4px 11px;font-weight:800;font-size:var(--fs-12)}
.tr-pend-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--btn-bg)}
/* Badge de vencimiento de membresía en la ficha del alumno (panel): que salte a la vista. */
.memb-badge{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:3px 10px;
border-radius:var(--r-pill);font-size:11px;font-weight:800;line-height:1.4;white-space:nowrap}
.memb-badge.ok{background:var(--pame-teal-10);color:var(--pame-teal-700)}
.memb-badge.pronto{background:var(--pame-orange-10);color:var(--pame-orange)}
.memb-badge.vencida{background:#fff4f4;color:var(--pame-danger)}
.memb-badge.off{background:var(--pame-bg-soft);color:var(--fg-3)}
#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}
}
/* ---- Ranking de la formación (gamificación) ----
Podio de 3 con foto (el resto no expone nombres: cada alumno ve solo su
propio puesto). Se pinta solo si el curso tiene `gamificacion` encendida.
Lo arma formacion.html; los datos salen de la RPC ranking_formacion. */
.rank{--av1:var(--sp-8);--av2:var(--sp-7);
margin:0 0 var(--sp-7);padding:var(--sp-5) var(--sp-5) var(--sp-4);
background:linear-gradient(180deg,var(--pame-orange-10),var(--bg-1));
border:1px solid var(--pame-line);border-radius:var(--r-lg);box-shadow:var(--shadow-xs)}
.rank-head{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.rank-tit{font-size:var(--fs-18);margin:0;color:var(--fg-1)}
.rank-sub{font-size:var(--fs-12);color:var(--fg-3)}
/* Las 3 gradas: el 1º al medio y más alto, 2º izquierda, 3º derecha */
.podio{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:var(--sp-3);
list-style:none;margin:0;padding:0;max-width:520px;margin-inline:auto}
.podio-seat{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);text-align:center}
.podio-seat.p1{order:2}.podio-seat.p2{order:1}.podio-seat.p3{order:3}
.podio-medalla{font-size:var(--fs-24);line-height:1}
.podio-avatar{width:var(--av2);height:var(--av2);border-radius:var(--r-pill);overflow:hidden;
display:grid;place-items:center;background:var(--pame-blue-10);color:var(--pame-blue);
font-weight:800;font-size:var(--fs-16);border:2px solid var(--bg-1);box-shadow:var(--shadow-sm)}
.podio-seat.p1 .podio-avatar{width:var(--av1);height:var(--av1);border-color:var(--pame-orange);
box-shadow:var(--shadow-glow)}
.podio-avatar img{width:100%;height:100%;object-fit:cover}
.podio-nombre{font-size:var(--fs-12);font-weight:700;color:var(--fg-1);max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podio-pct{font-size:var(--fs-12);font-weight:800;color:var(--pame-teal)}
/* Grada dibujada bajo cada asiento: el 1º más alto */
.podio-base{width:100%;border-radius:var(--r-sm) var(--r-sm) 0 0;margin-top:var(--sp-1);
background:color-mix(in srgb,var(--pame-orange) 22%,var(--bg-1))}
.podio-seat.p1 .podio-base{height:var(--sp-8)}
.podio-seat.p2 .podio-base{height:var(--sp-6)}
.podio-seat.p3 .podio-base{height:var(--sp-5)}
/* Asiento vacío: todavía no hay nadie en ese puesto */
.podio-seat.vacio .podio-avatar{background:transparent;border:2px dashed var(--pame-line);
color:var(--fg-3);box-shadow:none}
.podio-seat.vacio .podio-nombre,.podio-seat.vacio .podio-pct{color:var(--fg-3)}
/* Tu lugar: "espacios vacíos" y, si estás más abajo del podio, tu propio puesto */
.rank-yo{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px dashed var(--pame-line);
font-size:var(--fs-14);color:var(--fg-2);flex-wrap:wrap}
.rank-yo .vacio-dot{width:var(--sp-4);height:var(--sp-4);border-radius:var(--r-pill);
border:1px dashed var(--pame-line)}
.rank-yo .yo-chip{display:inline-flex;align-items:center;gap:var(--sp-2);
padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);
background:var(--pame-teal);color:var(--fg-on-brand);font-weight:800;font-size:var(--fs-12)}
.rank-yo.en-podio .yo-chip{background:var(--pame-orange)}
.rank-yo b{color:var(--fg-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(--btn-bg);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-nota{font-size:var(--fs-14);color:var(--fg-2);margin:var(--sp-1) 0 0;line-height:1.4}
.dst-scroller{position:relative}
.dst-items{display:flex;gap:var(--sp-2);overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.dst-items::-webkit-scrollbar{display:none}
/* Flechas del carrusel: solo cuando la fila desborda (.has-nav lo pone el JS). */
.dst-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:none;
width:36px;height:36px;border-radius:999px;border:1px solid var(--pame-orange-30);
background:var(--pame-bg);color:var(--pame-orange-600);font-size:22px;line-height:1;cursor:pointer;
align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.dst-nav.prev{left:-6px}
.dst-nav.next{right:-6px}
.dst-nav:hover{background:var(--pame-orange);color:#fff;border-color:var(--pame-orange)}
.dst-nav:disabled{opacity:.35;cursor:default}
.destacada.has-nav .dst-nav{display:flex}
.destacada.has-nav .dst-items{padding:2px 30px}
/* 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;flex:1 0 260px;scroll-snap-align:start;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-item{flex-basis:85%}
.destacada.has-nav .dst-items{padding:2px 8px}
.dst-nav{width:32px;height:32px;font-size:20px}
.dst-nav.prev{left:-4px}
.dst-nav.next{right:-4px}
}
/* ---- 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(--btn-bg)}
.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(--btn-bg);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(--btn-bg-h)}
@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)}
/* Indicador de progreso (no es un input marcable): sin borde ni fondo cuando está
vacío, así no invita a "tildar". Al pasar a .vista se pinta teal con el ✓. */
.leccion .chk{width:22px;height:22px;flex:none;border:2px solid transparent;border-radius:6px;
display:grid;place-items:center;color:#fff;font-size:13px;background:transparent;
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}
/* La escuela que todavía no cargó su logo se identifica con su nombre en texto.
Es el reemplazo del (lo decide el middleware, ver app/functions/_middleware.js),
así que sirve en los cinco lugares donde va un logo: la barra, la landing, el login,
el checkout y las páginas legales. Uno solo para todos: el nombre de una escuela mide
lo que mide y no tiene por qué achicarse según la pantalla en la que aparezca. */
.logo-txt{display:block;line-height:1.15;font-size:var(--fs-20);font-weight:700;
letter-spacing:.01em;color:var(--pame-blue-900);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;max-width:min(52vw,320px)}
/* El logo casi siempre va adentro de un (a Inicio). Una imagen no se subraya, un texto
sí: sin esto el nombre de la escuela aparece subrayado como un link cualquiera. El
subrayado se propaga desde el padre, así que hay que apagarlo en el padre. */
a:has(> .logo-txt){text-decoration:none}
/* Donde el logo iba centrado y con aire abajo (login, checkout, la puerta del vivo),
el texto que lo reemplaza tiene que quedar igual: la imagen traía ese margen en su
propia clase, y el texto no la lleva. */
.logo-img-wrap .logo-txt{margin:0 auto}
.co-head .logo-txt{margin:0 auto var(--sp-4)}
.vivo-caja .logo-txt{margin:0 auto var(--sp-5)}
/* ---- 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))}
/* Con 1 sola formación no estiramos la tarjeta al ancho completo: si no, la
imagen 16:9 queda a 5:1 (recortada arriba y abajo, cara de "apaisada"). Se
topa al ancho de una tarjeta de una grilla de tres y queda alineada a la
izquierda. En tablet/mobile los overrides de abajo se llevan la última palabra. */
.cursos-grid[style*="--cc-cols:1"]{grid-template-columns:minmax(0,340px)}
/* 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(--btn-bg);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(--btn-bg-h)}
.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)}
/* El plan en el que ya estás: resaltado con el acento de marca. */
.plan-row.plan-actual{border-color:var(--pame-teal);background:var(--pame-teal-050,var(--pame-bg-soft));box-shadow:inset 0 0 0 1px var(--pame-teal)}
.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)}
/* En el panel (admin/superadmin) los paneles van en BLANCO para resaltar sobre el
fondo celeste con manchones. En páginas del alumno se deja el token (tema academia). */
body[data-page="admin"] .adm-panel,
body[data-page="panel"] .adm-panel{background:var(--pame-bg)}
.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}
/* ── Tablas del panel como TARJETAS en móvil ──────────────────────────────────
En vez de scroll lateral (el `min-width:760px` lo forzaba), cada fila es una
tarjeta y cada dato muestra su etiqueta arriba. La etiqueta la pone
`app/tabla-cards.js` copiando el
al data-label del
. El orden por
columnas (thead clickeable) queda solo en desktop. Se usa `table.alumnos` para
igualar la especificidad de las reglas base de arriba. */
@media(max-width:720px){
.tabla-wrap{overflow-x:visible;border:none;background:transparent;border-radius:0}
table.alumnos{display:block;width:100%;min-width:0;background:transparent}
table.alumnos thead{display:none}
table.alumnos tbody{display:block}
table.alumnos tr{display:block;border:1px solid var(--pame-line);border-radius:var(--r-md);
background:#fff;padding:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--shadow-xs)}
table.alumnos td{display:block;padding:var(--sp-1) 0;border:none;text-align:left;min-width:0}
table.alumnos td[data-label]::before{content:attr(data-label);display:block;
font-weight:700;color:var(--fg-3);font-size:var(--fs-11);text-transform:uppercase;
letter-spacing:.02em;margin-bottom:2px}
table.alumnos td:empty{display:none}
/* Celda de acciones (última columna, sin encabezado) = barra de botones al pie. */
table.alumnos td:last-child{margin-top:var(--sp-2);display:flex;flex-wrap:wrap;gap:var(--sp-2)}
table.alumnos td:last-child:empty{display:none}
/* Los inputs de una celda (doc, etc.) no necesitan ocupar todo el ancho acá. */
table.alumnos .doc-cell{flex-wrap:wrap}
}
.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:var(--fs-11);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(--btn-bg-h);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}
/* Instructivo de uso del ebook (texto rico, buyer-only) arriba del PDF */
.ebook-instructivo{margin:0 0 var(--sp-6)}
/* Capítulos del video (marcas de tiempo clickeables, bajo el reproductor) */
.caps{margin-top:var(--sp-3)}
.caps-tit{font-size:var(--fs-12);font-weight:800;letter-spacing:.02em;text-transform:uppercase;
color:var(--fg-3);margin:0 0 var(--sp-2)}
.caps-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.cap-row{display:flex;align-items:baseline;gap:var(--sp-3);width:100%;margin:0;text-align:left;
padding:9px 12px;border:1px solid var(--pame-line);border-radius:var(--r-sm);background:#fff;
color:var(--fg-1);cursor:pointer;font-size:var(--fs-14);
transition:border-color var(--t-fast),background var(--t-fast)}
.cap-row:hover{border-color:var(--pame-teal);background:var(--pame-teal-10)}
.caps .cap-t{flex:none;font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--fs-12);
color:var(--pame-teal-700);min-width:var(--sp-8)}
.caps .cap-tit{flex:1;min-width:0;font-weight:600}
/* Editor de capítulos (admin): el input de tiempo va angosto y centrado */
.adm-row .cap-t{flex:none;width:var(--sp-9);text-align:center;font-variant-numeric:tabular-nums}
/* Material adjunto (descargable) — bloque destacado para que no quede perdido.
.materiales-parte (histórico, card completa con header verde) sigue existiendo
por si algún día se usa suelto; hoy va INLINE dentro de la parte contenido
con .materiales-inline: divisor sutil + label chica arriba, sin card doble. */
.materiales-parte .parte-head{background:var(--pame-teal-10)}
.materiales-inline{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px dashed var(--pame-line)}
.materiales-inline .mi-head{font-size:var(--fs-12);font-weight:700;color:var(--pame-teal-700);
text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--sp-2)}
.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}
/* ════════════════════════════════════════════════════════════════════════
Trabajo práctico (parte "entrega"): consigna + ventana + envío del alumno.
════════════════════════════════════════════════════════════════════════ */
.tp-vent{font-size:var(--fs-14);color:var(--fg-2);margin:var(--sp-3) 0 0}
/* Badge contador de cierre de la entrega. Por defecto teal; vira a ámbar
con < 1 día y a rojo con < 1 h o ya cerrada. */
.tp-cd{display:inline-flex;align-items:center;gap:6px;margin-left:var(--sp-1);
padding:2px var(--sp-2);border-radius:var(--r-pill);white-space:nowrap;
font-size:var(--fs-12);font-weight:700;
background:var(--pame-teal-10,var(--teal-050));color:var(--pame-teal);
border:1px solid var(--pame-teal-40)}
.tp-cd::before{content:"⏳";font-weight:400}
.tp-cd.cd-warn{background:var(--warning-soft);color:#8A5A00;border-color:var(--warning)}
.tp-cd.cd-urgent{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.tp-cd.cd-cerrado{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.tp-form{margin-top:var(--sp-3)}
.tp-campo{margin-bottom:var(--sp-3)}
.tp-campo label{display:block;font-size:var(--fs-12);font-weight:700;color:var(--fg-2);margin-bottom:6px}
.tp-nota{font-weight:600;color:var(--fg-3)}
/* Selector de archivos con estilo del sistema (el input nativo va oculto) */
.tp-campo .tp-file{display:inline-flex;flex-direction:row;align-items:center;gap:var(--sp-2);margin:0;cursor:pointer;
font-size:var(--fs-14);font-weight:600;color:var(--fg-1);text-transform:none;letter-spacing:normal}
.tp-file-btn{display:inline-flex;align-items:center;height:var(--ctl-h);padding:0 var(--sp-4);
border:1px solid var(--pame-line);border-radius:var(--r-sm);background:var(--bg-2);
color:var(--fg-2);font-weight:700;white-space:nowrap;
transition:border-color var(--t-base),color var(--t-base),background var(--t-base)}
.tp-file:hover .tp-file-btn{border-color:var(--pame-teal);color:var(--pame-blue);background:#fff}
.tp-file-name{color:var(--fg-3);font-weight:600}
.tp-file-name.has{color:var(--fg-1);font-weight:700}
.tp-msg{font-size:var(--fs-14);font-weight:700}
.tp-msg.no{color:var(--pame-red,#c0392b)}
.tp-envio{border:1px solid var(--pame-line);border-radius:var(--r-sm);background:var(--pame-bg-soft);
padding:var(--sp-3);margin:var(--sp-3) 0}
.tp-estado{font-size:var(--fs-13);font-weight:700;margin:0 0 var(--sp-2)}
.tp-estado.tp-aprobada{color:var(--pame-teal)}
.tp-estado.tp-rehacer{color:var(--pame-orange)}
.tp-adjs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-2) 0}
.tp-adj{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);padding:4px 10px;
border:1px solid var(--pame-line);border-radius:var(--r-pill);background:#fff;color:var(--fg-1)}
.tp-adj-x{border:none;background:none;color:var(--fg-3);cursor:pointer;font-size:var(--fs-14);line-height:1;padding:0}
.tp-adj-x:hover{color:var(--pame-orange)}
.tp-dev{font-size:var(--fs-14);color:var(--fg-1);margin-top:var(--sp-2);white-space:pre-wrap}
/* ════════════════════════════════════════════════════════════════════════
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}
/* ════════════════════════════════════════════════════════════════════════
Foro de la clase — comentarios y dudas (solo si cuentas.foro_activo).
Público entre alumnos; el admin responde y modera desde el panel.
════════════════════════════════════════════════════════════════════════ */
.foro-parte .parte-head{background:var(--pame-blue-10)}
/* Caja de escritura (comentario nuevo o respuesta) */
.foro-composer{display:flex;flex-direction:column;gap:var(--sp-2)}
.foro-composer--resp{margin-top:var(--sp-3);padding-left:var(--sp-4);border-left:2px solid var(--pame-line)}
.foro-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}
.foro-campo:focus{outline:none;border-color:var(--pame-teal);box-shadow:0 0 0 3px rgba(0,168,193,.20)}
/* Casilla de privacidad en una sola línea: checkbox + texto al lado (el
mantiene el texto y el link juntos como un solo bloque; alta especificidad para
ganarle a cualquier regla suelta de input/label). */
.foro-composer .foro-acepta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:var(--fs-13);color:var(--fg-2);text-transform:none;letter-spacing:normal;margin:8px 0}
.foro-composer .foro-acepta input[type=checkbox]{width:16px;height:16px;flex:none;margin:0;accent-color:var(--pame-teal);cursor:pointer}
.foro-composer .foro-acepta .foro-acepta-txt{flex:1 1 auto;min-width:0;text-transform:none}
.foro-composer .foro-acepta a{color:var(--pame-teal-700);font-weight:700;text-transform:none}
.foro-enviar{min-height:var(--ctl-h);width:auto;margin:0;padding:0 var(--sp-4)}
.foro-msg{font-size:var(--fs-12);font-weight:700;align-self:center}
.foro-msg.no{color:var(--pame-danger)}
.foro-msg.ok{color:var(--pame-success)}
/* La lista de comentarios */
.foro-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)}
.foro-item{border:1px solid var(--pame-line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);background:#fff}
.foro-respuestas{margin-top:var(--sp-3);padding-left:var(--sp-4);border-left:2px solid var(--pame-line);
display:flex;flex-direction:column;gap:var(--sp-3)}
.foro-item-acc{margin-top:var(--sp-2)}
.foro-responder{font-size:var(--fs-12)}
/* Una línea: avatar + autor + cuándo + cuerpo */
.foro-fila{display:flex;gap:var(--sp-3);align-items:flex-start}
.foro-av{width:var(--sp-7);height:var(--sp-7);flex:none;border-radius:50%;object-fit:cover;
background:var(--pame-bg-soft);display:grid;place-items:center}
.foro-av--txt{font-size:var(--fs-14);font-weight:800;color:var(--pame-blue-700)}
.foro-fila.es-admin .foro-av{background:var(--pame-teal-10);color:var(--pame-teal-700)}
.foro-cuerpo{flex:1;min-width:0}
.foro-meta{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-12);color:var(--fg-3)}
.foro-meta b{color:var(--fg-1);font-size:var(--fs-14)}
.foro-badge{font-size:var(--fs-12);font-weight:700;padding:1px var(--sp-2);border-radius:var(--r-pill);
background:var(--pame-teal-10);color:var(--pame-teal-700)}
.foro-pend{font-size:var(--fs-12);font-weight:700;padding:1px var(--sp-2);border-radius:var(--r-pill);
background:var(--pame-orange-10);color:var(--pame-orange-600)}
.foro-fecha{white-space:nowrap}
.foro-texto{margin:var(--sp-1) 0 0;font-size:var(--fs-14);color:var(--fg-1);white-space:pre-wrap;word-break:break-word}
/* Foro · vista del panel admin (moderar y responder) */
.foro-badge--off{background:var(--pame-bg-soft);color:var(--fg-3)}
.foro-adm-item{border:1px solid var(--pame-line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
background:#fff;margin-top:var(--sp-3)}
.foro-adm-head{font-size:var(--fs-14)}
.foro-adm-meta{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-12);
color:var(--fg-1);margin-top:var(--sp-1)}
.foro-adm-texto{margin:var(--sp-1) 0 var(--sp-2);font-size:var(--fs-14);color:var(--fg-1);
white-space:pre-wrap;word-break:break-word}
.foro-adm-acc{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.foro-adm-kids{margin-top:var(--sp-3);padding-left:var(--sp-4);border-left:2px solid var(--pame-line);
display:flex;flex-direction:column;gap:var(--sp-3)}
.fm-reply-box{margin-top:var(--sp-2)}
/* 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(--btn-bg);color:#fff;border-color:var(--btn-bg)}
.nav-btn.next:hover:not(.off){background:var(--btn-bg-h);border-color:var(--btn-bg-h);color:#fff}
.nav-btn.next.destacado{box-shadow:0 0 0 4px var(--pame-teal-10)}
.nav-btn.off{opacity:.4;pointer-events:none}
/* Borde OPCIONAL de los botones primarios: un anillo interno del color --btn-border
(transparente por default = sin borde). Se usa box-shadow inset para no alterar el layout;
ninguno de estos botones trae box-shadow propio. Lo setea el dueño con "Borde de botones". */
.btn-card, .a-cta, .nav-btn.next, .cal-btn.primario, .afil-btn, .na-save, .btn-sim-open,
.afil-link button, .mk .btn-primary, .tema-prev-btn{
box-shadow: inset 0 0 0 1.5px var(--btn-border, transparent);
}
/* ---- 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){
/* height:auto + min-height: la barra CRECE si algo envuelve, en vez de mantener
los 64px fijos y derramar los botones sobre el título. */
.topbar{flex-wrap:wrap;gap:10px;padding:10px 16px;height:auto;min-height:var(--topbar-h)}
.topbar .brand{font-size:var(--fs-18)}
.logo-img{height:26px}
.logo-txt{font-size:var(--fs-16)}
.topbar > div{flex-wrap:wrap;gap:8px}
.ghost{padding:8px 12px;font-size:var(--fs-12)}
/* Accesos de la barra (ayuda, panel, cerrar sesión) en modo ícono: entran en una
sola fila y la barra no se apila ni se encima con el contenido. */
.topbar .ghost span{display:none}
.topbar .ghost{padding:9px}
/* El control de tamaño de texto no va en la barra de arriba en el celular:
la dejamos limpia (logo · campana · ayuda · salir). */
.topbar .size-ctl.in-top{display:none}
.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;margin:0}
.size-ctl button:hover{background:var(--pame-blue-10)}
.size-ctl button:disabled{opacity:.35;cursor:default}
/* En la barra de arriba (panel admin): estático, al lado de la campanita. */
/* En la barra el pill mide lo mismo que los demás controles (--ctl-h). El pill
suma su borde (1px) y su padding (2px) arriba y abajo, así que los botones de
adentro van más chicos para que el total dé --ctl-h y quede a la par. */
.size-ctl.in-top{position:static;left:auto;bottom:auto;z-index:auto;box-shadow:none;padding:2px;height:var(--ctl-h)}
.size-ctl.in-top button{width:30px;height:30px}
/* ---- 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(--btn-bg);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(--btn-bg-h);transform:translateY(-2px)}
.paobot-fab svg{width:30px;height:30px}
/* Con foto del asistente cargada, la carita llena el botón (sin el globito ni el fondo azul). */
.paobot-fab.con-foto{background:none;overflow:hidden}
.paobot-fab.con-foto:hover{background:none}
.paobot-fab-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
/* El isologo del chat de Educreia gira suave cada tantos segundos: invita a chatear
sin ser molesto (pausa larga + un giro lento). Solo el asistente de Educreia, no el
de alumnos. Se frena mientras el chat está abierto y con prefers-reduced-motion. */
@keyframes edu-iso-gira{ 0%,62%{ transform:rotate(0) } 100%{ transform:rotate(360deg) } }
.edu-ayuda-fab .edu-iso{ display:grid;place-items:center;transform-origin:50% 50%;
animation:edu-iso-gira 5s cubic-bezier(.45,0,.2,1) infinite }
.edu-ayuda-fab:hover .edu-iso{ animation-play-state:paused }
.edu-ayuda-panel.open ~ .edu-ayuda-fab .edu-iso{ animation:none }
@media (prefers-reduced-motion:reduce){ .edu-ayuda-fab .edu-iso{ animation:none } }
.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);
/* Tope por debajo del encabezado fijo (topbar + cinta de preview): así no se tapa con el menú. */
max-height:calc(100dvh - 92px - var(--head-h) - 12px);
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:flex;flex-direction:column}
.pb-head{background:var(--btn-bg);color:#fff;padding:16px 18px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex:none}
.pb-head-l{display:flex;align-items:center;gap:10px;min-width:0}
.pb-head-tit{min-width:0}
.pb-head-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;border:2px solid rgba(255,255,255,.55)}
.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;flex:1;min-height:0;overflow:auto}
.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;overflow:hidden} /* el que scrollea es .pb-msgs */
.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(--btn-bg);color:#fff}
.pb-msg--bot{align-self:flex-start;background:var(--pame-bg-soft);color:var(--pame-ink);
border:1px solid var(--pame-line)}
/* Respuesta del bot con la carita del asistente al lado (cuando la academia cargó una foto). */
.pb-row--bot{display:flex;align-items:flex-end;gap:var(--sp-2);align-self:flex-start;max-width:88%}
.pb-row--bot .pb-msg--bot{align-self:auto;max-width:100%}
.pb-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
/* Listas dentro de una respuesta del bot (formato markdown-lite). */
.pb-msg .pb-h{font-weight:700;margin:var(--sp-2) 0 var(--sp-1);font-size:var(--fs-14)}
.pb-msg .pb-h:first-child{margin-top:0}
.pb-msg .pb-list{margin:6px 0;padding-left:20px}
.pb-msg .pb-list li{margin:3px 0}
.pb-msg b{font-weight:700}
/* Link al artículo del Centro de ayuda que sugiere el asistente de ayuda. */
.pb-arts{margin-top:8px;padding-top:8px;border-top:1px solid var(--pame-line);font-size:var(--fs-13)}
.pb-arts a{color:var(--pame-teal-700);font-weight:700}
/* Link a "Mis consultas a Educreia" (bienvenida y confirmación de ticket). */
.pb-mis-link{color:var(--pame-teal-700);font-weight:700;text-decoration:underline;cursor:pointer}
/* Dejar una consulta cuando la ayuda no tiene la respuesta → se abre un ticket.
Acento AQUA (marca) para que se lea que va por OTRO canal (soporte humano), no la IA.
OJO: clases propias pb-dejar-* — NO `pb-soporte` (esa ya es el botón navy "Avisar a
soporte" del bot de alumnos, y colisionaba: texto oscuro sobre navy = ilegible). */
.pb-dejar{margin-top:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);
background:var(--pame-teal-10);border:1px solid var(--pame-teal-30);border-left:4px solid var(--pame-teal)}
.pb-dejar-lead{margin:0 0 var(--sp-2);font-size:var(--fs-13);color:var(--pame-ink);font-weight:600}
.pb-dejar-txt{width:100%;box-sizing:border-box;font:inherit;font-size:var(--fs-14);padding:10px 12px;
border:1px solid var(--pame-teal-30);border-radius:var(--r-sm);background:#fff;color:var(--fg-1);resize:vertical}
.pb-dejar-row{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.pb-dejar-send{width:auto;margin:0}
.pb-dejar-msg{font-size:var(--fs-12);color:var(--fg-3)}
.pb-dejar-ok{margin:0;padding:var(--sp-3);border-radius:var(--r-md);font-size:var(--fs-13);
color:var(--pame-ink);background:var(--pame-teal-10);border-left:4px solid var(--pame-teal)}
/* Adjuntos del bloque "Dejá tu consulta" (grabar pantalla / imagen / captura anotada). */
.pb-dejar-adj{margin-top:var(--sp-2)}
.adj-btns{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.adj-b{width:auto;margin:0;font-size:var(--fs-12);font-weight:600;padding:8px 12px;cursor:pointer;
background:#fff;color:var(--pame-teal-700);border:1px solid var(--pame-teal-30);border-radius:var(--r-sm)}
.adj-b:hover{background:var(--pame-teal-10);border-color:var(--pame-teal)}
.adj-rec{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);font-size:var(--fs-13);color:var(--pame-ink-2)}
.adj-rec .grow{flex:1}
.adj-dot{width:10px;height:10px;border-radius:50%;background:var(--pame-danger);animation:adj-pulse 1s infinite}
@keyframes adj-pulse{50%{opacity:.3}}
.adj-reloj{font-variant-numeric:tabular-nums;font-weight:700}
.adj-lista{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.adj-chip{position:relative;display:inline-flex;overflow:hidden;background:#fff;
border:1px solid var(--pame-teal-30);border-radius:var(--r-sm)}
.adj-chip img{width:56px;height:56px;object-fit:cover;display:block}
.adj-vid{display:flex;align-items:center;height:56px;padding:0 10px;font-size:var(--fs-12);font-weight:600;color:var(--pame-ink-2)}
.adj-x{position:absolute;top:2px;right:2px;width:18px;height:18px;padding:0;margin:0;border:0;border-radius:50%;
line-height:16px;font-size:13px;cursor:pointer;background:rgba(17,24,39,.72);color:#fff}
.adj-msg{margin:var(--sp-2) 0 0;font-size:var(--fs-12);color:var(--fg-3)}
/* Chips de adjunto (abren la URL firmada) en "Mis consultas" y en el panel. */
.pb-tk-adj{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)}
.pb-adj-open,.sop-adj{width:auto;margin:0}
.pb-adj-open{font-size:var(--fs-12);font-weight:600;padding:4px 10px;cursor:pointer;
background:var(--pame-teal-10);color:var(--pame-teal-700);border:1px solid var(--pame-teal-30);border-radius:var(--r-pill)}
.pb-adj-open:hover{background:var(--pame-teal-20)}
/* ── Anotador de capturas (anotador.js) — modal a pantalla completa ── */
.anot-back{position:fixed;inset:0;z-index:200;padding:16px;background:rgba(2,12,24,.72);
display:flex;align-items:center;justify-content:center}
.anot-modal{display:flex;flex-direction:column;max-width:min(1100px,96vw);max-height:94vh;overflow:hidden;
background:var(--pame-bg);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.anot-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);padding:10px 14px;
border-bottom:1px solid var(--pame-line);background:var(--pame-bg-soft)}
.anot-tools,.anot-colores,.anot-acciones{display:flex;align-items:center;gap:6px}
.anot-t{width:auto;min-width:38px;height:34px;margin:0;padding:0 8px;cursor:pointer;font-size:15px;
background:#fff;color:var(--pame-ink);border:1px solid var(--pame-line);border-radius:var(--r-sm)}
.anot-t.on{background:var(--pame-teal);color:#fff;border-color:var(--pame-teal)}
.anot-c{width:24px;height:24px;margin:0;padding:0;border-radius:50%;cursor:pointer;
border:2px solid #fff;box-shadow:0 0 0 1px var(--pame-line)}
.anot-c.on{box-shadow:0 0 0 2px var(--pame-teal)}
.anot-undo,.anot-clear{width:auto;height:34px;margin:0;padding:0 10px;cursor:pointer;font-size:var(--fs-12);
background:#fff;color:var(--pame-ink-2);border:1px solid var(--pame-line);border-radius:var(--r-sm)}
.anot-lienzo{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px;background:var(--btn-bg)}
.anot-cv{max-width:100%;max-height:72vh;background:#fff;cursor:crosshair;touch-action:none;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.anot-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);
padding:10px 14px;border-top:1px solid var(--pame-line)}
.anot-hint{font-size:var(--fs-12);color:var(--fg-3)}
.anot-cta{display:flex;gap:var(--sp-2)}
.anot-cta button{width:auto;margin:0}
.anot-text-in{position:fixed;z-index:210;min-width:120px;padding:2px 6px;transform:translate(-2px,-2px);
font:700 16px system-ui,sans-serif;background:#fff;border:2px solid var(--pame-teal);border-radius:4px}
/* ── Manual interno (pestaña Manual del panel de superadmin) — acordeón ── */
.doc{margin-bottom:var(--sp-2);background:var(--pame-bg);border:1px solid var(--pame-line);border-radius:var(--r-md)}
.doc > summary{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;list-style:none;
padding:12px 16px;font-weight:700;color:var(--pame-ink)}
.doc > summary::-webkit-details-marker{display:none}
.doc > summary::before{content:'▸';color:var(--pame-teal-700);transition:transform .15s}
.doc[open] > summary::before{transform:rotate(90deg)}
.doc[open] > summary{border-bottom:1px solid var(--pame-line)}
.doc-body{padding:14px 16px;font-size:var(--fs-14);color:var(--pame-ink-2);line-height:var(--lh-normal)}
.doc-body p{margin:0 0 10px}
.doc-body p:last-child{margin:0}
.doc-body code{background:var(--pame-bg-soft);padding:1px 5px;border-radius:4px;font-size:var(--fs-13)}
/* Lista de "Mis consultas". */
.pb-tk-head{font-weight:700;margin-bottom:var(--sp-2)}
.pb-tk-num,.sop-num{font-size:var(--fs-12);font-weight:700;color:var(--fg-3);font-variant-numeric:tabular-nums}
.pb-tk{border:1px solid var(--pame-line);border-radius:var(--r-sm);padding:var(--sp-2);margin-bottom:var(--sp-2);background:#fff}
.pb-tk-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:4px}
.pb-tk-fecha{font-size:var(--fs-12);color:var(--fg-3)}
.pb-tk-msg{margin:0;font-size:var(--fs-13);color:var(--pame-ink)}
.pb-tk-rta{margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--pame-line);font-size:var(--fs-13);color:var(--pame-ink-2)}
.pb-tk-chip{font-size:var(--fs-12);font-weight:700;padding:0 var(--sp-2);border-radius:var(--r-pill)}
.pb-tk-esp{background:var(--pame-orange-10);color:var(--pame-orange)}
.pb-tk-ok{background:var(--pame-teal-20);color:var(--pame-teal-700)}
.pb-tk-cerr{background:var(--pame-bg-soft);color:var(--fg-3)}
.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)}
/* Acciones al pie de una respuesta técnica del bot (video trabado, clase que no carga):
recargar la página y escalar a soporte. */
.pb-tecacc{align-self:flex-start;display:flex;gap:var(--sp-2);flex-wrap:wrap}
.pb-tecacc button{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--ctl-h);
padding:0 var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-14);font-weight:600;cursor:pointer}
/* Recargar: secundario (el primer paso que sugiere el texto, de un tap). */
.pb-recargar{background:var(--pame-bg-soft);color:var(--pame-ink);border:var(--ctl-bd)}
.pb-recargar:hover,.pb-recargar:focus-visible{border-color:var(--pame-blue);color:var(--pame-blue)}
/* Avisar a soporte: primario. Abre el bloque "Consultá" de la clase o cae al mail. */
.pb-soporte{background:var(--btn-bg);color:#fff;border:0}
.pb-soporte:hover,.pb-soporte:focus-visible{background:var(--btn-bg-h)}
.pb-soporte[disabled]{background:var(--pame-bg-soft);color:var(--pame-ink-2);cursor:default}
/* 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 */
/* El panel admin NO tiene el rail del alumno: --side-w:0 para que las pestañas y el
contenido queden pegados al borde izquierdo (antes arrastraban los 295px del rail). */
/* El menú del admin tiene el MISMO ancho que el rail del alumno (--side-w, 295px), para
que los dos menús se vean iguales. --side-w:0 porque el admin no lleva el rail del alumno. */
body[data-page="admin"],body[data-page="panel"]{--side-w:0px;--sub-w:295px}
/* margin-right:0 anula el `auto` que hereda de `.panel{margin:0 auto}`. footer.js pone
`sf-sticky` al body (flex column): con margin-right:auto, el panel NO se estira y colapsa
al ancho de su contenido (se veía en el dashboard del home, de filas angostas; las demás
secciones lo tapaban con sus tablas anchas). Con margin-right:0 ocupa siempre todo el ancho
disponible a la derecha del menú lateral. */
body[data-page="admin"] .panel.ancho,body[data-page="panel"] .panel.ancho{margin-left:var(--sub-w);margin-right:0;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:var(--head-h);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:var(--sp-4) 12px 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:12px 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)}
/* Tab activo: fondo con el MISMO degradé de marca (teal) que los iconos, glifo en
blanco. El gradiente va como background del botón; el icono se fuerza a #fff. */
.admin-tabs.adm-sidebar .admin-tab.on{background:linear-gradient(180deg,#08ABBB,#0A6E80);color:#fff}
.admin-tabs.adm-sidebar .admin-tab.on svg{opacity:1;fill:#fff}
/* Submenú del grupo activo, debajo de su ítem en la barra lateral (espejo de las sub-pestañas de arriba). */
.adm-side-sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 var(--sp-2) var(--sp-5);padding-left:var(--sp-3);border-left:2px solid var(--pame-line)}
.adm-side-sub-item{background:none;border:none;text-align:left;cursor:pointer;border-radius:var(--r-md);color:var(--fg-2);
font-size:var(--fs-14);font-weight:600;padding:8px 12px;transition:background var(--t-fast),color var(--t-fast)}
.adm-side-sub-item:hover{background:var(--pame-blue-10);color:var(--pame-blue-700)}
.adm-side-sub-item.on{color:var(--pame-blue-700);background:var(--pame-blue-10)}
body.sub-collapsed .adm-side-sub{display:none}
/* 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"],body[data-page="panel"]{--sub-w:0px}
body[data-page="admin"] .panel.ancho,body[data-page="panel"] .panel.ancho{margin-left:0}
/* `align-items:stretch` (contra el `flex-start` de escritorio) es clave: al pasar
a columna, sin stretch `.adm-content` toma el ANCHO DE SU CONTENIDO, y una tabla
con `min-width:760px` (las tablas se vuelven tarjetas recién en ≤720) lo estira
más que la pantalla → toda la sección se desborda a la derecha en la franja
721–820px (tablet, o escritorio con zoom). Con stretch queda atado al viewport y
el scroll lateral de la tabla lo maneja `.tabla-wrap{overflow-x:auto}`. */
.adm-layout{flex-direction:column;align-items:stretch}
/* En el celular la navegación del panel es la BARRA INFERIOR (bottomnav.js):
el menú lateral de pestañas se esconde. Ver el bloque "NAVEGACIÓN INFERIOR". */
.admin-tabs.adm-sidebar{display:none}
}
/* ── Barra lateral del admin contraíble ───────────────────────────────────── */
/* Botón de contraer/expandir: fila discreta arriba de la barra. */
.adm-collapse{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;color:var(--text-muted);
cursor:pointer;padding:9px 14px;border-radius:var(--r-md);font:inherit;font-size:var(--fs-12);font-weight:700;
letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px;transition:background var(--t-fast),color var(--t-fast)}
.adm-collapse:hover{background:var(--surface-hover);color:var(--navy-700)}
.adm-collapse svg{width:17px;height:17px;flex:none;transition:transform var(--t-base) var(--ease-out)}
/* Modo contraído: solo íconos, en botones cuadrados redondeados y centrados.
Es un modo de la barra VERTICAL de desktop: se envuelve en min-width:821px para
que NO se filtre al carrusel móvil (si no, un panel que quedó contraído en compu
mostraba las pestañas del celular como íconos mudos). */
body.sub-collapsed{--sub-w:74px}
@media(min-width:821px){
body.sub-collapsed .admin-tabs.adm-sidebar{padding:var(--sp-4) 0;gap:6px;align-items:center}
body.sub-collapsed .admin-tabs.adm-sidebar .admin-tab{position:relative;width:46px;height:46px;padding:0;gap:0;
justify-content:center;border-radius:var(--r-md)}
body.sub-collapsed .admin-tabs.adm-sidebar .admin-tab svg{width:22px;height:22px;opacity:.9}
body.sub-collapsed .admin-tabs.adm-sidebar .admin-tab.on svg{opacity:1}
body.sub-collapsed .admin-tabs.adm-sidebar .admin-tab span{display:none}
body.sub-collapsed .adm-collapse{width:46px;height:46px;justify-content:center;padding:0;margin:0 auto 8px}
body.sub-collapsed .adm-collapse span{display:none}
body.sub-collapsed .adm-collapse svg{transform:rotate(180deg)}
/* el contador de pendientes queda como puntito sobre el ícono */
body.sub-collapsed .adm-pip{position:absolute;margin:0;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:10px;box-shadow:0 0 0 2px var(--surface-card)}
}
@media(max-width:820px){ body.sub-collapsed{--sub-w:0px} }
.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)}
/* Estado "trabajando": mientras dura una acción larga (duplicar clase/módulo/
formación) el aviso se agranda al porte de un control y suma un aro que gira,
para que no pase inadvertido al lado del botón. */
.adm-msg.busy{ display:inline-flex; align-items:center; gap:var(--sp-2);
font-size:var(--fs-15); font-weight:700; color:var(--pame-blue); margin-left:var(--sp-3) }
.adm-msg.busy::before{ content:""; flex:none; width:var(--fs-15); height:var(--fs-15);
box-sizing:border-box; border-radius:var(--r-pill);
border:2px solid var(--pame-blue-30); border-top-color:var(--pame-blue);
animation:prov-spin .8s linear infinite }
/* Facturación (ARCA): paso a paso + estado + tabla de comprobantes */
.fact-estado{font-size:var(--fs-14);color:var(--fg-2);background:var(--bg-2);border:1px solid var(--pame-line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-3)}
.fact-estado.ok{color:var(--pame-teal-700);border-color:var(--pame-teal-700)}
.fact-err{font-size:var(--fs-13);color:var(--pame-danger);margin-top:var(--sp-3)}
.fact-steps{margin:var(--sp-3) 0 0;padding-left:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);font-size:var(--fs-14);color:var(--fg-2)}
.fact-steps li{line-height:1.5}
.fact-code{background:var(--fg-1);color:#fff;font-size:var(--fs-12);padding:var(--sp-3);border-radius:var(--r-sm);overflow-x:auto;white-space:pre;margin:var(--sp-2) 0}
.fact-tabla{width:100%;border-collapse:collapse;font-size:var(--fs-13);margin-top:var(--sp-2)}
.fact-tabla th{text-align:left;font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.02em;color:var(--fg-3);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--pame-line)}
.fact-tabla td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--pame-line);color:var(--fg-2)}
.fact-badge{display:inline-block;font-size:var(--fs-12);font-weight:700;padding:2px 8px;border-radius:999px;background:var(--bg-2);color:var(--fg-3)}
.fact-badge.ok{background:var(--pame-teal-50, #e6f4f1);color:var(--pame-teal-700)}
.fact-badge.err{background:#fdecea;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;display:inline-flex;align-items:center;justify-content:center}
/* En el CELULAR los botones de solo-ícono muestran su etiqueta (del aria-label que
ya tienen): así se entiende qué hace cada lapicito/ojo, y son más grandes para el
dedo. En computadora quedan como ícono (el título se ve al pasar el mouse). */
@media(max-width:720px){
button.btn-ico[aria-label],a.btn-ico[aria-label]{width:auto;min-width:0;gap:8px;
padding:10px 14px;min-height:42px;justify-content:flex-start}
button.btn-ico[aria-label]::after,a.btn-ico[aria-label]::after{content:attr(aria-label);
font-size:var(--fs-14);font-weight:600;white-space:normal;text-align:left}
}
.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)}
/* Módulo/encuentro "en vivo": sale por fecha, sin repesca de los anteriores */
.vivo-chip{background:var(--danger-10,rgba(220,38,38,.10));color:var(--danger,#dc2626);
border:1px solid var(--danger-30,rgba(220,38,38,.30))}
/* Encuentro en vivo aún por salir, en el temario del alumno */
.side-prox{margin-left:auto;font-size:var(--fs-xs,.72rem);font-weight:700;
color:var(--danger,#dc2626);white-space:nowrap}
/* 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}
/* Fechas con labels de distinto alto (uno tiene la nota del huso): alinea los inputs abajo. */
.adm-grid--end{align-items:end}
.adm-grid .full{grid-column:1 / -1}
/* Cupones: los campos alinean su input abajo, así una etiqueta con sub-nota
(“Moneda (solo monto fijo)”, 2 líneas) no deja el campo desfasado respecto al de al lado. */
.cp-grid{align-items:end}
/* Constructor de encuesta (item 12) */
.enc-q{border:1px solid var(--pame-line);border-radius:var(--r-sm);background:#fff;padding:10px 12px;margin-bottom:10px}
.enc-q.dragging{opacity:.5}
.enc-q.over{outline:2px dashed var(--brand);outline-offset:-2px}
.enc-q-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.enc-q-grip{flex:none;display:inline-grid;place-items:center;color:var(--fg-3);cursor:grab;padding:2px}
.enc-q-grip:active{cursor:grabbing}
.enc-q-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--pame-bg-soft);color:var(--fg-2);
font-size:var(--fs-12);font-weight:700;display:grid;place-items:center}
.enc-q-txt{flex:1;min-width:160px}
.enc-q-tipo{width:auto;flex:none}
.enc-q-mov{flex:none;display:inline-flex;gap:2px}
.enc-q-mov .btn-mini{padding:2px 6px;line-height:1;min-width:26px}
.enc-q-mov .btn-mini:disabled{opacity:.35;cursor:not-allowed}
.enc-q-ops{margin-top:8px;padding-left:30px;display:flex;flex-direction:column;gap:4px}
.enc-q-opsin{width:100%;box-sizing:border-box}
.enc-q-del{flex:none}
/* Previsualización de la encuesta (modal admin) */
.encp-card{width:672px;max-width:calc(100vw - 32px)}
.encp-card .sub{margin:2px 0 16px;color:var(--fg-3);font-size:var(--fs-13)}
.encp-qs{max-height:60vh;overflow:auto;margin-bottom:6px;padding-right:4px}
.encp-q{background:var(--pame-bg-soft);border:1px solid var(--pame-line);border-radius:var(--r-sm);
padding:14px 16px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.encp-q .encp-lbl{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-15);font-weight:600;
color:var(--fg-1);margin:0;text-transform:none;letter-spacing:0;line-height:1.35}
.encp-q .encp-lbl .encp-num{flex:none;width:24px;height:24px;border-radius:50%;background:var(--pame-teal);
color:#fff;font-size:var(--fs-12);font-weight:700;display:grid;place-items:center;margin-top:1px}
.encp-stars{display:flex;gap:8px;font-size:30px;color:var(--pame-line);cursor:default;user-select:none}
.encp-stars span{transition:color var(--t-fast),transform var(--t-fast)}
.encp-stars:hover span{color:#f5b301}
.encp-stars span:hover ~ span{color:var(--pame-line)}
.encp-ops{display:flex;flex-direction:column;gap:8px}
.encp-ops label{display:flex;align-items:center;gap:10px;font-size:var(--fs-14);color:var(--fg-1);
font-weight:500;text-transform:none;letter-spacing:0;padding:8px 10px;background:#fff;
border:1px solid var(--pame-line);border-radius:var(--r-sm)}
.encp-ops label input{margin:0}
.encp-txt{width:100%;box-sizing:border-box;border:1px solid var(--pame-line);border-radius:var(--r-sm);
padding:10px 12px;font-family:inherit;font-size:var(--fs-14);resize:vertical;background:#fff;color:var(--fg-1);min-height:72px}
.encp-txt:focus{outline:none;border-color:var(--pame-teal);box-shadow:0 0 0 3px rgba(0,168,193,.18)}
/* Vista admin de feedback por módulo (item 13) y respuestas de encuesta (item 12) */
.fb-mod{border:1px solid var(--pame-line);border-radius:var(--r-sm);background:#fff;padding:10px 12px;margin-bottom:10px}
.fb-mod-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.fb-mod-prom{margin-left:auto;white-space:nowrap;font-weight:700}
.fb-com{font-size:var(--fs-14);color:var(--fg-1);padding:4px 0;border-top:1px solid var(--pame-line)}
.enc-curso{border:1px solid var(--pame-line);border-radius:var(--r-sm);background:#fff;padding:8px 12px;margin-bottom:10px}
.enc-curso summary{cursor:pointer;font-weight:700;color:var(--fg-1)}
.enc-r{border-top:1px solid var(--pame-line);padding:8px 0;margin-top:8px}
.enc-r-head{margin-bottom:4px}
.enc-r-q{display:flex;justify-content:space-between;gap:16px;padding:2px 0}
.enc-r-q > span:last-child{text-align:right}
/* CTA "Generar / Ver tu certificado" en el encabezado del curso (alumno).
Va al lado de "Continuar con la clase" y en estilo OUTLINE (contorno) para que se
distinga del botón principal relleno, no como un duplicado. */
.ch-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:var(--sp-4)}
.cert-cta{margin:0}
.cert-cta:empty{display:none}
.cert-cta-btn{display:inline-flex;align-items:center;gap:8px;
padding:11px 22px;border:2px solid var(--pame-orange);border-radius:var(--r-pill);cursor:pointer;
background:#fff;color:var(--pame-orange);font-family:var(--font-sans);font-size:var(--fs-14);
font-weight:800;text-decoration:none;transition:background var(--t-fast),color var(--t-fast)}
.cert-cta-btn:hover{background:var(--pame-orange);color:#fff}
.cert-cta-btn:disabled{opacity:.6;cursor:default}
.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)}
/* Etiqueta de una OPCIÓN alternativa de fuente ("… o pegá el link", "… o traelo"):
legible, sin la mayúscula diminuta que no se lee cuando hace de cartel de opción. */
.adm-field > label.op-alt{font-size:var(--fs-15);text-transform:none;letter-spacing:0;color:var(--fg-1)}
/* 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)}
/* Editor de subtítulos (modal Pro): video a la izquierda, líneas editables a la derecha */
.dup-card.sub-modal{width:1360px}
.sub-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:10px;align-items:start}
@media(max-width:760px){.sub-grid{grid-template-columns:1fr}}
.sub-player{aspect-ratio:16/9;background:#000;border-radius:var(--r-sm);overflow:hidden}
.sub-player iframe{width:100%;height:100%;border:0;display:block}
.sub-cues{max-height:60vh;overflow-y:auto;border:1px solid var(--pame-line);border-radius:var(--r-sm)}
.sub-cue{display:grid;grid-template-columns:3.4rem 1fr;gap:10px;align-items:start;padding:8px 12px;border-top:1px solid var(--pame-line)}
.sub-cue:first-child{border-top:0}
.sub-t{font-family:var(--font-mono);font-size:var(--fs-12);cursor:pointer;padding:6px 6px;border-radius:var(--r-xs);text-align:left;white-space:nowrap;margin-top:3px}
/* Override del button:hover global: sin esto el tiempo queda oscuro sobre oscuro (ilegible) */
.sub-t,.sub-t:hover,.sub-t:focus,.sub-t:active{background:transparent;color:var(--pame-blue);border:0;box-shadow:none}
.sub-t:hover{background:var(--pame-blue-10)}
.sub-cue textarea{width:100%;resize:none;overflow:hidden;font-family:var(--font-sans);font-size:var(--fs-13);line-height:var(--lh-normal);padding:8px var(--ctl-px);border:var(--ctl-bd);border-radius:var(--ctl-r);background:#fff;color:var(--fg-1)}
.sub-cue textarea:focus{outline:none;border-color:var(--pame-blue);box-shadow:0 0 0 3px var(--pame-blue-10)}
.sub-spin{display:inline-block;width:14px;height:14px;border:2px solid color-mix(in srgb,#fff 40%,transparent);border-top-color:#fff;border-radius:50%;animation:prov-spin .8s linear infinite;vertical-align:-2px;margin-right:8px}
.adm-field .nota{font-size:var(--fs-11);color:var(--fg-3);font-weight:400;text-transform:none;letter-spacing:0}
/* Estado tranquilizador ("ya podés cerrar, esto sigue solo"): la misma línea de
estado del video, pero destacada para que se lea como un permiso, no como letra chica.
En verde —vía libre, ya quedó guardado— para que se lea como "listo", no como aviso. */
.adm-field .nota.nota-fuerte{font-size:var(--fs-16);color:var(--pame-success);font-weight:700;
background:var(--success-soft);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm)}
/* Advertencia mientras SUBE el archivo ("no cierres la pestaña") y errores de archivo:
tiene que frenar el ojo. Rojo, con ícono de advertencia, sobre su fondo. */
.adm-field .nota.nota-alerta{font-size:var(--fs-16);color:var(--pame-orange-600);font-weight:700;
background:var(--pame-orange-10);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm)}
.adm-field .nota.nota-peligro{display:flex;align-items:center;gap:var(--sp-2);
font-size:var(--fs-16);color:var(--pame-danger);font-weight:700;
background:var(--danger-soft);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm)}
.adm-field .nota.nota-peligro .ic{flex:none}
/* 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-field`/`.adm-check` traen display:flex, que le gana al `display:none` del
atributo [hidden] del navegador (misma specificity, la clase va después). Sin esto,
un campo con `hidden` (p. ej. el 2º color de la oferta cuando el fondo es plano) NO
se oculta. Esta regla, más específica, hace que `hidden` siempre gane. */
.adm-field[hidden],.adm-check[hidden]{display:none}
.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)}
/* Ícono chico al lado del título de un bloque/panel (reemplaza a los emojis). */
.bh-ico{width:18px;height:18px;vertical-align:-3px;color:var(--pame-teal);flex:none}
.cp-head{display:flex;align-items:center;gap:8px;margin:0}
/* Pop-up: los campos de una fila alinean sus inputs abajo, aunque un label ocupe
dos renglones (p. ej. "· vacío = sin botón"). Así no quedan escalonados. */
#sec-popup .adm-grid{align-items:end}
/* Editores con labels que traen .nota (se van a dos renglones y desalinean
el input del compañero de fila): alinear inputs abajo. */
#av-editor .adm-grid,
#vv-editor .adm-grid{align-items:end}
.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}
/* Campo no editable (grisado): mismo criterio que el email de "Mi cuenta". Se destraba
con su botón "Modificar". */
.adm-row input:disabled,.adm-field input:disabled{
background:var(--pame-bg-soft);color:var(--fg-3);cursor:default}
/* 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}
/* Modal diseñado (uiConfirm / uiAlert) — reemplaza los confirm/alert nativos. Centrado. */
.dup-ov.uimodal{align-items:center}
.uimodal-card{width:460px;padding:26px 26px 22px}
.uimodal-tit{margin:0 0 8px;font-size:var(--fs-20);color:var(--fg-1)}
.uimodal-body{margin:0;color:var(--fg-2);line-height:var(--lh-normal);font-size:var(--fs-14)}
.uimodal-dato{margin-top:14px;padding:12px 14px;background:var(--pame-bg-soft);border:1px solid var(--pame-line);
border-radius:var(--r-md);display:flex;flex-direction:column;gap:4px;font-size:var(--fs-14);color:var(--fg-1);font-weight:700}
.uimodal-input{width:100%;height:var(--ctl-h);margin-top:14px;padding:0 14px;border:1.5px solid var(--pame-line);
border-radius:var(--r-md);background:#fff;color:var(--fg-1);font-size:var(--fs-14);font-family:inherit;box-sizing:border-box}
.uimodal-input:focus{outline:none;border-color:var(--pame-blue)}
textarea.uimodal-input{height:auto;min-height:calc(var(--ctl-h) * 2.4);padding:12px 14px;resize:vertical;line-height:var(--lh-normal)}
.uimodal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}
/* Utilitarias de color para textos cortos de estado (éxito / error) — reusan tokens. */
.c-ok{color:var(--pame-teal-700)}
.c-danger{color:var(--pame-danger)}
/* Botón "Guardar" con cambios pendientes: se destaca visualmente para invitar al click.
Reusa la clase .lbb-dirty (landing-builder) para que cualquier botón .btn-add pueda marcarla. */
.btn-add.lbb-dirty{background:var(--pame-teal-10);border-color:var(--pame-teal);color:var(--pame-teal-700);font-weight:800;box-shadow:0 0 0 3px rgba(15,168,184,.14)}
.btn-add.lbb-dirty:hover{background:var(--pame-teal);color:#fff}
/* Toast de confirmación (uiToast). Vive en , sobrevive a re-renders y cierres de modal. */
.ui-toast-stack{position:fixed;right:16px;bottom:16px;z-index:110;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.ui-toast{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);
background:#fff;border:1px solid var(--pame-line);box-shadow:var(--shadow-md);
font-size:var(--fs-14);font-weight:700;color:var(--fg-1);line-height:1.2;
opacity:0;transform:translateY(8px);transition:opacity var(--t-med),transform var(--t-med);max-width:min(92vw,420px)}
.ui-toast.is-in{opacity:1;transform:translateY(0)}
.ui-toast.is-out{opacity:0;transform:translateY(-4px)}
.ui-toast-ic{width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ui-toast-tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-toast--ok .ui-toast-ic{background:var(--pame-teal-10);color:var(--pame-teal-700)}
.ui-toast--ok{border-color:var(--pame-teal-10)}
.ui-toast--no .ui-toast-ic{background:var(--danger-soft,#fdecea);color:var(--pame-danger)}
.ui-toast--no{border-color:var(--danger-soft,#fdecea)}
@media (max-width:640px){
.ui-toast-stack{right:8px;left:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));align-items:stretch}
.ui-toast{width:100%;max-width:100%}
.ui-toast-tx{white-space:normal}
}
/* "Mis compras": tarjetas de compras y suscripciones (grandes y ordenadas). */
.mc-list{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-3)}
.mc-item{background:#fff;border:1px solid var(--pame-line);border-radius:var(--r-md);
padding:18px 20px;box-shadow:var(--shadow-sm)}
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mc-tit{font-size:var(--fs-18);font-weight:800;color:var(--fg-1);line-height:1.25}
.mc-sub{margin-top:6px;font-size:var(--fs-14);color:var(--fg-2);line-height:var(--lh-normal)}
.mc-sub a{color:var(--pame-blue);font-weight:700}
.mc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.mc-actions button{height:var(--ctl-h);padding:0 18px;border-radius:var(--r-md);border:1.5px solid var(--pame-line);
background:#fff;color:var(--fg-1);font-weight:700;font-size:var(--fs-14);font-family:inherit;cursor:pointer;
transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.mc-actions button:hover{border-color:var(--pame-blue);color:var(--pame-blue);background:var(--pame-blue-10)}
.mc-actions button:disabled{opacity:.6;cursor:default}
.mc-actions .sub-renew,.mc-actions .sub-reactivar{background:var(--pame-teal);border-color:var(--pame-teal);color:#fff}
.mc-actions .sub-renew:hover,.mc-actions .sub-reactivar:hover{background:var(--pame-teal-700);border-color:var(--pame-teal-700);color:#fff}
.mc-empty{background:var(--pame-bg-soft);border:1px dashed var(--pame-line);border-radius:var(--r-md);
padding:18px 20px;color:var(--fg-2);font-size:var(--fs-14);line-height:var(--lh-normal);margin-top:var(--sp-3)}
.mc-sec-tit{font-size:var(--fs-20);font-weight:800;color:var(--fg-1);margin:var(--sp-6) 0 0}
/* Configuración del módulo (crear/editar): campos a la izquierda, portada a la derecha */
.dup-card.mc-card{width:960px}
.mc-grid{display:grid;grid-template-columns:1fr auto;gap:var(--sp-7);align-items:start;margin-top:var(--sp-4)}
.mc-main{min-width:0}
.mc-main .adm-check{margin-bottom:var(--sp-2)}
/* Rótulo de un bloque (mismo estilo que la etiqueta de un .adm-field) */
.mc-block{margin-bottom:var(--sp-4)}
.mc-lbl{font-size:var(--fs-12);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--fg-2);margin-bottom:var(--gap-fld)}
.mc-portada{display:flex;flex-direction:column;gap:var(--gap-fld);width:180px}
.mc-portada > label{font-size:var(--fs-12);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--fg-2)}
.mc-portada .btn-mini{width:100%}
.mc-thumb{width:180px;height:110px;border-radius:var(--r-md);border:1px solid var(--pame-line);overflow:hidden;display:grid;place-items:center;background:var(--pame-bg-soft)}
.mc-thumb img{width:100%;height:100%;object-fit:cover}
.mc-thumb-ph{font-size:var(--fs-32);opacity:.4}
.mc-grupos{margin-left:var(--sp-5);margin-top:var(--sp-1)}
.mc-grupos.off{opacity:.45}
/* Drip por grupo: una fila por grupo del curso con un input numérico (o vacío = usa el drip global) */
.mc-drip-grupos{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-1)}
.mc-drip-g{display:flex;align-items:center;gap:var(--sp-2)}
.mc-drip-g input{width:88px}
.mc-drip-g .nota{color:var(--fg-2)}
/* Selector de confeti por módulo: chips de preset + campo de emojis propios */
.mc-cf-presets{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.mc-cf-chip{display:inline-flex;flex-direction:column;align-items:center;gap:2px;
min-width:64px;padding:var(--sp-2) var(--sp-3);cursor:pointer;
background:var(--bg-1);border:var(--ctl-bd);border-radius:var(--r-md);
transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out)}
.mc-cf-chip:hover{border-color:var(--pame-teal-60);background:var(--pame-teal-10)}
.mc-cf-chip.on{border-color:var(--pame-teal);background:var(--pame-teal-10);box-shadow:inset 0 0 0 1px var(--pame-teal)}
.mc-cf-emo{font-size:var(--fs-20);line-height:1}
.mc-cf-lbl{font-size:var(--fs-12);font-weight:700;color:var(--fg-2)}
/* .adm-field/.adm-check fijan display:flex, que le gana al [hidden] nativo */
.mc-grid [hidden]{display:none!important}
/* Misma guarda para las cajas de la escala de TP (numérica ↔ conceptual): la
.adm-field oculta con [hidden] necesita el !important o el display:flex la pisa. */
.tp-box[hidden]{display:none!important}
@media (max-width:1000px){.dup-card.mc-card{width:100%}}
@media (max-width:720px){.mc-grid{grid-template-columns:1fr}.mc-portada{width:100%}.mc-thumb{width:100%}}
/* Editor de clase — paso 1 (elegir formato) y paso 2 (formulario) */
.ed-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-4);margin-top:var(--sp-4)}
.ed-fmt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);text-align:left;padding:var(--sp-5);
border:var(--ctl-bd);border-radius:var(--r-md);cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
/* Gana al button/button:hover global (que pinta el fondo azul lleno): la tarjeta
queda siempre clara con texto oscuro; el hover solo mueve el borde y la sombra. */
.ed-fmt,.ed-fmt:hover,.ed-fmt:focus,.ed-fmt:active{background:var(--pame-bg);color:var(--fg-1)}
.ed-fmt:hover{border-color:var(--pame-teal);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
/* Tarjeta elegida (picker de método de carga de video): borde teal + fondo suave. */
.ed-fmt.sel,.ed-fmt.sel:hover,.ed-fmt.sel:focus,.ed-fmt.sel:active{border-color:var(--pame-teal);background:var(--pame-teal-10);box-shadow:var(--shadow-sm)}
.ed-fmt-ic{font-size:var(--fs-32);line-height:1}
.ed-fmt-t{font-size:var(--fs-16);font-weight:700;color:var(--fg-1)}
.ed-fmt-d{font-size:var(--fs-13);color:var(--fg-3);font-weight:400}
/* Método no disponible todavía (p. ej. Zoom sin conectar): la tarjeta queda
apagada pero se puede tocar igual, para que el panel explique cómo activarlo. */
.ed-fmt--off{opacity:.55}
.ed-fmt--off .ed-fmt-ic{filter:grayscale(1)}
.ed-fmt--off:hover{border-color:var(--pame-line);box-shadow:none;transform:none}
.ed-head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.ed-head h3{margin:0}
.ed-formato{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:700;color:var(--fg-2)}
.ed-fold{border:1px solid var(--pame-line);border-radius:var(--r-md);margin-top:var(--sp-4);background:var(--pame-bg-soft)}
.ed-fold > summary{cursor:pointer;padding:var(--sp-3) var(--sp-4);font-weight:700;color:var(--fg-2);list-style:none}
.ed-fold > summary::-webkit-details-marker{display:none}
.ed-fold > summary::before{content:'▸ ';color:var(--fg-3)}
.ed-fold[open] > summary::before{content:'▾ '}
.ed-fold-body{display:flex;flex-direction:column;gap:var(--sp-3);padding:0 var(--sp-4) var(--sp-4)}
.ed-narrow{max-width:260px}
.ed-mats-vacio{padding:var(--sp-2)}
/* Materiales de la clase: fila con [Título] · [segmented Subir|Enlace] ·
[contenido del modo] · [tipo] · [✕]. Todos los controles a --ctl-h. El
segmented control tiene los dos botones pegados. Reusa el look del resto
del panel (mismo borde, mismos colores, mismos íconos SVG). */
.mat-row{align-items:center}
.mat-row .m-cont{flex:2;min-width:260px;display:flex;align-items:center;gap:var(--sp-2)}
.mat-row .m-tabs{display:inline-flex;flex:none;background:#fff;border-radius:var(--ctl-r)}
.mat-row .m-tab{background:#fff;border:var(--ctl-bd);color:var(--fg-2);
padding:0 var(--sp-3);height:var(--ctl-h);line-height:1;
font-size:var(--fs-12);font-weight:600;cursor:pointer;width:auto;border-radius:0;margin:0;
display:inline-flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0}
.mat-row .m-tab .ic{width:14px;height:14px;flex:none}
.mat-row .m-tab:first-child{border-radius:var(--ctl-r) 0 0 var(--ctl-r)}
.mat-row .m-tab:last-child{border-radius:0 var(--ctl-r) var(--ctl-r) 0;border-left:0}
.mat-row .m-tab:hover{color:var(--pame-blue);border-color:var(--pame-blue)}
.mat-row .m-tab.on{background:var(--pame-teal-10);color:var(--pame-teal-700);border-color:var(--pame-teal-30);z-index:1}
.mat-row .m-tab.on:hover{color:var(--pame-teal-700);border-color:var(--pame-teal)}
.mat-row .m-body{flex:1;display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.mat-row .m-up-body{flex:1;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0}
/* .m-up-label es un