/* Clases Guanentá 2026. Vidrio sobre fondo oscuro (por defecto) o claro; un color por asignatura. */
/* Tipografía guardada en el repositorio (Figtree, licencia SIL OFL): funciona sin conexión. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fuentes/figtree-latin-variable.woff2) format('woff2'); }

/* ---------- Tema oscuro (por defecto) ---------- */
:root {
  --fondo: #0E1116;
  --vidrio: rgba(24, 28, 36, .84);
  --vidrio-denso: rgba(20, 24, 31, .94);
  --vidrio-suave: rgba(255, 255, 255, .06);
  --solido: #161A21;
  --borde: rgba(255, 255, 255, .13);
  --borde-fuerte: rgba(255, 255, 255, .36); /* ≥ 3:1 contra el fondo y el vidrio (bordes de botones) */
  --brillo: inset 0 1px 0 rgba(255, 255, 255, .14);
  --sombra: 0 18px 44px rgba(0, 0, 0, .35);
  --tinta: #F2F4F7;
  --suave: #A6ADB9;
  --linea: rgba(255, 255, 255, .10);
  --activo: #F2F4F7;
  --activo-tinta: #0E1116;
  --marca: #4A3B12;
  --marca-tinta: #F3DC9A;
  --forma-2: #F2B53D;
  --soc-forma: #F26A3D; --soc-acento: #FF9A74;
  --filo-forma: #6F7CFF; --filo-acento: #AEB5FF;
  --eti-forma: #2FB57B; --eti-acento: #7FE0B4;
  --neutro-forma: #F26A3D; --neutro-acento: #FF9A74;
  --serif: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sans: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --forma: var(--neutro-forma);
  --acento: var(--neutro-acento);
  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* ---------- Tema claro ---------- */
:root[data-tema="claro"] {
  --fondo: #ECEEF2;
  --vidrio: rgba(255, 255, 255, .84);
  --vidrio-denso: rgba(255, 255, 255, .95);
  --vidrio-suave: rgba(22, 24, 29, .04);
  --solido: #FFFFFF;
  --borde: rgba(255, 255, 255, .95);
  --borde-fuerte: rgba(22, 24, 29, .50); /* ≥ 3:1 contra el fondo y el vidrio */
  --brillo: inset 0 1px 0 #fff;
  --sombra: 0 14px 34px rgba(30, 35, 50, .10);
  --tinta: #16181D;
  --suave: #555B67;
  --linea: rgba(22, 24, 29, .10);
  --activo: #16181D;
  --activo-tinta: #FFFFFF;
  --marca: #F6E7B8;
  --marca-tinta: #5A4108;
  --forma-2: #FFE09A;
  --soc-forma: #FFB597; --soc-acento: #BA4217;
  --filo-forma: #B9C0FF; --filo-acento: #3F4BD0;
  --eti-forma: #A6E8C8; --eti-acento: #1A7A50;
  --neutro-forma: #FFB597; --neutro-acento: #BA4217;
  color-scheme: light;
}
.asig-sociales, .c-sociales { --forma: var(--soc-forma); --acento: var(--soc-acento); }
.asig-filosofia, .c-filosofia { --forma: var(--filo-forma); --acento: var(--filo-acento); }
.asig-etica, .c-etica { --forma: var(--eti-forma); --acento: var(--eti-acento); }

*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 80px); background: var(--fondo); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
img, svg { max-width: 100%; }

/* Formas de color: fijas en las esquinas, nunca detrás del texto principal */
.deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.deco i { position: absolute; display: block; border-radius: 50%; transition: background-color .3s; }
.deco .f1 { width: 520px; height: 520px; right: -330px; bottom: -330px; background: var(--forma); }
.deco .f2 { width: 280px; height: 280px; left: -190px; top: -190px; background: var(--forma-2); }
@media (max-width: 560px) {
  .deco .f1 { width: 190px; height: 190px; right: -120px; bottom: auto; top: -120px; }
  .deco .f2 { display: none; }
}

/* El círculo amarillo de arriba a la izquierda lleva a la portada, sin ninguna señal visual (pedido del profesor);
   solo el cursor de mano al pasar por encima. En el televisor es solo decoración. */
