/* ==========================================================
1. TÍTULO PRINCIPAL 
========================================================== */

h1.page-header {
    grid-column: 1 / -1;
    position: relative;
    color: #a81414;
    font-size: 34px;
    font-weight: 800;
    border: none;
    margin: 0 0 25px 0 !important;
    display: inline-block;
}


/* ==========================================================
2. ANFECA 
========================================================== */

h2.webform-section-title,
.webform-section-title {
    color: #0f0f0f !important;
    font-weight: 700 !important;
}


/* ==========================================================
3. ESTRUCTURA BASE WEBFORM
========================================================== */

.webform-submission-form fieldset {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 25px !important;
    box-shadow: none !important;
}

/* Leyendas */
.form-composite > legend,
.webform-type-radios > legend {
    display: block !important;
    background: transparent !important;
    color: #a81414 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    border: none !important;
    float: none !important;
}

/* Etiquetas */
.webform-submission-form label {
    color: #a81414 !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

/* Separación */
.webform-submission-form .form-item {
    margin-bottom: 20px;
}


/* ==========================================================
4. CAMPOS DE TEXTO
========================================================== */

.webform-submission-form input:not([type="radio"]),
.webform-submission-form textarea {
    border-radius: 8px !important;
    border: 1px solid #787878 !important;
    padding: 12px 15px !important;
    background: #ffffff !important;
    color: #333333 !important;
}

.webform-submission-form input:focus,
.webform-submission-form select:focus,
.webform-submission-form textarea:focus {
    border-color: #cd0000 !important;
    box-shadow: 0 0 0 3px rgba(205,0,0,.15) !important;
    outline: none !important;
}


/* ==========================================================
5. SELECTS HOTEL/CARRERA & INPUT CONSTANCIAS
========================================================== */

.webform-submission-form select,
.js-webform-document-file input,
#edit-hotel-de-hospedaje,
#edit-carrera,
select[name*="carrera"] {
    height: 55px !important;
    min-height: 55px !important;
    line-height: 1.5 !important;
    padding: 10px 18px !important;
    font-size: 16px !important;
    border: 2px solid #ddd !important;
    border-radius: 12px !important;
    background: #fafafa !important;
    color: #570808 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
}

.webform-submission-form select:focus,
#edit-hotel-de-hospedaje:focus,
#edit-carrera:focus {
    border-color: #cd0000 !important;
    background: white !important;
    box-shadow: 0 0 0 4px rgba(205,0,0,.15) !important;
}

#edit-hotel-de-hospedaje + .select2,
.form-type-select,
.select-wrapper {
    width: 100%;
    min-height: 55px !important;
    overflow: visible !important;
}

/* Separación del botón "Eliminar" y el tamaño de la constancia subida */
.file-size {
	margin-right: 8px !important;
}


/* ==========================================================
6. RADIOS 
========================================================== */

.form-type-radio {
    display: inline-block !important;
    margin-right: 18px !important;
    margin-bottom: 5px !important;
}

.form-type-radio input[type="radio"] {
    position: static !important;
    opacity: 1 !important;
    margin-right: 6px !important;
    cursor: pointer !important;
}

.form-type-radio label {
    display: inline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: #333333 !important;
    font-weight: normal !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
}


/* ==========================================================
7. TARJETAS DE INTEGRANTES
========================================================== */

#edit-integrante-1,
#edit-segundo-integrante,
#edit-tercer-integrante,
#edit-cuarto-integrante {
    position: relative;
    
    overflow: visible !important;

    background:
        radial-gradient(circle at 10% 20%, rgba(205,0,0,.08) 0px, rgba(205,0,0,.08) 45px, transparent 46px),
        radial-gradient(circle at 90% 15%, rgba(87,8,8,.07) 0px, rgba(87,8,8,.07) 80px, transparent 81px),
        radial-gradient(circle at 80% 85%, rgba(205,0,0,.06) 0px, rgba(205,0,0,.06) 55px, transparent 56px),
        radial-gradient(circle at 20% 90%, rgba(87,8,8,.05) 0px, rgba(87,8,8,.05) 100px, transparent 101px),
        linear-gradient(135deg,#ffffff,#f3f7fb) !important;

    border: none !important;
    border-left: 6px solid #a81414 !important;
    border-radius: 16px !important;
    margin: 35px 0 !important;
    padding: 20px !important;

    box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
    transition: transform .3s ease, box-shadow .3s ease;
    animation: anfecaFade .4s;
}

