/* =============================================================================
   widgets.css — actividades interactivas
   Hereda tokens de styles.css. Todo se adapta al tramo oscuro por variables.
   ========================================================================== */

/* ── Contenedor común ──────────────────────────────────────────────────── */
.widget {
  margin: 2.5rem 0;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  background: var(--papel-3);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  box-shadow: var(--sombra-2);
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.6;
}
.tramo--oscuro .widget { background: var(--papel-2); }

.widget__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--linea);
}

.widget__rotulo {
  margin: 0;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
}

.widget__paso {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

.widget__pregunta {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.012em;
  margin: 0 0 1.1rem;
  color: var(--tinta);
}

.widget__intro { margin: 0 0 1.2rem; color: var(--tinta-2); }

.widget__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
}

.widget__nota { margin: 0; font-size: .8125rem; color: var(--tinta-3); flex: 1 1 12rem; }

.widget__atras {
  appearance: none; border: 0; background: none; padding: .5rem 0 0;
  font: inherit; font-size: .8125rem; color: var(--tinta-3); cursor: pointer;
}
.widget__atras:hover { color: var(--acento); }

.widget__error { margin: 0; color: var(--alerta); font-size: .875rem; }

/* ── Indicador de pasos ────────────────────────────────────────────────── */
.pasos { display: flex; gap: .3rem; margin-bottom: 1.4rem; }
.pasos__punto {
  height: 3px; flex: 1;
  background: var(--linea);
  border-radius: 99px;
  transition: background var(--transicion);
}
.pasos__punto--hecho { background: var(--ok); }
.pasos__punto--activo { background: var(--acento-vivo); }
.pasos__punto--fallo { background: var(--alerta); }
.pasos--test { gap: .2rem; }

/* ── Opciones ──────────────────────────────────────────────────────────── */
.opciones { display: grid; gap: .55rem; }

.opcion {
  appearance: none;
  text-align: left;
  font: inherit;
  font-size: .9375rem;
  line-height: 1.5;
  padding: .85rem 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--papel);
  color: var(--tinta);
  cursor: pointer;
  position: relative;
  padding-left: 2.6rem;
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
}
.opcion::before {
  content: "";
  position: absolute;
  left: .95rem; top: 50%;
  width: 1.05rem; height: 1.05rem;
  margin-top: -.52rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 50%;
  transition: all var(--transicion);
}
.opcion:hover:not(:disabled) { border-color: var(--acento); background: var(--acento-tenue); }
.opcion:disabled { cursor: default; }

.opcion--elegida { border-color: var(--udla-azul); background: var(--azul-tenue); }
.opcion--elegida::before { border-color: var(--udla-azul); background: var(--udla-azul); box-shadow: inset 0 0 0 3px var(--papel); }

.opcion--correcta {
  border-color: var(--ok);
  background: var(--ok-tenue);
}
.opcion--correcta::before { border-color: var(--ok); background: var(--ok); box-shadow: inset 0 0 0 3px var(--papel); }

.opcion--fallada { border-color: var(--alerta); background: var(--alerta-tenue); }
.opcion--fallada::before { border-color: var(--alerta); background: var(--alerta); box-shadow: inset 0 0 0 3px var(--papel); }

.opciones--chicas .opcion { font-size: .875rem; padding: .7rem .9rem .7rem 2.4rem; }

/* ── Perfil del diagnóstico ────────────────────────────────────────────── */
.perfil { display: grid; gap: 1.5rem; }

.perfil__ejes { display: grid; gap: 1rem; }
.eje__nombre { margin: 0 0 .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--tinta-2); }
.eje__pista { height: .55rem; background: var(--linea); border-radius: 99px; overflow: hidden; }
.eje__fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--udla-azul), var(--acento-vivo));
  border-radius: 99px;
  transition: width 900ms cubic-bezier(.22, 1, .36, 1);
}

.perfil__ficha {
  padding: 1.35rem;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento-vivo);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--papel);
}
.perfil__rotulo { margin: 0 0 .3rem; font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-3); }
.perfil__nombre { margin: 0 0 .5rem; font-size: 1.6rem; letter-spacing: -.025em; }
.perfil__resumen { margin: 0 0 .9rem; font-size: 1.0625rem; font-weight: 600; color: var(--acento); }
.perfil__cuerpo { margin: 0 0 1rem; color: var(--tinta-2); }
.perfil__foco { margin: 0; padding-top: .9rem; border-top: 1px solid var(--linea); font-size: .875rem; }

/* ── Predicción y gráfico ──────────────────────────────────────────────── */
.prediccion__valor {
  display: block;
  text-align: center;
  font-size: clamp(2.5rem, 8vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -.045em;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  transition: color var(--transicion);
}
.prediccion__valor--neg { color: var(--alerta); }

.prediccion__rango {
  appearance: none;
  width: 100%;
  height: 2.25rem;
  background: transparent;
  cursor: grab;
  margin: .35rem 0 0;
}
.prediccion__rango:active { cursor: grabbing; }
.prediccion__rango::-webkit-slider-runnable-track {
  height: .4rem; border-radius: 99px;
  background: linear-gradient(90deg, var(--alerta) 0%, var(--linea-fuerte) 40%, var(--ok) 100%);
}
.prediccion__rango::-moz-range-track {
  height: .4rem; border-radius: 99px;
  background: linear-gradient(90deg, var(--alerta) 0%, var(--linea-fuerte) 40%, var(--ok) 100%);
}
.prediccion__rango::-webkit-slider-thumb {
  appearance: none;
  width: 1.7rem; height: 1.7rem; margin-top: -.65rem;
  border-radius: 50%;
  background: var(--papel);
  border: 3px solid var(--udla-azul);
  box-shadow: var(--sombra-2);
}
.prediccion__rango::-moz-range-thumb {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--papel);
  border: 3px solid var(--udla-azul);
  box-shadow: var(--sombra-2);
}
.prediccion__rango:disabled { opacity: .55; cursor: default; }

.prediccion__escala {
  display: flex; justify-content: space-between;
  font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3);
}

