/* ----------------------------------------------------- */
/* 1. CONFIGURACIÓN GLOBAL Y ESTRUCTURA DEL FORMULARIO   */
/* ----------------------------------------------------- */

/* Contenedor principal para definir la fuente y el estilo general */
.socio-edit.front-end-edit {
    font-family: 'Open Sans', Arial, sans-serif; /* Fuente moderna y legible */
    background-color: #f8f9fa; /* Fondo sutilmente gris para destacar las tarjetas */
    padding: 20px 0;
}

/* Encabezado del formulario */
.socio-edit.front-end-edit h1 {
    color: #952d78; /* Púrpura principal */
    font-weight: 700;
    margin-bottom: 30px;
    border-bottom: 2px solid #2facde; /* Acento azul */
    padding-bottom: 10px;
}

/* Estilo para las tarjetas (Sections) */
.socio-edit .card {
    border: none;
    border-radius: 12px;
    margin-bottom: 25px;
/*    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Sombra suave para un look flotante */
    /* overflow: hidden; Asegura que el borde redondeado se aplique a todo */
}

/* ----------------------------------------------------- */
/* 2. ESTILOS DE ENCABEZADOS DE SECCIÓN (Card-Header)    */
/* ----------------------------------------------------- */

/* Aplicando el color púrpura a los encabezados (Card-Header) */
.socio-edit .card-header.bg-gradient-primary_1 {
    background: #952d78; /* Púrpura sólido para secciones principales */
    color: white;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 15px 20px;
}

/* Estilo especial para la sección de Donaciones/Consentimientos (si usas bg-gradient-primary_2) */
.socio-edit .card-header.bg-gradient-primary_2 {
    background: #2facde; /* Azul para resaltar secciones importantes (Donaciones/Consentimientos) */
    color: white;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 15px 20px;
}

/* ----------------------------------------------------- */
/* 3. ESTILOS DE CAMPOS DE ENTRADA (Inputs)              */
/* ----------------------------------------------------- */

/* Estilo general de los campos */
.socio-edit .form-control {
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Bordes redondeados modernos */
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: #ffffff;
}

/* Efecto al enfocar (focus) */
.socio-edit .form-control:focus {
    border-color: #2facde; /* Borde azul al enfocar */
    box-shadow: 0 0 0 4px rgba(47, 172, 222, 0.2); /* Sutil resplandor azul */
    outline: none;
}

/* Estilo para etiquetas/leyendas (Joomla lo maneja con .control-label) */
.socio-edit .control-label,
.socio-edit .form-label {
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 5px;
}

/* ----------------------------------------------------- */
/* 4. ESTILOS ESPECÍFICOS DE DONACIÓN/PAGO               */
/* ----------------------------------------------------- */

/* Contenedor de opciones de donación/pago (Aportación, Frecuencia, etc.) */
.container_data_controls .col-6 {
    padding: 10px; /* Separación interna */
}

/* Estilos para Radio/Checkbox List (si Joomla los renderiza como lista) */
/* Esto le da un aspecto de "botones" modernos a las opciones */
.socio-edit .radio, .socio-edit .checkbox {
    margin-bottom: 10px;
	padding: 5px;
}

/* ----------------------------------------------------- */
/* 5. ESTILOS DE BOTONES DE ACCIÓN                       */
/* ----------------------------------------------------- */

/* Estilo para todos los botones */
.socio-edit .btn {
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.1s;
}

/* Botón de Enviar/Guardar (Submit) */
.socio-edit .btn-success {
    background-color: #952d78; /* Púrpura principal */
    border-color: #952d78;
}

.socio-edit .btn-success:hover {
    background-color: #a7478d; /* Púrpura más claro */
    border-color: #a7478d;
    box-shadow: 0 4px 12px rgba(149, 45, 120, 0.3);
    transform: translateY(-1px); /* Efecto sutil de elevación */
}

/* Botón de Cancelar */
.socio-edit .btn-danger {
    background-color: #d70000; /* Rojo */
    border-color: #d70000;
}

.socio-edit .btn-danger:hover {
    background-color: #e51d1d; /* Rojo más claro */
    border-color: #e51d1d;
    box-shadow: 0 4px 12px rgba(215, 0, 0, 0.3);
}

/* ----------------------------------------------------- */
/* 6. ESTILOS DE CONSENTIMIENTOS                         */
/* ----------------------------------------------------- */

/* Estilos para el contenedor de checkboxes de términos */
.socio-edit .container_terminos > div {
    padding: 10px 0;
    border-bottom: 1px dashed #cccccc;
}
.socio-edit .container_terminos > div:last-child {
    border-bottom: none;
}

