/* =============================================================================
   «Actualización Pedagógica en Tiempos de IA» — estilos.

   El público son docentes, muchos con veinte años de aula y poca paciencia con
   las interfaces. Nada de iconografía de moda: tipografía grande, un color por
   significado, y todo lo que se pueda tocar, del tamaño de un dedo. Buena parte
   de este curso se va a hacer en el teléfono, en un receso de veinte minutos.
   ========================================================================== */

.curso-libre {
  --ap-fuego:#C2410C; --ap-fuego-osc:#9A3412; --ap-nube:#FDF1EA;
  --ap-tinta:#1C1917; --ap-gris:#57534E; --ap-gris-2:#8A827C; --ap-borde:#E7E2DE;
  --ap-fondo:#FAF8F7; --ap-papel:#fff;
  --ap-ok:#15803D; --ap-ok-nube:#E9F6EC;
  --ap-mal:#B91C1C; --ap-mal-nube:#FDECEC;
  --ap-ia:#6D28D9; --ap-ia-nube:#F2EDFD;
  --ap-ambar:#A16207; --ap-ambar-nube:#FDF6E3;
  --ap-azul:#1D4ED8; --ap-azul-nube:#EAF0FE;
  --ap-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

.curso-libre code, .curso-libre pre, .ap-area, .ap-resumen {
  font-variant-ligatures:none; font-feature-settings:"liga" 0,"clig" 0,"calt" 0;
}
.curso-libre code { font-family:var(--ap-mono); font-size:.9em; background:var(--ap-nube);
  color:var(--ap-fuego-osc); border-radius:4px; padding:1px 5px; }

.entradilla { font-size:1.08rem; color:var(--ap-gris); border-left:4px solid var(--ap-fuego);
  padding-left:16px; margin:0 0 28px; line-height:1.65; }

/* ============================================================  cajas de texto === */

.ap-caja { border:1px solid var(--ap-borde); border-radius:14px; padding:18px 20px;
  margin:24px 0; background:var(--ap-papel); }
.ap-caja > :first-child { margin-top:0; }
.ap-caja > :last-child { margin-bottom:0; }
.ap-caja h4 { font-size:1rem; margin:0 0 10px; letter-spacing:.01em; }

.ap-nota   { background:var(--ap-nube);       border-color:#F3D8C7; }
.ap-aviso  { background:var(--ap-ambar-nube); border-color:#EFE0B8; }
.ap-alerta { background:var(--ap-mal-nube);   border-color:#F3CFCF; }
.ap-bien   { background:var(--ap-ok-nube);    border-color:#CDE8D5; }
.ap-voz-ia { background:var(--ap-ia-nube);    border-color:#DFD2FA; }

.ap-nota h4   { color:var(--ap-fuego-osc); }
.ap-aviso h4  { color:var(--ap-ambar); }
.ap-alerta h4 { color:var(--ap-mal); }
.ap-bien h4   { color:var(--ap-ok); }
.ap-voz-ia h4 { color:var(--ap-ia); }

/* La voz del aula: lo que dice un docente o un estudiante de verdad. */
.ap-voz { border-left:3px solid var(--ap-fuego); padding:2px 0 2px 16px; margin:20px 0;
  font-style:italic; color:var(--ap-gris); }
.ap-voz cite { display:block; font-style:normal; font-size:.86rem; color:var(--ap-gris-2);
  margin-top:6px; }

/* ============================================================  el Aula (piezas) === */

.ap-pieza { border:2px solid var(--ap-borde); border-radius:16px; padding:20px 22px;
  margin:28px 0; background:var(--ap-papel); }
.ap-pieza.completa { border-color:#BFE3C9; background:linear-gradient(#F7FCF8, #fff); }
.ap-pieza h4 { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:1.08rem; margin:0 0 8px; }

.ap-marca { font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--ap-fondo); color:var(--ap-gris-2); border:1px solid var(--ap-borde);
  margin-left:auto; }
.ap-marca.ok { background:var(--ap-ok-nube); color:var(--ap-ok); border-color:#CDE8D5; }

.ap-hueco { margin-top:16px; }
.ap-campo { margin-bottom:18px; }
.ap-etiqueta { display:block; font-weight:600; font-size:.96rem; margin-bottom:5px;
  color:var(--ap-tinta); }
.ap-ayuda { font-size:.88rem; color:var(--ap-gris); margin:0 0 8px; line-height:1.55; }
.ap-area { width:100%; box-sizing:border-box; font:inherit; font-size:15px; line-height:1.6;
  padding:11px 13px; border:1px solid var(--ap-borde); border-radius:10px;
  background:var(--ap-fondo); color:var(--ap-tinta); resize:vertical; }
.ap-area:focus { outline:none; border-color:var(--ap-fuego); background:#fff;
  box-shadow:0 0 0 3px rgba(194,65,12,.12); }
.ap-area::placeholder { color:#B6ADA7; }

.ap-pie { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:4px; }
.ap-bt { font:inherit; font-size:14.5px; font-weight:600; padding:11px 18px; border-radius:10px;
  border:1px solid transparent; cursor:pointer; background:var(--ap-fuego); color:#fff;
  min-height:46px; display:inline-flex; align-items:center; gap:8px; }
.ap-bt:hover { background:var(--ap-fuego-osc); }
.ap-bt:disabled { opacity:.5; cursor:default; }
.ap-bt-suave { background:#fff; color:var(--ap-gris); border-color:var(--ap-borde);
  font-weight:500; }
.ap-bt-suave:hover { background:var(--ap-nube); color:var(--ap-fuego-osc);
  border-color:var(--ap-fuego); }

/* ============================================================  el veredicto === */

.ap-veredicto:empty { display:none; }
.ap-veredicto { margin-top:16px; display:grid; gap:8px; }
.ap-punto { display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px;
  align-items:start; padding:11px 13px; border-radius:10px; font-size:.94rem;
  line-height:1.6; }
.ap-punto b { font-size:15px; line-height:1.5; }
.ap-punto.bien { background:var(--ap-ok-nube); color:#14532D; }
.ap-punto.bien b { color:var(--ap-ok); }
.ap-punto.mal { background:var(--ap-mal-nube); color:#7F1D1D; }
.ap-punto.mal b { color:var(--ap-mal); }
.ap-punto code { background:rgba(0,0,0,.06); color:inherit; }

.ap-limite { font-size:.86rem; color:var(--ap-gris-2); line-height:1.55; margin:6px 0 0;
  padding-left:2px; }

.ap-ejemplo { border:1px dashed var(--ap-borde); border-radius:12px; padding:14px 16px;
  background:var(--ap-fondo); font-size:.93rem; line-height:1.65; }
.ap-ejemplo-tit { font-weight:600; color:var(--ap-gris); margin:0 0 8px; font-size:.86rem;
  text-transform:uppercase; letter-spacing:.06em; }
.ap-ejemplo-nota { margin:10px 0 0; font-size:.86rem; color:var(--ap-gris-2); }
.ap-ejemplo p { margin:0 0 8px; }

/* ============================================================  barra de avance === */

.ap-avance { border:1px solid var(--ap-borde); border-radius:14px; padding:14px 16px;
  margin:24px 0; background:var(--ap-fondo); }
.ap-avance-cab { display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; margin-bottom:9px; }
.ap-avance-tit { font-weight:700; font-size:.95rem; color:var(--ap-tinta); }
.ap-avance-n { font-size:.85rem; color:var(--ap-gris-2); }
.ap-barra { height:8px; border-radius:999px; background:#EDE7E3; overflow:hidden; }
.ap-barra span { display:block; height:100%; background:var(--ap-fuego);
  transition:width .35s ease; }
.ap-lista { list-style:none; margin:12px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:3px 14px; }
.ap-lista li { display:grid; grid-template-columns:18px minmax(0,1fr); align-items:center;
  font-size:.88rem; }
.ap-lista a { color:var(--ap-gris-2); text-decoration:none; overflow-wrap:anywhere; }
.ap-lista a:hover { color:var(--ap-fuego-osc); text-decoration:underline; }
.ap-lista .ap-tick { color:var(--ap-gris-2); font-weight:700; }
.ap-lista li.ok a { color:var(--ap-tinta); font-weight:600; }
.ap-lista li.ok .ap-tick { color:var(--ap-ok); }
.ap-lista li.borrador a { color:var(--ap-gris); }

.ap-resumen-cab { font-size:.92rem; color:var(--ap-gris); margin-bottom:12px; }
.ap-resumen { background:var(--ap-fondo); border:1px solid var(--ap-borde);
  border-radius:12px; padding:16px 18px; white-space:pre-wrap; overflow-wrap:anywhere;
  font-family:var(--ap-mono); font-size:13.4px; line-height:1.7; color:var(--ap-tinta);
  max-height:520px; overflow-y:auto; margin:0 0 14px; }
.ap-vacio { color:var(--ap-gris-2); font-style:italic; }

/* =================================================================  simulador === */

.ap-sim { border:1px solid var(--ap-borde); border-radius:16px; overflow:hidden;
  background:var(--ap-papel); margin:26px 0; }
.ap-sim-cab { padding:14px 18px; background:var(--ap-tinta); color:#fff;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ap-sim-tit { font-weight:700; font-size:1rem; }
.ap-sim-turno { margin-left:auto; font-size:.82rem; color:#C9C2BC; }
.ap-sim-cuerpo { padding:20px 22px; }
.ap-escena { font-size:1.02rem; line-height:1.7; color:var(--ap-tinta); margin:0 0 6px; }
.ap-escena p { margin:0 0 12px; }
.ap-escena p:last-child { margin-bottom:0; }

.ap-opciones { display:grid; gap:10px; margin:18px 0 0; }
.ap-opcion { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px;
  align-items:start; text-align:left; font:inherit; font-size:.97rem; line-height:1.6;
  padding:14px 16px; border:1px solid var(--ap-borde); border-radius:12px;
  background:var(--ap-fondo); color:var(--ap-tinta); cursor:pointer; }
.ap-opcion:hover { border-color:var(--ap-fuego); background:var(--ap-nube); }
.ap-opcion .ap-letra { display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; background:#fff; border:1px solid var(--ap-borde);
  font-weight:700; font-size:14px; color:var(--ap-gris); }
.ap-opcion:hover .ap-letra { border-color:var(--ap-fuego); color:var(--ap-fuego); }
.ap-opcion[disabled] { cursor:default; opacity:.55; }
.ap-opcion.elegida { opacity:1; border-color:var(--ap-fuego); background:var(--ap-nube); }
.ap-opcion.elegida .ap-letra { background:var(--ap-fuego); color:#fff;
  border-color:var(--ap-fuego); }

.ap-consecuencia { margin-top:18px; border-radius:12px; padding:16px 18px;
  border-left:4px solid var(--ap-fuego); background:var(--ap-fondo); line-height:1.7; }
.ap-consecuencia h5 { margin:0 0 8px; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ap-gris-2); }
.ap-consecuencia p { margin:0 0 10px; }
.ap-consecuencia p:last-child { margin-bottom:0; }
.ap-consecuencia.buena { border-left-color:var(--ap-ok); background:var(--ap-ok-nube); }
.ap-consecuencia.regular { border-left-color:var(--ap-ambar); background:var(--ap-ambar-nube); }
.ap-consecuencia.mala { border-left-color:var(--ap-mal); background:var(--ap-mal-nube); }

.ap-sim-pie { padding:14px 22px 20px; display:flex; gap:10px; flex-wrap:wrap;
  align-items:center; }
.ap-sim-ruta { margin-top:10px; border-top:1px solid var(--ap-borde); padding-top:14px; }
.ap-sim-ruta ol { margin:8px 0 0; padding-left:22px; font-size:.92rem; line-height:1.65;
  color:var(--ap-gris); }
.ap-sim-ruta li { margin-bottom:6px; }

/* =================================================================  el revisor === */

.ap-rev { margin:26px 0; }
.ap-material { border:1px solid var(--ap-borde); border-radius:14px; overflow:hidden;
  background:var(--ap-papel); }
.ap-material-cab { padding:10px 16px; background:var(--ap-ia-nube); color:var(--ap-ia);
  font-size:.83rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid #DFD2FA; }
.ap-material-cuerpo { padding:18px 20px; line-height:1.7; }
.ap-material-cuerpo > :first-child { margin-top:0; }
.ap-material-cuerpo > :last-child { margin-bottom:0; }
.ap-material-cuerpo h5 { font-size:1rem; margin:16px 0 6px; color:var(--ap-tinta); }
.ap-material-cuerpo ul, .ap-material-cuerpo ol { margin:0 0 12px; padding-left:22px; }
.ap-material-cuerpo li { margin-bottom:5px; }

.ap-hallazgos { display:grid; gap:9px; margin:18px 0 0; }
.ap-hallazgo { display:grid; grid-template-columns:26px minmax(0,1fr); gap:11px;
  align-items:start; padding:13px 15px; border:1px solid var(--ap-borde);
  border-radius:11px; background:var(--ap-fondo); cursor:pointer; text-align:left;
  font:inherit; font-size:.96rem; line-height:1.6; color:var(--ap-tinta); }
.ap-hallazgo:hover { border-color:var(--ap-fuego); background:var(--ap-nube); }
.ap-hallazgo .ap-caja-chk { width:22px; height:22px; border-radius:6px; background:#fff;
  border:2px solid #CFC7C1; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:transparent; }
.ap-hallazgo.marcado .ap-caja-chk { background:var(--ap-fuego); border-color:var(--ap-fuego);
  color:#fff; }
.ap-hallazgo.marcado { border-color:var(--ap-fuego); background:var(--ap-nube); }
.ap-hallazgo.acierto { border-color:#CDE8D5; background:var(--ap-ok-nube); }
.ap-hallazgo.acierto .ap-caja-chk { background:var(--ap-ok); border-color:var(--ap-ok); color:#fff; }
.ap-hallazgo.fallo { border-color:#F3CFCF; background:var(--ap-mal-nube); }
.ap-hallazgo.fallo .ap-caja-chk { background:var(--ap-mal); border-color:var(--ap-mal); color:#fff; }
/* Lo que se le pasó: tiene que saltar a la vista, porque es lo que hay que
   aprender. El recuadro queda vacío a propósito — no lo marcó. */
.ap-hallazgo.perdido { border-style:solid; border-color:#E8C97A;
  background:var(--ap-ambar-nube); }
.ap-hallazgo.perdido .ap-caja-chk { background:var(--ap-ambar); border-color:var(--ap-ambar);
  color:#fff; font-size:0; }
.ap-hallazgo.perdido .ap-caja-chk::after { content:'!'; font-size:15px; }
.ap-hallazgo[disabled] { cursor:default; }
.ap-porque { display:block; margin-top:7px; font-size:.89rem; color:var(--ap-gris);
  line-height:1.6; }

/* ==============================================================  las consignas === */

.ap-detector { border:1px solid var(--ap-borde); border-radius:16px; background:var(--ap-papel);
  padding:20px 22px; margin:26px 0; }
.ap-consigna-texto { border-left:4px solid var(--ap-azul); background:var(--ap-azul-nube);
  padding:14px 16px; border-radius:0 10px 10px 0; font-size:1rem; line-height:1.7;
  margin:0 0 18px; color:#152C6B; }
.ap-balanza { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px; margin:16px 0 0; }
.ap-plato { border:1px solid var(--ap-borde); border-radius:12px; padding:13px 15px;
  background:var(--ap-fondo); }
.ap-plato h5 { margin:0 0 7px; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ap-gris-2); }
.ap-plato ul { margin:0; padding-left:19px; font-size:.92rem; line-height:1.6;
  color:var(--ap-gris); }
.ap-plato li { margin-bottom:5px; }
.ap-plato.resiste { background:var(--ap-ok-nube); border-color:#CDE8D5; }
.ap-plato.resiste h5 { color:var(--ap-ok); }
.ap-plato.cede { background:var(--ap-mal-nube); border-color:#F3CFCF; }
.ap-plato.cede h5 { color:var(--ap-mal); }

.ap-medidor { height:34px; border-radius:999px; background:linear-gradient(90deg,
  var(--ap-mal) 0%, var(--ap-ambar) 50%, var(--ap-ok) 100%); position:relative;
  margin:18px 0 10px; }
.ap-aguja { position:absolute; top:-6px; width:4px; height:46px; border-radius:3px;
  background:var(--ap-tinta); box-shadow:0 0 0 3px #fff; transition:left .5s ease;
  transform:translateX(-50%); }
.ap-medidor-pies { display:flex; justify-content:space-between; font-size:.8rem;
  color:var(--ap-gris-2); }

/* ==============================================================  evidencias === */

.ap-subida { border:2px dashed var(--ap-borde); border-radius:14px; padding:22px;
  text-align:center; background:var(--ap-fondo); margin:18px 0; }
.ap-subida.encima { border-color:var(--ap-fuego); background:var(--ap-nube); }
.ap-subida p { margin:0 0 12px; color:var(--ap-gris); font-size:.94rem; }
.ap-archivos { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; }
.ap-archivos li { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:12px;
  align-items:center; padding:11px 14px; border:1px solid var(--ap-borde);
  border-radius:11px; background:var(--ap-papel); }
.ap-archivo-ico { width:34px; height:34px; border-radius:8px; background:var(--ap-nube);
  color:var(--ap-fuego-osc); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; text-transform:uppercase; }
.ap-archivo-n { min-width:0; }
.ap-archivo-n a { color:var(--ap-tinta); font-weight:600; text-decoration:none;
  overflow-wrap:anywhere; display:block; font-size:.95rem; }
.ap-archivo-n a:hover { color:var(--ap-fuego-osc); text-decoration:underline; }
.ap-archivo-n small { color:var(--ap-gris-2); font-size:.82rem; }
.ap-quitar { background:none; border:none; cursor:pointer; color:var(--ap-gris-2);
  font-size:20px; line-height:1; padding:6px 8px; border-radius:8px; }
.ap-quitar:hover { background:var(--ap-mal-nube); color:var(--ap-mal); }

/* ==============================================================  tablas y fin === */

.ap-tabla-envoltura { overflow-x:auto; margin:22px 0; }
.ap-tabla { width:100%; border-collapse:collapse; font-size:.94rem; min-width:520px; }
.ap-tabla th, .ap-tabla td { border:1px solid var(--ap-borde); padding:10px 13px;
  text-align:left; vertical-align:top; line-height:1.6; }
.ap-tabla th { background:var(--ap-fondo); font-weight:700; font-size:.88rem; }
.ap-tabla tr:nth-child(even) td { background:#FCFBFA; }

.ap-dos { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px; margin:22px 0; }
.ap-dos > * { min-width:0; margin:0; }

/* El número va posicionado, NO como celda de un grid: con `display:grid` en el
   <li>, cada hijo —y cada trozo de texto suelto entre etiquetas— se convierte en
   un elemento de rejilla propio, y un párrafo con <strong> y <em> se parte en
   columnas. Con posición absoluta el contenido fluye como texto normal. */
.ap-pasos { list-style:none; counter-reset:ap 0; margin:22px 0; padding:0; }
.ap-pasos li { counter-increment:ap; position:relative; padding-left:46px;
  margin-bottom:14px; line-height:1.7; }
.ap-pasos li::before { content:counter(ap); position:absolute; left:0; top:1px;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--ap-fuego); color:#fff; font-weight:700; font-size:14px; }

@media (max-width:620px) {
  .ap-pieza, .ap-detector, .ap-sim-cuerpo { padding-left:15px; padding-right:15px; }
  .ap-bt { width:100%; justify-content:center; }
  .ap-sim-turno { margin-left:0; width:100%; }
  .ap-archivos li { grid-template-columns:34px minmax(0,1fr); }
  .ap-quitar { grid-column:2; justify-self:start; }
}

/* Lo que se dejó sin marcar y de verdad no tenía problema: ni premio ni castigo,
   pero tiene que verse que ya pasó por revisión y no que quedó pendiente. */
.ap-hallazgo.sano { opacity:1; background:#fff; border-style:dashed; }
.ap-hallazgo.sano .ap-caja-chk { border-color:#DED8D3; color:#C4BCB6; }
.ap-hallazgo.sano .ap-caja-chk { font-size:0; }
.ap-hallazgo.sano .ap-caja-chk::after { content:'–'; font-size:16px; color:#C4BCB6; }