/*
  TOGGLE DÍA/NOCHE
  ------------------------------------------------------------
  Solo DOS colores en juego: el pill (color del wordmark del modo
  activo) y el naranja fijo del símbolo. Nunca un tercer color
  para el knob.

  CAJA DEL ICONO — CAUSA DEL BUG DE SAFARI iOS (resuelto aquí):
  el símbolo tiene viewBox 80x59. Si se mete en una caja CUADRADA
  el navegador tiene que resolver el letterboxing (preserveAspect-
  Ratio), y WebKit lo resuelve mal cuando además el <svg> es un
  ítem flex sin width/height propios: calcula el ancho base
  aplicando el ratio 80/59 a la altura y el símbolo acaba
  desplazado o desbordando el knob. Otros motores siguen la spec y
  por eso el bug no aparecía en renders estáticos.

  Solución: la caja del icono tiene el MISMO ratio que el viewBox
  (height = width * 59 / 80), así no hay nada que resolver. Es el
  mismo patrón que ya funciona bien en .hero__simbolo-nav y en
  .footer__simbolo — el toggle era la única instancia del sitio
  con caja cuadrada, y la única que fallaba.

  POSICIONAMIENTO: transform: translateX(), NO justify-content
  (justify-content no es animable según la spec CSS). El centrado
  vertical va por top: 50% + translateY(-50%) en vez de un top
  fijo, para que sea correcto con cualquier combinación de altura
  de pill y tamaño de knob — con top: 4px el knob quedaba 2px alto
  en el breakpoint móvil.
*/

.toggle {
  /* Medidas locales: la media query solo cambia estas tres y todo
     lo demás (padding, desplazamiento, tamaño del icono) se
     recalcula solo. */
  --pill-w: var(--toggle-w-desktop);
  --pill-h: var(--toggle-h-desktop);
  --knob: var(--toggle-knob-desktop);
  /* Aire entre el knob y el borde del pill */
  --pad: calc((var(--pill-h) - var(--knob)) / 2);
  /* Ancho del símbolo dentro del knob */
  --icono-w: calc(var(--knob) * 0.8);

  position: relative;
  display: block;
  align-self: center;
  width: var(--pill-w);
  height: var(--pill-h);
  background-color: var(--color-toggle-pill);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
  transition: background-color 0.3s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.toggle__knob {
  position: absolute;
  top: 50%;
  left: var(--pad);
  width: var(--knob);
  height: var(--knob);
  border-radius: 999px;
  /* translateY(-50%) constante + translateX animado en el mismo
     transform: si se separan, el segundo pisa al primero. */
  transform: translate(0, -50%);
  transition: transform var(--toggle-transicion);
}

html[data-theme="noche"] .toggle__knob {
  transform: translate(
    calc(var(--pill-w) - (var(--pad) * 2) - var(--knob)),
    -50%
  );
}

.toggle__icono {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--icono-w);
  /* Ratio exacto del viewBox del símbolo: 80 x 59 */
  height: calc(var(--icono-w) * 59 / 80);
  transform: translate(-50%, -50%);
  color: var(--color-naranja);
}

.toggle__icono svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  .toggle {
    --pill-w: var(--toggle-w-movil);
    --pill-h: var(--toggle-h-movil);
    --knob: var(--toggle-knob-movil);
  }

  /* Hit-box ampliada, sin cambiar el tamaño visual del pill.
     Los valores negativos se calculan para llegar al área de
     toque objetivo desde el tamaño real del pill. */
  .toggle::before {
    content: "";
    position: absolute;
    top: calc((44px - var(--pill-h)) / -2);
    bottom: calc((44px - var(--pill-h)) / -2);
    left: -16px;
    right: -16px;
    border-radius: 999px;
  }
}