.grafico { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.grafico__titulo { margin: 0 0 1.2rem; font-size: .75rem; font-weight: 600; letter-spacing: .05em; color: var(--tinta-3); text-transform: uppercase; }
.grafico__cuerpo { display: grid; gap: .85rem; }
.grafico__fila { display: grid; grid-template-columns: minmax(0, 9.5rem) 1fr auto; gap: .8rem; align-items: center; }
.grafico__nombre { margin: 0; font-size: .8125rem; line-height: 1.35; color: var(--tinta-2); }
.grafico__pista { position: relative; height: 1.5rem; background: var(--papel-2); border-radius: var(--r-chico); overflow: hidden; }
.grafico__cero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--linea-fuerte); z-index: 2; }
.grafico__barra {
  position: absolute; top: .3rem; bottom: .3rem;
  width: 0; border-radius: 3px;
  transition: width 700ms cubic-bezier(.22, 1, .36, 1);
}
.grafico__barra--tuya { background: var(--udla-azul); opacity: .55; }
.grafico__barra--base { background: var(--linea-fuerte); }
.grafico__barra--mal { background: var(--alerta); }
.grafico__barra--bien { background: var(--ok); }
.grafico__cifra { margin: 0; font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta-2); white-space: nowrap; }
.grafico__lectura {
  margin: 1.35rem 0 0; padding: 1rem 1.15rem;
  background: var(--alerta-tenue); border-radius: var(--r);
  font-size: .9375rem; line-height: 1.6;
}

@media (max-width: 34rem) {
  .grafico__fila { grid-template-columns: 1fr auto; grid-template-areas: "nombre cifra" "pista pista"; }
  .grafico__nombre { grid-area: nombre; }
  .grafico__cifra { grid-area: cifra; }
  .grafico__pista { grid-area: pista; }
}

/* ── Constructor de piezas ─────────────────────────────────────────────── */
.piezas { display: grid; gap: .5rem; }

.pieza { border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; background: var(--papel); }
.pieza--lista { border-color: color-mix(in srgb, var(--ok) 50%, var(--linea)); }

.pieza__cab {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--tinta);
  cursor: pointer;
}
.pieza__cab:hover { background: var(--papel-2); }

.pieza__letra {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--azul-tenue);
  color: var(--udla-azul);
  font-weight: 700; font-size: .9375rem;
  transition: all var(--transicion);
}
.tramo--oscuro .pieza__letra { color: #9BC8E8; }
.pieza--lista .pieza__letra { background: var(--ok); color: var(--papel); }

.pieza__texto { min-width: 0; }
.pieza__texto strong { display: block; font-size: .9375rem; font-weight: 650; }
.pieza__pregunta { display: block; font-size: .8125rem; color: var(--tinta-3); line-height: 1.4; }

.pieza__estado {
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  border: 1.5px dashed var(--linea-fuerte);
  position: relative;
  flex: none;
  opacity: .55;
  transition: all var(--transicion);
}
.pieza--lista .pieza__estado { opacity: 1; border-style: solid; }
.pieza--lista .pieza__estado { border-color: var(--ok); background: var(--ok); }
.pieza--lista .pieza__estado::after {
  content: "";
  position: absolute; left: .42rem; top: .2rem;
  width: .3rem; height: .6rem;
  border: solid var(--papel);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}


.pieza__panel { padding: 0 1rem 1.1rem; border-top: 1px solid var(--linea); }
.pieza__ayuda { margin: .9rem 0 .8rem; font-size: .8125rem; font-style: italic; color: var(--tinta-2); }
.pieza__etiqueta { display: block; margin: 1rem 0 .4rem; font-size: .75rem; font-weight: 600; color: var(--tinta-3); }
.pieza__campo {
  width: 100%;
  font: inherit; font-size: .875rem;
  padding: .65rem .8rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  background: var(--papel-3);
  color: var(--tinta);
  resize: vertical;
}
.pieza__campo:focus { border-color: var(--acento-vivo); outline: none; box-shadow: 0 0 0 3px var(--acento-tenue); }

/* ── Salida generada ───────────────────────────────────────────────────── */
.salida {
  margin-top: 1.25rem;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--papel);
  overflow: hidden;
}
.salida__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem;
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
}
.salida__rotulo { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-3); }
.salida__contador { margin: 0; font-size: .6875rem; font-weight: 600; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.salida__contador--completo { color: var(--ok); }

.salida__texto {
  margin: 0;
  padding: 1.1rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--tinta);
  min-height: 4.5rem;
}
.salida__texto--vacio { color: var(--tinta-3); font-style: italic; font-family: var(--sans); font-size: .875rem; }

.salida__acciones { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem 1rem; }
.salida__acciones:empty { display: none; }

.kit-guardar--dentro { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }

/* ── Caja de prompt ────────────────────────────────────────────────────── */
.prompt-caja {
  margin: 1.1rem 0;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--udla-azul);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--papel);
  padding: 1rem 1.1rem;
}
.tramo--oscuro .prompt-caja { border-left-color: var(--acento-vivo); }
.prompt-caja__rotulo { margin: 0 0 .6rem; font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-3); }
.prompt-caja__texto {
  margin: 0 0 .9rem;
  white-space: pre-wrap; word-wrap: break-word;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .8125rem; line-height: 1.7; color: var(--tinta);
}
.prompt-caja__acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── Roles ─────────────────────────────────────────────────────────────── */
.roles__fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
  gap: .5rem;
  margin-bottom: 1.35rem;
}

.rol {
  appearance: none;
  display: grid; place-items: center; gap: .4rem;
  padding: .9rem .5rem;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--papel);
  color: var(--tinta-2);
  font: inherit; font-size: .8125rem; font-weight: 600;
  cursor: pointer; text-align: center; line-height: 1.25;
  transition: all var(--transicion);
}
.rol:hover { border-color: var(--acento); color: var(--tinta); transform: translateY(-1px); }
.rol__icono { font-size: 1.25rem; color: var(--tinta-3); transition: color var(--transicion); }
.rol--activo {
  border-color: var(--udla-azul);
  background: var(--azul-tenue);
  color: var(--tinta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--udla-azul) 12%, transparent);
}
.rol--activo .rol__icono { color: var(--acento); }

.roles__grid { display: grid; gap: 1rem; margin-bottom: .5rem; }
@media (min-width: 34rem) { .roles__grid { grid-template-columns: 1fr 1fr; } }
.roles__dato-rotulo { margin: 0 0 .25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.roles__dato-texto { margin: 0; font-size: .9375rem; }
.roles__cuidado {
  margin: 0; padding: .85rem 1rem;
  background: var(--ambar-tenue); border-radius: var(--r);
  font-size: .875rem; line-height: 1.55;
}

/* ── Clasificador de loops ─────────────────────────────────────────────── */
.loop-item {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linea);
}
.loop-item:last-of-type { border-bottom: 0; }
.loop-item__texto { margin: 0 0 .9rem; font-size: 1rem; font-style: italic; line-height: 1.55; color: var(--tinta); }

.loop-item__botones { display: flex; flex-wrap: wrap; gap: .5rem; }

