/* =========================================================
   Lighthouse — site.bootstrap.css
   Override completo de componentes Bootstrap 5.

   REGLA DE CONTRASTE:
     Teal  (#328095) como fondo → texto BLANCO  (#ffffff) ✅
     Lima  (#c1d565) como fondo → texto NEGRO   (#1e120d) ✅
     Negro (#1e120d) como fondo → texto BLANCO  (#ffffff) ✅
   ========================================================= */

/* ---------------------------------------------------------
   NAVBAR
   El HeaderNav usa bg-dark = #1e120d → texto blanco ✅
   --------------------------------------------------------- */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.85);
}

    .navbar-dark .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-nav .nav-link:focus {
        color: var(--lh-lime); /* lima sobre negro: contraste OK ✅ */
    }

    .navbar-dark .navbar-nav .nav-link.active {
        color: var(--lh-lime);
    }

/* Dropdown del navbar */
.navbar .dropdown-menu {
    background: var(--lh-black);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.navbar .dropdown-item {
    color: rgba(255,255,255,.85);
    border-radius: 10px;
    padding: .5rem .75rem;
}

    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:focus {
        background-color: var(--lh-lime);
        color: var(--lh-black); /* ✅ texto negro sobre lima */
    }

    .navbar .dropdown-item:active {
        background-color: var(--lh-lime-dark);
        color: var(--lh-black);
    }

.navbar .dropdown-divider {
    border-color: rgba(255,255,255,.12);
}

/* ---------------------------------------------------------
   BTN — PRIMARY  (Teal → texto blanco)
   --------------------------------------------------------- */
.btn-primary {
    color: var(--lh-white);
    background-color: var(--lh-teal);
    border-color: var(--lh-teal);
    border-radius: 8px;
}

    .btn-primary:hover {
        color: var(--lh-white);
        background-color: var(--lh-teal-dark); /* ✅ era #0052cc (azul Bootstrap) */
        border-color: var(--lh-teal-dark);
    }

    .btn-check:focus + .btn-primary,
    .btn-primary:focus {
        color: var(--lh-white);
        background-color: var(--lh-teal-dark);
        border-color: var(--lh-teal-dark);
        box-shadow: 0 0 0 0.25rem rgba(50,128,149,.40);
    }

    .btn-check:checked + .btn-primary,
    .btn-check:active + .btn-primary,
    .btn-primary:active,
    .btn-primary.active,
    .show > .btn-primary.dropdown-toggle {
        color: var(--lh-white);
        background-color: var(--lh-teal-dark);
        border-color: var(--lh-teal-dark);
    }

        .btn-check:checked + .btn-primary:focus,
        .btn-check:active + .btn-primary:focus,
        .btn-primary:active:focus,
        .btn-primary.active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(50,128,149,.40);
        }

    .btn-primary:disabled,
    .btn-primary.disabled {
        color: var(--lh-white);
        background-color: var(--lh-teal);
        border-color: var(--lh-teal);
        opacity: .60;
    }

/* ---------------------------------------------------------
   BTN — SECONDARY  (Lima → texto NEGRO obligatorio)
   --------------------------------------------------------- */
.btn-secondary {
    color: var(--lh-black); /* ✅ era white — invisible sobre lima */
    background-color: var(--lh-lime); /* ✅ era #5d6d7e — fuera de paleta */
    border-color: var(--lh-lime);
    border-radius: 8px;
    font-weight: 600;
}

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

    .btn-check:focus + .btn-secondary,
    .btn-secondary:focus {
        color: var(--lh-black);
        background-color: var(--lh-lime-dark);
        border-color: var(--lh-lime-dark);
        box-shadow: 0 0 0 0.25rem rgba(193,213,101,.45);
    }

    .btn-check:checked + .btn-secondary,
    .btn-check:active + .btn-secondary,
    .btn-secondary:active,
    .btn-secondary.active,
    .show > .btn-secondary.dropdown-toggle {
        color: var(--lh-black);
        background-color: var(--lh-lime-dark);
        border-color: var(--lh-lime-dark);
    }

        .btn-check:checked + .btn-secondary:focus,
        .btn-check:active + .btn-secondary:focus,
        .btn-secondary:active:focus,
        .btn-secondary.active:focus,
        .show > .btn-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(193,213,101,.45);
        }

    .btn-secondary:disabled,
    .btn-secondary.disabled {
        color: var(--lh-black);
        background-color: var(--lh-lime);
        border-color: var(--lh-lime);
        opacity: .55;
    }

/* ---------------------------------------------------------
   BTN — DARK  (Negro → texto blanco)
   --------------------------------------------------------- */
