/* =====================================================================
 * Paleta corporativa illusion data — overrides de tokens de Bootstrap/Metronic.
 *
 * Para cada color:
 *   --bs-X          → color base
 *   --bs-X-active   → estado hover/pressed
 *   --bs-X-light    → fondo suave (badges, alerts, bg-light-X, ...)
 *   --bs-X-inverse  → color del texto SOBRE el color (típicamente blanco)
 *   --bs-X-rgb      → versión "r, g, b" (necesaria para rgba(...) y opacities)
 *
 * Los valores `active` y `light` se han derivado del color base. Ajústalos
 * a mano si necesitas un matiz concreto.
 * ===================================================================== */

[data-bs-theme=light] {
    /* --- Primary -------------------------------------------------- */
    --bs-primary:         #4A7C9E !important;
    --bs-primary-active:  #3D6885 !important;
    --bs-primary-light:   #EDF2F5 !important;
    --bs-primary-inverse: #ffffff !important;
    --bs-primary-rgb:     74, 124, 158 !important;

    /* --- Secondary ------------------------------------------------ */
    --bs-secondary:         #B8D4E3 !important;
    --bs-secondary-active:  #9DC4DA !important;
    --bs-secondary-light:   #F8FBFC !important;
    --bs-secondary-inverse: #1F3D52 !important; /* texto oscuro sobre fondo claro */
    --bs-secondary-rgb:     184, 212, 227 !important;

    /* --- Tertiary (color custom no nativo de Metronic) ------------ */
    --bs-tertiary:         #EE9B7A !important;
    --bs-tertiary-active:  #E78360 !important;
    --bs-tertiary-light:   #FDF5F2 !important;
    --bs-tertiary-inverse: #ffffff !important;
    --bs-tertiary-rgb:     238, 155, 122 !important;

    /* --- Info (mantenemos lo previo) ------------------------------ */
    --bs-info:        #458ddf !important;
    --bs-info-active: #2664a8 !important;
    --bs-info-light:  #F8F5FF !important;
    --bs-text-info:   #458ddf !important;

    /* --- Tipografía ------------------------------------------------ */
    --bs-body-color:      #1F3D52 !important; /* texto principal */
    --bs-heading-color:   #1F3D52 !important; /* h1..h6 */
    --bs-text-gray-900:   #1F3D52 !important; /* Metronic usa esta escala */
    --bs-text-gray-800:   #2A4A60 !important;
    --bs-text-gray-700:   #6B8499 !important; /* texto secundario */
    --bs-secondary-color: #6B8499 !important; /* muted en BS 5.3 */
    --bs-text-muted:      #6B8499 !important;
}

[data-bs-theme=dark] {
    /* Misma paleta base pero con `light` adaptado al fondo oscuro
       (siguiendo la convención Metronic: en dark, X-light pasa a ser
       una versión muy oscura del color, no un pastel). Ajusta si quieres
       una paleta dark distinta a la light. */
    --bs-primary:         #4A7C9E !important;
    --bs-primary-active:  #5E92B5 !important;
    --bs-primary-light:   #1A2733 !important;
    --bs-primary-inverse: #ffffff !important;
    --bs-primary-rgb:     74, 124, 158 !important;

    --bs-secondary:         #B8D4E3 !important;
    --bs-secondary-active:  #C9DFEB !important;
    --bs-secondary-light:   #1F2C36 !important;
    --bs-secondary-inverse: #1F3D52 !important;
    --bs-secondary-rgb:     184, 212, 227 !important;

    --bs-tertiary:         #EE9B7A !important;
    --bs-tertiary-active:  #F2AB8E !important;
    --bs-tertiary-light:   #3A2620 !important;
    --bs-tertiary-inverse: #ffffff !important;
    --bs-tertiary-rgb:     238, 155, 122 !important;
}

/* =====================================================================
 * Clases utilitarias para `tertiary` — Metronic no las genera porque
 * el color no existe en el bundle compilado. Replicamos el patrón
 * exacto de las clases primary/success/etc. del bundle.
 * ===================================================================== */

/* ---------- Backgrounds ---------- */
.bg-tertiary {
    background-color: var(--bs-tertiary) !important;
}
.bg-light-tertiary {
    background-color: var(--bs-tertiary-light) !important;
}
.bg-hover-tertiary:hover {
    background-color: var(--bs-tertiary) !important;
}

/* ---------- Texto ---------- */
.text-tertiary {
    color: var(--bs-tertiary) !important;
}
.text-hover-tertiary:hover {
    color: var(--bs-tertiary) !important;
}
.text-inverse-tertiary {
    color: var(--bs-tertiary-inverse) !important;
}

/* ---------- Bordes ---------- */
.border-tertiary {
    border-color: var(--bs-tertiary) !important;
}
.border-hover-tertiary:hover {
    border-color: var(--bs-tertiary) !important;
}

/* ---------- SVG / fill ---------- */
.svg-icon.svg-icon-tertiary svg [fill]:not(.permanent):not(g) {
    fill: var(--bs-tertiary) !important;
}
.fill-tertiary {
    fill: var(--bs-tertiary) !important;
}

/* ---------- Botones: btn-tertiary (sólido) ---------- */
.btn.btn-tertiary {
    color: var(--bs-tertiary-inverse);
    border-color: var(--bs-tertiary);
    background-color: var(--bs-tertiary);
}
.btn-check:checked + .btn.btn-tertiary,
.btn-check:active + .btn.btn-tertiary,
.btn.btn-tertiary:focus:not(.btn-active),
.btn.btn-tertiary:hover:not(.btn-active),
.btn.btn-tertiary:active:not(.btn-active),
.btn.btn-tertiary.active,
.btn.btn-tertiary.show,
.show > .btn.btn-tertiary {
    color: var(--bs-tertiary-inverse);
    border-color: var(--bs-tertiary-active);
    background-color: var(--bs-tertiary-active) !important;
}

