/* ═══════════════════════════════════════════════════════════
   CDSS · Estilos propios de este material
   Se carga DESPUÉS de /aprende/motor/motor.css

   Aquí viven únicamente los estilos de las piezas interactivas
   de este material. Todo lo demás (barra, índice, escenario,
   ficha del glosario, autor, navegación) lo pone el motor.

   Los nombres de color antiguos de este material se traducen
   abajo a los tokens del motor, para no tener que reescribir
   cada regla.
   ═══════════════════════════════════════════════════════════ */

:root{
  --tinta: var(--ink);
  --marron: var(--accent);
  --neutro: var(--neutral);
  --crema: var(--surface);
  --profundo: var(--surface-deep);
  --cuerpo: var(--body);
  --esc: 1;
}
body.tam-s{--esc:.88}
body.tam-l{--esc:1.14}
body.tam-xl{--esc:1.3}


/* ══ base de las piezas ══
   La cabecera, el lienzo y el pie de cada pieza los pone el motor,
   para que todas las piezas de todos los materiales se vean iguales.
   Aquí solo va lo que es propio de las piezas de ESTE material. */

/* ---------- pieza 06 · prevalencia ---------- */
.pv-fila-slider{display:flex;align-items:center;gap:18px;margin-bottom:20px}
#pv-prev{flex:1;accent-color:var(--marron);height:5px}
.pv-valor{
  font-family:var(--display);font-weight:700;font-size:calc(28px*var(--esc));
  color:var(--marron);min-width:105px;text-align:right;
}
.pv-rejilla{
  display:grid;grid-template-columns:repeat(20,1fr);gap:6px;margin:0 0 22px;max-width:520px;
}
.pv-punto{
  aspect-ratio:1;border-radius:50%;border:1.5px solid var(--tinta);
  background:transparent;transition:background .12s;
}
.pv-punto.lleno{background:var(--marron);border-color:var(--marron)}
.pv-metricas{display:flex;gap:28px;flex-wrap:wrap}
.pv-m{display:flex;flex-direction:column;gap:2px;max-width:190px}
.pv-m-num{font-family:var(--display);font-weight:700;font-size:calc(38px*var(--esc));line-height:1}
.pv-m-alt{color:var(--neutro)}
.pv-m-lab{font-size:13px;line-height:1.35;opacity:.78}

/* ---------- pieza 02 · escalera ---------- */
.es-escalera{display:flex;flex-direction:column;gap:10px}
.es-fila{
  display:flex;align-items:center;gap:16px;width:100%;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:10px;
  padding:10px 12px;font-family:inherit;color:inherit;text-align:left;
}
.es-fila:hover{background:rgba(188,177,158,.2)}
.es-fila.activa{border-color:var(--marron);background:rgba(139,69,20,.08)}
.es-n{
  font-family:var(--display);font-weight:700;font-size:calc(22px*var(--esc));
  min-width:44px;color:var(--marron);
}
.es-barra{flex:1;height:22px;background:rgba(188,177,158,.3);border-radius:5px;overflow:hidden}
.es-relleno{display:block;height:100%;background:var(--tinta)}
.es-fila.activa .es-relleno{background:var(--marron)}
.es-e{
  font-family:var(--mono);font-size:calc(14px*var(--esc));
  min-width:66px;text-align:right;
}

/* ---------- actividad ---------- */
.actividad{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:26px 0 0;padding:14px 18px;
  border-left:4px solid var(--marron);background:rgba(139,69,20,.07);border-radius:0 10px 10px 0;
}
.actividad-rot{
  font-family:var(--mono);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--marron);
}
.actividad-txt{font-family:var(--display);font-weight:700;font-size:calc(21px*var(--esc));line-height:1.3}

/* ---------- QR ---------- */
.qr{
  position:absolute;top:8px;right:0;z-index:5;
  width:86px;height:86px;padding:7px;
  background:var(--crema);border:1px solid var(--neutro);border-radius:10px;
}
.qr-svg{width:100%;height:100%;display:block}
.proyeccion .escena,.lectura .escena{position:relative}
.lectura .qr{position:static;margin:26px 0 0}
.lectura .titulo,.lectura .etiqueta{padding-right:0}

/* ---------- contacto del cierre ---------- */
.contacto{
  display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 0;padding-top:20px;
  border-top:1px solid var(--neutro);
}
.contacto a{
  font-family:var(--mono);font-size:13px;letter-spacing:1px;text-decoration:none;
  color:var(--marron);border:1px solid var(--marron);border-radius:8px;padding:8px 16px;
}
.contacto a:hover{background:var(--marron);color:var(--crema)}