/* Ajuste de íconos (si usas Font Awesome) */
.socio-edit .btn .fas {
    margin-right: 8px;
}

/* ----------------------------------------------------- */
/* 7. MEDIA QUERIES PARA RESPONSIVIDAD                   */
/* ----------------------------------------------------- */

/* En pantallas pequeñas (e.g., teléfonos, ancho máximo de 768px),
   la mayoría de las columnas deben apilarse. */
@media (max-width: 768px) {

    /* Ajuste del contenedor principal en móviles */
    .socio-edit.front-end-edit {
        padding: 10px; /* Reducir el padding general */
    }

    /* Reducir el tamaño de las tarjetas en pantallas pequeñas */
    .socio-edit .card {
        margin-bottom: 20px;
    }

    /* Las columnas de Bootstrap (col-md-6, col-6) por defecto ya se apilan
       en pantallas xs, pero aseguramos que el padding se ajuste */
    .socio-edit .card-body .row > div {
        /* Aseguramos que cada campo use todo el ancho disponible */
        width: 100%;
        margin-bottom: 15px; /* Espaciado entre campos apilados */
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Ajuste para el botón de acción */
    .socio-edit .btn {
        width: 100%; /* El botón ocupa todo el ancho */
        margin-top: 10px;
    }

    /* Ajuste del contenedor de botones para que se vea limpio */
    div[style*="text-align: right"] {
        text-align: center !important; /* Centrar los botones en móvil */
        padding: 0 10px;
    }

    /* Forzar apilamiento de los botones de Guardar/Cancelar en móviles */
    div[style*="text-align: right"] .btn {
        margin-bottom: 10px;
    }

    /* Si usas la estructura de botones de donación, asegúrate de que se ajusten bien */
    .donation-options {
        flex-direction: column; /* Apilar opciones si es necesario */
        gap: 5px; /* Menos espacio entre ellas */
    }

}

/* Ajustes menores para tabletas (entre 768px y 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    /* Mantenemos el layout de dos columnas, pero reducimos un poco el padding */
    .socio-edit .card-body {
        padding: 15px;
    }
}
/* ----------------------------------------------------- */
/* 8. ESTILOS ESPECÍFICOS PARA EL DROPDOWN (Choices.js)  */
/* ----------------------------------------------------- */

/*
 * Prioridad y Visibilidad (z-index)
 * El valor 1050 es mayor que la mayoría de los elementos de Bootstrap
 * (como modales de bajo nivel) asegurando que el dropdown esté 'al frente'.
 */
.socio-edit .choices__list--dropdown {
    /* Aplicar un z-index alto SOLO cuando esté visible/expandido */
    /* La clase 'is-active' se añade cuando el dropdown se abre */
    z-index: 1050; 
    border-radius: 8px; /* Mantener los bordes modernos */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Sombra elegante */
    border: 1px solid #2facde; /* Borde sutil azul */
}

/* Estilo general de las opciones dentro del menú desplegable */
.socio-edit .choices__list--dropdown .choices__item--choice {
    padding: 10px 15px;
    font-size: 16px;
    color: #4a4a4a;
    transition: background-color 0.2s, color 0.2s;
}

/* Estilo para la opción destacada o activa (cuando el usuario navega con el teclado) */
.socio-edit .choices__list--dropdown .choices__item--choice.is-highlighted {
    background-color: #f0f8ff; /* Fondo muy claro (casi blanco) con un toque de azul */
    color: #2facde; /* Color de texto azul */
}

/* Estilo para la opción seleccionada */
.socio-edit .choices__list--dropdown .choices__item--choice.is-selected {
    background-color: #952d78; /* Púrpura principal */
    color: white;
    font-weight: 600;
}

/* Estilo para el campo de entrada (Input) */
.socio-edit .choices__input--cloned {
    /* Aseguramos que el input tenga el mismo estilo que los demás campos */
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: border-color 0.3s;
}

/* Estilo al enfocar el campo de entrada */
.socio-edit .choices.is-focused .choices__input--cloned {
    border-color: #2facde; /* Borde azul al enfocar */
    box-shadow: 0 0 0 4px rgba(47, 172, 222, 0.2);
    outline: none;
}
.choices__inner {
    background: linear-gradient(191deg, #2facde61, transparent);
}
button.choices__button_joomla {
    margin: 0 11% 0;
}

.container_terminos input {
    padding: 10px;
}
.uppercase_type_id{
	text-transform: uppercase;
}
/*title form SOCIO*/
div[role="tablist"] {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}