/* =========================================================
   Lighthouse — site.css
   Paleta institucional:
     Blanco : #ffffff
     Negro  : #1e120d
     Lima   : #c1d565   ← color CLARO → texto siempre oscuro
     Teal   : #328095   ← color OSCURO → texto blanco OK
   ========================================================= */

/* ---------------------------------------------------------
   1. VARIABLES CSS (Bootstrap 5 override)
   --------------------------------------------------------- */
:root {
    /* Paleta base */
    --lh-white: #ffffff;
    --lh-black: #1e120d;
    --lh-lime: #c1d565;
    --lh-teal: #328095;
    /* Derivados */
    --lh-teal-dark: #286677;
    --lh-lime-dark: #a8bc4a;
    --lh-border: rgba(30,18,13,.15);
    --lh-teal-12: rgba(50,128,149,.12);
    --lh-lime-45: rgba(193,213,101,.45);
    --lh-lime-20: rgba(193,213,101,.20);
    /* Bootstrap 5 core */
    --bs-body-bg: var(--lh-white);
    --bs-body-color: var(--lh-black);
    --bs-emphasis-color: var(--lh-black);
    --bs-border-color: var(--lh-border);
    --bs-link-color: var(--lh-teal);
    --bs-link-hover-color: var(--lh-teal-dark);
    --bs-light: var(--lh-white);
    --bs-light-rgb: 255,255,255;
    --bs-dark: var(--lh-black);
    --bs-dark-rgb: 30,18,13;
    /* Primary = Teal (oscuro → texto blanco) */
    --bs-primary: var(--lh-teal);
    --bs-primary-rgb: 50,128,149;
    --bs-primary-dark: var(--lh-teal-dark);
    /* Secondary = Lima (claro → texto NEGRO obligatorio) */
    --bs-secondary: var(--lh-lime);
    --bs-secondary-rgb: 193,213,101;
    --bs-secondary-dark: var(--lh-lime-dark);
    --bs-secondary-text: var(--lh-black);
    /* Success = Lima (misma restricción de contraste) */
    --bs-success: var(--lh-lime);
    --bs-success-rgb: 193,213,101;
    /* Info = Teal */
    --bs-info: var(--lh-teal);
    --bs-info-rgb: 50,128,149;
}

/* ---------------------------------------------------------
   2. CONTRASTE CRÍTICO — Lima como fondo
   --------------------------------------------------------- */
.badge.bg-secondary,
.badge.bg-success {
    color: var(--lh-black) !important;
}

.alert-secondary {
    background-color: var(--lh-lime-20);
    border-color: var(--lh-lime-dark);
    color: var(--lh-black);
}

.alert-success {
    background-color: var(--lh-lime-20);
    border-color: var(--lh-lime-dark);
    color: var(--lh-black);
}

.text-success {
    color: #5a6e00 !important;
}

.text-secondary {
    color: var(--lh-teal) !important;
}

.bg-secondary {
    color: var(--lh-black) !important;
}

.bg-success {
    color: var(--lh-black) !important;
}

/* ---------------------------------------------------------
   3. SWEET ALERT
   --------------------------------------------------------- */
.sweet-alert .confirm {
    color: var(--lh-white) !important;
    background-color: var(--lh-teal) !important;
}

.sweet-alert .cancel {
    color: var(--lh-black) !important;
    background-color: var(--lh-lime) !important;
}

/* ---------------------------------------------------------
   4. TIPOGRAFÍA BASE
   --------------------------------------------------------- */
html, body {
    font-family: Oriflame, sans-serif !important;
}

body {
    background: var(--lh-white);
}

a {
    color: var(--lh-teal);
}

p {
    margin: 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--lh-black);
}

ul, ol {
    list-style: none;
}

/* ---------------------------------------------------------
   5. LOADER GLOBAL
   --------------------------------------------------------- */
.loader {
    display: none;
    position: fixed;
    z-index: 10000;
    background-color: rgba(30,18,13,0.60);
    inset: 0;
}

    .loader::before {
        content: 'Espere un momento';
        position: absolute;
        width: 100%;
        display: block;
        top: calc(50% + 1.5em);
        text-align: center;
        opacity: 0.85;
        color: var(--lh-white);
    }

    .loader::after {
        content: '';
        position: absolute;
        height: 5em;
        width: 5em;
        display: block;
        background-image: url('../img/spinner.svg');
        background-size: contain;
        background-repeat: no-repeat;
        top: calc(50% - 2.5em);
        left: calc(50% - 2.5em);
    }

