/* ==========================================================================
   Taller de Scratch · hoja de estilo
   Pensada para leerse en una pantalla a dos metros: tipografía grande,
   contraste alto, botones grandes. Sin dependencias.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --indigo:#2B4C8C;  --indigo-d:#1E3663;  --indigo-l:#E8EDF7;
  --kakaw:#C1275B;   --jade:#1F7A5C;     --maiz:#E8B23A;   --maiz-l:#FCF3DC;
  --qox:#D9532B;
  --tinta:#241D18;   --gris:#6B6157;     --linea:#E4DCCC;
  --papel:#FBF7EF;   --blanco:#fff;

  --ok:#1F7A5C; --warn:#C98A12; --mal:#C0392B;

  --r-s:8px; --r-m:14px; --r-l:22px;
  --s1:4px; --s2:8px; --s3:14px; --s4:20px; --s5:30px; --s6:44px;
  --shadow-1:0 1px 2px rgba(36,29,24,.08), 0 2px 8px rgba(36,29,24,.06);
  --shadow-2:0 4px 12px rgba(36,29,24,.10), 0 12px 32px rgba(36,29,24,.08);

  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-num:ui-rounded,"Segoe UI",system-ui,sans-serif;
  --topbar-h:68px;
}

html, body { height:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  color:var(--tinta);
  background-color:var(--papel);
  background-image:
    repeating-linear-gradient(90deg, rgba(43,76,140,.045) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg,  rgba(31,122,92,.045) 0 2px, transparent 2px 9px);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3,h4 { margin:0 0 var(--s2); line-height:1.25; font-weight:750; letter-spacing:-.01em; }
h1 { font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
h2 { font-size:clamp(1.25rem, 1.05rem + .8vw, 1.55rem); }
h3 { font-size:1.1rem; }
p { margin:0 0 var(--s2); }
a { color:var(--indigo); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--indigo); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-s) 0;
}
.skip-link:focus { left:0; }

:focus-visible{ outline:3px solid var(--maiz); outline-offset:2px; }

/* ------------------------------------------------------------------
   PUERTA DE ENTRADA
   ------------------------------------------------------------------ */
.puerta{
  min-height:100%;
  display:grid; place-items:center;
  padding:var(--s5) var(--s4);
}
.puerta-caja{
  width:100%; max-width:760px;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-2);
  padding:var(--s6) var(--s5);
}

.marca{ display:flex; gap:var(--s3); align-items:flex-start; margin-bottom:var(--s5); }
.marca-icono svg, .marca-mini svg { width:56px; height:56px; flex:none; border-radius:14px; }
.marca-mini svg { width:38px; height:38px; border-radius:10px; }
.puerta-sub{ color:var(--gris); font-size:1.05rem; margin:0; }

