/* PaginaSalud global select system.
   Loaded project-wide and intentionally kept at low selector specificity so
   module-specific themes (agenda, clinical records, profile and modals) can
   continue to override it. */
:root {
    --ps-select-primary: #14B8C4;
    --ps-select-primary-dark: #0F9BA8;
    --ps-select-primary-soft: #E8FAFB;
    --ps-select-navy: #0F4C5C;
    --ps-select-surface: #FFFFFF;
    --ps-select-background: #F8FAFC;
    --ps-select-border: #D7E2E7;
    --ps-select-border-hover: #B9D1D7;
    --ps-select-title: #183244;
    --ps-select-text: #475569;
    --ps-select-height: 42px;
    --ps-select-radius: 10px;
}

/* Native Bootstrap selects. Add .ps-select-unstyled to opt out. */
:where(select.form-control:not([multiple]):not(.ps-select-unstyled)),
:where(select.custom-select:not([multiple]):not(.ps-select-unstyled)),
:where(select.ps-select:not([multiple])) {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: var(--ps-select-background) !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ps-select-text) 50%),
        linear-gradient(135deg, var(--ps-select-text) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 17px) 50%,
        calc(100% - 12px) 50% !important;
    background-repeat: no-repeat !important;
    background-size: 5px 5px, 5px 5px !important;
    border: 1px solid var(--ps-select-border) !important;
    border-radius: var(--ps-select-radius) !important;
    box-shadow: none !important;
    color: var(--ps-select-title) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: var(--ps-select-height) !important;
    line-height: 1.25 !important;
    min-height: var(--ps-select-height) !important;
    padding: 8px 36px 8px 13px !important;
}

:where(select.form-control:not([multiple]):not(.ps-select-unstyled)):hover,
:where(select.custom-select:not([multiple]):not(.ps-select-unstyled)):hover,
:where(select.ps-select:not([multiple])):hover {
    background-color: var(--ps-select-surface) !important;
    border-color: var(--ps-select-border-hover) !important;
}

:where(select.form-control:not([multiple]):not(.ps-select-unstyled)):focus,
:where(select.custom-select:not([multiple]):not(.ps-select-unstyled)):focus,
:where(select.ps-select:not([multiple])):focus {
    background-color: var(--ps-select-surface) !important;
    border-color: var(--ps-select-primary) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 196, .14) !important;
    outline: 0 !important;
}

:where(select.form-control:not([multiple]):not(.ps-select-unstyled)):disabled,
:where(select.custom-select:not([multiple]):not(.ps-select-unstyled)):disabled,
:where(select.ps-select:not([multiple])):disabled {
    background-color: #EEF3F6 !important;
    color: #8494A4 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* bootstrap-select wrapper: only the generated button owns the border. */
:where(.bootstrap-select:not(.bs-container)),
:where(.bootstrap-select.form-control:not(.bs-container)) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: var(--ps-select-height) !important;
    margin: 0 !important;
    min-height: var(--ps-select-height) !important;
    outline: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    width: 100% !important;
}

:where(.bootstrap-select > .dropdown-toggle) {
    align-items: center !important;
    background: var(--ps-select-background) !important;
    border: 1px solid var(--ps-select-border) !important;
    border-radius: var(--ps-select-radius) !important;
    box-shadow: none !important;
    color: var(--ps-select-title) !important;
    display: flex !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: var(--ps-select-height) !important;
    justify-content: space-between !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    min-height: var(--ps-select-height) !important;
    padding: 9px 36px 9px 13px !important;
    text-transform: none !important;
    width: 100% !important;
}

:where(.bootstrap-select > .dropdown-toggle):hover {
    background: var(--ps-select-surface) !important;
    border-color: var(--ps-select-border-hover) !important;
    color: var(--ps-select-title) !important;
    filter: none !important;
    transform: none !important;
}

:where(.bootstrap-select.open > .dropdown-toggle),
:where(.bootstrap-select.show > .dropdown-toggle),
:where(.bootstrap-select > .dropdown-toggle):focus {
    background: var(--ps-select-surface) !important;
    border-color: var(--ps-select-primary) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 196, .14) !important;
    outline: 0 !important;
}

:where(.bootstrap-select.disabled > .dropdown-toggle),
:where(.bootstrap-select > .dropdown-toggle.disabled) {
    background: #EEF3F6 !important;
    color: #8494A4 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

:where(.bootstrap-select .filter-option),
:where(.bootstrap-select .filter-option-inner),
:where(.bootstrap-select .filter-option-inner-inner) {
    align-items: center !important;
    display: flex !important;
    height: 100% !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

:where(.bootstrap-select .caret) {
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 6px solid var(--ps-select-text) !important;
    margin-top: -3px !important;
    right: 13px !important;
}

:where(.bootstrap-select .dropdown-menu) {
    background: var(--ps-select-surface) !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--ps-select-radius) !important;
    box-shadow: 0 14px 32px rgba(15, 76, 92, .16) !important;
    margin-top: 5px !important;
    max-height: 270px !important;
    min-width: 100% !important;
    overflow: hidden !important;
    padding: 5px !important;
    z-index: 1060 !important;
}

:where(.bootstrap-select .dropdown-menu.inner) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    max-height: 258px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

:where(.bootstrap-select .dropdown-menu li) {
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

:where(.bootstrap-select .dropdown-menu li a) {
    align-items: center !important;
    border-radius: 7px !important;
    color: var(--ps-select-text) !important;
    display: flex !important;
    font-size: 12px !important;
    line-height: 18px !important;
    min-height: 36px !important;
    padding: 8px 11px !important;
    white-space: normal !important;
}

:where(.bootstrap-select .dropdown-menu li a):hover,
:where(.bootstrap-select .dropdown-menu li a):focus {
    background: var(--ps-select-primary-soft) !important;
    color: var(--ps-select-navy) !important;
    text-decoration: none !important;
}

:where(.bootstrap-select .dropdown-menu li.selected > a),
:where(.bootstrap-select .dropdown-menu li.active > a) {
    background: var(--ps-select-primary-soft) !important;
    color: var(--ps-select-primary-dark) !important;
    font-weight: 700 !important;
}

:where(.bootstrap-select .bs-searchbox) {
    padding: 4px 4px 8px !important;
}

:where(.bootstrap-select .bs-searchbox .form-control) {
    border: 1px solid var(--ps-select-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    height: 38px !important;
    min-height: 38px !important;
}

:where(.bootstrap-select .bs-searchbox .form-control):focus {
    border-color: var(--ps-select-primary) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 196, .12) !important;
}

@media (max-width: 575px) {
    :root {
        --ps-select-height: 44px;
    }

    :where(.bootstrap-select .dropdown-menu) {
        max-width: calc(100vw - 24px) !important;
    }
}