.loop-btn {
  appearance: none;
  font: inherit; font-size: .8125rem; font-weight: 600;
  padding: .55rem 1rem;
  border-radius: 99px;
  border: 1px solid var(--linea-fuerte);
  background: var(--papel);
  color: var(--tinta-2);
  cursor: pointer;
  transition: all var(--transicion);
}
.loop-btn:hover:not(:disabled) { border-color: var(--acento); color: var(--tinta); }
.loop-btn:disabled { cursor: default; opacity: .65; }
.loop-btn--correcta { border-color: var(--ok); background: var(--ok-tenue); color: var(--ok); opacity: 1; }
.loop-btn--fallada { border-color: var(--alerta); background: var(--alerta-tenue); color: var(--alerta); opacity: 1; }

.loop-item__respuesta { margin-top: .9rem; padding: 1rem 1.1rem; border-radius: var(--r); font-size: .875rem; }
.loop-item__respuesta--ok { background: var(--ok-tenue); }
.loop-item__respuesta--no { background: var(--ambar-tenue); }
.loop-item__veredicto { margin: 0 0 .4rem; font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.loop-item__respuesta--ok .loop-item__veredicto { color: var(--ok); }
.loop-item__respuesta--no .loop-item__veredicto { color: var(--ambar); }
.loop-item__porque { margin: 0; line-height: 1.6; }
.loop-item__nota { margin: .7rem 0 0; font-style: italic; color: var(--tinta-2); }

.conversion { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.conversion__rotulo { margin: 0 0 .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
.conversion__texto {
  margin: 0 0 .8rem; padding: .85rem 1rem;
  background: var(--papel); border-radius: var(--r-chico);
  white-space: pre-wrap; word-wrap: break-word;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .8125rem; line-height: 1.65;
}
.conversion__acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

.cierre-widget {
  margin-top: 1.35rem; padding: 1.15rem 1.25rem;
  background: var(--azul-tenue); border-radius: var(--r);
}
.cierre-widget__rotulo { margin: 0 0 .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
.cierre-widget p:last-child { margin: 0; }

/* ── Selector por situación ────────────────────────────────────────────── */
.situaciones__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem;
}

.situacion {
  appearance: none;
  display: grid; gap: .3rem;
  padding: 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--papel);
  color: var(--tinta);
  font: inherit; text-align: left; cursor: pointer;
  transition: all var(--transicion);
}
.situacion:hover { border-color: var(--acento); transform: translateY(-2px); box-shadow: var(--sombra-1); }
.situacion__icono { font-size: 1.15rem; color: var(--acento); margin-bottom: .15rem; }
.situacion__titulo { font-size: .9375rem; font-weight: 650; line-height: 1.3; }
.situacion__detalle { font-size: .8125rem; color: var(--tinta-3); line-height: 1.4; }
.situacion--activa {
  border-color: var(--udla-azul);
  background: var(--azul-tenue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--udla-azul) 12%, transparent);
}

.situaciones__panel { margin-top: 1.25rem; }
.situaciones__vacio {
  margin: 0; padding: 1.5rem;
  border: 1px dashed var(--linea-fuerte); border-radius: var(--r);
  text-align: center; color: var(--tinta-3); font-size: .875rem;
}
.situaciones__panel--lleno { padding: 1.25rem; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); }
.situaciones__rotulo { margin: 0 0 .3rem; font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-3); }
.situaciones__recurso { margin: 0 0 .25rem; font-size: 1.2rem; letter-spacing: -.02em; }
.situaciones__donde { margin: 0 0 .5rem; font-size: .8125rem; color: var(--acento); font-weight: 600; }
.situaciones__criterio { margin: 0; padding: .9rem 1rem; background: var(--papel-2); border-radius: var(--r); font-size: .875rem; line-height: 1.6; }

/* ── Mapa conceptual ───────────────────────────────────────────────────── */
.mapa__relaciones { display: grid; gap: .45rem; }

.relacion {
  appearance: none;
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  padding: .75rem .9rem;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--papel);
  color: var(--tinta);
  font: inherit; font-size: .875rem; line-height: 1.5;
  text-align: left; cursor: pointer;
  transition: all var(--transicion);
}
.relacion:hover:not(:disabled) { border-color: var(--acento); background: var(--acento-tenue); }
.relacion:disabled { cursor: default; }

.relacion__marca {
  width: 1.1rem; height: 1.1rem; margin-top: .15rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 4px;
  position: relative; flex: none;
  transition: all var(--transicion);
}
.relacion--elegida { border-color: var(--udla-azul); background: var(--azul-tenue); }
.relacion--elegida .relacion__marca { border-color: var(--udla-azul); background: var(--udla-azul); }
.relacion--elegida .relacion__marca::after {
  content: ""; position: absolute; left: .33rem; top: .1rem;
  width: .27rem; height: .55rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}

.relacion--ambos { border-color: var(--ok); background: var(--ok-tenue); }
.relacion--ambos .relacion__marca { border-color: var(--ok); background: var(--ok); }
.relacion--solo-ia { border-color: var(--acento-vivo); background: var(--acento-tenue); border-style: dashed; }
.relacion--solo-yo { border-color: var(--ambar); background: var(--ambar-tenue); }
.relacion--ninguno { opacity: .45; }

.comparacion { margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid var(--linea); }
.comparacion__cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.35rem; }
.comparacion__cifra {
  display: grid; gap: .1rem; place-items: center;
  padding: .9rem .5rem; background: var(--papel-2); border-radius: var(--r); text-align: center;
}
.comparacion__cifra strong { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.comparacion__cifra span { font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); }

.comparacion__bloque { margin-bottom: 1.35rem; padding: 1.1rem 1.2rem; border-radius: var(--r); }
.comparacion__bloque--falta { background: var(--acento-tenue); }
.comparacion__bloque--extra { background: var(--ambar-tenue); }
.comparacion__bloque h4 { margin: 0 0 .4rem; font-size: 1rem; }
.comparacion__lectura { margin: 0 0 .85rem; font-size: .875rem; color: var(--tinta-2); }
.comparacion__bloque ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.comparacion__bloque li { font-size: .875rem; line-height: 1.5; padding-left: 1rem; border-left: 2px solid color-mix(in srgb, var(--tinta) 18%, transparent); }
.comparacion__clave { margin: .35rem 0 0; font-size: .8125rem; font-style: italic; color: var(--tinta-2); }
.etiqueta-puente {
  display: inline-block; margin-left: .4rem;
  padding: .05rem .45rem; border-radius: 99px;
  background: var(--udla-azul); color: #fff;
  font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: .1em;
}
.comparacion__cierre { margin: 0; padding: 1rem 1.15rem; background: var(--azul-tenue); border-radius: var(--r); font-size: .875rem; line-height: 1.6; }

/* ── Cazador de alucinaciones ──────────────────────────────────────────── */
.cazador__texto {
  padding: 1.25rem;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--papel);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.9;
}

