/*
 * ==========================================================
 * INSTITUTE — FORM FIELDS V1
 *
 * Sistema canónico compartido por:
 * - Web
 * - Panel
 * - Admin
 *
 * El fondo del campo permanece estable en todos sus estados.
 * La interacción se expresa mediante borde / halo de accent.
 * ==========================================================
 */


/* ==========================================================
 * CONTROLES NATIVOS / BOOTSTRAP
 * ========================================================== */

.form-control,
.custom-select,
.custom-file-label,
.input-group-text,
.bootstrap-tagsinput,
.institute-drawer-opinion__textarea {
    background-color: var(--theme-field-bg, #fffaf0) !important;
    color: var(--theme-field-text, #171717) !important;
    border-color: var(--theme-field-border, #d8d0c3) !important;

    color-scheme: light;
}


/* Texto auxiliar / placeholder */

.form-control::placeholder,
.institute-drawer-opinion__textarea::placeholder {
    color: var(--theme-field-placeholder, #6f685f) !important;
    opacity: 1 !important;
}

.form-control::-moz-placeholder,
.institute-drawer-opinion__textarea::-moz-placeholder {
    color: var(--theme-field-placeholder, #6f685f) !important;
    opacity: 1 !important;
}


/* Hover: nunca modifica el fondo */

.form-control:hover,
.custom-select:hover,
.custom-file-label:hover,
.institute-drawer-opinion__textarea:hover {
    background-color: var(--theme-field-bg, #fffaf0) !important;

    border-color: color-mix(
        in srgb,
        var(--theme-field-border, #d8d0c3) 70%,
        var(--theme-field-text, #171717)
    ) !important;
}


/* Focus: fondo crema invariable */

.form-control:focus,
.custom-select:focus,
.institute-drawer-opinion__textarea:focus {
    background-color: var(--theme-field-bg, #fffaf0) !important;
    color: var(--theme-field-text, #171717) !important;

    border-color: var(--theme-accent, #b20000) !important;

    outline: 0 !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--theme-accent, #b20000) 16%,
            transparent
        ) !important;
}


/* Disabled / readonly conservan la misma familia cromática */

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: var(--theme-field-bg, #fffaf0) !important;
    color: var(--theme-field-text, #171717) !important;
    border-color: var(--theme-field-border, #d8d0c3) !important;
}


/* Select nativo */

select.form-control,
select.custom-select,
select.form-control:focus,
select.custom-select:focus {
    background-color: var(--theme-field-bg, #fffaf0) !important;
    color: var(--theme-field-text, #171717) !important;
}

select.form-control option,
select.custom-select option,
select.form-control optgroup,
select.custom-select optgroup {
    background-color: var(--theme-field-bg, #fffaf0);
    color: var(--theme-field-text, #171717);
}


/* ==========================================================
 * AUTOFILL — CHROMIUM / EDGE / SAFARI
 * Evita que el navegador reemplace el crema.
 * ========================================================== */

input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
textarea.form-control:-webkit-autofill,
textarea.form-control:-webkit-autofill:hover,
textarea.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--theme-field-text, #171717) !important;

    caret-color:
        var(--theme-field-text, #171717);

    -webkit-box-shadow:
        0 0 0 1000px
        var(--theme-field-bg, #fffaf0)
        inset !important;

    transition:
        background-color 9999s ease-out 0s;
}


/* ==========================================================
 * INPUT GROUPS
 * ========================================================== */

.input-group .form-control,
.input-group .input-group-text,
.input-group .custom-select {
    background-color: var(--theme-field-bg, #fffaf0) !important;
    color: var(--theme-field-text, #171717) !important;
    border-color: var(--theme-field-border, #d8d0c3) !important;
}


/* ==========================================================
 * SELECT2 — CAMPO CERRADO
 * ========================================================== */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    background-color: var(--theme-field-bg, #fffaf0) !important;
    color: var(--theme-field-text, #171717) !important;
    border-color: var(--theme-field-border, #d8d0c3) !important;
}

.select2-container--default
.select2-selection--single
.select2-selection__rendered,
.select2-container
.select2-selection--single
.select2-selection__rendered {
    color: var(--theme-field-text, #171717) !important;
}

.select2-container--default
.select2-selection--single
.select2-selection__placeholder,
.select2-container
.select2-selection--single
.select2-selection__placeholder {
    color: var(--theme-field-placeholder, #6f685f) !important;
}


/* Select2 abierto/focus: fondo no cambia */

.select2-container--default.select2-container--focus
.select2-selection--single,
.select2-container--default.select2-container--focus
.select2-selection--multiple,
.select2-container--default.select2-container--open
.select2-selection--single,
.select2-container--default.select2-container--open
.select2-selection--multiple {
    background-color: var(--theme-field-bg, #fffaf0) !important;
    border-color: var(--theme-accent, #b20000) !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--theme-accent, #b20000) 16%,
            transparent
        ) !important;
}


/* Flecha Select2 */

.select2-container--default
.select2-selection--single
.select2-selection__arrow b {
    border-color:
        var(--theme-field-placeholder, #6f685f)
        transparent
        transparent
        transparent !important;
}

.select2-container--default.select2-container--open
.select2-selection--single
.select2-selection__arrow b {
    border-color:
        transparent
        transparent
        var(--theme-field-placeholder, #6f685f)
        transparent !important;
}


/* ==========================================================
 * SELECT2 — DROPDOWN
 * ========================================================== */

.select2-dropdown {
    background-color: var(--theme-field-bg, #fffaf0) !important;
    color: var(--theme-field-text, #171717) !important;
    border-color: var(--theme-field-border, #d8d0c3) !important;
}

.select2-search--dropdown .select2-search__field,
.select2-container--default
.select2-search--dropdown
.select2-search__field {
    background-color: var(--theme-field-bg, #fffaf0) !important;
    color: var(--theme-field-text, #171717) !important;
    border-color: var(--theme-field-border, #d8d0c3) !important;
}

.select2-results__option {
    background-color: var(--theme-field-bg, #fffaf0);
    color: var(--theme-field-text, #171717);
}

.select2-container--default
.select2-results__option--highlighted[aria-selected] {
    background:
        color-mix(
            in srgb,
            var(--theme-accent, #b20000) 14%,
            var(--theme-field-bg, #fffaf0)
        ) !important;

    color: var(--theme-field-text, #171717) !important;
}

.select2-container--default
.select2-results__option[aria-selected="true"] {
    background:
        color-mix(
            in srgb,
            var(--theme-accent, #b20000) 9%,
            var(--theme-field-bg, #fffaf0)
        ) !important;

    color: var(--theme-field-text, #171717) !important;
}


/* Multiple: selección/chip interno */

.select2-container--default
.select2-selection--multiple
.select2-selection__choice {
    background:
        color-mix(
            in srgb,
            var(--theme-accent, #b20000) 9%,
            var(--theme-field-bg, #fffaf0)
        ) !important;

    color: var(--theme-field-text, #171717) !important;
    border-color: var(--theme-field-border, #d8d0c3) !important;
}


/* ==========================================================
 * SWEETALERT
 * ========================================================== */

.swal2-container .swal2-input,
.swal2-container .swal2-textarea,
.swal2-container .swal2-select,
.swal2-container .swal2-popup .form-control {
    background-color: var(--theme-field-bg, #fffaf0) !important;
    color: var(--theme-field-text, #171717) !important;
    border-color: var(--theme-field-border, #d8d0c3) !important;
}

.swal2-container .swal2-input::placeholder,
.swal2-container .swal2-textarea::placeholder,
.swal2-container .swal2-popup .form-control::placeholder {
    color: var(--theme-field-placeholder, #6f685f) !important;
    opacity: 1 !important;
}

.swal2-container .swal2-input:focus,
.swal2-container .swal2-textarea:focus,
.swal2-container .swal2-select:focus,
.swal2-container .swal2-popup .form-control:focus {
    background-color: var(--theme-field-bg, #fffaf0) !important;
    color: var(--theme-field-text, #171717) !important;
    border-color: var(--theme-accent, #b20000) !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--theme-accent, #b20000) 16%,
            transparent
        ) !important;
}


/* ==========================================================
 * WEB — BUSCADORES PÚBLICOS
 *
 * En estos componentes el wrapper es visualmente el campo.
 * Conservamos el input interno transparente para no duplicar
 * superficies, pero el resultado visible sigue siendo crema.
 * ========================================================== */

.search-top-banner .top-search-categories-form .search-input,
.search-top-banner .top-search-form .search-input,
.no-result .search-input,
.forum-hero-section .search-input {
    background: var(--theme-field-bg, #fffaf0) !important;
    border-color: var(--theme-field-border, #d8d0c3) !important;
}

.search-top-banner .top-search-categories-form .search-input .form-control,
.search-top-banner .top-search-form .search-input .form-control,
.no-result .search-input .form-control,
.forum-hero-section .search-input .form-control {
    background: transparent !important;
    color: var(--theme-field-text, #171717) !important;
}

.search-top-banner
.top-search-categories-form
.search-input
.form-control::placeholder,
.search-top-banner
.top-search-form
.search-input
.form-control::placeholder,
.no-result
.search-input
.form-control::placeholder,
.forum-hero-section
.search-input
.form-control::placeholder {
    color: var(--theme-field-placeholder, #6f685f) !important;
}

.search-top-banner .top-search-categories-form .search-input:focus-within,
.search-top-banner .top-search-form .search-input:focus-within,
.no-result .search-input:focus-within,
.forum-hero-section .search-input:focus-within {
    border-color: var(--theme-accent, #b20000) !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--theme-accent, #b20000) 16%,
            transparent
        );
}


/* ==========================================================
 * ADMIN — FILTROS LEGACY DE ALTA ESPECIFICIDAD
 * Neutraliza los hardcodes oscuros actuales.
 * ========================================================== */

body.institute-admin
.institute-admin-filter-body
.form-control,
body.institute-admin
.institute-admin-filter-body
.custom-select,
body.institute-admin
.institute-admin-filter-body
.select2-selection--single,
body.institute-admin
.institute-admin-filter-body
.select2-selection--multiple {
    background: var(--theme-field-bg, #fffaf0) !important;
    color: var(--theme-field-text, #171717) !important;
    border-color: var(--theme-field-border, #d8d0c3) !important;
    color-scheme: light !important;
}

body.institute-admin
.institute-admin-filter-body
.form-control::placeholder {
    color: var(--theme-field-placeholder, #6f685f) !important;
}

body.institute-admin
.institute-admin-filter-body
.form-control:hover {
    background: var(--theme-field-bg, #fffaf0) !important;
}

body.institute-admin
.institute-admin-filter-body
.form-control:focus {
    background: var(--theme-field-bg, #fffaf0) !important;
    color: var(--theme-field-text, #171717) !important;
    border-color: var(--theme-accent, #b20000) !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--theme-accent, #b20000) 16%,
            transparent
        ) !important;

    color-scheme: light !important;
}