/* ============================================================
   Rock The Distance · Carreras México — Selector de tema
   Segmented control de 3 opciones (Claro / Oscuro / Sistema).
   ------------------------------------------------------------
   · Solo tokens semánticos del sistema. Sin hex crudos. Sin !important.
   · Convención del proyecto para el estado seleccionado:
       fondo --surface-page + icono/texto en --brand (verde).
     El "chip" seleccionado es el indicador deslizante.
   · Dos variantes: por defecto (icono + etiqueta) y .theme-toggle--compact
     (solo iconos, altura --control-sm) para header / menú de perfil.
   ============================================================ */

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  height: var(--control-md);
  padding: var(--space-1);
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}

/* Chip / indicador deslizante = la superficie seleccionada (--surface-page). */
.theme-toggle__indicator {
  position: absolute;
  top: var(--space-1);
  bottom: var(--space-1);
  left: 0;
  width: 0;                       /* lo mide y coloca el JS */
  border-radius: var(--radius-pill);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transform: translateX(0);
  transition:
    transform var(--dur-base) var(--ease-standard),
    width var(--dur-base) var(--ease-standard);
  pointer-events: none;
  z-index: 0;
}

/* Segmento */
.theme-toggle__option {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 0 var(--space-4);
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: var(--text-button);
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: var(--transition-control);
  -webkit-appearance: none;
  appearance: none;
}

.theme-toggle__icon {
  /* Autosuficiente: fija la fuente de iconos aquí para no depender de la clase
     .ms de cada página (que solo ajusta variation-settings). Requiere que la
     página cargue una variante de Material Symbols (Sharp o Rounded). */
  font-family: 'Material Symbols Sharp', 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 200, 'opsz' 20;
  font-size: 20px;
  /* Centrado real del glifo: el propio ícono es una caja flex que centra su
     glifo (evita el sesgo hacia arriba del baseline de Material Symbols). */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
  transition: var(--transition-control);
}

.theme-toggle__label {
  line-height: 1;
}

/* Hover (solo en no seleccionados) */
.theme-toggle__option:hover {
  color: var(--text-primary);
}

/* Seleccionado: texto/icono en verde --brand + icono relleno (FILL 1) */
.theme-toggle__option[aria-checked="true"] {
  color: var(--brand);
  cursor: default;
}
.theme-toggle__option[aria-checked="true"] .theme-toggle__icon {
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 20;
}

/* Foco visible con el anillo verde del sistema */
.theme-toggle__option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Press: hundimiento táctil sutil (sin rebote) */
.theme-toggle__option:active {
  transform: translateY(1px) scale(0.99);
}

/* ------------------------------------------------------------
   Variante compacta: solo iconos, altura --control-sm.
   Para la barra superior del panel y el header del sitio público.
   ------------------------------------------------------------ */
.theme-toggle--compact {
  /* Alto AUTO: lo definen los botones cuadrados (antes era fijo y los aplastaba
     a rectángulos horizontales, dejando el ícono descentrado). */
  height: auto;
}
.theme-toggle--compact .theme-toggle__option {
  /* Botón CUADRADO (mismo ancho y alto) + centrado por grid: el glifo queda
     centrado sin depender de las métricas de la fuente. */
  flex: 0 0 auto;
  width: var(--control-sm);
  height: var(--control-sm);
  padding: 0;
  display: grid;
  place-items: center;
}
.theme-toggle--compact .theme-toggle__icon {
  /* Ícono grande para que llene el chip: reduce el aire arriba/abajo, así el
     ligero sesgo de baseline de Material Symbols deja de notarse. */
  font-size: 21px;
  /* Corrige el leve sesgo alto de la fuente (queda centrado en el cuadrado). */
  transform: translateY(1px);
}
/* Etiqueta oculta visualmente pero disponible para lectores de pantalla.
   (El nombre accesible del botón viene además de aria-label.) */
.theme-toggle--compact .theme-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   Variante flotante: fija arriba-derecha, para páginas sin barra
   superior (evento, inscripción). Respeta safe-area en móviles.
   ------------------------------------------------------------ */
.theme-toggle--floating {
  position: fixed;
  top: max(var(--space-3), env(safe-area-inset-top));
  right: max(var(--space-3), env(safe-area-inset-right));
  z-index: 1000;
  /* Chip sólido y delimitado: se lee como control flotante intencional.
     Superficie inset (gris en claro, hundida en oscuro) + borde fuerte para
     contrastar tanto sobre tarjetas blancas como sobre fondos oscuros. */
  background: var(--surface-inset);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------
   Movimiento reducido: sin deslizamiento del indicador.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle__indicator {
    transition: none;
  }
  .theme-toggle__option:active {
    transform: none;
  }
}