.fragmento {
  appearance: none;
  border: 0; padding: .1rem .15rem; margin: 0 .05rem;
  background: transparent;
  font: inherit; color: inherit;
  text-align: left; cursor: pointer;
  border-radius: 3px;
  border-bottom: 2px solid transparent;
  transition: all var(--transicion);
}
.fragmento:hover:not(:disabled) { background: var(--acento-tenue); border-bottom-color: var(--acento); }
.fragmento:disabled { cursor: default; }
.fragmento--marcado { background: var(--ambar-tenue); border-bottom-color: var(--ambar); }
.fragmento--acierto { background: var(--ok-tenue); border-bottom-color: var(--ok); }
.fragmento--perdido { background: var(--alerta-tenue); border-bottom-color: var(--alerta); border-bottom-style: dashed; }
.fragmento--falso { background: transparent; border-bottom-color: var(--linea-fuerte); opacity: .6; }

.cazador__resultado { margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid var(--linea); }
.cazador__marcador { margin: 0 0 .5rem; font-size: 1.35rem; font-weight: 650; letter-spacing: -.02em; }
.cazador__nota { margin: 0 0 1.1rem; font-size: .875rem; color: var(--tinta-2); }
.cazador__detalle { display: grid; gap: .8rem; margin-bottom: 1.25rem; }

.hallazgo { padding: 1rem 1.15rem; border-radius: var(--r); border-left: 3px solid; }
.hallazgo--ok { background: var(--ok-tenue); border-left-color: var(--ok); }
.hallazgo--perdido { background: var(--alerta-tenue); border-left-color: var(--alerta); }
.hallazgo__tipo {
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .5rem; font-size: .6875rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.hallazgo--ok .hallazgo__tipo { color: var(--ok); }
.hallazgo--perdido .hallazgo__tipo { color: var(--alerta); }
.hallazgo__tipo em { font-weight: 600; font-style: italic; text-transform: none; letter-spacing: 0; }
.hallazgo__frag { margin: 0 0 .5rem; font-family: var(--serif); font-style: italic; font-size: .9375rem; line-height: 1.5; }
.hallazgo__porque { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--tinta-2); }

.cazador__cierre { margin: 0 0 .5rem; padding: 1rem 1.15rem; background: var(--azul-tenue); border-radius: var(--r); font-size: .9375rem; line-height: 1.6; }

/* ── Escenarios de honestidad ──────────────────────────────────────────── */
.escenario { padding: 1.1rem 0; border-bottom: 1px solid var(--linea); }
.escenario:last-of-type { border-bottom: 0; }
.escenario__caso { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.5; }
.escenario__botones { display: flex; flex-wrap: wrap; gap: .45rem; }

.escenario-btn {
  appearance: none;
  font: inherit; font-size: .8125rem; font-weight: 600;
  padding: .5rem .95rem; border-radius: 99px;
  border: 1px solid var(--linea-fuerte);
  background: var(--papel); color: var(--tinta-2);
  cursor: pointer; transition: all var(--transicion);
}
.escenario-btn:hover:not(:disabled) { border-color: var(--acento); color: var(--tinta); }
.escenario-btn:disabled { cursor: default; opacity: .5; }
.escenario-btn--acierto, .escenario-btn--correcta { border-color: var(--ok); background: var(--ok-tenue); color: var(--ok); opacity: 1; }
.escenario-btn--fallo { border-color: var(--alerta); background: var(--alerta-tenue); color: var(--alerta); opacity: 1; }

.escenario__respuesta { margin-top: .85rem; padding: .95rem 1.1rem; background: var(--papel-2); border-radius: var(--r); }
.escenario__veredicto { margin: 0 0 .35rem; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--acento); }
.escenario__razon { margin: 0; font-size: .875rem; line-height: 1.6; }

/* ── Test: ordenar ─────────────────────────────────────────────────────── */
.ordenar { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: none; }
.ordenar--correcto { margin-top: .5rem; opacity: .9; }
.ordenar__rotulo { margin: 1.1rem 0 .3rem; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); }

.ordenar__item {
  display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center;
  padding: .7rem .85rem;
  border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--papel);
  font-size: .875rem; line-height: 1.45;
}
.ordenar__num {
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--papel-2); color: var(--tinta-2);
  font-weight: 700; font-size: .75rem; flex: none;
}
.ordenar__ctrl { display: grid; gap: .15rem; }
.ordenar__btn {
  appearance: none; width: 1.5rem; height: 1.1rem;
  border: 1px solid var(--linea); border-radius: 4px;
  background: var(--papel-2); color: var(--tinta-2);
  font-size: .55rem; line-height: 1; cursor: pointer;
  transition: all var(--transicion);
}
.ordenar__btn:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
.ordenar__btn:disabled { opacity: .3; cursor: default; }
.ordenar__item--ok { border-color: var(--ok); background: var(--ok-tenue); }
.ordenar__item--ok .ordenar__num { background: var(--ok); color: var(--papel); }
.ordenar__item--no { border-color: var(--alerta); background: var(--alerta-tenue); }

/* ── Test: retroalimentación ───────────────────────────────────────────── */
.feedback {
  margin-top: 1.1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r);
  border-left: 3px solid;
  animation: feedback-entra .3s ease;
}
@keyframes feedback-entra { from { opacity: 0; transform: translateY(-6px); } }
.feedback--ok { background: var(--ok-tenue); border-left-color: var(--ok); }
.feedback--no { background: var(--ambar-tenue); border-left-color: var(--ambar); }
.feedback__veredicto { margin: 0 0 .4rem; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.feedback--ok .feedback__veredicto { color: var(--ok); }
.feedback--no .feedback__veredicto { color: var(--ambar); }
.feedback__texto { margin: 0; font-size: .9375rem; line-height: 1.62; }

/* ── Test: resultado ───────────────────────────────────────────────────── */
.resultado { display: grid; gap: 1.5rem; align-items: center; margin-bottom: 1.5rem; }
@media (min-width: 34rem) { .resultado { grid-template-columns: auto 1fr; gap: 2rem; } }

.resultado__anillo {
  width: 8.5rem; height: 8.5rem;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-inline: auto;
  background:
    conic-gradient(var(--acento-vivo) calc(var(--pct) * 1%), var(--linea) 0);
  position: relative;
}
.resultado__anillo::before {
  content: ""; position: absolute; inset: .7rem;
  border-radius: 50%; background: var(--papel-3);
}
.tramo--oscuro .resultado__anillo::before { background: var(--papel-2); }
.resultado__cifra {
  position: relative;
  font-size: 2.35rem; font-weight: 700; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.resultado__cifra em { font-size: 1.1rem; font-style: normal; font-weight: 600; color: var(--tinta-3); }

.resultado__rotulo { margin: 0 0 .3rem; font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-3); }
.resultado__titulo { margin: 0 0 .7rem; font-size: 1.4rem; letter-spacing: -.025em; }
.resultado__texto { margin: 0; color: var(--tinta-2); line-height: 1.62; }

.contraste { margin: 1.5rem 0; padding: 1.25rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); }
.contraste__rotulo { margin: 0 0 1rem; font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--acento); }
.contraste__linea { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 36rem) { .contraste__linea { grid-template-columns: 1fr auto 1fr; } }
.contraste__hito { display: grid; gap: .2rem; }
.contraste__cuando { font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3); }
.contraste__hito strong { font-size: 1.05rem; letter-spacing: -.015em; }
.contraste__hito--fin strong { color: var(--acento); }
.contraste__detalle { font-size: .8125rem; color: var(--tinta-2); line-height: 1.45; }
.contraste__flecha { width: 100%; height: 1px; background: var(--linea-fuerte); position: relative; }
@media (min-width: 36rem) { .contraste__flecha { width: 3rem; } }
.contraste__flecha::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: .4rem; height: .4rem; margin-top: -.2rem;
  border-top: 1px solid var(--linea-fuerte); border-right: 1px solid var(--linea-fuerte);
  transform: rotate(45deg);
}

