/* ============================================================================
   NEXA · Liquid Glass design system
   ----------------------------------------------------------------------------
   Approximación CSS al lenguaje visual "Liquid Glass" (Apple, iOS 26).
   Documentación: docs/liquid-glass-design-system.md
   ----------------------------------------------------------------------------
   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 {
    /* --- Tokens base ------------------------------------------------------- */
    --lg-blur: 28px;
    --lg-saturate: 180%;
    --lg-radius: 22px;
    --lg-radius-sm: 14px;

    /* Tinte del material (vidrio claro). Mantener alfa bajo para que el blur
       del contenido detrás siga siendo el protagonista. */
    --lg-tint: rgba(255, 255, 255, 0.55);
    --lg-tint-strong: rgba(255, 255, 255, 0.72);

    /* Highlight superior tipo "specular" (reflejo del borde) */
    --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%);

    /* Borde con gradiente (simula refracción en el canto del vidrio) */
    --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%);

    /* Sombra elevada (suave + larga, no dura) */
    --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);

    /* Acentos */
    --lg-accent: #136a9f;   /* azul Nexa */
    --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;
}

/* Highlight superior (capa pseudo) — simula el reflejo del canto del vidrio */
.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;
}

/* Specular highlight de un solo punto (top-left), opcional */
.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 {
    /* dejar respirar la sombra */
    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;
}

/* Que header/body/footer queden por encima de los pseudo-elementos */
.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;
}

/* Backdrop más liviano cuando un modal liquid-glass está abierto.
   Usamos :has() para alcanzar el modal-backdrop hermano sin tocar JS. */
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
   ============================================================================ */

/* Inputs translúcidos */
.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;
}

/* Botones glass */
.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%,                       /* cyan Nexa */
        rgba(19, 106, 159, 0.95) 100%);                    /* azul Nexa */
    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%,                       /* cyan más vivo */
        rgba(24, 121, 173, 0.97) 100%);                    /* azul más profundo */
    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;
}

/* Chips translúcidos para alerts inline */
.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; }

/* Header de modal con tinte de severidad (reemplaza bg-warning et al) */
.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
   ----------------------------------------------------------------------------
   Material translúcido azul: gradient tinted + backdrop-filter + specular
   highlight superior + soft blue glow. Mantiene el comportamiento de
   "expand-on-hover" (círculo → pill con label) del FAB original.
   Markup: <a class="lg-fab"><i class="fa fa-xxx"></i><span class="lg-fab-label">Texto</span></a>
   ============================================================================ */
.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%,                       /* cyan Nexa */
        rgba(19, 106, 159, 0.92) 100%);                    /* azul Nexa */
    -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;
}

/* Specular highlight superior (mitad de altura, fade hacia abajo) */
.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;
}

/* Asegurar que los hijos queden encima del highlight */
.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;
}

/* Mobile: más chico, posicionado arriba de barras de navegación nativa */
@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)
   ----------------------------------------------------------------------------
   El template setea `.app-header { position: fixed; top: 0; height: 3.75rem;
   background: var(--app-header-bg); z-index: 1030; }`. Aprovechamos eso para
   poner el material de vidrio — el contenido scrollea por debajo y se ve
   "shimmer" a través del blur.
   ============================================================================ */
.app-header {
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    /* Una sola línea de separación: hairline 1px pegada al borde inferior del
       header. NO usar box-shadow exterior — combinarlas crea "doble borde"
       (la línea real + un glow más abajo que se lee como segunda línea). */
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

/* Highlight superior fino tipo specular */
.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 — Tier 1 + Tier 2
   ----------------------------------------------------------------------------
   Colores, contrastes y micro-interacciones del header. Sin tocar HTML.
   ============================================================================ */

/* 1. Iconos del header: bajar de #212837 (gris casi negro, "bold") a slate-600
      para que se vean refinados sobre el material glass de la barra.
      IMPORTANTE: el header es altura fija 3.75rem (60px). Mantener el
      contenido en una sola línea con nowrap + bajar padding vertical, sino
      el header se estira y el <img> del logo (max-height:100% del parent)
      se agranda y termina sobresaliendo abajo. */
.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;
}

/* Los hijos del menu-link no deben wrappear tampoco (span de oficina, menu-text) */
.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;
}

