/* 
   ESTILOS PRINCIPALES DEL TEMPLATE DE FORMULARIO
   Controla la estructura de la página, el banner y los componentes del área de contenido.
*/

/* --- ESTRUCTURA BASE --- */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f9fa; 
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px; 
    font-weight: 300;
    color: #333;
}

.main-container {
    flex: 1 0 auto; /* El contenido crece para empujar al footer */
    max-width: 900px; 
    margin: 40px auto; 
    padding: 0 20px; 
    width: 100%;
}

/* Forzamos a cualquier contenedor interno (como el que crea Magnolia automáticamente) a usar el ancho máximo */
.main-container div[class*="container"],
.main-container .container,
.main-container .mgnl-form {
    max-width: 100%;
    width: 100%;
}

/* --- COMPONENTE: BANNER / HERO --- */
[data-cms-area="bannerArea"] { display: block; min-height: 50px; }
.hero-section {
    position: relative;
    height: 190px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: #6a3d8a;
}
.hero-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(0, 0, 0, 0.05); 
}
.hero-content { position: relative; z-index: 2; text-align: center; }
.hero-title { 
    font-size: 36px; 
    font-weight: 200; /* Texto más fino */
    letter-spacing: 2px; 
    border-top: 2px solid #f8f9fa; /* Borde del mismo color que el texto */
    border-bottom: 2px solid #f8f9fa; 
    padding: 10px 40px; 
    text-transform: uppercase; 
    color: #f8f9fa; /* Color gris claro del fondo de la página */
}

/* --- COMPONENTE: LOGO DE FORMULARIO (EVENTO) --- */
.logo-form-container {
    width: 100%;
    max-width: 900px; 
    margin: 10px auto; 
    padding: 0 20px;
    text-align: center;
    box-sizing: border-box;
}

.logo-form-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.logo-form-image {
    display: block;
    width: 100%; 
    max-width: 100%; 
    height: auto; 
    object-fit: contain; 
}

/* --- REFINAMIENTO FORMULARIO MAGNOLIA --- */

