/* ============================================================================
   NEXUS · Liquid Glass design system
   ----------------------------------------------------------------------------
   Aproximación CSS al lenguaje visual "Liquid Glass" (Apple, iOS 26).
   Portado desde Nexa.Web — adaptado a la altura de header de Nexus (4.75rem).
   ----------------------------------------------------------------------------
   Cómo usar:
     1) Aplicar `.lg-modal` al `<div class="modal">` raíz.
     2) Para superficies fuera de modales, usar `.lg-surface` directamente.
     3) Para inputs/botones internos, usar `.lg-input`, `.lg-btn-primary`,
        `.lg-btn-ghost`, `.lg-chip`.
   ============================================================================ */

:root {
    --lg-blur: 28px;
    --lg-saturate: 180%;
    --lg-radius: 22px;
    --lg-radius-sm: 14px;

    --lg-tint: rgba(255, 255, 255, 0.55);
    --lg-tint-strong: rgba(255, 255, 255, 0.72);

    --lg-highlight: linear-gradient(180deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.35) 35%,
        rgba(255, 255, 255, 0) 70%);

    --lg-border-gradient: linear-gradient(135deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.15) 40%,
        rgba(255, 255, 255, 0.05) 60%,
        rgba(255, 255, 255, 0.5) 100%);

    --lg-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 -1px 0 rgba(255, 255, 255, 0.15) inset,
        0 24px 60px -16px rgba(15, 23, 42, 0.35),
        0 8px 24px -8px rgba(15, 23, 42, 0.18);

    --lg-accent: #136a9f;
    --lg-warning: #f59e0b;
    --lg-danger: #dc2626;
    --lg-success: #059669;
}

/* ============================================================================
   .lg-surface — superficie genérica de vidrio
   ============================================================================ */
.lg-surface {
    position: relative;
    background: var(--lg-tint);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    border-radius: var(--lg-radius);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: var(--lg-shadow);
    overflow: hidden;
}

.lg-surface::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 50%;
    background: var(--lg-highlight);
    opacity: 0.6;
    pointer-events: none;
    mix-blend-mode: screen;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.lg-surface::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -20%;
    width: 60%;
    height: 80%;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
    filter: blur(8px);
    opacity: 0.7;
}

.lg-surface-strong {
    background: var(--lg-tint-strong);
}

/* ============================================================================
   .lg-modal — aplicar al <div class="modal lg-modal">
   ============================================================================ */
.lg-modal .modal-dialog {
    padding: 8px;
}

.lg-modal .modal-content {
    background: var(--lg-tint);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    border-radius: var(--lg-radius);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: var(--lg-shadow);
    overflow: hidden;
    position: relative;
}

.lg-modal .modal-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 55%;
    background: var(--lg-highlight);
    opacity: 0.55;
    pointer-events: none;
    mix-blend-mode: screen;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    z-index: 0;
}

.lg-modal .modal-content::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -10%;
    width: 55%;
    height: 70%;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0) 65%);
    pointer-events: none;
    filter: blur(10px);
    opacity: 0.65;
    z-index: 0;
}

.lg-modal .modal-header,
.lg-modal .modal-body,
.lg-modal .modal-footer {
    position: relative;
    z-index: 1;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.lg-modal .modal-header {
    padding: 1.1rem 1.4rem;
}

.lg-modal .modal-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.lg-modal .modal-body {
    padding: 1.4rem;
}

.lg-modal .modal-footer {
    padding: 1rem 1.4rem;
    gap: 0.5rem;
}

.lg-modal .btn-close {
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.6));
    opacity: 0.6;
}

.lg-modal .btn-close:hover {
    opacity: 1;
}

