/* Checkbox nativo: Invisible pero clickeable */
.checkbox-atom-container input[type="checkbox"] {
    position: absolute; /* Posiciona el checkbox nativo */
    opacity: 0; /* Lo hace invisible pero clickeable */
    cursor: pointer; /* Mantiene el cursor interactivo */
    width: 100%; /* Asegura que cubra todo el área del checkbox visual */
    height: 100%; /* Igual al área del checkbox visual */
    margin: 0; /* Elimina márgenes */
    z-index: 2; /* Coloca el checkbox nativo sobre el visual */
}

/* Contenedor principal del checkbox */
.checkbox-atom-container {
    display: flex;
    align-items: flex-end;
    gap: 8px; /* Espaciado entre el checkbox y el label */
    cursor: pointer; /* Cambia el cursor al pasar sobre el checkbox */
    position: relative;
}

/* Estilo visual del checkbox */
.checkbox-atom-container .checkbox-custom {
    width: 16px; 
    height: 16px;
    border: 1px solid var(--gray-3); 
    border-radius: 4px;
    background-color: var(--white);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}


/* Estado "Checked" */
.checkbox-atom-container input[type="checkbox"]:checked + .checkbox-custom {
    background-color: var(--orange-infolaft); /* Naranja Infolaft */
    border-color: var(--orange-infolaft);
}

/* Check visual en estado seleccionado */
.checkbox-atom-container input[type="checkbox"]:checked + .checkbox-custom::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 5px;
    width: 4px;
    height: 7px;
    border: solid var(--white); /* Color del check */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg); /* Forma del check */
}

/* Cambia el borde al pasar el mouse */
.checkbox-atom-container:hover .checkbox-custom {
    border-color: var(--orange-infolaft);
}

/* Apariencia de checkbox deshabilitado */
.checkbox-atom-container input[disabled] + .checkbox-custom {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--gray-2); 
    border-color: var(--gray-3);
}