/* ==========================================================
   CRM - MODOS DE DISEÑO

   Trece 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 <html>: data-modo="suave|nitido|elevado|compacto|
   nano|ia|ia2|minimal|bruto|fosforo|relieve|archivo".
   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 <h3> 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. Ningun modo pide una fuente nueva por HTTP ni
   agrega un @font-face. Inter, Inter Tight, JetBrains Mono, Roboto
   (peso 900) y Anton ya se bajan siempre en el mismo <link> de
   Google Fonts de index.html, y las serif son de sistema —Georgia,
   con ui-serif detras—, que estan en cualquier maquina sin bajar
   nada. Ese es el repertorio completo y no se amplia:
     Inter        -> cuerpo de casi todos los modos
     Inter Tight  -> titulares de portada en el sitio publico
     JetBrains Mono -> Nitido, Fosforo (en TODO), y los datos duros
                       —fechas, cifras, metadata— del resto
     Roboto 900   -> los titulares de Bruto, y solo ahi
     Anton        -> los titulares de cartel de IA 2, y solo ahi
     Georgia      -> Elevado (titulares) y Archivo (nombres propios)

   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 <link>.

   DE DONDE SALE CADA UNO. No son doce 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
     Nano     -> no es una estetica: es la escala, todo mas chico
     IA       -> Liquid Glass, pero sin backdrop-filter (ver su bloque)
     IA 2     -> Bold Editorial / cartel, tipografia de titular gigante
     Minimal  -> Premium Utilitarian Minimalism (minimalist-skill)
     Bruto    -> Neo-brutalismo web (The Verge, Gumroad): sombra dura
                 sin blur, papel y tinta sin grises, Roboto 900
     Fosforo  -> Terminal CRT (OpenCode, Ollama, Warp): el acento del
                 usuario ES el fosforo, mono en todo, scanlines
     Relieve  -> Extruido / soft-emboss (Aqua de Mac OS X, skins de
                 Winamp): una sola superficie, dos sombras opuestas
     Archivo  -> Ficha de catalogo (Criterion, Letterboxd,
                 thesephist.com): oscuro calido, mono-caps contra serif
   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.

   LOS CUATRO NUEVOS PISAN VARIABLES DE TEMA, NO COMPONENTES. Bruto,
   Fosforo, Relieve y Archivo cambian la paleta entera, y la
   forma barata de hacerlo es redefinir --surf-0..3, --bg-main,
   --text-main y --border-color en el propio bloque html[data-modo]:
   la app ya lee esas variables en todos lados (para eso existen), asi
   que el modo llega tambien a pantallas que este archivo ni nombra.
   Pisar componente por componente seria escribir claro.css de nuevo
   cinco veces. Los pocos `color: #fff` sueltos que quedan en otras
   hojas estan todos sobre un relleno de color (badges, pastilla de
   .danger, velo de una foto), donde el blanco es correcto igual. */

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

/* --- PANEL FLOTANTE. Pedido: que el panel lateral se lea como una
   pastilla de vidrio separada del borde de la ventana (referencia:
   dashboard de clima con sidebar "flotando" a 16px del borde), no
   pegada de punta a punta como en Clasico. Solo el margen y el radio
   cambian; el alto sigue siendo 100vh menos ese margen para que el
   panel no se corte ni tape contenido. `overflow: hidden` en el
   panel recorta las esquinas redondeadas sin frenar el scroll interno
   real, que sigue siendo cosa de `.lat-lista` (overflow-y: auto). Solo
   en escritorio: en celular el panel es la barra inferior fija y
   flotarla ahi rompe la altura que movil.css ya afino en pixeles. */
@media (min-width: 900px) {
html[data-modo="ia"].nav-lateral body .main-tabs {
    margin: 14px 0 14px 14px !important;
    height: calc(100vh - 28px) !important;
    max-height: calc(100vh - 28px) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28) !important;
}
html[data-modo="ia"].nav-lateral body .lat-lista {
    overflow-y: auto !important;
}
}

/* --- CABECERA: mismo trato flotante que el panel, separada del borde
   superior en vez de pegada, para que ambas piezas fijas del layout
   (panel + barra) se lean como el mismo par de tarjetas de vidrio que
   flotan sobre el fondo en la referencia. */
@media (min-width: 900px) {
html[data-modo="ia"].nav-lateral .top-navbar {
    margin: 14px 14px 0 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22) !important;
}
}

/* --- LA TARJETA GRANDE. La primera tarjeta de metrics-grid es el
   "hero" del dashboard (equivalente a la tarjeta "10°C / Central
   Jakarta" de la referencia): un poco mas de vidrio (mas radio, mas
   brillo interior arriba) para que se distinga del resto sin
   necesitar una clase nueva en el HTML. */
html[data-modo="ia"] .metrics-grid > .metric-card:first-child,
html[data-modo="ia"] .stats-grid > .stat-card:first-child {
    border-radius: 22px !important;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 65%) !important;
}
html[data-modo="ia"] .metrics-grid > .metric-card:first-child .metric-value,
html[data-modo="ia"] .stats-grid > .stat-card:first-child .metric-value {
    letter-spacing: -0.02em !important;
}

/* --- BRILLO DE ENTRADA. Se habia sacado el brillo especular animado
   por el costo de promover una capa de GPU POR TARJETA, PERMANENTE
   (ver comentario mas arriba). Esta version es distinta: un solo
   ::before, solo en la barra superior (un elemento fijo, nunca
   repetido), que corre UNA vez al cargar y despues queda quieto — sin
   will-change y con la animacion terminada (`forwards`), no hay capa
   de GPU que el navegador tenga que mantener viva de por vida. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
html[data-modo="ia"].nav-lateral .top-navbar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
    transform: translate3d(-160%, 0, 0) skewX(-18deg);
    animation: crm-ia-brillo 1.1s cubic-bezier(.22, .61, .36, 1) 0.4s 1 both;
    pointer-events: none;
}
@keyframes crm-ia-brillo {
    from { transform: translate3d(-160%, 0, 0) skewX(-18deg); }
    to   { transform: translate3d(260%, 0, 0) skewX(-18deg); }
}
}
@media (prefers-reduced-motion: reduce) {
html[data-modo="ia"].nav-lateral .top-navbar::after { display: none !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;
}
}

/* ============================================================
   MINIMAL — el color es un recurso escaso.

   LA REGLA QUE LO DEFINE, Y QUE NINGUN OTRO MODO APLICA.

   Los otros siete se distinguen por como se ve el borde de una
   tarjeta: mas redondo (Suave), mas recto (Nitido), con relieve
   (Elevado), mas junto (Compacto), translucido (IA). Todos suman
   algo. Este saca: apaga TODO el color que no significa nada.

   En el CRM hay color decorativo repartido por costumbre —el
   mosaico celeste del icono de "Total de leads", el violeta de
   "Leads movidos", el amarillo de "En Negociacion"— que no
   codifica ningun dato: son cuatro colores porque son cuatro
   tarjetas. Al lado de eso, el color que SI quiere decir algo (un
   plazo vencido en rojo, la etapa de un lead, el boton que
   dispara la accion) compite de igual a igual y pierde fuerza.

   Aca el color decorativo se vuelve gris y el acento queda para
   tres cosas nada mas: la accion principal, lo que esta activo, y
   lo que tiene el foco. El semantico —rojo de vencido, verde de
   ganado, el color de cada etapa— NO se toca: apagarlo seria
   romper el dato, no simplificar el diseño.

   DE DONDE SALE. Es el protocolo "Premium Utilitarian Minimalism"
   (skills/minimalist-skill), traducido a un panel oscuro: color
   como recurso escaso, filetes de 1px en vez de cajas, sombra
   practicamente inexistente, tipografia editorial con tracking
   ajustado y aire generoso entre bloques. La skill esta escrita
   para un sitio claro tipo Notion/Linear; lo que se conserva son
   las reglas, no la paleta —un CRM que se usa ocho horas por dia
   no se pasa a fondo blanco por un cambio de modo—.

   SIN FUENTES NUEVAS. Igual que el resto del archivo: no se pide
   un webfont mas. La skill pide "geometrica o nativa del sistema
   con caracter" y eso ya esta instalado en cualquier maquina —SF
   Pro en Mac, Segoe UI Variable en Windows 11— sin bajar un byte.
   ============================================================ */

html[data-modo="minimal"] {
    --modo-font: 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI',
                 'Helvetica Neue', system-ui, sans-serif;
    /* El filete: un solo valor para todo el modo. Se define en RGBA
       sobre el color del texto y no un gris fijo, asi sirve igual en
       el tema oscuro y en el claro sin escribir la regla dos veces. */
    --modo-filete: 1px solid rgba(127, 127, 127, 0.22);
}

html[data-modo="minimal"] body,
html[data-modo="minimal"] button,
html[data-modo="minimal"] input,
html[data-modo="minimal"] select,
html[data-modo="minimal"] textarea {
    font-family: var(--modo-font) !important;
}

/* Titulos: peso normal y tracking ajustado. Un titulo en 700 grita
   para separarse del cuerpo; con -0.02em y 500 se separa por forma,
   que es como lo hace una revista. */