body:has(.lg-modal.show) .modal-backdrop {
    background: rgba(15, 23, 42, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 1;
}

/* ============================================================================
   Controles internos
   ============================================================================ */
.lg-input {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 12px -6px rgba(15, 23, 42, 0.15) !important;
    border-radius: var(--lg-radius-sm) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.lg-input:focus {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(19, 106, 159, 0.55) !important;
    box-shadow:
        0 0 0 4px rgba(19, 106, 159, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}

.lg-btn-primary,
.lg-btn-ghost,
.lg-btn-danger {
    border-radius: var(--lg-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.55);
    padding: 0.55rem 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.25s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
}

.lg-btn-primary {
    background: linear-gradient(135deg,
        rgba(30, 145, 174, 0.95) 0%,
        rgba(19, 106, 159, 0.95) 100%);
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
        0 8px 20px -8px rgba(19, 106, 159, 0.5);
}

.lg-btn-primary:hover {
    background: linear-gradient(135deg,
        rgba(43, 168, 198, 0.97) 0%,
        rgba(24, 121, 173, 0.97) 100%);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
        0 12px 24px -8px rgba(19, 106, 159, 0.6);
    color: #fff;
}

.lg-btn-primary:active {
    transform: translateY(0);
}

.lg-btn-primary:disabled {
    opacity: 0.55;
    transform: none;
}

.lg-btn-ghost {
    background: rgba(255, 255, 255, 0.45);
    color: #1f2937;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 12px -6px rgba(15, 23, 42, 0.15);
}

.lg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.7);
    color: #111827;
}

.lg-chip {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--lg-radius-sm);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 12px -6px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    color: #1f2937;
}