/* 8. Iconos un poco más chicos para balance con la barra fija de 60px */
.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;
}

/* 2. Hover state — paleta Nexa (cyan tinted bg, texto azul Nexa) */
.app-header .menu .menu-item .menu-link:hover {
    background-color: rgba(30, 145, 174, 0.10);                /* cyan Nexa */
    color: #136a9f;                                             /* azul Nexa */
    text-decoration: none;
}

/* 3. Active state — paleta Nexa más intensa para que se distinga del hover */
.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);                /* azul Nexa */
    color: #0d4a6e;                                             /* navy Nexa */
    box-shadow: 0 0 0 1px rgba(19, 106, 159, 0.22);
}

/* 4. Badges (.bg-danger en bells) — gradient + halo blanco + sombra colorada.
      El bg-primary lo pasamos a azul Nexa para coherencia con el resto. */
.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;   /* cyan → azul Nexa */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85),
                0 2px 6px rgba(19, 106, 159, 0.32);
}

/* 5. Divisor entre brand y resto del header — línea vertical 1px con fade
      vertical para separar visualmente la marca del menú de la derecha.
      También: garantizar que el logo NUNCA salga del header (cap de altura
      duro sobre el <img> del brand para evitar spillover si por algún motivo
      el header crece). */
.app-header > .brand {
    position: relative;
    overflow: hidden;
}
.app-header > .brand .brand-logo img {
    max-height: 2.5rem;
    width: auto;
    object-fit: contain;
}
.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;
}

/* Defensa adicional: forzar al header a mantener altura EXACTA de 3.75rem
   (60px). El template ya define height: 3.75rem pero el flex con content
   puede empujarlo a crecer. Con min+max iguales el header queda anclado.
   NO usar `overflow: hidden` acá — clipearía los dropdowns (position:absolute
   hijos de los menu-item) que se abren abajo del header. */
.app-header {
    min-height: 3.75rem;
    max-height: 3.75rem;
}

/* 6. Office selector como "chip" — paleta Nexa (azul Nexa tinted) */
.app-header .menu .menu-item .menu-link:has(> i.fa-building) {
    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(> i.fa-building):hover {
    background-color: rgba(30, 145, 174, 0.14);                /* cyan en hover */
    border-color: rgba(30, 145, 174, 0.30);
}

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

/* El ícono del building dentro del chip — azul Nexa */
.app-header .menu .menu-item .menu-link:has(> i.fa-building) > i.fa-building {
    color: #136a9f;
    opacity: 0.9;
}

/* 7. Avatar de usuario — gradient cyan → azul Nexa (mismo que sidebar rail
      y hero de OficinaSelect). Coherencia visual fuerte. */
.app-header .menu .menu-item .menu-link .menu-img .bg-gray-800 {
    background: linear-gradient(135deg, #1e91ae 0%, #136a9f 100%) !important;   /* cyan → azul Nexa */
    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);
}

/* Hamburger / toggle bars — bajar a slate-600 para coherencia con los iconos */
.app-header .menu-toggler .bar {
    background: #475569;
}

/* ============================================================================
   Header dropdowns — Liquid Glass automático
   ----------------------------------------------------------------------------
   Aplica a TODO `.dropdown-menu` dentro de `.app-header`. Cubre:
     · #bellMensajes  (notificaciones de mensajería)
     · #bellTickets   (notificaciones de tickets, partial _BellTickets)
     · Oficinas       (selector cuando hay > 1 oficina)
     · Usuario        (Cerrar sesión)
     · Cualquier dropdown nuevo que se agregue al header en el futuro.
   ============================================================================ */
.app-header .menu-item.dropdown > .dropdown-menu {
    /* Material "thick" estilo iOS:
         - blur 50px difumina formas, saturate mantiene vivacidad de color
         - brightness 1.2 blanquea el contenido detrás
         - alpha 0.94 garantiza legibilidad incluso sobre el hero gradient
       Si después de probar querés MÁS sensación de vidrio (más translucidez),
       bajar el alpha a 0.85-0.88 — la lectura se mantiene salvo sobre cards
       de color muy fuerte. */
    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;
    /* IMPORTANTE: NO setear position aquí. Bootstrap usa position:absolute por
       default y el pseudo ::before del highlight ya se posiciona contra este
       elemento porque "absolute" cuenta como containing block para sus hijos
       absolute. Si forzamos relative, el dropdown sale del flujo flotante y
       empuja todo el contenido abajo. */
}

/* Highlight tipo specular en el canto superior */
.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;
}

