/* ============================================================
   VAERSA - BOOTSTRAP 5.3 CUSTOM THEME

   Primary:   #004457
   Secondary: #dcbb11

   Cargar SIEMPRE después de bootstrap.min.css
   ============================================================ */


/* ============================================================
   1. VARIABLES GLOBALES
   ============================================================ */

:root,
[data-bs-theme="light"] {
    /* --------------------------------------------------------
       PRIMARY
       -------------------------------------------------------- */

    --bs-primary: #004457;
    --bs-primary-rgb: 0, 68, 87;
    --bs-primary-text-emphasis: #001b23;
    --bs-primary-bg-subtle: #ccdade;
    --bs-primary-border-subtle: #99b4bc;
    /* Escala propia */
    --bs-primary-100: #ccdade;
    --bs-primary-200: #99b4bc;
    --bs-primary-300: #668f9a;
    --bs-primary-400: #336978;
    --bs-primary-500: #004457;
    --bs-primary-600: #003645;
    --bs-primary-700: #002934;
    --bs-primary-800: #001b23;
    --bs-primary-900: #000e11;
    /* --------------------------------------------------------
       SECONDARY
       -------------------------------------------------------- */

    --bs-secondary: #dcbb11;
    --bs-secondary-rgb: 220, 187, 17;
    --bs-secondary-text-emphasis: #584b07;
    --bs-secondary-bg-subtle: #f8f1cf;
    --bs-secondary-border-subtle: #f1e4a0;
    /* Escala propia */
    --bs-secondary-100: #f8f1cf;
    --bs-secondary-200: #f1e4a0;
    --bs-secondary-300: #ead670;
    --bs-secondary-400: #e3c941;
    --bs-secondary-500: #dcbb11;
    --bs-secondary-600: #b0960e;
    --bs-secondary-700: #84700a;
    --bs-secondary-800: #584b07;
    --bs-secondary-900: #2c2503;
    /* --------------------------------------------------------
       LINKS
       -------------------------------------------------------- */

    --bs-link-color: #004457;
    --bs-link-color-rgb: 0, 68, 87;
    --bs-link-hover-color: #003645;
    --bs-link-hover-color-rgb: 0, 54, 69;
    /* --------------------------------------------------------
       FOCUS
       -------------------------------------------------------- */

    --bs-focus-ring-color: rgba(0, 68, 87, 0.25);
}


/* ============================================================
   2. TEXT COLORS
   ============================================================ */

.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

.text-secondary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

.text-primary-emphasis {
    color: var(--bs-primary-text-emphasis) !important;
}

.text-secondary-emphasis {
    color: var(--bs-secondary-text-emphasis) !important;
}


/* ============================================================
   3. BACKGROUNDS
   ============================================================ */

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-primary-subtle {
    background-color: var(--bs-primary-bg-subtle) !important;
}

.bg-secondary-subtle {
    background-color: var(--bs-secondary-bg-subtle) !important;
}


/* ============================================================
   4. BORDERS
   ============================================================ */

.border-primary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}

.border-secondary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
}

.border-primary-subtle {
    border-color: var(--bs-primary-border-subtle) !important;
}

.border-secondary-subtle {
    border-color: var(--bs-secondary-border-subtle) !important;
}


/* ============================================================
   5. BUTTON PRIMARY
   ============================================================ */

.btn-primary,
.enlace-boton:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-light):not(.btn-outline-dark),
.portada-lightbox-boton-leido:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-light):not(.btn-outline-dark),
:is(#contenido_inside, .portal-dialog-root) .btn:is(button, input[type="button"], input[type="submit"], input[type="reset"], a):not([class*="btn-"]):not(.portal-datepicker-calendar),
:is(#contenido_inside, .portal-dialog-root .portal-dialog-body) :is(input[type="button"], input[type="submit"], input[type="reset"], button):not(.btn):not(.accordion-button):not(.portal-dialog-close):not(.btn-close):not(.select2-selection__clear):not(.select2-selection__choice__remove):not(.dropdown-item):not(.page-link):not(.flatpickr-prev-month):not(.flatpickr-next-month),
.btn-suave:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-light):not(.btn-outline-dark),
body.login-pagina .login-card .link-recuperar:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-light):not(.btn-outline-dark) {
    --bs-btn-color: #fff;
    --bs-btn-bg: #004457;
    --bs-btn-border-color: #004457;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #003a4a;
    --bs-btn-hover-border-color: #003645;
    --bs-btn-focus-shadow-rgb: 0, 68, 87;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #003645;
    --bs-btn-active-border-color: #003341;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #004457;
    --bs-btn-disabled-border-color: #004457;
}