.btn-dark {
    color: var(--lh-white);
    background-color: var(--lh-black);
    border-color: var(--lh-black);
    border-radius: 8px;
}

    .btn-dark:hover {
        color: var(--lh-white);
        background-color: #3a2820;
        border-color: #3a2820;
    }

    .btn-check:focus + .btn-dark,
    .btn-dark:focus {
        box-shadow: 0 0 0 0.25rem rgba(30,18,13,.40);
    }

    .btn-dark:disabled,
    .btn-dark.disabled {
        color: var(--lh-white);
        background-color: var(--lh-black);
        border-color: var(--lh-black);
        opacity: .55;
    }

/* ---------------------------------------------------------
   BTN — OUTLINE PRIMARY  (borde/texto teal → hover fondo teal, texto blanco)
   --------------------------------------------------------- */
.btn-outline-primary {
    color: var(--lh-teal);
    border-color: var(--lh-teal);
    border-radius: 8px;
}

    .btn-outline-primary:hover {
        color: var(--lh-white); /* ✅ blanco sobre teal */
        background-color: var(--lh-teal);
        border-color: var(--lh-teal);
    }

    .btn-check:focus + .btn-outline-primary,
    .btn-outline-primary:focus {
        box-shadow: 0 0 0 0.25rem rgba(50,128,149,.40);
    }

    .btn-check:checked + .btn-outline-primary,
    .btn-check:active + .btn-outline-primary,
    .btn-outline-primary:active,
    .btn-outline-primary.active,
    .btn-outline-primary.dropdown-toggle.show {
        color: var(--lh-white);
        background-color: var(--lh-teal);
        border-color: var(--lh-teal);
    }

    .btn-outline-primary:disabled,
    .btn-outline-primary.disabled {
        color: var(--lh-teal);
        background-color: transparent;
        opacity: .55;
    }

/* ---------------------------------------------------------
   BTN — OUTLINE SECONDARY  (borde/texto lima → hover fondo lima, texto NEGRO)
   --------------------------------------------------------- */
.btn-outline-secondary {
    color: var(--lh-lime-dark); /* lima pura sobre blanco: contraste bajo, usar lima oscura */
    border-color: var(--lh-lime-dark);
    border-radius: 8px;
}

    .btn-outline-secondary:hover {
        color: var(--lh-black); /* ✅ era white — invisible sobre lima */
        background-color: var(--lh-lime);
        border-color: var(--lh-lime);
    }

    .btn-check:focus + .btn-outline-secondary,
    .btn-outline-secondary:focus {
        box-shadow: 0 0 0 0.25rem rgba(193,213,101,.45);
    }

    .btn-check:checked + .btn-outline-secondary,
    .btn-check:active + .btn-outline-secondary,
    .btn-outline-secondary:active,
    .btn-outline-secondary.active,
    .btn-outline-secondary.dropdown-toggle.show {
        color: var(--lh-black); /* ✅ texto negro sobre lima */
        background-color: var(--lh-lime);
        border-color: var(--lh-lime);
    }

    .btn-outline-secondary:disabled,
    .btn-outline-secondary.disabled {
        color: var(--lh-lime-dark);
        background-color: transparent;
        opacity: .55;
    }

/* ---------------------------------------------------------
   BTN — OUTLINE DARK  (borde/texto negro)
   --------------------------------------------------------- */
.btn-outline-dark {
    color: var(--lh-black);
    border-color: var(--lh-black);
    border-radius: 8px;
}

    .btn-outline-dark:hover {
        color: var(--lh-white);
        background-color: var(--lh-black);
        border-color: var(--lh-black);
    }

    .btn-outline-dark:disabled,
    .btn-outline-dark.disabled {
        color: var(--lh-black);
        background-color: transparent;
        opacity: .55;
    }

/* ---------------------------------------------------------
   BADGES
   --------------------------------------------------------- */
/* Teal → texto blanco */
.badge.bg-primary,
.badge.bg-info {
    color: var(--lh-white) !important;
}

/* Lima → texto negro obligatorio */
.badge.bg-secondary,
.badge.bg-success {
    color: var(--lh-black) !important;
    font-weight: 700;
}

/* Negro → texto blanco */
.badge.bg-dark {
    color: var(--lh-white) !important;
}

/* Warning Bootstrap (#ffc107) → texto negro */
.badge.bg-warning {
    color: var(--lh-black) !important;
}

/* ---------------------------------------------------------
   ALERTS
   --------------------------------------------------------- */
.alert-primary {
    background-color: rgba(50,128,149,.12);
    border-color: var(--lh-teal);
    color: var(--lh-teal-dark);
}

    .alert-primary .alert-heading {
        color: var(--lh-teal-dark);
    }

