/* ============================================================
   Deslizadores interactivos
   ------------------------------------------------------------
   Capa: componente

   La cadena pedagogica es
       variable → deslizador → valor numerico → formula viva → grafico
   y esta hoja le da forma a los cuatro primeros eslabones. El
   quinto ya lo dibuja grafico.css.

   SOLO TOKENS DEL CONTRATO. Ni un literal: el mismo widget se
   sirve en Premium, Neo, Atlas, Aurora y Praxis.

   EL PROBLEMA QUE VINO A RESOLVER
   Los 23 deslizadores que ya existen en 8 apuntes no tienen una
   sola linea de CSS: son `style=""` inline, 380 en total. Medido
   en un telefono de 375 px, el control quedaba de **16 px de
   alto** —el minimo tactil es 44— y con **129 px de recorrido
   para 60 pasos**, o sea 2,15 px por paso. Funcionaba en el
   escritorio y era casi inmanejable con el dedo.
   ============================================================ */

.deslizador-widget {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.2rem;
  margin: 1.6rem 0;
}

/* ═══════════════════════════════════════════════════
   LA FORMULA VIVA
   Es el ancla de todo el widget: el alumno mueve el
   control y lee aca que ecuacion esta viendo.
═══════════════════════════════════════════════════ */
.deslizador-formula {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  margin: 0 0 1.1rem;
  /* Los valores cambian de ancho al pasar de "1.0" a "−2.5" y el
     bloque entero saltaba. Con tabulares, cada digito ocupa lo
     mismo y la formula queda quieta mientras se arrastra. */
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════
   LOS CONTROLES
═══════════════════════════════════════════════════ */
.deslizador-controles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .5rem 1.6rem;
  margin-bottom: 1.1rem;
}

/* El control SIEMPRE va en su propia linea, debajo del nombre:
       ┌ b — extremo derecho del intervalo ········· 2.0 ┐
       └ ●─────────────────────────────────────────────  ┘

   Hasta la version 1.16.6 esto era asi solo en mobile, y en
   escritorio la fila era `minmax(5.5em, auto) 1fr minmax(3.2em, auto)`
   —nombre, control y valor en la misma linea—. El problema es el
   `auto` del nombre: una etiqueta larga se lleva la columna entera y
   al control le queda lo que sobra. Reportado en el explorador de
   Rolle y Lagrange, cuyas etiquetas son «b — extremo derecho del
   intervalo» y «posicion de c dentro de [a, b]»: medido en un widget
   de 765 px con dos columnas, el nombre se comia ~240 de los 370 de
   su columna y el recorrido quedaba en ~90 px para 90 pasos, o sea
   1 px por paso. Inmanejable, y justo al reves que en mobile, donde
   ya se apilaba y se veia bien.

   Apilar siempre le da al control el ancho completo de su columna
   sin importar cuanto mida la etiqueta, que es lo unico que hace
   falta para que el recorrido no dependa del texto. */
.deslizador {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "nombre valor"
    "control control";
  align-items: center;
  gap: .15rem .6rem;
  min-height: 44px;
}
.deslizador-nombre  { grid-area: nombre; }
.deslizador-valor   { grid-area: valor; }
.deslizador-control { grid-area: control; }

.deslizador-nombre {
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}

.deslizador-valor {
  font-family: var(--font-mono);
  font-size: .88rem;
  font-weight: 700;
  /* --text y no --accent. El acento es color de MARCA, no de texto:
     medido sobre --card2 daba 1,79:1 en Premium (dorado sobre crema) y
     3,40 en Atlas, con AA en 4,5 para 14 px en negrita. Es el mismo
     error que ya se habia corregido en el semaforo de la membresia.
     El acento se queda donde no hay que leerlo: el pulgar y la pista. */
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════
   EL CONTROL EN SI
   ───────────────────────────────────────────────────
   Se resetea la apariencia nativa y se dibuja pista y
   pulgar a mano. No es capricho: `accent-color` sola
   —lo unico que usaban los apuntes viejos— pinta el
   control pero NO cambia su tamano, y el tamano es
   justo el problema en mobile.

   El area tactil se consigue con un `height` grande y
   un fondo transparente: el alto real del control es
   44 px, la pista visible son 6. El dedo apunta a 44,
   el ojo ve 6.
═══════════════════════════════════════════════════ */
.deslizador-control {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  /* Deja pasar el scroll vertical de la pagina: sin esto, en un
     telefono el gesto de bajar arrancado sobre el control lo
     arrastra en vez de scrollear. */
  touch-action: pan-y;
}
.deslizador-control:focus { outline: none; }

/* ── Pista ── */
.deslizador-control::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--border);
}
.deslizador-control::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--border);
}
/* Firefox pinta lo ya recorrido; Chrome no tiene equivalente sin JS. */
.deslizador-control::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