/* ============================================================
   6. OUTLINE PRIMARY
   ============================================================ */

.btn-outline-primary {
    --bs-btn-color: #004457;
    --bs-btn-border-color: #004457;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #004457;
    --bs-btn-hover-border-color: #004457;
    --bs-btn-focus-shadow-rgb: 0, 68, 87;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #004457;
    --bs-btn-active-border-color: #004457;
    --bs-btn-disabled-color: #004457;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #004457;
}


/* ============================================================
   7. BUTTON SECONDARY
   ============================================================ */

.btn-secondary,
.enlace-boton-secundario {
    /*
     * El amarillo es claro, por lo que texto oscuro
     * tiene mejor contraste.
     */

    --bs-btn-color: #212529;
    --bs-btn-bg: #dcbb11;
    --bs-btn-border-color: #dcbb11;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #e1c32e;
    --bs-btn-hover-border-color: #dfc022;
    --bs-btn-focus-shadow-rgb: 220, 187, 17;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #e3c941;
    --bs-btn-active-border-color: #dfc022;
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: #dcbb11;
    --bs-btn-disabled-border-color: #dcbb11;
}


/* ============================================================
   8. OUTLINE SECONDARY
   ============================================================ */

.btn-outline-secondary {
    --bs-btn-color: #84700a;
    --bs-btn-border-color: #dcbb11;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #dcbb11;
    --bs-btn-hover-border-color: #dcbb11;
    --bs-btn-focus-shadow-rgb: 220, 187, 17;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #dcbb11;
    --bs-btn-active-border-color: #dcbb11;
    --bs-btn-disabled-color: #84700a;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #dcbb11;
}


/* ============================================================
   9. BADGES / TEXT-BG
   ============================================================ */

.text-bg-primary {
    color: #fff !important;
    background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-secondary {
    color: #212529 !important;
    background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important;
}


/* ============================================================
   10. LINKS
   ============================================================ */

a {
    color: var(--bs-link-color);
}

    a:hover {
        color: var(--bs-link-hover-color);
    }

.link-primary {
    color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
}

    .link-primary:hover,
    .link-primary:focus {
        color: #003645 !important;
    }

.link-secondary {
    color: #84700a !important;
}

    .link-secondary:hover,
    .link-secondary:focus {
        color: #584b07 !important;
    }


/* ============================================================
   11. NAV PILLS
   ============================================================ */

.nav-pills {
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #004457;
}


/* ============================================================
   12. DROPDOWN
   ============================================================ */

.dropdown-menu {
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #004457;
}


/* ============================================================
   13. LIST GROUP
   ============================================================ */

.list-group {
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #004457;
    --bs-list-group-active-border-color: #004457;
}


/* ============================================================
   14. PAGINATION
   ============================================================ */

.pagination {
    --bs-pagination-color: #004457;
    --bs-pagination-hover-color: #003645;
    --bs-pagination-focus-color: #003645;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 68, 87, 0.25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #004457;
    --bs-pagination-active-border-color: #004457;
}


/* ============================================================
   15. FORMS
   ============================================================ */

.form-control:focus,
.form-select:focus {
    border-color: #668f9a;
    box-shadow: 0 0 0 0.25rem rgba(0, 68, 87, 0.25);
}


/* ============================================================
   16. CHECKBOX / RADIO
   ============================================================ */

.form-check-input:focus {
    border-color: #668f9a;
    box-shadow: 0 0 0 0.25rem rgba(0, 68, 87, 0.25);
}

.form-check-input:checked {
    background-color: #004457;
    border-color: #004457;
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: #004457;
    border-color: #004457;
}


/* ============================================================
   17. RANGE
   ============================================================ */

.form-range::-webkit-slider-thumb {
    background-color: #004457;
}

.form-range::-moz-range-thumb {
    background-color: #004457;
}

.form-range::-webkit-slider-thumb:active {
    background-color: #99b4bc;
}

.form-range::-moz-range-thumb:active {
    background-color: #99b4bc;
}


/* ============================================================
   18. PROGRESS
   ============================================================ */

.progress {
    --bs-progress-bar-bg: #004457;
}


/* ============================================================
   19. ACCORDION
   ============================================================ */

.accordion {
    --bs-accordion-btn-focus-border-color: #668f9a;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 68, 87, 0.25);
    --bs-accordion-active-color: #003645;
    --bs-accordion-active-bg: #ccdade;
}


/* ============================================================
   20. ALERT PRIMARY
   ============================================================ */

.alert-primary {
    --bs-alert-color: #001b23;
    --bs-alert-bg: #ccdade;
    --bs-alert-border-color: #99b4bc;
    --bs-alert-link-color: #00161c;
}


/* ============================================================
   21. ALERT SECONDARY
   ============================================================ */

.alert-secondary {
    --bs-alert-color: #584b07;
    --bs-alert-bg: #f8f1cf;
    --bs-alert-border-color: #f1e4a0;
    --bs-alert-link-color: #463c06;
}


/* ============================================================
   22. SPINNER
   ============================================================ */

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: #004457 !important;
}