.repaso { margin: 1.35rem 0; padding: 1.1rem 1.25rem; background: var(--ambar-tenue); border-radius: var(--r); }
.repaso__rotulo { margin: 0 0 .6rem; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ambar); }
.repaso ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.repaso li { font-size: .875rem; line-height: 1.5; }

/* ── Kit ───────────────────────────────────────────────────────────────── */
.kit-vacio { padding: 1.5rem 0; }
.kit-vacio__titulo { font-family: var(--sans); font-weight: 650; font-size: 1.05rem; margin-bottom: .5rem; }

.kit-grupo { margin-bottom: 1.75rem; }
.kit-grupo__titulo {
  margin: 0 0 .85rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--linea);
  font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--acento);
}

.kit-ficha { margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel-2); }
.kit-ficha__cab { display: flex; align-items: start; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.kit-ficha__titulo { margin: 0; font-family: var(--sans); font-size: .9375rem; font-weight: 650; line-height: 1.35; }
.kit-ficha__quitar {
  appearance: none; width: 1.7rem; height: 1.7rem; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--tinta-3);
  display: grid; place-items: center; font-size: .7rem; cursor: pointer;
  transition: all var(--transicion);
}
.kit-ficha__quitar:hover { background: var(--alerta-tenue); color: var(--alerta); }
.kit-ficha__texto {
  margin: 0 0 .7rem; padding: .8rem .9rem;
  background: var(--papel); border-radius: var(--r-chico);
  white-space: pre-wrap; word-wrap: break-word;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .8125rem; line-height: 1.65;
}
.kit-ficha__nota { margin: 0 0 .7rem; font-family: var(--sans); font-size: .8125rem; font-style: italic; color: var(--tinta-2); }
.kit-ficha__acciones { display: flex; gap: .5rem; }

.kit-resumen { display: grid; gap: 1.1rem; }
.kit-resumen__vacio { margin: 0; color: var(--tinta-2); }
.kit-resumen__cifra { display: flex; align-items: baseline; gap: .6rem; }
.kit-resumen__cifra strong { font-size: 3rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--acento); }
.kit-resumen__cifra span { font-size: .9375rem; color: var(--tinta-2); }
.kit-resumen__tipos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.kit-resumen__tipos li {
  padding: .3rem .75rem; border-radius: 99px;
  background: var(--papel-2); border: 1px solid var(--linea);
  font-size: .75rem; font-weight: 600; color: var(--tinta-2);
}
.kit-resumen__acciones { display: flex; flex-wrap: wrap; gap: .55rem; }

/* ── Impresión ─────────────────────────────────────────────────────────── */
@media print {
  .widget { box-shadow: none; page-break-inside: avoid; }
  .opcion, .loop-btn, .escenario-btn, .rol, .situacion, .relacion, .fragmento, .ordenar__btn { display: none !important; }
}

/* =============================================================================
   Narración
   ========================================================================== */
.escuchar {
  appearance: none;
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 1.1rem;
  padding: .55rem 1.1rem .55rem .85rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 99px;
  background: var(--papel);
  color: var(--tinta-2);
  font-family: var(--sans); font-size: .8125rem; font-weight: 600;
  cursor: pointer;
  transition: all var(--transicion);
}
.escuchar:hover { border-color: var(--acento); color: var(--tinta); }
.escuchar__icono { font-size: .95rem; color: var(--acento); }
.escuchar__dur { font-variant-numeric: tabular-nums; color: var(--tinta-3); font-weight: 500; }
.escuchar__dur:empty { display: none; }
.escuchar--sonando {
  border-color: var(--acento-vivo);
  background: var(--acento-tenue);
  color: var(--tinta);
}
.escuchar--sonando .escuchar__icono { animation: onda 1.4s ease-in-out infinite; }
@keyframes onda { 50% { transform: scale(1.18); opacity: .65; } }

/* ── Reproductor flotante ──────────────────────────────────────────────── */
.reproductor {
  position: fixed;
  left: 50%; bottom: 1.15rem;
  transform: translate(-50%, calc(100% + 2.5rem));
  z-index: 110;
  width: min(38rem, calc(100vw - 1.5rem));
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center;
  gap: .7rem;
  padding: .65rem .75rem;
  background: var(--udla-azul-hondo);
  color: #F2EEE7;
  border-radius: 99px;
  box-shadow: var(--sombra-3);
  font-family: var(--sans);
  transition: transform 340ms cubic-bezier(.22, 1, .36, 1);
}
.reproductor--visible { transform: translate(-50%, 0); }

