/* ======================================== */
/* ===       CSS/VOLUNTARIADO.CSS       === */
/* ======================================== */

/* --- Padding superior (si navbar es fijo) --- */
body.page-voluntariado {
    /* padding-top: calc(70px + 1.5rem); */ /* Descomentar y ajustar si navbar es fijo */
    background-color: #f8f9fa;
}

/* --- Estilos Cabecera Voluntariado --- */
.page-header-image.header-voluntariado {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../imagenes/cabecera-voluntariado.jpg');
    background-size: cover;
    background-position: center center;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;    
    position: relative;
}
.page-header-image.header-voluntariado::before {
    /*content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(var(--minga-red-rgb, 251, 23, 0), 0.3); z-index: 1;*/
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1;
}
.header-voluntariado .header-content { position: relative; z-index: 2; }
.header-voluntariado .page-title { 
    font-size: 3rem; font-weight: 400; text-shadow: 1px 1px 4px rgba(0,0,0,0.7);

}
.header-voluntariado .page-subtitle { font-size: 1.2rem; font-weight: 300; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); max-width: 700px; margin: 0 auto; }

/* --- Franja Roja (Hereda estilos) --- */
/* .red-banner { ... } */

/* --- Contenido Principal --- */
#main-voluntariado-content > section:first-of-type {
    padding-top: 3rem; /* Espacio después de franja roja */
}

/* --- Estilos Secciones --- */
.section-voluntariado { padding: 4rem 0; }
.section-title-voluntariado { color: var(--minga-dark); font-weight: 700; margin-bottom: 1.5rem; }

/* --- Estilos Formulario Voluntariado --- */
#voluntariado-form-section .card { border: none; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.08) !important; }
#voluntariado-form-section .card-body { padding: 2rem 2.5rem; }

/* Grupos de campos */
#voluntariadoForm form, #voluntariadoForm fieldset {
    border: none;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}
#voluntariadoForm form legend.form-section-legend, #voluntariadoForm fieldset legend.form-section-legend {
    float: none; width: auto; padding: 0 0.75rem;
    font-size: 1.1rem; font-weight: 600; color: var(--minga-dark); margin-bottom: 1rem;
}

/* Floating Labels */
#voluntariadoForm .form-floating > label { font-size: 0.9rem; color: #6c757d; }
#voluntariadoForm .form-floating > textarea.form-control { min-height: 120px; }

/* Checkboxes y Radios */
#voluntariadoForm .form-check { margin-bottom: 0.6rem; padding-left: 1.75em; }
#voluntariadoForm .form-check-label { font-size: 0.9rem; color: #333; cursor: pointer; }
#voluntariadoForm .form-check-label.small { font-size: 0.85rem; }

/* Mensajes de Error para Grupos (Checkbox/Radio) */
.radio-feedback,
.invalid-feedback[data-field$="[]"] {
    display: none; /* Oculto por defecto */
    width: 100%; margin-top: .25rem; font-size: .875em; color: #dc3545;
    margin-left: 0.5rem; /* Indentación */
}
/* Mostrar feedback si el grupo es inválido */
#voluntariadoForm.was-validated .form-check-input:invalid ~ .radio-feedback,
#voluntariadoForm.was-validated .invalid-feedback[data-field$="[]"] {
    display: block;
}
#voluntariadoForm.was-validated .form-check-input:required:invalid ~ label { color: #dc3545; }
#voluntariadoForm.was-validated .form-check-input:required:invalid { border-color: #dc3545; }

/* Botón de envío */
#submitVoluntarioBtn { padding: 0.75rem 2rem; font-size: 1.05rem; font-weight: 500; background-color: var(--minga); border-color: var(--minga); }
#submitVoluntarioBtn:hover { background-color: var(--minga-dark); border-color: var(--minga-dark); }
#submitVoluntarioBtn .spinner-border-sm { vertical-align: -0.125em; }

/* Responsive */
@media (max-width: 767.98px) {
    #voluntariado-form-section .card-body { padding: 1.5rem; }
    #voluntariadoForm fieldset legend.form-section-legend { font-size: 1rem; }
    #voluntariadoForm .row.g-2 > [class*="col-"] { flex: 0 0 auto; width: 100%; } /* Apilar checkboxes */
}

