/*
 * Contraste global de campos interactivos.
 * Se carga después de Bootstrap, Bootstrap Select y Select2 para que todos
 * los controles usen el mismo color de texto en hover, foco y apertura.
 */
:root {
    --regal-field-color: #27436e;
    --regal-field-active-background: #27436e;
    --regal-field-active-color: #fff;
    --regal-field-disabled-background: #e9ecef;
    --regal-field-disabled-color: #5f6b7a;
}

input.form-control,
select.form-control,
select.form-select,
textarea.form-control,
.custom-select,
.bootstrap-select > .dropdown-toggle,
.select2-container .select2-selection {
    color: var(--regal-field-color) !important;
    -webkit-text-fill-color: currentColor;
}

/* Campos editables: el fondo oscuro siempre lleva texto y cursor blancos. */
input.form-control:not(:disabled):not([readonly]):hover,
input.form-control:not(:disabled):not([readonly]):focus,
select.form-control:not(:disabled):hover,
select.form-control:not(:disabled):focus,
select.form-select:not(:disabled):hover,
select.form-select:not(:disabled):focus,
textarea.form-control:not(:disabled):not([readonly]):hover,
textarea.form-control:not(:disabled):not([readonly]):focus,
.custom-select:not(:disabled):hover,
.custom-select:not(:disabled):focus,
.bootstrap-select:not(.disabled) > .dropdown-toggle:hover,
.bootstrap-select:not(.disabled) > .dropdown-toggle:focus,
.bootstrap-select:not(.disabled) > .dropdown-toggle:active,
.bootstrap-select.show > .dropdown-toggle,
.bootstrap-select.open > .dropdown-toggle,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
    color: var(--regal-field-active-color) !important;
    background-color: var(--regal-field-active-background) !important;
    -webkit-text-fill-color: var(--regal-field-active-color) !important;
    caret-color: var(--regal-field-active-color);
}

/* Bootstrap Select y Select2 pintan el valor visible en elementos internos. */
.bootstrap-select > .dropdown-toggle .filter-option,
.bootstrap-select > .dropdown-toggle .filter-option-inner,
.bootstrap-select > .dropdown-toggle .filter-option-inner-inner,
.select2-container .select2-selection__rendered,
.select2-container .select2-selection__placeholder {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

.bootstrap-select:not(.disabled) > .dropdown-toggle:hover .filter-option,
.bootstrap-select:not(.disabled) > .dropdown-toggle:focus .filter-option,
.bootstrap-select:not(.disabled) > .dropdown-toggle:active .filter-option,
.bootstrap-select.show > .dropdown-toggle .filter-option,
.bootstrap-select.open > .dropdown-toggle .filter-option,
.select2-container--focus .select2-selection__rendered,
.select2-container--open .select2-selection__rendered,
.select2-container--focus .select2-selection__placeholder,
.select2-container--open .select2-selection__placeholder {
    color: var(--regal-field-active-color) !important;
    -webkit-text-fill-color: var(--regal-field-active-color) !important;
}

/* El placeholder también debe conservar contraste sobre el fondo activo. */
input.form-control:not(:disabled):not([readonly]):hover::placeholder,
input.form-control:not(:disabled):not([readonly]):focus::placeholder,
textarea.form-control:not(:disabled):not([readonly]):hover::placeholder,
textarea.form-control:not(:disabled):not([readonly]):focus::placeholder,
.bootstrap-select .bs-searchbox .form-control:hover::placeholder,
.bootstrap-select .bs-searchbox .form-control:focus::placeholder,
.select2-container--open .select2-search__field:hover::placeholder,
.select2-container--open .select2-search__field:focus::placeholder {
    color: rgba(255, 255, 255, .78) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .78) !important;
    opacity: 1;
}

/* Las opciones nativas mantienen texto oscuro sobre su menú claro. */
select.form-control option,
select.form-select option,
.custom-select option {
    color: var(--regal-field-color) !important;
    background-color: #fff !important;
    -webkit-text-fill-color: var(--regal-field-color) !important;
}

/* Opciones de los desplegables personalizados. Incluye menús movidos al body. */
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus,
.bootstrap-select .dropdown-menu .dropdown-item:active,
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu li.selected > .dropdown-item,
.bs-container .dropdown-menu .dropdown-item:hover,
.bs-container .dropdown-menu .dropdown-item:focus,
.bs-container .dropdown-menu .dropdown-item:active,
.bs-container .dropdown-menu .dropdown-item.active,
.bs-container .dropdown-menu li.selected > .dropdown-item,
.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option--highlighted.select2-results__option--selectable {
    color: var(--regal-field-active-color) !important;
    background-color: var(--regal-field-active-background) !important;
    -webkit-text-fill-color: var(--regal-field-active-color) !important;
}