html[data-modo="minimal"] .modal-header h3,
html[data-modo="minimal"] .campana-card > h3,
html[data-modo="minimal"] .campana-seccion h4,
html[data-modo="minimal"] .ap-seccion h4,
html[data-modo="minimal"] .section-head h2,
html[data-modo="minimal"] .metric-data > h3 {
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

/* El numero grande de cada tarjeta: tracking apretado, sin negrita
   extrema. El dato se lee por tamaño, no por grosor. */
html[data-modo="minimal"] .metric-value {
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
}

/* --- CERO SOMBRA, FILETE DE 1px ------------------------------
   La skill es explicita: nada de sombras pesadas, los bordes son
   siempre el mismo filete. Una tarjeta se separa del fondo porque
   tiene un borde, no porque flote. */
html[data-modo="minimal"] .metric-card,
html[data-modo="minimal"] .chart-card,
html[data-modo="minimal"] .tarjeta-panel,
html[data-modo="minimal"] .glass-panel,
html[data-modo="minimal"] .lead-card,
html[data-modo="minimal"] .campana-seccion,
html[data-modo="minimal"] .modal-card,
html[data-modo="minimal"] .barra-filtros {
    box-shadow: none !important;
    border: var(--modo-filete) !important;
    border-radius: 8px !important;
    background-image: none !important;
}

html[data-modo="minimal"] .btn,
html[data-modo="minimal"] .btn-secondary,
html[data-modo="minimal"] .btn-primary-3d,
html[data-modo="minimal"] input[type="text"],
html[data-modo="minimal"] input[type="email"],
html[data-modo="minimal"] input[type="password"],
html[data-modo="minimal"] input[type="number"],
html[data-modo="minimal"] input[type="search"],
html[data-modo="minimal"] select,
html[data-modo="minimal"] textarea {
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* --- EL COLOR DECORATIVO SE APAGA ----------------------------
   Los mosaicos de icono de las tarjetas del panel. Son cuatro
   colores elegidos para que no se repitan entre si, no para
   decir nada: pasan a un gris del propio tema. */
html[data-modo="minimal"] .metric-icon,
html[data-modo="minimal"] .metric-icon.icon-blue,
html[data-modo="minimal"] .metric-icon.icon-green,
html[data-modo="minimal"] .metric-icon.icon-yellow,
html[data-modo="minimal"] .metric-icon.icon-purple {
    background: rgba(127, 127, 127, 0.10) !important;
    color: var(--text-muted) !important;
    border: var(--modo-filete) !important;
    box-shadow: none !important;
}

/* OJO CON LO QUE NO SE APAGA. El chip de etapa, el plazo vencido,
   el canal de contacto y el color de estado de cada fila codifican
   un dato: si se volvieran grises se perderia informacion, no
   ruido. Por eso aca no hay ninguna regla que los toque —y no es
   un olvido, es el limite del modo—. */

/* --- EL ACENTO, SOLO DONDE SIGNIFICA --------------------------
   Tres lugares: la accion principal, lo activo y el foco. */
html[data-modo="minimal"] .btn-primary-3d {
    background: rgb(var(--acento-rgb)) !important;
    border-color: rgb(var(--acento-rgb)) !important;
}

html[data-modo="minimal"] .btn-secondary {
    background: transparent !important;
    border: var(--modo-filete) !important;
}

/* El foco se ve con un filete del acento y no con un halo difuso:
   accesible (no depende del color solo, cambia el borde) y sin
   pintar 20px alrededor del control. */
html[data-modo="minimal"] input:focus,
html[data-modo="minimal"] select:focus,
html[data-modo="minimal"] textarea:focus {
    border-color: rgb(var(--acento-rgb)) !important;
    box-shadow: 0 0 0 1px rgb(var(--acento-rgb)) !important;
    outline: none !important;
}

/* --- LA VENTANA: UN FILETE, NO UNA BARRA ---------------------
   Los otros modos dibujan una barra de titulo falsa de 30px
   (metal, puntitos de consola, degrade). Un modo que se define
   por sacar no puede gastar 30px en decorar: se reemplaza por el
   mismo filete que separa todo lo demas, y el modal recupera esos
   pixeles para contenido. */
@media (min-width: 900px) {
    html[data-modo="minimal"] .modal-card:not(.es-pagina):not(.sin-barra-modo) {
        padding-top: 22px !important;
    }
    html[data-modo="minimal"] .modal-card:not(.es-pagina):not(.sin-barra-modo)::before {
        height: 1px;
        background: rgba(127, 127, 127, 0.22);
    }
}

/* La entrada del modal, sin rebote: mismo criterio que Nitido y
   Compacto —un modo sobrio no puede abrir dando un salto—. */
html[data-modo="minimal"] .modal-card {
    animation: modoPopSinBote 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --- AIRE ------------------------------------------------------
   La skill pide macro-whitespace y columnas anchas: menos tarjetas
   por fila, cada una con mas margen adentro. Es lo contrario exacto
   de Compacto, y por eso los dos tienen sentido a la vez. */
@media (min-width: 900px) {
    html.nav-lateral[data-modo="minimal"] body .tab-content {
        padding: 40px 44px 56px !important;
    }
    html[data-modo="minimal"] .metrics-grid,
    html[data-modo="minimal"] .stats-grid,
    html[data-modo="minimal"] .cards-grid,
    html[data-modo="minimal"] .panel-grid {
        gap: 24px !important;
    }
    /* DOS IDS ADELANTE, Y NO ES DECORACION.

       Quien manda sobre el padding de esta tarjeta es compacto.css
       con `.tab-content:not(#tab-leads):not(#tab-config) .metric-card`.
       Los dos `:not()` llevan un ID adentro y un id dentro de `:not()`
       PESA COMO ID: esa regla vale (2,2,0), no lo que aparenta. Con
       `html[data-modo="minimal"] .metric-card` —(0,2,1)— esto perdia
       y la tarjeta se quedaba en 10px, o sea el modo que existe para
       dar aire era el mas apretado de todos.

       Es el mismo problema que ya documenta movil.css sobre
       .metric-value, y se resuelve igual: dos ids adelante para
       ganar por peso y no por orden de los <link>. */
    html[data-modo="minimal"] #app-container #crm-workspace .metric-card {
        padding: 24px !important;
    }
}

/* --- MOVIMIENTO CASI INVISIBLE -------------------------------
   "Presente pero nunca molesto" (skill, seccion 7). No hay efecto
   de firma con animacion en bucle a proposito: en este modo el
   gesto ES que nada se mueve solo. Queda la respuesta al toque,
   que es informacion —confirma que el click entro— y no adorno. */
html[data-modo="minimal"] .btn:active,
html[data-modo="minimal"] .btn-secondary:active,
html[data-modo="minimal"] .btn-primary-3d:active {
    transform: scale(0.98) !important;
}

/* Al pasar el mouse, la tarjeta no se levanta ni proyecta sombra:
   el filete sube de contraste. Es el equivalente oscuro del
   "shadow shift" de la skill —en un fondo negro una sombra negra
   no se ve, asi que el que cambia es el borde—. */
@media (hover: hover) and (pointer: fine) {
    html[data-modo="minimal"] .metric-card,
    html[data-modo="minimal"] .tarjeta-panel,
    html[data-modo="minimal"] .lead-card {
        transition: border-color 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    html[data-modo="minimal"] .metric-card:hover,
    html[data-modo="minimal"] .tarjeta-panel:hover,
    html[data-modo="minimal"] .lead-card:hover {
        border-color: rgba(var(--acento-rgb), 0.55) !important;
        transform: none !important;
        box-shadow: none !important;
    }
}

/* Filas de tabla: solo un tinte neutro, sin transform (mismo
   criterio de rendimiento.css que ya siguen IA e IA 2). */
html[data-modo="minimal"] .custom-table tbody tr:hover,
html[data-modo="minimal"] .lead-row:hover,
html[data-modo="minimal"] .cliente-row:hover,
html[data-modo="minimal"] .grid-fila:hover {
    background: rgba(127, 127, 127, 0.07) !important;
}

/* --- BARRA DE ABAJO EN CELULAR -------------------------------
   Solo forma, nunca alto ni padding (ver la nota de la seccion de
   la barra mas arriba: movil.css afino esos pixeles para que entren
   todas las pestañas en la pantalla mas chica).

   La pestaña activa no se rellena: se marca con un filete arriba.
   Es la version minima de "esta es la que estas mirando". */
@media (max-width: 899px) {
    html[data-modo="minimal"] .main-tabs .tab-btn.active {
        border-radius: 6px !important;
        background: transparent !important;
        box-shadow: inset 0 2px 0 rgb(var(--acento-rgb)) !important;
    }
}

/* ============================================================
   BRUTO — neo-brutalista. La sombra dura.

   LO QUE NINGUN OTRO MODO DEL ARCHIVO TIENE: una sombra con offset
   y blur CERO. Todas las demas de esta hoja son desenfocadas
   (Elevado: 30px de blur; Suave: 32px; IA: sombra interior). Una
   sombra sin blur no simula luz: simula que la tarjeta es un objeto
   fisico recortado y pegado un poco mas arriba que su propia
   silueta. Es el gesto de The Verge (2022) y de Gumroad, y es de lo
   mas barato que hay de pintar —no hay radio de desenfoque que
   calcular, es un rectangulo solido corrido—.

   PAPEL Y TINTA, SIN GRISES INTERMEDIOS. El modo tiene dos colores y
   nada mas. El CRM arranca oscuro, asi que el default es la version
   invertida —papel negro, tinta blanca, y la sombra dura BLANCA, que
   sobre negro es la unica que se ve— y html[data-tema="claro"] lo da
   vuelta a papel blanco / tinta negra. El gris tenue no es un tercer
   color: es la MISMA tinta bajada de opacidad, que es como se hace
   en imprenta (una trama, no otra plancha).

   EL ACENTO DEL USUARIO NO SE TOCA, y aca tiene un solo trabajo
   grande: la banda del modal. Es la unica superficie de color solido
   del modo entero, y por eso pega.
   ============================================================ */

html[data-modo="bruto"] {
    --modo-tinta: #ffffff;
    --modo-papel: #000000;
    /* El tenue de la version oscura: tinta blanca al 68%. Sobre
       negro da ~8.6:1, muy por encima del piso de 4.5:1. */
    --modo-tenue: rgba(255, 255, 255, 0.68);

    --modo-font: 'Inter', -apple-system, sans-serif;
    --modo-font-titular: 'Roboto', 'Inter Tight', sans-serif;
    --modo-font-num: 'JetBrains Mono', ui-monospace, monospace;

    /* LA FIRMA. Se guarda en variable porque aparece en cuatro
       estados distintos (reposo, hover, active, barra de celular) y
       tiene que ser exactamente la misma en los cuatro. */
    --modo-sombra: 5px 5px 0 0 var(--modo-tinta);
    --modo-sombra-alta: 7px 7px 0 0 var(--modo-tinta);
    --modo-sombra-hundida: 2px 2px 0 0 var(--modo-tinta);

    --bg-main: var(--modo-papel);
    --surf-0: var(--modo-papel);
    --surf-1: var(--modo-papel);
    --surf-2: var(--modo-papel);
    --surf-3: var(--modo-papel);
    --bg-surface: var(--modo-papel);
    --bg-card: var(--modo-papel);
    --bg-glass: rgba(0, 0, 0, 0.86);
    --border-color: var(--modo-tinta);
    --borde-luz: var(--modo-tinta);
    --text-main: var(--modo-tinta);
    --text-muted: var(--modo-tenue);
    --text-dim: var(--modo-tenue);
}

/* Tema claro: se da vuelta el par. Tinta negra al 62% sobre papel
   blanco da ~6.0:1, tambien por arriba del piso. */
html[data-tema="claro"][data-modo="bruto"] {
    --modo-tinta: #000000;
    --modo-papel: #ffffff;
    --modo-tenue: rgba(0, 0, 0, 0.62);
    --bg-glass: rgba(255, 255, 255, 0.88);
}

/* --- TIPOGRAFIA ---------------------------------------------
   Roboto 900 es la unica de las cuatro pesadas que ya se baja (ver
   el <link> de index.html): titulares, metricas y headers de modal.
   El cuerpo va en Inter 500 —un peso medio, no fino— porque contra
   un titular de 900 un cuerpo de 400 se ve desmayado. */
html[data-modo="bruto"] body,
html[data-modo="bruto"] button,
html[data-modo="bruto"] input,
html[data-modo="bruto"] select,
html[data-modo="bruto"] textarea {
    font-family: var(--modo-font) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

html[data-modo="bruto"] .section-head h2,
html[data-modo="bruto"] .modal-header h3,
html[data-modo="bruto"] .campana-card > h3,
html[data-modo="bruto"] .campana-seccion h4,
html[data-modo="bruto"] .ap-seccion h4,
html[data-modo="bruto"] .metric-data > h3,
html[data-modo="bruto"] .lead-card-name,
html[data-modo="bruto"] .metric-value {
    font-family: var(--modo-font-titular) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.03em !important;
    line-height: 0.92 !important;
}

/* line-height 0.92 corta descendentes en minuscula, pero aca no hay:
   todo lo de arriba va en mayusculas, que no tienen cola. Es la
   razon por la que el uppercase y el 0.92 vienen juntos y no se
   pueden separar. */

/* Los numeros que se comparan de arriba a abajo —fechas de la lista,
   celdas de tabla, rotulos de columna— en mono con cifras de ancho
   fijo, para que las unidades queden en la misma columna optica. La
   metrica grande se queda en Roboto 900 (es un titular, no una
   tabla) pero tambien pide tabular-nums: si el numero cambia de
   1.999 a 2.000 no tiene que saltar de ancho. */
html[data-modo="bruto"] .celda-fecha,
html[data-modo="bruto"] .fila-sub,
html[data-modo="bruto"] .grid-th,
html[data-modo="bruto"] .custom-table th,
html[data-modo="bruto"] .custom-table td {
    font-family: var(--modo-font-num) !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}
html[data-modo="bruto"] .metric-value {
    font-variant-numeric: tabular-nums !important;
}

/* --- FORMA: radio cero en todo, borde de 3px, sombra dura -----
   3px en contenedores, 2px en controles. La diferencia de un pixel
   es lo que hace que un boton se lea "adentro" de una tarjeta y no
   como otra tarjeta mas. */
html[data-modo="bruto"] .metric-card,
html[data-modo="bruto"] .lead-card,
html[data-modo="bruto"] .campana-seccion,
html[data-modo="bruto"] .campana-texto,
html[data-modo="bruto"] .modal-card,
html[data-modo="bruto"] .glass-panel,
html[data-modo="bruto"] .stat-card,
html[data-modo="bruto"] .chart-card,
html[data-modo="bruto"] .resumen-item,
html[data-modo="bruto"] .users-container,
html[data-modo="bruto"] .bitacora-panel,
html[data-modo="bruto"] .grid-consultas,
html[data-modo="bruto"] .chat-lista,
html[data-modo="bruto"] .chat-panel,
html[data-modo="bruto"] .matcher-carta {
    background-image: none !important;
    border: 3px solid var(--modo-tinta) !important;
    border-radius: 0 !important;
    box-shadow: var(--modo-sombra) !important;
}

/* Los botones llevan la sombra dura; los campos NO. Es la unica
   pista de que uno se aprieta y el otro se escribe, ahora que no
   hay ni radio ni relleno de color que los diferencie. */
html[data-modo="bruto"] .btn,
html[data-modo="bruto"] .btn-secondary,
html[data-modo="bruto"] .btn-primary-3d {
    border: 2px solid var(--modo-tinta) !important;
    border-radius: 0 !important;
    box-shadow: var(--modo-sombra) !important;
    background-image: none !important;
}
html[data-modo="bruto"] input[type="text"],
html[data-modo="bruto"] input[type="email"],
html[data-modo="bruto"] input[type="password"],
html[data-modo="bruto"] input[type="number"],
html[data-modo="bruto"] input[type="search"],
html[data-modo="bruto"] select,
html[data-modo="bruto"] textarea {
    border: 2px solid var(--modo-tinta) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* Radio cero de verdad: tambien los avatares y las pastillas, que
   son las dos cosas que suelen quedar redondas cuando un modo dice
   "sin radio" y delatan que el barrido quedo a medias. Nunca se
   toca el <i> de Font Awesome: ponerle font-family propia mata el
   glifo del icono. */
html[data-modo="bruto"] .avatar,
html[data-modo="bruto"] .avatar-con-iso,
html[data-modo="bruto"] .avatar-con-iso > img,
html[data-modo="bruto"] .cliente-avatar,
html[data-modo="bruto"] .llamada-avatar,
html[data-modo="bruto"] .profile-avatar-wrapper,
html[data-modo="bruto"] .btn-icon,
html[data-modo="bruto"] .badge,
html[data-modo="bruto"] .status-badge,
html[data-modo="bruto"] .main-tabs .tab-btn {
    border-radius: 0 !important;
}

/* --- MOVIMIENTO: el boton se hunde contra su propia sombra ----
   Este modo NO usa el scale(0.97) del resto del archivo, y es a
   proposito: con una sombra de offset fijo, correr el elemento 3px
   en diagonal y achicar la sombra a 2px es literalmente el gesto de
   apretar una tecla contra el papel. Un scale dejaria la sombra
   quieta y el efecto no se leeria. Sigue siendo transform puro
   —cero recalculo de layout— y 120ms, dentro del rango de feedback
   de boton (100-160ms). */
html[data-modo="bruto"] .btn,
html[data-modo="bruto"] .btn-secondary,
html[data-modo="bruto"] .btn-primary-3d,
html[data-modo="bruto"] .metric-card,
html[data-modo="bruto"] .lead-card {
    transition: transform 120ms cubic-bezier(0.77, 0, 0.175, 1),
                box-shadow 120ms cubic-bezier(0.77, 0, 0.175, 1) !important;
}
html[data-modo="bruto"] .btn:active,
html[data-modo="bruto"] .btn-secondary:active,
html[data-modo="bruto"] .btn-primary-3d:active {
    transform: translate(3px, 3px) !important;
    box-shadow: var(--modo-sombra-hundida) !important;
}
@media (hover: hover) and (pointer: fine) {
    html[data-modo="bruto"] .btn:hover,
    html[data-modo="bruto"] .btn-secondary:hover,
    html[data-modo="bruto"] .btn-primary-3d:hover {
        transform: translate(-2px, -2px) !important;
        box-shadow: var(--modo-sombra-alta) !important;
    }
    /* LAS TARJETAS NO LLEVAN EL translate, Y ES A PROPOSITO.
       micro.css ya le pone a .metric-card/.stat-card un translateY
       de -1px MAS un "spotlight" en ::before que sigue al mouse.
       Mandarle desde aca un transform distinto es exactamente el
       caso que el bloque de IA 2, mas arriba, documenta como el
       tironeo que se sentia al pasar el mouse: la tarjeta corriendose
       para un lado mientras el foco de luz la persigue.

       No hace falta pelearlo: la sombra dura ya da el levante sola
       —de 5px de offset a 7px es la tarjeta despegandose de su
       silueta— y es MAS brutalista, porque lo que se mueve es la
       sombra y no la pieza. transform:none deja una sola regla
       mandando sobre la propiedad, en vez de dos con distinto valor. */
    html[data-modo="bruto"] .metric-card:hover,
    html[data-modo="bruto"] .lead-card:hover {
        transform: none !important;
        box-shadow: var(--modo-sombra-alta) !important;
    }
}

/* Filas de tabla: solo tinte, nunca transform ni sombra por fila
   (mismo criterio de rendimiento.css que ya siguen IA, IA 2 y
   Minimal — una lista de leads puede tener cientos). */
html[data-modo="bruto"] .custom-table tbody tr:hover,
html[data-modo="bruto"] .lead-row:hover,
html[data-modo="bruto"] .cliente-row:hover,
html[data-modo="bruto"] .grid-fila:hover {
    background: rgba(var(--acento-rgb), 0.16) !important;
}

/* --- LA BARRA DE VENTANA: la unica superficie de color solido ---
   Banda del acento del usuario al 100%, sin una gota de gradiente,
   y un borde inferior de 3px que la corta en seco. El titulo ya va
   en Roboto 900 uppercase por la regla de tipografia de arriba. */
@media (min-width: 900px) {
    html[data-modo="bruto"] .modal-card:not(.es-pagina):not(.sin-barra-modo)::before {
        background: rgb(var(--acento-rgb)) !important;
        border-bottom: 3px solid var(--modo-tinta) !important;
    }
}

/* Entrada seca, sin rebote: el rebote de legibilidad.css (modalPopIn,
   overshoot) es lo contrario de un objeto rigido de papel. */
html[data-modo="bruto"] .modal-card {
    animation: modoPopSinBote 140ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* --- DENSIDAD: media-alta. Separadores, no aire ---------------
   16px de padding y filas cortadas con un filete de 2px. El
   brutalismo no separa las cosas dejando espacio: las separa
   dibujando la linea que las divide.

   El prefijo de dos ids no es decoracion: compacto.css manda sobre
   el padding de .metric-card con `:not(#tab-leads):not(#tab-config)`
   y un id dentro de :not() pesa como id, o sea (2,2,0). Es el mismo
   problema ya documentado en el bloque de Minimal. */
@media (min-width: 900px) {
    html.nav-lateral[data-modo="bruto"] body .tab-content {
        padding: 20px 24px 32px !important;
    }
    html[data-modo="bruto"] .metrics-grid,
    html[data-modo="bruto"] .stats-grid,
    html[data-modo="bruto"] .cards-grid {
        gap: 16px !important;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    }
    html[data-modo="bruto"] #app-container #crm-workspace .metric-card {
        padding: 16px !important;
    }
    html[data-modo="bruto"] .grid-fila {
        border-top: none !important;
        border-bottom: 2px solid var(--modo-tinta) !important;
    }
}

/* --- LA BARRA DE ABAJO EN CELULAR ----------------------------
   Solo pintura: radio y sombra interior. La pestaña activa se marca
   invirtiendo el par —bloque de tinta, texto de papel— en vez de
   rellenarse con el acento: sobre un relleno de acento el rotulo
   activo (que ya es del acento) quedaria invisible, y asi el
   contraste es siempre 21:1 sin depender del color elegido. */
@media (max-width: 899px) {
    html[data-modo="bruto"] .main-tabs .tab-btn.active {
        border-radius: 0 !important;
        background: var(--modo-tinta) !important;
        box-shadow: inset 0 0 0 2px var(--modo-tinta) !important;
    }
    html[data-modo="bruto"] .main-tabs .tab-btn.active,
    html[data-modo="bruto"] .main-tabs .tab-btn.active i,
    html[data-modo="bruto"] .main-tabs .tab-btn.active .tab-rotulo {
        color: var(--modo-papel) !important;
    }
}

/* EFECTO DE FIRMA: no hay uno aparte, y no es un olvido. La sombra
   dura ES el efecto —esta en cada tarjeta, cada boton y cada estado
   de presion— y sumarle un movimiento decorativo encima seria
   exactamente lo que este archivo evita en un CRM que se mira ocho
   horas por dia. */

/* ============================================================
   FOSFORO — terminal CRT.

   COMO SE RESPETA EL ACENTO DEL USUARIO SIN PISARLO. Una terminal de
   fosforo tiene UN color de luz. La tentacion es fijar el verde
   clasico (#33ff00) y listo, pero eso seria pisar el acento, que es
   la unica cosa de esta hoja que no se toca nunca. La salida es al
   reves: el acento del usuario ES el fosforo. Quien tiene el verde
   de fabrica ve la terminal de siempre; quien eligio ambar ve una
   VT220; quien eligio celeste, un monitor de fosforo azul. Los tres
   existieron.

   EL AJUSTE QUE HUBO QUE HACERLE. "Texto principal = rgb(acento)"
   funciona con un acento brillante y falla feo con uno oscuro: un
   azul profundo sobre #050607 da menos de 3:1 y el CRM se vuelve
   ilegible entero. Asi que el texto no es el acento crudo sino el
   acento levantado un 35% hacia el blanco (color-mix, que ya usa
   media hoja del proyecto). Con el verde de fabrica sigue siendo
   inconfundiblemente fosforo; con el peor acento razonable queda
   arriba de 4.5:1. El acento CRUDO se sigue usando donde no es
   texto: bordes, el marcador de titulo, el glow, el foco.

   OSCURO POR NATURALEZA, PERO NO SE FUERZA. Si el usuario tiene tema
   claro no se lo tira a negro: la paleta de arriba cuelga de
   :not([data-tema="claro"]). En claro el modo conserva TODO lo que
   lo define y no depende de la oscuridad —mono en todo, radio 0-2,
   cero sombra, titulos con el marcador, la barra de modal como ruta
   de shell— y suelta lo unico que en un fondo blanco no significa
   nada: el glow de fosforo (sobre papel se lee como texto borroso,
   no como luz) y las scanlines. Queda una terminal sobria en papel,
   que es una cosa que tambien existio, y no una pantalla rota.

   SIN CURSOR PARPADEANTE DECORATIVO. Es el anti-patron clasico del
   genero: un guion que titila al lado de un texto que no se puede
   editar promete una entrada de datos que no existe. El caret real
   de los <input> ya parpadea y ese SI significa algo. (El modo
   Nitido, mas arriba en este archivo, tiene uno; no se toca porque
   no es este modo, pero aca no se repite.)
   ============================================================ */

html[data-modo="fosforo"] {
    --modo-font: 'JetBrains Mono', ui-monospace, monospace;
}

html[data-modo="fosforo"]:not([data-tema="claro"]) {
    /* El fosforo: el acento levantado hacia el blanco. 65/35 es el
       punto donde el verde de fabrica sigue siendo verde y un acento
       oscuro ya pasa el piso de contraste. */
    --modo-fos: color-mix(in srgb, rgb(var(--acento-rgb)) 65%, #ffffff);
    /* El secundario: el MISMO fosforo apagado contra el fondo. Se
       hace con color-mix y no con opacity porque opacity en un
       contenedor se lleva puestos a todos los hijos —iconos, chips,
       badges— y aca solo se quiere bajar la tinta. */
    --modo-fos-tenue: color-mix(in srgb, var(--modo-fos) 62%, #050607);

    --bg-main: #050607;
    --surf-0: #050607;
    --surf-1: #0a0c0d;
    --surf-2: #101314;
    --surf-3: #161a1b;
    --bg-surface: #0a0c0d;
    --bg-card: #101314;
    --bg-glass: rgba(5, 6, 7, 0.88);
    --border-color: rgba(var(--acento-rgb), 0.28);
    --borde-luz: rgba(var(--acento-rgb), 0.20);
    --text-main: var(--modo-fos);
    --text-muted: var(--modo-fos-tenue);
    --text-dim: var(--modo-fos-tenue);
}

/* RED DE SEGURIDAD DEL color-mix. El resto del proyecto usa
   color-mix directo en una propiedad (`background: color-mix(...)`),
   que si el navegador no la entiende simplemente se descarta y queda
   la declaracion anterior. Guardarlo en una CUSTOM PROPERTY, como
   aca, no degrada igual: la variable se vuelve invalida recien al
   calcular el valor, y ahi `color: var(--text-main)` tambien se cae
   y el texto termina heredando negro sobre un fondo casi negro. Como
   este modo se juega el color del cuerpo entero a esa variable, va
   el respaldo explicito: el acento crudo, que es lo que pedia la
   receta original. Solo corre en navegadores sin color-mix (anterior
   a Chrome 111 / Safari 16.2). */
@supports not (color: color-mix(in srgb, red, blue)) {
    html[data-modo="fosforo"]:not([data-tema="claro"]) {
        --modo-fos: rgb(var(--acento-rgb));
        --modo-fos-tenue: rgba(var(--acento-rgb), 0.62);
    }
}

/* En claro no se toca ni una superficie ni un color de texto:
   claro.css (581 lineas) ya garantiza tinta oscura sobre papel en
   componente por componente, y rehacer eso desde aca seria escribir
   esa hoja de nuevo. Solo se sube un poco el filete para que el
   borde del modo se note sobre papel. */
html[data-tema="claro"][data-modo="fosforo"] {
    --border-color: rgba(var(--acento-rgb), 0.34);
}

/* --- TIPOGRAFIA: mono en TODO, inputs y botones incluidos ------
   El tracking de 0.06em va en .tab-content y NO en body a proposito.
   letter-spacing y line-height mueven cosas de lugar, y la barra de
   pestañas de celular tiene los pixeles contados en movil.css para
   que entren nueve en un iPhone SE: aplicarselo ahi es exactamente
   donde se rompe algo. La barra recibe el skin por radio y textura,
   como manda la nota de arquitectura del principio del archivo. */
html[data-modo="fosforo"] body,
html[data-modo="fosforo"] button,
html[data-modo="fosforo"] input,
html[data-modo="fosforo"] select,
html[data-modo="fosforo"] textarea {
    font-family: var(--modo-font) !important;
    font-weight: 400 !important;
}
html[data-modo="fosforo"] .tab-content,
html[data-modo="fosforo"] .modal-card {
    letter-spacing: 0.06em !important;
    line-height: 1.35 !important;
}

html[data-modo="fosforo"] .section-head h2,
html[data-modo="fosforo"] .modal-header h3,
html[data-modo="fosforo"] .campana-card > h3,
html[data-modo="fosforo"] .campana-seccion h4,
html[data-modo="fosforo"] .ap-seccion h4,
html[data-modo="fosforo"] .metric-data > h3 {
    font-family: var(--modo-font) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* El marcador de titulo. Va escapado (\25B8 = U+25B8, "black right-
   pointing small triangle") y no como caracter suelto: asi el
   archivo no depende de que ningun editor ni ningun deploy le
   respete la codificacion. El \00a0 es el espacio duro que lo
   separa del texto. No va en .modal-header h3: ahi el ::after de la
   barra de ventana ya escribe la ruta de shell y serian dos guiños
   al mismo chiste en el mismo renglon. */
html[data-modo="fosforo"] .section-head h2::before,
html[data-modo="fosforo"] .campana-seccion h4::before,
html[data-modo="fosforo"] .ap-seccion h4::before {
    content: '\25B8\00a0';
    color: rgb(var(--acento-rgb));
}

/* EL GLOW VA ACOTADO, NO EN body. Un text-shadow heredado por todo
   el documento es una sombra por nodo de texto, y en la lista de
   leads eso son miles: es exactamente el tipo de costo por elemento
   repetido que rendimiento.css documenta y apaga. Aca queda en el
   conjunto acotado que de verdad se lee como luz —titulos y el
   numero grande de cada tarjeta— y el cuerpo se queda con el color,
   que ya es fosforo. */
html[data-modo="fosforo"]:not([data-tema="claro"]) .section-head h2,
html[data-modo="fosforo"]:not([data-tema="claro"]) .modal-header h3,
html[data-modo="fosforo"]:not([data-tema="claro"]) .campana-seccion h4,
html[data-modo="fosforo"]:not([data-tema="claro"]) .ap-seccion h4,
html[data-modo="fosforo"]:not([data-tema="claro"]) .metric-value {
    text-shadow: 0 0 6px rgba(var(--acento-rgb), 0.35) !important;
}

/* --- FORMA: cero sombra. La profundidad es por capas -----------
   Como Warp: el fondo es --bg-main, el panel sube a --surf-1 y el
   campo de texto BAJA a --surf-2. Nadie flota, se apilan. Radio de
   0 a 2px: 2 en los contenedores, 0 en la barra de ventana. */
html[data-modo="fosforo"] .metric-card,
html[data-modo="fosforo"] .lead-card,
html[data-modo="fosforo"] .campana-seccion,
html[data-modo="fosforo"] .campana-texto,
html[data-modo="fosforo"] .modal-card,
html[data-modo="fosforo"] .glass-panel,
html[data-modo="fosforo"] .stat-card,
html[data-modo="fosforo"] .chart-card,
html[data-modo="fosforo"] .resumen-item,
html[data-modo="fosforo"] .users-container,
html[data-modo="fosforo"] .bitacora-panel,
html[data-modo="fosforo"] .grid-consultas,
html[data-modo="fosforo"] .chat-lista,
html[data-modo="fosforo"] .chat-panel,
html[data-modo="fosforo"] .matcher-carta {
    background-image: none !important;
    background-color: var(--surf-1) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}
html[data-modo="fosforo"] .modal-card {
    background-color: var(--surf-2) !important;
}

html[data-modo="fosforo"] .btn,
html[data-modo="fosforo"] .btn-secondary,
html[data-modo="fosforo"] .btn-primary-3d {
    font-family: var(--modo-font) !important;
    background-image: none !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}
html[data-modo="fosforo"] input[type="text"],
html[data-modo="fosforo"] input[type="email"],
html[data-modo="fosforo"] input[type="password"],
html[data-modo="fosforo"] input[type="number"],
html[data-modo="fosforo"] input[type="search"],
html[data-modo="fosforo"] select,
html[data-modo="fosforo"] textarea {
    background-image: none !important;
    background-color: var(--surf-2) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

/* El foco es un filete del acento crudo, no un halo: un modo sin
   sombras no puede marcar el foco con una sombra. outline-offset
   negativo lo mete adentro del borde asi no corre nada de lugar. */
html[data-modo="fosforo"] input:focus,
html[data-modo="fosforo"] select:focus,
html[data-modo="fosforo"] textarea:focus,
html[data-modo="fosforo"] .btn:focus-visible,
html[data-modo="fosforo"] .btn-secondary:focus-visible,
html[data-modo="fosforo"] .btn-primary-3d:focus-visible {
    outline: 1px solid rgb(var(--acento-rgb)) !important;
    outline-offset: -1px !important;
    border-color: rgb(var(--acento-rgb)) !important;
    box-shadow: none !important;
}

/* --- LAS SCANLINES, Y POR QUE ESTAN DONDE ESTAN ---------------

   body::after YA ESTA OCUPADO. ui.css lo usa para los cuatro fondos
   animados (data-fondo aurora / nebulosa / deriva / respirar) con
   inset:-25%, will-change:transform y una animacion infinita. Si el
   usuario tiene uno de esos elegido y este modo solo escribiera el
   `background`, las scanlines heredarian la animacion y se pondrian
   a DERIVAR por la pantalla: un patron de rayas en movimiento
   permanente, que es de las peores cosas que se le pueden poner
   encima a un CRM. Por eso la regla apaga explicitamente animation,
   will-change y transform, y devuelve el inset a 0.

   Especificidad: html[data-modo][:not] body::after vale (0,3,3) y le
   gana a html[data-fondo="x"] body::after, que vale (0,1,3); el
   !important cierra el caso aunque cambie el orden de los <link>.

   EL Z-INDEX. La capa tiene que estar ARRIBA del contenido para que
   se lea como pantalla, pero NUNCA arriba de un modal. El mapa que
   ya usa el proyecto: el armazon de la app llega hasta ~200 (navbar
   40-61, popovers de agenda 120, ui 200), los desplegables del
   picker viven en 3000-4000, y el modal es 9999 el velo / 10000 la
   tarjeta (legibilidad.css). 900 cae en el hueco: tapa la app,
   ninguna capa flotante lo tapa a el. pointer-events:none para que
   no se coma un solo click.

   OPACIDAD 0.35 Y NO 0.5. La capa esta ENCIMA del texto, asi que
   oscurece tambien lo que se lee: a 0.5 el contraste real cae por
   debajo del piso calculado mas arriba. A 0.35 el rayado se lee
   igual de bien y las cuentas de contraste siguen valiendo. */
html[data-modo="fosforo"]:not([data-tema="claro"]) body::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 900;
    pointer-events: none !important;
    background: repeating-linear-gradient(0deg,
        rgba(0, 0, 0, 0.25) 0 1px,
        transparent 1px 3px) !important;
    opacity: 0.35;
    animation: none !important;
    will-change: auto !important;
    transform: none !important;
}

/* --- LA BARRA DE VENTANA: una linea de shell ------------------
   Franja del acento al 10% y el titulo como ruta ('~/leads $'), que
   es lo que se ve arriba de una terminal de verdad. El $ del final
   es el prompt, no un cursor: no parpadea. */
@media (min-width: 900px) {
    html[data-modo="fosforo"] .modal-card:not(.es-pagina):not(.sin-barra-modo)::before {
        background: rgba(var(--acento-rgb), 0.10) !important;
        border-bottom: 1px solid rgba(var(--acento-rgb), 0.4) !important;
        border-radius: 0 !important;
    }
    html[data-modo="fosforo"] .modal-card:not(.es-pagina):not(.sin-barra-modo)::after {
        content: '~/leads $';
        position: absolute;
        top: 9px;
        left: 16px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.12em;
        color: rgb(var(--acento-rgb));
        pointer-events: none;
    }
}

html[data-modo="fosforo"] .modal-card {
    animation: modoPopSinBote 150ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* --- MOVIMIENTO: minimo, y solo al apretar --------------------
   Una terminal no levanta nada al pasar el mouse. Queda el feedback
   de presion, que es informacion (confirma que el click entro) y no
   adorno, y el tinte de fila, sin transform (rendimiento.css). */
html[data-modo="fosforo"] .btn:active,
html[data-modo="fosforo"] .btn-secondary:active,
html[data-modo="fosforo"] .btn-primary-3d:active {
    transform: scale(0.97);
    transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}
@media (hover: hover) and (pointer: fine) {
    html[data-modo="fosforo"] .metric-card,
    html[data-modo="fosforo"] .lead-card {
        transition: border-color 150ms cubic-bezier(0.23, 1, 0.32, 1) !important;
    }
    html[data-modo="fosforo"] .metric-card:hover,
    html[data-modo="fosforo"] .lead-card:hover {
        border-color: rgba(var(--acento-rgb), 0.6) !important;
        transform: none !important;
        box-shadow: none !important;
    }
}
html[data-modo="fosforo"] .custom-table tbody tr:hover,
html[data-modo="fosforo"] .lead-row:hover,
html[data-modo="fosforo"] .cliente-row:hover,
html[data-modo="fosforo"] .grid-fila:hover {
    background: rgba(var(--acento-rgb), 0.09) !important;
}

/* --- DENSIDAD: alta. Una terminal no deja margenes -------------- */
@media (min-width: 900px) {
    html.nav-lateral[data-modo="fosforo"] body .tab-content {
        padding: 16px 20px 28px !important;
    }
    html[data-modo="fosforo"] .metrics-grid,
    html[data-modo="fosforo"] .stats-grid,
    html[data-modo="fosforo"] .cards-grid {
        gap: 10px !important;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    }
    html[data-modo="fosforo"] #app-container #crm-workspace .metric-card {
        padding: 12px 14px !important;
    }
}

/* --- LA BARRA DE ABAJO EN CELULAR ----------------------------
   Radio y sombra interior, nada mas. El reset de tipografia es la
   contracara de la nota de arriba: el mono es mas ancho que Inter y
   el tracking suma casi 2px por caracter, asi que la barra se queda
   con su letra proporcional y sin tracking. No se toca el <i>: una
   font-family sobre el icono de Font Awesome lo borra. */
@media (max-width: 899px) {
    html[data-modo="fosforo"] .main-tabs .tab-btn,
    html[data-modo="fosforo"] .main-tabs .tab-btn .tab-rotulo {
        font-family: 'Inter', -apple-system, sans-serif !important;
        letter-spacing: 0 !important;
    }
    html[data-modo="fosforo"] .main-tabs .tab-btn.active {
        border-radius: 2px !important;
        background: rgba(var(--acento-rgb), 0.12) !important;
        box-shadow: inset 0 0 0 1px rgba(var(--acento-rgb), 0.55) !important;
    }
}

/* ============================================================
   RELIEVE — extruido / soft-emboss.

   EL UNICO QUE CAMBIA LA FISICA DE LA SUPERFICIE, NO EL COLOR. Los
   otros doce modos separan las cosas con color (una tarjeta mas
   clara que el fondo), con un borde o con una sombra proyectada.
   Aca no hay ninguna de las tres: --bg-main, --surf-1, --surf-2 y
   --surf-3 son EL MISMO valor, no hay bordes, y lo unico que hace
   que una tarjeta se despegue del fondo son dos sombras opuestas —
   una gris abajo a la derecha, una blanca arriba a la izquierda—
   que juntas simulan una unica fuente de luz cenital sobre un
   material blando. Es Aqua de Mac OS X y son los skins de plastico
   de Winamp, que es de donde sale la idea entera de este archivo.

   SIGUE AL TEMA, NO LO PISA. Antes forzaba la superficie clara
   (#e8eaee) en los dos temas, con el argumento de que el relieve
   necesita luminancia media para que una sombra pueda ir mas
   oscura y otra mas clara que el fondo. El argumento es correcto,
   la conclusion no: quedaba un CRM en tema oscuro con una
   superficie clara abajo, y todo lo que en el resto de las hojas
   esta escrito en blanco —textos, bordes rgba(255,255,255,...),
   iconos— desaparecia encima. Se veia roto, no distinto.

   El neumorfismo tambien existe en oscuro: lo que hace falta no es
   que la superficie sea CLARA sino que sea MEDIA, o sea que tenga
   lugar hacia arriba y hacia abajo. #282b31 lo tiene igual que
   #e8eaee, con la sombra clara mucho mas tenue (el ojo lee un
   reflejo debil sobre oscuro como si fuera fuerte).

   Contraste medido en los dos: #e6e8ec sobre #282b31 da 11.4:1 y
   #33363d sobre #e8eaee da 10.0:1.

   ⚠ LO OBLIGATORIO: EL FOCO NO PUEDE SER RELIEVE. El neumorfismo
   tiene un problema de accesibilidad conocido y documentado: como
   los "bordes" son luz y no color, en cuanto el usuario tiene poco
   contraste de pantalla, luz de sol encima o baja vision, los
   limites de los controles desaparecen. Si ademas el foco de
   teclado se marcara con mas relieve, NO HABRIA foco visible: seria
   un cambio de sombra de unos pocos puntos de luminancia sobre un
   fondo del mismo color. Por eso el foco es lo unico del modo que
   rompe el lenguaje a proposito: un outline de 2px del acento del
   usuario, solido y separado. Sin eso este modo es inusable con
   teclado, y un CRM se navega con Tab todo el dia.
   ============================================================ */

/* OSCURO — el caso por defecto del CRM.

   La sombra clara va a 0.055 y no a 0.85 como en el tema claro: sobre
   una superficie oscura el ojo lee un reflejo debil como si fuera
   fuerte, y con el valor del tema claro el borde superior queda como
   una linea blanca marcada en vez de un reflejo. */
html[data-modo="relieve"] {
    /* Una sola superficie. Que las cuatro variables tengan el mismo
       valor no es un error de copiar y pegar: es la definicion del
       modo. */
    --modo-super: #282b31;
    --modo-tinta: #e6e8ec;

    --relieve-out:
        5px 5px 10px rgba(0, 0, 0, 0.55),
        -5px -5px 10px rgba(255, 255, 255, 0.055);
    --relieve-in:
        inset 3px 3px 6px rgba(0, 0, 0, 0.5),
        inset -3px -3px 6px rgba(255, 255, 255, 0.05);
    /* El hover: la misma luz un poco mas lejos, o sea el objeto un
       poco mas levantado. No cambia de color ni se mueve. */
    --relieve-out-alto:
        7px 7px 14px rgba(0, 0, 0, 0.62),
        -7px -7px 14px rgba(255, 255, 255, 0.07);

    /* Los tres lugares donde el modo necesita separar sin usar color
       (ver la nota de la lista larga mas abajo). Van como variable
       porque cambian de signo con el tema: sobre oscuro se separa
       oscureciendo, sobre claro se separa con gris. */
    --relieve-sep-sombra: rgba(0, 0, 0, 0.6);
    --relieve-sep-filete: rgba(255, 255, 255, 0.07);
    --relieve-hover: rgba(255, 255, 255, 0.05);

    --modo-font: 'Inter', -apple-system, sans-serif;

    --bg-main: var(--modo-super);
    --surf-0: var(--modo-super);
    --surf-1: var(--modo-super);
    --surf-2: var(--modo-super);
    --surf-3: var(--modo-super);
    --bg-surface: var(--modo-super);
    --bg-card: var(--modo-super);
    --bg-glass: rgba(40, 43, 49, 0.80);
    /* Transparente y no "sin borde": la caja conserva el pixel que
       ya ocupaba, asi que no se corre nada de lugar en ninguna de
       las veinte hojas que dibujan un borde de 1px. */
    --border-color: transparent;
    --borde-luz: transparent;
    --text-main: var(--modo-tinta);
    /* 6.6:1 y 5.4:1 sobre #282b31. Medidos, no elegidos a ojo. */
    --text-muted: #a7abb4;
    --text-dim: #979ba4;
}

/* CLARO — la version original del modo, ahora atada al tema.

   Es el neumorfismo de manual: gris de luminancia media, sombra gris
   abajo a la derecha y reflejo blanco arriba a la izquierda. Sobre
   claro el reflejo SI va fuerte (0.85), que es lo contrario del caso
   oscuro de arriba. */
html[data-tema="claro"][data-modo="relieve"] {
    --modo-super: #e8eaee;
    --modo-tinta: #33363d;

    --relieve-out:
        5px 5px 10px rgba(163, 167, 175, 0.55),
        -5px -5px 10px rgba(255, 255, 255, 0.85);
    --relieve-in:
        inset 3px 3px 6px rgba(163, 167, 175, 0.5),
        inset -3px -3px 6px rgba(255, 255, 255, 0.8);
    --relieve-out-alto:
        7px 7px 14px rgba(163, 167, 175, 0.6),
        -7px -7px 14px rgba(255, 255, 255, 0.92);

    --bg-glass: rgba(232, 234, 238, 0.80);
    /* 5.4:1 y 4.75:1 sobre #e8eaee. Sobre un fondo claro los grises
       tenues se caen del piso enseguida; estos dos estan medidos. */
    --text-muted: #5a5e66;
    --text-dim: #63666e;

    --relieve-sep-sombra: rgba(163, 167, 175, 0.75);
    --relieve-sep-filete: rgba(163, 167, 175, 0.32);
    --relieve-hover: rgba(163, 167, 175, 0.16);
}

/* --- TIPOGRAFIA: deliberadamente neutra -----------------------
   Inter 500/600 con el tracking apenas cerrado y sin una sola
   mayuscula forzada. La personalidad de este modo esta en la
   superficie; si ademas la letra hiciera algo, el resultado seria
   dos modos peleandose adentro de uno. */
html[data-modo="relieve"] body,
html[data-modo="relieve"] button,
html[data-modo="relieve"] input,
html[data-modo="relieve"] select,
html[data-modo="relieve"] textarea {
    font-family: var(--modo-font) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
}
html[data-modo="relieve"] .section-head h2,
html[data-modo="relieve"] .modal-header h3,
html[data-modo="relieve"] .campana-card > h3,
html[data-modo="relieve"] .campana-seccion h4,
html[data-modo="relieve"] .ap-seccion h4,
html[data-modo="relieve"] .metric-data > h3,
html[data-modo="relieve"] .metric-value,
html[data-modo="relieve"] .celda-cliente .fila-nombre,
html[data-modo="relieve"] .lead-card-name {
    font-family: var(--modo-font) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--modo-tinta) !important;
}

/* --- LA SUPERFICIE: en reposo, salido ------------------------
   Radios altos y uniformes: 14px en tarjetas. Un radio chico corta
   el degrade de la sombra en la esquina y el relieve se ve
   quebrado; el material blando pide esquina blanda. */
html[data-modo="relieve"] .metric-card,
html[data-modo="relieve"] .lead-card,
html[data-modo="relieve"] .campana-seccion,
html[data-modo="relieve"] .campana-texto,
html[data-modo="relieve"] .glass-panel,
html[data-modo="relieve"] .stat-card,
html[data-modo="relieve"] .chart-card,
html[data-modo="relieve"] .resumen-item,
html[data-modo="relieve"] .users-container,
html[data-modo="relieve"] .bitacora-panel,
html[data-modo="relieve"] .grid-consultas,
html[data-modo="relieve"] .chat-lista,
html[data-modo="relieve"] .chat-panel,
html[data-modo="relieve"] .matcher-carta {
    background: var(--modo-super) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: var(--relieve-out) !important;
}
html[data-modo="relieve"] .modal-card {
    background: var(--modo-super) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: var(--relieve-out) !important;
}

/* Tarjeta adentro de panel: no se repite el relieve. Dos relieves
   anidados se leen como una pieza pegada encima de otra, que es el
   mismo anti-patron de tarjeta-dentro-de-tarjeta que ya evitan IA y
   rendimiento.css. La de adentro se queda plana. */
html[data-modo="relieve"] .glass-panel .metric-card,
html[data-modo="relieve"] .glass-panel .resumen-item {
    box-shadow: none !important;
    background: transparent !important;
}

/* Botones: pastilla, y salidos. El primario es la unica excepcion
   de color del modo —ver la nota de abajo—. */
html[data-modo="relieve"] .btn,
html[data-modo="relieve"] .btn-secondary,
html[data-modo="relieve"] .btn-primary-3d {
    background: var(--modo-super) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: var(--relieve-out) !important;
    color: var(--modo-tinta) !important;
}

/* DESVIO CONSCIENTE. La regla del modo es "el acento solo en activo
   y en foco", y con eso el boton primario quedaria identico al
   secundario: mismo color, misma pastilla, mismo relieve. En un CRM
   eso no es minimalismo, es esconder la accion. El acento se queda
   entonces en TRES lugares —la accion principal, lo activo y el
   foco—, que es exactamente el criterio que ya usa el modo Minimal
   mas arriba en este archivo, y ni uno mas. */
html[data-modo="relieve"] .btn-primary-3d {
    background: rgb(var(--acento-rgb)) !important;
    color: #ffffff !important;
}

/* Campos de texto: hundidos. Es la mitad que hace que el modo se
   entienda: si todo estuviera salido, "salido" no significaria
   nada. Un campo es un hueco donde se deja algo. */
html[data-modo="relieve"] input[type="text"],
html[data-modo="relieve"] input[type="email"],
html[data-modo="relieve"] input[type="password"],
html[data-modo="relieve"] input[type="number"],
html[data-modo="relieve"] input[type="search"],
html[data-modo="relieve"] select,
html[data-modo="relieve"] textarea {
    background: var(--modo-super) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: var(--relieve-in) !important;
    color: var(--modo-tinta) !important;
}

/* EL FOCO, QUE NO ES RELIEVE. Ver la advertencia del encabezado del
   modo: sin esto el modo es inusable con teclado. Va con
   :focus-visible (aparece navegando con Tab, no al hacer click con
   el mouse) y ademas en :focus de los campos, donde siempre tiene
   que verse. outline y no box-shadow: un outline no se puede
   confundir con una sombra de relieve, que es justamente el punto. */
html[data-modo="relieve"] :focus-visible,
html[data-modo="relieve"] input:focus,
html[data-modo="relieve"] select:focus,
html[data-modo="relieve"] textarea:focus {
    outline: 2px solid rgb(var(--acento-rgb)) !important;
    outline-offset: 2px !important;
}

/* --- MOVIMIENTO: el boton se hunde de verdad ------------------
   :active cambia de --relieve-out a --relieve-in. No es una
   metafora: la sombra de afuera se va y aparece la de adentro, o
   sea la pieza pasa de estar sobre la superficie a estar dentro de
   ella. El scale de 0.98 acompaña. 140ms, dentro del rango de
   feedback de boton. box-shadow no es de las dos propiedades
   baratas, pero esto corre en UN elemento por vez —el que se esta
   apretando— y no en una lista, que es el caso que rendimiento.css
   identifica como el problema real. */
html[data-modo="relieve"] .btn,
html[data-modo="relieve"] .btn-secondary,
html[data-modo="relieve"] .btn-primary-3d {
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}
html[data-modo="relieve"] .btn:active,
html[data-modo="relieve"] .btn-secondary:active,
html[data-modo="relieve"] .btn-primary-3d:active {
    transform: scale(0.98) !important;
    box-shadow: var(--relieve-in) !important;
}
@media (hover: hover) and (pointer: fine) {
    html[data-modo="relieve"] .metric-card,
    html[data-modo="relieve"] .lead-card,
    html[data-modo="relieve"] .stat-card {
        transition: box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1) !important;
    }
    html[data-modo="relieve"] .metric-card:hover,
    html[data-modo="relieve"] .lead-card:hover,
    html[data-modo="relieve"] .stat-card:hover {
        box-shadow: var(--relieve-out-alto) !important;
        transform: none !important;
    }
}
/* Filas de tabla: tinte y nada mas. Un relieve por fila en una
   lista de cientos seria una sombra por fila, que es exactamente lo
   que rendimiento.css pide no hacer. */
html[data-modo="relieve"] .custom-table tbody tr:hover,
html[data-modo="relieve"] .lead-row:hover,
html[data-modo="relieve"] .cliente-row:hover,
html[data-modo="relieve"] .grid-fila:hover {
    background: var(--relieve-hover) !important;
}

/* --- LA LISTA LARGA: donde "una sola superficie" se paga --------

   Es la contra del modo y hay que resolverla, no ignorarla. En la
   lista de leads, ui.css deja la cabecera pegada arriba
   (.grid-head, position:sticky) apoyada en dos cosas que este modo
   anulo: un fondo --surf-2 distinto del resto (aca es el MISMO) y un
   borde de --borde-luz (aca es transparent). Sin eso, las filas
   pasan por atras de la cabecera sin que se note y la lista se
   vuelve confusa apenas se scrollea.

   La cabecera recupera su separacion en el idioma del modo: una
   sombra proyectada hacia abajo, o sea la cabecera apoyada por
   encima del plano de las filas. Y las filas recuperan un filete
   —el unico borde de todo el modo—, porque en una lista de
   doscientos renglones poder seguir la linea con el ojo no es
   decoracion, es la unica forma de leerla. */
html[data-modo="relieve"] .grid-head {
    background: var(--modo-super) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 8px -4px var(--relieve-sep-sombra) !important;
}
html[data-modo="relieve"] .grid-fila {
    border-top: none !important;
    border-bottom: 1px solid var(--relieve-sep-filete) !important;
}

/* --- LA BARRA DE VENTANA: un canal hundido -------------------
   Sin banda de color. El modal entero flota con --relieve-out y el
   cabezal se marca con una franja de 28px hundida en la misma
   superficie: el canal tallado de un frente de equipo de audio, que
   es de donde viene todo este lenguaje. */
@media (min-width: 900px) {
    html[data-modo="relieve"] .modal-card:not(.es-pagina):not(.sin-barra-modo) {
        padding-top: 46px !important;
    }
    html[data-modo="relieve"] .modal-card:not(.es-pagina):not(.sin-barra-modo)::before {
        height: 28px !important;
        background: var(--modo-super) !important;
        box-shadow: var(--relieve-in) !important;
    }
}

html[data-modo="relieve"] .modal-card {
    animation: modoPopSinBote 240ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* --- DENSIDAD: baja, y no por gusto ---------------------------
   El relieve mide 10px de difusion para cada lado. Con tarjetas
   apretadas las sombras de dos vecinas se pisan y lo que era
   material se vuelve una mancha gris: el modo se rompe solo. 24px
   de gap es el minimo que deja ver las dos sombras enteras.

   (Ojo si alguna vez se le pone `overflow:hidden` a un contenedor de
   estas tarjetas: recorta el relieve de los hijos y quedan planas.
   Es la trampa clasica del neumorfismo.) */
@media (min-width: 900px) {
    html.nav-lateral[data-modo="relieve"] body .tab-content {
        padding: 32px 36px 44px !important;
    }
    html[data-modo="relieve"] .metrics-grid,
    html[data-modo="relieve"] .stats-grid,
    html[data-modo="relieve"] .cards-grid,
    html[data-modo="relieve"] .panel-grid {
        gap: 24px !important;
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
    }
    /* Dos ids adelante: compacto.css manda sobre este padding con
       dos :not(#id) — misma nota que en Minimal y Bruto. */
    html[data-modo="relieve"] #app-container #crm-workspace .metric-card {
        padding: 22px !important;
    }
}

/* El panel lateral comparte --bg-main con el contenido porque asi lo
   decidio escritorio.css ("la cabecera y el contenido son la misma
   superficie", border:none !important). En este modo eso viene
   perfecto: no hay que pelearle nada, y la pestaña abierta se marca
   hundiendola en esa superficie —la tecla apretada de un frente de
   equipo—. Solo sombra y radio: la geometria de la barra lateral no
   se toca, que es la regla de oro de este archivo. */
@media (min-width: 900px) {
    html[data-modo="relieve"].nav-lateral body .main-tabs .tab-btn.active {
        border-radius: 10px !important;
        background: var(--modo-super) !important;
        box-shadow: var(--relieve-in) !important;
    }
}

/* --- LA BARRA DE ABAJO EN CELULAR ----------------------------
   Solo radio, sombra y fondo: cero pixeles de alto, padding o gap.
   La pestaña activa se hunde —el mismo gesto que el boton apretado—
   en vez de rellenarse de color. */
@media (max-width: 899px) {
    html[data-modo="relieve"] .main-tabs .tab-btn.active {
        border-radius: 12px !important;
        background: var(--modo-super) !important;
        box-shadow: var(--relieve-in) !important;
    }
}

/* ============================================================
   ARCHIVO — ficha de catalogo.

   EL MAS SUTIL DE LOS CINCO, Y EL QUE MAS SE PARECE A UN PRODUCTO
   CON CRITERIO. No hay un truco visual: hay un sistema tipografico.

   QUE LO DIFERENCIA DE ELEVADO, que tambien es oscuro y tambien usa
   serif. Elevado es negro + metal cepillado + sombras de 30 y 70px:
   es cine, es frio, es una premiere. Archivo es oscuro CALIDO —el
   gris tira a marron, el texto es crudo (#e6e3dd) y no blanco puro—
   y no tiene ni una sombra grande: 0 1px 2px y nada mas. Es la
   diferencia entre la sala y el archivo de la cinemateca.

   LA FIRMA ES UNA TENSION, NO UN EFECTO. Georgia 400 para los
   nombres propios —el nombre del lead, el titulo de la campaña— y
   JetBrains Mono en versalita de 10px con 0.18em de tracking para
   TODA etiqueta de metadata. Serif humanista contra mono a
   contrapelo: es la ficha de catalogo de Criterion y es la de
   Letterboxd. Todo lo demas es Inter y se calla.

   EL FILETE DE COLOR AL COSTADO: EL TELL MAS RECONOCIBLE QUE HAY.
   Un borde grueso de color a la izquierda de una tarjeta, puesto de
   adorno, es la marca de agua de la UI generada por maquina. La
   regla aca es que solo va si significa algo. Y resulta que el CRM
   YA TIENE dos lugares donde significa: .grid-fila::before, que
   ui.css pinta con --estado-color —una variable que js/leads.js
   escribe inline con el color real de la etapa del lead, o con rojo
   si no tiene WhatsApp— y .lead-card.pendiente, que legibilidad.css
   marca cuando la ficha tiene cambios sin subir al servidor. Este
   modo no inventa ninguno nuevo: agarra esos dos, les saca el glow
   de neon y los deja como la pestaña de color de una carpeta de
   archivo. Un filete que ya queria decir algo, diciendolo mejor.
   ============================================================ */

html[data-modo="archivo"] {
    --modo-font: 'Inter', -apple-system, sans-serif;
    --modo-font-nombre: Georgia, ui-serif, 'Times New Roman', serif;
    --modo-font-meta: 'JetBrains Mono', ui-monospace, monospace;
}

/* La paleta calida cuelga de :not([data-tema="claro"]) igual que
   Fosforo: en tema claro el modo conserva su sistema tipografico
   entero —que es lo que de verdad lo define— y deja las superficies
   en manos de claro.css, que ya resolvio la legibilidad componente
   por componente. Un "archivo" con papel claro tambien existe: es
   una ficha de biblioteca. */
html[data-modo="archivo"]:not([data-tema="claro"]) {
    --bg-main: #17161a;
    --surf-0: #17161a;
    --surf-1: #1d1c21;
    --surf-2: #232228;
    --surf-3: #2a2930;
    --bg-surface: #1d1c21;
    --bg-card: #232228;
    --bg-glass: rgba(23, 22, 26, 0.86);
    --border-color: #302e37;
    --borde-luz: #302e37;
    /* Crudo, no blanco puro: #e6e3dd sobre #17161a da ~14:1 y no
       tiene el filo azulado del #ffffff sobre negro, que es lo que
       hace que una pantalla oscura canse. El tenue da 5.0:1. */
    --text-main: #e6e3dd;
    --text-muted: #a49e97;
    --text-dim: #8a8580;
}
html[data-tema="claro"][data-modo="archivo"] {
    --border-color: #d8d3cb;
}

/* --- TIPOGRAFIA: la tension serif / mono-caps ------------------ */
html[data-modo="archivo"] body,
html[data-modo="archivo"] button,
html[data-modo="archivo"] input,
html[data-modo="archivo"] select,
html[data-modo="archivo"] textarea {
    font-family: var(--modo-font) !important;
    font-weight: 400 !important;
}

/* Georgia SOLO en nombres propios. No en los titulos de seccion, no
   en los headers de modal: esos son rotulos de la interfaz, no
   nombres de nada, y ponerles serif es lo que convierte "editorial"
   en "decorado". El selector lleva la clase del contenedor adelante
   porque picker.css define `html body .celda-cliente .fila-nombre`
   (0,2,2) y sin eso esta regla —(0,2,1)— perderia. */
html[data-modo="archivo"] .celda-cliente .fila-nombre,
html[data-modo="archivo"] .lead-card-name,
html[data-modo="archivo"] .campana-card > h3,
html[data-modo="archivo"] .avatar-nombre {
    font-family: var(--modo-font-nombre) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Metadata en mono-versalita. Va en los rotulos de verdad —cabeceras
   de columna, el titulo chico de cada tarjeta, la etiqueta de rubro,
   los h4 de seccion—, que son cajas con aire de sobra. */
html[data-modo="archivo"] .grid-th,
html[data-modo="archivo"] .custom-table th,
html[data-modo="archivo"] .metric-data > h3,
html[data-modo="archivo"] .fila-rubro,
html[data-modo="archivo"] .campana-seccion h4,
html[data-modo="archivo"] .ap-seccion h4 {
    font-family: var(--modo-font-meta) !important;
    font-weight: 400 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: var(--text-dim) !important;
}

/* La misma voz, con el tracking bajado, donde el ancho SI esta
   contado: la fecha y el subtitulo de cada fila viven en columnas
   de ancho fijo (--col-fecha, --col-cliente en ui.css) y 0.18em
   suma casi 2px por caracter, o sea que una fecha de siete
   caracteres se pasaria de la celda. Se queda el mono y las
   versalitas —que es de donde sale la lectura de ficha— y se cede
   el tracking, que es lo unico de los tres que empuja layout. */
html[data-modo="archivo"] .celda-fecha,
html[data-modo="archivo"] .fila-sub,
html[data-modo="archivo"] .badge,
html[data-modo="archivo"] .status-badge {
    font-family: var(--modo-font-meta) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.04em !important;
}

html[data-modo="archivo"] .section-head h2,
html[data-modo="archivo"] .modal-header h3,
html[data-modo="archivo"] .metric-value {
    font-family: var(--modo-font) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

/* --- FORMA: 3px. Casi cuadrado, pero no brutalista -------------
   3px es el radio de una ficha de cartulina troquelada: no llega a
   ser una esquina viva (eso es Bruto) y no es una pastilla. Sombra
   de contacto y nada mas: la ficha esta apoyada, no flotando. */
html[data-modo="archivo"] .metric-card,
html[data-modo="archivo"] .lead-card,
html[data-modo="archivo"] .campana-seccion,
html[data-modo="archivo"] .campana-texto,
html[data-modo="archivo"] .modal-card,
html[data-modo="archivo"] .glass-panel,
html[data-modo="archivo"] .stat-card,
html[data-modo="archivo"] .chart-card,
html[data-modo="archivo"] .resumen-item,
html[data-modo="archivo"] .users-container,
html[data-modo="archivo"] .bitacora-panel,
html[data-modo="archivo"] .grid-consultas,
html[data-modo="archivo"] .chat-lista,
html[data-modo="archivo"] .chat-panel,
html[data-modo="archivo"] .matcher-carta {
    background-image: none !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

html[data-modo="archivo"] .btn,
html[data-modo="archivo"] .btn-secondary,
html[data-modo="archivo"] .btn-primary-3d,
html[data-modo="archivo"] input[type="text"],
html[data-modo="archivo"] input[type="email"],
html[data-modo="archivo"] input[type="password"],
html[data-modo="archivo"] input[type="number"],
html[data-modo="archivo"] input[type="search"],
html[data-modo="archivo"] select,
html[data-modo="archivo"] textarea {
    background-image: none !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}
html[data-modo="archivo"] input[type="text"],
html[data-modo="archivo"] input[type="email"],
html[data-modo="archivo"] input[type="password"],
html[data-modo="archivo"] input[type="number"],
html[data-modo="archivo"] input[type="search"],
html[data-modo="archivo"] select,
html[data-modo="archivo"] textarea {
    background-color: var(--surf-2) !important;
}
html[data-modo="archivo"] input:focus,
html[data-modo="archivo"] select:focus,
html[data-modo="archivo"] textarea:focus,
html[data-modo="archivo"] .btn:focus-visible,
html[data-modo="archivo"] .btn-secondary:focus-visible,
html[data-modo="archivo"] .btn-primary-3d:focus-visible {
    outline: 2px solid rgb(var(--acento-rgb)) !important;
    outline-offset: 1px !important;
    border-color: rgb(var(--acento-rgb)) !important;
    box-shadow: none !important;
}

/* --- EL FILETE DE COLOR, DONDE YA SIGNIFICABA ALGO -------------
   ui.css:800 pinta .grid-fila::before con var(--estado-color), que
   js/leads.js escribe inline por fila con el color de la etapa (o
   rojo si el lead no tiene WhatsApp), y le pone un box-shadow de 12px
   que lo hace brillar. Aca se conserva el filete —el dato— y se
   apaga el neon: una pestaña de color mate al canto de la ficha, que
   es como se marca una carpeta en un archivo real.

   Y NO HAY NINGUN OTRO. Ninguna tarjeta de este modo lleva un borde
   de color al costado "para que se vea linda": si no hay un estado
   colgado en el markup, no hay filete. Es la unica forma de que el
   que SI esta se lea como informacion. */
html[data-modo="archivo"] .grid-fila::before {
    width: 3px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* El otro estado real: ficha con cambios sin subir al servidor
   (legibilidad.css:173). Se afina a 2px y se deja cuadrado, en la
   misma clave que el de arriba. */
html[data-modo="archivo"] .lead-card.pendiente {
    border-left: 2px solid var(--warning) !important;
    border-radius: 0 3px 3px 0 !important;
}

/* --- LA BARRA DE VENTANA: la cabecera de la ficha --------------
   Banda de --surf-2 con un filete de 1px, y a la derecha un numero
   de catalogo en mono. El numero es fijo y decorativo a proposito:
   no hay ningun dato del modal al que engancharlo desde CSS, y
   inventar uno "real" seria peor —un numero que cambia sin
   significar nada—. Fijo se lee como el sello de la coleccion, que
   es exactamente la lectura que se busca.

   El caracter va escapado (\2116 = U+2116, "numero sign") y no como
   glifo suelto, para que el archivo no dependa de que un editor o un
   deploy le respeten la codificacion. El primer espacio despues del
   escape lo consume CSS como terminador; el segundo es el real. */
@media (min-width: 900px) {
    html[data-modo="archivo"] .modal-card:not(.es-pagina):not(.sin-barra-modo)::before {
        background: var(--surf-2) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    html[data-modo="archivo"] .modal-card:not(.es-pagina):not(.sin-barra-modo)::after {
        content: '\2116  0412';
        position: absolute;
        top: 9px;
        right: 18px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 0.18em;
        color: var(--text-dim);
        pointer-events: none;
    }
}

html[data-modo="archivo"] .modal-card {
    animation: modoPopSinBote 200ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* --- DENSIDAD: un catalogo, no un poster ---------------------- */
@media (min-width: 900px) {
    html.nav-lateral[data-modo="archivo"] body .tab-content {
        padding: 28px 32px 40px !important;
    }
    html[data-modo="archivo"] .metrics-grid,
    html[data-modo="archivo"] .stats-grid,
    html[data-modo="archivo"] .cards-grid {
        gap: 14px !important;
        grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
    }
    /* Dos ids adelante por compacto.css — misma nota que en Minimal. */
    html[data-modo="archivo"] #app-container #crm-workspace .metric-card {
        padding: 18px !important;
    }
}

/* --- MOVIMIENTO: una ficha no salta --------------------------
   El borde sube de contraste y nada mas. Sin levante y sin sombra
   nueva: la sombra de contacto de 1px es lo unico que hay, y una
   ficha apoyada sobre una mesa no se despega al mirarla. */
html[data-modo="archivo"] .btn:active,
html[data-modo="archivo"] .btn-secondary:active,
html[data-modo="archivo"] .btn-primary-3d:active {
    transform: scale(0.97);
    transition: transform 130ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}
@media (hover: hover) and (pointer: fine) {
    html[data-modo="archivo"] .metric-card,
    html[data-modo="archivo"] .lead-card,
    html[data-modo="archivo"] .stat-card {
        transition: border-color 180ms cubic-bezier(0.23, 1, 0.32, 1) !important;
    }
    html[data-modo="archivo"] .metric-card:hover,
    html[data-modo="archivo"] .lead-card:hover,
    html[data-modo="archivo"] .stat-card:hover {
        border-color: rgba(var(--acento-rgb), 0.45) !important;
        transform: none !important;
    }
}
html[data-modo="archivo"] .custom-table tbody tr:hover,
html[data-modo="archivo"] .lead-row:hover,
html[data-modo="archivo"] .cliente-row:hover,
html[data-modo="archivo"] .grid-fila:hover {
    background: rgba(230, 227, 221, 0.05) !important;
}

/* --- LA BARRA DE ABAJO EN CELULAR ----------------------------
   Radio de 3px, el mismo de la ficha, y un filete del acento abajo:
   la pestaña de color de la carpeta que esta abierta. Solo pintura,
   ni un pixel de alto ni de padding. */
@media (max-width: 899px) {
    html[data-modo="archivo"] .main-tabs .tab-btn.active {
        border-radius: 3px !important;
        background: rgba(230, 227, 221, 0.06) !important;
        box-shadow: inset 0 -2px 0 rgb(var(--acento-rgb)) !important;
    }
}