/* 
    Formulario de Socios - Custom Styles
    Premium Design System
*/

:root {
    --fs-primary: #004a99;
    /* Ajustar al color de marca de ACEDE */
    --fs-secondary: #6c757d;
    --fs-bg-light: #f8f9fa;
    --fs-border-radius: 0.5rem;
    --fs-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.fs-form-container {
    background: #ffffff;
    /**    padding: 2rem;
    max-width: 1000px; **/
    margin: 0 auto;
}

.separadorFormulario {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--fs-primary);
    border-bottom: 1px solid var(--fs-primary);
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

/* Floating Labels Customization */
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    color: var(--fs-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 74, 153, 0.25);
}

/* Rediseño de checkboxes y radios */
.form-check-input:checked {
    background-color: var(--fs-primary);
    border-color: var(--fs-primary);
}

.label-inscripcion,
.label-reducida {
    font-weight: 600;
}

.form-check {
    display: flex;
    align-items: flex-start;
    padding: 0;
    margin-bottom: 8px;
    margin-left: 1.25rem;
}

.form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.15rem;
    margin-right: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
    float: none;
    margin-left: -1em !important;
}

.form-check-label {
    line-height: 1.4;
    cursor: pointer;
}

#doctor {
    width: 1.35em;
    height: 1.35em;
    cursor: pointer;
}

#doctor~.form-check-label {
    padding-left: 0.5em;
    font-size: 1.1rem;
    cursor: pointer;
    vertical-align: middle;
}

/* Botón enviar */
.btnEnviarInscripcion {
    background-color: var(--fs-primary);
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btnEnviarInscripcion:hover {
    background-color: #cd914b;
    /**transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);**/
}

/* Ajustes para Bootstrap Select */
.bootstrap-select .dropdown-toggle {
    border-color: #ced4da !important;
}

.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
    border-color: var(--fs-primary) !important;
}

/* Integración de Banderas y Form Floating */
.img-telefono,
.img-pais {
    width: 25px;
    height: auto;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-floating>.bootstrap-select.form-control {
    height: calc(3.5rem + 2px) !important;
    padding: 0;
    border: none;
}

.form-floating>.bootstrap-select>.dropdown-toggle {
    height: 100% !important;
    padding-top: 1.3rem !important;
    /* Reducido de 1.625rem */
    padding-bottom: 0.5rem !important;
    background-color: transparent !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    display: flex;
    align-items: center;
}

.form-floating>.bootstrap-select>.dropdown-toggle:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.form-floating>.bootstrap-select~label {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
    z-index: 5;
    pointer-events: none;
}

.bootstrap-select .dropdown-menu {
    z-index: 9999 !important;
}

.bootstrap-select .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
}

/* Grupo de teléfono agrupado */
.fs-phone-group {
    display: flex;
    flex-wrap: nowrap;
}

.fs-phone-group .form-floating:first-child .bootstrap-select>.dropdown-toggle {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.fs-phone-group .form-floating:last-child .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none;
}

/* Ocultar nombre de país en el selector de extensiones (en el botón y en el menú) */
.telefono-extension .search-idioma {
    display: none !important;
}

/* Nube de Tags para Secciones */
.fs-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fs-tag {
    padding: 2px 6px;
    background: #f0f2f5;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    color: #495057;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.fs-tag:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.fs-tag.active {
    background: var(--fs-primary);
    border-color: var(--fs-primary);
    color: #ffffff;
}

/* Bootstrap 5 Validation Styles for Selectpicker */
.was-validated .bootstrap-select .dropdown-toggle:invalid+.dropdown-toggle,
.was-validated .bootstrap-select select:invalid+.dropdown-toggle {
    border-color: #dc3545 !important;
}

.was-validated .bootstrap-select select:valid+.dropdown-toggle {
    border-color: #198754 !important;
}

.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: #dc3545;
}

.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: #198754;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .fs-form-container {
        padding: 1rem;
    }

    .separadorFormulario {
        font-size: 1.1rem;
    }
}