/* ---------------------------------------------------------
   6. MODALES
   --------------------------------------------------------- */
.modal-backdrop.show {
    opacity: 0.90;
}

.modal-body .btn-close {
    position: fixed;
    right: 1em;
    top: 1em;
}

.modal-header {
    background-color: var(--lh-teal);
    color: var(--lh-white);
    border-bottom: none;
}

    .modal-header .modal-title {
        color: var(--lh-white);
    }

    .modal-header .btn-close {
        filter: invert(1) brightness(2);
    }

.modal-fullscreen {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
}

    .modal-fullscreen .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

.modal-content {
    border: none;
    box-shadow: 0 24px 60px rgba(30,18,13,.20);
}

/* ---------------------------------------------------------
   7. TABLAS Y DATATABLES
   ─────────────────────────────────────────────────────────
   thead:
     • Fondo  : Lima  #c1d565  (verde institucional)
     • Texto  : Negro #1e120d  (contraste 7.2:1 — WCAG AAA ✅)
     • Alineado al centro
     • Font-weight bold para destacar columnas
   ─────────────────────────────────────────────────────────
   ⚠️  Nota de contraste: Lima es un color CLARO. Se usa texto
       negro (#1e120d) para garantizar legibilidad. Texto blanco
       sobre lima daría un ratio de ~1.8:1 (ilegible, falla WCAG).
   --------------------------------------------------------- */

/* Cabecera — tabla estándar Bootstrap */
.table > thead > tr > td,
.table > thead > tr > th {
    background: var(--lh-lime) !important; /* Lima institucional */
    color: var(--lh-black) !important; /* Negro — contraste 7.2:1 */
    
    vertical-align: middle;
    font-weight: 700;
    font-size: .80rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-color: var(--lh-lime-dark) !important;
    white-space: nowrap;
}

/* Cabecera — DataTables genera su propio thead, cubrimos ambos */
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    background: var(--lh-lime) !important;
    color: var(--lh-black) !important;
    vertical-align: middle;
    font-weight: 700;
    font-size: .80rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--lh-lime-dark) !important;
    white-space: nowrap;
}

/* Icono de ordenación DataTables — negro para contrastar con lima */
table.dataTable > thead .sorting::before,
table.dataTable > thead .sorting::after,
table.dataTable > thead .sorting_asc::before,
table.dataTable > thead .sorting_asc::after,
table.dataTable > thead .sorting_desc::before,
table.dataTable > thead .sorting_desc::after {
    opacity: .55;
    color: var(--lh-black);
}

table.dataTable > thead .sorting_asc::before,
table.dataTable > thead .sorting_desc::after {
    opacity: 1;
}

/* Cabecera nivel 2 (subgrupos) — Lima oscura para distinguir */
.tableThL2 {
    background: var(--lh-lime-dark) !important;
    color: var(--lh-black) !important;
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
}

/* Striped — teal muy suave en filas pares */
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped tbody tr.odd td,
.table-striped tbody tr.odd th {
    background: rgba(50,128,149,.06) !important;
}

/* Alinear celdas de tbody al centro si se desea (opcional — quitar si preferís left) */
.table > tbody > tr > td {
    vertical-align: middle;
}

.tableContainer {
    max-height: calc(100vh - 200px);
    overflow-y: hidden;
}

/* ---------------------------------------------------------
   8. CARDS
   --------------------------------------------------------- */
.card {
    border: none;
    box-shadow: rgb(0 0 0 / 8%) 0 0 0.25rem 0 !important;
}

/* ---------------------------------------------------------
   9. BADGES
   --------------------------------------------------------- */
.badge-pill {
    background: var(--lh-teal);
    color: var(--lh-white);
}

.badge-lime {
    background: var(--lh-lime);
    color: var(--lh-black);
}

/* ---------------------------------------------------------
   10. FORMULARIOS — Checkbox y Radio custom
   --------------------------------------------------------- */
