/* ==========================================================================
   Theme "Aurora" — Rediseño ERP inspirado en la pantalla de bienvenida.

   Capas:
   - Fondo oscuro azul profundo con gradientes radiales violetas en movimiento.
   - Sidebar y topbar con glassmorphism (blur + translúcidos).
   - Tarjetas translúcidas con borde sutil y glow al hover.
   - Títulos con gradiente de texto azul-violeta-fucsia.
   - Botones primarios con gradiente y shimmer.
   - Forms con anillo de foco violeta.

   Se carga DESPUÉS de custom.css y lo sobrescribe.
   Para desactivar, remover el <link> en base.html.
   ========================================================================== */

:root {
    /* Paleta Aurora — versión "low glare" para trabajo prolongado.
       Background levantado (menos contraste puro), text menos blanco,
       accents menos saturados. El look se mantiene pero la fatiga baja. */
    --aurora-bg:       #151b2e;
    --aurora-surface:  #1a2238;
    --aurora-surface-2:#1f2842;
    --aurora-border:   rgba(148, 163, 184, 0.10);
    --aurora-border-hi:rgba(129, 140, 200, 0.28);
    --aurora-text:     #c9d0e0;   /* antes #e5e9f5 (muy blanco) */
    --aurora-muted:    #8690a5;   /* antes #94a3b8 */
    --aurora-dim:      #5e6879;
    --aurora-accent:   #7aa5e0;   /* antes #60a5fa */
    --aurora-accent-2: #9289c7;   /* antes #a78bfa */
    --aurora-accent-3: #a681c2;   /* antes #c084fc */
    --aurora-success:  #5fb597;
    --aurora-danger:   #d88a8a;
    --aurora-warning:  #d4a862;

    --aurora-grad-brand: linear-gradient(135deg, #4a6bb8 0%, #6e5fa8 100%);
    --aurora-grad-text:  linear-gradient(135deg, #8fb0dd 0%, #9c93c9 55%, #ad94c4 100%);

    /* Override de variables Bootstrap 5 para que los componentes nativos
       (btn-primary, link, focus, etc.) reflejen la paleta. */
    --bs-body-bg:      #151b2e;
    --bs-body-color:   #c9d0e0;
    --bs-primary:      #6366f1;
    --bs-primary-rgb:  99, 102, 241;
    --bs-border-color: rgba(148, 163, 184, 0.10);
    --bs-link-color:   #8eb3d9;
    --bs-link-hover-color: #a69bc7;
    --bs-secondary-color: rgba(201, 208, 224, 0.65);
    --bs-tertiary-color:  rgba(201, 208, 224, 0.4);
}

/* ── Fondo base + gradientes de ambiente ───────────────────────────── */
body {
    background: var(--aurora-bg) !important;
    color: var(--aurora-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: -20%;
    background:
        radial-gradient(circle at 15% 25%, rgba(96, 165, 250, 0.05), transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(167, 139, 250, 0.04), transparent 50%);
    animation: auroraFluye 25s ease-in-out infinite alternate;
    z-index: -1;
    pointer-events: none;
}
@keyframes auroraFluye {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(2%, -1%) scale(1.03); }
    100% { transform: translate(-1%, 2%) scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

/* ── Sidebar: glassmorphism + acento violeta ───────────────────────── */
.sidebar {
    background: linear-gradient(180deg,
                rgba(15, 22, 49, 0.85),
                rgba(11, 16, 32, 0.9)) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid var(--aurora-border);
    color: var(--aurora-muted);
}

/* En mobile (y PWA standalone) el glassmorphism no se sostiene: el
   backdrop-filter no tiene fondo que difuminar y los alphas de 0.85/0.9
   dejan ver el overlay oscuro detrás del sidebar, dando la sensación
   de que está "borroso" o "nublado". Forzamos color sólido. */
@media (max-width: 768px) {
    .sidebar {
        background: #0b1020 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

.sidebar-brand {
    background: transparent !important;
    border-bottom: 1px solid var(--aurora-border) !important;
    position: relative;
}
.sidebar-brand::after {
    content: "";
    position: absolute;
    left: 20%; right: 20%; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(96,165,250,0.4), transparent);
}

.nav-section {
    color: var(--aurora-dim) !important;
    font-size: 0.65rem;
    letter-spacing: 1.5px;
}

.nav-item {
    color: var(--aurora-muted) !important;
    border-left: 2px solid transparent;
    margin: 1px 8px;
    border-radius: 8px;
    padding: 9px 14px;
    position: relative;
}
.nav-item:hover {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #f1f5f9 !important;
}
.nav-item.active {
    background: linear-gradient(135deg, rgba(74,107,184,0.22), rgba(110,95,168,0.18)) !important;
    color: #dde3f0 !important;
    box-shadow: 0 0 0 1px rgba(122,165,224,0.22) inset;
}
.nav-item.active i {
    background: var(--aurora-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Topbar: barra translúcida con borde gradiente sutil ──────────── */
.topbar {
    background: rgba(20, 28, 63, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--aurora-border) !important;
    color: var(--aurora-text);
    box-shadow: 0 1px 0 0 rgba(96, 165, 250, 0.08) !important;
}
.topbar .btn-link,
.topbar a {
    color: var(--aurora-text);
}
.topbar .breadcrumb-item,
.topbar .breadcrumb-item + .breadcrumb-item::before,
.topbar .breadcrumb-item a {
    color: var(--aurora-muted);
}
.topbar .breadcrumb-item.active { color: var(--aurora-text); }
.topbar .topbar-clock,
.topbar .user-name { color: var(--aurora-muted); }

.main-content { background: transparent !important; }
.content-area { color: var(--aurora-text); }

/* ── Tipografía + títulos con gradiente ────────────────────────────── */
.page-title {
    background: var(--aurora-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.page-header { color: var(--aurora-text); }

h1, h2, h3, h4, h5, h6 { color: var(--aurora-text); }
.text-muted, .text-secondary { color: var(--aurora-muted) !important; }
.text-dark { color: var(--aurora-text) !important; }

a { color: #93c5fd; }
a:hover { color: #c4b5fd; }

hr { border-color: var(--aurora-border); opacity: 1; }
small, .small { color: var(--aurora-muted); }

/* ── Cards sólidas (sin backdrop-filter: ese crea containing block
        que rompe position:fixed de modales hijos). ──────────────── */
.card {
    background: #1a2238 !important;
    border: 1px solid var(--aurora-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
    color: var(--aurora-text);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.card:hover {
    border-color: var(--aurora-border-hi) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
.card-header {
    background: rgba(21, 27, 46, 0.6) !important;
    border-bottom: 1px solid var(--aurora-border) !important;
    color: var(--aurora-text);
    font-weight: 600;
    border-radius: 12px 12px 0 0 !important;
}
.card-footer {
    background: rgba(15, 22, 49, 0.5) !important;
    border-top: 1px solid var(--aurora-border) !important;
    color: var(--aurora-muted);
}
.card-body { color: var(--aurora-text); }

/* ── KPI cards específicos ──────────────────────────────────────────── */
.kpi-card {
    background: #1c2542 !important;
    border: 1px solid var(--aurora-border) !important;
    border-left-width: 3px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
    color: var(--aurora-text);
}
.kpi-label { color: var(--aurora-muted); }
.kpi-value { color: #f5f7fb; }
.kpi-sub   { color: var(--aurora-muted); }

.bg-primary-soft  { background: rgba(74, 107, 184, 0.12) !important; color: #8eb3d9; }
.bg-success-soft  { background: rgba(61, 139, 114, 0.12) !important; color: #7cae98; }
.bg-danger-soft   { background: rgba(168, 89, 89, 0.12) !important; color: #c48585; }
.bg-warning-soft  { background: rgba(156, 122, 59, 0.12) !important; color: #c4a368; }

/* ── Tablas: "paper on dark frame" — fondo gris claro opaco (no blanco
       puro para evitar brillo) con texto casi negro para máximo
       contraste. Default global. ──────────────────────────────── */
.table {
    --bs-table-bg:           #e6ebf2;
    --bs-table-color:        #0b1220;
    --bs-table-border-color: #c2cad6;
    --bs-table-hover-bg:     #d5dce6;
    --bs-table-hover-color:  #05080f;
    --bs-table-striped-bg:   #dce2ec;
    --bs-table-striped-color:#0b1220;
    color: #0b1220;
    background-color: #e6ebf2;
    border-color: #c2cad6;
}
.table > :not(caption) > * > * {
    background-color: #e6ebf2;
    color: #0b1220 !important;
    border-bottom-color: #c2cad6 !important;
}
.table-hover > tbody > tr:hover > * {
    background-color: #d5dce6 !important;
    color: #05080f !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #dce2ec !important;
    color: #0b1220 !important;
}
.table .text-muted,
.table small,
.table .small { color: #475569 !important; }
.table a:not(.btn) { color: #1e3a8a !important; text-decoration: none; font-weight: 500; }
.table a:not(.btn):hover { color: #172554 !important; }
.table .font-monospace { color: #05080f; }

/* thead.table-dark: header oscuro Aurora → acento de contraste con el
   cuerpo blanco. Le da el aire "panel de control" tecno. */
.table-dark,
.table thead.table-dark,
.table thead.table-dark th,
.table thead.table-dark td,
.table .table-dark,
.table .table-dark > th,
.table .table-dark > td {
    --bs-table-bg:           #1a2238 !important;
    --bs-table-color:        #e5e9f5 !important;
    --bs-table-border-color: rgba(148, 163, 184, 0.15) !important;
    background-color: #1a2238 !important;
    color: #e5e9f5 !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
    font-weight: 600;
}

/* thead.table-light: header gris más marcado (cuando la tabla no usa dark) */
.table-light,
.table thead.table-light,
.table thead.table-light th,
.table thead.table-light td,
.table .table-light,
.table .table-light > th,
.table .table-light > td {
    --bs-table-bg:    #cfd6e0 !important;
    --bs-table-color: #05080f !important;
    background-color: #cfd6e0 !important;
    color: #05080f !important;
    border-color: #b0bac9 !important;
    font-weight: 700;
}

/* table-warning y otras variantes semánticas: tonos suaves legibles */
.table-warning,
.table > tbody > tr.table-warning > *,
tr.table-warning > * {
    background-color: #fff7ed !important;
    color: #78350f !important;
}
.table-success,
.table > tbody > tr.table-success > *,
tr.table-success > * {
    background-color: #f0fdf4 !important;
    color: #14532d !important;
}
.table-danger,
.table > tbody > tr.table-danger > *,
tr.table-danger > * {
    background-color: #fef2f2 !important;
    color: #7f1d1d !important;
}
.table-info,
.table > tbody > tr.table-info > *,
tr.table-info > * {
    background-color: #eff6ff !important;
    color: #1e3a8a !important;
}

/* Fila de "propuesta" (SKU placeholder): gris cool más oscuro que el
   base, para distinguirse sin ser crema/amarillo. */
.table tr.row-propuesta > * {
    background-color: #c8d1e0 !important;
    color: #1e293b !important;
}
.table tr.row-propuesta .text-muted { color: #475569 !important; }
.table tr.row-propuesta:hover > * { background-color: #bac4d6 !important; }

/* Inputs y selects dentro de tablas: fondo blanco puro para distinguirse
   del fondo gris opaco de la tabla (señalan "campo editable"). Para el
   <select> dejamos que Bootstrap maneje la flecha con sus defaults
   (background-image + no-repeat + position + size); no la tocamos. */
.table .form-control,
.table .form-select {
    background-color: #ffffff !important;
    color: #0b1220 !important;
    border-color: #94a3b8 !important;
}
.table .form-control:focus,
.table .form-select:focus {
    background-color: #ffffff !important;
    border-color: #4a6bb8 !important;
    box-shadow: 0 0 0 3px rgba(74, 107, 184, 0.18) !important;
    animation: none !important;
}

/* Select de estado coloreado por state: pill con color semántico y
   flecha blanca. Usa las clases border-{primary|success|...} que el
   template ya aplica. Todas las propiedades de background (color,
   image, repeat, position, size) se setean juntas para evitar que
   se mezcle con la flecha oscura default de Bootstrap y se "multiplique". */
.table .form-select.border-primary,
.table .form-select.border-secondary,
.table .form-select.border-success,
.table .form-select.border-danger,
.table .form-select.border-warning,
.table .form-select.border-info,
.table .form-select.border-dark {
    color: #ffffff !important;
    font-weight: 600 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    cursor: pointer;
}
.table .form-select.border-primary   { background-color: #5a6db0 !important; border-color: #5a6db0 !important; }
.table .form-select.border-secondary { background-color: #6b7585 !important; border-color: #6b7585 !important; }
.table .form-select.border-success   { background-color: #4a8670 !important; border-color: #4a8670 !important; }
.table .form-select.border-danger    { background-color: #a15858 !important; border-color: #a15858 !important; }
.table .form-select.border-warning   { background-color: #9c7a3b !important; border-color: #9c7a3b !important; }
.table .form-select.border-info      { background-color: #3d8aa6 !important; border-color: #3d8aa6 !important; }
.table .form-select.border-dark      { background-color: #2d3649 !important; border-color: #2d3649 !important; }

.table .form-select.border-primary:hover,
.table .form-select.border-secondary:hover,
.table .form-select.border-success:hover,
.table .form-select.border-danger:hover,
.table .form-select.border-warning:hover,
.table .form-select.border-info:hover,
.table .form-select.border-dark:hover {
    filter: brightness(1.08);
}
.table .form-select.border-primary:focus,
.table .form-select.border-secondary:focus,
.table .form-select.border-success:focus,
.table .form-select.border-danger:focus,
.table .form-select.border-warning:focus,
.table .form-select.border-info:focus,
.table .form-select.border-dark:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
}
/* Options dentro del dropdown nativo: fondo blanco, texto oscuro,
   siempre. Sin esto los browsers heredan el color blanco y quedan
   ilegibles al abrir la lista. */
.table .form-select option {
    background-color: #ffffff;
    color: #0b1220;
    font-weight: normal;
}

/* Wrapper de la tabla: fondo gris opaco también para no ver el dark card
   asomando por los bordes del scroll horizontal. */
.card .table-responsive { background: #e6ebf2; }
.card > .table:last-child,
.card > .table-responsive:last-child { border-radius: 0 0 12px 12px; overflow: hidden; }

/* ── Forms: inputs oscuros con anillo violeta ──────────────────────── */
.form-label { color: var(--aurora-muted); }
.form-control,
.form-select,
textarea.form-control {
    background: rgba(21, 27, 46, 0.85) !important;
    border: 1px solid var(--aurora-border) !important;
    color: var(--aurora-text) !important;
    border-radius: 8px;
}
.form-control::placeholder,
.form-select::placeholder { color: var(--aurora-dim); }
.form-control:focus,
.form-select:focus {
    background: rgba(21, 27, 46, 0.95) !important;
    border-color: rgba(146, 137, 199, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(146, 137, 199, 0.15) !important;
    color: var(--aurora-text);
}
.form-control:disabled,
.form-select:disabled { background: rgba(11, 16, 32, 0.5) !important; opacity: 0.6; }
.form-text { color: var(--aurora-muted); }

.form-check-input {
    background-color: rgba(11, 16, 32, 0.85);
    border-color: var(--aurora-border);
}
/* OJO: usar `background-color` (no `background` shorthand) para no pisar
   el `background-image` con el SVG del check que Bootstrap inserta — sin
   ese SVG el cuadrado se marca pero no aparece el ✓ visible. */
.form-check-input:checked {
    background-color: #6366f1;
    border-color: #818cf8;
}
.form-check-label { color: var(--aurora-text); }

/* ── Botones ───────────────────────────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, #4a6bb8 0%, #6e5fa8 100%) !important;
    border: 0 !important;
    color: #eaeef8 !important;
    box-shadow: 0 2px 8px rgba(74, 107, 184, 0.22);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #5174c2 0%, #7567b0 100%) !important;
    box-shadow: 0 3px 12px rgba(74, 107, 184, 0.30);
}
.btn-primary:focus, .btn-primary:active {
    box-shadow: 0 0 0 3px rgba(146, 137, 199, 0.25), 0 2px 8px rgba(74, 107, 184, 0.22) !important;
}

.btn-outline-primary {
    color: #8eb3d9 !important;
    border-color: rgba(122, 165, 224, 0.38) !important;
    background: transparent;
}
.btn-outline-primary:hover {
    background: rgba(122, 165, 224, 0.10) !important;
    color: #b8cce6 !important;
    border-color: rgba(146, 137, 199, 0.55) !important;
}

.btn-outline-secondary {
    color: var(--aurora-muted) !important;
    border-color: var(--aurora-border) !important;
    background: transparent;
}
.btn-outline-secondary:hover {
    background: rgba(148, 163, 184, 0.08) !important;
    color: var(--aurora-text) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

.btn-outline-danger { color: #c48585 !important; border-color: rgba(216, 138, 138, 0.38) !important; background: transparent; }
.btn-outline-danger:hover { background: rgba(216, 138, 138, 0.10) !important; color: #d9a0a0 !important; }

.btn-outline-success { color: #7cae98 !important; border-color: rgba(95, 181, 151, 0.38) !important; background: transparent; }
.btn-outline-success:hover { background: rgba(95, 181, 151, 0.10) !important; color: #9cc4b1 !important; }

.btn-success {
    background: #3d8b72 !important;
    border: 0 !important;
    color: #eaeef8 !important;
    box-shadow: 0 2px 6px rgba(61, 139, 114, 0.18);
}
.btn-success:hover { background: #458f79 !important; box-shadow: 0 3px 10px rgba(61, 139, 114, 0.26); }

.btn-danger {
    background: #a85959 !important;
    border: 0 !important;
    color: #eaeef8 !important;
    box-shadow: 0 2px 6px rgba(168, 89, 89, 0.18);
}
.btn-danger:hover { background: #ae6060 !important; box-shadow: 0 3px 10px rgba(168, 89, 89, 0.26); }

.btn-warning {
    background: #9c7a3b !important;
    border: 0 !important;
    color: #fafaf6 !important;
    box-shadow: 0 2px 6px rgba(156, 122, 59, 0.18);
}
.btn-warning:hover { background: #a48141 !important; box-shadow: 0 3px 10px rgba(156, 122, 59, 0.26); }

/* Secondary: gris slate muted (alternativa a primary para acciones neutras) */
.btn-secondary {
    background: #4a5468 !important;
    border: 0 !important;
    color: #eaeef8 !important;
    box-shadow: 0 2px 6px rgba(74, 84, 104, 0.18);
}
.btn-secondary:hover { background: #525d72 !important; }

/* ── Badges: tonos sólidos desaturados (funcionan bien en tablas
       blancas y sobre cards oscuras por igual) ─────────────────── */
.badge.bg-primary   { background: #5a6db0 !important; color: #ffffff !important; }
.badge.bg-success   { background: #4a8670 !important; color: #ffffff !important; }
.badge.bg-danger    { background: #a15858 !important; color: #ffffff !important; }
.badge.bg-warning   { background: #9c7a3b !important; color: #ffffff !important; }
.badge.bg-info      { background: #3d8aa6 !important; color: #ffffff !important; }
.badge.bg-secondary { background: #6b7585 !important; color: #ffffff !important; }
.badge.bg-dark      { background: #2d3649 !important; color: #e5e9f5 !important; }
.badge.bg-light     { background: #e2e8f0 !important; color: #1e293b !important; border: 1px solid #cbd5e1; }

/* ── Alerts ───────────────────────────────────────────────────────── */
.alert {
    background: rgba(20, 28, 63, 0.7) !important;
    border: 1px solid var(--aurora-border) !important;
    border-left: 3px solid var(--aurora-accent) !important;
    color: var(--aurora-text) !important;
    border-radius: 10px;
}
.alert-info    { border-left-color: #6fa8be !important; background: rgba(47, 127, 158, 0.08) !important; }
.alert-success { border-left-color: #7cae98 !important; background: rgba(61, 139, 114, 0.08) !important; }
.alert-warning { border-left-color: #c4a368 !important; background: rgba(156, 122, 59, 0.08) !important; }
.alert-danger  { border-left-color: #c48585 !important; background: rgba(168, 89, 89, 0.08) !important; }
.alert a { color: inherit; font-weight: 600; }

/* ── Modales ──────────────────────────────────────────────────────── */
/* Los modales los movemos al body via JS en app.js para que escapen
   de cualquier containing block en ancestros. A este nivel solo
   aplicamos el styling de colores. Bootstrap maneja posicionamiento
   y ciclo de vida normal. */
.modal-content {
    background: #1a2238 !important;
    border: 1px solid var(--aurora-border) !important;
    border-radius: 14px !important;
    color: var(--aurora-text);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.modal-header {
    border-bottom: 1px solid var(--aurora-border) !important;
    background: transparent !important;
    color: var(--aurora-text);
}
.modal-body {
    background: transparent;
    color: var(--aurora-text);
}
.modal-footer {
    border-top: 1px solid var(--aurora-border) !important;
    background: transparent !important;
}
.modal-title { color: var(--aurora-text); }
.btn-close {
    filter: invert(1) hue-rotate(180deg);
    opacity: 0.6;
}
.btn-close:hover { opacity: 1; }

/* ── Dropdowns ────────────────────────────────────────────────────── */
.dropdown-menu {
    background: rgba(20, 28, 63, 0.95) !important;
    border: 1px solid var(--aurora-border) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.dropdown-item,
.table .dropdown-item,
.table a.dropdown-item,
.table a.dropdown-item:not(.btn) {
    color: var(--aurora-text) !important;
    text-decoration: none !important;
    font-weight: normal !important;
}
.dropdown-item:hover, .dropdown-item:focus,
.table .dropdown-item:hover, .table .dropdown-item:focus {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #ffffff !important;
}
.dropdown-item.active,
.table .dropdown-item.active {
    background: linear-gradient(135deg, rgba(74, 107, 184, 0.35), rgba(110, 95, 168, 0.30)) !important;
    color: #ffffff !important;
}
.dropdown-divider { border-color: var(--aurora-border) !important; }

/* ── List group ───────────────────────────────────────────────────── */
.list-group-item {
    background: rgba(20, 28, 63, 0.6) !important;
    border-color: var(--aurora-border) !important;
    color: var(--aurora-text) !important;
}
.list-group-item:hover,
.list-group-item.active {
    background: rgba(99, 102, 241, 0.18) !important;
    border-color: var(--aurora-border-hi) !important;
    color: #fff !important;
}

/* ── Progress bars ────────────────────────────────────────────────── */
.progress { background: rgba(148, 163, 184, 0.12); border-radius: 20px; }
.progress-bar { background: var(--aurora-grad-brand); }
.progress-bar.bg-success { background: linear-gradient(90deg, #10b981, #14b8a6) !important; }
.progress-bar.bg-danger  { background: linear-gradient(90deg, #ef4444, #f97316) !important; }
.progress-bar.bg-warning { background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; }

/* ── Scrollbar más sutil ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, 0.45); }

/* ── Text utilities override ──────────────────────────────────────── */
.text-primary   { color: #8eb3d9 !important; }
.text-success   { color: #7cae98 !important; }
.text-danger    { color: #c48585 !important; }
.text-warning   { color: #c4a368 !important; }
.text-info      { color: #6fa8be !important; }
.border         { border-color: var(--aurora-border) !important; }

/* ── Input groups / file inputs ──────────────────────────────────── */
.input-group-text {
    background: rgba(15, 22, 49, 0.85);
    border-color: var(--aurora-border);
    color: var(--aurora-muted);
}
/* Dentro de tablas el fondo es claro, así que el addon debe matchearle */
.table .input-group-text {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0b1220 !important;
    font-weight: 600;
}

/* ── Código inline ────────────────────────────────────────────────── */
code, .font-monospace {
    color: #e9d5ff;
}

/* ── Chat: estilo WhatsApp (el equipo ya conoce el patrón, facilita
        la adopción). Conversación en beige cremoso con patrón sutil,
        burbujas verde-claro para mensajes propios y blancas para los
        demás. Sidebar izquierdo en blanco puro, header cremoso. ──── */
.chat-wrap {
    background: #efeae2 !important;
    border: 1px solid #c6bcad !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Sidebar izquierdo: lista de conversaciones, blanco puro estilo WhatsApp */
.chat-lista {
    background: #ffffff !important;
    border-right: 1px solid #e9edef !important;
}
.chat-lista-header {
    background: #f0f2f5 !important;
    border-bottom: 1px solid #e9edef !important;
    padding: 10px 12px !important;
}
.chat-item {
    color: #111b21 !important;
    border-bottom: 1px solid #e9edef !important;
    padding: 12px 15px !important;
    background: transparent;
}
.chat-item:hover {
    background: #f5f6f6 !important;
    color: #111b21 !important;
}
.chat-item.activo {
    background: #f0f2f5 !important;
    border-left: none !important;
    color: #111b21 !important;
}
.chat-item-nombre { color: #111b21 !important; font-weight: 600 !important; }
.chat-item-preview { color: #667781 !important; }
.chat-item-no-leidos {
    background: #25d366 !important;
    color: #fff !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    font-size: .72rem !important;
}
.chat-item i { color: #54656f; }

/* Área de conversación: fondo beige WhatsApp + patrón doodle sutil via SVG */
.chat-conv {
    background: #efeae2 !important;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(9, 51, 52, 0.025) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(9, 51, 52, 0.025) 0%, transparent 40%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%23998f7f' stroke-width='1' stroke-linecap='round' opacity='0.18'><circle cx='20' cy='20' r='3'/><circle cx='70' cy='40' r='2'/><circle cx='110' cy='25' r='3'/><circle cx='130' cy='90' r='2'/><circle cx='50' cy='100' r='3'/><circle cx='95' cy='115' r='2'/><path d='M15 70 L28 77 L15 84 Z'/><path d='M100 90 L90 95 L100 100 M100 90 L110 95 L100 100' /><path d='M30 45 Q35 40 40 45 Q45 50 50 45' /><path d='M65 125 Q70 120 75 125' /></g></svg>");
    background-size: 140px 140px;
    background-repeat: repeat;
}
.chat-conv-header {
    background: #f0f2f5 !important;
    border-bottom: 1px solid #e9edef !important;
    color: #111b21 !important;
}
.chat-conv-header strong,
.chat-conv-header .small {
    color: #111b21 !important;
}
.chat-conv-header .text-muted { color: #667781 !important; }

/* Burbujas de mensaje */
.chat-burbuja {
    background: #ffffff !important;
    color: #111b21 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 9px 8px !important;
    box-shadow: 0 1px 1px rgba(11, 20, 26, 0.13) !important;
    position: relative;
    max-width: 75% !important;
    align-self: flex-start;
}
/* Tail de burbuja "otro" (blanca) — esquina superior izquierda */
.chat-burbuja:not(.mia):not(.sistema) {
    border-top-left-radius: 0 !important;
    margin-left: 8px;
}
.chat-burbuja:not(.mia):not(.sistema)::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    width: 8px;
    height: 13px;
    background: #ffffff;
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    filter: drop-shadow(-1px 1px 0.5px rgba(11, 20, 26, 0.08));
}

/* Burbujas propias: verde claro WhatsApp */
.chat-burbuja.mia {
    background: #d9fdd3 !important;
    border: none !important;
    align-self: flex-end !important;
    border-top-right-radius: 0 !important;
    margin-right: 8px;
    color: #111b21 !important;
}
.chat-burbuja.mia::after {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    width: 8px;
    height: 13px;
    background: #d9fdd3;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    filter: drop-shadow(1px 1px 0.5px rgba(11, 20, 26, 0.08));
}

/* Mensajes de sistema: chip centrado estilo WhatsApp */
.chat-burbuja.sistema {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #54656f !important;
    border: none !important;
    align-self: center !important;
    border-radius: 8px !important;
    padding: 5px 12px !important;
    font-size: .72rem !important;
    box-shadow: 0 1px 1px rgba(11, 20, 26, 0.08) !important;
}

.chat-autor {
    color: #1ea9f0 !important;
    font-size: .74rem !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
}
/* Paleta determinística por nombre del autor — el mismo usuario mantiene
   el mismo color en todos sus mensajes (color↔persona estable) y la
   probabilidad de colisión entre dos personas distintas en un grupo es
   baja. data-color-idx lo calcula el backend (chat.py::_color_idx_chat)
   con un Java-style hashCode del nombre, módulo 14. Se renderiza desde
   chat/_burbuja.html y desde renderBurbuja() en app.js. Tonos elegidos
   para WCAG AA sobre fondo blanco (#ffffff) de la burbuja del otro. */
.chat-autor[data-color-idx="0"],
.chat-popup-burb-autor[data-color-idx="0"]  { color: #c2410c !important; } /* naranja  */
.chat-autor[data-color-idx="1"],
.chat-popup-burb-autor[data-color-idx="1"]  { color: #0369a1 !important; } /* azul     */
.chat-autor[data-color-idx="2"],
.chat-popup-burb-autor[data-color-idx="2"]  { color: #15803d !important; } /* verde    */
.chat-autor[data-color-idx="3"],
.chat-popup-burb-autor[data-color-idx="3"]  { color: #7c3aed !important; } /* violeta  */
.chat-autor[data-color-idx="4"],
.chat-popup-burb-autor[data-color-idx="4"]  { color: #be185d !important; } /* magenta  */
.chat-autor[data-color-idx="5"],
.chat-popup-burb-autor[data-color-idx="5"]  { color: #a16207 !important; } /* ámbar    */
.chat-autor[data-color-idx="6"],
.chat-popup-burb-autor[data-color-idx="6"]  { color: #0e7490 !important; } /* teal     */
.chat-autor[data-color-idx="7"],
.chat-popup-burb-autor[data-color-idx="7"]  { color: #b91c1c !important; } /* rojo     */
.chat-autor[data-color-idx="8"],
.chat-popup-burb-autor[data-color-idx="8"]  { color: #4338ca !important; } /* índigo   */
.chat-autor[data-color-idx="9"],
.chat-popup-burb-autor[data-color-idx="9"]  { color: #6d4c41 !important; } /* marrón   */
.chat-autor[data-color-idx="10"],
.chat-popup-burb-autor[data-color-idx="10"] { color: #4d7c0f !important; } /* lima     */
.chat-autor[data-color-idx="11"],
.chat-popup-burb-autor[data-color-idx="11"] { color: #9333ea !important; } /* púrpura  */
.chat-autor[data-color-idx="12"],
.chat-popup-burb-autor[data-color-idx="12"] { color: #1e40af !important; } /* azul royal */
.chat-autor[data-color-idx="13"],
.chat-popup-burb-autor[data-color-idx="13"] { color: #475569 !important; } /* slate    */

.chat-texto {
    color: #111b21 !important;
    font-size: .92rem !important;
    line-height: 1.4 !important;
}
.chat-burbuja.mia .chat-texto { color: #111b21 !important; }

.chat-meta {
    color: #667781 !important;
    font-size: .68rem !important;
    text-align: right !important;
    margin-top: 2px !important;
    line-height: 1 !important;
}

/* Archivos adjuntos dentro de burbujas */
.chat-archivo {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #111b21 !important;
}
.chat-archivo:hover { background: rgba(0, 0, 0, 0.10) !important; color: #111b21 !important; }
.chat-archivo-icono { color: #54656f !important; }
.chat-archivo-nombre { color: #111b21 !important; }
.chat-archivo-size { color: #667781 !important; }
.chat-burbuja.mia .chat-archivo { background: rgba(0, 0, 0, 0.04) !important; }

.chat-imagen { border-radius: 6px !important; }

/* Input de mensaje abajo */
.chat-input-wrap {
    background: #f0f2f5 !important;
    border-top: 1px solid #e9edef !important;
    padding: 8px 12px !important;
}
.chat-input-wrap input[type="text"] {
    background: #ffffff !important;
    color: #111b21 !important;
    border: 1px solid #e9edef !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}
.chat-input-wrap input[type="text"]::placeholder { color: #8696a0 !important; }
.chat-input-wrap input[type="text"]:focus {
    background: #ffffff !important;
    border-color: #25d366 !important;
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.15) !important;
    animation: none !important;
}

/* Botones del input (adjuntar, enviar) — estilo WhatsApp */
.chat-input-wrap .btn {
    background: transparent !important;
    color: #54656f !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px; height: 40px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    padding: 0 !important;
    box-shadow: none !important;
}
.chat-input-wrap .btn:hover {
    background: rgba(11, 20, 26, 0.06) !important;
    color: #111b21 !important;
    transform: none !important;
}
.chat-input-wrap .btn-primary {
    background: #25d366 !important;
    color: #fff !important;
}
.chat-input-wrap .btn-primary:hover {
    background: #1faa52 !important;
    color: #fff !important;
}

/* Vista vacía (sin conversación seleccionada) */
.chat-vacio {
    background: #f0f2f5 !important;
    color: #667781 !important;
}
.chat-vacio strong { color: #41525d !important; }

/* Quitar la animación stagger que heredaron las conversaciones (quedaba
   raro con tantos items); dejamos solo un fade suave. */
.chat-lista-items .chat-item {
    animation: none !important;
}

/* ── Mi Ruta: cards del menú ──────────────────────────────────────── */
.ruta-card.en_curso     { background: rgba(59, 130, 246, 0.18) !important; border-left-color: #60a5fa !important; }
.ruta-card.planificada  { background: rgba(20, 28, 63, 0.75) !important; }
.ruta-card.terminada    { background: rgba(16, 185, 129, 0.1) !important; border-left-color: #34d399 !important; }
.ruta-card.cancelada    { background: rgba(15, 22, 49, 0.7) !important; }

/* ── Loading / spinners ───────────────────────────────────────────── */
.spinner-border { color: var(--aurora-accent-2); }

/* ── Botón X para cerrar el módulo Chat (en /chat/) ─────────────────
   La cabecera del módulo Chat vive bajo .content-area (fondo blanco
   Notion), por eso el botón usa color oscuro y un fondo gris suave —
   sobre el fondo blanco del header la X negra se ve bien y al hover
   se oscurece un poco. */
.chat-modulo-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(15, 23, 42, 0.06);
    color: #1f2937;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, transform .1s, color .15s;
}
.chat-modulo-close:hover {
    background: rgba(15, 23, 42, 0.12);
    color: #111827;
    transform: scale(1.05);
}
.chat-modulo-close:active { transform: scale(0.95); }
/* En el iframe del overlay no se muestra (el overlay tiene su propia X) */
html.embedded-mode .chat-modulo-close { display: none !important; }

/* ── Avatares de chat (Aurora neón + iniciales) ───────────────── */
/* Avatar con iniciales: fondo abstracto por gradiente HSL + letras
   blancas bold. El hue se pasa via variable --av-hue desde el template. */
.avatar-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    background:
        radial-gradient(circle at 30% 30%,
            hsl(var(--av-hue, 210), 85%, 62%) 0%,
            hsl(calc(var(--av-hue, 210) + 30), 75%, 45%) 60%,
            hsl(calc(var(--av-hue, 210) + 60), 70%, 38%) 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    overflow: hidden;
}
/* Avatar Aurora — orbe de IA neón estilo Meta AI. Multi-layer
   radial-gradients en rosas/violetas/azules/cyans con rotación sutil. */
.avatar-aurora {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 25% 25%, #ff6bcb 0%, transparent 45%),
        radial-gradient(circle at 75% 30%, #a855f7 0%, transparent 45%),
        radial-gradient(circle at 50% 75%, #3b82f6 0%, transparent 45%),
        radial-gradient(circle at 25% 85%, #06b6d4 0%, transparent 45%),
        radial-gradient(circle at 80% 80%, #fbbf24 0%, transparent 35%),
        linear-gradient(135deg, #ec4899 0%, #8b5cf6 40%, #3b82f6 80%, #06b6d4 100%);
    box-shadow:
        0 0 10px rgba(168, 85, 247, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    animation: auroraOrbShift 7s ease-in-out infinite alternate;
}
@keyframes auroraOrbShift {
    0%   { filter: hue-rotate(0deg) saturate(1.1); }
    50%  { filter: hue-rotate(20deg) saturate(1.25); }
    100% { filter: hue-rotate(-15deg) saturate(1.15); }
}
/* Efecto "estrella" sutil en el centro del orb (destello) */
.avatar-aurora::before {
    content: "";
    position: absolute;
    inset: 25%;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
    border-radius: 50%;
    animation: auroraOrbPulse 3s ease-in-out infinite alternate;
}
@keyframes auroraOrbPulse {
    from { opacity: 0.4; transform: scale(0.85); }
    to   { opacity: 0.7; transform: scale(1.05); }
}

/* Cuando Aurora está en las burbujas de mensaje (color del autor): */
.chat-burbuja .chat-autor.autor-aurora,
.chat-popup-burb-autor.autor-aurora {
    background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

/* ── Dot de estado online (solo en avatares del chat) ───────────── */
/* El avatar debe tener position:relative para anclar el dot. */
.chat-popup-item-icono,
.chat-item-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Para el sidebar del módulo /chat/, el ícono va inline — damos
   tamaño fijo para que el dot tenga donde apoyarse. */
.chat-item-avatar {
    width: 32px; height: 32px;
    background: #d1d7de;
    color: #54656f;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}
.estado-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #9ca3af;
    z-index: 2;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.estado-dot.estado-online {
    background: #22c55e;
    animation: estadoOnlinePulse 2s ease-in-out infinite;
}
.estado-dot.estado-away    { background: #facc15; }
.estado-dot.estado-offline { background: #ef4444; }
@keyframes estadoOnlinePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    50%      { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

/* ── Modal PDF de Aurora (política de privacidad, etc.) ───────────── */
.aurora-pdf-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    flex-direction: column;
    animation: chatOverlayFadeIn 180ms ease-out;
}
.aurora-pdf-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: linear-gradient(135deg, #4a6bb8 0%, #6e5fa8 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.aurora-pdf-titulo { font-size: 1rem; font-weight: 600; color: #fff; }
.aurora-pdf-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, transform .1s;
}
.aurora-pdf-close:hover { background: rgba(255, 255, 255, 0.28); transform: scale(1.05); }
.aurora-pdf-modal iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;
}
.aurora-msg a { color: inherit; text-decoration: underline; }
.aurora-msg strong { font-weight: 700; }

/* ── Overlay full-screen del chat (iframe) ───────────────────────── */
.chat-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    animation: chatOverlayFadeIn 180ms ease-out;
}
@keyframes chatOverlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.chat-overlay-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: linear-gradient(135deg, #4a6bb8 0%, #6e5fa8 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 2001;
}
.chat-overlay-titulo {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}
.chat-overlay-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, transform .1s;
}
.chat-overlay-close:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}
.chat-overlay-close:active { transform: scale(0.95); }
.chat-overlay iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;
}
@media (max-width: 768px) {
    .chat-overlay-topbar { padding: 8px 12px; }
    .chat-overlay-titulo { font-size: 0.9rem; }
    .chat-overlay-close { padding: 6px 12px; font-size: 0.8rem; }
}

/* ── Modo "embedded": la página se carga dentro del iframe del overlay
   del chat. Ocultar todo el chrome del ERP y mostrar solo el contenido
   del chat (que es lo que estamos embebiendo). ───────────────── */
html.embedded-mode body::before { display: none; }
html.embedded-mode .sidebar,
html.embedded-mode .sidebar-overlay,
html.embedded-mode .topbar,
html.embedded-mode .chat-flotante,
html.embedded-mode .avisos-bar {
    display: none !important;
}
html.embedded-mode .main-content {
    margin-left: 0 !important;
}
html.embedded-mode .content-area {
    padding: 12px;
    animation: none !important;
}
html.embedded-mode body {
    background: #efeae2 !important;  /* fondo beige Whatsapp del chat */
}

/* ── Badge rojo en el item "Chat" del sidebar ────────────────────── */
.sidebar .nav-item-chat { position: relative; }
.sidebar-badge {
    margin-left: auto;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    background: #dc2626;
    color: #fff;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25);
}

/* ── Burbuja flotante de chat (global) ───────────────────────────── */
.chat-flotante {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1040;
    font-family: inherit;
}

/* ── Stack de notificaciones tipo WhatsApp ──────────────────────────────
   Toasts apilados encima del FAB del chat. Los nuevos entran por arriba
   con flex-direction: column-reverse → el primer hijo del DOM aparece
   abajo, así que insertamos cada toast con `prepend` y sale arriba de
   las antiguas, dando la sensación natural de "lo más reciente está
   más cerca del FAB". */
.chat-notif-stack {
    position: absolute;
    bottom: 70px;        /* justo encima del FAB de 56px + 14 de aire */
    right: 0;
    width: 320px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none; /* el contenedor no captura clicks; los toasts sí */
}
.chat-notif {
    pointer-events: auto;
    /* Fondo claro con tinte verde sutil — heredado del estilo whatsapp
       para mensajes recibidos. Texto negro/gris oscuro para que se lea
       bien, banda verde a la izquierda como acento de identidad. */
    background: #ffffff;
    color: #111827;
    border-radius: 10px;
    border-left: 4px solid #25d366;
    padding: 9px 12px 9px 11px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18),
                0 0 0 1px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.35;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    transform: translateY(8px) scale(0.97);
    opacity: 0;
    /* Entrada un poco más larga (cubic-bezier suave) y salida con fade
       puro sin desplazamiento — se siente como un desvanecimiento real
       más que un slide. */
    transition: opacity .42s cubic-bezier(.22, 1, .36, 1),
                transform .42s cubic-bezier(.22, 1, .36, 1);
    position: relative;
}
.chat-notif.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.chat-notif.hide {
    opacity: 0;
    transform: translateY(0) scale(0.99);
    transition: opacity .55s ease-in, transform .55s ease-in;
}
.chat-notif-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.chat-notif-body {
    flex: 1;
    min-width: 0;
}
.chat-notif-titulo {
    font-weight: 600;
    color: #111827;
    font-size: 0.82rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 18px;   /* espacio para la X */
}
.chat-notif-preview {
    color: #374151;
    font-size: 0.82rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.chat-notif-cerrar {
    position: absolute;
    top: 3px;
    right: 5px;
    background: transparent;
    border: 0;
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1;
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 4px;
}
.chat-notif-cerrar:hover {
    color: #374151;
    background: rgba(0, 0, 0, 0.06);
}
@media (max-width: 540px) {
    .chat-notif-stack { width: calc(100vw - 32px); }
}

/* ── Emoji picker (widget y chat completo) ─────────────────────────── */
.emoji-picker {
    position: fixed;
    width: 320px;
    height: 320px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.20),
                0 0 0 1px rgba(0, 0, 0, 0.04) inset;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple Color Emoji",
                 "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
}
.emoji-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}
.emoji-tab {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 7px 0 5px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    border-bottom: 2px solid transparent;
    transition: background-color .12s ease, border-color .12s ease;
    color: #4b5563;
}
.emoji-tab:hover { background: rgba(0, 0, 0, 0.04); }
.emoji-tab.active {
    border-bottom-color: #25d366;
    background: #fff;
}
.emoji-grids {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
}
.emoji-cell {
    background: transparent;
    border: 0;
    padding: 5px 0;
    font-size: 1.35rem;
    cursor: pointer;
    border-radius: 6px;
    line-height: 1;
    transition: background-color .1s ease, transform .1s ease;
    user-select: none;
}
.emoji-cell:hover { background: #f3f4f6; }
.emoji-cell:active { transform: scale(0.92); }
.emoji-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 36px 8px;
    color: #9ca3af;
    font-size: 0.85rem;
}
@media (max-width: 540px) {
    .emoji-picker { width: calc(100vw - 24px); height: 280px; }
    .emoji-grid { grid-template-columns: repeat(7, 1fr); }
}
.chat-bubble {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.6rem;
    border: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.chat-bubble:hover {
    background: #1faa52;
    transform: scale(1.06);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}
.chat-bubble:active { transform: scale(0.96); }
.chat-bubble .bi { line-height: 1; }
.chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: #dc2626;
    color: #fff;
    border: 2px solid #0b1020;
    border-radius: 11px;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    animation: chatBadgePulse 1.8s ease-in-out infinite;
}
@keyframes chatBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Popup desplegable sobre la burbuja */
.chat-popup {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 360px;
    height: 500px;
    max-height: calc(100vh - 120px);
    background: #ffffff;
    border: 1px solid #d1d7de;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-popup-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.chat-popup-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 12px;
    background: #f0f2f5;
    border-bottom: 1px solid #e9edef;
    color: #111b21;
}
.chat-popup-header strong { color: #111b21; font-size: 0.92rem; }
.chat-popup-actions { margin-left: auto; display: flex; gap: 0.3rem; align-items: center; }
.chat-popup-actions a,
.chat-popup-actions button {
    background: transparent;
    border: 0;
    color: #54656f;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 50%;
    cursor: pointer;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background-color .15s;
}
.chat-popup-actions a:hover,
.chat-popup-actions button:hover {
    background: rgba(11, 20, 26, 0.08);
    color: #111b21;
}
.chat-popup-back {
    background: transparent;
    border: 0;
    color: #54656f;
    font-size: 1rem;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 50%;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .15s;
}
.chat-popup-back:hover { background: rgba(11, 20, 26, 0.08); color: #111b21; }

.chat-popup-toolbar {
    display: flex;
    gap: 4px;
    padding: 6px;
    background: #f7f8fa;
    border-bottom: 1px solid #e9edef;
}
.chat-popup-toolbtn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #d1d7de;
    color: #111b21;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.chat-popup-toolbtn:hover { background: #e7fae2; border-color: #25d366; color: #0e5a2a; }
.chat-popup-toolbtn .bi { color: #25d366; font-size: 1rem; }

.chat-popup-grupo-form {
    padding: 8px 10px 4px;
    background: #f7f8fa;
    border-bottom: 1px solid #e9edef;
}
.chat-popup-grupo-form input[type="text"] {
    width: 100%;
    background: #fff;
    color: #111b21;
    border: 1px solid #d1d7de;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.86rem;
    outline: none;
    margin-bottom: 6px;
}
.chat-popup-grupo-form input[type="text"]:focus {
    border-color: #25d366;
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.15);
}
.chat-popup-nueva-footer {
    padding: 8px 10px;
    background: #f0f2f5;
    border-top: 1px solid #e9edef;
}
.chat-popup-nueva-footer button {
    width: 100%;
    background: #25d366;
    color: #fff;
    border: 0;
    padding: 9px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
}
.chat-popup-nueva-footer button:hover { background: #1faa52; }
.chat-popup-nueva-footer button:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-popup-user-item {
    padding: 9px 14px;
    border-bottom: 1px solid #e9edef;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #111b21;
    transition: background-color .12s;
}
.chat-popup-user-item:hover { background: #f5f6f6; }
.chat-popup-user-item input[type="checkbox"] {
    margin: 0;
    width: 18px; height: 18px;
    accent-color: #25d366;
}
.chat-popup-user-item-nombre { font-weight: 500; color: #111b21; font-size: 0.88rem; }
.chat-popup-user-item-rol { font-size: 0.72rem; color: #667781; }

.chat-popup-list {
    flex: 1;
    overflow-y: auto;
    background: #fff;
}
.chat-popup-item {
    padding: 10px 14px;
    border-bottom: 1px solid #e9edef;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #111b21;
    text-decoration: none;
    transition: background-color .12s;
}
.chat-popup-item:hover { background: #f5f6f6; color: #111b21; }
.chat-popup-item-icono {
    position: relative;  /* ancla del dot de estado */
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #d1d7de;  /* fallback para grupos sin avatar */
    color: #54656f;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    /* NO overflow:hidden — clippearía el dot de estado que vive fuera */
}
.chat-popup-item-icono > i { line-height: 1; }
.chat-popup-item-body { flex: 1; min-width: 0; }
.chat-popup-item-nombre {
    font-weight: 600;
    font-size: 0.88rem;
    color: #111b21;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-popup-item-preview {
    color: #667781;
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.chat-popup-item-no-leidos {
    background: #25d366;
    color: #fff;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    align-self: center;
    min-width: 20px;
    text-align: center;
}
.chat-popup-empty { text-align: center; }

.chat-popup-mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #efeae2;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(9, 51, 52, 0.025) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(9, 51, 52, 0.025) 0%, transparent 40%);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.chat-popup-burb {
    max-width: 80%;
    padding: 5px 9px 6px;
    border-radius: 8px;
    background: #fff;
    color: #111b21;
    font-size: 0.86rem;
    line-height: 1.35;
    box-shadow: 0 1px 1px rgba(11, 20, 26, 0.08);
    word-wrap: break-word;
    white-space: pre-wrap;
    align-self: flex-start;
}
.chat-popup-burb.mia {
    background: #d9fdd3;
    align-self: flex-end;
}
.chat-popup-burb.sistema {
    background: rgba(255, 255, 255, 0.85);
    color: #54656f;
    align-self: center;
    font-size: 0.72rem;
    padding: 4px 10px;
}
.chat-popup-burb-autor {
    font-size: 0.7rem;
    font-weight: 600;
    color: #1ea9f0;
    margin-bottom: 2px;
}
.chat-popup-burb-meta {
    font-size: 0.64rem;
    color: #667781;
    text-align: right;
    margin-top: 2px;
    line-height: 1;
}

.chat-popup-input {
    display: flex;
    gap: 0.35rem;
    padding: 8px 10px;
    background: #f0f2f5;
    border-top: 1px solid #e9edef;
    /* Cuando el textarea crece, el botón enviar y los adjuntos se quedan
       alineados abajo, junto a la última línea de texto. */
    align-items: flex-end;
}
.chat-popup-input textarea {
    flex: 1;
    background: #fff;
    color: #111b21;
    border: 1px solid #e9edef;
    border-radius: 18px;
    padding: 7px 12px;
    font-size: 0.86rem;
    line-height: 1.4;
    font-family: inherit;
    outline: none;
    /* Auto-grow controlado por JS (chatPopupInput): la altura mínima es
       ~1 línea, y crece hasta max-height antes de scrollear. Sin handle
       porque el resize manual desordena el layout del widget. */
    resize: none;
    overflow-y: auto;
    min-height: 34px;
    max-height: 120px;
}
.chat-popup-input textarea:focus {
    border-color: #25d366;
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.15);
}
.chat-popup-input button {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chat-popup-input button:hover { background: #1faa52; }

/* ── Widget chat: buscar, reply, adjuntar, menú contextual ───────── */
.chat-popup-search { padding: 8px 10px; background: #fff; border-bottom: 1px solid #e9edef; }
.chat-popup-search input {
    width: 100%; padding: 6px 10px; border: 1px solid #e9edef;
    border-radius: 16px; font-size: 0.82rem; background: #f6f8fa; outline: none;
}
.chat-popup-search input:focus { border-color: #25d366; background: #fff; }
.chat-popup-search-results { max-height: 320px; overflow-y: auto; background: #fff; }
.chat-popup-search-result {
    padding: 8px 12px; border-bottom: 1px solid #eef0f4;
    cursor: pointer; display: block; text-decoration: none; color: inherit;
}
.chat-popup-search-result:hover { background: #f3f6fa; color: inherit; }
.chat-popup-search-result-conv { font-size: .72rem; color: #0d6efd; font-weight: 600; }
.chat-popup-search-result-fecha { font-size: .68rem; color: #6c757d; }
.chat-popup-search-result-preview { font-size: .8rem; color: #1f2937; }
.chat-popup-search-result mark { background: #fff3cd; padding: 0 1px; }

.chat-popup-attach-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: transparent; color: #54656f; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; margin: 0;
}
.chat-popup-attach-btn:hover { background: rgba(0,0,0,.06); }

.chat-popup-burb { position: relative; }
.chat-popup-burb-menu-btn {
    position: absolute; top: 2px; right: 2px;
    border: none; background: rgba(255,255,255,.6); color: #4b5563;
    width: 20px; height: 20px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; font-size: .68rem;
}
.chat-popup-burb:hover .chat-popup-burb-menu-btn { display: inline-flex; }
.chat-popup-burb-menu {
    position: absolute; z-index: 1100;
    background: #fff; border: 1px solid #e6e8ed; border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.18); min-width: 150px; padding: 4px 0;
}
.chat-popup-burb-menu button {
    display: flex; gap: 8px; align-items: center;
    background: none; border: none; width: 100%; text-align: left;
    padding: 6px 12px; font-size: .82rem; color: #1f2937; cursor: pointer;
}
.chat-popup-burb-menu button:hover { background: #f3f6fa; }

.chat-popup-reply-bar {
    padding: 6px 10px; background: #f0f6ff;
    border-top: 1px solid #b6d4fe; display: flex; gap: 6px; align-items: center;
}
.chat-popup-reply-content {
    flex: 1; border-left: 3px solid #0d6efd; padding-left: 6px;
    min-width: 0; overflow: hidden;
}
.chat-popup-reply-autor { font-size: .7rem; color: #0d6efd; font-weight: 600; }
.chat-popup-reply-preview {
    font-size: .76rem; color: #4b5563;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-popup-reply-bar button {
    border: none; background: none; color: #6c757d; cursor: pointer;
    width: 22px; height: 22px; padding: 0; line-height: 1; font-size: 1rem;
}

.chat-popup-burb .chat-reply-quote {
    display: block; padding: 3px 5px; margin-bottom: 3px;
    border-left: 2px solid #0d6efd; background: rgba(13,110,253,.07);
    border-radius: 3px; text-decoration: none; color: inherit;
    font-size: .72rem; line-height: 1.2;
}
.chat-popup-burb .chat-reply-quote strong { color: #0d6efd; display: block; font-size: .68rem; }
.chat-popup-burb .chat-reply-quote-texto {
    display: block; color: #4b5563; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.chat-popup-burb .chat-reenviado {
    font-size: .68rem; color: #6c757d; font-style: italic; margin-bottom: 2px;
}

/* Responsive: en mobile la burbuja más pequeña y popup casi full */
@media (max-width: 480px) {
    .chat-flotante { bottom: 14px; right: 14px; }
    .chat-bubble { width: 50px; height: 50px; font-size: 1.4rem; }
    .chat-popup {
        width: calc(100vw - 24px);
        right: -6px;
        height: 440px;
    }
}

/* ── Barra de avisos internos (debajo del topbar) ────────────────── */
.avisos-bar {
    position: sticky;
    top: var(--topbar-height, 54px);
    z-index: 99;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.avisos-bar .alert {
    border-width: 0 0 1px 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    font-size: 0.88rem;
    font-weight: 500;
}
.avisos-bar .alert + .alert { border-top: 1px solid rgba(0, 0, 0, 0.08) !important; }
.avisos-bar .btn-link { color: inherit !important; box-shadow: none !important; }
.avisos-bar .btn-link:hover { opacity: 1 !important; }

/* Override específico de colores para los banners del avisos-bar.
   Info se mantiene en tono muted Aurora (no molesta, encaja con tema);
   Warning en amarillo marcado, Danger en rojo — ambos para captar
   atención cuando hay algo importante. */
.avisos-bar .alert-info {
    background: rgba(96, 165, 250, 0.18) !important;
    color: #c5dcf5 !important;
    border-left: 4px solid #6fa8be !important;
}
.avisos-bar .alert-success {
    background: #16a34a !important;
    color: #ffffff !important;
    border-left: 4px solid #14532d !important;
}
.avisos-bar .alert-success strong { color: #ffffff !important; }
.avisos-bar .alert-success .btn-link { color: #ffffff !important; }
.avisos-bar .alert-warning {
    background: #fbbf24 !important;
    color: #3d2a00 !important;
    border-left: 4px solid #d97706 !important;
}
.avisos-bar .alert-warning strong { color: #2a1d00 !important; }
.avisos-bar .alert-warning .btn-link { color: #3d2a00 !important; }

.avisos-bar .alert-danger {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-left: 4px solid #7f1d1d !important;
}
.avisos-bar .alert-danger strong { color: #ffffff !important; }
.avisos-bar .alert-danger .btn-link { color: #ffffff !important; }


/* ===========================================================================
   MOTION SYSTEM — micro-interacciones tech/sci-fi

   Principios:
   - Timings consistentes con cubic-bezier específicas (emerge / snappy).
   - Sin efectos luminosos ruidosos (cumplimos el low-glare).
   - Cada interacción tiene función: feedback visual de estado.
   - Respetar prefers-reduced-motion en todo.
   =========================================================================== */

:root {
    --anim-fast: 140ms cubic-bezier(.4, 0, .2, 1);
    --anim-med:  220ms cubic-bezier(.4, 0, .2, 1);
    --anim-slow: 380ms cubic-bezier(.16, 1, .3, 1);
    --anim-spring: 500ms cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Transiciones globales: todos los elementos interactivos ────── */
a, button, .btn, .nav-item, .card, .shortcut-card, .form-control,
.form-select, .form-check-input, .dropdown-item, .list-group-item,
.page-link, .modal-content, .badge, .chat-item, .ruta-card, .parada-card {
    transition:
        background-color var(--anim-fast),
        border-color var(--anim-fast),
        color var(--anim-fast),
        box-shadow var(--anim-med),
        transform var(--anim-med),
        opacity var(--anim-med);
}

/* ── Entrada de la página: fade suave al cargar ─────────────────────
   IMPORTANTE: NO usar transform aquí. Los modales se renderizan como
   hijos de .content-area con position:fixed. Si .content-area tiene
   transform (aunque sea translateY(0)) crea un containing block que
   hace que los position:fixed hijos se posicionen relativos a ella en
   vez de al viewport → modales aparecen en lugar incorrecto y
   el backdrop bloquea clicks. Solo animamos opacity. */
.content-area {
    animation: auroraFadeIn 380ms ease-out both;
}
@keyframes auroraFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes auroraFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Botones: lift + sweep de gradiente en hover ─────────────────── */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 70%);
    transform: translateX(-100%);
    transition: transform 600ms cubic-bezier(.22, 1, .36, 1);
    z-index: -1;
    pointer-events: none;
}
.btn:hover::after { transform: translateX(100%); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); transition: transform 80ms; }

/* Icons inside buttons deslizan 2px al hover (sutil pero tech) */
.btn .bi {
    transition: transform var(--anim-med);
}
.btn:hover .bi-arrow-right-short,
.btn:hover .bi-arrow-right,
.btn:hover .bi-chevron-right,
.btn:hover .bi-send {
    transform: translateX(3px);
}
.btn:hover .bi-arrow-left-short,
.btn:hover .bi-arrow-left,
.btn:hover .bi-chevron-left {
    transform: translateX(-3px);
}
.btn:hover .bi-arrow-repeat,
.btn:hover .bi-arrow-clockwise {
    transform: rotate(120deg);
}
.btn:hover .bi-plus,
.btn:hover .bi-plus-lg,
.btn:hover .bi-plus-circle {
    transform: rotate(90deg);
}
.btn:hover .bi-trash { transform: scale(1.1); }
.btn:hover .bi-eye  { transform: scale(1.1); }

/* Ripple al hacer click — pequeña onda circular desde el punto de click.
   Usa la técnica de box-shadow expandido + opacity. */
.btn::before {
    content: "";
    position: absolute;
    left: var(--ripple-x, 50%);
    top: var(--ripple-y, 50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
}
.btn:active::before {
    animation: auroraRipple 500ms cubic-bezier(.22, 1, .36, 1);
}
@keyframes auroraRipple {
    0%   { width: 0; height: 0; opacity: 0.5; }
    100% { width: 200%; height: 200%; opacity: 0; }
}

/* ── Focus ring pulsante sutil en inputs ────────────────────────── */
.form-control:focus,
.form-select:focus {
    animation: auroraFocusPulse 2s ease-in-out infinite;
}
@keyframes auroraFocusPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(146, 137, 199, 0.15); }
    50%      { box-shadow: 0 0 0 3px rgba(146, 137, 199, 0.25); }
}

/* ── Cards: lift al hover + barra superior gradiente que aparece ── */
.card {
    position: relative;
    /* NO usar transform ni will-change en .card: muchos templates
       meten modales dentro del card y un transform/will-change en
       el ancestro crea containing block que rompe position:fixed
       de los modales (aparecen fuera de viewport + backdrop pegado). */
}
.card::before {
    content: "";
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(122, 165, 224, 0.4),
        rgba(146, 137, 199, 0.4),
        transparent);
    opacity: 0;
    transition: opacity var(--anim-med);
}
/* NO transform en hover: causa containing-block si el card contiene un modal */
.card:hover::before { opacity: 1; }

/* KPI cards: efecto de "data scan" en el hover (linea vertical atraviesa) */
.kpi-card {
    position: relative;
    overflow: hidden;
}
.kpi-card::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -30%;
    width: 20%;
    background: linear-gradient(90deg, transparent, rgba(146, 137, 199, 0.08), transparent);
    transition: left 900ms cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}
.kpi-card:hover::after { left: 130%; }

/* ── Nav sidebar: indicador activo con barra que se desliza ────── */
.nav-item {
    position: relative;
    overflow: hidden;
}
.nav-item::before {
    content: "";
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: linear-gradient(180deg, #7aa5e0, #9289c7);
    border-radius: 0 2px 2px 0;
    transform: translateX(-4px);
    opacity: 0;
    transition: transform var(--anim-med), opacity var(--anim-med);
}
.nav-item.active::before,
.nav-item:hover::before {
    transform: translateX(0);
    opacity: 1;
}
.nav-item:hover {
    padding-left: 16px;
}
.nav-item i {
    transition: transform var(--anim-med);
}
.nav-item:hover i {
    transform: scale(1.08);
}

/* ── Shortcut cards (bienvenida): animación de entrada staggered ── */
.shortcut-grid .shortcut-card {
    animation: auroraStagger 500ms cubic-bezier(.22, 1, .36, 1) both;
}
.shortcut-grid .shortcut-card:nth-child(1)  { animation-delay: 40ms; }
.shortcut-grid .shortcut-card:nth-child(2)  { animation-delay: 80ms; }
.shortcut-grid .shortcut-card:nth-child(3)  { animation-delay: 120ms; }
.shortcut-grid .shortcut-card:nth-child(4)  { animation-delay: 160ms; }
.shortcut-grid .shortcut-card:nth-child(5)  { animation-delay: 200ms; }
.shortcut-grid .shortcut-card:nth-child(6)  { animation-delay: 240ms; }
.shortcut-grid .shortcut-card:nth-child(7)  { animation-delay: 280ms; }
.shortcut-grid .shortcut-card:nth-child(8)  { animation-delay: 320ms; }
.shortcut-grid .shortcut-card:nth-child(9)  { animation-delay: 360ms; }
.shortcut-grid .shortcut-card:nth-child(10) { animation-delay: 400ms; }
@keyframes auroraStagger {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Tablas: hover fila con gradiente que recorre, no solo color ─ */
.table-hover > tbody > tr {
    position: relative;
    transition: background-color var(--anim-fast);
}
.table-hover > tbody > tr > td,
.table-hover > tbody > tr > th {
    transition: background-color var(--anim-fast);
}

/* ── Modals: dejamos los defaults de Bootstrap para no romper el
        ciclo de vida de show/hide (transitionend). Solo heredan el
        styling aplicado en .modal-content más arriba. ────────────── */
/* (ningún override de transform/opacity aquí — causaba que en
   Safari/algunos browsers el backdrop quedara pegado bloqueando clicks
   al abrir pestañas emergentes). */

/* ── Badges con clase .live: pulso sutil (para "en curso", etc.) ─ */
.badge.bg-primary,
.badge[class*="en_curso"],
.badge[class*="pendiente"] {
    position: relative;
}
.badge.live::after,
tr.en_curso .badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(122, 165, 224, 0.6);
    animation: auroraLivePulse 2s ease-in-out infinite;
}
@keyframes auroraLivePulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.08); }
}

/* ── Links: underline animado (slide) ────────────────────────────── */
a:not(.btn):not(.nav-item):not(.dropdown-item):not(.list-group-item):not(.shortcut-card):not(.chat-item):not(.ruta-link) {
    position: relative;
    text-decoration: none;
}
a:not(.btn):not(.nav-item):not(.dropdown-item):not(.list-group-item):not(.shortcut-card):not(.chat-item):not(.ruta-link)::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, #7aa5e0, #9289c7);
    transition: right var(--anim-med);
}
a:not(.btn):not(.nav-item):not(.dropdown-item):not(.list-group-item):not(.shortcut-card):not(.chat-item):not(.ruta-link):hover::after {
    right: 0;
}

/* ── Progress bar: shimmer animado para bg-primary ──────────────── */
.progress-bar {
    position: relative;
    overflow: hidden;
}
.progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent);
    animation: auroraProgressShimmer 2.2s linear infinite;
}
@keyframes auroraProgressShimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ── Spinner custom con gradiente rotante ─────────────────────────── */
.spinner-border {
    border: 2px solid transparent;
    border-top-color: #7aa5e0;
    border-right-color: #9289c7;
    animation: auroraSpin 900ms linear infinite;
}
@keyframes auroraSpin {
    to { transform: rotate(360deg); }
}

/* ── Logo del sidebar: flota sutil ────────────────────────────────── */
.sidebar-logo {
    animation: auroraLogoFloat 8s ease-in-out infinite;
}
@keyframes auroraLogoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* ── Selección de texto con color de marca ────────────────────────── */
::selection {
    background: rgba(122, 165, 224, 0.35);
    color: #f0f4ff;
}

/* ── Lista de conversaciones del chat: entrada stagger ───────────── */
.chat-lista-items .chat-item {
    animation: auroraFadeUp 380ms cubic-bezier(.22, 1, .36, 1) both;
}
.chat-lista-items .chat-item:nth-child(1)  { animation-delay: 30ms; }
.chat-lista-items .chat-item:nth-child(2)  { animation-delay: 55ms; }
.chat-lista-items .chat-item:nth-child(3)  { animation-delay: 80ms; }
.chat-lista-items .chat-item:nth-child(4)  { animation-delay: 105ms; }
.chat-lista-items .chat-item:nth-child(n+5) { animation-delay: 130ms; }

/* ── Contraste de formularios — regla simple y predecible ─────────────
   El tema Aurora es oscuro: los inputs heredan `color: var(--bs-body-color)`
   = claro (#c9d0e0) que contrasta bien con el fondo oscuro de modales y
   cards. Donde el background es blanco explícito (ej. `.table .form-control`,
   línea ~334), el bloque correspondiente ya fuerza color oscuro. NO
   forzamos un color global porque eso rompe ambos extremos: si forzamos
   negro, los modales oscuros pierden el texto; si forzamos blanco, las
   tablas pierden el texto. Bootstrap default + overrides puntuales gana.

   Solo definimos placeholder explícito y los pseudo-elementos del file
   input que Bootstrap deja sin estilizar. */
input::placeholder,
textarea::placeholder {
    color: rgba(148, 163, 184, 0.7) !important;
    opacity: 1 !important;
}

/* Botón nativo "Elegir archivo" del input[type="file"]. Bootstrap por
   default lo deja con un gris suave que sobre el tema oscuro y la falta
   de contraste se ve casi blanco. Lo forzamos con fondo gris claro y
   texto NEGRO para que sea legible en cualquier contexto. */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: #e5e7eb !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    margin-right: 10px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color .12s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: #cbd5e1 !important;
}

/* ── Notificaciones personales (campana del header) ──────────────── */
/* Botón campana: ensanchado a la derecha para hacer espacio al
   badge DENTRO de la caja del botón (sin que sobresalga). */
#notifPersonalesBtn {
    padding: 4px 22px 4px 12px;
    min-width: 50px;
    position: relative;
    overflow: visible;   /* por si algún ancestro lo recorta */
}
#notifPersonalesBadge {
    /* Badge compacto, rojo brillante, posicionado dentro del rectángulo
       del botón. Sobreescribimos las clases utility de Bootstrap. */
    top: 3px !important;
    right: 4px !important;
    left: auto !important;
    transform: none !important;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 14px;
    background: #ff3b30 !important;
    color: #ffffff !important;
    border: 0;
    box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.45),
                0 1px 2px rgba(0, 0, 0, 0.25);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
}

.notif-personales-menu {
    background: var(--aurora-surface, #1a2238) !important;
    border: 1px solid var(--aurora-border) !important;
    color: var(--aurora-text);
}
.notif-personales-lista {
    max-height: 460px;
    overflow-y: auto;
}
.notif-personal-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
    cursor: pointer;
    color: var(--aurora-text);
    text-decoration: none;
    transition: background-color .12s ease;
}
.notif-personal-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--aurora-text);
}
.notif-personal-item.no-leida { background: rgba(220, 38, 38, 0.06); }
.notif-personal-item.no-leida:hover { background: rgba(220, 38, 38, 0.10); }
.notif-personal-icono {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    color: var(--aurora-accent);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.notif-personal-icono.atrasada { background: rgba(220, 38, 38, 0.18); color: #fca5a5; }
.notif-personal-icono.asignacion { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
.notif-personal-icono.estado    { background: rgba(34, 197, 94, 0.18); color: #86efac; }
.notif-personal-titulo {
    font-weight: 600;
    font-size: 0.83rem;
    line-height: 1.25;
    color: var(--aurora-text);
}
.notif-personal-mensaje {
    font-size: 0.78rem;
    color: var(--aurora-muted);
    margin-top: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notif-personal-meta {
    font-size: 0.7rem;
    color: var(--aurora-dim);
    margin-top: 3px;
}
.notif-personal-empty {
    text-align: center;
    padding: 26px 14px;
    color: var(--aurora-muted);
    font-size: 0.85rem;
}

/* ── Stepper de 4 fases en /aprobacion-gastos/ ─────────────────────── */
.aprob-stepper { font-size: 0.7rem; }
.aprob-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    border: 1.5px solid;
    transition: background-color .12s ease, color .12s ease;
}
.aprob-step.firmada {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}
.aprob-step.actual {
    background: #facc15;
    color: #1f2937;
    border-color: #ca8a04;
    animation: aprobPulse 1.6s ease-in-out infinite;
}
.aprob-step.pendiente {
    background: transparent;
    color: var(--aurora-muted, #94a3b8);
    border-color: rgba(148, 163, 184, 0.45);
}
@keyframes aprobPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.4); }
    50%      { box-shadow: 0 0 0 4px rgba(250, 204, 21, 0); }
}

/* ── Widget "Estado del equipo" del dashboard ──────────────────────
   Las 3 sub-cards (Online, Ausentes, Sin login) tienen headers con
   fondo claro pero los list-group-items heredan color claro del
   theme Aurora → texto ilegible sobre fondo blanco. Forzamos
   colores oscuros con tonos del color de cada card (verde, ámbar,
   gris) para mantener identidad visual sin perder contraste. */
.widget-estado-equipo .list-group-item {
    background: #ffffff !important;
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}
.widget-estado-equipo .list-group-item .fw-semibold {
    color: #111827 !important;
}
.widget-estado-equipo .list-group-item .text-muted {
    color: #6b7280 !important;
}
.widget-estado-equipo .list-group-item .text-center.text-muted.small {
    color: #9ca3af !important;
}

/* Badges de estado con texto del mismo tono pero oscuro y legible. */
.widget-estado-equipo .badge.bg-success-subtle {
    background: #d1fae5 !important;
    color: #065f46 !important;     /* verde oscuro sobre verde claro */
    font-weight: 600;
}
.widget-estado-equipo .badge.bg-warning-subtle {
    background: #fef3c7 !important;
    color: #78350f !important;     /* ámbar oscuro sobre ámbar claro */
    font-weight: 600;
}

/* Headers internos: el texto del título y badge del header se fuerza
   con colores específicos para asegurar buen contraste sobre cada
   fondo tinte (verde / ámbar / gris) del dark theme Aurora. */
.widget-estado-equipo .text-warning-emphasis {
    /* Mostaza definido — más amarillo que un marrón ámbar oscuro,
       sigue legible sobre el fondo bg-warning bg-opacity-10. */
    color: #a16207 !important;
}
.widget-estado-equipo .estado-equipo-titulo {
    /* "No iniciaron sesión": fuente clara del mismo tono que el título
       padre "Estado del equipo" — sobre el fondo bg-secondary bg-
       opacity-10 (gris-azul tinteado oscuro en Aurora) sale legible. */
    color: var(--aurora-text, #c9d0e0) !important;
    font-weight: 600;
}

/* ── Badges rojos en items del sidebar (Noticias, etc.) ──────────── */
.sidebar-badge-rojo {
    margin-left: auto;
    background: #ff3b30;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.40);
}

/* ── Pop-ups: estilo por nivel ──────────────────────────────────────
   Cada nivel pinta el borde superior + lateral + el header con un
   tinte claro y el ícono+título con el tono del nivel. El cuerpo
   del mensaje se mantiene neutro para que el contenido sea legible. */
#popupAvisoGlobal .modal-content {
    border-top: 4px solid #6c757d;
    border-left: 5px solid #6c757d;
    transition: border-color .15s ease;
}
#popupAvisoGlobal .popup-nivel-icono {
    font-size: 1.15em;
    vertical-align: -2px;
}

/* INFO — azul */
#popupAvisoGlobal .popup-nivel-info {
    border-top-color: #0dcaf0 !important;
    border-left-color: #0dcaf0 !important;
}
#popupAvisoGlobal .popup-nivel-info .modal-header {
    background: rgba(13, 202, 240, 0.10) !important;
    color: #055160 !important;
}
#popupAvisoGlobal .popup-nivel-info .popup-nivel-icono { color: #0dcaf0; }

/* SUCCESS — verde */
#popupAvisoGlobal .popup-nivel-success {
    border-top-color: #198754 !important;
    border-left-color: #198754 !important;
}
#popupAvisoGlobal .popup-nivel-success .modal-header {
    background: rgba(25, 135, 84, 0.10) !important;
    color: #0a3622 !important;
}
#popupAvisoGlobal .popup-nivel-success .popup-nivel-icono { color: #198754; }

/* WARNING — ámbar */
#popupAvisoGlobal .popup-nivel-warning {
    border-top-color: #ffc107 !important;
    border-left-color: #ffc107 !important;
}
#popupAvisoGlobal .popup-nivel-warning .modal-header {
    background: rgba(255, 193, 7, 0.14) !important;
    color: #664d03 !important;
}
#popupAvisoGlobal .popup-nivel-warning .popup-nivel-icono { color: #b45309; }

/* DANGER — rojo */
#popupAvisoGlobal .popup-nivel-danger {
    border-top-color: #dc3545 !important;
    border-left-color: #dc3545 !important;
}
#popupAvisoGlobal .popup-nivel-danger .modal-header {
    background: rgba(220, 53, 69, 0.10) !important;
    color: #58151c !important;
}
#popupAvisoGlobal .popup-nivel-danger .popup-nivel-icono { color: #dc3545; }

/* Cuerpo del mensaje y meta legibles sobre el modal-content del
   theme oscuro. Sin esto, el theme Aurora pisa con texto claro y
   se pierden los detalles cuando el header está tintado. */
#popupAvisoGlobal .modal-body { color: var(--aurora-text, #c9d0e0); }

/* ── Bitácora de solicitudes de gasto (modal timeline) ─────────────── */
.bitacora-timeline {
    border-left: 2px solid rgba(148, 163, 184, 0.25);
    padding-left: 14px;
    margin-left: 12px;
}
.bitacora-item {
    position: relative;
    padding: 8px 0 10px 18px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.10);
}
.bitacora-item:last-child { border-bottom: 0; }
.bitacora-icono {
    position: absolute;
    left: -9px; top: 12px;
    width: 18px; height: 18px;
    background: var(--aurora-surface, #1a2238);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}
.bitacora-item.evento-firma .bitacora-icono   { color: #22c55e; }
.bitacora-item.evento-rechazo .bitacora-icono { color: #ef4444; }
.bitacora-item.evento-comentario .bitacora-icono { color: #94a3b8; }
.bitacora-meta { font-size: 0.85rem; }
.bitacora-comentario {
    margin-top: 4px;
    padding: 6px 10px;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 6px;
    font-size: 0.82rem;
    white-space: pre-wrap;
    color: var(--aurora-text);
}

/* ── Menciones tipo @usuario en el chat ────────────────────────────
   Dropdown que aparece al tipear `@` en el input/textarea de mensaje
   y chip resaltado dentro de la burbuja al renderizar el mensaje.
   El JS vive en /static/js/mentions.js. */
.chat-mencion-dd {
    position: absolute;
    z-index: 10000;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    min-width: 220px;
}
.chat-mencion-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: #1f2937;
    font-size: .88rem;
}
.chat-mencion-dd-item:hover,
.chat-mencion-dd-item.is-active {
    background: #eef2ff;
    color: #1e40af;
}
.chat-mencion-dd-item strong { font-weight: 600; }
.chat-mencion-dd-username {
    color: #6b7280;
    font-size: .78rem;
    margin-left: auto;
}
.chat-mencion-dd-empty {
    padding: 10px 12px;
    color: #6b7280;
    font-size: .82rem;
    text-align: center;
}

/* Chip de mención dentro de la burbuja: fondo celeste claro y texto
   azul, no muy llamativo para que el mensaje siga leyéndose. Si la
   mención es al usuario actual, el chip es ámbar como en WhatsApp
   para que salte a la vista. */
.chat-mencion {
    display: inline;
    padding: 1px 6px;
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    border-radius: 4px;
    font-weight: 500;
}
.chat-mencion--mia {
    background: rgba(245, 158, 11, 0.20);
    color: #92400e;
    font-weight: 600;
}

/* ── Respetar usuarios con movimiento reducido ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .content-area,
    .shortcut-grid .shortcut-card,
    .chat-lista-items .chat-item { animation: none !important; opacity: 1 !important; transform: none !important; }
    .progress-bar::after { animation: none !important; }
    .form-control:focus, .form-select:focus { animation: none !important; }
}