.lg-chip--info    { background: rgba(30, 145, 174, 0.15); border-color: rgba(30, 145, 174, 0.40); color: #0d4a6e; }
.lg-chip--warning { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.4);  color: #78350f; }
.lg-chip--danger  { background: rgba(220, 38, 38, 0.16);  border-color: rgba(220, 38, 38, 0.4);   color: #7f1d1d; }
.lg-chip--success { background: rgba(5, 150, 105, 0.16);  border-color: rgba(5, 150, 105, 0.4);   color: #064e3b; }

.lg-modal-header--warning { box-shadow: inset 0 0 0 9999px rgba(245, 158, 11, 0.18); }
.lg-modal-header--danger  { box-shadow: inset 0 0 0 9999px rgba(220, 38, 38, 0.16); }
.lg-modal-header--info    { box-shadow: inset 0 0 0 9999px rgba(30, 145, 174, 0.15); }

/* ============================================================================
   Animación de entrada (suave, tipo iOS)
   ============================================================================ */
.lg-modal.fade .modal-dialog {
    transform: translateY(12px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.lg-modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

/* ============================================================================
   FAB (Floating Action Button) — Liquid Glass primario
   ============================================================================ */
.lg-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none;
    z-index: 1040;

    background: linear-gradient(135deg,
        rgba(30, 145, 174, 0.92) 0%,
        rgba(19, 106, 159, 0.92) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    color: #fff;

    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 -1px 0 rgba(0, 0, 0, 0.15) inset,
        0 8px 22px -4px rgba(19, 106, 159, 0.45),
        0 4px 8px -2px rgba(15, 23, 42, 0.18);

    transition:
        width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.18s ease,
        box-shadow 0.22s ease;
}

.lg-fab::before {
    content: "";
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.40) 0%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0) 100%);
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
}

.lg-fab > * {
    position: relative;
    z-index: 1;
}

.lg-fab i {
    font-size: 22px;
    transition: margin-right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.lg-fab .lg-fab-label {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    transition:
        max-width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.18s ease,
        margin-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.lg-fab:hover {
    width: 160px;
    border-radius: 28px;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 -1px 0 rgba(0, 0, 0, 0.15) inset,
        0 14px 28px -6px rgba(19, 106, 159, 0.55),
        0 6px 12px -3px rgba(15, 23, 42, 0.22);
}

.lg-fab:hover i {
    margin-right: 4px;
}

.lg-fab:hover .lg-fab-label {
    max-width: 110px;
    opacity: 1;
    margin-left: 4px;
}

.lg-fab:active {
    transform: translateY(0);
}

.lg-fab:focus-visible {
    outline: 3px solid rgba(19, 106, 159, 0.35);
    outline-offset: 3px;
}

@media (max-width: 576px) {
    .lg-fab {
        right: 16px;
        bottom: 80px;
        width: 52px;
        height: 52px;
    }
    .lg-fab:hover {
        width: 52px;
        border-radius: 50%;
    }
    .lg-fab:hover i {
        margin-right: 0;
    }
    .lg-fab:hover .lg-fab-label,
    .lg-fab .lg-fab-label {
        display: none;
    }
}

/* ============================================================================
   Barra del header — Liquid Glass (fixed translúcida estilo iOS)
   ============================================================================ */
.app-header {
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.app-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.7) 20%,
        rgba(255, 255, 255, 0.7) 80%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ============================================================================
   Header chrome refinements
   NOTE: en Nexus el header mide 4.75rem (definido en _Header.cshtml inline),
   NO clampeamos altura acá — dejamos que el header local mande.
   ============================================================================ */
.app-header .menu .menu-item .menu-link {
    color: #475569;
    padding: 0.4rem 0.75rem;
    margin: 0 2px;
    border-radius: 12px;
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.app-header .menu .menu-item .menu-link > span,
.app-header .menu .menu-item .menu-link > .menu-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.app-header .menu .menu-item .menu-link .fa-lg,
.app-header .menu .menu-item .menu-link > i.fa,
.app-header .menu .menu-item .menu-link > i[class*="fa-"] {
    font-size: 1.1rem;
}

.app-header .menu .menu-item .menu-link:hover {
    background-color: rgba(30, 145, 174, 0.10);
    color: #136a9f;
    text-decoration: none;
}

.app-header .menu .menu-item.dropdown.show > .menu-link,
.app-header .menu .menu-item .menu-link[aria-expanded="true"] {
    background-color: rgba(19, 106, 159, 0.14);
    color: #0d4a6e;
    box-shadow: 0 0 0 1px rgba(19, 106, 159, 0.22);
}

.app-header .menu .menu-link .badge.bg-danger,
.app-header .menu .menu-link .badge.bg-primary {
    border: none;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85),
                0 2px 6px rgba(15, 23, 42, 0.18);
}
.app-header .menu .menu-link .badge.bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85),
                0 2px 6px rgba(220, 38, 38, 0.35);
}
.app-header .menu .menu-link .badge.bg-primary {
    background: linear-gradient(135deg, #1e91ae 0%, #136a9f 100%) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85),
                0 2px 6px rgba(19, 106, 159, 0.32);
}

.app-header > .brand {
    position: relative;
    overflow: hidden;
}
.app-header > .brand::after {
    content: "";
    position: absolute;
    right: -0.25rem;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0) 0%,
        rgba(15, 23, 42, 0.10) 50%,
        rgba(15, 23, 42, 0) 100%);
    pointer-events: none;
}

/* Chip "selector" (empresa / filial) — paleta Nexa */
.app-header .menu .menu-item .menu-link:has(> .menu-icon > i.fa-building),
.app-header .menu .menu-item .menu-link:has(> .menu-icon > i.fa-briefcase) {
    background-color: rgba(19, 106, 159, 0.08);
    border: 1px solid rgba(19, 106, 159, 0.16);
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    gap: 0.35rem;
}

.app-header .menu .menu-item .menu-link:has(> .menu-icon > i.fa-building):hover,
.app-header .menu .menu-item .menu-link:has(> .menu-icon > i.fa-briefcase):hover {
    background-color: rgba(30, 145, 174, 0.14);
    border-color: rgba(30, 145, 174, 0.30);
}

.app-header .menu .menu-item.dropdown.show > .menu-link:has(> .menu-icon > i.fa-building),
.app-header .menu .menu-item.dropdown.show > .menu-link:has(> .menu-icon > i.fa-briefcase) {
    background-color: rgba(19, 106, 159, 0.20);
    border-color: rgba(19, 106, 159, 0.38);
}

.app-header .menu .menu-item .menu-link:has(> .menu-icon > i.fa-building) > .menu-icon > i.fa-building,
.app-header .menu .menu-item .menu-link:has(> .menu-icon > i.fa-briefcase) > .menu-icon > i.fa-briefcase {
    color: #136a9f;
    opacity: 0.9;
}

.app-header .menu .menu-item .menu-link .menu-img .bg-gray-800 {
    background: linear-gradient(135deg, #1e91ae 0%, #136a9f 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 4px 10px -2px rgba(19, 106, 159, 0.40);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.app-header .menu .menu-item .menu-link:hover .menu-img .bg-gray-800 {
    transform: scale(1.04);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 6px 14px -3px rgba(19, 106, 159, 0.55);
}

.app-header .menu-toggler .bar {
    background: #475569;
}

/* ============================================================================
   Header dropdowns — Liquid Glass automático
   ============================================================================ */
.app-header .menu-item.dropdown > .dropdown-menu {
    background: rgba(252, 253, 255, 0.94);
    -webkit-backdrop-filter: blur(50px) saturate(180%) brightness(1.2);
    backdrop-filter: blur(50px) saturate(180%) brightness(1.2);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--lg-radius);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 -1px 0 rgba(15, 23, 42, 0.04) inset,
        0 18px 38px -12px rgba(15, 23, 42, 0.28),
        0 8px 16px -6px rgba(15, 23, 42, 0.12);
    margin-top: 0.4rem;
    overflow: hidden;
}

.app-header .menu-item.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 55%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.18) 35%,
        rgba(255, 255, 255, 0) 75%);
    pointer-events: none;
    mix-blend-mode: screen;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    z-index: 0;
}