/* ---------- Botones: btn-light-tertiary (suave) ---------- */
.btn.btn-light-tertiary {
    color: var(--bs-tertiary);
    border-color: var(--bs-tertiary-light);
    background-color: var(--bs-tertiary-light);
}
.btn-check:checked + .btn.btn-light-tertiary,
.btn-check:active + .btn.btn-light-tertiary,
.btn.btn-light-tertiary:focus:not(.btn-active),
.btn.btn-light-tertiary:hover:not(.btn-active),
.btn.btn-light-tertiary:active:not(.btn-active),
.btn.btn-light-tertiary.active,
.btn.btn-light-tertiary.show,
.show > .btn.btn-light-tertiary {
    color: var(--bs-tertiary-inverse);
    border-color: var(--bs-tertiary);
    background-color: var(--bs-tertiary) !important;
}

/* ---------- Botones: btn-active-light-tertiary (suave on active) ---------- */
.btn.btn-active-light-tertiary {
    transition: color .2s ease, background-color .2s ease;
}
.btn-check:checked + .btn.btn-active-light-tertiary,
.btn-check:active + .btn.btn-active-light-tertiary,
.btn.btn-active-light-tertiary:focus:not(.btn-active),
.btn.btn-active-light-tertiary:hover:not(.btn-active),
.btn.btn-active-light-tertiary:active:not(.btn-active),
.btn.btn-active-light-tertiary.active,
.btn.btn-active-light-tertiary.show,
.show > .btn.btn-active-light-tertiary {
    color: var(--bs-tertiary) !important;
    border-color: var(--bs-tertiary-light) !important;
    background-color: var(--bs-tertiary-light) !important;
}

/* ---------- Botones: btn-outline-tertiary ---------- */
.btn.btn-outline.btn-outline-tertiary,
.btn.btn-outline-tertiary {
    color: var(--bs-tertiary);
    border-color: var(--bs-tertiary);
    background-color: transparent;
}
.btn-check:checked + .btn.btn-outline-tertiary,
.btn-check:active + .btn.btn-outline-tertiary,
.btn.btn-outline-tertiary:focus:not(.btn-active),
.btn.btn-outline-tertiary:hover:not(.btn-active),
.btn.btn-outline-tertiary:active:not(.btn-active),
.btn.btn-outline-tertiary.active,
.btn.btn-outline-tertiary.show,
.show > .btn.btn-outline-tertiary {
    color: var(--bs-tertiary-inverse);
    border-color: var(--bs-tertiary);
    background-color: var(--bs-tertiary) !important;
}

/* ---------- Badges ---------- */
.badge.badge-tertiary {
    color: var(--bs-tertiary-inverse);
    background-color: var(--bs-tertiary);
}
.badge.badge-light-tertiary {
    color: var(--bs-tertiary);
    background-color: var(--bs-tertiary-light);
}
.badge.badge-outline.badge-outline-tertiary {
    color: var(--bs-tertiary);
    border: 1px solid var(--bs-tertiary);
    background-color: transparent;
}

/* ---------- Alert ---------- */
.alert.alert-tertiary {
    background-color: var(--bs-tertiary-light);
    border-color: var(--bs-tertiary-light);
    color: var(--bs-tertiary);
}
.alert.alert-tertiary .alert-text { color: var(--bs-tertiary); }
.alert.alert-tertiary .alert-icon i,
.alert.alert-tertiary .alert-icon .svg-icon { color: var(--bs-tertiary); }

/* ---------- Symbol / avatar light ---------- */
.symbol.symbol-tertiary > .symbol-label {
    color: var(--bs-tertiary-inverse);
    background-color: var(--bs-tertiary);
}
.symbol.symbol-light-tertiary > .symbol-label {
    color: var(--bs-tertiary);
    background-color: var(--bs-tertiary-light);
}

/* ---------- Links ---------- */
.link-tertiary {
    color: RGBA(var(--bs-tertiary-rgb), var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-tertiary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-tertiary:hover, .link-tertiary:focus {
    color: var(--bs-tertiary-active) !important;
}

/* ---------- Focus ring opacities ---------- */
.bg-opacity-tertiary,
.bg-tertiary[class*="bg-opacity-"] {
    background-color: rgba(var(--bs-tertiary-rgb), var(--bs-bg-opacity, 1)) !important;
}


.form-check > input,
.form-check > label {
    cursor: pointer !important;
}

.datepicker table th {
    color: #333;
    font-weight: 400 !important;
}

.datepicker table tr td, .datepicker table tr th {
    text-align: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: none;
}

.datatables label[for^="dt-search-"] {
    display: none !important;
}

.datatables label[for^="dt-length-"] {
    display: flex !important;
    align-items: baseline;
}

.datatables label[for^="dt-length-"] select {
    margin: 0 10px;
}

table.dataTable > thead .dt-ordering-asc:after, table.dataTable > thead .dt-ordering-asc:before, table.dataTable > thead .dt-ordering-desc:after, table.dataTable > thead .dt-ordering-desc:before {
    margin-top: 0.5rem;
}

div.table-responsive > div > div.dt-scroll-head > div > table > thead > tr > th.dt-orderable-asc.dt-orderable-desc.dt-ordering-desc,
div.table-responsive > div > div.dt-scroll-head > div > table > thead > tr > th.dt-orderable-asc.dt-orderable-desc.dt-ordering-asc {
    display: inline-flex;
}