/* ---------- pieza 01 · apuesta ---------- */
.ap-pregunta{font-size:calc(18px*var(--esc));line-height:1.55;margin:0 0 18px;max-width:60ch}
.ap-ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.ap-op{
  font-family:var(--display);font-weight:700;font-size:calc(17px*var(--esc));
  padding:16px 14px;border:2px solid var(--tinta);border-radius:12px;
  background:var(--crema);color:var(--tinta);cursor:pointer;transition:.14s;
}
.ap-op:hover:not(:disabled){border-color:var(--marron);color:var(--marron)}
.ap-op.apagada{opacity:.35;cursor:default}
.ap-op.elegida{background:var(--marron);border-color:var(--marron);color:var(--crema);opacity:1}

/* ---------- pieza 03 · interruptor ---------- */
.in-botones{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.in-btn{
  font-family:var(--display);font-weight:700;font-size:calc(16px*var(--esc));
  padding:11px 20px;border:2px solid var(--neutro);border-radius:999px;
  background:none;color:var(--tinta);cursor:pointer;
}
.in-btn.activa{border-color:var(--marron);background:var(--marron);color:var(--crema)}
.in-frase{
  font-family:var(--display);font-weight:700;font-size:calc(22px*var(--esc));
  line-height:1.35;margin:0 0 18px;max-width:54ch;
}
.in-tabla{display:grid;gap:1px;background:var(--neutro);border:1px solid var(--neutro);border-radius:10px;overflow:hidden;margin-bottom:18px}
.in-fila{display:flex;gap:16px;background:var(--crema);padding:10px 16px}
.in-lab{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--neutro);min-width:120px}
.in-val{font-size:calc(16px*var(--esc))}
.in-veredicto{font-family:var(--display);font-weight:700;font-size:calc(24px*var(--esc));margin:0}
.in-veredicto.mal{color:var(--neutro)}
.in-veredicto.bien{color:var(--marron)}

/* ---------- pieza 04 · línea de tiempo ---------- */
#lt-rango{width:100%;accent-color:var(--marron);height:5px;margin-bottom:6px}
.lt-marcas{display:flex;justify-content:space-between;margin-bottom:22px;gap:4px}
.lt-marca{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:none;border:0;cursor:pointer;padding:4px 2px;flex:1;
}
.lt-punto{width:12px;height:12px;border-radius:50%;border:2px solid var(--tinta);background:var(--crema)}
.lt-marca.fallo .lt-punto{border-color:var(--marron)}
.lt-marca.activa .lt-punto{background:var(--tinta);transform:scale(1.35)}
.lt-marca.fallo.activa .lt-punto{background:var(--marron)}
.lt-anio{font-family:var(--mono);font-size:12px;color:var(--neutro)}
.lt-marca.activa .lt-anio{color:var(--tinta)}
.lt-marca.fallo.activa .lt-anio{color:var(--marron)}
.lt-detalle{border-left:3px solid var(--marron);padding-left:16px;min-height:110px}
.lt-detalle h4{font-family:var(--display);font-size:calc(21px*var(--esc));margin:0 0 8px}
.lt-detalle p{font-size:calc(16px*var(--esc));line-height:1.55;margin:0;max-width:62ch}

/* ---------- pieza 07 · EMRAM ---------- */
.em-escalera{display:flex;flex-direction:column;gap:5px}
.em-fila{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:none;border:1px solid transparent;border-radius:9px;padding:9px 12px;
  cursor:pointer;font-family:inherit;color:inherit;
}
.em-fila:hover{background:rgba(188,177,158,.2)}
.em-fila.activa{border-color:var(--marron);background:rgba(139,69,20,.08)}
.em-n{
  font-family:var(--display);font-weight:700;font-size:calc(20px*var(--esc));
  min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--tinta);border-radius:8px;
}
.em-fila.gobernanza .em-n{border-color:var(--marron);color:var(--marron)}
.em-t{flex:1;font-size:calc(15px*var(--esc));line-height:1.4}
.em-tipo{
  font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--neutro);white-space:nowrap;
}
.em-fila.gobernanza .em-tipo{color:var(--marron)}


/* ══ ajustes de pieza en pantalla pequeña ══ */
/* ---------- responsive ---------- */
@media (max-width:1180px){
  .qr{width:74px;height:74px}
}
@media (max-width:900px){
  /* el relleno de la escena lo gobierna el motor: aquí solo el QR */
  .qr{width:62px;height:62px;padding:5px}
}
@media (max-width:820px){
  .actividad{flex-direction:column;gap:6px}
  .pv-rejilla{grid-template-columns:repeat(10,1fr);max-width:280px}
  .pv-metricas{gap:18px}
  .pv-m{max-width:none;flex:1 1 120px}
  .ap-ops{grid-template-columns:1fr}
  .in-fila{flex-direction:column;gap:2px}
  .in-lab{min-width:0}
  .lt-anio{font-size:10px}
  .em-tipo{display:none}
  .es-e{min-width:52px;font-size:12px}
  .contacto a{font-size:12px;padding:7px 12px}
}
@media (max-width:560px){
  .lt-marcas{gap:0}
  .lt-anio{font-size:9px}
  .em-t{font-size:13px}
  .pv-cabecera{flex-direction:column;gap:4px}
  .pv-valor{min-width:0}
}