.puerta-aviso{
  background:var(--maiz-l); border:1px solid var(--maiz);
  border-radius:var(--r-m); padding:var(--s3) var(--s4);
  margin-bottom:var(--s4); font-size:.95rem;
}
.puerta-aviso.aviso-mal{ background:#FDECEA; border-color:var(--mal); }

.puerta-opciones{ display:grid; gap:var(--s3); }
@media (min-width:640px){ .puerta-opciones{ grid-template-columns:1fr 1fr; } }

.opcion{
  display:flex; gap:var(--s3); align-items:flex-start; text-align:left;
  padding:var(--s4); min-height:120px; cursor:pointer;
  background:var(--indigo-l); border:2px solid var(--indigo);
  border-radius:var(--r-m); font:inherit; color:var(--tinta);
  transition:transform .12s, box-shadow .12s;
}
.opcion:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.opcion-docente{ background:#E7F4EF; border-color:var(--jade); }
.opcion-icono{ font-size:2rem; line-height:1; }
.opcion-txt strong{ display:block; font-size:1.1rem; margin-bottom:4px; }
.opcion-txt small{ display:block; color:var(--gris); line-height:1.45; }

.puerta-form{
  margin-top:var(--s5); padding-top:var(--s5);
  border-top:2px solid var(--linea);
}
.puerta-form label{ display:block; font-weight:650; margin-bottom:var(--s2); }
.puerta-nota{ color:var(--gris); font-size:.9rem; margin:var(--s2) 0 0; }

/* Acceso de facilitador: deliberadamente discreto, fuera de la vista */
.acceso-facilitador{
  margin-top:var(--s5); padding-top:var(--s4);
  border-top:1px dashed var(--linea); text-align:center;
}
.btn-pin{
  font:inherit; font-size:.85rem; cursor:pointer;
  background:none; border:none; color:var(--gris);
  padding:8px 14px; border-radius:var(--r-s);
  text-decoration:underline; text-underline-offset:3px;
}
.btn-pin:hover{ color:var(--indigo); background:var(--indigo-l); }

.form-pin{ margin-top:var(--s3); text-align:left; }
.form-pin label{ display:block; font-weight:650; margin-bottom:var(--s2); }
.pin-error{
  margin:var(--s2) 0 0; color:var(--mal); font-weight:650; font-size:.92rem;
}

.fila-form{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.fila-form input{ flex:1 1 220px; min-width:0; }
.fila-form .btn{ flex:none; }

input[type=text], input[type=password], textarea{
  font:inherit; padding:12px 14px;
  border:2px solid var(--linea); border-radius:var(--r-s);
  background:var(--blanco); color:var(--tinta); min-height:48px; width:100%;
}
input:focus{ border-color:var(--indigo); }

/* ------------------------------------------------------------------
   BOTONES
   ------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:650; cursor:pointer;
  min-height:48px; padding:12px 22px;
  border:2px solid var(--linea); border-radius:var(--r-s);
  background:var(--blanco); color:var(--tinta);
  transition:background .12s, border-color .12s, transform .1s;
}
.btn:hover:not(:disabled){ background:var(--papel); }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn.primary{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.btn.primary:hover:not(:disabled){ background:var(--indigo-d); border-color:var(--indigo-d); }
.btn.ok{ background:var(--jade); border-color:var(--jade); color:#fff; }
.btn.ok:hover:not(:disabled){ background:#176049; }
.btn.ghost{ background:transparent; border-color:transparent; color:var(--indigo); text-decoration:underline; }
.btn.ghost:hover:not(:disabled){ background:var(--indigo-l); }
.btn.peligro{ border-color:var(--mal); color:var(--mal); }
.btn.peligro:hover:not(:disabled){ background:#FDECEA; }
.btn-mini{ min-height:40px; padding:8px 14px; font-size:.92rem; }

.btn-icono{
  font:inherit; font-weight:650; cursor:pointer;
  min-height:40px; padding:8px 14px;
  background:transparent; border:1px solid var(--linea); border-radius:var(--r-s);
  color:var(--gris);
}
.btn-icono:hover{ background:var(--papel); color:var(--tinta); }

/* ------------------------------------------------------------------
   TOPBAR
   ------------------------------------------------------------------ */
.topbar{
  position:sticky; top:0; z-index:50;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding:0 var(--s4);
  background:var(--blanco); border-bottom:1px solid var(--linea);
  box-shadow:var(--shadow-1);
}
.marca-top{ display:flex; gap:var(--s2); align-items:center; min-width:0; }
.marca-top-txt{ min-width:0; }
.marca-top-txt strong{ display:block; font-size:1rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.marca-top-txt span{ display:block; font-size:.82rem; color:var(--gris); }

.top-der{ display:flex; gap:var(--s2); align-items:center; flex:none; }

.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px;
  background:var(--papel); border:1px solid var(--linea);
  font-size:.85rem; font-weight:600; color:var(--gris);
  white-space:nowrap;
}
.punto{ width:9px; height:9px; border-radius:50%; background:var(--warn); flex:none; }
.pill-ok .punto{ background:var(--ok); }
.pill-mal .punto{ background:var(--mal); }
.pill-conectados{ background:var(--indigo-l); border-color:var(--indigo); color:var(--indigo-d); }

@media (max-width:600px){
  :root{ --topbar-h:auto; }
  .topbar{ flex-wrap:wrap; padding:var(--s3) var(--s3); }
  .top-der{ width:100%; justify-content:space-between; }
}

/* ------------------------------------------------------------------
   AVISO DEL FACILITADOR
   ------------------------------------------------------------------ */
.aviso-facilitador{
  position:sticky; top:var(--topbar-h); z-index:40;
  display:flex; gap:var(--s3); align-items:center;
  padding:var(--s3) var(--s4);
  background:var(--maiz); border-bottom:3px solid #C9971B;
  color:#3A2A00; font-size:1.1rem; font-weight:700;
}
.aviso-ico{ font-size:1.4rem; flex:none; }

/* ------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------ */
.wrap{ max-width:1080px; margin:0 auto; padding:var(--s5) var(--s4) var(--s6); }
@media (max-width:600px){ .wrap{ padding:var(--s4) var(--s3) var(--s5); } }

.bloque{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r-l); padding:var(--s5);
  margin-bottom:var(--s4); box-shadow:var(--shadow-1);
}
.bloque-panel{ border-color:var(--indigo); }
.bloque-tit{
  font-size:1.05rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--indigo); margin-bottom:var(--s2);
}
.bloque-nota{ color:var(--gris); font-size:.92rem; margin-bottom:var(--s3); }

/* ------------------------------------------------------------------
   SESIÓN ACTUAL
   ------------------------------------------------------------------ */
.sesion-actual{
  background:linear-gradient(135deg, var(--indigo), var(--indigo-d));
  color:#fff; border-radius:var(--r-l);
  padding:var(--s5); margin-bottom:var(--s4);
  box-shadow:var(--shadow-2);
}
.sesion-kicker{
  display:inline-block; background:rgba(255,255,255,.2);
  padding:5px 14px; border-radius:999px;
  font-size:.85rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; margin-bottom:var(--s3);
}
.sesion-tit{ font-size:clamp(1.4rem, 1.1rem + 1.4vw, 2rem); margin-bottom:var(--s2); }
.sesion-concepto{
  font-size:1.05rem; opacity:.94; margin:0;
  padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.28);
}
.sesion-producto{
  margin-top:var(--s3); background:rgba(232,178,58,.22);
  border:1px solid rgba(232,178,58,.6);
  border-radius:var(--r-s); padding:var(--s3);
  font-size:.95rem;
}
.sesion-producto strong{ color:var(--maiz); }

