/* Contenedor del toggle */
.toggle-container {
    position: relative;
    width: 40px; /* Ancho total del toggle */
    height: 20px; /* Alto total del toggle */
    cursor: pointer;
}

/* Input nativo: Invisible pero clickeable */
.toggle-container input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

/* Toggle visual */
.toggle-container .toggle-switch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px; /* Esquinas redondeadas */
    background-color: var(--gray-4); /* Gris para el estado Off */
    transition: background-color 0.3s ease;
}

/* Círculo del toggle */
.toggle-container .toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--white); /* Blanco para el círculo */
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estado "On" */
.toggle-container input[type="checkbox"]:checked + .toggle-switch {
    background-color: var(--orange-infolaft) !important; /* Naranja Infolaft */
}

.toggle-container input[type="checkbox"]:checked + .toggle-switch::after {
    transform: translateX(20px); /* Mueve el círculo a la derecha */
}

/* Estado "Disabled" */
.toggle-container input[type="checkbox"]:disabled + .toggle-switch {
    background-color: var(--gray-3); /* Fondo gris claro */
    cursor: not-allowed;
}

.toggle-container input[type="checkbox"]:disabled + .toggle-switch::after {
    background-color: var(--gray-4); /* Gris claro para el círculo */
    box-shadow: none;
}