/* ========================================================== CRM - MODOS DE DISEÑO Cinco identidades visuales de verdad —tipografía, la barra superior de ventanas y modales, y cuanto aire dejan los contenedores—, no solo un radio de borde distinto. La idea es la de los skins de Winamp: mismo reproductor, look completamente distinto. El color de acento, el tema claro/oscuro y el brillo siguen siendo del panel de Apariencia y no se tocan aca. Igual que data-tema y data-fondo (ver js/apariencia.js), esto es un atributo en : data-modo="suave|nitido|elevado|compacto". Sin atributo = Clásico, el diseño de siempre, cero reglas nuevas. LA BARRA DE VENTANA. .modal-card no siempre trae un .modal-header armado (el modal de la campaña, por ejemplo, tiene un

suelto), asi que la textura no cuelga de un elemento que puede faltar: es un ::before propio del contenedor, calcado en tamaño y esquinas al contenedor mismo. Funciona con cualquier modal, viejo o nuevo. TIPOGRAFIA SIN RED. Cambiar de tipografia sin pedir una fuente nueva por HTTP: Inter, JetBrains Mono y Roboto ya se bajan siempre (ver el de Google Fonts en index.html), y para el modo Elevado alcanza una serif de sistema —Georgia—, que esta en cualquier maquina sin bajar nada. ANCHO DE COLUMNA, NO ESTRUCTURA. El layout de escritorio (la barra lateral fija, sus 236px, el grid de dos columnas) es la parte mas fragil de todo el CRM —tiene su propio archivo entero, escritorio.css, con comentarios de "esto se rompe si..."— asi que modos.css no la toca: ni el ancho de la barra, ni si esta plegada, ni el grid-template-areas. Lo que SI cambia por modo es cuanto entra en el mismo espacio: el tamaño minimo de cada tarjeta en metrics-grid/cards-grid (mas chico = mas columnas, mas denso). EN CELULAR TAMBIEN, PERO LIVIANO. La barra de pestañas de abajo (.main-tabs, ver movil.css) tambien cambia de forma por modo —el mismo skin que en escritorio, radios y textura— pero SOLO en propiedades que no mueven nada de lugar: border-radius, sombra, textura de fondo. Nunca padding, alto, ancho ni gap: eso es lo que movil.css ya calculo en pixeles justos para que quepan nueve pestañas en un iPhone SE, y tocarlo ahi es donde se rompe algo. Va despues de claro.css a proposito: varias reglas de legibilidad usan !important, y sin igualarlas esas ganan siempre sin importar el orden de los . DE DONDE SALE CADA UNO. No son cuatro variaciones inventadas: cada modo calca una familia estetica reconocida, del catalogo de 68 sistemas de diseño de rohitg00/awesome-claude-design —asi no es "un poco mas redondeado" sino una identidad con nombre y con precedentes: Suave -> Playful Color / Warm Editorial Nitido -> Terminal-Core / Data-Dense Pro Elevado -> Cinematic Dark (con acento editorial: serif, metal) Compacto -> Data-Dense Pro, eje puesto en densidad de info Los principios de movimiento (curvas, duraciones, cuando SI y cuando NO animar) son de emilkowalski/skills (emil-design-eng), y los anti-patrones a evitar (glassmorphism, serif italica, tarjetas anidadas) son de impeccable.style. */ /* Quien pidio menos movimiento en el sistema operativo lo pidio en serio: mareos, migrañas, vestibular. Ninguna transicion ni animacion de este archivo corre si prefers-reduced-motion esta activo — los modos siguen cambiando de forma (radio, sombra, tipografia), solo dejan de moverse para llegar ahi. */ @media (prefers-reduced-motion: reduce) { html[data-modo] * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ============================================================ TIPOGRAFIA — corre en cualquier ancho de pantalla. ============================================================ */ html[data-modo="suave"] { --modo-font: 'Inter', -apple-system, sans-serif; } html[data-modo="suave"] body, html[data-modo="suave"] button, html[data-modo="suave"] input, html[data-modo="suave"] select, html[data-modo="suave"] textarea { font-family: var(--modo-font) !important; letter-spacing: 0 !important; } html[data-modo="nitido"] { --modo-font: 'JetBrains Mono', ui-monospace, monospace; } html[data-modo="nitido"] .campana-seccion h4, html[data-modo="nitido"] .ap-seccion h4, html[data-modo="nitido"] .modal-header h3, html[data-modo="nitido"] .metric-data > h3 { text-transform: uppercase !important; letter-spacing: 0.06em !important; } html[data-modo="elevado"] { --modo-font-heading: Georgia, 'Times New Roman', serif; } html[data-modo="elevado"] .modal-header h3, html[data-modo="elevado"] .campana-card > h3, html[data-modo="elevado"] .campana-seccion h4, html[data-modo="elevado"] .ap-seccion h4, html[data-modo="elevado"] .lead-card-name, html[data-modo="elevado"] .metric-data > h3 { font-family: var(--modo-font-heading) !important; font-weight: 400 !important; letter-spacing: 0.01em !important; } /* El numero grande de cada tarjeta, en serif tambien: la lectura de "un ledger elegante" en vez de "un panel tecnico". */ html[data-modo="elevado"] .metric-value { font-family: var(--modo-font-heading) !important; font-weight: 400 !important; } html[data-modo="compacto"] { --modo-font: 'Inter', -apple-system, sans-serif; } html[data-modo="compacto"] body, html[data-modo="compacto"] button, html[data-modo="compacto"] input, html[data-modo="compacto"] select, html[data-modo="compacto"] textarea { font-family: var(--modo-font) !important; } /* ============================================================ LA BARRA DE VENTANA — el "skin" de verdad de cada modal. Un ::before de 30px arriba de cada .modal-card, calcado a sus esquinas. Los contenedores que no traen su propio radio de modo (mas abajo) usan el que ya tienen; el ::before sigue al padre. ============================================================ */ @media (min-width: 900px) { /* La barra de titulo falsa (y sus puntitos "nitido") es un guiño a ventana flotante: tiene sentido en un modal de verdad, no en Matcher ni Mensajes montados como pagina (`.es-pagina`), donde quedaba una franja solida pegada arriba, sin ventana que decorar. Se excluye ahi. */ html[data-modo] .modal-card:not(.es-pagina):not(.sin-barra-modo) { position: relative; padding-top: 46px !important; } html[data-modo] .modal-card:not(.es-pagina):not(.sin-barra-modo)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px; border-top-left-radius: inherit; border-top-right-radius: inherit; pointer-events: none; } /* Suave: degrade pastel del acento, borde inferior suave. */ html[data-modo="suave"] .modal-card::before { background: linear-gradient(180deg, rgba(var(--acento-rgb), 0.22), rgba(var(--acento-rgb), 0.05)); border-bottom: 1px solid rgba(var(--acento-rgb), 0.18); } /* Nitido: solida, plana, con tres marcas cuadradas a la izquierda —el guiño a la barra de titulo de una consola vieja— y un borde inferior duro en vez de sombra. */ html[data-modo="nitido"] .modal-card::before { background: var(--surf-2); border-bottom: 1.5px solid var(--border-color); } html[data-modo="nitido"] .modal-card:not(.es-pagina):not(.sin-barra-modo)::after { content: '▪ ▪ ▪'; position: absolute; top: 11px; left: 16px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 3px; color: var(--text-dim); pointer-events: none; } /* Elevado: metal cepillado — rayas finas repetidas, como los skins cromados de reproductor de musica de los 2000, mas un resalte (highlight arriba, sombra abajo) para que se lea con relieve. */ html[data-modo="elevado"] .modal-card::before { background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 3px), linear-gradient(180deg, var(--surf-3), var(--surf-1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.4); } /* Compacto: solo un filo de color, sin banda — la ventana no gasta 30px en decoracion si la idea es ver mas contenido. */ html[data-modo="compacto"] .modal-card:not(.es-pagina):not(.sin-barra-modo) { padding-top: 20px !important; } html[data-modo="compacto"] .modal-card:not(.es-pagina):not(.sin-barra-modo)::before { height: 3px; background: rgb(var(--acento-rgb)); } } /* fin @media ventana */ /* La entrada del modal. legibilidad.css ya le pone a .modal-card un rebote fijo (modalPopIn, cubic-bezier con overshoot) que le queda bien a Suave y Elevado —tiene algo de personalidad— pero no a Nitido ni Compacto: un modo que se define por no moverse de mas no puede rebotar al abrir. Ahí se cambia por una entrada seca: ease-out sin rebote, scale(0.97) a 1 —nunca desde 0, nada en la vida real aparece de la nada—. Pisa el !important de legibilidad.css por especificidad: dos selectores (html[data-modo] + .modal-card) le ganan a uno solo, sin tocar la regla original para los otros modos. */ @keyframes modoPopSinBote { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } html[data-modo="nitido"] .modal-card, html[data-modo="compacto"] .modal-card { animation: modoPopSinBote 160ms cubic-bezier(0.23, 1, 0.32, 1) !important; } /* ============================================================ FORMA Y MOVIMIENTO — radios, sombras, como reacciona al hover. Corre en cualquier ancho: no ocupa espacio de mas, solo cambia como se ve lo que ya esta. ============================================================ */ /* --- SUAVE: redondeado y amable ---------------------------- */ html[data-modo="suave"] .btn, html[data-modo="suave"] .btn-secondary, html[data-modo="suave"] .btn-primary-3d, html[data-modo="suave"] .metric-card, html[data-modo="suave"] .lead-card, html[data-modo="suave"] .top-navbar, html[data-modo="suave"] .main-tabs, html[data-modo="suave"] .campana-seccion, html[data-modo="suave"] .campana-texto { border-radius: 20px !important; transition: transform var(--d-base, 220ms) var(--c-out, ease-out), box-shadow var(--d-base, 220ms) var(--c-out, ease-out) !important; } html[data-modo="suave"] .modal-card { border-radius: 28px !important; } html[data-modo="suave"] input[type="text"], html[data-modo="suave"] input[type="email"], html[data-modo="suave"] input[type="password"], html[data-modo="suave"] input[type="number"], html[data-modo="suave"] select, html[data-modo="suave"] textarea { border-radius: 14px !important; } /* :active en todos lados —tocar responde igual en mouse y en dedo—; :hover solo si hay mouse de verdad. Sin el gate, un toque en tablet deja el hover "pegado" hasta el proximo tap en otro lado: la tarjeta queda flotando como si el dedo siguiera encima. */ html[data-modo="suave"] .btn:active, html[data-modo="suave"] .btn-secondary:active, html[data-modo="suave"] .btn-primary-3d:active { transform: scale(0.97); transition: transform 140ms ease-out !important; } @media (hover: hover) and (pointer: fine) { html[data-modo="suave"] .btn:hover, html[data-modo="suave"] .btn-secondary:hover, html[data-modo="suave"] .btn-primary-3d:hover { transform: translateY(-2px); } html[data-modo="suave"] .metric-card:hover, html[data-modo="suave"] .lead-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.35); } } /* --- NITIDO: afilado y directo ------------------------------ */ html[data-modo="nitido"] .btn, html[data-modo="nitido"] .btn-secondary, html[data-modo="nitido"] .btn-primary-3d, html[data-modo="nitido"] .metric-card, html[data-modo="nitido"] .lead-card, html[data-modo="nitido"] .modal-card, html[data-modo="nitido"] .glass-panel, html[data-modo="nitido"] .top-navbar, html[data-modo="nitido"] .main-tabs, html[data-modo="nitido"] .campana-seccion, html[data-modo="nitido"] .campana-texto { border-radius: 4px !important; box-shadow: none !important; border: 1.5px solid var(--border-color) !important; transition: border-color var(--d-instant, 80ms) linear, background var(--d-instant, 80ms) linear !important; } html[data-modo="nitido"] input[type="text"], html[data-modo="nitido"] input[type="email"], html[data-modo="nitido"] input[type="password"], html[data-modo="nitido"] input[type="number"], html[data-modo="nitido"] select, html[data-modo="nitido"] textarea { border-radius: 4px !important; } /* Nitido no levanta nada al pasar el mouse —es la idea del modo—, pero SI responde al toque/click: sin feedback de presion un botón sin sombra ni radio se siente muerto, no "directo". */ html[data-modo="nitido"] .btn:active, html[data-modo="nitido"] .btn-secondary:active, html[data-modo="nitido"] .btn-primary-3d:active { transform: scale(0.98); transition: transform 100ms ease-out !important; } /* --- ELEVADO: con profundidad -------------------------------- */ html[data-modo="elevado"] .metric-card, html[data-modo="elevado"] .lead-card, html[data-modo="elevado"] .top-navbar, html[data-modo="elevado"] .main-tabs, html[data-modo="elevado"] .campana-seccion, html[data-modo="elevado"] .campana-texto { border-radius: 10px !important; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55) !important; border-color: transparent !important; transition: transform var(--d-base, 220ms) var(--c-out, ease-out), box-shadow var(--d-base, 220ms) var(--c-out, ease-out) !important; } @media (hover: hover) and (pointer: fine) { html[data-modo="elevado"] .metric-card:hover, html[data-modo="elevado"] .lead-card:hover, html[data-modo="elevado"] .campana-texto:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6) !important; } } html[data-modo="elevado"] .btn:active, html[data-modo="elevado"] .btn-secondary:active, html[data-modo="elevado"] .btn-primary-3d:active { transform: scale(0.97); transition: transform 140ms ease-out !important; } html[data-modo="elevado"] .modal-card { border-radius: 10px !important; box-shadow: 0 30px 70px -12px rgba(0, 0, 0, 0.7), 0 0 50px var(--accent-glow, transparent) !important; } html[data-modo="elevado"] .btn-primary-3d { box-shadow: 0 10px 24px -8px rgba(var(--acento-rgb), 0.55) !important; } /* La misma chapa cepillada del modal-card, ahora en la barra superior: es la ventana que más tiempo está a la vista, tiene sentido que lleve el skin también. */ html[data-modo="elevado"] .top-navbar { position: relative; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.04) 0px, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 3px), var(--bg-surface) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 30px -14px rgba(0, 0, 0, 0.55) !important; } /* --- COMPACTO: denso y directo -------------------------------- */ html[data-modo="compacto"] .btn, html[data-modo="compacto"] .btn-secondary { padding-top: 6px !important; padding-bottom: 6px !important; border-radius: 8px !important; } html[data-modo="compacto"] .metric-card, html[data-modo="compacto"] .lead-card { padding: 10px 12px !important; border-radius: 8px !important; } html[data-modo="compacto"] .top-navbar, html[data-modo="compacto"] .main-tabs { padding: 0.5rem 1rem !important; margin-bottom: 0.65rem !important; border-radius: 8px !important; box-shadow: none !important; } html[data-modo="compacto"] .campana-seccion { padding: 12px 14px !important; border-radius: 10px !important; } html[data-modo="compacto"] .modal-card { border-radius: 10px !important; } html[data-modo="compacto"] .metric-card:hover, html[data-modo="compacto"] .lead-card:hover, html[data-modo="compacto"] .btn:hover, html[data-modo="compacto"] .btn-secondary:hover { transform: none !important; transition: background var(--d-instant, 80ms) linear !important; } /* ============================================================ DENSIDAD DE LAYOUT — cuanto aire dejan los contenedores grandes. Solo desde 900px: es el corte en el que sistema.css pasa a la barra lateral y el contenido deja de medirse contra la ventana entera. Abajo de eso el celular ya tiene su propio ajuste. ============================================================ */ @media (min-width: 900px) { html.nav-lateral[data-modo="suave"] body .tab-content { padding: 28px 32px 40px !important; } html[data-modo="suave"] .metrics-grid, html[data-modo="suave"] .stats-grid, html[data-modo="suave"] .cards-grid { gap: 20px !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; } html.nav-lateral[data-modo="elevado"] body .tab-content { padding: 36px 40px 48px !important; } html[data-modo="elevado"] .metrics-grid, html[data-modo="elevado"] .stats-grid, html[data-modo="elevado"] .cards-grid { gap: 24px !important; /* Menos columnas, cada una mas ancha: la idea de "premium" es que cada tarjeta respire, no que entren mas. */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; } html.nav-lateral[data-modo="nitido"] body .tab-content { padding: 14px 18px 26px !important; } html[data-modo="nitido"] .metrics-grid, html[data-modo="nitido"] .stats-grid, html[data-modo="nitido"] .cards-grid { gap: 10px !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; } html.nav-lateral[data-modo="compacto"] body .tab-content { padding: 10px 14px 20px !important; } html[data-modo="compacto"] .metrics-grid, html[data-modo="compacto"] .stats-grid, html[data-modo="compacto"] .cards-grid { gap: 8px !important; /* Mas columnas, cada una mas angosta: la idea de este modo es ver mas de un vistazo, y esto es lo que de verdad lo logra — el radio chico y el padding ajustado ya estaban, pero sin esto seguian siendo las mismas tres tarjetas por fila. */ grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; } } /* fin @media densidad */ /* ============================================================ LA BARRA DE ABAJO EN CELULAR — mismo skin, cero riesgo. Solo forma (radio, sombra, textura) sobre .tab-btn: nunca alto, padding, gap ni ancho, que es lo que movil.css ya afino en pixeles para que entren nueve pestañas en la pantalla mas chica que hay. ============================================================ */ @media (max-width: 899px) { html[data-modo="suave"] .main-tabs .tab-btn.active { border-radius: 999px !important; } html[data-modo="nitido"] .main-tabs .tab-btn.active { border-radius: 3px !important; box-shadow: inset 0 -2px 0 rgb(var(--acento-rgb)) !important; } html[data-modo="elevado"] .main-tabs .tab-btn.active { box-shadow: 0 6px 16px -6px rgba(var(--acento-rgb), 0.6) !important; } html[data-modo="compacto"] .main-tabs .tab-btn.active { border-radius: 6px !important; } } /* fin @media barra celular */ /* ============================================================ EFECTOS DE FIRMA — uno por modo, el detalle que se recuerda. Solo transform y opacity: son las dos propiedades que el navegador puede animar sin volver a calcular layout ni pintar de nuevo (Emil Kowalski, "Hardware Acceleration"). Nada de esto corre en bucle sobre algo grande —una tarjeta entera, la pantalla completa—, y prefers-reduced-motion ya los apaga a todos (arriba del todo de este archivo). ============================================================ */ /* Suave: el boton principal respira. Un pulso de opacidad en un halo propio, no en el boton —el boton no se mueve, no distrae del texto—, muy lento (3.4s) para que se lea como "vivo", no como "cargando". */ @keyframes modoRespirar { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } } html[data-modo="suave"] .btn-primary-3d { position: relative; isolation: isolate; } html[data-modo="suave"] .btn-primary-3d::after { content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: inherit; background: rgb(var(--acento-rgb)); filter: blur(10px); opacity: 0.5; animation: modoRespirar 3.4s ease-in-out infinite; } /* Nitido: cursor de terminal parpadeando al lado de cada titulo de seccion. El guiño tipografico de una consola de verdad, y cuesta literalmente nada: es opacity en un caracter de texto. */ @keyframes modoParpadear { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } html[data-modo="nitido"] .campana-seccion h4::after, html[data-modo="nitido"] .ap-seccion h4::after { content: '_'; margin-left: 4px; color: rgb(var(--acento-rgb)); animation: modoParpadear 1s step-end infinite; } /* Elevado: un brillo cruza el boton principal al pasar el mouse —el gesto clasico de metal pulido—. Es un ::after con gradiente que se desliza con transform, nunca se mueve en reposo: cero costo hasta que alguien pasa el mouse, y ahi ya se estaba pagando el hover. */ html[data-modo="elevado"] .btn-primary-3d { position: relative; overflow: hidden; } html[data-modo="elevado"] .btn-primary-3d::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(-20%); transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; } @media (hover: hover) and (pointer: fine) { html[data-modo="elevado"] .btn-primary-3d:hover::after { transform: translateX(320%); } } /* Compacto no tiene efecto de firma a proposito: es el modo que existe para minimizar el movimiento, no para sumarle uno mas (ver la nota de Emil Kowalski sobre acciones de alta frecuencia mas arriba en la conversacion que armo este archivo). */ /* ============================================================ NANO — todo mucho mas chico, de verdad. Los otros cuatro modos cambian FORMA (radios, sombras, cuanto se mueve algo), no TAMAÑO: ninguno toca el font-size ni el padding real de cientos de tarjetas, botones, grillas y modales repartidos en mas de veinte hojas de estilo. Retocar cada uno a mano para que "todo se vea mas chico" es una tarea sin fin y facil de dejar inconsistente (una tarjeta se achica, la de al lado se olvida). `zoom` en .content-area hace lo mismo que Ctrl+- del navegador pero fijo para este modo y solo ahi: reescala TODO el contenido de cada pantalla por igual —tipografia, iconos, paddings, imagenes— sin tocar una sola regla de las demas hojas. Es la unica forma de garantizar que Hunter (una pantalla completa con una grilla larga de rubros) entre sin scroll en un monitor comun, en vez de perseguir el objetivo elemento por elemento. NO VA EN . La primera version zoomeaba TODO desde la raiz y compensaba la barra lateral con un segundo zoom anidado (1.2) para que no quedara diminuta. Los dos zoom anidados rompian el calculo de `100vh` de la barra (ver escritorio.css): un zoom hijo adentro de un zoom padre no simplemente multiplica el tamaño visual, tambien recalcula que es "100vh" para ese hijo, y el resultado terminaba mas alto que la pantalla real —la barra se cortaba abajo—. La barra lateral (.main-tabs) y la cabecera (.top-navbar) son AREAS DE GRILLA hermanas de .content-area (ver escritorio.css), no contenedoras de ella: zoomear solo .content-area evita el anidamiento por completo. La barra queda siempre a tamaño normal, nunca se rompe, y ademas tiene mas sentido: es el mapa de la app, no el contenido que se quiere ver mas chico. No es `transform: scale()`: eso no reduce el espacio que el contenido ocupa en el flujo (dejaria un hueco en blanco al costado o abajo), mientras que `zoom` sí achica el layout de verdad, igual que el zoom del navegador. Soportado en Chrome, Edge y Safari —el grueso de quien usa este CRM—; en el rarisimo caso de un Firefox viejo sin soporte, el modo simplemente no hace nada y se ve como Clasico, nunca peor. */ html[data-modo="nano"] .content-area { zoom: 0.7; } /* ============================================================ IA — vidrio líquido, SIN backdrop-filter. La primera version usaba blur(20px) de verdad, y ahi esta el bug de rendimiento: rendimiento.css (que carga DESPUES de este archivo, ver el comentario al principio de ese) mata backdrop-filter a proposito en .top-navbar, .main-tabs, .glass-panel y toda tarjeta repetida — con casos de uso documentados ahi mismo (200 leads, scroll con el header fijo encima) de por que un blur real vuelve todo un tironeo. La version anterior de este modo pisaba esa proteccion por especificidad ([data-modo] + clase le gana a "html body .clase") y volvia a prender el blur que la otra hoja habia apagado a proposito. La solucion no es pelear esa hoja: es lograr el look de vidrio SIN la parte cara. Nada de esto usa backdrop-filter ni filter — son gradientes solidos semitransparentes sobre la superficie opaca de siempre (var(--surf-1), la misma que ya fuerza rendimiento.css), mas un borde fino y un brillo interior. Se ve a vidrio porque tiene las capas de luz de un vidrio; no PORQUE deje ver lo de atras. Mismo truco que "Elevado" con la chapa cepillada (repeating-gradient estatico, cero costo despues del primer pintado). Y para que se note en TODA la app, no solo en las tarjetas: navbar, panel lateral, botones, campos, filas de tabla, chat y el fondo del contenido llevan el mismo lenguaje. El brillo animado (la firma del modo) queda reservado a lo que siempre es poco: la tarjeta grande del dashboard, la barra superior y los botones primarios — nunca una lista que puede tener cientos de filas, que es exactamente la situacion que rendimiento.css ya identifico como el problema real. */ html[data-modo="ia"] { --modo-font: 'Inter', -apple-system, sans-serif; --ia-line: rgba(255, 255, 255, 0.14); --ia-line-fuerte: rgba(255, 255, 255, 0.22); } html[data-tema="claro"][data-modo="ia"] { --ia-line: rgba(10, 15, 20, 0.12); --ia-line-fuerte: rgba(10, 15, 20, 0.20); } html[data-modo="ia"] body, html[data-modo="ia"] button, html[data-modo="ia"] input, html[data-modo="ia"] select, html[data-modo="ia"] textarea { font-family: var(--modo-font) !important; letter-spacing: -0.01em !important; } /* --- El lienzo: un lavado de color MUY sutil detras del contenido, una sola capa (dos radiales superpuestos se veian "manchados", sobre todo con acentos calidos como el ambar/naranja). No es una foto ni un blur — un gradiente fijo, un solo pintado, cero costo despues del primer frame porque no se mueve ni se recalcula. */ html[data-modo="ia"] .content-area { background-image: radial-gradient(1400px 700px at 20% -10%, rgba(var(--acento-rgb), 0.08), transparent 62%) !important; } /* --- Tarjetas y paneles: gradiente solido de dos capas SOBRE la superficie opaca (var(--surf-1), la que ya fuerza rendimiento.css), nunca reemplazandola por transparencia real. `!important` con mas especificidad (atributo+clase le gana a "html body .clase") para ganarle a esa hoja EN EL COLOR sin tocar backdrop-filter, que ahi se deja apagado — es lo que corresponde. */ html[data-modo="ia"] .metric-card, html[data-modo="ia"] .lead-card, html[data-modo="ia"] .campana-seccion, html[data-modo="ia"] .campana-texto, html[data-modo="ia"] .modal-card, html[data-modo="ia"] .glass-panel, html[data-modo="ia"] .stat-card, html[data-modo="ia"] .chart-card, html[data-modo="ia"] .resumen-item, html[data-modo="ia"] .users-container, html[data-modo="ia"] .bitacora-panel, html[data-modo="ia"] .grid-consultas, html[data-modo="ia"] .chat-lista, html[data-modo="ia"] .chat-panel, html[data-modo="ia"] .matcher-carta { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 55%) !important; background-color: var(--surf-1) !important; border: 1px solid var(--ia-line) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } html[data-modo="ia"] .modal-card { border-radius: 20px !important; } /* Anidadas (una tarjeta dentro de un panel) no repiten la capa: se ven una tarjeta adentro de otra, igual criterio que rendimiento.css. */ html[data-modo="ia"] .glass-panel .metric-card, html[data-modo="ia"] .glass-panel .resumen-item { background-image: none !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } html[data-modo="ia"] .btn, html[data-modo="ia"] .btn-secondary, html[data-modo="ia"] .btn-primary-3d { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)) !important; border: 1px solid var(--ia-line) !important; border-radius: 999px !important; } html[data-modo="ia"] input[type="text"], html[data-modo="ia"] input[type="email"], html[data-modo="ia"] input[type="password"], html[data-modo="ia"] input[type="number"], html[data-modo="ia"] input[type="search"], html[data-modo="ia"] select, html[data-modo="ia"] textarea { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent) !important; border: 1px solid var(--ia-line) !important; border-radius: 12px !important; } /* --- Barra superior y panel lateral: el mismo gradiente solido, con suficiente especificidad para ganarle a las variantes de rendimiento.css (base, .nav-lateral, .nav-plegada y la de celular con #crm-workspace) sin reactivar blur en ninguna. */ html[data-modo="ia"] .top-navbar, html[data-modo="ia"].nav-lateral .top-navbar, html[data-modo="ia"].nav-lateral .main-tabs, html[data-modo="ia"].nav-lateral.nav-plegada .main-tabs { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 50%) !important; border-color: var(--ia-line) !important; } @media (max-width: 768px) { html[data-modo="ia"] #crm-workspace .main-tabs { background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.06), transparent 70%) !important; } } /* Los iconos del panel lateral NO llevan tinte de vidrio: el gradiente de arriba es carne del panel, no de cada icono. Sin esto, el drop-shadow oscuro que rendimiento.css les pone para leerse sobre fotos (ver ese archivo) se ve sucio/parduzco sobre un fondo liso como el de este modo, que no tiene foto detras. Se apaga ESE drop-shadow y se deja el color de icono normal de la app —nitido, sin filtro encima—, tanto activo como inactivo. */ html[data-modo="ia"].nav-lateral .main-tabs .tab-btn i, html[data-modo="ia"].nav-lateral .main-tabs .lat-pie .btn-icon i, html[data-modo="ia"].nav-lateral .main-tabs .lat-plegar i { filter: none !important; } html[data-modo="ia"].nav-lateral .main-tabs .tab-btn span.tab-rotulo, html[data-modo="ia"].nav-lateral .main-tabs .lat-plegar .lat-plegar-txt { text-shadow: none !important; } html[data-modo="ia"] .main-tabs .tab-btn:not(.active) i, html[data-modo="ia"] .main-tabs .tab-btn:not(.active) { color: var(--text-muted) !important; opacity: 0.85 !important; } html[data-modo="ia"] .main-tabs .tab-btn.active, html[data-modo="ia"] .main-tabs .tab-btn.active i { color: rgb(var(--acento-rgb)) !important; opacity: 1 !important; } /* La franja de luz que cruza .top-navbar (ajustes.css, barra-pulso) es un loop infinito de 5.5s que corre SIEMPRE, en cualquier modo — ahi pasa inadvertida porque la barra de fondo es lisa. Contra el fondo con color/gradiente de este modo se nota mucho mas y se lee como un parpadeo constante ("sigue refrescando aunque ya cargo todo"). Se apaga solo aca; en Clasico y el resto sigue igual. */ html[data-modo="ia"] .top-navbar::before, html[data-modo="ia"] .top-navbar::after { animation: none !important; display: none !important; } /* Filas de tabla: solo tinte de fondo en hover, nada de transform ni sombra — rendimiento.css ya establecio por que (recalculo por fila en listas de cientos). Se respeta esa regla al pie de la letra. */ html[data-modo="ia"] .custom-table tbody tr:hover, html[data-modo="ia"] .lead-row:hover, html[data-modo="ia"] .cliente-row:hover { background: rgba(var(--acento-rgb), 0.07) !important; } html[data-modo="ia"] .btn:active, html[data-modo="ia"] .btn-secondary:active, html[data-modo="ia"] .btn-primary-3d:active { transform: scale(0.97); transition: transform 140ms ease-out !important; } @media (hover: hover) and (pointer: fine) { html[data-modo="ia"] .btn, html[data-modo="ia"] .btn-secondary, html[data-modo="ia"] .btn-primary-3d, html[data-modo="ia"] .metric-card { transition: transform 220ms ease-out !important; } html[data-modo="ia"] .btn:hover, html[data-modo="ia"] .btn-secondary:hover, html[data-modo="ia"] .btn-primary-3d:hover { transform: translateY(-2px); } html[data-modo="ia"] .metric-card:hover { transform: translateY(-3px); } } /* La barra de ventana del modal: mismo vidrio, un poco mas claro arriba para simular la luz que entra desde la esquina superior. */ @media (min-width: 900px) { html[data-modo="ia"] .modal-card:not(.es-pagina):not(.sin-barra-modo) { padding-top: 46px !important; } html[data-modo="ia"] .modal-card:not(.es-pagina):not(.sin-barra-modo)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px; border-top-left-radius: inherit; border-top-right-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02)); pointer-events: none; } } /* La firma del modo (el brillo especular que cruzaba la tarjeta al hacer hover) SE SACO. Era un ::after por tarjeta con `will-change: transform` puesto PERMANENTE (no solo durante el hover): eso le pide al navegador que mantenga una capa de GPU propia para cada tarjeta todo el tiempo, no solo cuando se anima. En celulares con GPU chica, o con varias tarjetas grandes visibles a la vez, esa promoción constante de capas es plata regalada — "que fluya" pesa mas que un brillito al pasar el mouse. Vidrio se nota igual con el borde, el degrade y la sombra interior de arriba; la parte animada no hacia falta. */ /* Densidad de layout: aire generoso, como el dashboard de referencia. */ @media (min-width: 900px) { html.nav-lateral[data-modo="ia"] body .tab-content { padding: 32px 36px 44px !important; } html[data-modo="ia"] .metrics-grid, html[data-modo="ia"] .stats-grid, html[data-modo="ia"] .cards-grid { gap: 20px !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; } } /* Barra de pestañas en celular: mismo vidrio, sin blur y sin tocar tamaños (los pixeles ya estan afinados en movil.css). */ @media (max-width: 899px) { html[data-modo="ia"] .main-tabs .tab-btn.active { border-radius: 999px !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)) !important; } } /* ============================================================ IA 2 — cartel gigante, colorido de verdad. Pedido explicito de "que no se vean solo tarjetas y colores": ademas de la superficie de cada tarjeta, cambia el FONDO del area de contenido (un lavado de dos tonos, no uno solo), la barra superior, el panel lateral, la tipografia de los titulos (Anton, la de carteles) y la forma de los botones (circulares de borde grueso, como el par de flechas del carrusel que pidió de referencia). Es deliberadamente el modo mas ruidoso de los siete — el pedido fue "cambio abrupto", no una variacion mas. NO ES UN COLOR FIJO. El pedido de referencia trae cuatro colores de fabrica (naranja/verde/rosa/celeste) que no dependen del acento del usuario. Ese approach no sirve aca: el acento SIGUE siendo el que se eligio en el panel de Apariencia (ver js/apariencia.js), en cualquiera de los siete modos — el lavado de fondo, el filo de las tarjetas y la barra superior salen todos de ese mismo color. SIN backdrop-filter, SIN filter, SIN mix-blend-mode y SIN capas extra en ningun lado — dos vueltas de ajuste de rendimiento probaron que ninguna de esas es gratis (ver el bloque del modo IA de mas arriba para el primer caso, y los comentarios de "RENDIMIENTO" mas abajo para el segundo). Todo lo que queda es color solido, escrito directo en el elemento, sin pseudo-elementos aparte. */ html[data-modo="ia2"] { --modo-font: 'Inter', -apple-system, sans-serif; --modo-font-cartel: 'Anton', 'Inter Tight', sans-serif; } /* RENDIMIENTO, segunda vuelta. La primera capa (fixed + filter + mix-blend-mode) se saco entera, no se atenuo: seguia siendo un ::before extra que el navegador tiene que componer aparte del contenido, y en celulares modestos CUALQUIER capa de mas —fixed o no— se nota si el resto de la pantalla ya tiene trabajo (una lista de leads larga, un grafico). El grano de textura tambien se saco completo por el mismo motivo: era 100% decorativo, cero costo no es lo mismo que costo bajo. El lavado de color ahora es UN SOLO gradiente, escrito directo en `.content-area` (ni pseudo-elemento ni capa aparte — el mismo patron liviano que ya usa el modo IA de arriba, que no tiene este problema). Menos intenso tambien por el otro pedido: "demasiado color en las tarjetas" — el lienzo de fondo es donde tiene que notarse el color, no cada tarjeta repetida. */ html[data-modo="ia2"] .content-area { background-image: linear-gradient(160deg, rgba(var(--acento-rgb), 0.10) 0%, transparent 50%) !important; } html[data-modo="ia2"] body, html[data-modo="ia2"] button, html[data-modo="ia2"] input, html[data-modo="ia2"] select, html[data-modo="ia2"] textarea { font-family: var(--modo-font) !important; } /* --- Titulares tipo cartel: la letra Anton, grande, mayuscula, bien apretada — el mismo gesto que el "3D SHAPE" gigante de fondo del prompt de referencia, aplicado a los titulos reales de cada pantalla en vez de a un texto decorativo inventado. */ html[data-modo="ia2"] .section-head h2, html[data-modo="ia2"] .modal-header h3, html[data-modo="ia2"] .campana-card > h3 { font-family: var(--modo-font-cartel) !important; text-transform: uppercase !important; letter-spacing: -0.01em !important; font-weight: 400 !important; } html[data-modo="ia2"] .section-head h2 { font-size: clamp(1.6rem, 3vw, 2.6rem) !important; line-height: 1 !important; } html[data-modo="ia2"] .metric-value { font-family: var(--modo-font-cartel) !important; letter-spacing: -0.01em !important; } /* --- Barra superior y panel lateral: el mismo lavado de dos tonos, con la especificidad que hace falta para ganarle a las variantes de rendimiento.css (ver el bloque del modo IA de mas arriba — mismo patron exacto, mismo motivo). */ html[data-modo="ia2"] .top-navbar, html[data-modo="ia2"].nav-lateral .top-navbar, html[data-modo="ia2"].nav-lateral .main-tabs, html[data-modo="ia2"].nav-lateral.nav-plegada .main-tabs { background-image: linear-gradient(120deg, rgba(var(--acento-rgb), 0.14), transparent 65%) !important; border-color: rgba(var(--acento-rgb), 0.30) !important; } @media (max-width: 768px) { html[data-modo="ia2"] #crm-workspace .main-tabs { background-image: linear-gradient(0deg, rgba(var(--acento-rgb), 0.12), transparent 70%) !important; } } /* Mismo apagado de la franja de luz que IA (ver el comentario en ese bloque) — con IA 2 el fondo tiene todavia mas color y el loop se nota mas todavia. */ html[data-modo="ia2"] .top-navbar::before, html[data-modo="ia2"] .top-navbar::after { animation: none !important; display: none !important; } /* --- Tarjetas: un filo de color arriba (el "acento como marca", no solo como detalle) mas el mismo lavado suave que ya usa el modo IA. Se repite el criterio de esa hoja: nunca sobre .lead-card ni sobre listas largas con el filo — ahi va solo el lavado, sin el borde grueso, porque un borde de 3px en cientos de filas es plata tirada en pintado por algo que no se termina de ver igual. */ /* Atenuado a pedido: antes cada tarjeta repetia el gradiente Y un filo de 3px — entre las diez y pico que entran en una pantalla se veia "demasiado color en todas las tarjetas". Queda un solo filo, mas fino (2px) y a media opacidad; el color fuerte vive en el lienzo de fondo, no en cada tarjeta. Sin `background-image` propio: la superficie solida de rendimiento.css (var(--surf-1)) queda tal cual, un gradiente menos por tarjeta. */ html[data-modo="ia2"] .metric-card, html[data-modo="ia2"] .stat-card, html[data-modo="ia2"] .chart-card, html[data-modo="ia2"] .glass-panel { border-top: 2px solid rgba(var(--acento-rgb), 0.65) !important; border-radius: 14px !important; } html[data-modo="ia2"] .lead-card, html[data-modo="ia2"] .campana-seccion, html[data-modo="ia2"] .campana-texto, html[data-modo="ia2"] .resumen-item { border-left: 2px solid rgba(var(--acento-rgb), 0.55) !important; } /* --- Botones circulares de borde grueso: el gesto de las dos flechas del carrusel de referencia, aplicado a los botones de icono sueltos que ya tiene el CRM (cerrar, editar, config...). Los de texto (.btn/.btn-secondary) quedan en pildora solida bien saturada. */ html[data-modo="ia2"] .btn-icon { background: transparent !important; border: 2px solid rgb(var(--acento-rgb)) !important; border-radius: 50% !important; } html[data-modo="ia2"] .btn, html[data-modo="ia2"] .btn-secondary { border-radius: 999px !important; border: 2px solid transparent !important; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700 !important; } html[data-modo="ia2"] .btn-primary-3d { background-image: linear-gradient(135deg, var(--primary-hover), var(--primary)) !important; border-radius: 999px !important; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700 !important; } @media (hover: hover) and (pointer: fine) { html[data-modo="ia2"] .btn-icon, html[data-modo="ia2"] .btn, html[data-modo="ia2"] .btn-secondary, html[data-modo="ia2"] .btn-primary-3d { transition: transform 150ms ease-out, background-color 150ms ease-out !important; } html[data-modo="ia2"] .btn-icon:hover { transform: scale(1.08); background: rgba(var(--acento-rgb), 0.14) !important; } } /* El levante en hover de .metric-card/.stat-card ya lo pone micro.css (translateY(-1px), el "spotlight" que sigue al mouse) — ANTES esto lo pisaba con otro valor (-3px) via !important, y las dos reglas activas a la vez es lo que se sentia como un tironeo en la tarjeta al pasar el mouse. Se saca la duplicada: micro.css ya corre en cualquier modo, no hace falta repetirla aca. */ /* Filas de tabla: solo tinte, mismo criterio de rendimiento.css que ya sigue el modo IA de arriba (sin transform ni sombra por fila). */ html[data-modo="ia2"] .custom-table tbody tr:hover, html[data-modo="ia2"] .lead-row:hover, html[data-modo="ia2"] .cliente-row:hover { background: rgba(var(--acento-rgb), 0.10) !important; } /* Barra de pestañas en celular: pildora solida con el filo del modo. */ @media (max-width: 899px) { html[data-modo="ia2"] .main-tabs .tab-btn.active { border-radius: 999px !important; background: rgba(var(--acento-rgb), 0.22) !important; box-shadow: inset 0 0 0 2px rgb(var(--acento-rgb)) !important; } }