.reproductor__play {
  appearance: none;
  width: 2.4rem; height: 2.4rem; flex: none;
  border: 0; border-radius: 50%;
  background: var(--acento-vivo); color: #1A1004;
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--transicion);
}
.reproductor__play:hover { background: #FF9438; }
.reproductor__glifo {
  width: 0; height: 0;
  border-style: solid;
  border-width: .42rem 0 .42rem .68rem;
  border-color: transparent transparent transparent currentColor;
  margin-left: .12rem;
}
.reproductor--sonando .reproductor__glifo {
  width: .62rem; height: .72rem;
  border: 0; margin-left: 0;
  background: currentColor;
  clip-path: polygon(0 0, 34% 0, 34% 100%, 0 100%, 0 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 0);
}

.reproductor__centro { min-width: 0; display: grid; gap: .3rem; }
.reproductor__titulo {
  margin: 0; font-size: .75rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #DCE6EE;
}
.reproductor__pista {
  height: 4px; border-radius: 99px;
  background: rgba(255, 255, 255, .22);
  cursor: pointer; position: relative;
}
.reproductor__pista:focus-visible { outline-offset: 5px; }
.reproductor__relleno {
  display: block; height: 100%; width: 0;
  background: var(--acento-vivo); border-radius: 99px;
}

.reproductor__tiempo {
  margin: 0; font-size: .7rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: #9FBBD1; white-space: nowrap;
}

.reproductor__chip {
  appearance: none;
  padding: .3rem .6rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 99px;
  background: transparent; color: #DCE6EE;
  font: inherit; font-size: .6875rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: all var(--transicion);
}
.reproductor__chip:hover { border-color: #fff; color: #fff; }
.reproductor__chip--activo { background: var(--acento-vivo); border-color: var(--acento-vivo); color: #1A1004; }

.reproductor__cerrar {
  appearance: none;
  width: 1.8rem; height: 1.8rem; flex: none;
  border: 0; border-radius: 50%;
  background: transparent; color: #9FBBD1;
  display: grid; place-items: center; font-size: .7rem; cursor: pointer;
  transition: all var(--transicion);
}
.reproductor__cerrar:hover { background: rgba(255, 255, 255, .12); color: #fff; }

@media (max-width: 34rem) {
  .reproductor { grid-template-columns: auto 1fr auto auto; gap: .5rem; padding: .55rem .6rem; }
  .reproductor__chip:last-of-type { display: none; }
  .reproductor__tiempo { display: none; }
}

@media print { .reproductor, .escuchar { display: none !important; } }

/* =============================================================================
   Ajustes de lectura en pantallas chicas
   Las etiquetas versales de 11px son comodas en escritorio y quedan justas en
   telefono, que es donde la mayoria va a leer esto.
   ========================================================================== */
@media (max-width: 40rem) {
  .widget__rotulo,
  .cierre-estacion__rotulo,
  .salida__rotulo,
  .salida__contador,
  .roles__dato-rotulo,
  .prompt-caja__rotulo,
  .comparador__rotulo,
  .semaforo__rotulo,
  .tarjeta__rotulo,
  .conversion__rotulo,
  .cierre-widget__rotulo,
  .situaciones__rotulo,
  .escenario__veredicto,
  .feedback__veredicto,
  .loop-item__veredicto,
  .hallazgo__tipo,
  .perfil__rotulo,
  .resultado__rotulo,
  .repaso__rotulo,
  .contraste__cuando,
  .kit-grupo__titulo,
  .capa__tipo,
  .portadilla__num,
  .etiqueta,
  .creditos h3 {
    font-size: .75rem;
    letter-spacing: .09em;
  }

  .tres-tiempos__num,
  .riel__meta,
  .escuchar__dur,
  .portada__datos dt,
  .reproductor__chip { font-size: .75rem; }

  .widget { border-radius: var(--r); }
  .comparacion__cifra strong { font-size: 1.5rem; }
  .kit-resumen__cifra strong { font-size: 2.5rem; }
}

/* =============================================================================
   Indicador de despliegue
   El circulo solo dice "completado". Lo que dice "esto se abre" es esto.
   ========================================================================== */
.desplegar {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .5rem .3rem .7rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 99px;
  color: var(--tinta-2);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all var(--transicion);
}
.pieza__cab:hover .desplegar { border-color: var(--acento); color: var(--acento); }

.desplegar__flecha {
  width: .55rem;
  height: .55rem;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--transicion);
}

[aria-expanded="true"] .desplegar {
  background: var(--acento-vivo);
  border-color: var(--acento-vivo);
  color: #1A1004;
}
[aria-expanded="true"] .desplegar__flecha { transform: rotate(-135deg) translate(-2px, -2px); }
[aria-expanded="true"] .desplegar__texto::after { content: ""; }

/* El rotulo cambia de palabra segun el estado, sin tocar el DOM */
[aria-expanded="true"] .desplegar__texto { font-size: 0; }
[aria-expanded="true"] .desplegar__texto::before {
  content: "Cerrar";
  font-size: .6875rem;
}

@media (max-width: 30rem) {
  .desplegar__texto { display: none; }
  .desplegar { padding: .35rem; }
  [aria-expanded="true"] .desplegar__texto::before { content: ""; }
}

/* =============================================================================
   Invitacion al modo relato
   ========================================================================== */
.invitacion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.15rem;
  margin: 2.25rem 0;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento-vivo);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--papel-3);
  box-shadow: var(--sombra-1);
  font-family: var(--sans);
  transition: opacity .3s ease, transform .3s ease;
}
.invitacion--fuera { opacity: 0; transform: translateY(-8px); }

.invitacion__icono {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--acento-tenue);
  color: var(--acento);
  font-size: 1.15rem;
  animation: onda 2.6s ease-in-out infinite;
}
.invitacion__titulo { margin: 0 0 .35rem; font-size: 1.125rem; font-weight: 650; letter-spacing: -.015em; }
.invitacion__cuerpo { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--tinta-2); }
.invitacion__acciones {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

@media (max-width: 34rem) {
  .invitacion { grid-template-columns: 1fr; }
  .invitacion__acciones { grid-column: 1; }
}

/* Estado del boton global cuando el relato esta encendido */
.icono-btn--relato { position: relative; }
.icono-btn--relato::after {
  content: "";
  position: absolute;
  bottom: .18rem;
  left: 50%;
  width: .3rem;
  height: .3rem;
  margin-left: -.15rem;
  border-radius: 50%;
  background: var(--acento-vivo);
}

/* El reproductor espera un gesto del usuario */
.reproductor--esperando .reproductor__play {
  animation: latido 1.3s ease-in-out infinite;
}
@keyframes latido {
  50% { box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--acento-vivo) 28%, transparent); }
}
.reproductor--esperando .reproductor__titulo::after {
  content: " · toca para iniciar";
  color: #FFC28E;
}

@media (prefers-reduced-motion: reduce) {
  .invitacion__icono,
  .reproductor--esperando .reproductor__play { animation: none !important; }
}

/* =============================================================================
   Practica en la herramienta real
   ========================================================================== */
.practicas { display: grid; gap: .6rem; }

.practica {
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--papel);
  overflow: hidden;
  transition: border-color var(--transicion);
}
.practica--hecha { border-color: color-mix(in srgb, var(--ok) 55%, var(--linea)); }

.practica__cab {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1rem;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--tinta);
  cursor: pointer;
}
.practica__cab:hover { background: var(--papel-2); }

.practica__icono {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: var(--acento-tenue);
  color: var(--acento);
  font-size: 1.05rem;
  flex: none;
}
.practica--hecha .practica__icono { background: var(--ok-tenue); color: var(--ok); }

.practica__texto { min-width: 0; }
.practica__texto strong { display: block; font-size: .9375rem; font-weight: 650; line-height: 1.3; }
.practica__meta { display: block; font-size: .75rem; color: var(--tinta-3); margin-top: .1rem; }

