/* ==========================================================
   CRM - CAPA DE RENDIMIENTO
   Va ULTIMA de todas las hojas (ver el comentario en index.html):
   apaga lo que hace pesado el scroll —blur de fondo, animaciones de
   entrada por fila, bucles infinitos— y es la única que define como
   se ve el cambio de pestaña. Antes esa regla decia simplemente
   "nada se mueve"; ahora hay UNA transicion real, deliberada, y
   barata: opacity + un traslado de 4px, nada que obligue al
   navegador a recalcular layout. El resto de las hojas (index.css,
   legibilidad.css, sistema.css, micro.css, ui.css) tienen sus
   propias animaciones de entrada para .tab-content — se dejan como
   estan, pero no importa lo que digan: esta hoja carga despues y
   gana siempre.
   ========================================================== */

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

/* Las tarjetas son SOLIDAS, igual que las de Configuracion
   (.ap-seccion, que usa `background: var(--surf-1)` liso, sin
   vidrio ni blur). Se probaron dos vueltas de vidrio —primero un
   tinte solo, despues tinte con blur— y las dos dejaban el texto
   dificil de leer apenas el fondo tenia una foto o video con
   detalle. Configuracion es la pantalla que el propio pedido puso
   como referencia de "esto esta bien": tarjeta opaca, borde fino,
   texto sin pelear contra nada de atras. El resto de las pestañas
   pasa a usar exactamente esa misma superficie.

   `html body .X` y no solo `.X`: ajustes.css blinda estas mismas
   clases con ese selector (mas especifico que la clase sola), y
   esa regla carga ANTES pero gana por especificidad si aca no se
   la iguala. */
