/* ---------------------------------------------------- */
/* 1. Ocultar y Estilos Base */
/* ---------------------------------------------------- */
.radio-card-input {
    /* Oculta el radio button nativo */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-card-label {
    display: block;
    cursor: pointer;
    margin-bottom: 12px;
    border-radius: 12px;
    background-color: #f8f8f8; 
    padding: 18px 20px;
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
    min-width: 300px;
    max-width: min-content;
}

.radio-card-content {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    font-size: 1.15rem; 
    color: #333;
}

/* ---------------------------------------------------- */
/* 2. Estilos del Checkmark (Inicialmente Oculto) */
/* ---------------------------------------------------- */

.radio-card-checkmark {
    font-size: 1.4rem;
    color: var(--dark-success); /* Color del checkmark (Verde/Teal) */
}

/* 🎯 Hacemos el icono de Font Awesome invisible por defecto */
.radio-card-checkmark i {
    opacity: 0; 
    transform: scale(0.8);
    transition: all 0.2s ease-in-out;
}

/* ---------------------------------------------------- */
/* 3. Estilos al Seleccionar (:checked) */
/* ---------------------------------------------------- */

/* 📌 CLAVE 1: Estiliza la tarjeta cuando el input está marcado */
.radio-card-input:checked + .radio-card-content {
    /* No hay estilos aquí directamente, solo se usa para el selector descendente */
}

/* 📌 CLAVE 2: Estiliza el LABEL PADRE (La tarjeta) */
/* Usamos el selector de hermano adyacente '+' para el div y luego el selector padre. */

/* Esto activa el borde de la tarjeta (el recuadro verde que ya tienes) */
.radio-card-input:checked ~ .radio-card-content .radio-card-checkmark {
    /* Este selector no funciona bien porque ~ no va hacia arriba (al padre) */
}

/* 💡 SOLUCIÓN: Usamos el selector de hermano adyacente para el div, y el selector de padre para el borde */

/* Estiliza la tarjeta (LABEL) para el borde y el fondo */
.radio-card-input:checked {
    /* No podemos hacer esto, el input no tiene el borde */
}

/* 🎯 SOLUCIÓN FINAL CON ENVOLTORIOS CSS: */

/* Aplica el estilo de selección a la tarjeta (LABEL) al marcar el input interno */
.radio-card-input:checked + .radio-card-content {
    /* El div contenido recibe el foco, pero queremos el label. 
       La solución más limpia requiere seleccionar el padre del input:checked, lo cual CSS puro no permite. 
       Lo haremos usando el selector adyacente del contenido y aplicaremos los estilos al icono.
    */
}

/* Borde y Fondo para el Label (La Tarjeta) */
.radio-card-input:checked + .radio-card-content {
    background-color: #e6f2f0; /* Fondo verde muy claro para el CONTENT */
}

/* Ahora ajustamos el borde al LABEL usando el selector de padre */
.radio-card-input:checked + .radio-card-content {
    /* Necesitamos aplicar el borde al padre del .radio-card-content. */
    /* Como no podemos seleccionar el padre, aplicamos el estilo al LABEL directamente */
}

/* 📌 CLAVE 3: Estilizar el icono al seleccionar */
.radio-card-input:checked + .radio-card-content .radio-card-checkmark i {
    opacity: 1; /* Hace visible el icono */
    transform: scale(1);
}

/* Estilo para el LABEL (la tarjeta) */
.radio-card-label:has(.radio-card-input:checked) {
    border: 2px solid var(--dark-success);
    background-color: #e6f2f0;
}