.practica__sello {
  padding: .25rem .6rem;
  border-radius: 99px;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  font-size: .6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
  white-space: nowrap;
}
.practica__sello--completo { background: var(--ok-tenue); border-color: var(--ok); color: var(--ok); }

.practica__panel { padding: 0 1rem 1.2rem; border-top: 1px solid var(--linea); }

.practica__paso { margin-top: 1.2rem; }
.practica__paso-rotulo {
  margin: 0 0 .55rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
}
.practica__encargo { margin: 0; font-size: .9375rem; line-height: 1.6; }

/* Criterios de logro */
.criterios { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }

.criterio {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  padding: .65rem .8rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  background: var(--papel-3);
  color: var(--tinta);
  font: inherit;
  font-size: .875rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: all var(--transicion);
}
.criterio:hover { border-color: var(--acento); }

.criterio__marca {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .1rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 5px;
  position: relative;
  flex: none;
  transition: all var(--transicion);
}
.criterio--hecho { border-color: var(--ok); background: var(--ok-tenue); }
.criterio--hecho .criterio__marca { border-color: var(--ok); background: var(--ok); }
.criterio--hecho .criterio__marca::after {
  content: "";
  position: absolute;
  left: .35rem;
  top: .12rem;
  width: .28rem;
  height: .58rem;
  border: solid var(--papel);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.practica__etiqueta {
  display: block;
  margin-bottom: .4rem;
  font-size: .8125rem;
  color: var(--tinta-2);
}
.practica__campo {
  width: 100%;
  font: inherit;
  font-size: .875rem;
  padding: .65rem .8rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  background: var(--papel-3);
  color: var(--tinta);
  resize: vertical;
}
.practica__campo:focus {
  border-color: var(--acento-vivo);
  outline: none;
  box-shadow: 0 0 0 3px var(--acento-tenue);
}

.practica__cierre {
  margin: 1.2rem 0 0;
  padding: .95rem 1.1rem;
  background: var(--ok-tenue);
  border-radius: var(--r);
  font-size: .875rem;
  line-height: 1.6;
}

@media (max-width: 32rem) {
  .practica__cab { grid-template-columns: auto 1fr auto; gap: .6rem; }
  .practica__cab .desplegar { grid-column: 1 / -1; justify-self: start; }
}

/* =============================================================================
   Juego: la escalera del estratega
   ========================================================================== */
.widget--juego { background: var(--udla-azul-hondo); border-color: #24557E; color: #F2EEE7; }
.widget--juego .widget__cab { border-bottom-color: #24557E; }
.widget--juego .widget__rotulo { color: #FFB067; }
.widget--juego .widget__paso { color: #A9C2D6; }
.widget--juego .widget__pie { border-top-color: #24557E; }
.widget--juego .widget__nota { color: #8AA6BD; }

/* ── Portada ───────────────────────────────────────────────────────────── */
.juego-portada__titulo { margin: 0 0 .7rem; font-size: 1.3rem; letter-spacing: -.02em; color: #F2EEE7; }
.juego-portada__texto { margin: 0 0 1.2rem; color: #C3D5E3; line-height: 1.62; }

.juego-reglas { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .6rem; }
.juego-reglas li {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center;
  padding: .7rem .9rem;
  background: #123B5E; border-radius: var(--r);
  font-size: .875rem; line-height: 1.45; color: #C3D5E3;
}
.juego-reglas strong { color: #F2EEE7; }
.juego-reglas__icono {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: #16456C; color: #FFB067; font-size: .9rem;
}
.juego-portada__record {
  margin: 0; padding: .75rem 1rem;
  background: #16456C; border-radius: var(--r);
  font-size: .875rem; color: #C3D5E3;
}
.juego-portada__record strong { color: #FFB067; }

/* ── Tablero ───────────────────────────────────────────────────────────── */
.juego { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .juego { grid-template-columns: 11rem 1fr; gap: 1.75rem; } }

.escalera {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px;
  align-content: start;
}
.escalera__peldano {
  display: grid; grid-template-columns: 1.5rem 1fr auto; gap: .5rem; align-items: center;
  padding: .3rem .55rem;
  border-radius: var(--r-chico);
  font-size: .75rem; color: #7E9AB2;
  font-variant-numeric: tabular-nums;
  transition: all var(--transicion);
}
.escalera__nivel { font-weight: 700; opacity: .55; }
.escalera__puntos { font-weight: 600; }
.escalera__marca { font-size: .6rem; color: #6FD4A3; }
.escalera__peldano--superado { color: #6FD4A3; }
.escalera__peldano--seguro { color: #C3D5E3; }
.escalera__peldano--seguro.escalera__peldano--superado { color: #6FD4A3; }
.escalera__peldano--actual {
  background: var(--acento-vivo);
  color: #1A1004;
  font-weight: 700;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--acento-vivo) 45%, transparent);
}
.escalera__peldano--actual .escalera__nivel { opacity: 1; }

@media (max-width: 47.99rem) {
  .escalera {
    grid-auto-flow: column;
    grid-auto-columns: minmax(3.4rem, 1fr);
    overflow-x: auto;
    padding-bottom: .4rem;
    direction: rtl;              /* el nivel 1 queda a la izquierda */
  }
  .escalera__peldano { direction: ltr; grid-template-columns: 1fr; text-align: center; gap: .1rem; }
  .escalera__marca { display: none; }
}

/* ── Comodines ─────────────────────────────────────────────────────────── */
.comodines { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.comodin {
  appearance: none;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem;
  border: 1px solid #35678F; border-radius: 99px;
  background: #123B5E; color: #C3D5E3;
  font: inherit; font-size: .8125rem; font-weight: 600;
  cursor: pointer; transition: all var(--transicion);
}
.comodin:hover:not(:disabled) { border-color: var(--acento-vivo); color: #FFB067; }
.comodin--gastado { opacity: .32; cursor: default; text-decoration: line-through; }
@media (max-width: 30rem) { .comodin__texto { display: none; } .comodin { padding: .5rem .65rem; } }

/* ── Pregunta y alternativas ───────────────────────────────────────────── */
.juego__pregunta {
  font-size: 1.15rem; font-weight: 600; line-height: 1.42;
  letter-spacing: -.012em; margin: 0 0 1rem; color: #F2EEE7;
}
.juego__pista {
  display: flex; align-items: start; gap: .55rem;
  margin: 0 0 1rem; padding: .8rem 1rem;
  background: #2A2013; border-left: 3px solid var(--acento-vivo); border-radius: 0 var(--r) var(--r) 0;
  font-size: .875rem; line-height: 1.55; color: #FFD3A8;
}

.juego__opciones { display: grid; gap: .5rem; }
@media (min-width: 40rem) { .juego__opciones { grid-template-columns: 1fr 1fr; } }

.juego-op {
  appearance: none;
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center;
  padding: .8rem 1rem;
  border: 1px solid #35678F; border-radius: var(--r);
  background: #123B5E; color: #F2EEE7;
  font: inherit; font-size: .9375rem; line-height: 1.4; text-align: left;
  cursor: pointer; transition: all var(--transicion);
}
.juego-op:hover:not(:disabled) { border-color: var(--acento-vivo); background: #16456C; }
.juego-op:disabled { cursor: default; }
.juego-op__letra {
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; flex: none;
  border-radius: 50%; background: #16456C; color: #FFB067;
  font-size: .8rem; font-weight: 700;
}
.juego-op--descartada { opacity: .22; }
.juego-op--correcta { border-color: #6FD4A3; background: #123528; }
.juego-op--correcta .juego-op__letra { background: #6FD4A3; color: #0D2F4B; }
.juego-op--fallada { border-color: #FF9C87; background: #3A1F1A; }
.juego-op--fallada .juego-op__letra { background: #FF9C87; color: #0D2F4B; }

.juego__feedback {
  margin-top: 1.1rem; padding: 1.1rem 1.25rem;
  border-radius: var(--r); border-left: 3px solid;
}
.juego__feedback--ok { background: #123528; border-left-color: #6FD4A3; }
.juego__feedback--no { background: #3A1F1A; border-left-color: #FF9C87; }
.juego__veredicto {
  margin: 0 0 .4rem; font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.juego__feedback--ok .juego__veredicto { color: #6FD4A3; }
.juego__feedback--no .juego__veredicto { color: #FF9C87; }
.juego__explica { margin: 0; font-size: .9375rem; line-height: 1.6; color: #DCE6EE; }
.juego__feedback .widget__pie { border-top-color: rgba(255,255,255,.14); }

.juego__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #24557E;
}

/* ── Final ─────────────────────────────────────────────────────────────── */
.juego-final { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 34rem) { .juego-final { grid-template-columns: auto 1fr; gap: 1.75rem; } }

.juego-final__medalla {
  display: grid; place-items: center;
  width: 5.5rem; height: 5.5rem;
  margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFB067, var(--acento-vivo));
  color: #1A1004; font-size: 2.2rem;
  box-shadow: 0 6px 28px color-mix(in srgb, var(--acento-vivo) 45%, transparent);
}
.juego-final__rotulo {
  margin: 0 0 .3rem; font-size: .6875rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: #8AA6BD;
}
.juego-final__rango { margin: 0 0 .35rem; font-size: 1.6rem; letter-spacing: -.025em; color: #F2EEE7; }
.juego-final__cifra {
  margin: 0 0 .7rem; font-size: .9375rem; font-weight: 600; color: #FFB067;
  font-variant-numeric: tabular-nums;
}
.juego-final__texto { margin: 0; color: #C3D5E3; line-height: 1.62; }
.juego-final__nota {
  margin: 1.1rem 0 0; padding: .85rem 1rem;
  background: #123B5E; border-radius: var(--r);
  font-size: .875rem; color: #C3D5E3;
}

@media print { .widget--juego { display: none !important; } }

/* =============================================================================
   Correcciones finales de pantalla chica
   Van al final a proposito: deben ganar a las reglas base por orden de cascada.
   ========================================================================== */
@media (max-width: 40rem) {
  .reproductor__chip,
  .practica__sello,
  .tres-tiempos__num { font-size: .75rem; }

  /* El peldano de la escalera necesita caber "125.000" sin recortarse */
  .escalera { grid-auto-columns: minmax(4.4rem, 1fr); }
  .escalera__peldano { padding: .35rem .3rem; }
  .escalera__puntos { font-size: .6875rem; letter-spacing: -.02em; }
  .escalera__nivel { font-size: .625rem; }
}

/* =============================================================================
   Video de cierre
   Va sobre el tramo oscuro de la estacion 6 y cierra el recorrido, asi que
   recibe mas presencia que los tres videos de demostracion.
   ========================================================================== */
.video--cierre {
  margin: 2rem 0 2.5rem;
  padding: .6rem;
  border-radius: calc(var(--r) + .6rem);
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--acento-vivo) 55%, transparent),
    color-mix(in srgb, var(--udla-azul) 60%, transparent)
  );
}
.video--cierre video {
  border-radius: var(--r);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38);
}
.video--cierre figcaption {
  margin-top: .75rem;
  margin-bottom: .15rem;
  color: #DCE6EE;
  font-weight: 550;
}

@media (max-width: 34rem) {
  .video--cierre { padding: .4rem; }
}

@media print { .video--cierre { display: none !important; } }

/* =============================================================================
   Videos alojados en YouTube, con carga diferida
   Se muestra un fotograma real del video y el reproductor solo se inserta
   cuando el estudiante lo pide.
   ========================================================================== */
.yt {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: #0A1620;
  box-shadow: var(--sombra-2);
  isolation: isolate;
}

.yt__miniatura {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), filter var(--transicion);
}
.yt:hover .yt__miniatura { transform: scale(1.03); filter: brightness(.86); }

/* Velo para que el boton se lea sobre cualquier fotograma */
.yt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(9, 22, 32, .35), rgba(9, 22, 32, .06) 60%);
  pointer-events: none;
  transition: opacity var(--transicion);
}
.yt--cargado::after { display: none; }

.yt__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4.6rem;
  height: 4.6rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--acento-vivo);
  color: #1A1004;
  cursor: pointer;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .4);
  transition: transform var(--transicion), background var(--transicion);
  z-index: 1;
}
.yt__play:hover { background: #FF9438; transform: scale(1.08); }
.yt__play:active { transform: scale(.98); }

.yt__triangulo {
  width: 0;
  height: 0;
  margin-left: .35rem;
  border-style: solid;
  border-width: .82rem 0 .82rem 1.3rem;
  border-color: transparent transparent transparent currentColor;
}

.yt__duracion {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  padding: .2rem .5rem;
  border-radius: 5px;
  background: rgba(9, 22, 32, .82);
  color: #F2EEE7;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
.yt--cargado .yt__duracion { display: none; }

.yt iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.yt__enlace {
  display: inline-block;
  margin-left: .5rem;
  color: var(--acento);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  white-space: nowrap;
}
.yt__enlace:hover { border-bottom-color: var(--acento); }

@media (max-width: 34rem) {
  .yt__play { width: 3.6rem; height: 3.6rem; }
  .yt__triangulo { border-width: .65rem 0 .65rem 1.05rem; margin-left: .28rem; }
}

@media (prefers-reduced-motion: reduce) {
  .yt:hover .yt__miniatura { transform: none; }
}

@media print { .yt__play, .yt__duracion { display: none !important; } }