.app-header .menu-item.dropdown > .dropdown-menu > * {
    position: relative;
    z-index: 1;
}

.app-header .menu-item.dropdown > .dropdown-menu .dropdown-item {
    background: transparent;
    border-radius: 10px;
    padding: 0.45rem 0.75rem;
    color: #1f2937;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.app-header .menu-item.dropdown > .dropdown-menu .dropdown-item:hover,
.app-header .menu-item.dropdown > .dropdown-menu .dropdown-item:focus {
    background: rgba(30, 145, 174, 0.12);
    color: #136a9f;
}

.app-header .menu-item.dropdown > .dropdown-menu .dropdown-item.active {
    background: rgba(19, 106, 159, 0.16);
    color: #0d4a6e;
    font-weight: 600;
}

.app-header .menu-item.dropdown > .dropdown-menu .dropdown-header {
    color: #64748b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.6875rem;
    padding: 0.6rem 0.75rem 0.3rem;
}

.app-header .menu-item.dropdown > .dropdown-menu .dropdown-divider {
    border-top-color: rgba(15, 23, 42, 0.08);
    margin: 0.25rem 0;
}

.app-header .menu-item.dropdown > .dropdown-menu .border-bottom {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

.app-header .menu-item.dropdown > .dropdown-menu .list-group-flush > .list-group-item {
    background: transparent;
    border-color: rgba(15, 23, 42, 0.06);
    color: #1f2937;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.app-header .menu-item.dropdown > .dropdown-menu .list-group-item-action:hover,
.app-header .menu-item.dropdown > .dropdown-menu .list-group-item-action:focus {
    background: rgba(30, 145, 174, 0.10);
    color: #136a9f;
}

.app-header .menu-item.dropdown > .dropdown-menu .list-group-item.bg-danger-subtle {
    background: rgba(220, 38, 38, 0.08) !important;
    border-left: 3px solid var(--bs-danger, #dc2626);
    color: #7f1d1d;
}
.app-header .menu-item.dropdown > .dropdown-menu .list-group-item.bg-danger-subtle:hover {
    background: rgba(220, 38, 38, 0.14) !important;
    color: #7f1d1d;
}

@keyframes nx-header-dropdown-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.app-header .menu-item.dropdown.show > .dropdown-menu {
    animation: nx-header-dropdown-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: top right;
}

/* ============================================================================
   Fallbacks y accesibilidad
   ============================================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lg-surface,
    .lg-modal .modal-content,
    .app-header,
    .app-header .menu-item.dropdown > .dropdown-menu {
        background: rgba(255, 255, 255, 0.96);
    }
    .lg-chip,
    .lg-input,
    .lg-btn-ghost {
        background: rgba(255, 255, 255, 0.92);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .lg-surface,
    .lg-modal .modal-content,
    .app-header,
    .app-header .menu-item.dropdown > .dropdown-menu {
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .lg-surface::before,
    .lg-surface::after,
    .lg-modal .modal-content::before,
    .lg-modal .modal-content::after,
    .app-header::after,
    .app-header .menu-item.dropdown > .dropdown-menu::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lg-modal.fade .modal-dialog {
        transition: none;
        transform: none;
    }
    .lg-btn-primary,
    .lg-btn-ghost {
        transition: none;
    }
    .app-header .menu-item.dropdown.show > .dropdown-menu {
        animation: none;
    }
    .lg-fab,
    .lg-fab i,
    .lg-fab .lg-fab-label {
        transition: none;
    }
}

/* ============================================================================
   Tab bar (.lg-tabbar) — Liquid Glass para navegación secundaria
   ============================================================================ */
.lg-tabbar {
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: var(--lg-radius-sm, 14px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 6px 16px -6px rgba(15, 23, 42, 0.10),
        0 2px 4px -2px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    position: relative;
}

.lg-tabbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    mix-blend-mode: screen;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.lg-tabbar .card-body {
    position: relative;
    z-index: 1;
    background: transparent;
}

.lg-tabbar .nav-pills .nav-link {
    color: #64748b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 500;
    letter-spacing: -0.005em;
    padding: 0.55rem 0.85rem;
    transition:
        background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.18s ease,
        box-shadow 0.22s ease,
        transform 0.15s ease;
}

.lg-tabbar .nav-pills .nav-link i {
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.lg-tabbar .nav-pills .nav-link:hover:not(.active) {
    background: rgba(19, 106, 159, 0.07);
    color: var(--bs-primary, #136a9f);
    border-color: rgba(19, 106, 159, 0.12);
}

.lg-tabbar .nav-pills .nav-link:hover:not(.active) i {
    opacity: 1;
}

.lg-tabbar .nav-pills .nav-link.active {
    background: linear-gradient(180deg,
        rgba(30, 145, 174, 0.95) 0%,
        rgba(19, 106, 159, 0.95) 100%) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 600;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
        0 6px 14px -4px rgba(19, 106, 159, 0.5);
    transform: translateY(-1px);
}

.lg-tabbar .nav-pills .nav-link.active i {
    opacity: 1;
}

/* ============================================================================
   Hero cards (.lg-hero) + auto-upgrade de patrones legacy
   ============================================================================ */
.lg-hero,
.config-header,
.dash-hero {
    position: relative;
    overflow: hidden;
    font-family: var(--nx-font-sans, system-ui);
    letter-spacing: -0.01em;
}

.config-header,
.page-header-modern,
.estado-card .card-header,
.llamador-hero {
    background: linear-gradient(135deg, #1e91ae 0%, #136a9f 100%) !important;
    box-shadow: 0 6px 20px -6px rgba(19, 106, 159, 0.35) !important;
}

.page-header-modern {
    color: #fff;
    padding: 1.5rem 1.75rem;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    font-family: var(--nx-font-sans, system-ui);
}

.page-header-modern h1 {
    margin: 0 0 0.25rem;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.page-header-modern .subtitle,
.page-header-modern p.subtitle {
    opacity: 0.9;
    font-size: 0.95rem;
    margin: 0;
    color: #fff;
}

.page-header-modern::before {
    content: "";
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.20) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.page-header-modern::after {
    content: "";
    position: absolute;
    top: -25%;
    right: -10%;
    width: 50%;
    height: 75%;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0) 65%);
    pointer-events: none;
    filter: blur(10px);
    z-index: 0;
}

.page-header-modern > * {
    position: relative;
    z-index: 1;
}

.lg-hero h1, .lg-hero h2, .lg-hero h3,
.config-header h1, .config-header h2, .config-header h3,
.dash-hero h1, .dash-hero h2, .dash-hero h3 {
    letter-spacing: -0.02em;
    font-weight: 700;
}

.lg-hero::before,
.config-header::before,
.dash-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 55%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.07) 50%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.lg-hero::after,
.config-header::after,
.dash-hero::after {
    content: "";
    position: absolute;
    top: -25%;
    left: -10%;
    width: 55%;
    height: 75%;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0) 65%);
    pointer-events: none;
    filter: blur(10px);
    z-index: 0;
}

.lg-hero > *,
.config-header > *,
.dash-hero > * {
    position: relative;
    z-index: 1;
}

/* ============================================================================
   .lg-hero — clase nueva opt-in
   ============================================================================ */
.lg-hero {
    border-radius: var(--lg-radius, 22px);
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 18px 36px -14px rgba(15, 23, 42, 0.30),
        0 8px 16px -6px rgba(15, 23, 42, 0.15);
}

.lg-hero h1 {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
}

.lg-hero-subtitle {
    opacity: 0.88;
    font-size: 1rem;
    margin: 0;
}

.lg-hero--purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.lg-hero--blue   { background: linear-gradient(135deg, #1e91ae 0%, #136a9f 100%); }
.lg-hero--green  { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.lg-hero--pink   { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.lg-hero--orange { background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); }
.lg-hero--teal   { background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%); }

/* ============================================================================
   KPI cards (.lg-kpi)
   ============================================================================ */
.lg-kpi {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--lg-radius-sm, 14px);
    padding: 1rem 1.25rem;
    text-align: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 4px 12px -4px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.22s ease;
    position: relative;
    overflow: hidden;
}

.lg-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.lg-kpi > * {
    position: relative;
    z-index: 1;
}

.lg-kpi:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 8px 20px -6px rgba(15, 23, 42, 0.14);
}

.lg-kpi-icon {
    color: var(--bs-primary, #136a9f);
    opacity: 0.55;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    display: block;
}

.lg-kpi-value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--bs-body-color, #1f2937);
    margin-bottom: 0.2rem;
}

.lg-kpi-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin: 0;
}

.lg-kpi--success .lg-kpi-icon { color: #16a34a; }
.lg-kpi--warning .lg-kpi-icon { color: #f59e0b; }
.lg-kpi--danger  .lg-kpi-icon { color: #dc2626; }
.lg-kpi--info    .lg-kpi-icon { color: #0ea5e9; }
.lg-kpi--purple  .lg-kpi-icon { color: #8b5cf6; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lg-kpi { background: #ffffff; }
}

@media (prefers-reduced-transparency: reduce) {
    .lg-kpi {
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .lg-kpi::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-kpi { transition: none; }
}

/* ============================================================================
   list-group-item-action :active / :focus — tinte sutil Nexa
   ============================================================================ */
.list-group-item-action:active,
.list-group-item-action:focus {
    background-color: rgba(30, 145, 174, 0.10) !important;
    color: inherit !important;
    border-color: rgba(19, 106, 159, 0.28) !important;
}

.list-group-item-action:focus-visible {
    outline: 3px solid rgba(19, 106, 159, 0.25);
    outline-offset: -1px;
}

/* ============================================================================
   Underline-style tabs (.nav-tabs) — treatment global
   ============================================================================ */
.nav-tabs {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    color: #64748b;
    background: transparent;
    border: none !important;
    border-radius: 10px 10px 0 0;
    padding: 0.6rem 1rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    position: relative;
    margin-bottom: -1px;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.nav-tabs .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 2.5px;
    background: var(--bs-primary, #136a9f);
    border-radius: 2.5px 2.5px 0 0;
    opacity: 0;
    transition:
        left 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        right 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.18s ease;
}

.nav-tabs .nav-link:hover {
    background: rgba(19, 106, 159, 0.05);
    color: var(--bs-primary, #136a9f);
    isolation: isolate;
}

.nav-tabs .nav-link:hover::after {
    left: 30%;
    right: 30%;
    opacity: 0.5;
}

.nav-tabs .nav-link.active {
    color: var(--bs-primary, #136a9f) !important;
    background: transparent !important;
    font-weight: 600;
}

.nav-tabs .nav-link.active::after {
    left: 12%;
    right: 12%;
    opacity: 1;
    box-shadow: 0 0 10px rgba(19, 106, 159, 0.35);
}

.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link[aria-disabled="true"] {
    color: #cbd5e1 !important;
    cursor: not-allowed;
    background: transparent !important;
}

.nav-tabs .nav-link.disabled::after,
.nav-tabs .nav-link[aria-disabled="true"]::after {
    display: none;
}

.nav-tabs .dropdown-toggle::after {
    background: none !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
}

.card-header .nav-tabs.card-header-tabs {
    border-bottom: none;
}

@media (prefers-reduced-motion: reduce) {
    .nav-tabs .nav-link::after {
        transition: opacity 0.15s ease;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lg-tabbar { background: #ffffff; }
}

@media (prefers-reduced-transparency: reduce) {
    .lg-tabbar {
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .lg-tabbar::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-tabbar .nav-pills .nav-link {
        transition: none;
    }
}

/* ============================================================================
   SweetAlert2 — Liquid Glass theme
   ============================================================================ */
.swal2-container.swal2-backdrop-show {
    background: rgba(15, 23, 42, 0.45) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.swal2-popup {
    background: var(--lg-tint, rgba(255, 255, 255, 0.78)) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.15);
    backdrop-filter: blur(40px) saturate(180%) brightness(1.15);
    border-radius: var(--lg-radius, 22px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 24px 60px -16px rgba(15, 23, 42, 0.35),
        0 8px 24px -8px rgba(15, 23, 42, 0.18) !important;
    padding: 1.4rem !important;
    color: var(--bs-body-color, #1f2937) !important;
    position: relative;
    overflow: hidden;
}

.swal2-popup::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 55%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.18) 35%,
        rgba(255, 255, 255, 0) 75%);
    pointer-events: none;
    mix-blend-mode: screen;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    z-index: 0;
}

.swal2-popup > * {
    position: relative;
    z-index: 1;
}

.swal2-title {
    font-family: var(--nx-font-sans, system-ui) !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    color: var(--bs-body-color, #1f2937) !important;
    padding: 0.5rem 0 0.75rem !important;
}

.swal2-html-container {
    font-family: var(--nx-font-sans, system-ui) !important;
    color: var(--bs-secondary-color, #475569) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin: 0.25rem 0 1.25rem !important;
}

.swal2-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: var(--bs-secondary-color, #6b7280) !important;
    font-size: 0.85rem !important;
}

.swal2-actions {
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
}

.swal2-styled {
    border-radius: var(--lg-radius-sm, 14px) !important;
    padding: 0.55rem 1.2rem !important;
    font-family: var(--nx-font-sans, system-ui) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
}

.swal2-styled:focus {
    box-shadow: 0 0 0 4px rgba(19, 106, 159, 0.25) !important;
}

.swal2-confirm.swal2-styled {
    background: linear-gradient(180deg,
        rgba(19, 106, 159, 0.95) 0%,
        rgba(29, 78, 216, 0.95) 100%) !important;
    color: #fff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
        0 8px 20px -8px rgba(19, 106, 159, 0.5) !important;
}
.swal2-confirm.swal2-styled:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
        0 12px 24px -8px rgba(19, 106, 159, 0.6) !important;
}
.swal2-confirm.swal2-styled:active {
    transform: translateY(0);
}

.swal2-cancel.swal2-styled {
    background: rgba(255, 255, 255, 0.55) !important;
    color: #1f2937 !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 12px -6px rgba(15, 23, 42, 0.15) !important;
}
.swal2-cancel.swal2-styled:hover {
    background: rgba(255, 255, 255, 0.78) !important;
    color: #111827 !important;
    transform: translateY(-1px);
}

.swal2-deny.swal2-styled {
    background: linear-gradient(180deg,
        rgba(220, 38, 38, 0.95) 0%,
        rgba(185, 28, 28, 0.95) 100%) !important;
    color: #fff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
        0 8px 20px -8px rgba(220, 38, 38, 0.5) !important;
}
.swal2-deny.swal2-styled:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
        0 12px 24px -8px rgba(220, 38, 38, 0.6) !important;
}

.swal2-close {
    color: var(--bs-secondary-color, #6b7280) !important;
    font-size: 1.6rem !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
}
.swal2-close:hover {
    color: var(--bs-body-color, #1f2937) !important;
    transform: scale(1.1);
}

.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: var(--lg-radius-sm, 14px) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 12px -6px rgba(15, 23, 42, 0.15) !important;
    color: var(--bs-body-color, #1f2937) !important;
    font-family: var(--nx-font-sans, system-ui) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus,
.swal2-file:focus {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(19, 106, 159, 0.55) !important;
    box-shadow:
        0 0 0 4px rgba(19, 106, 159, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}

.swal2-validation-message {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #7f1d1d !important;
    border-radius: var(--lg-radius-sm, 14px) !important;
    padding: 0.55rem 0.9rem !important;
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
    font-weight: 500;
}

.swal2-popup.swal2-toast {
    padding: 0.75rem 1rem !important;
    border-radius: var(--lg-radius-sm, 14px) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 12px 28px -8px rgba(15, 23, 42, 0.25) !important;
}
.swal2-popup.swal2-toast .swal2-title {
    font-size: 0.95rem !important;
    padding: 0 !important;
    margin: 0 !important;
}
.swal2-popup.swal2-toast .swal2-icon {
    margin: 0 0.6rem 0 0 !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
}
.swal2-popup.swal2-toast::before {
    display: none;
}

.swal2-show {
    animation: nx-swal-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes nx-swal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .swal2-popup,
    .swal2-popup.swal2-toast {
        background: rgba(255, 255, 255, 0.97) !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .swal2-popup,
    .swal2-popup.swal2-toast {
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .swal2-popup::before { display: none; }
    .swal2-container.swal2-backdrop-show {
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .swal2-show {
        animation: none !important;
    }
    .swal2-styled {
        transition: none !important;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lg-fab {
        background: linear-gradient(135deg, #1e91ae 0%, #136a9f 100%);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .lg-fab {
        background: linear-gradient(135deg, #1e91ae 0%, #136a9f 100%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .lg-fab::before {
        display: none;
    }
}