/* Contenedor para alinear switch + texto */
.switch-container {
    margin-left: 0px;            /* margen izquierdo del contenedor */
    display: flex;
    align-items: center;
    gap: 8px;                   /* espacio entre switch y texto */
    font-family: "Poppins", sans-serif;
  }
  
  /* El input queda invisible pero accesible */
  .switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* Estructura visual del switch */
  .switch-label {
    position: relative;
    display: inline-block;
    width: 42px;                /* largo del track */
    height: 24px;               /* alto del track */
    cursor: pointer;
  }
  
  /* Track */
  .switch-track {
    position: absolute;
    inset: 0;
    background: var(--color-scroll-inputs);       /* color desactivado */
    border-radius: 9999px;      /* muy redondeado */
    transition: background 0.25s ease;
  }
  
  /* Thumb */
  .switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-bg-contrast); /* color del botón */
    border-radius: 50%;
    box-shadow: 0 2px 4px var(--color-shadow);
    transition: transform 0.25s ease;
  }
  
  /* ===== Estados ===== */
  
  /* ON */
  .switch-input:checked + .switch-label .switch-track {
    background: var(--color-primary);        /* color activado */
  }
  
  .switch-input:checked + .switch-label .switch-thumb {
    transform: translateX(18px); /* mueve el botón a la derecha */
  }
  
  /* Foco accesible */
  .switch-input:focus + .switch-label .switch-track {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }
  
  /* Deshabilitado (si agregas disabled al input) */
  .switch-input:disabled + .switch-label {
    cursor: not-allowed;
    opacity: 0.6;
  }