/* Lima como fondo → texto negro ✅ */
.alert-secondary,
.alert-success {
    background-color: rgba(193,213,101,.20);
    border-color: var(--lh-lime-dark);
    color: var(--lh-black);
}

    .alert-secondary .alert-heading,
    .alert-success .alert-heading {
        color: var(--lh-black);
    }

.alert-dark {
    background-color: rgba(30,18,13,.08);
    border-color: var(--lh-black);
    color: var(--lh-black);
}

.alert-info {
    background-color: rgba(50,128,149,.10);
    border-color: var(--lh-teal);
    color: var(--lh-teal-dark);
}

/* ---------------------------------------------------------
   FORMULARIOS
   --------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--lh-teal);
    box-shadow: 0 0 0 0.2rem rgba(50,128,149,.25);
}

.form-check-input:checked {
    background-color: var(--lh-teal);
    border-color: var(--lh-teal);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(50,128,149,.25);
}

/* Labels de formulario */
label.form-label {
    color: var(--lh-black);
    font-weight: 600;
}

.text-xs.text-muted {
    color: rgba(30,18,13,.55) !important;
}

/* ---------------------------------------------------------
   PAGINACIÓN (DataTables)
   --------------------------------------------------------- */
.page-link {
    color: var(--lh-teal);
    border: 1px solid var(--lh-border);
}

    .page-link:hover {
        color: var(--lh-white);
        background-color: var(--lh-teal);
        border-color: var(--lh-teal);
    }

.page-item.active .page-link {
    color: var(--lh-white);
    background-color: var(--lh-teal);
    border-color: var(--lh-teal);
}

.page-item.disabled .page-link {
    color: rgba(30,18,13,.35);
}

/* ---------------------------------------------------------
   TABS
   --------------------------------------------------------- */
.nav-tabs .nav-link {
    color: var(--lh-teal);
    border-color: transparent;
}

    .nav-tabs .nav-link:hover {
        border-color: var(--lh-teal);
        color: var(--lh-teal-dark);
    }

    .nav-tabs .nav-link.active {
        color: var(--lh-black);
        background-color: var(--lh-white);
        border-color: var(--lh-teal) var(--lh-teal) var(--lh-white);
        font-weight: 700;
    }

/* ---------------------------------------------------------
   PROGRESS BAR
   --------------------------------------------------------- */
.progress-bar {
    background-color: var(--lh-teal);
    color: var(--lh-white);
}

    .progress-bar.bg-success {
        background-color: var(--lh-lime) !important;
        color: var(--lh-black) !important; /* ✅ lima → texto negro */
    }

/* ---------------------------------------------------------
   TOOLTIPS
   --------------------------------------------------------- */
.tooltip-inner {
    background-color: var(--lh-black);
    color: var(--lh-white);
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--lh-black);
}

/* ---------------------------------------------------------
   SPINNER
   --------------------------------------------------------- */
.spinner-border {
    color: var(--lh-teal);
}

/* ---------------------------------------------------------
   ACORDEÓN (sidebar menú)
   --------------------------------------------------------- */
.accordion-button:not(.collapsed) {
    color: var(--lh-lime); /* lima sobre teal: contraste OK ✅ */
    background-color: transparent;
    box-shadow: none;
}

/* ---------------------------------------------------------
   MODAL HEADERS — garantizar legibilidad
   --------------------------------------------------------- */
.modal-header {
    background-color: var(--lh-teal);
    color: var(--lh-white);
    border-radius: calc(var(--bs-modal-border-radius) - 1px) calc(var(--bs-modal-border-radius) - 1px) 0 0;
}

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

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

/* ---------------------------------------------------------
   CARD HEADERS con clase bg-*
   --------------------------------------------------------- */
.card-header.bg-primary {
    color: var(--lh-white) !important;
}

.card-header.bg-dark {
    color: var(--lh-white) !important;
}

.card-header.bg-secondary,
.card-header.bg-success {
    color: var(--lh-black) !important;
}
/* lima → negro */

/* ---------------------------------------------------------
   TABLE — variantes de color
   --------------------------------------------------------- */
.table-primary {
    --bs-table-color: var(--lh-white);
    background-color: var(--lh-teal);
}

.table-success {
    --bs-table-color: var(--lh-black);
    background-color: var(--lh-lime);
}

/* ---------------------------------------------------------
   LIST GROUP
   --------------------------------------------------------- */
.list-group-item-primary {
    background-color: rgba(50,128,149,.15);
    color: var(--lh-teal-dark);
}

.list-group-item-success {
    background-color: rgba(193,213,101,.20);
    color: var(--lh-black); /* lima → negro */
}

/* ---------------------------------------------------------
   SCROLLBAR personalizado (WebKit)
   --------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(30,18,13,.05);
}

::-webkit-scrollbar-thumb {
    background: var(--lh-teal);
    border-radius: 6px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--lh-teal-dark);
    }