/* ------------------------------------------------------------------
   BLOQUE EN CURSO
   ------------------------------------------------------------------ */
.bloque-cuerpo{ margin-top:var(--s3); }
.bloque-cab{
  display:flex; align-items:center; gap:var(--s3);
  flex-wrap:wrap; margin-bottom:var(--s2);
}
.bloque-min{
  display:inline-block; background:var(--indigo-l); color:var(--indigo-d);
  padding:5px 12px; border-radius:var(--r-s);
  font-family:var(--font-num); font-weight:750; font-size:.9rem;
}
.bloque-cont{
  font-size:.85rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--gris);
}
.bloque-nombre{ font-size:1.3rem; margin-bottom:var(--s3); }
.bloque-texto{ font-size:1.05rem; color:var(--tinta); margin-bottom:var(--s4); }

.pasos{ list-style:none; padding:0; margin:0; display:grid; gap:var(--s2); }
.pasos li{
  display:flex; gap:var(--s3); align-items:flex-start;
  padding:var(--s3); background:var(--papel);
  border-radius:var(--r-s); border-left:4px solid var(--indigo);
  font-size:1.02rem;
}
.paso-n{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--indigo); color:#fff;
  display:grid; place-items:center;
  font-weight:750; font-size:.9rem; font-family:var(--font-num);
}

/* ------------------------------------------------------------------
   LISTA DE SECCIONES
   ------------------------------------------------------------------ */
.lista-secciones{ display:grid; gap:var(--s3); }