html body .glass-panel,
html body .metric-card,
html body .chart-card,
html body .resumen-item,
html body .stat-card,
html body .users-container,
html body .bitacora-panel,
html body .grid-consultas,
html body .chat-lista,
html body .chat-panel,
html body .matcher-carta,
html body .modal-card.es-pagina,
html body [class*="glass"] {
    background: var(--surf-1) !important;
    border-color: var(--borde-luz, var(--border-color)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Las tarjetas anidadas (una .metric-card dentro de un .glass-panel)
   no repiten la superficie: si vuelven a pintar fondo, se ve una
   tarjeta adentro de otra tarjeta. */
html body .glass-panel .glass-panel,
html body .glass-panel .metric-card,
html body .glass-panel .resumen-item {
    background: transparent !important;
}

html body .top-navbar,
html body .main-tabs {
    background: rgba(var(--acento-rgb), 0.05) !important;
}

.modal-content {
    /* Los modales flotantes de verdad (confirmar, editar un lead)
       se quedan con su superficie de siempre. */
    background: var(--bg-card) !important;
}

/* HEADER Y PANEL LATERAL: TAMBIEN SOLIDOS, SIEMPRE.
   Hubo una excepcion aca que los volvia vidrio de verdad
   (`backdrop-filter: blur(18px)`) razonando que "un elemento fijo
   que no se repinta por scroll de contenido sale casi gratis". Es
   la misma falla que tenia la barra de abajo en celular (ver el
   corte de mas abajo, `@media (max-width: 768px) .main-tabs`): un
   `backdrop-filter` no mira si el que se movio fue el elemento con
   blur o lo que tiene DETRAS. El header queda fijo arriba de la
   bandeja de leads scrolleando; el panel lateral, fijo al lado del
   contenido scrolleando. Los dos obligan a rehacer un desenfoque de
   18px en cada cuadro de CUALQUIER scroll de la pantalla, en
   escritorio tanto como en celular —de ahi que la sensacion de
   lag no fuera solo cosa del telefono.

   Con fondo de video esto ya se habia detectado y corregido (mas
   opacidad, sin blur, mas abajo en el historial de este archivo);
   ahora se aplica ESA MISMA solucion siempre, tenga la app un video
   de fondo o no. El velo mas cargado (0.55–0.70 en vez del 0.05
   original) es lo que sostiene la legibilidad sin el blur atras. */
html body .top-navbar,
html.nav-lateral body .top-navbar {
    background: rgba(10, 15, 20, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* El panel lateral (solo existe en escritorio, ver escritorio.css)
   plegado o extendido: mismo velo cargado en los dos estados para
   que plegar no reintroduzca una capa distinta. */
html.nav-lateral body .main-tabs,
html.nav-lateral.nav-plegada body .main-tabs {
    background: rgba(10, 15, 20, 0.62) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-tema="claro"] .top-navbar,
html[data-tema="claro"].nav-lateral body .top-navbar {
    background: rgba(250, 250, 252, 0.62) !important;
}

html[data-tema="claro"].nav-lateral body .main-tabs,
html[data-tema="claro"].nav-lateral.nav-plegada body .main-tabs {
    background: rgba(250, 250, 252, 0.70) !important;
}

/* Las tres zonas de adentro (marca, lista, pie) no vuelven a pintar
   fondo: si alguna trae color propio, el vidrio del panel se pierde. */
html.nav-lateral body .main-tabs .lat-cab,
html.nav-lateral body .main-tabs .lat-lista,
html.nav-lateral body .main-tabs .lat-pie,
html.nav-lateral body .main-tabs .lat-plegar {
    background: transparent !important;
}

/* Iconos y rotulos SIEMPRE legibles, sea cual sea el fondo real
   detras del vidrio (foto clara, video con rojos y verdes, o el
   grafito liso). El velo de arriba ya ayuda; esta sombra es lo
   que garantiza contraste en el peor caso —un fotograma claro del
   video justo detras de un icono gris—. Es un unico drop-shadow,
   no un filtro compuesto: barato, no repinta nada en scroll. */
html.nav-lateral body .main-tabs .tab-btn i,
html.nav-lateral body .main-tabs .lat-pie .btn-icon i,
html.nav-lateral body .main-tabs .lat-plegar i {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

html.nav-lateral body .main-tabs .tab-btn span.tab-rotulo,
html.nav-lateral body .main-tabs .lat-plegar .lat-plegar-txt {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

html[data-tema="claro"].nav-lateral body .main-tabs .tab-btn i,
html[data-tema="claro"].nav-lateral body .main-tabs .lat-pie .btn-icon i,
html[data-tema="claro"].nav-lateral body .main-tabs .lat-plegar i {
    filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.85));
}

html[data-tema="claro"].nav-lateral body .main-tabs .tab-btn span.tab-rotulo,
html[data-tema="claro"].nav-lateral body .main-tabs .lat-plegar .lat-plegar-txt {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85);
}

/* 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, la unica y la de verdad. Un solo
      elemento anima (el contenedor), nunca sus hijos uno por uno
      —eso es lo que hacia pesada una pestaña con miles de filas,
      no el contenedor en si—. transform y opacity nada mas: son las
      dos propiedades que el navegador puede animar sin volver a
      calcular layout ni pintar de nuevo. */
.tab-content.active {
    animation: crm-cambio-pestana 180ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

@keyframes crm-cambio-pestana {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Los hijos nunca animan de a uno, ni siquiera en pestañas livianas
   como Dashboard o Mensajes: si hoy se ve bien sin el efecto
   escalonado, agregarlo despues es una decision de diseño aparte,
   no algo que tenga que pagar CADA pestaña porque una lo pidio. */
.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;
}

/* 9. EN CELULAR, LA BARRA DE ABAJO TAMBIEN ES SOLIDA.

   La excepcion de mas arriba (punto "HEADER Y PANEL LATERAL VUELVEN A
   SER VIDRIO") se justifica diciendo que blurear el header y la barra
   sale barato porque "no se repintan por scroll de CONTENIDO". Eso es
   cierto para el header, que esta arriba de todo. La barra de abajo
   no: en celular queda FIJA sobre la lista de leads, tareas o lo que
   sea, y esa lista es justo lo que se scrollea todo el tiempo. Un
   backdrop-filter no mira si el que se movio fue el elemento con
   blur o lo que tiene detras — se recalcula igual, encuadre por
   encuadre, mientras el dedo arrastra la pantalla. Ahi es donde se
   siente el tironeo al tocar la barra: el navegador esta ocupado
   rehaciendo un desenfoque de 18px sobre el ancho completo en medio
   del scroll.

   En escritorio la barra de abajo no existe (es el panel lateral, ver
   escritorio.css) asi que este corte es solo para celular.

   ADEMAS, SOLIDA DE VERDAD. El 0.05 de opacidad que traia (pensado
   para el vidrio, donde el blur de atras hacia el resto del trabajo)
   sin blur se ve directamente negra: al 5% no hay acento que se note.
   Sube a una mezcla solida sobre --surf-1 (la superficie opaca que ya
   usa el resto de las tarjetas, distinta en claro y oscuro), con el
   acento elegido por el usuario como velo por encima. Dos propiedades
   sueltas (color + imagen) y no un solo `background` con capas: el
   shorthand con una capa en var() y otra en color plano resuelve raro
   en algunos motores.

   POR QUE #crm-workspace Y NO SOLO `html body`. En tema claro,
   claro.css tiene `html[data-tema="claro"] .glass-panel {background:
   var(--surf-1) !important}` — y `.main-tabs` TAMBIEN lleva la clase
   `.glass-panel`. Esa regla pesa (0,2,1): el atributo de tema cuenta
   como una clase mas. `html body .main-tabs` pesa solo (0,1,2) y
   perdia el empate, asi que en claro se veia sin el tinte de acento
   (correcto en oscuro, donde `[data-tema="claro"]` no matchea, y por
   eso en las pruebas se vio bien ahi y mal en claro). Un id rompe el
   empate sin tener que iguales la cadena de claro.css. Mismo patron
   que ya usa movil.css para este mismo tipo de pulseada. */
@media (max-width: 768px) {
    #crm-workspace .main-tabs {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: var(--surf-1) !important;
        background-image: linear-gradient(rgba(var(--acento-rgb), 0.16), rgba(var(--acento-rgb), 0.16)) !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;
    }
}