/* Asegurar que el contenido quede encima del highlight */
.app-header .menu-item.dropdown > .dropdown-menu > * {
    position: relative;
    z-index: 1;
}

/* Items: dropdown-item (oficinas, usuario) y list-group-item (bells) */
.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);              /* cyan Nexa tinted */
    color: #136a9f;                                     /* azul Nexa */
}

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

/* Header chiquito de sección (ej. "Cambiar oficina") */
.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;
}

/* Bells: header interno + list-group-flush */
.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);              /* cyan Nexa tinted */
    color: #136a9f;                                     /* azul Nexa */
}

/* Mensajes/tickets no leídos (bg-danger-subtle) — pasan a tinte glass con rail rojo */
.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;
}

/* Animación de entrada — sutil rise + fade. Se dispara al agregarse .show */
@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
   ============================================================================ */

/* Browsers sin backdrop-filter (Firefox < 103 si el flag no está activado) */
@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);
    }
}

/* Respeta la preferencia "reducir transparencia / movimiento" del SO */
@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
   ----------------------------------------------------------------------------
   Diseñado para el partial `_FacturacionNavBar.cshtml` y reusable en otros
   sub-navs estilo "tabs/pills" (PMI, AAMM, CIN, Adherentes, etc).
   Markup esperado:
     <div class="card lg-tabbar">
       <div class="card-body">
         <ul class="nav nav-pills nav-fill">
           <li class="nav-item">
             <a class="nav-link [active]" href="...">
               <i class="fa ..."></i> Texto
             </a>
           </li>
         </ul>
       </div>
     </div>
   ============================================================================ */
.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;
}

/* Highlight superior sutil */
.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;
}

/* Tabs en estado normal */
.lg-tabbar .nav-pills .nav-link {
    color: #64748b;                      /* slate-500: secundario */
    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;
}

/* Hover (no-activo): tinte primary sutil */
.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;
}