.page-title { font-size: 24px; font-weight: 300; color: #6a3d8a; margin-bottom: 30px; text-align: center; }

/* CAJA MAESTRA (BLANCA) */
.riu-master-wrapper {
    background-color: #ffffff;
    padding: 20px 25px 40px 25px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 8px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* FORM / REJILLA MAESTRA */
.riu-master-wrapper .mgnl-form,
.riu-master-wrapper form,
.riu-master-wrapper .riu-main-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 15px; 
    padding: 0; 
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}

/* FILAS DEL FORMULARIO ESTÁNDAR (Excluimos el checkbox) */
.riu-master-wrapper .form-row:not(.riu-form-checkbox),
.riu-master-wrapper .mgnl-form-row:not(.riu-form-checkbox) {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* FIELDSET DE SECCIÓN ESTÁNDAR (Excluimos el checkbox) */
.riu-master-wrapper fieldset:not(.riu-form-checkbox fieldset),
.riu-master-wrapper .mgnl-form-fieldset:not(.riu-form-checkbox fieldset) {
    grid-column: span 2; 
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 8px 15px; 
    padding: 20px;
    margin: 5px 0 20px 0;
    width: 100%;
    box-sizing: border-box;
    border: none; 
}

/* RESET PARA FIELDSETS INTERNOS ESTÁNDAR (Excluimos el checkbox) */
.riu-master-wrapper .form-row:not(.riu-form-checkbox) fieldset,
.riu-master-wrapper .mgnl-form-row:not(.riu-form-checkbox) fieldset {
    grid-column: auto;
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    border: none;
    background: transparent;
}

/* TÍTULO DEL FIELDSET (Sección Grande) */
.riu-master-wrapper > fieldset legend,
.riu-master-wrapper > .mgnl-form-fieldset legend,
.riu-master-wrapper .mgnl-form-fieldset-legend {
    grid-column: 1 / -1;
    width: 100%;
    font-size: 18px;
    font-weight: 300;
    color: #6a3d8a;
    padding: 0 0 15px 0;
    border-bottom: 2px solid #eee;
    margin-bottom: 15px;
    display: block;
    text-align: center;
}

/* FILAS QUE ACTÚAN COMO TÍTULOS O SEPARADORES (Ocupan todo el ancho y se centran) */
.riu-master-wrapper .form-row.riu-title,
.riu-master-wrapper .mgnl-form-row.riu-title,
.riu-master-wrapper fieldset > h2 {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    display: block;
}



/* ETIQUETAS (Labels Principales y Títulos de Campos de Selección) */
.riu-master-wrapper label, 
.riu-master-wrapper .mgnl-form-label,
.riu-master-wrapper .riu-form-select legend,
.riu-master-wrapper .riu-form-checkbox legend {
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: 500;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 4px 0;
    min-height: 18px;
    /* Reset de estilos de legend de sección si aplica */
    border-bottom: none;
    padding: 0;
    align-content: flex-end;
}

/* Etiquetas internas de las opciones (Checkbox/Radio) */
.riu-master-wrapper .riu-form-checkbox fieldset div label,
.riu-master-wrapper .riu-form-checkbox input[type="checkbox"] + label,
.riu-master-wrapper .riu-form-checkbox input[type="radio"] + label {
    display: inline-block;
    width: auto;
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    margin: 0;
    cursor: pointer;
    line-height: 1.4;
}

/* Contenedor individual de Checkbox/Radio para alineación perfecta */
.riu-master-wrapper .form-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    margin-top: 12px;
    width: 100%;
}

.riu-master-wrapper .form-item input[type="checkbox"],
.riu-master-wrapper .form-item input[type="radio"] {
    margin-top: 2px; 
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* INPUTS, SELECTS Y TEXTAREAS (Solo tipos de texto y selectores) */
.riu-master-wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), 
.riu-master-wrapper select, 
.riu-master-wrapper textarea {
    display: block;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    line-height: 42px; 
    padding: 0 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px; 
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300; 
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-row:has(input[type="checkbox"]) .form-item label {
    font-family: "Raleway", sans-serif;
    font-size: 12px;
    font-weight: 300;
    text-transform: none;
    letter-spacing: normal;
}


/* ============================================================
   SECCIÓN A: COMPONENTES CON FIELDSET (SELECCIÓN)
   ============================================================ */

/* Target: SELECT - Detectamos si contiene un tag select */
.riu-master-wrapper .form-row:has(select),
.riu-master-wrapper .mgnl-form-row:has(select) {
    width: 100%;
    margin-bottom: 0;
    padding: 5px 0; /* Igualado a los inputs normales */
}

/* Target: CHECKBOX / RADIO  - Detectamos si contiene inputs de seleccion */
.riu-master-wrapper .form-row:has(input[type="checkbox"]),
.riu-master-wrapper .mgnl-form-row:has(input[type="checkbox"]),
.riu-master-wrapper .form-row:has(input[type="radio"]),
.riu-master-wrapper .mgnl-form-row:has(input[type="radio"]),
.riu-master-wrapper .riu-form-checkbox,
.riu-master-wrapper .riu-form-radio {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 30px;
    padding: 10px 0;
    text-align: left;
}

/* Internos del componente de selección (Afecta a ambos) */
.riu-master-wrapper .form-row:has(fieldset) fieldset {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

/* ============================================================
   SECCIÓN B: COMPONENTES SIN FIELDSET (INPUTS NORMALES )
   ============================================================ */

/* Target: Cualquier fila que NO TENGA un fieldset */
.riu-master-wrapper .form-row:not(:has(fieldset)),
.riu-master-wrapper .mgnl-form-row:not(:has(fieldset)) {
    margin-bottom: 0;
    padding: 5px 0;
}

/* Enlaces en labels/legends (Nuevos) */
.riu-form-link {
    display: inline-block;
    text-transform: none;
    letter-spacing: normal;
    font-size: 12px;
    font-weight: 600;
    color: #6a3d8a;
    text-decoration: underline;
    margin-left: 8px;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.2s;
}

.riu-form-link:hover {
}

/* Enlaces inyectados manualmente en labels/legends */
.riu-master-wrapper label a,
.riu-master-wrapper legend a {
    color: #6a3d8a;
    text-decoration: underline;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    display: inline;
}

/* Ajuste específico para SELECT (Flecha personalizada) */
.riu-master-wrapper select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
    vertical-align: middle;
    width: 100%;
}

/* Reset para contenedores de Select (Vertical) */
.riu-master-wrapper .riu-form-select {
    width: 100%;
    display: block;
    height: auto;
}

.riu-master-wrapper .riu-form-select fieldset {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
}

/* ESTADO FOCUS (Borde Morado Corporativo - Aplicado a todos los campos de caja) */
.riu-master-wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus, 
.riu-master-wrapper select:focus, 
.riu-master-wrapper textarea:focus {
    outline: none;
    border-color: #6a3d8a;
    box-shadow: 0 0 0 2px rgba(106, 61, 138, 0.1);
    background-color: #fff;
}

/* Foco específico para Checkbox/Radio (Solo un sutil cambio de color en el borde o sombra) */
.riu-master-wrapper input[type="checkbox"]:focus,
.riu-master-wrapper input[type="radio"]:focus {
    
    outline-offset: 1px;
}

/* BOTÓN SUBMIT (ZONA DE ACCIONES) */
.riu-master-wrapper .form-actions,
.riu-master-wrapper .form-submit,
.riu-master-wrapper .mgnl-form-submit,
.riu-master-wrapper .btn-container,
.riu-master-wrapper div:has(> button),
.riu-master-wrapper div:has(> input[type="submit"]) {
    grid-column: 1 / -1; /* Asegura que ocupe todo el ancho inferior */
    text-align: right; 
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 40px; /* Espacio extra para separarlo de los campos */
    padding: 30px 0 10px 0; /* Padding para dar aire */
    border-top: 1px solid #eee; /* Línea divisoria sutil */
    width: 100%;
    box-sizing: border-box;
}

.riu-master-wrapper button[type="submit"],
.riu-master-wrapper input[type="submit"] {
    background-color: #6a3d8a;
    color: #fff;
    padding: 0 60px; 
    height: 48px; 
    line-height: 48px;
    font-size: 15px; /* Texto un poco más grande */
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(106, 61, 138, 0.3);
    transition: all 0.3s ease;
}

.riu-master-wrapper button[type="submit"]:hover,
.riu-master-wrapper input[type="submit"]:hover {
    background-color: #532d6d;
    box-shadow: 0 6px 15px rgba(106, 61, 138, 0.4);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
    .riu-master-wrapper form, 
    .riu-master-wrapper fieldset { 
        grid-template-columns: 1fr; 
    }
    .riu-master-wrapper .form-actions { text-align: center; }
}

/* --- MENSAJE DE ÉXITO (SUCCESS MESSAGE) --- */

/* Contenedor principal del resultado del envío */
.riu-master-wrapper .form-step-result,
.riu-master-wrapper .mgnl-form-success {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    animation: fadeInSuccess 0.6s ease-out;
}

/* Icono visual de éxito (opcional, estilo Check) */
.riu-master-wrapper .form-step-result::before {
    content: '✓';
    display: block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    background-color: #f1f8f1;
    color: #4caf50;
    font-size: 40px;
    border-radius: 50%;
    margin: 0 auto 30px auto;
    border: 2px solid #e8f5e9;
}

/* Estilos para el SUCCESS TITLE (h3) */
.riu-master-wrapper .form-step-result h3,
.riu-master-wrapper .mgnl-form-success h3 {
    font-size: 28px;
    font-weight: 300;
    color: #6a3d8a; 
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Estilos para el SUCCESS MESSAGE (p) */
.riu-master-wrapper .form-step-result p,
.riu-master-wrapper .mgnl-form-success p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

/* Animación de entrada */
@keyframes fadeInSuccess {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- VALIDACIÓN Y ERRORES (MIGRADO DESDE TEMPLATE) --- */

/* 1. Limpieza Total de Errores Nativos de Magnolia */
#formErrorsDisplay, .formErrorsDisplay, .mgnlFormErrorSummary, 
.mgnlFormError, .mgnlFormFieldError, .form-errors, 
[class*="error-summary"], [class*="mgnlForm"] .error { 
    display: none; 
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Ocultar textos inyectados por Magnolia en labels */
label span[class*="error"], label .mgnlFormFieldError, label strong, label .error { 
    display: none; 
}

/* 2. Estilos para Campos Informativos / Readonly */
.riu-readonly-field {
    background-color: #f4f4f4;
    cursor: not-allowed;
    border: 1px solid #ddd;
}

/* 3. Estilos para Mensajes de Error Modernos */
.riu-error-container {
    position: relative;
    margin-bottom: 1.5rem;
}

.riu-error-message {
    color: #d93025;
    font-size: 0.85rem;
    margin-top: 4px;
    display: none;
    font-weight: 500;
    text-transform: none; /* Evitar mayúsculas heredadas de labels */
    letter-spacing: normal;
    width: 100%; /* Asegura que ocupe todo el ancho inferior */
    order: 999; /* Empuja al final en contenedores flex */
}

/* --- REGLAS DE VISIBILIDAD DE ERROR --- */

/* Caso A: Error es hermano directo (Inputs normales) */
.is-invalid + .riu-error-message {
    display: block;
}

/* Caso B: Error está al final de la fila (Select/Checkbox/Radio) */
.mgnl-form-row:has(.is-invalid) .riu-error-message,
.form-row:has(.is-invalid) .riu-error-message {
    display: block;
}

/* Forzar que el mensaje de error en filas de formulario aparezca al final */
.riu-master-wrapper .form-row {
    display: flex;
    flex-direction: column;
}

/* --- HONEYPOT (SEGURIDAD ANTI-SPAM) --- */
/* Forzamos la desaparición total del contenedor mgnlhp */
#mgnlhp, 
#mgnlhp *,
div[id="mgnlhp"],
.mgnlhp,
.form-row:has(input[name="email_confirm"]),
.mgnl-form-row:has(input[name="email_confirm"]) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    overflow: hidden !important;
    pointer-events: none !important;
}