.bootstrap-select .dropdown-menu .dropdown-item:hover .text,
.bootstrap-select .dropdown-menu .dropdown-item:focus .text,
.bootstrap-select .dropdown-menu .dropdown-item:active .text,
.bootstrap-select .dropdown-menu .dropdown-item.active .text,
.bootstrap-select .dropdown-menu li.selected > .dropdown-item .text,
.bs-container .dropdown-menu .dropdown-item:hover .text,
.bs-container .dropdown-menu .dropdown-item:focus .text,
.bs-container .dropdown-menu .dropdown-item:active .text,
.bs-container .dropdown-menu .dropdown-item.active .text,
.bs-container .dropdown-menu li.selected > .dropdown-item .text {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Chrome puede imponer texto negro en campos autocompletados. */
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--regal-field-active-background) inset !important;
    -webkit-text-fill-color: var(--regal-field-active-color) !important;
    caret-color: var(--regal-field-active-color);
}

/* Los campos no editables deben seguir pareciendo inactivos y ser legibles. */
input.form-control:disabled,
input.form-control[readonly],
select.form-control:disabled,
select.form-select:disabled,
textarea.form-control:disabled,
textarea.form-control[readonly],
.custom-select:disabled,
.bootstrap-select.disabled > .dropdown-toggle,
.select2-container--disabled .select2-selection {
    color: var(--regal-field-disabled-color) !important;
    background-color: var(--regal-field-disabled-background) !important;
    -webkit-text-fill-color: var(--regal-field-disabled-color) !important;
    cursor: not-allowed;
    opacity: 1;
}

.bootstrap-select.disabled > .dropdown-toggle .filter-option,
.select2-container--disabled .select2-selection__rendered {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Geometría compartida: el contenedor del plugin no es otro campo.
   Evita doble borde y que el botón invada la siguiente etiqueta. */
:root {
    --regal-select-height: 40px;
    --regal-select-font: 14px;
    --regal-select-radius: 7px;
    --regal-select-border: #bdcbdf;
    --regal-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2327436e' stroke-width='1.7'/%3E%3C/svg%3E");
    --regal-select-arrow-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='white' stroke-width='1.7'/%3E%3C/svg%3E");
}
body .bootstrap-select:not(.bs-container) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
body .bootstrap-select.form-control,
body .bootstrap-select.form-select,
body .bootstrap-select.custom-select {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    padding-inline: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body :is(select.form-control, select.form-select, select.custom-select):not(.selectpicker):not(.select2-hidden-accessible),
body .bootstrap-select > .dropdown-toggle.btn,
body .select2-container--default .select2-selection {
    box-sizing: border-box;
    min-width: 0;
    min-height: var(--regal-select-height) !important;
    border: 1px solid var(--regal-select-border) !important;
    border-radius: var(--regal-select-radius) !important;
    font-family: inherit;
    font-size: var(--regal-select-font) !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    box-shadow: none;
}
body :is(select.form-control, select.form-select, select.custom-select):not(.selectpicker):not(.select2-hidden-accessible):not([multiple]):is(:not([size]), [size="0"], [size="1"]),
body .bootstrap-select > .dropdown-toggle.btn,
body .select2-container--default .select2-selection--single {
    height: var(--regal-select-height) !important;
    padding-block: calc((var(--regal-select-height) - 24px) / 2) !important;
    padding-inline: 12px 36px !important;
    white-space: nowrap !important;
}
body :is(select.form-control, select.form-select, select.custom-select):not(.selectpicker):not(.select2-hidden-accessible):not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
    width: 100%;
    appearance: none;
    background-image: var(--regal-select-arrow);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    text-overflow: ellipsis;
}
body :is(select.form-control, select.form-select, select.custom-select):not(.selectpicker):not(.select2-hidden-accessible):not(:disabled):is(:hover, :focus) {
    background-image: var(--regal-select-arrow-active);
}
body :is(select.form-control, select.form-select, select.custom-select):not(.selectpicker):not(.select2-hidden-accessible):is([multiple], [size]:not([size="0"]):not([size="1"])) {
    height: auto;
    padding: 6px 10px !important;
    background-image: none;
}
body .bootstrap-select > .dropdown-toggle.btn {
    position: relative;
    overflow: hidden;
    background-image: none;
}
body .bootstrap-select > .dropdown-toggle .filter-option {
    position: static !important;
    width: 100%;
    height: 22px;
    padding: 0 !important;
    line-height: inherit !important;
}
body .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    line-height: inherit !important;
}
body .bootstrap-select > .dropdown-toggle::after {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 8px;
    height: 8px;
    margin: -6px 0 0;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}