/* Active: gradient cyan→azul Nexa con glow */
.lg-tabbar .nav-pills .nav-link.active {
    background: linear-gradient(180deg,
        rgba(30, 145, 174, 0.95) 0%,                       /* cyan Nexa arriba */
        rgba(19, 106, 159, 0.95) 100%) !important;         /* azul Nexa abajo */
    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
   ----------------------------------------------------------------------------
   Cubre TANTO la clase nueva `.lg-hero` (opt-in) como las clases existentes
   `.config-header` (Totems/Index, Turnos/Hub) y `.dash-hero` (dashboards).
   Estos últimos ya definen su propio `background: linear-gradient(...)` con
   sus colores característicos — NO los pisamos. Solo agregamos overlay glass
   por encima (highlight superior + specular point + typography refinement).
   ============================================================================ */
.lg-hero,
.config-header,
.dash-hero {
    position: relative;
    overflow: hidden;
    font-family: var(--nx-font-sans, system-ui);
    letter-spacing: -0.01em;
}

/* Override del gradient morado/indigo del template SeanTheme en los hubs.
   Las 4 vistas que usan `.config-header` (Totems, Turnos/Hub, Facturacion,
   Configuracion) tienen su gradient en `<style>` inline #667eea → #764ba2.
   Acá lo pisamos con la paleta Nexa cyan → azul. Necesario !important porque
   los <style> locales cargan después de este archivo.
   `.dash-hero` (Consultorio/Dashboard, DemandaEspontanea/Dashboard) lo dejamos
   con su gradient propio (verde / azul oscuro) — esas dashboards eligieron
   colores específicos para diferenciar contexto, no son hubs genéricos. */
.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` — promovido a componente global completo. Algunas
   vistas (Turnos/Index, DemandaEspontanea) tienen estilos locales además de
   esta clase; los locales ganan donde definen lo mismo (specificity igual,
   cargan después). Pero vistas que SOLO declaran la clase sin estilos
   locales (ej. AsignacionMasiva) reciben todo de acá. */
.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;
}

/* Highlight superior (specular del vidrio) — igual que .lg-hero */
.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;
}

/* Specular point top-right (luz puntual) */
.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;
}

/* Refinement de typography dentro del hero (sin pisar tamaños locales) */
.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;
}

/* Highlight superior tipo specular — fade blanco desde arriba */
.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;
}

/* Punto especular (highlight tipo "luz del sol") en top-left */
.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;
}

/* Contenido encima del overlay */
.lg-hero > *,
.config-header > *,
.dash-hero > * {
    position: relative;
    z-index: 1;
}

/* ============================================================================
   .lg-hero — clase nueva opt-in para futuras pantallas
   ----------------------------------------------------------------------------
   Markup base:
     <div class="lg-hero lg-hero--purple">
         <h1>Título principal</h1>
         <p class="lg-hero-subtitle">Subtítulo o descripción</p>
     </div>
   ============================================================================ */
.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;
}

/* Variantes de color — usar como modificador */
.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) — clase opt-in para nuevos dashboards
   ----------------------------------------------------------------------------
   Markup base:
     <div class="lg-kpi lg-kpi--success">
         <i class="fa fa-users lg-kpi-icon"></i>
         <div class="lg-kpi-value">128</div>
         <div class="lg-kpi-label">Afiliados activos</div>
     </div>
   ============================================================================ */
.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;
}

/* Highlight superior */
.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;
}

/* Variantes de acento — solo cambian el color del ícono */
.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; }

/* Fallbacks lg-kpi */
@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 — fix global
   ----------------------------------------------------------------------------
   El template (SeanTheme) pisa el :active/:focus default de Bootstrap con
   --app-component-active-bg que es un azul fuerte del brand original. Acá
   lo reemplazamos por un tinte sutil cyan Nexa para coherencia con el resto
   del system (sidebar, OficinaSelect, Home, header chrome, etc).

   IMPORTANTE: este rule cubre SOLO los estados transient (`:active` cuando
   hacés mousedown, `:focus` cuando entra por teclado). NO toca `.active`
   (clase explícita) porque ese suele ser diseño intencional por vista
   (tabs seleccionados, items pinned, sidebar selected, etc).
   ============================================================================ */
.list-group-item-action:active,
.list-group-item-action:focus {
    background-color: rgba(30, 145, 174, 0.10) !important;     /* cyan Nexa tinted */
    color: inherit !important;
    border-color: rgba(19, 106, 159, 0.28) !important;
}

/* Focus visible (accesibilidad teclado) — outline azul Nexa */
.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 automático
   ----------------------------------------------------------------------------
   Modernizamos los `.nav-tabs` clásicos de Bootstrap sin tocar markup. Cubre
   ~14 vistas (Tickets, Turnos, Multilane, AtencionConsultorio, Profesionales,
   Afiliado V2, etc) que usan el patrón `<ul class="nav nav-tabs">`.

   Decisión: NO los convertimos a pills (eso sería invasivo). Mantenemos el
   look "tab underline" pero refinado:
     - hairline gris en el borde inferior del nav
     - indicator bar 2.5px animado que crece al centro del tab activo
     - hover sutil tinted + indicator preview a 50% opacity
     - colores Inter (slate-500 inactivo, primary activo)
     - sin chunky borders cuadrados de Bootstrap default
   ============================================================================ */
.nav-tabs {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    color: #64748b;                    /* slate-500 */
    background: transparent;
    border: none !important;            /* matar los bordes laterales/top de Bootstrap */
    border-radius: 10px 10px 0 0;
    padding: 0.6rem 1rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    position: relative;
    margin-bottom: -1px;                /* solapar el border-bottom del nav-tabs */
    transition: color 0.18s ease, background-color 0.18s ease;
}

/* Indicator bar animado — se dibuja como pseudo `::after` con left/right
   simétricos. En idle ocupa 0% (invisible), en hover 30% (preview), en
   active 12% (indicator fuerte). Easing iOS para sentir premium. */
.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);
}

/* Disabled state: opacidad reducida, sin interacción */
.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;
}

/* Dropdowns dentro de nav-tabs: heredan el look del menu-link normal,
   pero el indicator bar también va al `.nav-link.dropdown-toggle` activo */
.nav-tabs .dropdown-toggle::after {
    /* el ::after de dropdown-toggle es el caret, NO nuestro indicator —
       no lo pisamos. Bootstrap maneja el caret aparte. */
    background: none !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
}

/* card-header-tabs: cuando los nav-tabs viven dentro del header de una
   `.card` (patrón usado en Tickets, Multilane), Bootstrap les pone
   negative margins para que se peguen al borde del card. No tocar layout. */
.card-header .nav-tabs.card-header-tabs {
    border-bottom: none;                /* el card-header ya tiene su propio borde */
}

/* Reduced motion: cortar la animación del indicator */
@media (prefers-reduced-motion: reduce) {
    .nav-tabs .nav-link::after {
        transition: opacity 0.15s ease;
    }
}

/* Fallbacks del tabbar */
@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
   ----------------------------------------------------------------------------
   Override del look default de SweetAlert2 (v11) para que matchee con el
   sistema glass. NO toca JS — todos los `Swal.fire(...)` siguen funcionando.
   Usamos !important selectivo porque Swal aplica algunos estilos inline
   (confirmButtonColor / cancelButtonColor passados en JS) y porque su CSS
   propio tiene specificity high en algunos selectores.
   Cubre:
     - Popup modal (.swal2-popup)
     - Backdrop (.swal2-container)
     - Título, texto, botones (confirm / cancel / deny)
     - Inputs, validation message, footer
     - Toasts (cuando se usa `toast: true`)
   ============================================================================ */

/* Backdrop — más oscurecido + blur ligero (igual que el modal lg) */
.swal2-container.swal2-backdrop-show {
    background: rgba(15, 23, 42, 0.45) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Popup principal — material glass */
.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;
}

/* Highlight superior tipo specular del modal glass */
.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;
}

/* Contenido por encima del highlight */
.swal2-popup > * {
    position: relative;
    z-index: 1;
}

/* Título */
.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;
}

/* Texto / HTML content */
.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;
}

/* Footer */
.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;
}

/* ----- Actions / botones ----- */
.swal2-actions {
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
}

/* Botón base (todos los swal2-styled) — reset del look default */
.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;
}

/* Confirm — estilo lg-btn-primary (gradient + glow azul) */
.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);
}

/* Cancel — estilo lg-btn-ghost (translúcido) */
.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);
}

/* Deny — variante danger */
.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;
}

/* Botón X de cerrar */
.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);
}

/* ----- Inputs (cuando Swal pide input) ----- */
.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;
}

/* ----- Icons ----- */
/* Decisión: NO tocar los iconos NATIVOS de Swal. Su geometría interna
   (check, X, !, ?, i) está calibrada con em-units absolutos relativos al
   container default de 5em. Cualquier override de width/height/font-size/
   border-width descalabra el dibujo y queda peor.

   Solución que sí funciona: `nexa-swal-defaults.js` reemplaza automáticamente
   `icon: 'success'` (y los otros 4 tipos) por `iconHtml: '<i class="fa ..."></i>'`.
   Cuando Swal recibe iconHtml, NO renderiza el icono nativo — sólo nuestro HTML.

   Acá ajustamos el container `.swal2-icon` cuando contiene un `<i>` de FA
   adentro: removemos el border default (que aparecería como un círculo de
   color alrededor del icon FA) y dejamos solo el icon centrado. */
.swal2-icon:has(> i[class*="fa-"]),
.swal2-icon:has(> i.fa) {
    border: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0.5em auto 0.75em !important;
    line-height: 1 !important;
    background: transparent !important;
}

.swal2-icon > i[class*="fa-"],
.swal2-icon > i.fa {
    display: block;
    line-height: 1;
    /* el font-size lo setea el JS via inline style en el iconHtml */
}

/* ----- Toasts (cuando se usa `toast: true`) ----- */
.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; /* sin specular highlight en toasts pequeños */
}

/* Animación de entrada — usar la curva iOS también para Swal */
.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); }
}

/* Fallbacks Swal */
@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;
    }
}

/* FAB fallbacks: sin backdrop-filter el gradient azul opaco se sigue viendo
   correctamente; sólo desactivamos el blur sin tocar el resto */
@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;
    }
}