/* ==========================================================
   CRM - CAPA DE RENDIMIENTO
   Va despues de ui.css. Apaga lo que hace pesado el scroll:
   blur de fondo (repinta toda la pantalla en cada frame),
   animaciones de entrada por fila y bucles infinitos.
   ========================================================== */

/* 1. BLUR: es lo mas caro de todo. Se reemplaza por fondo solido. */
.glass-panel,
.modal-overlay,
.modal-content,
.sync-overlay,
.top-navbar,
.main-tabs,
[class*="glass"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.glass-panel,
.top-navbar,
.main-tabs {
    background: var(--bg-surface) !important;
}

.modal-content {
    background: var(--bg-card) !important;
}

/* 1b. ORBE AMBIENTE: 950x700 con blur(40px) animado en bucle infinito
       y fijo en pantalla. Repinta el area entera en cada frame, tambien
       mientras scrolleas. Es la causa principal del tironeo. */
/* html + id: el <style> del propio index.html va despues de este
   archivo, asi que hace falta mas especificidad para ganarle. */
html body #ambient-background-glow {
    display: none !important;
}

/* 2. ANIMACIONES DE ENTRADA POR FILA: con 200 leads son 200 animaciones
      simultaneas mas 200 reflows. La tabla aparece y listo. */
.custom-table tbody tr,
.resumen-item,
#consultas-grid > *,
.tab-content.active > .section-head,
.tab-content.active > .consultas-resumen,
.tab-content.active > .barra-filtros,
.tab-content.active > .barra-etapas,
.tab-content.active > #consultas-grid,
.lead-row,
.cliente-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* 3. La transicion de pestaña queda, pero corta y sin rebote. */
.tab-content.active {
    animation: none !important;
}

/* 4. SOMBRAS GRANDES: cada una es una capa mas que compone el GPU.
      Se dejan solo en modales, que son uno a la vez. */
.custom-table tbody tr,
.stat-card,
.resumen-item,
.lead-row {
    box-shadow: none !important;
}

/* 5. Bucles infinitos: solo sobreviven los que informan estado real
      (el punto de realtime). El resto son decorativos. */
.card-pulse,
[class*="wave"],
[class*="glow-loop"] {
    animation: none !important;
}

/* 6. Scroll: avisar al navegador que estas listas cambian de scroll
      para que las promueva a su propia capa. */
#consultas-grid,
.table-wrapper,
.tab-content {
    contain: layout style;
}

/* 7. Hover en filas: solo color de fondo, sin transform ni sombra.
      El transform obliga a recalcular layout en cada fila. */
.custom-table tbody tr:hover,
.lead-row:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* 8. Respetar a quien pidio menos movimiento en el sistema. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}