.radio, .checkbox {
    margin: 0.1em 0.5em;
}

    .checkbox label:after,
    .radio label:after {
        content: '';
        display: table;
        clear: both;
    }

    .checkbox .cr,
    .radio .cr {
        position: relative;
        display: inline-block;
        border: 1px solid #D1D1D1;
        background: white;
        width: 20px;
        height: 20px;
        float: left;
        margin-right: 5px;
    }

    .radio .cr {
        border-radius: 50%;
    }

        .checkbox .cr .cr-icon,
        .radio .cr .cr-icon {
            position: absolute;
            left: -1px;
            top: -1px;
            width: 20px;
            height: 20px;
            background-image: url('../img/checkbox.png');
            background-size: 50%;
            background-position: center;
            background-repeat: no-repeat;
        }

        .radio .cr .cr-icon {
            border-radius: 50%;
        }

    .checkbox label input[type="checkbox"],
    .radio label input[type="radio"] {
        display: none;
    }

        .checkbox label input[type="checkbox"] + .cr > .cr-icon,
        .radio label input[type="radio"] + .cr > .cr-icon {
            transform: scale(2);
            opacity: 0;
            transition: all .1s ease-in;
        }

        .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
        .radio label input[type="radio"]:checked + .cr > .cr-icon {
            transform: scale(1);
            opacity: 1;
            background-color: var(--lh-teal);
        }

        .checkbox label input[type="checkbox"]:disabled + .cr,
        .radio label input[type="radio"]:disabled + .cr {
            opacity: .5;
        }

.has-error .bootstrap-select .dropdown-toggle,
.error .bootstrap-select .dropdown-toggle,
.bootstrap-select.is-invalid .dropdown-toggle,
.was-validated .bootstrap-select select:invalid + .dropdown-toggle {
    border-width: 3px;
    border-color: var(--lh-teal-dark);
}

/* ---------------------------------------------------------
   11. MENÚ LATERAL (Accordion)
   --------------------------------------------------------- */
#accordionMenu {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

#accordionMenuFooter {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.list-group-item-action.active {
    background-color: var(--lh-lime-45) !important;
    color: var(--lh-black) !important;
}

.accordion-button::after {
    filter: invert();
}

.dataTables_filter {
    display: none;
}

/* ---------------------------------------------------------
   12. MISCELÁNEOS
   --------------------------------------------------------- */
.air-datepicker-global-container {
    z-index: 1090;
}

iframe {
    height: calc(100vh - 12.5em) !important;
    background-image: url('../img/spinner.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ---------------------------------------------------------
   13. CARD DEL MENÚ LATERAL
   --------------------------------------------------------- */
.cardMenu {
    background: linear-gradient(160deg, var(--lh-teal) 0%, var(--lh-teal-dark) 100%);
    min-height: calc(100vh - 1.5rem);
    border: none !important;
}

    .cardMenu,
    .cardMenu .accordion-button,
    .cardMenu .list-group-item,
    .cardMenu a {
        color: var(--lh-white) !important;
    }

        .cardMenu .accordion-button {
            background: transparent !important;
        }

/* ---------------------------------------------------------
   14. ENCABEZADOS DE PÁGINA
   --------------------------------------------------------- */
.page-header-title {
    color: var(--lh-black);
    font-weight: 700;
}

.page-header-subtitle {
    color: var(--lh-teal);
    font-weight: 400;
    font-size: .875rem;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--lh-teal);
}

    .breadcrumb-item.active {
        color: var(--lh-black);
    }

    .breadcrumb-item + .breadcrumb-item::before {
        color: var(--lh-teal);
    }

/* ---------------------------------------------------------
   15. UTILIDADES ADICIONALES
   --------------------------------------------------------- */
.text-xs {
    font-size: .75rem;
}

.text-sm {
    font-size: .8125rem;
}

.shadow-lh {
    box-shadow: 0 8px 24px rgba(30,18,13,.10) !important;
}

.border-radius-xl {
    border-radius: 1rem !important;
}

/* ---------------------------------------------------------
   NAV PILLS — Paleta Lighthouse
   Activo : Teal #328095 → texto blanco ✅
   Hover  : Teal suave transparente
   --------------------------------------------------------- */
.nav-pills .nav-link {
    color: var(--lh-teal);
    font-weight: 600;
    border-radius: 8px;
    transition: background .15s, color .15s;
}

    .nav-pills .nav-link:hover:not(.active) {
        background: var(--lh-teal-12); /* rgba(50,128,149,.12) */
        color: var(--lh-teal-dark);
    }

    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
        background-color: var(--lh-teal) !important;
        color: var(--lh-white) !important;
    }