.spinner-border.text-secondary,
.spinner-grow.text-secondary {
    color: #dcbb11 !important;
}


/* ============================================================
   23. FOCUS RING
   ============================================================ */

.focus-ring {
    --bs-focus-ring-color: rgba(0, 68, 87, 0.25);
}


/* ============================================================
   24. NAV / TABS LINKS
   ============================================================ */

.nav-link {
    --bs-nav-link-color: #004457;
    --bs-nav-link-hover-color: #003645;
}


/* ============================================================
   25. PRIMARY CUSTOM SCALE
   ============================================================ */

.bg-primary-100 {
    background-color: var(--bs-primary-100) !important;
}

.bg-primary-200 {
    background-color: var(--bs-primary-200) !important;
}

.bg-primary-300 {
    background-color: var(--bs-primary-300) !important;
}

.bg-primary-400 {
    background-color: var(--bs-primary-400) !important;
}

.bg-primary-500 {
    background-color: var(--bs-primary-500) !important;
}

.bg-primary-600 {
    background-color: var(--bs-primary-600) !important;
}

.bg-primary-700 {
    background-color: var(--bs-primary-700) !important;
}

.bg-primary-800 {
    background-color: var(--bs-primary-800) !important;
}

.bg-primary-900 {
    background-color: var(--bs-primary-900) !important;
}

.text-primary-100 {
    color: var(--bs-primary-100) !important;
}

.text-primary-200 {
    color: var(--bs-primary-200) !important;
}

.text-primary-300 {
    color: var(--bs-primary-300) !important;
}

.text-primary-400 {
    color: var(--bs-primary-400) !important;
}

.text-primary-500 {
    color: var(--bs-primary-500) !important;
}

.text-primary-600 {
    color: var(--bs-primary-600) !important;
}

.text-primary-700 {
    color: var(--bs-primary-700) !important;
}

.text-primary-800 {
    color: var(--bs-primary-800) !important;
}

.text-primary-900 {
    color: var(--bs-primary-900) !important;
}


/* ============================================================
   26. SECONDARY CUSTOM SCALE
   ============================================================ */

.bg-secondary-100 {
    background-color: var(--bs-secondary-100) !important;
}

.bg-secondary-200 {
    background-color: var(--bs-secondary-200) !important;
}

.bg-secondary-300 {
    background-color: var(--bs-secondary-300) !important;
}

.bg-secondary-400 {
    background-color: var(--bs-secondary-400) !important;
}

.bg-secondary-500 {
    background-color: var(--bs-secondary-500) !important;
}

.bg-secondary-600 {
    background-color: var(--bs-secondary-600) !important;
}

.bg-secondary-700 {
    background-color: var(--bs-secondary-700) !important;
}

.bg-secondary-800 {
    background-color: var(--bs-secondary-800) !important;
}

.bg-secondary-900 {
    background-color: var(--bs-secondary-900) !important;
}

.text-secondary-100 {
    color: var(--bs-secondary-100) !important;
}

.text-secondary-200 {
    color: var(--bs-secondary-200) !important;
}

.text-secondary-300 {
    color: var(--bs-secondary-300) !important;
}

.text-secondary-400 {
    color: var(--bs-secondary-400) !important;
}

.text-secondary-500 {
    color: var(--bs-secondary-500) !important;
}

.text-secondary-600 {
    color: var(--bs-secondary-600) !important;
}

.text-secondary-700 {
    color: var(--bs-secondary-700) !important;
}

.text-secondary-800 {
    color: var(--bs-secondary-800) !important;
}

.text-secondary-900 {
    color: var(--bs-secondary-900) !important;
}