/* ── Pulgar ──
   22 px: se ve, se agarra, y sigue siendo mas chico que el area
   tactil de 44 del control. El borde del color del fondo lo
   despega de la pista en los dos modos. */
.deslizador-control::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--card2);
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  /* Centrado sobre una pista de 6 px dentro de un control de 44:
     (44 - 22) / 2 = 11 desde arriba; la pista arranca en 19. */
  margin-top: -8px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.deslizador-control::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--card2);
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  transition: transform .12s ease, box-shadow .12s ease;
}

.deslizador-control:hover::-webkit-slider-thumb { transform: scale(1.12); }
.deslizador-control:hover::-moz-range-thumb     { transform: scale(1.12); }
.deslizador-control:active::-webkit-slider-thumb { transform: scale(1.2); }
.deslizador-control:active::-moz-range-thumb     { transform: scale(1.2); }

/* Foco visible por teclado. `:focus-visible` y no `:focus` para no
   dibujar el anillo cuando se llega con el dedo o el mouse. */
.deslizador-control:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--accent-glow), 0 1px 4px rgba(0,0,0,.22);
}
.deslizador-control:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px var(--accent-glow), 0 1px 4px rgba(0,0,0,.22);
}

/* ═══════════════════════════════════════════════════
   LECTURAS NUMERICAS
   Las tarjetas de "sen = 0.71 / cos = 0.71 / cuadrante".
═══════════════════════════════════════════════════ */
.deslizador-lectura {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .7rem;
  margin-top: 1.1rem;
}

.deslizador-dato {
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg2);
}
.deslizador-dato-k {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  /* --text-2 (secundario) y no --gray (atenuado): a 11,5 px, --gray
     sobre --bg2 daba 3,84:1 en Neo y 4,29 en Praxis. */
  color: var(--text-2);
  margin-bottom: 3px;
}
.deslizador-dato-v {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Un dato que se quiere destacar (el resultado del ejemplo). */
.deslizador-dato.destacado {
  border-color: rgba(var(--accent-rgb), .45);
  background: var(--accent-dim);
}
/* El destaque lo llevan el borde y el fondo tenido, NO el color del
   texto: el numero se sigue leyendo en --text. Con --accent daba
   1,70:1 en Premium. */
.deslizador-dato.destacado .deslizador-dato-v { color: var(--text); }

/* ═══════════════════════════════════════════════════
   REINICIAR
═══════════════════════════════════════════════════ */
.deslizador-reset {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  padding: .35rem .9rem;
  margin-top: .9rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--text-2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.deslizador-reset:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════
   MOBILE
   El grid de controles ya colapsa solo por el auto-fit.
   Lo que hay que agrandar es el pulgar: en una pantalla
   chica el recorrido es corto y cada paso vale menos px,
   asi que el agarre tiene que perdonar mas.
═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .deslizador-widget { padding: .9rem .8rem 1rem; }
  .deslizador-formula { font-size: .92rem; padding: .6rem .7rem; }
  .deslizador-controles { gap: .8rem 1rem; }

  /* El apilado ya es el comportamiento por defecto desde 1.16.7 (ver
     arriba): aca solo se ajusta lo que cambia en una pantalla chica.
     Medido a 375 px, con el nombre al costado el control se quedaba
     con 93-123 px; apilado se lleva los ~275 del ancho util. Son 2,2x
     mas recorrido para el mismo gesto, que es de lo que depende
     poder elegir un valor con el dedo. */
  .deslizador {
    gap: .1rem .5rem;
    min-height: 0;
  }
  .deslizador-nombre { font-size: .8rem; }

  .deslizador-control::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; }
  .deslizador-control::-moz-range-thumb     { width: 26px; height: 26px; }
  .deslizador-dato-v { font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════════
   IMPRESION
   En papel un deslizador no hace nada. Se esconde el
   control y se deja la formula y las lecturas, que son
   el estado en el que quedo la pagina.
═══════════════════════════════════════════════════ */
@media print {
  .deslizador-controles,
  .deslizador-reset { display: none !important; }
  .deslizador-widget { border-color: #999; break-inside: avoid; }
}

/* Sin animacion del pulgar para quien pidio menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .deslizador-control::-webkit-slider-thumb,
  .deslizador-control::-moz-range-thumb { transition: none; }
}