/* style.css */
:root {
    --magenta-gradient: linear-gradient(to right, #E533C3, #E8328B);
    --pink-soft: #ee62dd;
    /* Degradado largo para la barra de progreso */
    --progress-gradient: linear-gradient(90deg, #F48FB1 0%, #D81B60 30%, #ab279e 60%, #6e48aa 100%);
}

body {
    background-color: #f8f9fa;
    font-family: 'Poppins', sans-serif;
    color: #333;
}

.p-justify {
    text-align: justify;
}

.titleCard {
    background: var(--magenta-gradient);
    color: #fff;
    padding: 20px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(229, 51, 195, 0.3);
}

.tarjsection01 {
    border-radius: 80px;
    border: none;
    transition: all 0.3s ease;
}

.card-bodysection {
    border: none;
    box-shadow: inset 0 0 0 4px var(--pink-soft);
    border-radius: 60px;
}

.bg-magenta-gradient {
    background: linear-gradient(135deg, #a31d7d 0%, #d81b7a 100%);
}

.section-onlyT {
    background-color: #ab279e;
    color: #fff;
    font-weight: 600;
    font-size: 1.2rem;
}

.botonConta {
    background: var(--magenta-gradient);
    color: white;
    border-radius: 30px;
    transition: transform 0.2s ease;
}

.botonConta:hover {
    transform: scale(1.05);
    color: white;
}

.botonConta:disabled,
.botonConta[disabled] {
    background: #d0d0d0;
    color: #888;
    border: 1px solid #bbb;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- BARRA DE PROGRESO DINÁMICA --- */
.progress-dynamic-gradient {
    background-image: var(--progress-gradient);
    background-size: 100vw 100%;
    /* El degradado se estira al ancho de la pantalla */
    background-attachment: fixed;
    /* Mantiene el degradado fijo mientras la barra crece */
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Feedback de Llenado */
.form-control {
    border-radius: 15px;
    padding: 12px 20px;
    border: 2px solid #eee;
    transition: all 0.3s ease;
}

.form-control:not(:placeholder-shown) {
    background-color: #fff9fe !important;
    border-color: var(--pink-soft) !important;
}

.form-section {
    display: none;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s ease;
}

.form-section.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.alert-pink-light {
    background-color: #fff0fc;
    border-left: 5px solid #ab279e;
    color: #555;
}

.border-start-pink {
    border-left: 5px solid #ab279e;
}

/* 1. Color de fondo y borde cuando se SELECCIONA */
.form-check-input:checked {
    background-color: #D81B60 !important;
    /* Aquí pones tu Rosa Mexicano o Morado */
    border-color: #D81B60 !important;
}

/* 2. Color del "brillo" o anillo al hacer CLIC (Focus) */
.form-check-input:focus {
    border-color: #ee62dd;
    box-shadow: 0 0 0 0.25rem rgba(216, 27, 96, 0.25);
    /* Un resplandor suave en rosa */
}

/* 3. Asegurar que el punto (radio) o la palomita (checkbox) sean blancos */
.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* Preguntas 12 y 13: mantener seleccion multiple con apariencia visual de radio */
.form-check-input[name="e3_q12[]"],
.form-check-input[name="e3_q13[]"] {
    border-radius: 50% !important;
}

.form-check-input[name="e3_q12[]"]:checked,
.form-check-input[name="e3_q13[]"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.required-asterisk {
    color: #c1121f;
    font-weight: 700;
    margin-right: 0.2rem;
}