body > .deco .f2 { display: none; }
.ir-inicio { position: fixed; z-index: 5; width: 280px; height: 280px; left: -190px; top: -190px; border-radius: 50%; background: var(--forma-2); }
.ir-inicio:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
body.proyectando .ir-inicio { display: none; }
@media (max-width: 560px) { .ir-inicio { display: none; } }

/* Vidrio: la base de tarjetas y paneles */
.vidrio, .tarjeta-curso, .tarjeta-sesion, .momento, .regla, .panel-profe, .detalles-plan, .pie-sesion, .navegar a, .estado-caja {
  background: var(--vidrio);
  border: 1px solid var(--borde);
  box-shadow: var(--brillo), var(--sombra);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio, .tarjeta-curso, .tarjeta-sesion, .momento, .regla, .panel-profe, .detalles-plan, .pie-sesion, .navegar a, .estado-caja { background: var(--solido); }
}

.pagina { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding: 20px 22px 64px; }

/* Barra superior */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 28px; min-height: 44px; }
.migas { font-size: 15px; color: var(--suave); display: flex; flex-wrap: wrap; gap: 4px 0; min-width: 0; }
.migas a { color: var(--suave); text-decoration: none; display: inline-block; padding: 10px 0; margin: -10px 0; }
.migas a:hover { color: var(--tinta); text-decoration: underline; }
.migas .sep { margin: 0 8px; opacity: .5; }
.barra .der { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.profe-aviso { font-size: 14px; color: var(--marca-tinta); background: var(--marca); padding: 4px 10px; border-radius: 20px; display: inline-flex; gap: 10px; align-items: baseline; }
.profe-aviso button { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font-size: 14px; color: inherit; }
.boton-tema { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; padding: 0; border: 1px solid var(--borde-fuerte); background: var(--vidrio); box-shadow: var(--brillo); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.boton-tema svg { width: 20px; height: 20px; }
.boton-tema:hover { border-color: var(--tinta); }

/* ---------- Inicio ---------- */
.portada.pagina { max-width: 1080px; }
.portada h1 { font-weight: 800; font-size: clamp(34px, 6vw, 52px); line-height: 1.05; margin: 8px 0 8px; letter-spacing: -0.02em; }
.portada .firma { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 34px; font-size: 16px; color: var(--suave); }
/* Título, firma y línea de "Pronto" centrados */
.portada h1, .portada .pronto { text-align: center; }
.portada .firma { justify-content: center; }
.portada .firma .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--suave); opacity: .6; }
.tarjetas-curso { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.tarjeta-curso { position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; min-height: 250px; padding: 22px 22px 0; border-radius: 26px; transition: border-color .15s, transform .15s; }
.tarjeta-curso:hover { border-color: var(--borde-fuerte); }
@media (prefers-reduced-motion: no-preference) { .tarjeta-curso:hover { transform: translateY(-3px); } }
.tarjeta-curso .principal { text-decoration: none; display: flex; align-items: baseline; gap: 12px; }
.tarjeta-curso .principal::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta-curso .principal:focus-visible { outline: none; }
.tarjeta-curso .principal:focus-visible::after { outline: 3px solid var(--acento); outline-offset: -3px; border-radius: 26px; }
.tarjeta-curso .marca-agua { position: absolute; right: 18px; top: 18px; width: 40px; height: 40px; color: var(--acento); pointer-events: none; }
.tarjeta-curso .marca-agua svg { width: 100%; height: 100%; }
.tarjeta-curso .grado { font-weight: 800; font-size: 46px; line-height: 1; color: var(--acento); letter-spacing: -0.03em; }
.tarjeta-curso .asig { font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.tarjeta-curso .pregunta { font-weight: 800; font-size: 22px; line-height: 1.28; flex: 1; margin: 16px 0 0; }
.tarjeta-curso .pregunta.vacia { font-weight: 400; font-size: 16px; color: var(--suave); }
.tarjeta-curso .atajo { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; margin: 18px -22px 0; padding: 14px 22px 16px; border-top: 1px solid var(--linea); text-decoration: none; }
.tarjeta-curso .atajo .rot { grid-column: 1; font-size: 13px; color: var(--suave); }
.tarjeta-curso .atajo .tit { grid-column: 1; font-weight: 700; font-size: 16px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-curso .atajo .flecha { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--activo); color: var(--activo-tinta); font-size: 20px; }
.tarjeta-curso .atajo:hover .tit { text-decoration: underline; text-underline-offset: 3px; }
.puntos { position: relative; z-index: 0; display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--suave); }
.puntos .barrita { flex: 1; height: 6px; border-radius: 6px; background: var(--linea); overflow: hidden; max-width: 160px; }
.puntos .barrita b { display: block; height: 100%; border-radius: 6px; background: var(--acento); }
.pronto { margin: 22px 4px 0; color: var(--suave); font-size: 15px; }
.pronto strong { color: var(--tinta); font-weight: 700; }

/* ---------- Curso ---------- */
.curso-titulo { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); margin: 0 0 6px; }
.periodo { margin-bottom: 40px; }
.periodo-nombre { font-size: 15px; color: var(--suave); margin: 0 0 8px; }
.pregunta-grande { font-weight: 800; font-size: clamp(30px, 5.4vw, 46px); line-height: 1.12; margin: 0 0 22px; letter-spacing: -0.02em; }
.detalles-plan { border-radius: 18px; padding: 0 18px; margin: 0 0 26px; }
.detalles-plan summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--suave); list-style-position: inside; }
.detalles-plan[open] summary { color: var(--tinta); }
.detalles-plan .dato-plan { margin: 0 0 14px; }
.detalles-plan .dato-plan .rot { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.detalles-plan .dato-plan p + p { margin: 2px 0 0; font-size: 16px; }
.detalles-plan .estandar { color: var(--suave); font-size: 16px; margin: 0 0 16px; }
.ruta-marco { overflow-x: auto; margin: 0 0 22px; padding: 6px 2px 4px; }
.ruta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(72px, 1fr)); }
.ruta li { position: relative; text-align: center; }
.ruta li + li::before { content: ""; position: absolute; z-index: 0; top: 21px; right: 50%; width: 100%; height: 3px; border-radius: 3px; background: var(--linea); }
.ruta li.tramo::before { background: var(--acento); }
.ruta a, .ruta li > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; text-decoration: none; }
.ruta .nodo { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; background: var(--fondo); border: 2px dashed var(--borde-fuerte); color: var(--suave); }
.ruta li.hecha .nodo { background: var(--acento); border: 2px solid var(--acento); color: var(--activo-tinta); }
:root[data-tema="claro"] .ruta li.hecha .nodo { color: #fff; }
.ruta li.ultima .nodo { box-shadow: 0 0 0 6px color-mix(in srgb, var(--acento) 28%, transparent); }
.ruta .rot { font-size: 13px; line-height: 1.3; color: var(--tinta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 10em; }
.ruta li.falta .rot { color: var(--suave); }
.ruta a:hover .rot { text-decoration: underline; text-underline-offset: 3px; }

.tarjetas-sesion { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.tarjeta-sesion { display: flex; flex-direction: column; height: 100%; padding: 18px 20px; border-radius: 22px; text-decoration: none; transition: border-color .15s, transform .15s; }
a.tarjeta-sesion:hover { border-color: var(--borde-fuerte); }
@media (prefers-reduced-motion: no-preference) { a.tarjeta-sesion:hover { transform: translateY(-2px); } }
.tarjeta-sesion .arriba { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tarjeta-sesion .num { font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.tarjeta-sesion .fecha { font-size: 14px; color: var(--suave); text-align: right; }
.tarjeta-sesion .reciente { display: inline-block; background: var(--activo); color: var(--activo-tinta); font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 20px; margin-left: 8px; }
.tarjeta-sesion .tit { font-weight: 700; font-size: 19px; line-height: 1.3; margin: 10px 0 4px; }
.tarjeta-sesion .preg { color: var(--suave); font-size: 16px; line-height: 1.45; flex: 1; }
.mini-regla { display: flex; gap: 3px; height: 6px; margin-top: 16px; }
.mini-regla i { background: var(--acento); border-radius: 4px; opacity: .9; }
.mini-regla i:nth-child(even) { opacity: .45; }
.tarjeta-sesion .glifos { display: flex; gap: 8px; margin-top: 10px; color: var(--suave); }
.tarjeta-sesion .glifos svg { width: 18px; height: 18px; }
.tarjeta-sesion.falta { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1.5px dashed var(--borde-fuerte); }
.tarjeta-sesion.falta .tit { font-weight: 400; color: var(--suave); }
.detalles-periodo { border-top: 1px solid var(--linea); padding: 14px 0; }
.detalles-periodo summary { cursor: pointer; color: var(--suave); }
.detalles-periodo summary .p { color: var(--tinta); font-weight: 700; }
.detalles-periodo[open] summary { margin-bottom: 20px; }
.tabla-eval { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0 0; }
.tabla-eval td { padding: 8px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-eval td.pct { text-align: right; white-space: nowrap; padding-left: 14px; font-weight: 700; }
.tabla-eval td.comp { padding-right: 14px; white-space: nowrap; }
.tabla-eval td.desc { color: var(--suave); }
.subtitulo { font-size: 16px; font-weight: 700; margin: 28px 0 6px; }

/* ---------- Sesión ---------- */
.sesion-cabeza { margin-bottom: 24px; }
.sesion-cabeza .quien { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); margin: 0 0 10px; }
.sesion-cabeza h1 { font-weight: 800; font-size: clamp(30px, 5.6vw, 46px); line-height: 1.12; margin: 0 0 14px; letter-spacing: -0.02em; }
.sesion-cabeza .datos { color: var(--suave); margin: 0; }
.sesion-cabeza .datos strong { color: var(--tinta); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.boton { display: inline-flex; align-items: center; gap: 10px; border: 0; background: var(--activo); color: var(--activo-tinta); border-radius: 40px; padding: 11px 20px; cursor: pointer; text-decoration: none; font-size: 16px; font-weight: 700; line-height: 1.3; }
.boton:hover { filter: brightness(1.08); }
.boton svg { width: 18px; height: 18px; }
.boton.suave { background: var(--vidrio-suave); color: var(--tinta); border: 1px solid var(--borde-fuerte); font-weight: 400; font-size: 15px; padding: 8px 16px; }
.boton.suave:hover { border-color: var(--tinta); filter: none; }

.imagen-momento { margin: 0; }
.imagen-momento a { display: block; background: #fff; border-radius: 16px; padding: 10px; border: 1px solid var(--borde); }
.imagen-momento img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.imagen-momento figcaption { font-size: 13px; color: var(--suave); margin-top: 6px; }
.proyector .diapo.imagen { max-width: none; height: 100%; display: flex; }
.proyector .diapo.imagen figure { margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 1vh; }
.proyector .diapo.imagen img { flex: 1; min-height: 0; max-width: 100%; object-fit: contain; background: #fff; border-radius: 14px; padding: 1vh; }
.proyector .diapo.imagen figcaption { font-size: clamp(13px, 1.1vw, 22px); font-weight: 500; color: var(--suave); text-align: center; }
.saltar { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 18px; }
.saltar .boton { font-weight: 700; }
.proyector .controles button:disabled { opacity: .4; cursor: default; }
.regla-fija { position: sticky; top: 0; z-index: 10; padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 10px; margin: -10px 0 0; }
.regla { display: flex; gap: 4px; padding: 5px; border-radius: 40px; background: var(--solido); -webkit-backdrop-filter: none; backdrop-filter: none; }
.regla button { flex-shrink: 1; min-width: 40px; height: 40px; border: 0; padding: 0 8px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border-radius: 30px; background: transparent; color: var(--suave); font-size: 14px; overflow: hidden; white-space: nowrap; }
.regla button svg { width: 18px; height: 18px; flex: none; }
.regla button:hover { background: var(--vidrio-suave); color: var(--tinta); }
.regla button.actual { background: var(--activo); color: var(--activo-tinta); }
.regla-nota { font-size: 14px; color: var(--suave); margin: 4px 6px 26px; }

.panel-profe { border-radius: 20px; border-left: 4px solid var(--marca-tinta); padding: 16px 20px; margin: 0 0 26px; }
.panel-profe h2 { font-size: 16px; margin: 0 0 8px; }
.panel-profe p, .panel-profe ul { margin: 0 0 10px; font-size: 16px; }
.panel-profe ul { padding-left: 20px; }
.panel-profe li { margin-bottom: 4px; }
.panel-profe .rotulo { font-weight: 700; }

.momentos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.momento { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 26px 26px 28px 20px; border-radius: 26px; scroll-margin-top: 80px; }
.momento .lado { text-align: center; color: var(--acento); }
.momento .lado svg { width: 34px; height: 34px; display: block; margin: 0 auto 6px; }
.momento .min { font-size: 13px; color: var(--suave); line-height: 1.2; }
.momento .tipo { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.momento .tipo .cual { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--suave); }
.momento h2 { font-weight: 800; font-size: 24px; line-height: 1.25; margin: 4px 0 6px; }
.momento .meta { font-size: 15px; color: var(--suave); margin: 0 0 14px; }
.momento .cuerpo > * + * { margin-top: 16px; }
.lectura { font-size: 19px; font-weight: 500; line-height: 1.7; max-width: 36em; }
.lectura p { margin: 0 0 14px; }
.lectura p:last-child { margin-bottom: 0; }
.prosa p { margin: 0 0 10px; }
.prosa p:last-child { margin-bottom: 0; }
.rotulo-campo { font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.lista-campo { margin: 0; padding-left: 22px; }
.lista-campo li { margin-bottom: 6px; padding-left: 2px; }
.preguntas { margin: 0; padding-left: 0; list-style: none; counter-reset: q; }
.preguntas li { counter-increment: q; font-size: 18px; line-height: 1.5; padding: 10px 0 10px 40px; position: relative; border-top: 1px solid var(--linea); }
.preguntas li:last-child { border-bottom: 1px solid var(--linea); }
.preguntas li::before { content: counter(q); position: absolute; left: 0; top: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--vidrio-suave); border: 1px solid var(--borde-fuerte); color: var(--acento); font-size: 14px; font-weight: 700; }
.destacada { font-size: 20px; font-weight: 700; line-height: 1.4; background: var(--vidrio-suave); border: 1px solid var(--linea); border-radius: 18px; padding: 14px 18px; margin: 0; }
.destacada .rot { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); margin-bottom: 4px; }
.nota-discreta { font-size: 15px; color: var(--suave); margin: 0; }
.solo-profe { background: var(--vidrio-suave); border: 1px dashed var(--borde-fuerte); border-radius: 14px; padding: 12px 16px; }
.solo-profe .quien { font-size: 13px; color: var(--marca-tinta); background: var(--marca); display: inline-block; padding: 1px 8px; border-radius: 6px; margin-bottom: 6px; }
mark.pendiente { background: var(--marca); color: var(--marca-tinta); padding: 0 4px; border-radius: 4px; font-family: var(--sans); font-size: 0.88em; }

.pie-sesion { margin-top: 16px; border-radius: 26px; padding: 22px 24px; }
.pie-sesion > div + div { margin-top: 18px; }
.pie-sesion .referencias { font-size: 15px; color: var(--suave); padding-left: 0; list-style: none; margin: 0; }
.pie-sesion .referencias li { padding-left: 2em; text-indent: -2em; margin-bottom: 6px; }
.navegar { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.navegar a { text-decoration: none; flex: 1 1 240px; border-radius: 20px; padding: 14px 18px; }
.navegar a span { display: block; font-size: 13px; color: var(--suave); }
.navegar a strong { font-weight: 700; font-size: 17px; }
.navegar a:hover { border-color: var(--borde-fuerte); }
.navegar .sig { text-align: right; }

.estado { padding: 30px 0; }
.estado h1 { font-weight: 700; font-size: 30px; margin: 0 0 10px; }
.estado p { color: var(--suave); max-width: 32em; }

.pie { margin-top: 56px; font-size: 14px; color: var(--suave); text-align: center; }
.pie p { margin: 0 0 6px; }
.aviso-conexion { font-size: 15px; color: var(--marca-tinta); background: var(--marca); padding: 8px 14px; border-radius: 14px; }
.aviso-conexion.arriba { margin: -12px 0 24px; }

/* ---------- Pantalla del salón (modo proyector) ---------- */
/* Pensado para televisor: letra grande, márgenes de seguridad del 5 % por si el televisor recorta bordes. */
.proyector { position: fixed; inset: 0; z-index: 50; background: var(--fondo); color: var(--tinta); display: flex; flex-direction: column; gap: 2vh; padding: max(4vh, env(safe-area-inset-top, 0px)) max(5vw, env(safe-area-inset-right, 0px)) max(4vh, env(safe-area-inset-bottom, 0px)) max(5vw, env(safe-area-inset-left, 0px)); }
.proyector[hidden] { display: none; }
.proyector .deco { position: absolute; }
.proyector .deco .f1 { width: 30vw; height: 30vw; right: -19vw; bottom: -19vw; top: auto; }
.proyector .deco .f2 { display: block; width: 22vw; height: 22vw; left: -14vw; top: -14vw; }
.proyector > :not(.deco) { position: relative; z-index: 1; }
.proyector .cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--suave); font-size: clamp(16px, 1.7vw, 30px); }
.proyector .cab .donde { display: flex; align-items: center; gap: 12px; min-width: 0; }
.proyector .cab .donde .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proyector .cab .donde strong { color: var(--tinta); font-weight: 700; }
.proyector .herr { display: flex; align-items: center; gap: 12px; flex: none; }
.proyector .herr button, .proyector .controles button { background: var(--solido); border: 1px solid var(--borde-fuerte); box-shadow: var(--brillo); color: var(--tinta); border-radius: 40px; padding: 0.45em 1.1em; cursor: pointer; font: inherit; font-size: 0.8em; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.proyector .herr button:hover, .proyector .controles button:hover { border-color: var(--tinta); }
.proyector .herr .boton-tema { width: 2.2em; height: 2.2em; padding: 0; font-size: 1em; }
.proyector .herr .boton-tema svg { width: 1em; height: 1em; }
.proyector .reloj { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.5em !important; min-width: 4.6em; padding: 0.25em 0.8em !important; }
.proyector .reloj.corriendo { color: var(--acento); border-color: var(--acento); }
.proyector .reloj.agotado { background: var(--acento); border-color: var(--acento); color: var(--activo-tinta); }
.proyector .cab svg { width: 1.4em; height: 1.4em; flex: none; color: var(--acento); }
.proyector .lienzo { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 5vh 5vw; overflow: auto; cursor: pointer; border-radius: clamp(20px, 2.4vw, 40px); background: var(--vidrio); border: 1px solid var(--borde); box-shadow: var(--brillo), var(--sombra); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); }
.proyector .accion-video { margin-top: 0.7em !important; font-size: 0.5em; }
.proyector .boton-proy { display: inline-flex; align-items: center; gap: 0.5em; color: var(--activo-tinta); background: var(--activo); text-decoration: none; padding: 0.5em 1.1em; border-radius: 40px; font-weight: 700; }
.proyector .boton-proy svg { width: 1.1em; height: 1.1em; }
.proyector .indice { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-start; justify-content: flex-end; padding: 12vh 5vw 5vh; }
.proyector .indice[hidden] { display: none; }
.proyector .indice .caja { background: var(--solido); border: 1px solid var(--borde); border-radius: 24px; padding: 18px; width: min(560px, 100%); max-height: 100%; overflow: auto; box-shadow: var(--sombra); }
.proyector .indice-tit { margin: 0 0 10px; color: var(--suave); font-size: 16px; }
.proyector .indice ol { list-style: none; margin: 0; padding: 0; }
.proyector .indice button { width: 100%; display: flex; gap: 14px; align-items: center; text-align: left; background: transparent; border: 0; border-radius: 14px; padding: 10px 12px; color: var(--tinta); cursor: pointer; font: inherit; }
.proyector .indice button:hover, .proyector .indice button:focus-visible { background: var(--vidrio-suave); }
.proyector .indice button svg { width: 28px; height: 28px; flex: none; color: var(--acento); }
.proyector .indice .n { display: block; font-size: 19px; font-weight: 700; }
.proyector .indice .d { display: block; font-size: 15px; color: var(--suave); }
.proyector .diapo { max-width: 30em; width: 100%; font-weight: 800; }
.proyector .diapo.xl { font-size: calc(clamp(32px, 5.2vw, 110px) * var(--escala, 1)); line-height: 1.15; letter-spacing: -0.015em; }
.proyector .diapo.l { font-size: calc(clamp(28px, 4vw, 84px) * var(--escala, 1)); line-height: 1.3; font-weight: 500; }
.proyector .diapo.m { font-size: calc(clamp(24px, 3vw, 62px) * var(--escala, 1)); line-height: 1.4; font-weight: 500; }
.proyector .diapo.s { font-size: calc(clamp(21px, 2.4vw, 50px) * var(--escala, 1)); line-height: 1.45; font-weight: 500; }
.proyector .diapo p { margin: 0; }
.proyector .diapo .rot { display: block; font-size: 0.42em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); margin-bottom: 0.6em; }
.proyector .diapo ol, .proyector .diapo ul { margin: 0; padding-left: 1.2em; }
.proyector .diapo li + li { margin-top: 0.5em; }
.proyector .portadilla { text-align: left; }
.proyector .diapo.fin { text-align: center; max-width: none; }
.proyector .fin .gracias { font-size: calc(clamp(40px, 7vw, 150px) * var(--escala, 1)); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--acento); }
.proyector .fin .gracias-sub { margin-top: 0.8em !important; font-size: calc(clamp(18px, 2vw, 40px) * var(--escala, 1)); font-weight: 600; color: var(--suave); }
.proyector .portadilla svg { width: 1.4em; height: 1.4em; color: var(--acento); display: block; margin-bottom: 0.4em; }
.proyector .portadilla .t { font-size: 0.4em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); display: block; margin-bottom: 0.3em; }
.proyector .controles { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: clamp(16px, 1.5vw, 26px); }
.proyector .avance { flex: 1; display: flex; gap: 6px; }
.proyector .avance span { height: 8px; background: var(--linea); border-radius: 6px; overflow: hidden; }
.proyector .avance b { display: block; height: 100%; background: var(--acento); border-radius: 6px; }
.proyector .cuenta { white-space: nowrap; }
/* Pantalla de inicio: Clase #N y la lista de actividades */
.proyector .diapo.agenda { font-size: calc(clamp(22px, 2.9vw, 60px) * var(--escala, 1)); line-height: 1.3; font-weight: 700; }
.proyector .agenda .clase-n { font-size: 1.9em; font-weight: 800; letter-spacing: -0.02em; color: var(--acento); margin: 0 0 0.1em; }
.proyector .agenda .clase-f { font-size: 0.7em; font-weight: 500; color: var(--suave); margin: 0 0 0.5em; }
.proyector .agenda ol { list-style: none; counter-reset: a; padding: 0; margin: 0.4em 0 0; }
.proyector .agenda li { counter-increment: a; display: flex; gap: 0.6em; align-items: baseline; }
.proyector .agenda li + li { margin-top: 0.35em; }
.proyector .agenda li::before { content: counter(a) "."; color: var(--acento); font-weight: 800; min-width: 1.3em; }
.agenda-web { margin: 0 0 22px; padding: 18px 22px; border-radius: 22px; background: var(--vidrio); border: 1px solid var(--borde); box-shadow: var(--brillo), var(--sombra); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.agenda-web .rot { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.agenda-web .clase-n { margin: 2px 0 8px; font-size: 24px; font-weight: 800; color: var(--acento); }
.agenda-web ol { margin: 0; padding-left: 26px; font-size: 18px; font-weight: 600; }
.agenda-web li { padding-left: 4px; }
.agenda-web li + li { margin-top: 4px; }
.agenda-web li::marker { color: var(--acento); font-weight: 800; }
body.proyectando { overflow: hidden; }
.proyector .herr .letra { font-weight: 700; min-width: 2.6em; }
.proyector .aviso-escala { position: absolute; z-index: 6; left: 50%; top: 14vh; transform: translateX(-50%); padding: 0.5em 1.2em; border-radius: 40px; background: var(--activo); color: var(--activo-tinta); font-weight: 700; font-size: clamp(16px, 1.6vw, 30px); }
.proyector .aviso-escala[hidden] { display: none; }

/* Personalidad por tipo de momento en la pantalla del salón */
.proyector .lienzo .marca { position: absolute; right: 3vw; bottom: 3vh; width: 24vh; height: 24vh; color: var(--acento); opacity: .09; pointer-events: none; }
.proyector .lienzo .marca svg { width: 100%; height: 100%; }
.proyector .lienzo > .diapo { position: relative; }
.proyector .lienzo.tipo-experimento_mental, .proyector .lienzo.tipo-dialogo { background: color-mix(in srgb, var(--acento) 9%, var(--vidrio)); border-color: color-mix(in srgb, var(--acento) 40%, transparent); }
.proyector .tipo-lectura_grupal .diapo:not(.imagen) { max-width: 26em; border-left: 0.14em solid var(--acento); padding-left: 0.9em; }
.proyector .tipo-lectura_grupal .diapo.m, .proyector .tipo-lectura_grupal .diapo.s { line-height: 1.55; }
.proyector .tipo-dinamica .diapo ol { list-style: none; counter-reset: r; padding-left: 0; }
.proyector .tipo-dinamica .diapo ol li { counter-increment: r; position: relative; padding-left: 1.9em; }
.proyector .tipo-dinamica .diapo ol li::before { content: counter(r); position: absolute; left: 0; top: 0.05em; width: 1.35em; height: 1.35em; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--activo-tinta); font-weight: 800; font-size: 0.85em; }
.proyector .tipo-taller .diapo:not(.imagen) > p, .proyector .tipo-presentacion_estudiantes .diapo > p { border: 0.08em solid var(--acento); border-radius: 0.6em; padding: 0.6em 0.8em; }
.proyector .tipo-taller .diapo .portadilla, .proyector .tipo-taller .diapo .accion-video { border: 0; padding: 0; }
.proyector .tipo-cierre .diapo .rot::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.4em; vertical-align: -0.12em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h12a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 8h6M8 12h6M18 8h2M18 12h2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h12a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 8h6M8 12h6M18 8h2M18 12h2'/%3E%3C/svg%3E") center / contain no-repeat; }
.proyector .miniatura-proy { display: block; position: relative; width: min(46vh, 100%); aspect-ratio: 16 / 9; margin: 0.5em 0 0; border-radius: 16px; overflow: hidden; font-size: 1rem; }
.proyector .miniatura-proy img, .miniatura-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura-video { display: block; position: relative; aspect-ratio: 16 / 9; max-width: 520px; margin-bottom: 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--borde); }
.miniatura-video .play, .proyector .miniatura-proy .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0, 0, 0, .55); }
.miniatura-video .play::after, .proyector .miniatura-proy .play::after { content: ""; position: absolute; left: 26px; top: 20px; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }

/* Personalidad por tipo de momento en la página */
.momento.tipo-experimento_mental, .momento.tipo-dialogo { background: color-mix(in srgb, var(--acento) 8%, var(--vidrio)); border-color: color-mix(in srgb, var(--acento) 35%, transparent); }
.momento.tipo-lectura_grupal .lectura { border-left: 3px solid var(--acento); padding-left: 16px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .pagina { padding: 14px 14px 48px; }
  .barra { margin-bottom: 20px; }
  .momento { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 18px 22px; border-radius: 22px; }
  .momento .lado { display: flex; align-items: center; gap: 8px; }
  .momento .lado svg { width: 24px; height: 24px; margin: 0; }
  .momento h2 { font-size: 21px; }
  .lectura { font-size: 18px; }
  .preguntas li { font-size: 17px; }
  .tarjeta-curso { min-height: 0; padding: 18px 18px 0; border-radius: 22px; }
  .tarjeta-curso .atajo { margin: 16px -18px 0; padding: 12px 18px 14px; }
  .tarjeta-curso .grado { font-size: 40px; }
  .tarjeta-curso .pregunta { font-size: 20px; }
  .ruta { grid-template-columns: repeat(var(--n), minmax(50px, 1fr)); }
  .ruta .rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .regla button { padding: 0 4px; }
  .regla button .m { display: none; }
  .proyector .cab .donde .txt { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .proyector .diapo { animation: entra 200ms ease-out; }
  @keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media print {
  .deco, .acciones, .regla-fija, .regla-nota, .navegar, .barra .der { display: none; }
  body, html { background: #fff; color: #000; }
  .momento, .tarjeta-sesion, .pie-sesion { box-shadow: none; border: 1px solid #ccc; }
}