body .bootstrap-select > .dropdown-toggle:focus-visible,
body .select2-container--focus .select2-selection,
body select:focus-visible {
    outline: 2px solid #7ca3d4 !important;
    outline-offset: 2px;
}
body .bootstrap-select:has(> select:disabled) > .dropdown-toggle {
    color: var(--regal-field-disabled-color) !important;
    background-color: var(--regal-field-disabled-background) !important;
    -webkit-text-fill-color: var(--regal-field-disabled-color) !important;
    cursor: not-allowed;
    opacity: 1;
}
/* El menú conserva el ancho del control; las opciones largas se pueden leer. */
body .bootstrap-select .dropdown-menu,
body .bs-container .dropdown-menu,
body .modal .bootstrap-select .dropdown-menu,
body .bootstrap-select .dropdown-menu .inner,
body .bs-container .dropdown-menu .inner,
body .modal .bootstrap-select .dropdown-menu .inner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box;
}
body .bootstrap-select .dropdown-menu,
body .bs-container .dropdown-menu,
body .select2-dropdown {
    border: 1px solid var(--regal-select-border);
    border-radius: var(--regal-select-radius);
    box-shadow: 0 8px 24px rgba(36,59,90,.14);
    font-size: var(--regal-select-font) !important;
}
body .bootstrap-select .dropdown-menu li a.dropdown-item,
body .bs-container .dropdown-menu li a.dropdown-item,
body .bootstrap-select .dropdown-menu li span.text,
body .bs-container .dropdown-menu li span.text,
body .select2-results__option {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
body .bootstrap-select .dropdown-menu li a.dropdown-item,
body .bs-container .dropdown-menu li a.dropdown-item,
body .select2-results__option { padding: 8px 12px; }
body .bootstrap-select.show-tick .dropdown-menu li a span.text { margin-right: 22px; }
body .bs-searchbox { padding: 8px; }
body .bs-searchbox .form-control { min-height: 36px; border-width: 1px; border-radius: 5px; padding: 6px 10px; }
body .select2-container { max-width: 100%; min-width: 0; }
body .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 22px; }
body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 10px; }
body .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    width: 8px; height: 8px; margin-top: -6px; transform: rotate(45deg);
}
body .select2-container--default .select2-selection--multiple { height: auto; padding: 3px 8px; }
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    max-width: 100%; white-space: normal; overflow-wrap: anywhere; background: #edf3fc; color: #27436e;
}
body .select2-container--default .select2-selection--multiple .select2-search__field { max-width: 100%; margin-top: 4px; }
:is(.form-control-sm, .form-select-sm, .custom-select-sm, .input-group-sm) { --regal-select-height: 32px; }
:is(.form-control-lg, .form-select-lg, .custom-select-lg, .input-group-lg) { --regal-select-height: 48px; --regal-select-font: 16px; }
select:is(.form-control-sm, .form-select-sm) + .select2-container { --regal-select-height: 32px; }
select:is(.form-control-lg, .form-select-lg) + .select2-container { --regal-select-height: 48px; --regal-select-font: 16px; }
body .input-group > .bootstrap-select,
body .input-group > .select2-container { flex: 1 1 0; width: 1% !important; }
@media (max-width: 991px) {
    :root { --regal-select-font: 16px; }
    body .bootstrap-select > .dropdown-toggle.btn { font-size: 16px !important; }
}

/* Los select ocultos siguen enviando el valor sin participar en el diseño. */
body select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%);
    white-space: nowrap !important;
}
body .bootstrap-select > .dropdown-toggle.btn {
    background: #fff !important;
}
body .bootstrap-select:not(.disabled) > .dropdown-toggle.btn:is(:hover, :focus, :active),
body .bootstrap-select:is(.show, .open) > .dropdown-toggle.btn {
    color: var(--regal-field-active-color) !important;
    background: var(--regal-field-active-background) !important;
}
body .bootstrap-select.disabled > .dropdown-toggle.btn,
body .bootstrap-select:has(> select:disabled) > .dropdown-toggle.btn {
    background: var(--regal-field-disabled-background) !important;
}
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    -webkit-text-fill-color: #27436e !important;
}