/* Fix para switch tipo Tailwind CDN: estilos peer-checked que no funcionan con CDN */

/* === FONDO DEL SWITCH === */
/* Cuando el checkbox está checked, cambiar el fondo del switch a azul */
label > input[type="checkbox"].peer:checked + div[id*="_switch"],
label > input[type="checkbox"].peer:checked ~ div[id*="_switch"] {
  background-color: #2563eb !important; /* blue-600 */
}

/* === CÍRCULO DESLIZANTE === */
/* Cuando el checkbox está checked, mover el círculo a la derecha */
label > input[type="checkbox"].peer:checked + div[id*="_switch"] span[id*="_circulo"],
label > input[type="checkbox"].peer:checked ~ div[id*="_switch"] span[id*="_circulo"] {
  transform: translateX(20px) !important;
}

/* === FOCO DEL SWITCH === */
/* Cuando el checkbox tiene foco, añadir ring al switch */
label > input[type="checkbox"].peer:focus + div[id*="_switch"],
label > input[type="checkbox"].peer:focus ~ div[id*="_switch"] {
  box-shadow: 0 0 0 2px #93c5fd !important; /* blue-300 */
}

/* === MODO OSCURO === */
@media (prefers-color-scheme: dark) {
  label > input[type="checkbox"].peer:checked + div[id*="_switch"],
  label > input[type="checkbox"].peer:checked ~ div[id*="_switch"] {
    background-color: #3b82f6 !important; /* blue-500 */
  }
}