/* ================================================================================ */
/* === BOTÓN CAMBIAR TEMA (MODO CLARO/OSCURO) === */
/* ================================================================================ */
/* Este componente permite al usuario alternar entre modo claro y oscuro */
/* Usa un toggle switch que muestra un sol (modo claro) o luna (modo oscuro) */

/* ================================================================================ */
/* === CONTENEDOR DEL TOGGLE === */
/* ================================================================================ */

.container-boton-cambiar-tema {
  width: 100%;
  max-width: 100px;
  padding: 0 8px;
  box-sizing: border-box;
  display: inline-block;
}

/* ================================================================================ */
/* === VARIABLES CSS PERSONALIZADAS PARA EL TOGGLE === */
/* ================================================================================ */
/* Estas variables permiten personalizar fácilmente el tamaño y colores del switch */

.toggle-switch {
  --track-width: 90px;
  --track-height: 36px;
  --track-padding: 6px;

  /* calc() permite hacer cálculos matemáticos en CSS */
  /* Calcula el tamaño del knob (botón circular) basado en la altura y padding */
  --knob-size: calc(var(--track-height) - (var(--track-padding) * 2));

  /* Colores para modo claro (estado inicial) */
  --color-track-off: #e9eef2;
  --color-knob-off: #ffffff;

  /* Colores para modo oscuro (estado activo) */
  --color-track-on: #28292c;
  --color-knob-on: #1e1e20;

  /* Colores de los iconos */
  --sun-fill: #FDB813;
  --moon-fill: #ffffff;

  /* display: inline-block permite que el elemento tenga ancho/alto pero se comporte como inline */
  display: inline-block;
  width: var(--track-width);
  height: var(--track-height);
  position: relative;

  /* box-sizing: content-box hace que padding y border NO se incluyan en el ancho/alto */
  box-sizing: content-box;
  cursor: pointer;

  /* user-select: none evita que el usuario pueda seleccionar el texto/elemento */
  user-select: none;
}

/* ================================================================================ */
/* === INPUT CHECKBOX (INVISIBLE PERO FUNCIONAL) === */
/* ================================================================================ */
/* El input real está oculto visualmente pero funciona para accesibilidad */
/* Los lectores de pantalla pueden detectarlo y el usuario puede usar el teclado */

.toggle-switch .checkbox {
  /* position: absolute saca el elemento del flujo normal del documento */
  position: absolute;

  /* inset: 0 es equivalente a top:0, right:0, bottom:0, left:0 */
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;

  /* opacity: 0 hace el input invisible pero sigue siendo funcional */
  opacity: 0;

  /* z-index: 3 coloca el checkbox por encima de otros elementos */
  z-index: 3;
  cursor: pointer;
}

/* ================================================================================ */
/* === TRACK VISUAL (LA PÍLDORA/RAIL DEL SWITCH) === */
/* ================================================================================ */

.toggle-switch .slider {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  /* border-radius: calc() crea bordes completamente redondeados (píldora) */
  border-radius: calc(var(--track-height) / 2);

  /* Color de fondo inicial (modo claro) */
  background-color: var(--color-track-off);

  /* transition crea animación suave al cambiar propiedades */
  transition: background-color 220ms ease;
  box-sizing: border-box;
  overflow: visible;
  z-index: 1;
}

/* ================================================================================ */
/* === KNOB (BOTÓN CIRCULAR CON ICONO) === */
/* ================================================================================ */
/* Usamos ::before para crear el knob circular que se desliza */

.toggle-switch .slider::before {
  /* content: "" es necesario para que ::before aparezca */
  content: "";
  position: absolute;
  left: var(--track-padding);
  top: var(--track-padding);
  width: var(--knob-size);
  height: var(--knob-size);

  /* border-radius: 50% crea un círculo perfecto */
  border-radius: 50%;
  background-color: var(--color-knob-off);

  /* box-shadow crea una sombra para dar profundidad */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);

  /* Múltiples transiciones para animar diferentes propiedades */
  /* cubic-bezier() define una curva de animación personalizada */
  transition:
    transform 260ms cubic-bezier(.2,.9,.3,1),
    left 260ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;

  /* pointer-events: none evita que el knob bloquee clics al checkbox */
  pointer-events: none;

  /* ================================================================================ */
  /* === ICONO SVG INLINE (SOL) === */
  /* ================================================================================ */
  /* url("data:image/svg+xml;utf8,...") permite incrustar SVG directamente en CSS */
  /* %23 es el código URL para # (necesario en SVG inline) */

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FDB813' d='M6.76 4.84l-1.8-1.79L3.17 4.84l1.79 1.79 1.8-1.79zM1 13h3v-2H1v2zm10-9h2V1h-2v3zm7.03 1.05l1.79-1.79-1.79-1.79-1.79 1.79 1.79 1.79zM17 13v-2h-2v2h2zm-5 6a5 5 0 110-10 5 5 0 010 10zm4.24-2.84l1.8 1.79 1.79-1.79-1.79-1.79-1.8 1.79zM4.24 17.16l1.79 1.79 1.8-1.79-1.8-1.79-1.79 1.79zM12 21h2v-3h-2v3z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;

  /* Hace el icono más grande (72% del tamaño del knob) */
  background-size: 72%;
}

/* ================================================================================ */
/* === ESTADO ACTIVO (MODO OSCURO) === */
/* ================================================================================ */
/* El selector ~ es el "selector de hermano general" */
/* .checkbox:checked ~ .slider selecciona .slider cuando el checkbox está marcado */

.toggle-switch .checkbox:checked ~ .slider {
  /* Cambia el color del track a oscuro */
  background-color: var(--color-track-on);
}

/* Cuando está en modo oscuro, mueve el knob a la derecha y cambia el icono */

.toggle-switch .checkbox:checked ~ .slider::before {
  /* transform: translateX() mueve el knob horizontalmente */
  /* Calcula cuánto mover: ancho total - tamaño knob - padding en ambos lados */
  transform: translateX(calc(var(--track-width) - var(--knob-size) - (var(--track-padding) * 2)));

  /* Cambia el knob a color oscuro */
  background-color: var(--color-knob-on);

  /* Sombra más pronunciada para dar más profundidad */
  box-shadow: 0 3px 8px rgba(0,0,0,0.26);

  /* Cambia el icono a una luna (visible sobre fondo oscuro) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/></svg>");
  background-size: 72%;
}

/* ================================================================================ */
/* === ESTADOS DE FOCUS PARA ACCESIBILIDAD === */
/* ================================================================================ */
/* :focus se activa cuando el usuario navega con teclado (Tab) */
/* :focus-visible es más específico y solo se activa con teclado, no con mouse */

.toggle-switch .checkbox:focus + .slider,
.toggle-switch .checkbox:focus-visible + .slider {
  /* outline crea un borde visible alrededor del elemento */
  outline: 3px solid rgba(27,129,112,0.14);

  /* outline-offset separa el outline del borde del elemento */
  outline-offset: 4px;
}

/* ================================================================================ */
/* === RESPETAR PREFERENCIAS DE MOVIMIENTO REDUCIDO === */
/* ================================================================================ */
/* @media (prefers-reduced-motion: reduce) detecta si el usuario prefiere menos animaciones */
/* Importante para accesibilidad: algunas personas se marean con animaciones */

@media (prefers-reduced-motion: reduce) {
  .toggle-switch .slider,
  .toggle-switch .slider::before {
    /* transition: none elimina todas las animaciones */
    transition: none;
  }
}