/* Efecto hover */
#edit-integrante-1:hover,
#edit-segundo-integrante:hover,
#edit-tercer-integrante:hover,
#edit-cuarto-integrante:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.18) !important;
}

/* Encabezado del integrante */
#edit-integrante-1 .panel-heading,
#edit-segundo-integrante .panel-heading,
#edit-tercer-integrante .panel-heading,
#edit-cuarto-integrante .panel-heading {
    background: #a81414 !important;
    color: white !important;
    border: none !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 18px 25px !important;
}

/* Adornos decorativos circulares (Ajustados con pointer-events) */
#edit-integrante-1::before,
#edit-segundo-integrante::before,
#edit-tercer-integrante::before,
#edit-cuarto-integrante::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(205,0,0,.05);
    top: -120px;
    right: -100px;
    pointer-events: none; /* No interfiere con los clics */
}

#edit-integrante-1::after,
#edit-segundo-integrante::after,
#edit-tercer-integrante::after,
#edit-cuarto-integrante::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(87,8,8,.04);
    bottom: -150px;
    left: -120px;
    pointer-events: none; /* No interfiere con los clics */
}

/* Mantener contenido por encima de adornos */
#edit-integrante-1 > *,
#edit-segundo-integrante > *,
#edit-tercer-integrante > *,
#edit-cuarto-integrante > * {
    position: relative;
    z-index: 2;
}


/* ==========================================================
8. INTL TEL INPUT 
========================================================== */

.iti {
    width: 100% !important;
    display: block !important;
}

/* Campo teléfono */
#edit-telefono,
.webform-submission-form input[type="tel"],
.iti input[type="tel"],
.iti input[type="text"] {
    height: 55px !important;
    min-height: 55px !important;
    padding: 12px 15px 12px 52px !important;
    line-height: normal !important;
    font-size: 16px !important;
    border: 1px solid #787878 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    color: #333 !important;
}

.iti input[type="tel"]:focus {
    border-color: #cd0000 !important;
    box-shadow: 0 0 0 3px rgba(205,0,0,.15) !important;
    outline: none !important;
}

/* Botón bandera */
.iti__selected-flag {
    height: 55px !important;
    padding: 0 12px 0 15px !important;
    border-radius: 8px 0 0 8px !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
}

.iti__selected-flag:hover,
.iti__selected-flag:focus {
    background-color: rgba(0,0,0,.03) !important;
}

/* Lista países (Flotante) */
.iti__country-list {
    position: absolute !important;
    z-index: 999999 !important;
    max-height: 250px !important;
    width: 300px !important;
    background: white !important;
    border: 1px solid #787878 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.3) !important;
}

.iti__country {
    padding: 8px 10px !important;
}

.iti__country.iti__highlight,
.iti__country:hover {
    background-color: rgba(205,0,0,.08) !important;
    color: #570808 !important;
}

.iti__dial-code {
    color: #570808 !important;
    font-weight: 600 !important;
}


/* ==========================================================
9. BOTÓN SUBMIT
========================================================== */

#edit-submit {
    background: #cd0000 !important;
    color: white !important;
    border: none !important;
    height: 55px !important;
    padding: 0 45px !important;
    border-radius: 14px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: .3s ease;
}

#edit-submit:hover {
    background: #a81414 !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(205,0,0,.45) !important;
}


/* ==========================================================
10. ANIMACIONES
========================================================== */

@keyframes anfecaFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}