/* ======================================== */
/* ===       CSS/VOLUNTARIADO.CSS       === */
/* ======================================== */

/* ... (Estilos anteriores: body, cabecera, franja roja, intro) ... */
body.page-voluntariado { background-color: #f8f9fa; }

.section-voluntariado { padding: 3rem 0; } /* Reducir padding si es mucho */
.section-title-voluntariado { color: var(--minga-dark); font-weight: 700; margin-bottom: 1.5rem; text-align: center; }


/* --- Estilos Formulario Voluntariado Detallado --- */
#voluntariado-form-section .card { border: none; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.08) !important; }
#voluntariado-form-section .card-body { padding: 2rem 2.5rem; }

#voluntariadoFormExacto fieldset {
    border: none; /* Sin borde por defecto */
    border-top: 1px solid #eee; /* Separador superior ligero */
    padding-top: 1.5rem;
    margin-top: 1rem;
}
#voluntariadoFormExacto legend.form-section-legend {
    float: none; width: auto; padding: 0 0.75rem;
    font-size: 1.1rem; /* Título de sección de formulario */
    font-weight: 600;
    color: var(--minga-dark);
    margin-bottom: 1rem;
}

/* Estilos Floating Labels (Bootstrap los maneja bien) */
#voluntariadoFormExacto .form-floating > label {
    font-size: 0.9rem; /* Tamaño del label flotante */
    color: #6c757d; /* Color gris label */
}
#voluntariadoFormExacto .form-floating > .form-control:focus ~ label,
#voluntariadoFormExacto .form-floating > .form-control:not(:placeholder-shown) ~ label {
    /* Estilos cuando label está arriba */
}
#voluntariadoFormExacto .form-floating > textarea.form-control {
     min-height: 120px; /* Altura mínima para textareas */
}

/* Estilos Checkboxes y Radios */
#voluntariadoFormExacto .form-check {
    margin-bottom: 0.6rem;
    padding-left: 1.75em; /* Alinear mejor con floating labels */
}
#voluntariadoFormExacto .form-check-label {
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
}
#voluntariadoFormExacto .form-check-label.small {
    font-size: 0.85rem;
}

/* Feedback para grupos de Checkbox/Radio */
#voluntariadoFormExacto .invalid-feedback[data-field$="[]"],
#voluntariadoFormExacto .invalid-feedback.radio-feedback {
    display: none; /* Oculto por defecto */
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: #dc3545;
    margin-left: 0.5rem; /* Indentar mensaje */
}
/* Mostrar feedback cuando CUALQUIER input del grupo sea inválido y se intentó validar */
#voluntariadoFormExacto.js-validated .form-check-input:invalid ~ .invalid-feedback[data-field$="[]"],
#voluntariadoFormExacto.js-validated .form-check-input:invalid ~ .radio-feedback {
    display: block;
}
#voluntariadoFormExacto.js-validated .form-check-input:invalid {
    border-color: #dc3545; /* Borde rojo para el checkbox/radio */
}
#voluntariadoFormExacto.js-validated .form-check-input:invalid ~ .form-check-label{
    color: #dc3545; /* Color rojo para el label */
}


/* Estilos Selects Flotantes (Bootstrap los maneja) */
#voluntariadoFormExacto .form-floating > .form-select {
    /* height: calc(3.5rem + 2px); */
}


/* Botón de envío */
#submitVoluntarioBtnExacto {
    padding: 0.8rem 2.2rem;
    font-size: 1.05rem;
    font-weight: 500;
    /* Usar color primario Minga si existe, si no, el de Bootstrap */
    background-color: var(--minga, #0d6efd);
    border-color: var(--minga, #0d6efd);
}
#submitVoluntarioBtnExacto:hover {
     background-color: var(--minga-dark, #0b5ed7);
     border-color: var(--minga-dark, #0a58ca);
}

/* Responsive Formulario */
@media (max-width: 767.98px) {
    #voluntariado-form-section .card-body { padding: 1.5rem; }
    #voluntariadoFormExacto legend.form-section-legend { font-size: 1rem; }
    /* Forzar una columna para checkboxes de habilidades en móvil */
    #voluntariadoFormExacto fieldset .row.g-2 > [class*="col-"] {
        flex: 0 0 auto;
        width: 100%;
    }
}