.sec{
  display:flex; gap:var(--s3); align-items:flex-start;
  padding:var(--s4); border-radius:var(--r-m);
  border:2px solid var(--linea); background:var(--blanco);
}
.sec.abierta{ border-color:var(--jade); background:#F2FAF7; }
.sec.actual{ border-color:var(--indigo); background:var(--indigo-l); box-shadow:var(--shadow-2); }

.sec-num{
  flex:none; width:52px; height:52px; border-radius:var(--r-s);
  background:var(--linea); color:var(--gris);
  display:grid; place-items:center; font-weight:800; font-size:1.2rem;
  font-family:var(--font-num);
}
.sec.abierta .sec-num{ background:var(--jade); color:#fff; }
.sec.actual .sec-num{ background:var(--indigo); color:#fff; }

.sec-cuerpo{ flex:1; min-width:0; }
.sec-tit{ font-size:1.08rem; font-weight:700; margin-bottom:4px; }
.sec-concepto{ font-size:.92rem; color:var(--gris); margin:0 0 var(--s2); }
.sec-estado{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.sec-estado.cerrada{ color:var(--gris); }
.sec-estado.abierta{ color:var(--jade); }
.sec-estado.actual{ color:var(--indigo); }

/* ------------------------------------------------------------------
   MATERIALES
   ------------------------------------------------------------------ */
.lista-materiales{ display:grid; gap:var(--s2); }

.mat{
  display:flex; gap:var(--s3); align-items:center;
  padding:var(--s3) var(--s4); border-radius:var(--r-m);
  border:1px solid var(--linea); background:var(--blanco);
  text-decoration:none; color:inherit;
  transition:background .12s, border-color .12s;
}
.mat:hover{ background:var(--papel); border-color:var(--indigo); }
.mat.libre{ border-color:var(--jade); background:#F2FAF7; }
.mat.bloqueado{ opacity:.5; cursor:not-allowed; }

.mat-ico{
  flex:none; width:46px; height:46px; border-radius:var(--r-s);
  background:var(--indigo-l); color:var(--indigo-d);
  display:grid; place-items:center; font-size:1.2rem;
}
.mat-libre .mat-ico{ background:var(--jade); color:#fff; }
.mat-bloqueado .mat-ico{ background:var(--linea); color:var(--gris); }

.mat-cuerpo{ flex:1; min-width:0; }
.mat-tit{ font-weight:700; display:block; }
.mat-desc{ font-size:.9rem; color:var(--gris); display:block; line-height:1.4; }
.mat-momento{
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--gris); background:var(--papel);
  padding:3px 9px; border-radius:999px; border:1px solid var(--linea);
  flex:none; align-self:flex-start;
}
.mat-libre .mat-momento{ color:var(--jade); border-color:var(--jade); background:#fff; }

@media (max-width:520px){
  .mat{ flex-wrap:wrap; }
  .mat-momento{ margin-left:58px; }
}

/* ------------------------------------------------------------------
   FACILITADOR
   ------------------------------------------------------------------ */
.notas-col{
  background:var(--maiz-l); border-left:4px solid var(--maiz);
  border-radius:var(--r-s); padding:var(--s3) var(--s4); margin-bottom:var(--s3);
}
.notas-col h3{ font-size:.95rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gris); margin-bottom:var(--s2); }
.notas-col ul{ margin:0; padding-left:1.3rem; }
.notas-col li{ margin-bottom:6px; line-height:1.5; }
.notas-col p{ margin:0 0 6px; }
.notas-col strong{ color:var(--tinta); }

.control-mensaje label{ display:block; font-weight:650; margin-bottom:var(--s2); }

.control-timer{ margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--linea); }
.control-timer h3{ font-size:.95rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gris); }
.timer{ display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; }
.timer-valor{
  font-family:var(--font-num); font-size:2.2rem; font-weight:800;
  color:var(--indigo); min-width:130px;
}

.control-secciones{ display:grid; gap:var(--s3); }
.control-secciones .sec{ flex-wrap:wrap; }
.acciones-sec{ display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; }
.nav-slides{ display:flex; gap:var(--s1); }

.lista-conectados{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.conectado{
  background:var(--indigo-l); color:var(--indigo-d);
  padding:8px 14px; border-radius:999px;
  font-weight:650; font-size:.95rem;
}
.conectados-vacio{ color:var(--gris); font-style:italic; }

.config label{ display:block; font-weight:650; margin-bottom:var(--s2); }
.config .fila-form{ margin-bottom:var(--s3); }

.estado-msg{
  padding:var(--s3); border-radius:var(--r-s); margin-bottom:var(--s3);
  font-size:.92rem; border:1px solid;
}
.estado-ok{ background:#F2FAF7; border-color:var(--jade); color:#145340; }
.estado-mal{ background:#FDECEA; border-color:var(--mal); color:#8E2B1D; }

/* ------------------------------------------------------------------
   DOCENTE · modo presentación (pestañas En vivo / Materiales)
   ------------------------------------------------------------------ */
.tabs-docente{
  display:flex; gap:var(--s2);
  margin-bottom:var(--s4);
}
.tab-docente{
  flex:1; font:inherit; font-weight:700; cursor:pointer;
  min-height:52px; padding:12px 16px;
  border:2px solid var(--linea); border-radius:var(--r-m);
  background:var(--blanco); color:var(--gris);
}
.tab-docente.activa{
  background:var(--indigo); border-color:var(--indigo); color:#fff;
}
.tab-punto{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--maiz); margin-left:4px; vertical-align:middle;
}

/* La diapositiva actual: grande, sin nada más que distraiga */
.slide{
  border:2px solid var(--indigo);
  padding:var(--s5);
}
.slide .bloque-nombre{ font-size:clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem); }
.slide .bloque-texto{ font-size:1.12rem; }
.slide .pasos li{ font-size:1.08rem; padding:var(--s4); }

/* Tira de avance: 4 sesiones + paso actual */
.progreso{
  display:flex; align-items:center; gap:var(--s2);
  justify-content:center; flex-wrap:wrap;
  padding:var(--s4) var(--s3);
}
.prog-sec{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:800; font-family:var(--font-num);
  background:var(--blanco); border:2px solid var(--linea); color:var(--gris);
}
.prog-sec.abierta{ border-color:var(--jade); color:var(--jade); }
.prog-sec.actual{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.prog-pasos{
  font-size:.9rem; font-weight:700; color:var(--gris);
  margin-left:var(--s2);
}

/* Descarga del material del paso, dentro de la diapositiva */
#materialDelPaso{
  display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center;
  margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px dashed var(--linea);
}
#materialDelPaso:empty{ display:none; }
.matpaso-tit{ width:100%; font-size:.95rem; color:var(--gris); margin:0; }

/* ------------------------------------------------------------------
   FACILITADOR · vista previa + notas colapsables
   ------------------------------------------------------------------ */
.bloque-vista-previa{ border-color:var(--jade); background:#F2FAF7; }
.vista-previa{ display:grid; gap:6px; }
.prev-kicker{
  font-size:.8rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--jade);
}
.prev-tit{ font-size:1.05rem; }
.prev-aviso{
  background:var(--maiz); border-radius:var(--r-s);
  padding:8px 12px; font-weight:700; font-size:.95rem; color:#3A2A00;
}

.bloque-notas{ padding:0; }
.bloque-notas summary{ list-style:none; cursor:pointer; }
.bloque-notas summary::-webkit-details-marker{ display:none; }
.notas-resumen{
  display:block; padding:var(--s4) var(--s5);
  font-weight:700; font-size:1.05rem; color:var(--indigo);
}
.notas-resumen::before{ content:"▶ "; font-size:.8em; }
.bloque-notas[open] .notas-resumen::before{ content:"▼ "; }
.bloque-notas[open] .notas-resumen{ border-bottom:1px solid var(--linea); }
.bloque-notas #notasFacilitador{ padding:var(--s4) var(--s5); }
.notas-hint{ font-weight:400; font-size:.85rem; color:var(--gris); }

.pie-docente{
  text-align:center; color:var(--gris); font-size:.9rem;
  padding:var(--s5) var(--s3);
  border-top:1px solid var(--linea);
}

/* ------------------------------------------------------------------
   IMPRESIÓN
   ------------------------------------------------------------------ */
@media print{
  .topbar, .aviso-facilitador, .btn, .btn-icono, .skip-link{ display:none !important; }
  body{ background:#fff; }
  .bloque{ border:1px solid #ccc; box-shadow:none; break-inside:avoid; }
  .sesion-actual{ background:#2B4C8C !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}