/*
 * Simuladores del atlas.
 * Reúne las clases del panel interactivo que se monta dentro de la ficha de un tema: la fila de controles, el lienzo, la cifra del resultado y la nota explicativa.
 * Ocupa el lugar octavo de la cascada, después del responsivo y antes de la hoja de papel, porque sus componentes deben poder ajustarse en pantallas estrechas y a la vez desaparecer al imprimir.
 * Ninguna regla escribe un color literal: todos los tonos salen de los testigos declarados en 1-base.css.
 */

/* ------------------------------------------------------------
   Testigos propios del degradado de datos.
   Son el único caso en el que un simulador necesita una escala continua de color, razón por la cual se declaran aquí y no en cada módulo.
   ------------------------------------------------------------ */

:root {
  --sim-calor-bajo: var(--superficie-2);
  --sim-calor-alto: var(--marca);
}

/* ------------------------------------------------------------
   Contenedor del simulador.
   ------------------------------------------------------------ */

.sim-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 0;
  padding: 16px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

/* ------------------------------------------------------------
   Fila de controles, que se parte en varias líneas cuando no cabe.
   ------------------------------------------------------------ */

.sim-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
}

/* ------------------------------------------------------------
   Deslizador con su etiqueta y su cifra siempre a la vista.
   La etiqueta permanece visible en lugar de reducirse a un icono porque, con varios controles en la misma fila, el nombre es lo único que los distingue.
   ------------------------------------------------------------ */

.sim-control {
  display: flex;
  flex: 1 1 190px;
  flex-direction: column;
  gap: 5px;
  min-width: 170px;
  margin: 0;
}

.sim-etiqueta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--tinta-2);
  font-size: 0.82rem;
  font-weight: 600;
}

.sim-valor {
  color: var(--marca);
  font-family: var(--fuente-mono);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sim-rango {
  width: 100%;
  height: 22px;
  margin: 0;
  accent-color: var(--marca);
  cursor: pointer;
}

.sim-rango:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: var(--radio-s);
}

/* ------------------------------------------------------------
   Botones de acción del simulador.
   Heredan la forma de los botones del proyecto, pero con una altura menor porque suelen aparecer cuatro o cinco en la misma fila.
   ------------------------------------------------------------ */

.sim-boton {
  flex: 0 1 auto;
  padding: 8px 14px;
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}

.sim-boton:hover {
  background: var(--superficie-3);
  border-color: var(--marca);
  color: var(--marca);
}

.sim-boton:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

.sim-boton:active {
  background: var(--superficie-3);
}

/* ------------------------------------------------------------
   Lienzo de dibujo.
   Lleva ancho del cien por ciento y su relación de aspecto la fija el viewBox, de modo que el mismo dibujo sirve en un teléfono y en un monitor sin recalcular coordenadas.
   ------------------------------------------------------------ */

.sim-lienzo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
}

/* ------------------------------------------------------------
   Resultado numérico y nota explicativa.
   ------------------------------------------------------------ */

.sim-resultado {
  margin: 0;
  padding: 10px 12px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--marca);
  border-radius: var(--radio-s);
  color: var(--tinta);
  font-size: 0.88rem;
  line-height: 1.5;
}

.sim-nota {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* ------------------------------------------------------------
   Pantallas estrechas.
   Cada control pasa a ocupar el ancho completo, porque dos deslizadores de ochenta píxeles resultan imposibles de ajustar con el dedo.
   ------------------------------------------------------------ */

@media (max-width: 640px) {
  .sim-panel { padding: 12px; }
  .sim-control { flex: 1 1 100%; min-width: 0; }
  .sim-boton { flex: 1 1 100%; }
  .sim-resultado { font-size: 0.84rem; }
}

/* ------------------------------------------------------------
   Movimiento reducido.
   Las animaciones de los simuladores ya se desactivan en el código, de manera que aquí solo queda anular las transiciones de los propios controles.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .sim-boton { transition: none; }
}

/* ------------------------------------------------------------
   Impresión.
   El panel interactivo no tiene sentido en papel: se conservan el resultado y la nota, que sí son legibles, y se retiran los controles.
   ------------------------------------------------------------ */

@media print {
  .sim-fila { display: none; }
  .sim-panel { background: var(--papel); border-color: var(--papel-borde); }
  .sim-lienzo { border-color: var(--papel-borde); }
  .sim-resultado,
  .sim-nota { color: var(--papel-tinta); }
}