/* ============================================================================ TUXANI — Command Center del operador (Fase 1). Depende de ../../assets/css/tokens.css ========================================================================== */ body { min-height: 100vh; } [hidden] { display: none !important; } .nv-mono { font-family: var(--nv-f-mono); font-variant-numeric: tabular-nums; } /* ---------- GATE (login) ---------- */ .nv-gate { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: radial-gradient(1000px 520px at 50% -10%, rgba(47,169,140,.16), transparent 70%), var(--nv-abismo); } .nv-gate-card { width: 100%; max-width: 420px; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-lg); box-shadow: var(--nv-sh-2); padding: 32px 28px; text-align: center; } .nv-gate-card canvas { width: 132px; height: 132px; margin: 0 auto 10px; display: block; } .nv-gate-card h1 { font-size: 22px; margin-bottom: 4px; } .nv-gate-card .nv-sub { color: var(--nv-tenue); font-size: 13.5px; margin-bottom: 20px; } .nv-field { width: 100%; background: var(--nv-suelo); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm); padding: 12px 14px; color: var(--nv-texto); font-size: 14px; margin-bottom: 10px; } .nv-field::placeholder { color: var(--nv-fantasma); } .nv-btn { font: 700 14px/1 var(--nv-f-body); border-radius: var(--nv-r-md); padding: 13px 18px; cursor: pointer; border: 1px solid transparent; transition: var(--nv-dur-fast); width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; } .nv-btn-primary { background: var(--nv-savia); color: #04140E; } .nv-btn-primary:hover { background: var(--nv-savia-hi); } .nv-btn-google { background: #fff; color: #1f1f1f; border-color: var(--nv-linea-fuerte); } .nv-btn-ms { background: #fff; color: #1f1f1f; border-color: var(--nv-linea-fuerte); } .nv-btn-apple { background: #000; color: #fff; border-color: #000; } .nv-gate-card > .nv-btn { margin-bottom: 10px; } .nv-btn-ghost { background: transparent; border-color: var(--nv-linea-fuerte); color: var(--nv-texto); } .nv-btn-ghost:hover { background: color-mix(in srgb, var(--nv-savia) 12%, transparent); } .nv-sep { display: flex; align-items: center; gap: 10px; color: var(--nv-fantasma); font-size: 12px; margin: 14px 0; } .nv-sep::before, .nv-sep::after { content: ""; flex: 1; height: 1px; background: var(--nv-linea); } .nv-gate-err { color: var(--nv-critico); font-size: 12.5px; min-height: 16px; margin-top: 8px; } .nv-gate-note { margin-top: 16px; font-size: 11px; color: var(--nv-fantasma); } /* ---------- APP SHELL ---------- `height: 100dvh` ademas del `min-height`: sin una altura ACOTADA el panel nunca es un contenedor de scroll de verdad (con `overflow-y:auto` pero sin tope de altura la caja simplemente crece y quien hace scroll es la pagina), y entonces `position: sticky` dentro del panel no se ancla a nada. Eso es exactamente lo que le pasaba al composer: la regla base decia `sticky` y no servia, asi que siete modulos la anularon con `static` uno por uno. Acotando aqui, el panel scrollea por dentro: la barra superior queda siempre a la vista y el composer se ancla abajo de verdad. Si un navegador no entiende `dvh`, ignora la linea y se queda con el `min-height: 100vh`: vuelve al scroll de pagina de antes. Degrada solo. */ .nv-app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; height: 100dvh; } .nv-side { background: var(--nv-abismo); border-right: 1px solid var(--nv-linea); display: flex; flex-direction: column; padding: 14px 10px; height: 100vh; position: sticky; top: 0; } .nv-side .nv-sb { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; border-bottom: 1px solid var(--nv-linea); margin-bottom: 6px; } .nv-side .nv-sb canvas { width: 34px; height: 34px; } .nv-side .nv-sb b { font-family: var(--nv-f-display); font-size: 15px; } .nv-side .nv-sb span { display: block; font-family: var(--nv-f-mono); font-size: 10px; color: var(--nv-tenue); } .nv-nav { flex: 1; overflow-y: auto; } .nv-fam { font-family: var(--nv-f-mono); font-size: 9.5px; letter-spacing: .16em; color: var(--nv-fantasma); text-transform: uppercase; padding: 12px 8px 4px; } .nv-nav-i { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: var(--nv-r-sm); font-size: 13px; color: var(--nv-tenue); cursor: pointer; transition: var(--nv-dur-fast); border: none; background: none; width: 100%; text-align: left; } .nv-nav-i:hover { background: color-mix(in srgb, var(--nv-savia) 8%, transparent); color: var(--nv-texto); } .nv-nav-i.nv-act { background: var(--nv-savia); color: #04140E; font-weight: 600; } .nv-nav-i .nv-ic { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .nv-nav-i .nv-ct { margin-left: auto; font-family: var(--nv-f-mono); font-size: 10.5px; background: color-mix(in srgb, var(--nv-savia) 18%, transparent); color: var(--nv-savia); padding: 1px 7px; border-radius: var(--nv-r-pill); } .nv-nav-i.nv-act .nv-ct { background: rgba(4,20,14,.25); color: #04140E; } .nv-side .nv-foot { border-top: 1px solid var(--nv-linea); padding-top: 10px; margin-top: 6px; } .nv-side .nv-foot .nv-u { font-family: var(--nv-f-mono); font-size: 10.5px; color: var(--nv-fantasma); padding: 6px 9px 0; word-break: break-all; } /* MOVIL: la barra lateral pasa a ser un cajon que entra desde la izquierda. ESTE BLOQUE TIENE QUE IR DESPUES de las reglas base de `.nv-side`, y no es un detalle de estilo: un `@media` NO suma especificidad. Cuando esto vivia arriba (antes de la regla base), `position: sticky` ganaba por ser posterior y el cajon se quedaba DENTRO del flujo midiendo un alto de pantalla entero -- invisible, porque el `transform` de aqui si sobrevivia. Resultado: el telefono mostraba una pantalla negra completa y el encabezado quedaba debajo. Medido: el contenido empezaba en Y=844 en un movil de 844 de alto. Si alguien mueve este bloque hacia arriba, vuelve el fallo entero. Lo vigila `functions/qa/verify_movil_shell.mjs`. */ @media (max-width: 860px) { .nv-app { grid-template-columns: 1fr; } .nv-side { position: fixed; inset: 0 auto 0 0; width: 264px; transform: translateX(-100%); transition: transform var(--nv-dur) var(--nv-ease); z-index: 60; /* `dvh` y no `vh`: con top, bottom y height puestos a la vez el elemento queda sobre-restringido y gana `height`, asi que en iOS el cajon media mas que lo visible y el correo del pie se iba bajo la barra del navegador. Si el navegador no entiende `dvh` ignora esta linea y se queda con el `height: 100vh` de la regla base: degrada solo. */ height: 100dvh; } .nv-side.nv-open { transform: none; } .nv-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; } } /* `min-height: 0` es obligatorio: un item de grid/flex tiene `min-height:auto` por defecto y se niega a encoger por debajo de su contenido, asi que sin esto `.nv-work` desborda la altura del shell y el panel vuelve a no scrollear por dentro. */ .nv-work { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .nv-wtop { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--nv-linea); position: sticky; top: 0; /* 80% -> 93% (agente `compositor-multimodal`, 2026-08-16). Medido: con 80% el encabezado deja pasar un 20% del contenido que scrollea por debajo (con el blur de 12px encima), y eso es literal lo que reporto el dueno -- "no deja ver el encabezado" -- durante el tramo en que cualquier contenido (no solo el composer) cruza por detras de esta banda sticky. 93% conserva el vidrio esmerilado (sigue habiendo blur y una pizca de transparencia) pero corta el sangrado a un nivel que ya no se lee como contenido superpuesto. NO se sube a 100%: eso mata el efecto vidrio a proposito, que es una decision de diseño del dueno, no un descuido -- si algun dia hace falta opaco del todo, que lo decida el, no este cambio. Verificado en tema claro y oscuro, con el encabezado sobre contenido claro y sobre contenido oscuro (ver INFORME_COMPOSITOR_MULTIMODAL.md). */ background: color-mix(in srgb, var(--nv-abismo) 93%, transparent); backdrop-filter: blur(12px); z-index: 20; } .nv-hamb { display: none; background: none; border: 1px solid var(--nv-linea); color: var(--nv-texto); border-radius: 9px; width: 36px; height: 34px; cursor: pointer; } @media (max-width: 860px) { .nv-hamb { display: grid; place-items: center; } } /* ---------- VOLVER ---------------------------------------------------------- El botón de atrás de la barra superior (2026-08-25). Nace `hidden` en el HTML y lo enciende `sincronizarVolver()` fuera de Inicio. `[hidden]` NECESITA SU PROPIA REGLA y no es un adorno: la del navegador es una hoja de USER-AGENT, así que un `display: inline-flex` de autor la gana y el botón se vería SIEMPRE, también en la portada — justo la pantalla donde no tiene sentido. Es el fallo silencioso clásico de esconder con el atributo y pintar con la clase. `flex-shrink: 0` porque a 360 px esta barra ya lleva hamburguesa, título, tema, monedero, idioma y logo: sin esto el botón es el primero en aplastarse y el icono sale ovalado. El que puede encoger es el título, que tiene texto. La palabra se esconde por debajo de 560 px y queda solo la flecha, con el rótulo vivo en `aria-label` para quien navega a ciegas. No es lo mismo que quitarlo: la flecha sola en esa esquina se lee sin ayuda, y el ancho que libera es el que hace que el título del módulo siga cabiendo. */ .nv-volver { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; background: none; border: 1px solid var(--nv-linea); color: var(--nv-tenue); font: 600 12.5px/1 var(--nv-f-body); padding: 8px 12px 8px 9px; border-radius: var(--nv-r-pill); cursor: pointer; transition: var(--nv-dur-fast); } .nv-volver[hidden] { display: none; } .nv-volver:hover { color: var(--nv-texto); border-color: var(--nv-linea-fuerte); background: color-mix(in srgb, var(--nv-savia) 10%, transparent); } .nv-volver:focus-visible { outline: 2px solid var(--nv-savia); outline-offset: 2px; } .nv-volver-ic { display: inline-flex; } .nv-volver-ic svg { width: 17px; height: 17px; } @media (max-width: 560px) { .nv-volver { padding: 8px; gap: 0; } .nv-volver-t { display: none; } } .nv-wtop h2 { font-size: 16px; } .nv-wtop .nv-lang { margin-left: auto; font-family: var(--nv-f-mono); font-size: 11px; color: var(--nv-tenue); border: 1px solid var(--nv-linea); padding: 6px 10px; border-radius: var(--nv-r-pill); background: none; cursor: pointer; } .nv-wtop .nv-av { width: 30px; height: 30px; border-radius: 50%; background: var(--nv-grad); } .nv-wtop .nv-hlogo { width: 56px; height: 56px; display: block; flex-shrink: 0; overflow: visible; } /* `--nv-panel-pad` es UNA variable y no un 18 repetido a proposito: la barra de pestañas pegada se sale hasta el borde con este mismo valor en negativo y tapa con el la rendija que `sticky` deja por encima. Si el padding y ese negativo se separan, la barra deja ver el contenido pasando por detras o se come la tarjeta de arriba. Se cambia aqui y las dos cosas siguen cuadrando. */ .nv-panel { --nv-panel-pad: 18px; --nv-aire: 16px; padding: var(--nv-panel-pad); display: flex; flex-direction: column; gap: var(--nv-aire); overflow-y: auto; flex: 1; min-height: 0; /* En iPhone la franja del gesto de inicio se come lo ultimo de la lista. */ padding-bottom: calc(var(--nv-panel-pad) + env(safe-area-inset-bottom, 0px)); } /* Cuando la pantalla LLEVA composer anclado, este tapa la parte baja del panel mientras esta pegado abajo. Sin este hueco el ultimo dato de la lista queda debajo del composer y no hay forma de leerlo. `:has()` y no una clase por JS: el panel se vacia con `innerHTML=''` en cada cambio de modulo y no hay gancho de destruccion donde quitar la clase; una clase pegada de un modulo anterior dejaria un hueco fantasma. Si el navegador no entiende `:has()`, se queda con el padding de arriba: se pierde el hueco, no se rompe nada. REVISION 2026-08-16: antes miraba `:not(.nv-comp-plano)` porque ESE era el composer anclado (el defecto). Ahora el defecto es `static` y el anclado de verdad es `.nv-comp-ancla` (ver `composer.js`/`app.css` mas arriba) -- el selector tiene que mirar la clase nueva o reservaria 190px de hueco fantasma en las 8 pantallas que ya NO tienen nada pegado abajo. */ .nv-panel:has(> * .nv-comp-ancla), .nv-panel:has(> .nv-comp-ancla) { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)); } .nv-intent { background: linear-gradient(120deg, color-mix(in srgb, var(--nv-savia) 14%, var(--nv-superficie)), var(--nv-superficie)); border: 1px solid var(--nv-linea-fuerte); border-radius: var(--nv-r-md); padding: 16px; display: flex; align-items: center; gap: 14px; } .nv-intent .nv-ai { width: 38px; height: 38px; border-radius: 10px; background: var(--nv-grad); flex-shrink: 0; display: grid; place-items: center; font-size: 18px; } .nv-intent .nv-k { font-family: var(--nv-f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--nv-savia); } .nv-intent b { display: block; font-size: 14.5px; margin: 2px 0; } .nv-intent p { font-size: 12.5px; color: var(--nv-tenue); margin: 0; } /* LAS CIFRAS SE SALIAN DE SU TARJETA. Daniel lo reporto dos veces, con captura: "COP $6.534.000" y "COP $3.834.000" pintados por fuera de la caja de VENTAS MES y de CAJA. MEDIDO ANTES DE TOCAR (Chrome headless, metricas de dispositivo reales, barrido de 320 a 900px, con la cifra que sale de verdad de `plata()`): ancho tarjeta hueco util texto SE SALE 320 136.0 108.0 141 +33px 360 156.0 128.0 141 +13px 430 123.3 95.3 141 +45.7px 600 132.0 104.0 141 +37px 900 141.0 113.0 141 +28px Se salia en 8 de los 10 anchos probados, y tambien en escritorio: no era un fallo "del movil". Con la cifra mas larga que puede salir de verdad ("COP $125.400.000") se salia hasta 73.7px, y el panel entero se iba a scroll horizontal (scrollWidth 350 sobre clientWidth 320). DE LAS DOS CAUSAS QUE SE SOSPECHABAN, SOLO UNA ERA: 1. NO era `min-width: auto` del item de grid. Se probo: con `.nv-kpi { min-width: 0 }` las medidas salen IDENTICAS al byte (136.0 / 108.0 / 141 a 320px). No aplica porque la pista es `minmax(120px, 1fr)`: su minimo es 120px EXPLICITO, no `auto`, asi que la pista nunca se dimensiona por contenido y la tarjeta ya valia exactamente lo que la pista. La tarjeta no se negaba a encoger; encogia de mas. 2. SI era la letra: 24px monoespaciada FIJA. En mono cada caracter ocupa ~0.6em, asi que "$125.400.000" mide 169px pase lo que pase, y el hueco util de la tarjeta llegaba a bajar a 95px. No cabia por ningun lado. Y habia una tercera que no estaba en la hipotesis y solo se ve midiendo: `minmax(120px, 1fr)` con `auto-fit` mete una columna mas en cuanto cabe, y entonces las tarjetas se hacen MAS ESTRECHAS al ensanchar la pantalla. Medido: a 390px la tarjeta era de 171px, y a 430px bajaba a 123.3px. Por eso la letra NO puede depender de `vw`: seria mas grande justo donde la tarjeta es mas pequeña. Depende del ANCHO DE LA TARJETA, con `cqi`. EL ARREGLO, y por que cada pieza: - `minmax(150px, ...)`: 120px no da para una cifra de plata a ningun tamaño legible. Con 150 desaparece la columna de mas: a 430px la tarjeta pasa de 123.3px a 191px. - `container-type: inline-size` + `clamp(16px, 12cqi, 24px)`: la letra se mide contra la tarjeta. En tarjeta ancha se queda en los 24px de siempre (nada cambia en escritorio); en la mas estrecha baja a 16px, que sigue siendo la pieza dominante de la tarjeta (el rotulo es de 11px). - `font-size: 16px` antes del `clamp`: si un navegador no entiende `cqi` descarta esa linea y se queda con 16px, que cabe. Degrada solo. - `overflow-wrap: anywhere` es una VALVULA, no un recorte. NO se usa `overflow: hidden` a proposito: una cifra cortada ("$3.834" por "$3.834.000") es un numero FALSO en la pantalla de la plata de alguien. Esto parte la linea, no esconde nada. MEDIDO DESPUES, mismo barrido: 0 de 40 medidas se salen, y el panel ya no tiene scroll horizontal en ningun ancho. LIMITE CONOCIDO, y se dice: con un importe de 14 caracteres o mas ("$1.254.000.000", o sea mil millones) la valvula entra en las dos tarjetas mas estrechas (hueco util 128px) y la cifra parte de linea. Sigue entera y dentro de la caja; solo se lee en dos renglones. Hasta 999.999.999 no parte en ningun ancho de 320 a 900. Lo vigila el grupo 6 de `functions/qa/verify_movil_shell.mjs`. */ .nv-kpirow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .nv-kpi { background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); padding: 14px; container-type: inline-size; } .nv-kpi .nv-lb { font-size: 11px; color: var(--nv-tenue); text-transform: uppercase; letter-spacing: .06em; } .nv-kpi .nv-vl { font-family: var(--nv-f-mono); font-weight: 700; margin-top: 6px; overflow-wrap: anywhere; font-size: 18px; font-size: clamp(18px, 16cqi, 24px); } /* EL IMPORTE EXACTO, DEBAJO Y EN PEQUEÑO. Es lo que convierte «$14,2 M» de un redondeo en un resumen: la cifra al peso sigue en la pantalla, no en un tooltip que en un telefono no existe. 11px es el mismo tamaño que el rotulo, asi que no compite con la cifra grande; `anywhere` es la misma valvula de arriba — parte de linea antes que salirse, porque un importe cortado es un dato falso. */ .nv-kpi .nv-vlx { font-family: var(--nv-f-mono); font-size: 11px; color: var(--nv-tenue); margin-top: 3px; overflow-wrap: anywhere; letter-spacing: -.01em; } .nv-kpi.nv-hl { border-color: var(--nv-linea-fuerte); background: linear-gradient(180deg, color-mix(in srgb, var(--nv-cosecha) 9%, var(--nv-superficie)), var(--nv-superficie)); } /* Portada: lo que se dice cuando los numeros estan en cero o incompletos. El cero de un usuario nuevo no es una avería, asi que no va en rojo: va con el mismo peso visual que una nota al pie, y con los dos botones que lo sacan de cero. */ .nv-home-aviso:not(:empty) { margin-top: 14px; display: grid; gap: 12px; } .nv-home-nota { font-size: 12.5px; color: var(--nv-tenue); margin: 0; } .nv-home-startact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .nv-pcard { background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); padding: 16px; } .nv-pcard h4 { font-size: 14px; margin-bottom: 8px; } .nv-pcard p { font-size: 13px; color: var(--nv-tenue); margin: 0; } .nv-soon { display: inline-block; font-family: var(--nv-f-mono); font-size: 10px; color: var(--nv-cosecha); border: 1px solid color-mix(in srgb, var(--nv-cosecha) 40%, transparent); border-radius: var(--nv-r-pill); padding: 2px 8px; margin-top: 8px; } /* ---------- Composer (la barra de escribir con los multimodales) ---------- Lo pinta `app/assets/js/composer.js`, en un solo sitio. Antes estaba copiado a mano en diez modulos y cada copia habia derivado por su lado. ANCLADO ABAJO: el composer se pega al fondo del panel. Para que `sticky` funcione el panel tiene que ser un contenedor de scroll ACOTADO -- ver el comentario de `.nv-app`. Mientras eso no estuvo, la regla base decia `sticky` y no hacia nada, y siete modulos la anularon con `static` en vez de arreglar la causa. REVISION 2026-08-16 (agente `compositor-multimodal`, pedido del dueno: «los contenedores donde se escribe estan flotantes y se ve feo al scrollear»). Medido en navegador a 360px con contenido largo inyectado en Biblioteca Viva: el `sticky;bottom` de ESTA regla es un NO-OP en los 8 modulos que la usaban tal cual (assets.js x2, crop.js, agro_lab.js, community.js, economy.js, livestock.js, studio.js, library.js). La razon: en los ocho el composer va ANTES de sus resultados (se pregunta una vez, la respuesta aparece debajo) -- nunca es el ultimo hijo de una lista que crece. Un `bottom` sin `top` solo frena al elemento cuando SU FLUJO NATURAL lo empujaria por DEBAJO del borde inferior del scroll; aqui el composer esta cerca de la CABEZA del documento, asi que al bajar se mueve hacia ARRIBA y sale por encima -- el `bottom` nunca tiene nada que frenar. Comprobado con getBoundingClientRect: a scrollTop=0 comp.top=216.7 (igual a su posicion estatica); a scrollTop=261 comp.top=-44.6, ya por encima de headBottom=64 de `.nv-wtop` -- se movio EXACTAMENTE lo mismo que si fuera `static`. Ese trayecto, cruzando por detras del encabezado semitransparente (`backdrop-filter: blur`) con esta caja arrastrando una sombra de 22px, es el "flota y no deja ver" que reporto el dueno -- no hay solapamiento sostenido (el header gana el z-index, 20 contra 5, su texto sigue legible), pero el transito es real y feo tal como esta. Los 4 modulos que SI necesitan quedar anclados (assistant.js, la mitad de `assets.js`, la respuesta de `community.js`, `protected.js`) YA viven dentro de su propia columna flex de altura fija y usan `nv-comp-plano` -- hoy no existe NI UN caso donde este `sticky;bottom` compartido ancle algo de verdad. Por eso el DEFECTO pasa a `static` (igual que `nv-comp-plano`, que se queda intacto y ahora es redundante con el defecto, no roto) y el anclaje de verdad se vuelve EXPLICITO: `nv-comp-ancla` (mas abajo), que `NVComposer.crear(t, {ancla:true})` agrega. Ningun llamador de hoy la pide -- el mecanismo queda vivo para el dia que exista un chat de verdad (lista que crece con el composer siempre al final), no borrado. 🔴 `verify_movil_shell.mjs §5.6/5.7/5.9/5.10` sigue afirmando el defecto VIEJO (sticky-siempre) a proposito de la regresion de 2026-07-30 (siete modulos que se salian del anclaje uno por uno). Con este cambio esas cuatro comprobaciones SE PONEN ROJAS, y es lo esperado: afirman una decision que el dueno acaba de invertir. La prueba no se toca aqui -- `functions/` esta fuera del alcance de este agente -- queda para quien la actualice a la regla nueva (anclaje EXPLICITO, no por defecto). `env(safe-area-inset-bottom)`: en iPhone con gesto de inicio los ultimos ~34px del alto no son tocables. Sin esto el boton de enviar cae justo ahi. Por eso `nv-comp-ancla` la conserva intacta: el dia que se use, sigue respetando el gesto de inicio igual que antes. */ .nv-composer { background: var(--nv-superficie); border: 1px solid var(--nv-linea-fuerte); border-radius: var(--nv-r-md); padding: 9px 12px; display: flex; flex-direction: column; gap: 4px; position: static; } /* ANCLAJE EXPLICITO — el UNICO composer que de verdad quiere quedar pegado al fondo del scroll compartido mientras una lista crece por encima de el (patron WhatsApp). `NVComposer.crear(t, {ancla:true})` agrega esta clase. Ningun llamador de hoy la usa: los 4 que necesitaban quedar fijos ya viven en su propia columna flex (`nv-comp-plano`, mas abajo) y no la necesitan. Misma regla de `bottom` y la misma sombra que llevaba el defecto viejo. */ .nv-comp-ancla { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 5; box-shadow: 0 6px 22px rgba(0,0,0,.22); } /* Dentro de una hoja o un modal el composer YA esta al fondo de una columna flex de altura fija: ahi anclarlo lo referiria al scroll de la pagina, que no es el del modal, y se saldria de la tarjeta. Es la UNICA excepcion QUE YA EXISTIA antes de la revision de arriba, y se deja intacta a proposito: con el defecto ahora en `static`, `nv-comp-plano` queda REDUNDANTE (mismo resultado) pero inofensiva -- ningun modulo que la use cambia de aspecto. */ .nv-comp-plano { position: static; bottom: auto; box-shadow: none; } /* LA FILA VA DEBAJO DEL CAMPO, PEGADA. Antes el campo iba DENTRO de esta fila, compitiendo por el ancho con los botones: en un telefono le quedaban unos pocos centimetros y no se alcanzaba a leer lo escrito. Ahora el campo va a todo el ancho arriba y aqui debajo quedan los botones — multimodales a la izquierda, enviar a la derecha, como en cualquier chat. El `gap: 4px` del contenedor es a proposito: casi sin aire entre el campo y sus botones, para que se lean como una sola pieza. */ .nv-comp-fila { display: flex; align-items: center; gap: 8px; } .nv-comp-fila .nv-send { margin-left: auto; } .nv-composer .nv-tool { width: 44px; height: 44px; flex-shrink: 0; border-radius: 11px; border: 1px solid var(--nv-linea); background: var(--nv-suelo); display: grid; place-items: center; font-size: 15px; color: var(--nv-tenue); cursor: pointer; margin-bottom: 1px; /* `relative` para anclar el punto vivo de `.nv-tool-on::after` (micro encendido). Sin esto el punto busca el ancestro posicionado mas cercano y el aviso de «te estoy escuchando» aparece lejos del boton, en la esquina de la barra. CORRECCION 2026-08-16 (lider): este comentario decia «que es el propio `.nv-composer` (es sticky)» y se quedo VIEJO el mismo dia — el defecto de `.nv-composer` paso a `static` en la revision de `compositor-multimodal` (mas arriba, ~:262). La regla NO sobra por eso: al dejar de estar posicionado el compositor, el punto se iria a buscar un ancestro aun mas lejano, asi que `relative` hace MAS falta que antes, no menos. Se reescribe el porque en vez de borrarlo: un comentario que miente ya costo dos encargos en esta casa. */ position: relative; } .nv-composer .nv-tool:hover { color: var(--nv-texto); border-color: var(--nv-linea-fuerte); } /* ALTO DEL CAMPO: 4,5 lineas en movil, 6 en escritorio, como pidio Daniel. Con `font: 14px/1.45` una linea mide 20,3px y el campo lleva 7px de relleno arriba y abajo: 4,5 lineas = 4,5x20,3 + 14 = 105px; 6 lineas = 136px. El enunciado del placeholder ocupa dos lineas y antes solo se veia una: no se cortaba de lado, se cortaba de ALTO. Con 4,5 lineas se lee entero. `max-height` aqui es el UNICO tope de crecimiento del proyecto: antes habia tres `Math.min(scrollHeight, 120|132)` sueltos en el JS, ninguno enterado del ancho de pantalla. `composer.js` ya no recorta: solo pide altura. */ .nv-composer textarea, .nv-composer input { width: 100%; flex: 1; min-width: 0; background: none; border: none; color: var(--nv-texto); font: 400 14px/1.45 var(--nv-f-body); outline: none; resize: none; overflow-y: auto; min-height: 105px; max-height: 190px; padding: 7px 0; } .nv-composer textarea::placeholder, .nv-composer input::placeholder { color: var(--nv-tenue); opacity: 1; } /* ENVIAR: 44x44 (el minimo tactil), no 36. Antes ni siquiera tenia nombre accesible; ahora se lo pone `composer.js` desde i18n en todas las copias. La sombra lo despega de la superficie: sobre verde plano y en pantalla pequeña el icono se perdia contra el borde de la barra. */ .nv-composer .nv-send { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--nv-savia); color: #04140E; display: grid; place-items: center; font-size: 16px; border: none; cursor: pointer; margin-bottom: 1px; box-shadow: 0 2px 10px color-mix(in srgb, var(--nv-savia) 45%, transparent); transition: var(--nv-dur-fast); } .nv-composer .nv-send:hover { background: var(--nv-savia-hi); transform: translateY(-1px); } .nv-composer .nv-send:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; } .nv-composer .nv-tool svg, .nv-composer .nv-send svg { color: inherit; } /* Aviso del propio composer (boton multimodal sin conectar, archivo ilegible). Vacio no ocupa nada: nada de reservar hueco para un mensaje que casi nunca sale. */ .nv-comp-aviso:empty { display: none; } .nv-comp-aviso { font-size: 12.5px; line-height: 1.4; color: var(--nv-tenue); padding: 2px 2px 0; } .nv-comp-aviso.is-bad { color: var(--nv-critico); } @media (min-width: 861px) { /* 6 lineas: 6x20,3 + 14 = 136px. */ .nv-composer textarea, .nv-composer input { min-height: 136px; max-height: 260px; } } /* ---------- Marketplace ---------- */ .nv-mki { display: inline-flex; align-items: center; justify-content: center; } .nv-mk-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .nv-seg { display: inline-flex; background: var(--nv-suelo); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-pill); padding: 3px; } .nv-seg-b { font: 600 12.5px/1 var(--nv-f-body); color: var(--nv-tenue); background: none; border: none; padding: 8px 14px; border-radius: var(--nv-r-pill); cursor: pointer; transition: var(--nv-dur-fast); } .nv-seg-b.on { background: var(--nv-savia); color: #04140E; } /* Pestañas de modulo: se pegan arriba del panel. Ahora que el panel scrollea por dentro, la barra superior (`.nv-wtop`) queda SIEMPRE fija, pero estas pestañas se iban de la pantalla en cuanto la lista crecia y el usuario ya no sabia en que solapa estaba. Solo las de modulo: las de dentro de una tarjeta o de un panel propio (`.nv-ib-seg`, en la bandeja) se quedan como estan. El halo solido evita que el contenido asome por las esquinas de la pildora. */ .nv-lb-seg, .nv-ac-seg, .nv-tr-seg, .nv-ag-inseg { position: sticky; top: 0; z-index: 4; box-shadow: 0 0 0 7px var(--nv-abismo); } .nv-mk-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-pill); padding: 8px 14px; color: var(--nv-tenue); } .nv-mk-search input { flex: 1; background: none; border: none; outline: none; color: var(--nv-texto); font-size: 14px; } .nv-mk-pub { padding: 10px 16px; } .nv-mk-pub span { white-space: nowrap; } .nv-mk-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } /* LAS 10 PASTILLAS DEL CLUSTER, DE DOS EN DOS — y no es estetica, es el pliegue. `market_prospect.js:361` las pinta con `nv-btn`, y `.nv-btn` lleva `width: 100%` (linea 22): cada pastilla se comia una fila entera y las diez ocupaban 485 px. MEDIDO EN UN NAVEGADOR A 360x780, que es un celular: el boton de «buscar posibles clientes fuera» quedaba a 809 px — POR DEBAJO DEL PLIEGUE, o sea invisible sin deslizar. Es literalmente la queja del dueño del QA 2026-08-08 («no tan abajo, que no se sabe»), que subir el boton por si solo NO cerraba: lo que lo hundia eran las pastillas de encima. Con dos columnas: 485 px -> 267 px, y el boton sube de 809 a 590. Se ve al abrir, sin tocar nada y sin scroll horizontal. VA SOBRE `.nv-mk-chip` EN SINGULAR a proposito: `.nv-mk-chips` (el contenedor) lo comparte `marketplace.js:88`, pero alli los hijos son `.nv-fchip`, que no son `nv-btn` y ya venian a su ancho. Tocar el contenedor los habria movido tambien. */ .nv-mk-chip { width: auto; flex: 1 1 calc(50% - 4px); min-height: 44px; padding: 10px 12px; } .nv-fchip { font-size: 12px; padding: 7px 13px; border-radius: var(--nv-r-pill); border: 1px solid var(--nv-linea-fuerte); color: var(--nv-tenue); background: none; cursor: pointer; transition: var(--nv-dur-fast); } .nv-fchip.on { background: color-mix(in srgb, var(--nv-savia) 14%, transparent); color: var(--nv-savia); border-color: var(--nv-savia); } .nv-mk-count { font-family: var(--nv-f-mono); font-size: 11.5px; color: var(--nv-tenue); margin: 12px 0 4px; } .nv-mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .nv-mk-card { background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); overflow: hidden; box-shadow: var(--nv-sh-1); transition: var(--nv-dur-fast); } .nv-mk-card:hover { border-color: var(--nv-linea-fuerte); transform: translateY(-2px); } .nv-mk-media { height: 110px; background: linear-gradient(135deg, #1a4a38, #0d3327); position: relative; } .nv-mk-trust { position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; gap: 2px; font-family: var(--nv-f-mono); font-size: 11px; color: var(--nv-dorado); background: rgba(4,20,14,.6); border: 1px solid rgba(230,194,0,.4); padding: 3px 8px; border-radius: var(--nv-r-pill); } .nv-mk-body { padding: 13px; } .nv-mk-title { font-size: 14px; font-weight: 700; } .nv-mk-price { font-size: 16px; color: var(--nv-cosecha); margin: 4px 0; } .nv-mk-loc { display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--nv-tenue); } .nv-mk-act { display: flex; gap: 8px; margin-top: 11px; align-items: center; } .nv-mk-neg { flex: 1; padding: 9px 12px; font-size: 12.5px; } .nv-mk-savebtn { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--nv-linea-fuerte); background: none; color: var(--nv-tenue); cursor: pointer; display: grid; place-items: center; transition: var(--nv-dur-fast); } .nv-mk-savebtn.on { color: var(--nv-critico); border-color: color-mix(in srgb, var(--nv-critico) 45%, transparent); background: color-mix(in srgb, var(--nv-critico) 12%, transparent); } .nv-mk-empty { grid-column: 1 / -1; text-align: center; color: var(--nv-tenue); padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; } /* ---------- Dashboard: accesos rápidos + invitación al asistente ---------- */ .nv-qa { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } .nv-qa-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); cursor: pointer; color: var(--nv-texto); font-size: 12px; text-align: center; transition: var(--nv-dur-fast); } .nv-qa-tile:hover { border-color: var(--nv-linea-fuerte); transform: translateY(-2px); background: color-mix(in srgb, var(--nv-savia) 7%, var(--nv-superficie)); } .nv-qa-ic { width: 22px; height: 22px; display: grid; place-items: center; } .nv-asst-hint { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: linear-gradient(120deg, color-mix(in srgb, var(--nv-savia) 14%, var(--nv-superficie)), var(--nv-superficie)); border: 1px solid var(--nv-linea-fuerte); border-radius: var(--nv-r-md); padding: 14px 16px; color: var(--nv-texto); font-size: 13.5px; transition: var(--nv-dur-fast); } .nv-asst-hint:hover { border-color: var(--nv-savia); } .nv-asst-hint-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--nv-grad); display: grid; place-items: center; flex-shrink: 0; } /* ---------- Asistente IA flotante (omnipresente) ---------- */ .nv-fab { position: fixed; right: 16px; bottom: 16px; z-index: 70; width: 84px; height: 84px; border: none; cursor: pointer; background: transparent; padding: 0; display: grid; place-items: center; transition: var(--nv-dur-fast); } .nv-fab-logo { width: 84px; height: 84px; display: block; grid-area: 1 / 1; filter: drop-shadow(0 6px 18px rgba(47,169,140,.5)); } .nv-fab-txt { grid-area: 1 / 1; align-self: center; justify-self: center; z-index: 1; pointer-events: none; font: 800 17px/1 var(--nv-f-body); color: #fff; letter-spacing: .5px; text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 10px rgba(0,0,0,.4); } /* El FAB mide 84px y vive pegado abajo a la derecha: justo encima del boton de enviar del composer anclado, que tambien va a la derecha. Ese solape es la razon literal de «no se ve bien el boton de enviar en el movil»: no era contraste, era que el planeta lo tapaba. Cuando la pantalla lleva composer anclado, el FAB sube por encima de el. `:has()` otra vez para no depender de una clase que nadie quita al cambiar de modulo. Sin soporte, el FAB se queda abajo: se vuelve al solape de hoy, no aparece un fallo nuevo. REVISION 2026-08-16: mismo motivo que el `:has()` de `.nv-panel` de mas arriba -- el composer anclado de verdad ahora es `.nv-comp-ancla`, no `:not(.nv-comp-plano)`. Con el selector viejo el FAB se seguiria subiendo 178px en las 8 pantallas que ya no tienen nada pegado abajo, sin motivo. */ .nv-app:has(.nv-panel .nv-comp-ancla) .nv-fab { bottom: calc(178px + env(safe-area-inset-bottom, 0px)); } .nv-fab:hover { transform: translateY(-2px) scale(1.06); } .nv-fab:hover .nv-fab-logo { filter: drop-shadow(0 10px 24px rgba(47,169,140,.65)); } .nv-fab svg { color: #04140E; } .nv-asheet { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; } .nv-asheet-panel { width: 100%; max-width: 460px; max-height: 82vh; background: var(--nv-suelo); border: 1px solid var(--nv-linea-fuerte); border-radius: var(--nv-r-lg) var(--nv-r-lg) 0 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--nv-sh-2); animation: nvUp .28s var(--nv-ease); } @media (min-width: 560px) { .nv-asheet { align-items: center; } .nv-asheet-panel { border-radius: var(--nv-r-lg); max-height: 78vh; } } @keyframes nvUp { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } } .nv-asheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--nv-linea); } .nv-asheet-av { width: 34px; height: 34px; border-radius: 10px; background: var(--nv-grad); display: grid; place-items: center; flex-shrink: 0; } .nv-asheet-head b { font-size: 14px; display: block; } .nv-asheet-sub { font-size: 11.5px; color: var(--nv-tenue); } .nv-asheet-x { background: none; border: none; color: var(--nv-tenue); font-size: 15px; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; } .nv-asheet-x:hover { background: color-mix(in srgb, var(--nv-savia) 12%, transparent); color: var(--nv-texto); } .nv-asheet-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .nv-amsg { max-width: 82%; padding: 10px 13px; border-radius: 13px; font-size: 13.5px; line-height: 1.45; } .nv-amsg.ai { background: var(--nv-superficie); border: 1px solid var(--nv-linea); align-self: flex-start; border-bottom-left-radius: 4px; } .nv-amsg.me { background: var(--nv-savia); color: #04140E; align-self: flex-end; border-bottom-right-radius: 4px; } .nv-typing { opacity: .7; font-family: var(--nv-f-mono); } /* Acción propuesta por el asistente. El usuario lee y decide: nunca navegamos solos (la intención viene de un clasificador con confianza, no de una orden). */ .nv-amsg-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 10px 14px; cursor: pointer; background: var(--nv-savia); color: #04140E; border: none; border-radius: 13px; border-bottom-left-radius: 4px; font-size: 13.5px; font-weight: 700; line-height: 1.2; transition: transform .12s ease, filter .12s ease; } .nv-amsg-cta:hover { filter: brightness(1.08); transform: translateY(-1px); } .nv-amsg-cta:active { transform: translateY(0); } .nv-amsg-cta:focus-visible { outline: 2px solid var(--nv-cosecha); outline-offset: 2px; } .nv-amsg-cta .nv-mki { display: inline-flex; } /* En el panel de ChatHome el CTA va dentro de la tarjeta de intención. */ .nv-intent .nv-amsg-cta { margin-top: 10px; } .nv-asheet-panel .nv-composer { border: none; border-top: 1px solid var(--nv-linea); border-radius: 0; } /* Foto libre (banco de Pexels) dentro del chat de publicar, 2026-08-24. El crédito va SIEMPRE visible bajo cada miniatura — nunca oculto detrás de un hover, nunca en letra ilegible: es lo que declara que la foto es un ejemplo, no el producto real de quien publica (ver `fotos_stock.js`). */ .nv-fotolibre { align-self: stretch; max-width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: 13px; border-bottom-left-radius: 4px; } .nv-fotolibre-buscador { display: flex; gap: 8px; } .nv-fotolibre-buscador input { flex: 1; min-width: 0; padding: 8px 10px; background: none; border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm); color: var(--nv-texto); font-size: 13px; } .nv-fotolibre-buscador button { padding: 8px 14px; background: var(--nv-savia); color: #04140E; border: none; border-radius: var(--nv-r-sm); font-weight: 700; font-size: 13px; cursor: pointer; transition: var(--nv-dur-fast); } .nv-fotolibre-buscador button:hover { filter: brightness(1.08); } .nv-fotolibre-buscador button:disabled { opacity: .6; cursor: default; } .nv-fotolibre-grilla { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; } .nv-fotolibre-item { flex: 0 0 auto; scroll-snap-align: start; width: 128px; display: flex; flex-direction: column; gap: 4px; padding: 0; background: none; border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm); overflow: hidden; cursor: pointer; text-align: left; transition: var(--nv-dur-fast); } .nv-fotolibre-item:hover { border-color: var(--nv-savia); transform: translateY(-1px); } .nv-fotolibre-item img { width: 128px; height: 88px; object-fit: cover; display: block; } .nv-fotolibre-credito { display: block; padding: 3px 6px 5px; font-size: 10.5px; line-height: 1.25; color: var(--nv-tenue); } .nv-fotolibre-vacio { margin: 0; padding: 6px 2px; font-size: 12.5px; color: var(--nv-tenue); } /* ---------- Inbox / Negociación ---------- */ .nv-ibi { display: inline-flex; align-items: center; justify-content: center; } .nv-ib { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 14px; height: calc(100vh - 150px); min-height: 420px; } .nv-ib-list { display: flex; flex-direction: column; min-height: 0; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); overflow: hidden; } .nv-ib-search { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--nv-linea); color: var(--nv-tenue); } .nv-ib-search input { flex: 1; background: none; border: none; outline: none; color: var(--nv-texto); font-size: 13.5px; } .nv-ib-seg { margin: 11px 11px 6px; align-self: flex-start; } .nv-ib-rows { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; } .nv-ib-row { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; padding: 11px 10px; border: 1px solid transparent; border-radius: var(--nv-r-sm); background: none; cursor: pointer; color: var(--nv-texto); transition: var(--nv-dur-fast); } .nv-ib-row:hover { background: color-mix(in srgb, var(--nv-savia) 7%, transparent); } .nv-ib-row.on { background: color-mix(in srgb, var(--nv-savia) 12%, transparent); border-color: color-mix(in srgb, var(--nv-savia) 40%, transparent); } .nv-ib-av { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--nv-grad); color: #04140E; font-weight: 800; font-size: 15px; display: grid; place-items: center; } .nv-ib-rmid { flex: 1; min-width: 0; } .nv-ib-rtop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .nv-ib-who { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nv-ib-time { font-family: var(--nv-f-mono); font-size: 10.5px; color: var(--nv-tenue); flex-shrink: 0; } .nv-ib-list-title { font-size: 11.5px; color: var(--nv-cosecha); margin: 1px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nv-ib-preview { font-size: 12px; color: var(--nv-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nv-ib-rtail { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; } .nv-ib-unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--nv-savia); color: #04140E; font-size: 11px; font-weight: 800; display: grid; place-items: center; } .nv-ib-badge.deal { color: var(--nv-savia-hi); display: inline-flex; } .nv-ib-empty { text-align: center; color: var(--nv-tenue); padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13px; } .nv-ib-chat { display: flex; flex-direction: column; min-height: 0; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); overflow: hidden; } .nv-ib-empty-chat { margin: auto; } .nv-ib-loading { margin: auto; color: var(--nv-tenue); font-family: var(--nv-f-mono); } .nv-ib-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--nv-linea); } .nv-ib-back { display: none; background: none; border: none; color: var(--nv-tenue); cursor: pointer; padding: 2px; } .nv-ib-hinfo { flex: 1; min-width: 0; } .nv-ib-hwho { font-size: 14px; font-weight: 700; } .nv-ib-hlisting { font-size: 11.5px; color: var(--nv-cosecha); } .nv-ib-htrust { display: inline-flex; align-items: center; gap: 2px; font-family: var(--nv-f-mono); font-size: 11.5px; color: var(--nv-dorado); flex-shrink: 0; } .nv-ib-deal { display: flex; align-items: center; gap: 16px; padding: 11px 14px; background: var(--nv-suelo); border-bottom: 1px solid var(--nv-linea); flex-wrap: wrap; } .nv-ib-deal.agreed { background: color-mix(in srgb, var(--nv-savia) 10%, var(--nv-suelo)); } .nv-ib-plabel { font-size: 10.5px; color: var(--nv-tenue); text-transform: uppercase; letter-spacing: .04em; } .nv-ib-pval { font-size: 15px; font-weight: 700; } .nv-ib-price.accent .nv-ib-pval { color: var(--nv-cosecha); } .nv-ib-status { margin-left: auto; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .nv-ib-status.open { color: var(--nv-cielo); background: color-mix(in srgb, var(--nv-cielo) 14%, transparent); } .nv-ib-status.deal { color: var(--nv-savia-hi); background: color-mix(in srgb, var(--nv-savia) 16%, transparent); } .nv-ib-status.closed { color: var(--nv-tenue); background: color-mix(in srgb, var(--nv-tenue) 14%, transparent); } .nv-ib-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 9px; } .nv-ib-b { max-width: 76%; padding: 9px 12px 6px; border-radius: 13px; font-size: 13.5px; line-height: 1.45; } .nv-ib-b.them { background: var(--nv-suelo); border: 1px solid var(--nv-linea); align-self: flex-start; border-bottom-left-radius: 4px; } .nv-ib-b.me { background: var(--nv-savia); color: #04140E; align-self: flex-end; border-bottom-right-radius: 4px; } .nv-ib-otag { display: inline-flex; align-items: center; gap: 3px; font-family: var(--nv-f-mono); font-size: 12px; font-weight: 700; margin-top: 3px; padding: 3px 8px; border-radius: 8px; background: rgba(4,20,14,.14); } .nv-ib-b.them .nv-ib-otag { color: var(--nv-cosecha); background: color-mix(in srgb, var(--nv-cosecha) 14%, transparent); } .nv-ib-btime { display: block; font-family: var(--nv-f-mono); font-size: 9.5px; opacity: .65; margin-top: 3px; text-align: right; } .nv-ib-actions { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--nv-linea); } .nv-ib-abtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; font-size: 12.5px; } .nv-ib-counter { padding: 12px 14px; border-top: 1px solid var(--nv-linea); background: var(--nv-suelo); } .nv-ib-clabel { font-size: 11px; color: var(--nv-tenue); margin-bottom: 7px; } .nv-ib-crow { display: flex; gap: 8px; } .nv-ib-cnum { flex: 1; background: var(--nv-superficie); border: 1px solid var(--nv-linea-fuerte); border-radius: var(--nv-r-sm); padding: 10px 12px; color: var(--nv-texto); font-family: var(--nv-f-mono); font-size: 14px; outline: none; } .nv-ib-csend { padding: 10px 16px; white-space: nowrap; } /* El composer de Inbox migró a `NVComposer` (2026-08-21): el layout (campo arriba, herramientas + enviar debajo) y los colores ya los pone `.nv-composer` en composer.js. Aquí solo queda el encaje con el panel de chat — sin `display:flex` propio, que pisaba el de `.nv-composer` por venir después en la hoja (misma especificidad, gana el que está más abajo). `.nv-ib-input`/ `.nv-ib-send` ya no los pinta ningún módulo — el campo y el botón de enviar ahora son `.nv-comp-campo`/`.nv-send`, definidos junto a `.nv-composer`. */ .nv-ib-composer { border-top: 1px solid var(--nv-linea); border-radius: 0; } .nv-ib-godeal { margin: 12px 14px; } .nv-ib-ok { display: flex; align-items: center; gap: 6px; margin: 0 14px 12px; font-size: 12.5px; color: var(--nv-savia-hi); } @media (max-width: 720px) { .nv-ib { grid-template-columns: 1fr; height: calc(100vh - 140px); } .nv-ib-chat { display: none; } .nv-ib.detail .nv-ib-list { display: none; } .nv-ib.detail .nv-ib-chat { display: flex; } .nv-ib-back { display: inline-flex; } } /* ---------- Deal Room (P1.12) ---------- Misma rejilla de dos paneles que el Inbox (lista + detalle, y en móvil uno u otro): es la continuación natural de la misma conversación, no otra app. */ .nv-dl { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 14px; height: calc(100vh - 150px); min-height: 420px; } .nv-dl-list { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 6px; gap: 4px; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); } .nv-dl-ltitle { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--nv-tenue); padding: 8px 8px 4px; } .nv-dl-row { display: flex; gap: 10px; align-items: center; text-align: left; width: 100%; padding: 11px 10px; border: 1px solid transparent; border-radius: var(--nv-r-sm); background: none; cursor: pointer; color: var(--nv-texto); transition: var(--nv-dur-fast); } .nv-dl-row:hover { background: color-mix(in srgb, var(--nv-savia) 7%, transparent); } .nv-dl-row.on { background: color-mix(in srgb, var(--nv-savia) 12%, transparent); border-color: color-mix(in srgb, var(--nv-savia) 40%, transparent); } .nv-dl-av { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--nv-grad); color: #04140E; font-weight: 800; font-size: 14px; display: grid; place-items: center; } .nv-dl-rmid { flex: 1; min-width: 0; } .nv-dl-who { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nv-dl-listing { font-size: 11.5px; color: var(--nv-cosecha); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nv-dl-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; } .nv-dl-badge.match { color: var(--nv-cielo); background: color-mix(in srgb, var(--nv-cielo) 14%, transparent); } .nv-dl-badge.deal_room { color: var(--nv-savia-hi); background: color-mix(in srgb, var(--nv-savia) 16%, transparent); } .nv-dl-badge.cerrado { color: var(--nv-tenue); background: color-mix(in srgb, var(--nv-tenue) 14%, transparent); } .nv-dl-sala { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); } .nv-dl-loading { margin: auto; color: var(--nv-tenue); font-family: var(--nv-f-mono); padding: 24px; } .nv-dl-empty { text-align: center; color: var(--nv-tenue); padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13px; } .nv-dl-empty-sala { margin: auto; } .nv-dl-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--nv-linea); position: sticky; top: 0; background: var(--nv-superficie); z-index: 2; } .nv-dl-back { display: none; background: none; border: none; color: var(--nv-tenue); cursor: pointer; padding: 2px; } .nv-dl-hinfo { flex: 1; min-width: 0; } .nv-dl-hwho { font-size: 14px; font-weight: 700; } .nv-dl-hlisting { font-size: 11.5px; color: var(--nv-cosecha); } .nv-dl-card { margin: 12px 14px; padding: 14px; background: var(--nv-suelo); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); } .nv-dl-ctitle { display: flex; align-items: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--nv-tenue); margin-bottom: 10px; } .nv-dl-sub { font-size: 12px; color: var(--nv-tenue); margin: -6px 0 12px; line-height: 1.45; } .nv-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .nv-dl-f { display: flex; flex-direction: column; gap: 4px; } .nv-dl-flb { font-size: 10.5px; color: var(--nv-tenue); text-transform: uppercase; letter-spacing: .04em; } .nv-dl-in { background: var(--nv-superficie); border: 1px solid var(--nv-linea-fuerte); border-radius: var(--nv-r-sm); padding: 9px 11px; color: var(--nv-texto); font-family: var(--nv-f-mono); font-size: 13.5px; outline: none; width: 100%; } .nv-dl-in:focus { border-color: var(--nv-savia); } .nv-dl-in:disabled { opacity: .6; } .nv-dl-notas { width: 100%; margin-top: 10px; min-height: 54px; background: var(--nv-superficie); border: 1px solid var(--nv-linea-fuerte); border-radius: var(--nv-r-sm); padding: 10px 12px; color: var(--nv-texto); font: 400 13px/1.45 var(--nv-f-body); outline: none; resize: vertical; } .nv-dl-total { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; font-size: 17px; } .nv-dl-tlb { font-size: 10.5px; color: var(--nv-tenue); text-transform: uppercase; letter-spacing: .04em; } .nv-dl-conf { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .nv-dl-cpill { font-size: 11px; padding: 4px 10px; border-radius: 999px; color: var(--nv-tenue); background: color-mix(in srgb, var(--nv-tenue) 12%, transparent); } .nv-dl-cpill.on { color: var(--nv-savia-hi); background: color-mix(in srgb, var(--nv-savia) 16%, transparent); } .nv-dl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; } .nv-dl-acts .nv-btn { width: auto; flex: 0 0 auto; padding: 9px 15px; font-size: 12.5px; } .nv-dl-hint { font-size: 11.5px; color: var(--nv-tenue); } .nv-dl-donde { font-size: 13.5px; font-weight: 600; } .nv-dl-coord { font-size: 11.5px; color: var(--nv-tenue); margin-top: 2px; } .nv-dl-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; } .nv-dl-b { width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; font-size: 12.5px; text-decoration: none; } /* CATEGORÍA + TARJETA DE PRESTADOR (rediseño 2026-08-21, reportado por Daniel: "se ve tirado"). Antes era una fila pelada con un `border-top` de divisor — ni fondo, ni borde, ni radio: el prestador y su precio se leían igual que una línea de log. Ahora cada prestador es su propia tarjeta, con el mismo fondo/borde/sombra que el resto de tarjetas de la app (`--nv-superficie`, `--nv-linea`, `--nv-r-md`, `--nv-sh-1`) y el precio destacado en vez de perdido dentro del texto gris. */ .nv-dl-cat { font: 700 11px/1 var(--nv-f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--nv-savia); margin: 18px 0 9px; } .nv-dl-cat:first-child { margin-top: 0; } .nv-dl-prov { display: flex; align-items: center; gap: 12px; padding: 12px 13px; margin-bottom: 8px; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); box-shadow: var(--nv-sh-1); transition: var(--nv-dur-fast); } .nv-dl-prov:hover { border-color: var(--nv-linea-fuerte); } .nv-dl-pinfo { flex: 1 1 140px; min-width: 0; } .nv-dl-ptitle { font-size: 13.5px; font-weight: 700; line-height: 1.3; text-wrap: balance; } .nv-dl-pmeta { font-size: 11.5px; color: var(--nv-tenue); margin-top: 3px; } .nv-dl-pb { width: auto; flex: 0 0 auto; padding: 9px 15px; font-size: 12.5px; } .nv-dl-vacio { text-align: center; color: var(--nv-tenue); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; } .nv-dl-diag { font-size: 11.5px; color: var(--nv-tenue); line-height: 1.5; } .nv-dl-aviso { margin: 12px 14px 0; padding: 10px 12px; border-radius: var(--nv-r-sm); font-size: 12.5px; line-height: 1.45; } .nv-dl-aviso.err { color: var(--nv-alerta, #E5534B); background: color-mix(in srgb, var(--nv-alerta, #E5534B) 12%, transparent); } .nv-dl-aviso.ok { color: var(--nv-savia-hi); background: color-mix(in srgb, var(--nv-savia) 14%, transparent); } @media (max-width: 720px) { .nv-dl { grid-template-columns: 1fr; height: calc(100vh - 140px); } .nv-dl-sala { display: none; } .nv-dl.detail .nv-dl-list { display: none; } .nv-dl.detail .nv-dl-sala { display: flex; } .nv-dl-back { display: inline-flex; } } /* ---------- Unidad Operativa ---------- */ .nv-uni { display: inline-flex; align-items: center; justify-content: center; } .nv-un-loading { color: var(--nv-tenue); font-family: var(--nv-f-mono); padding: 30px; text-align: center; } .nv-un-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 6px; } .nv-un-head .nv-fam { margin: 0; } .nv-un-add { width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; font-size: 12.5px; } .nv-un-empty { text-align: center; color: var(--nv-tenue); padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13px; } .nv-un-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .nv-un-card { text-align: left; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); padding: 15px; cursor: pointer; color: var(--nv-texto); box-shadow: var(--nv-sh-1); transition: var(--nv-dur-fast); } .nv-un-card:hover { border-color: var(--nv-linea-fuerte); transform: translateY(-2px); } .nv-un-ctop { display: flex; gap: 11px; align-items: center; } .nv-un-cic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: color-mix(in srgb, var(--nv-savia) 16%, transparent); display: grid; place-items: center; } .nv-un-cinfo { min-width: 0; } .nv-un-cname { font-size: 14.5px; font-weight: 700; } .nv-un-ccrop { font-size: 12px; color: var(--nv-tenue); } .nv-un-stage { margin: 14px 0 4px; } .nv-un-stagelab { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--nv-tenue); margin-bottom: 5px; } .nv-un-stagelab .nv-mono { color: var(--nv-cosecha); } .nv-un-bar { height: 7px; background: var(--nv-suelo); border-radius: 999px; overflow: hidden; } .nv-un-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--nv-cosecha), var(--nv-savia)); } .nv-un-cfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 11px; } .nv-un-cyc { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--nv-tenue); } .nv-un-cacts { font-family: var(--nv-f-mono); font-size: 10.5px; color: var(--nv-savia-hi); } .nv-un-dhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .nv-un-back { background: none; border: none; color: var(--nv-tenue); cursor: pointer; padding: 2px; display: inline-flex; } .nv-un-dname { font-size: 16px; font-weight: 800; } .nv-un-dcrop { font-size: 12px; color: var(--nv-tenue); } .nv-un-dcard { background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); padding: 15px; } .nv-un-drow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .nv-un-dstage { font-size: 14px; font-weight: 700; color: var(--nv-savia-hi); } .nv-un-dday { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--nv-tenue); } .nv-un-dstagelab { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; } .nv-un-dstagelab .nv-mono { font-size: 15px; color: var(--nv-cosecha); font-weight: 700; } .nv-un-dstagek { font-size: 11px; color: var(--nv-tenue); text-transform: uppercase; letter-spacing: .04em; } .nv-un-log { background: var(--nv-suelo); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); padding: 14px; margin: 16px 0; } .nv-un-logk { font-size: 12.5px; font-weight: 700; margin-bottom: 10px; } .nv-un-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; } .nv-un-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 7px 11px; border-radius: var(--nv-r-pill); border: 1px solid var(--nv-linea-fuerte); background: none; color: var(--nv-tenue); cursor: pointer; transition: var(--nv-dur-fast); } .nv-un-chip.on { background: color-mix(in srgb, var(--nv-savia) 15%, transparent); color: var(--nv-savia); border-color: var(--nv-savia); } .nv-un-logrow { display: flex; gap: 7px; align-items: flex-end; } .nv-un-tools { display: flex; gap: 7px; align-items: center; flex-shrink: 0; padding-bottom: 1px; } .nv-un-tool { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--nv-linea-fuerte); background: none; cursor: pointer; display: grid; place-items: center; } .nv-un-tool:hover { border-color: var(--nv-savia); } .nv-un-input { flex: 1; min-width: 90px; min-height: 40px; max-height: 156px; background: var(--nv-superficie); border: 1px solid var(--nv-linea-fuerte); border-radius: 14px; padding: 10px 13px; color: var(--nv-texto); font: 400 14px/1.45 var(--nv-f-body); outline: none; resize: none; overflow-y: auto; } .nv-un-input:focus { border-color: var(--nv-savia); } .nv-un-save { width: auto; flex: 0 0 auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 5px; padding: 0 14px; height: 40px; font-size: 12.5px; white-space: nowrap; } .nv-un-ok { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--nv-savia-hi); } /* Contraparte del "listo": si la actividad NO se guardó, se dice. */ .nv-un-err { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--nv-alerta, #E5534B); } .nv-un-timeline { display: flex; flex-direction: column; gap: 2px; } .nv-un-act { display: flex; gap: 12px; padding: 12px 4px; position: relative; } .nv-un-act:not(:last-child)::before { content: ''; position: absolute; left: 18px; top: 40px; bottom: -2px; width: 2px; background: var(--nv-linea); } .nv-un-adot { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--nv-savia) 14%, var(--nv-superficie)); border: 1px solid var(--nv-linea); z-index: 1; } .nv-un-adot.nv-t-riego { background: color-mix(in srgb, var(--nv-cielo) 16%, var(--nv-superficie)); } .nv-un-adot.nv-t-cosecha { background: color-mix(in srgb, var(--nv-dorado) 16%, var(--nv-superficie)); } .nv-un-abody { flex: 1; min-width: 0; padding-top: 2px; } .nv-un-atop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .nv-un-atype { font-size: 13px; font-weight: 700; } .nv-un-atime { font-family: var(--nv-f-mono); font-size: 10.5px; color: var(--nv-tenue); flex-shrink: 0; } .nv-un-anote { font-size: 12.5px; color: var(--nv-tenue); margin-top: 2px; } .nv-un-cres { margin-top: 6px; padding: 8px 10px; border-radius: var(--nv-r-sm, 8px); background: color-mix(in srgb, var(--nv-dorado) 8%, transparent); border: 1px solid color-mix(in srgb, var(--nv-dorado) 22%, var(--nv-linea)); } .nv-un-cresl { font-size: 12.5px; color: var(--nv-texto); } .nv-un-cresl:not(:first-child) { margin-top: 3px; } .nv-un-cresmini { color: var(--nv-tenue); font-size: 12px; } .nv-un-cresbad { color: var(--nv-alerta, #E5534B); } .nv-un-cosbox { margin: 10px 0 12px; padding-top: 10px; border-top: 1px dashed var(--nv-linea); } .nv-un-cosrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .nv-un-cosrow3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; } .nv-un-cosdet { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } .nv-un-costoggle { background: none; border: none; color: var(--nv-savia); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px; } .nv-un-pccard { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .nv-un-pchead { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--nv-tenue); } .nv-un-pcstep { padding-top: 10px; border-top: 1px solid var(--nv-linea); } .nv-un-pcstep:first-of-type { padding-top: 0; border-top: none; } .nv-un-pcstepk { font-size: 13px; font-weight: 700; margin-bottom: 4px; } .nv-un-pcchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .nv-un-pcchip { font-size: 11.5px; font-family: var(--nv-f-mono); background: var(--nv-suelo); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-pill); padding: 3px 9px; color: var(--nv-texto); } .nv-un-pcnota { font-size: 12.5px; color: var(--nv-tenue); line-height: 1.4; } .nv-un-pcbaja { font-size: 11.5px; color: var(--nv-tenue); font-style: italic; padding-top: 4px; } @media (max-width: 720px) { .nv-un-logrow { flex-wrap: wrap; align-items: center; } .nv-un-input { min-width: 100%; order: -1; } .nv-un-tools { flex: 1; } .nv-un-save { margin-left: auto; } } /* ---------- IA Agronómica ---------- */ .nv-agi { display: inline-flex; align-items: center; justify-content: center; } .nv-ag-intro { display: flex; gap: 10px; align-items: flex-start; background: color-mix(in srgb, var(--nv-savia) 8%, var(--nv-superficie)); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); padding: 12px 14px; font-size: 12.5px; color: var(--nv-tenue); line-height: 1.45; } .nv-ag-intro p { flex: 1; } /* `.nv-ag-plothint` (agro_lab.js, aviso «sin parcela» del diagnóstico) — cero reglas, mismo aspecto que `.nv-ag-intro` de arriba pero en columna: lleva el texto y, debajo, el botón «Crear parcela». */ .nv-ag-plothint { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: color-mix(in srgb, var(--nv-savia) 8%, var(--nv-superficie)); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); padding: 12px 14px; margin-bottom: 14px; } .nv-ag-plothintx { font-size: 12.5px; color: var(--nv-tenue); line-height: 1.45; } .nv-ag-form { background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); padding: 15px; margin: 14px 0; } .nv-ag-lbl { font-size: 11.5px; font-weight: 700; color: var(--nv-tenue); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 9px; } .nv-ag-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 15px; } .nv-ag-type { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 10px; border-radius: var(--nv-r-sm); border: 1px solid var(--nv-linea-fuerte); background: var(--nv-suelo); color: var(--nv-tenue); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--nv-dur-fast); } .nv-ag-type:hover { border-color: var(--nv-savia); } .nv-ag-type.on { background: color-mix(in srgb, var(--nv-savia) 15%, transparent); color: var(--nv-savia); border-color: var(--nv-savia); } .nv-ag-select { width: 100%; background: var(--nv-suelo); border: 1px solid var(--nv-linea-fuerte); border-radius: var(--nv-r-sm); padding: 11px 13px; color: var(--nv-texto); font-size: 13.5px; outline: none; margin-bottom: 14px; cursor: pointer; } .nv-ag-select:focus { border-color: var(--nv-savia); } .nv-ag-comp { margin-bottom: 12px; } .nv-ag-run { width: 100%; } .nv-ag-loading { display: flex; align-items: center; gap: 9px; padding: 22px; justify-content: center; color: var(--nv-savia-hi); font-size: 13px; font-family: var(--nv-f-mono); } .nv-ag-card { background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-left: 3px solid var(--nv-savia); border-radius: var(--nv-r-md); padding: 16px; margin-bottom: 16px; } .nv-ag-card.sev-medio { border-left-color: var(--nv-dorado); } .nv-ag-card.sev-alto { border-left-color: var(--nv-critico); } .nv-ag-rhead { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; } .nv-ag-ric { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: color-mix(in srgb, var(--nv-savia) 15%, transparent); display: grid; place-items: center; } .nv-ag-rinfo { flex: 1; min-width: 0; } .nv-ag-rtitle { font-size: 15px; font-weight: 800; } .nv-ag-rplot { font-size: 12px; color: var(--nv-cosecha); } .nv-ag-sev { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; flex-shrink: 0; } .nv-ag-sev.sev-bajo { color: var(--nv-savia-hi); background: color-mix(in srgb, var(--nv-savia) 15%, transparent); } .nv-ag-sev.sev-medio { color: var(--nv-dorado); background: color-mix(in srgb, var(--nv-dorado) 15%, transparent); } .nv-ag-sev.sev-alto { color: var(--nv-critico); background: color-mix(in srgb, var(--nv-critico) 15%, transparent); } .nv-ag-summary { font-size: 13.5px; line-height: 1.5; color: var(--nv-texto); margin-bottom: 14px; } .nv-ag-sec { font-size: 11px; font-weight: 700; color: var(--nv-tenue); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 8px; } .nv-ag-findings { display: flex; flex-direction: column; gap: 7px; } .nv-ag-find { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 9px 11px; background: var(--nv-suelo); border-radius: var(--nv-r-sm); } .nv-ag-fk { font-size: 12.5px; font-weight: 700; min-width: 96px; } .nv-ag-fv { font-size: 12.5px; color: var(--nv-cosecha); } .nv-ag-fn { font-size: 12px; color: var(--nv-tenue); flex: 1; min-width: 120px; } .nv-ag-recs { display: flex; flex-direction: column; gap: 8px; } .nv-ag-rec { display: flex; align-items: center; gap: 9px; padding: 10px 11px; background: var(--nv-suelo); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm); } .nv-ag-recbullet { flex-shrink: 0; display: inline-flex; } .nv-ag-rectext { flex: 1; font-size: 12.5px; line-height: 1.4; } .nv-ag-recgo { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--nv-savia); background: color-mix(in srgb, var(--nv-savia) 12%, transparent); border: 1px solid color-mix(in srgb, var(--nv-savia) 40%, transparent); border-radius: var(--nv-r-pill); padding: 6px 11px; cursor: pointer; transition: var(--nv-dur-fast); } .nv-ag-recgo:hover { background: color-mix(in srgb, var(--nv-savia) 22%, transparent); } .nv-ag-recgo svg { transform: rotate(180deg); } .nv-ag-model { font-family: var(--nv-f-mono); font-size: 10.5px; color: var(--nv-tenue); margin-top: 13px; text-align: right; } /* EL PRECIO, EN LETRA PEQUEÑA. Pedido del dueño el 2026-08-08: «No pongas que cuesta 20 tokens [en grande]. Pon algo en letra pequeña». Y NO ES QUE ALGUIEN LO PUSIERA GRANDE A PROPOSITO: `.nv-ag-tokens` NO TENIA NI UNA REGLA EN ESTE ARCHIVO. Seis pantallas la pintan (`agro_lab`, `agro_reco`, `agro_sat`, `agro_sow`, `crop`, y `assets` con su gemela) y todas salian con el tamaño de un parrafo normal, en negro, al lado del boton. El «Cuesta 20 tokens» gritado que el dueño fotografio era eso: un `

` sin estilo. Una regla lo arregla en las seis a la vez. ⚠️ SE HACE PEQUEÑO, NO SE HACE DESAPARECER. La regla de la casa es «un botón que cuesta se pulsa una vez si no avisa»: el precio se dice ANTES de pulsar, siempre. Por eso NO lleva `display:none` en movil ni se esconde tras un `title` —en un telefono no hay raton que enseñe un `title`— y el color es `--nv-tenue`, que es el mismo del resto de notas al pie y sigue pasando contraste. Pequeño es discreto; ausente es una factura sorpresa. */ .nv-ag-tokens { font-family: var(--nv-f-mono); font-size: 10.5px; color: var(--nv-tenue); margin-top: 9px; text-align: center; letter-spacing: .01em; } /* EL CONTADOR DE LO GASTADO — «como Claude, que le muestra a uno los tokens y es súper rápido». Lo pinta `NVTokens` en app.js. Va FIJO y por encima de todo porque la respuesta que acaba de costar tokens suele repintar el panel entero: un contador dentro del panel se iria con el repintado justo en el momento en que hay algo que contar. `bottom` respeta `safe-area-inset` para no quedar debajo de la barra del iPhone, y `pointer-events: none` para que nunca tape un boton — es un aviso, no un control. Aparece, se lee y se va; el JS le quita la clase a los 6 segundos. `prefers-reduced-motion` lo deja aparecer sin deslizarse. */ .nv-tkhud { position: fixed; z-index: 60; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 6px; pointer-events: none; font-family: var(--nv-f-mono); font-size: 11px; font-weight: 700; color: var(--nv-savia-hi); background: var(--nv-superficie); border: 1px solid var(--nv-linea-fuerte); border-radius: var(--nv-r-pill); padding: 6px 11px; box-shadow: var(--nv-sh-1); opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; } .nv-tkhud.nv-tkhud-on { opacity: 1; transform: translateY(0); } .nv-tkhud-ic { opacity: .7; } @media (prefers-reduced-motion: reduce) { .nv-tkhud { transition: opacity .18s ease; transform: none; } .nv-tkhud.nv-tkhud-on { transform: none; } } .nv-ag-empty { color: var(--nv-tenue); font-size: 13px; padding: 20px; text-align: center; } /* `.nv-ag-vaciok`/`.nv-ag-vaciod` (título/motivo de `vacio()`, compartido por los 7 módulos vía `ctx.vacio()`) no tenían ni una regla — heredaban el 13px/tenue de `.nv-ag-empty` sin distinguirse entre sí. Mismos valores que `.nv-co-vacio-t`/`.nv-co-vacio-d` (Comunidad), que ya resuelve el mismo patrón título+motivo en una caja vacía. */ .nv-ag-vaciok { font-size: 14px; font-weight: 700; color: var(--nv-texto); margin-top: 2px; } .nv-ag-vaciod { font-size: 13px; color: var(--nv-tenue); line-height: 1.5; margin-top: 4px; } /* Fallo VISIBLE (NVErr). Dos colores a propósito: ámbar = te quedaste sin saldo (estado del usuario, se arregla mañana solo); rojo = algo se rompió de verdad. Pintarlos igual haría que llame a soporte por una cuota que se renueva. */ .nv-err { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; margin: 4px 0; background: var(--nv-superficie); border: 1px solid var(--nv-critico); border-left-width: 3px; border-radius: var(--nv-r-sm); text-align: left; } .nv-err.is-tokens { border-color: var(--nv-alerta); } .nv-err-h { display: flex; align-items: center; gap: 8px; } /* NVIcon escribe el color DENTRO del SVG (stroke="…" fijo, nunca currentColor), así que `color:` sobre el contenedor no hace nada: había que pisar el atributo de presentación, que en CSS pierde contra cualquier regla. Sin esto el icono salía verde savia en los dos estados y el aviso de "sin saldo" no se distinguía de un error de verdad más que por el borde. */ .nv-err-i { display: inline-flex; } .nv-err-i svg [stroke], .nv-err-i svg[stroke] { stroke: var(--nv-critico); } .nv-err.is-tokens .nv-err-i svg [stroke], .nv-err.is-tokens .nv-err-i svg[stroke] { stroke: var(--nv-alerta); } .nv-err-t { font-weight: 700; font-size: 13.5px; color: var(--nv-texto); } .nv-err-d { font-size: 12.5px; color: var(--nv-tenue); line-height: 1.5; margin: 0; } /* min-height 44px: el botón medía 30px de alto (hallazgo de compra-curso-front, 2026-08-11) y 44 es el mínimo táctil — en un cartel de error/pago, fallar el dedo sobre "Comprar"/"Reintentar" es exactamente donde más duele. */ .nv-err-b { width: auto; align-self: flex-start; padding: 8px 14px; font-size: 12.5px; margin-top: 3px; min-height: 44px; } /* P3 H5 — el aviso de regreso del checkout de Bold. Flotante y por encima de todo a propósito: el productor vuelve de pagar y lo PRIMERO que necesita saber es si su plata llegó. Enterrarlo dentro del panel lo dejaría compitiendo con el contenido de la pantalla que estuviera abierta. Tres colores para tres situaciones distintas, porque "ya está" y "pagaste pero no pudimos activarlo" no se pueden ver igual. */ .nv-pago-aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60; max-width: min(520px, calc(100vw - 24px)); display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-left-width: 3px; border-radius: var(--nv-r-sm); box-shadow: 0 8px 28px rgba(0,0,0,.16); text-align: left; } .nv-pago-aviso strong { font-size: 13.5px; color: var(--nv-texto); } .nv-pago-aviso p { margin: 4px 0 0; font-size: 12.5px; color: var(--nv-tenue); line-height: 1.5; } .nv-pago-aviso > button { margin-left: auto; flex-shrink: 0; padding: 2px 8px; font-size: 14px; line-height: 1; } .nv-pago-aviso.is-ok { border-left-color: var(--nv-savia); } .nv-pago-aviso.is-warn { border-left-color: var(--nv-alerta); } .nv-pago-aviso.is-info { border-left-color: var(--nv-tenue); } /* La pista de "pagar no te verifica" va debajo del botón y en pequeño: es una aclaración, no una advertencia — pintarla como alerta asustaría sin motivo. */ .nv-pf-callhint { font-size: 11.5px; opacity: .85; margin-top: 6px; } .nv-ag-histlist { display: flex; flex-direction: column; gap: 7px; } .nv-ag-hrow { display: flex; align-items: center; gap: 11px; text-align: left; width: 100%; padding: 11px 12px; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm); cursor: default; color: var(--nv-texto); } .nv-ag-hic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: color-mix(in srgb, var(--nv-savia) 12%, transparent); display: grid; place-items: center; } .nv-ag-hic.sev-medio { background: color-mix(in srgb, var(--nv-dorado) 13%, transparent); } .nv-ag-hic.sev-alto { background: color-mix(in srgb, var(--nv-critico) 13%, transparent); } .nv-ag-hmid { flex: 1; min-width: 0; } .nv-ag-htop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .nv-ag-htitle { font-size: 13px; font-weight: 700; } .nv-ag-htime { font-family: var(--nv-f-mono); font-size: 10.5px; color: var(--nv-tenue); flex-shrink: 0; } .nv-ag-hsum { font-size: 12px; color: var(--nv-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nv-ag-hsev { flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .nv-ag-hsev.sev-bajo { color: var(--nv-savia-hi); background: color-mix(in srgb, var(--nv-savia) 14%, transparent); } .nv-ag-hsev.sev-medio { color: var(--nv-dorado); background: color-mix(in srgb, var(--nv-dorado) 14%, transparent); } .nv-ag-hsev.sev-alto { color: var(--nv-critico); background: color-mix(in srgb, var(--nv-critico) 14%, transparent); } @media (max-width: 720px) { .nv-ag-rec { flex-wrap: wrap; } .nv-ag-recgo { margin-left: 24px; } } /* ---------- IA Agronómica · HUB ---------- */ .nv-ag-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 6px; } .nv-ag-tool { text-align: left; display: flex; flex-direction: column; gap: 9px; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); padding: 15px; cursor: pointer; color: var(--nv-texto); box-shadow: var(--nv-sh-1); transition: var(--nv-dur-fast); } .nv-ag-tool:hover { border-color: var(--nv-savia); transform: translateY(-2px); } .nv-ag-tool.off { opacity: .62; cursor: default; } .nv-ag-tool.off:hover { border-color: var(--nv-linea); transform: none; } .nv-ag-toolic { width: 42px; height: 42px; border-radius: 11px; background: color-mix(in srgb, var(--nv-savia) 15%, transparent); display: grid; place-items: center; } .nv-ag-toolbody { flex: 1; } .nv-ag-toolname { font-size: 14px; font-weight: 700; } .nv-ag-tooldesc { font-size: 12px; color: var(--nv-tenue); line-height: 1.4; margin-top: 3px; } .nv-ag-toolcta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--nv-savia); } .nv-ag-toolcta svg { transform: rotate(180deg); } /* sub-vista: cabecera con volver */ .nv-ag-shead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .nv-ag-back { background: none; border: none; color: var(--nv-tenue); cursor: pointer; padding: 2px; display: inline-flex; } .nv-ag-sic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: color-mix(in srgb, var(--nv-savia) 15%, transparent); display: grid; place-items: center; } .nv-ag-sinfo { flex: 1; min-width: 0; } .nv-ag-stitle { font-size: 16px; font-weight: 800; } .nv-ag-sdesc { font-size: 12px; color: var(--nv-tenue); } /* satélite */ /* LA BARRA ENVUELVE, Y NO ES ADORNO. Desde el hito 34 lleva DOS selectores (parcela y periodo) mas el boton: en una fila sola, a 320 px se sale de la pantalla. `flex-wrap` la deja caer a dos renglones en vez de desbordar, y el `min-width` impide que los selectores se aplasten hasta no poder leer el nombre de la parcela. Es el mismo fallo que los numeros de las tarjetas de Inicio, que se salian en 8 de 10 anchos: aqui se ataja antes de que aparezca. */ .nv-ag-satbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } .nv-ag-satbar .nv-ag-select { margin-bottom: 0; flex: 1 1 auto; min-width: 130px; } .nv-ag-import { width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 12.5px; } .nv-ag-idx { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .nv-ag-idxcard { background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); padding: 15px; } .nv-ag-idxval { font-size: 30px; font-weight: 800; line-height: 1; } .nv-ag-idxcard.lvl-high .nv-ag-idxval { color: var(--nv-savia-hi); } .nv-ag-idxcard.lvl-mid .nv-ag-idxval { color: var(--nv-dorado); } .nv-ag-idxcard.lvl-low .nv-ag-idxval { color: var(--nv-critico); } .nv-ag-idxlab { font-size: 11.5px; color: var(--nv-tenue); margin: 6px 0 9px; } .nv-ag-idxbar { height: 6px; background: var(--nv-suelo); border-radius: 999px; overflow: hidden; } .nv-ag-idxfill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--nv-cosecha), var(--nv-savia)); } .nv-ag-satsrc { font-family: var(--nv-f-mono); font-size: 10.5px; color: var(--nv-tenue); margin: 10px 0 4px; } .nv-ag-zones { display: flex; flex-direction: column; gap: 7px; } .nv-ag-zone { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm); } .nv-ag-zdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--nv-tenue); } .nv-ag-zone.lvl-high .nv-ag-zdot { background: var(--nv-savia-hi); } .nv-ag-zone.lvl-mid .nv-ag-zdot { background: var(--nv-dorado); } .nv-ag-zone.lvl-low .nv-ag-zdot { background: var(--nv-critico); } .nv-ag-zname { flex: 1; font-size: 13px; font-weight: 600; } .nv-ag-zndvi { font-size: 13px; color: var(--nv-cosecha); } .nv-ag-zlvl { font-size: 11px; color: var(--nv-tenue); min-width: 76px; text-align: right; } .nv-ag-cross { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; background: color-mix(in srgb, var(--nv-critico) 9%, var(--nv-superficie)); border: 1px solid color-mix(in srgb, var(--nv-critico) 35%, transparent); border-radius: var(--nv-r-md); } .nv-ag-crosstxt { flex: 1; min-width: 160px; font-size: 12.5px; line-height: 1.4; } /* modal importar */ .nv-ag-modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; } .nv-ag-modalcard { position: relative; width: 100%; max-width: 400px; background: var(--nv-suelo); border: 1px solid var(--nv-linea-fuerte); border-radius: var(--nv-r-lg); padding: 20px; display: flex; flex-direction: column; gap: 11px; box-shadow: var(--nv-sh-2); } .nv-ag-modaltitle { font-size: 15px; font-weight: 800; padding-right: 24px; } .nv-ag-modalbtn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* `.nv-ag-modalmsg` empieza vacío (solo se llena al pulsar un botón) y `.nv-ag-modalcard` ya reparte `gap:11px` entre TODOS sus hijos directos: sin `:empty`, ese hueco de 11px salía igual antes de que hubiera nada que mostrar. Mismo patrón que `.nv-ag-inmsg:empty` un poco más arriba. */ .nv-ag-modalmsg:empty { display: none; } /* La imagen real de satélite (2026-08-22), dentro de `.nv-ag-modalmsg`. */ .nv-ag-modalimg { width: 100%; border-radius: var(--nv-r-md); display: block; } .nv-ag-modalnote { font-size: 11.5px; color: var(--nv-tenue); line-height: 1.45; margin-top: 2px; } .nv-ag-modalx { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--nv-tenue); font-size: 15px; cursor: pointer; } @media (max-width: 720px) { .nv-ag-idx { grid-template-columns: 1fr; } } /* guía calicata: pasos */ .nv-ag-guide { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 9px 13px; border-radius: var(--nv-r-pill); border: 1px solid var(--nv-linea-fuerte); background: var(--nv-suelo); color: var(--nv-savia); font-size: 12.5px; font-weight: 600; cursor: pointer; } .nv-ag-guide:hover { border-color: var(--nv-savia); } .nv-ag-steps { display: flex; flex-direction: column; gap: 10px; } .nv-ag-step { display: flex; gap: 11px; align-items: flex-start; } .nv-ag-stepn { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--nv-savia) 18%, transparent); color: var(--nv-savia); font-weight: 800; font-size: 12px; display: grid; place-items: center; } .nv-ag-steptxt { flex: 1; font-size: 13px; line-height: 1.45; color: var(--nv-texto); } /* Recomendación Inteligente */ .nv-ag-recoout { margin-top: 4px; } .nv-ag-covchips { display: flex; flex-wrap: wrap; gap: 7px; } .nv-ag-covchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: var(--nv-r-pill); border: 1px solid var(--nv-linea-fuerte); background: var(--nv-suelo); color: var(--nv-texto); } .nv-ag-covchip.sev-alto { border-color: color-mix(in srgb, var(--nv-critico) 45%, transparent); color: var(--nv-critico); } .nv-ag-covchip.sev-medio { border-color: color-mix(in srgb, var(--nv-dorado) 45%, transparent); color: var(--nv-dorado); } .nv-ag-covchip.sev-bajo { border-color: color-mix(in srgb, var(--nv-savia) 45%, transparent); color: var(--nv-savia-hi); } .nv-ag-covchip.miss { opacity: .7; border-style: dashed; color: var(--nv-tenue); } .nv-ag-covnote { font-size: 11.5px; color: var(--nv-tenue); margin-top: 7px; font-style: italic; } .nv-ag-prio { display: flex; flex-direction: column; gap: 8px; } .nv-ag-prow { display: flex; align-items: flex-start; gap: 11px; padding: 12px; background: var(--nv-suelo); border: 1px solid var(--nv-linea); border-left: 3px solid var(--nv-savia); border-radius: var(--nv-r-sm); } .nv-ag-prow.sev-alto { border-left-color: var(--nv-critico); } .nv-ag-prow.sev-medio { border-left-color: var(--nv-dorado); } .nv-ag-prank { width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px; background: color-mix(in srgb, var(--nv-savia) 16%, transparent); color: var(--nv-savia); font-weight: 800; font-size: 12.5px; display: grid; place-items: center; } .nv-ag-pbody { flex: 1; min-width: 0; } .nv-ag-ptext { font-size: 13px; font-weight: 600; line-height: 1.4; } .nv-ag-pwhy { font-size: 11.5px; color: var(--nv-tenue); margin-top: 3px; line-height: 1.4; } .nv-ag-refs { display: flex; flex-direction: column; gap: 6px; } .nv-ag-ref { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--nv-suelo); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm); text-decoration: none; color: var(--nv-texto); } a.nv-ag-ref:hover { border-color: var(--nv-savia); } .nv-ag-refbody { flex: 1; min-width: 0; } .nv-ag-reftitle { font-size: 12.5px; font-weight: 600; line-height: 1.35; } .nv-ag-refsrc { font-family: var(--nv-f-mono); font-size: 10.5px; color: var(--nv-savia-hi); margin-top: 2px; } .nv-ag-refnote { font-size: 11px; color: var(--nv-tenue); line-height: 1.45; margin-top: 9px; } /* Insumos */ .nv-ag-inseg { margin-bottom: 14px; align-self: flex-start; } .nv-ag-inlist { display: flex; flex-direction: column; gap: 8px; } .nv-ag-incard { display: flex; align-items: center; gap: 11px; padding: 12px 13px; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); } .nv-ag-inic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: color-mix(in srgb, var(--nv-savia) 14%, transparent); display: grid; place-items: center; } .nv-ag-inmid { flex: 1; min-width: 0; } .nv-ag-inname { font-size: 13.5px; font-weight: 700; } .nv-ag-inreason { font-size: 12px; color: var(--nv-tenue); line-height: 1.4; } .nv-ag-inhave { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--nv-savia-hi); } .nv-ag-invlist { display: flex; flex-direction: column; gap: 7px; } .nv-ag-invrow { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm); } .nv-ag-invname { flex: 1; font-size: 13px; font-weight: 600; } .nv-ag-invqty { font-size: 12.5px; color: var(--nv-cosecha); } .nv-ag-invst { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; min-width: 66px; text-align: center; } .nv-ag-invst.st-ok { color: var(--nv-savia-hi); background: color-mix(in srgb, var(--nv-savia) 14%, transparent); } .nv-ag-invst.st-low { color: var(--nv-dorado); background: color-mix(in srgb, var(--nv-dorado) 14%, transparent); } .nv-ag-invst.st-out { color: var(--nv-critico); background: color-mix(in srgb, var(--nv-critico) 14%, transparent); } /* Registro de insumos (Hito 6C). Mismo lenguaje del composer de la bitácora. */ .nv-ag-invdel { background: none; border: none; color: var(--nv-fantasma); cursor: pointer; width: 24px; height: 24px; font-size: 17px; line-height: 1; display: grid; place-items: center; border-radius: 6px; flex-shrink: 0; } .nv-ag-invdel:hover { color: var(--nv-critico); background: color-mix(in srgb, var(--nv-critico) 12%, transparent); } .nv-ag-incomposer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding: 11px 12px; background: var(--nv-superficie); border: 1px solid var(--nv-linea-fuerte); border-radius: var(--nv-r-md); } .nv-ag-inf { background: var(--nv-suelo); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm); padding: 9px 11px; color: var(--nv-texto); font: 400 13px/1.3 var(--nv-f-body); outline: none; min-width: 0; } .nv-ag-inf:focus { border-color: var(--nv-savia); } .nv-ag-inf::placeholder { color: var(--nv-fantasma); } .nv-ag-inf-name { flex: 1 1 170px; } .nv-ag-inf-qty, .nv-ag-inf-min { flex: 0 1 108px; } .nv-ag-inf-unit { flex: 0 1 130px; } .nv-ag-insave { width: auto; flex: 0 0 auto; padding: 10px 18px; } .nv-ag-inmsg { flex: 1 1 100%; font-size: 12px; color: var(--nv-critico); } .nv-ag-inmsg:empty { display: none; } /* `.nv-ag-inprecio` — «lo que pagaron otros», dentro de `.nv-ag-inmid`. Cero reglas: mismo lenguaje de fila-de-dato que `.nv-ag-find` (fondo `--nv-suelo`, `--nv-r-sm`), pero apilada porque lleva línea + nota + fuente. */ .nv-ag-inprecio { margin-top: 8px; padding: 8px 10px; background: var(--nv-suelo); border-radius: var(--nv-r-sm); display: flex; flex-direction: column; gap: 3px; } .nv-ag-inprecio-vacio { color: var(--nv-tenue); } .nv-ag-inprlinea { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .nv-ag-inprtxt { font-size: 11.5px; color: var(--nv-tenue); } .nv-ag-inprval { font-size: 13px; font-weight: 700; color: var(--nv-savia-hi); } .nv-ag-inprnota { font-size: 10.5px; color: var(--nv-tenue); } .nv-ag-inprfuente { font-size: 10px; color: var(--nv-fantasma); margin-top: 1px; } /* `.nv-ag-incomp` — el checkbox «compartir con la comunidad» del composer de insumos. Cero reglas: sin esto, `

…media opcional…
…
……
…
ROTULOdato
…

…texto corrido…

Y el JS son cuatro lineas, en el `click` de `.nvx-listrow`: var abierto = fila.getAttribute('aria-expanded') === 'true'; fila.setAttribute('aria-expanded', String(!abierto)); item.classList.toggle('is-open', !abierto); ─── POR QUE `--nv-*` Y NO LOS TOKENS DEL ARTEFACTO ─────────────────────── El artefacto declara `--savia`, `--dorado`, `--linea`… en su propio `:root`. Copiarlos aqui seria declarar una SEGUNDA fuente de la paleta: se desincroniza en cuanto alguien afine un color en `tokens.css`, y —peor— el artefacto trae su propio interruptor claro/oscuro y `tokens.css` YA tiene el suyo. Dos interruptores para el mismo tema es como se consigue una tarjeta clara sobre fondo oscuro. Comprobado uno a uno: los valores son LOS MISMOS con otro nombre (`--savia:#178069` es `--nv-savia:#178069` del bloque claro). Asi que el modo oscuro sale gratis y no hay nada que mantener por duplicado. ─── LAS TRES DESVIACIONES DEL ARTEFACTO, Y SU MOTIVO ───────────────────── 1. `.nvx-detail` NO lleva `max-width:340px`. En el artefacto es una vitrina de un solo ejemplar; en la app va dentro de una lista y tiene que ocupar el ancho de su fila. 2. `.nvx-dprice` usa `clamp(15px,4.4vw,19px)` y no 19 px fijos. El dato real de Ganado es un RANGO («$12.400 – $13.900»), no un precio suelto: a 19 px fijos se sale de un telefono de 360 px. Es la misma leccion que ya pagamos en `.nv-sb-big-n` (ver su comentario). 3. El CTA lleva texto `#04140E` y no `#fff`. Sobre `--nv-savia` en modo oscuro (#2FA98C) el blanco se queda en 2,4:1. `#04140E` es lo que ya usa `.nv-btn-primary` en toda la casa. ────────────────────────────────────────────────────────────────────────── */ /* ---- el contenedor de la lista ---- La fila desplegable quiere UNA columna: en una rejilla de 2-3 columnas, abrir una tarjeta estira a sus vecinas de la misma fila. `.nv-in-grid`/`.nv-sb-grid` se quedan puestas en el mismo nodo porque `verify_marketplace` §2.3/§4.2 cuenta la rejilla por esa clase; el doble selector es para ganarle en especificidad a su `@media (min-width:560px)`, no por manía. */ .nvx-list { display: flex; flex-direction: column; gap: 10px; } .nv-in-grid.nvx-list, .nv-sb-grid.nvx-list { display: flex; grid-template-columns: none; } /* ---- la superficie: una sola caja que crece al abrirse ---- */ .nvx-item { background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); box-shadow: var(--nv-sh-1); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: border-color var(--nv-dur) var(--nv-ease), box-shadow var(--nv-dur) var(--nv-ease); } .nvx-item:hover { border-color: var(--nv-linea-fuerte); } /* `.nv-in-card`/`.nv-sb-card` viven en ESTE MISMO nodo (las cuenta el arnes de QA). Su `transform: translateY(-2px)` de hover era para una tarjeta muerta: en una que se despliega, el salto al pasar el raton pelea con la animacion. */ .nv-in-card.nvx-item:hover, .nv-sb-card.nvx-item:hover { transform: none; } .nvx-item.is-open { border-color: var(--nv-linea-fuerte); box-shadow: var(--nv-sh-2); } /* ══ ESTADO 1 · COLAPSADA ════════════════════════════════════════════════ Es la fila de «Mis Publicaciones», que es la que el dueño señalo como la que SI le gusta. Foto/icono, titulo, precio, estado, y ya. Todo lo demas —las nueve pastillas de Industria incluidas— se va al detalle. */ .nvx-listrow { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 10px 12px; margin: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; min-width: 0; } .nvx-listrow:hover .nvx-listtitle { color: var(--nv-savia); } .nvx-thumb { position: relative; width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--nv-suelo); display: grid; place-items: center; color: var(--nv-savia); line-height: 0; } .nvx-listmain { flex: 1 1 128px; min-width: 0; display: flex; flex-direction: column; gap: 3px; } /* UNA sola linea con puntos suspensivos. Los titulos reales de produccion son de 90 caracteres («Comercializadora exporta aguacate Hass, 12 toneladas semanales»); a dos y tres lineas la fila deja de ser una fila. El titulo entero se lee al abrir, en `.nvx-dtitle`, que si respira. */ .nvx-listtitle { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--nv-dur-fast); } /* `flex-wrap: wrap` y NO un recorte con puntos suspensivos. Se probó el recorte primero: con el dato real de produccion —«Comercializadora o exportador» al lado de «COP $7.500/tonelada»— la suma no cabe en los 236 px utiles de una columna de 372, asi que la fila envolvia IGUAL y lo unico que conseguia el recorte era mutilar el rotulo. A los anchos reales del panel de la app las dos cosas caben de sobra en un renglon; a 360 px envuelve, que es lo correcto —dos lineas se leen; un precio cortado por la mitad, no—. */ .nvx-listmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .nvx-listprice { color: var(--nv-savia); font-weight: 700; font-family: var(--nv-f-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .nvx-listend { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .nvx-chevron { display: inline-flex; color: var(--nv-fantasma); line-height: 0; transition: transform var(--nv-dur) var(--nv-ease); flex-shrink: 0; } .nvx-listrow[aria-expanded="true"] .nvx-chevron { transform: rotate(180deg); color: var(--nv-savia); } /* ---- el chip de estado ---- Mismos valores que `.nvx-feed .nvx-chip` de `nvx-pecuario-alimento.css`: esa hoja llego antes con el mismo artefacto y su regla, al ser mas especifica, sigue ganando dentro de `.nvx-feed`. No se toca. */ .nvx-chip { display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px/1 var(--nv-f-body); color: var(--nv-tenue); background: var(--nv-suelo); border: 1px solid var(--nv-linea-fuerte); border-radius: var(--nv-r-pill); padding: 5px 9px; white-space: nowrap; } .nvx-chip.ok { color: var(--nv-savia); } .nvx-chip.mid { color: var(--nv-dorado); } .nvx-chip.high { color: var(--nv-critico); } /* `.off` NO esta en el artefacto: lo pide el dato real de Ganado, que tiene cuatro estados y dos de ellos (desierta, cancelada) son «esto ya no esta vivo». `app.css` ya los pintaba con `--nv-fantasma` en `.nv-sb-est-desierta`; se conserva ese criterio para no tener dos apagados distintos. */ .nvx-chip.off { color: var(--nv-fantasma); } /* ══ ESTADO 2 · EXPANDIDA ════════════════════════════════════════════════ `grid-template-rows: 0fr -> 1fr` es la unica forma de animar «hasta el alto que tenga el contenido» sin medirlo en JS. `visibility` va atada al mismo interruptor —y no solo el alto— porque una caja de 0 px de alto SIGUE siendo navegable con el tabulador y la sigue leyendo un lector de pantalla: sin esto, el teclado se mete en un detalle que el ojo no ve. El `transition` de `visibility` a 0s CON RETRASO al cerrar deja que la animacion termine antes de esconderlo; al abrir no hay retraso. */ .nvx-detailwrap { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--nv-dur) var(--nv-ease), visibility 0s linear var(--nv-dur); } .nvx-item.is-open > .nvx-detailwrap { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--nv-dur) var(--nv-ease), visibility 0s; } .nvx-detailinner { overflow: hidden; min-height: 0; } .nvx-detail { min-width: 0; border-top: 1px solid var(--nv-linea); } /* La foto la sigue pintando `NVTarjeta.media()` (`.nv-foto`), que es la pieza honesta: descarta la foto de stock repetida y pinta «Sin foto» cuando no hay. Aqui solo se le pone la linea de abajo para que no flote contra la ficha. */ .nvx-detail .nv-foto { border-bottom: 1px solid var(--nv-linea); } .nvx-dhead { padding: 15px 16px 12px; } .nvx-dtitle { font-family: var(--nv-f-display); font-weight: 700; font-size: 16.5px; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; } .nvx-dmeta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .nvx-dprice { font-family: var(--nv-f-mono); font-weight: 700; color: var(--nv-savia); font-size: clamp(15px, 4.4vw, 19px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; } .nvx-dprice small { font-family: var(--nv-f-body); font-weight: 600; font-size: 11.5px; color: var(--nv-tenue); margin-left: 3px; } /* La coletilla larga va DEBAJO del numero, no pegada a su derecha. Medido en el preview con el dato de Ganado: «$12.400 – $13.900» + «por kilo que TE LLEGA» en el mismo renglon partia la frase en «…que TE / LLEGA» y empujaba el chip a una tercera linea. Y esa coletilla no es una unidad, es LA frase que explica por que este numero no es el precio del aviso: partida a la mitad no explica nada. */ .nvx-dprice small.nvx-dnota { display: block; margin: 3px 0 0; } /* La grilla de datos: `minmax(0,1fr)` y no `1fr` — un valor largo sin espacios («Silvania, Cundinamarca») desborda la columna con `1fr` a secas. */ .nvx-dgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding: 13px 16px; border-top: 1px solid var(--nv-linea); } .nvx-dkv { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nvx-dkv span { font-size: 10.5px; color: var(--nv-tenue); text-transform: uppercase; letter-spacing: .04em; } .nvx-dkv b { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; } /* Texto corrido: aqui es donde caen las nueve pastillas sueltas de Industria («Factura · RUT · Buenas Practicas Agricolas · …»). Leerlas en una frase cuesta menos que nueve cajas peleando por el ancho. */ .nvx-ddesc { padding: 0 16px 13px; margin: 0; font-size: 12.5px; color: var(--nv-tenue); line-height: 1.5; overflow-wrap: anywhere; } .nvx-ddesc:empty { display: none; } /* Bloques que ya tienen su propio estilo (merma, flete, la subasta desierta) y solo necesitan el relleno de la ficha. */ .nvx-dextra { padding: 0 16px 13px; } /* Columna con aire: en «Mis lotes» el pie lleva DOS botones (cerrar y cancelar) mas el hueco de mensajes. Sin `gap` salen pegados uno contra otro — es exactamente el «se ve apeñuscado» que ya se reporto una vez en esta pantalla. */ .nvx-dfoot { padding: 13px 16px 16px; display: flex; flex-direction: column; gap: 8px; } .nvx-cta { width: 100%; font: 700 13px/1 var(--nv-f-body); color: #04140E; background: var(--nv-savia); border: none; border-radius: var(--nv-r-sm); padding: 12px; cursor: pointer; text-align: center; transition: var(--nv-dur-fast); } .nvx-cta:hover { background: var(--nv-savia-hi); } .nvx-cta:disabled { opacity: .5; cursor: not-allowed; } /* ══════════════════════════════════════════════════════════════════════════ `.nvx-grid` / `.nvx-card` — LA OTRA MITAD DEL MISMO ARTEFACTO: LA TARJETA SUELTA DE REJILLA, CON FOTO. (OLEADA 2 · Marketplace, 2026-08-22) ══════════════════════════════════════════════════════════════════════════ MISMO artefacto aprobado, otra pieza. El de arriba (`.nvx-item`/`.nvx-listrow`) es la FILA QUE SE DESPLIEGA de una lista de texto. Este es la tarjeta suelta de la seccion «Las 28 familias» del artefacto, que es la que lleva `.nvx-media` arriba y la regla de siempre: TITULO SOLO EN SU FRANJA, meta debajo (`.nvx-metarow`). El propio artefacto lo dice con todas las letras: «Las 28 familias de abajo usan la MISMA idea de "titulo arriba, meta debajo" en su version compacta de tarjeta suelta». ─── POR QUE MARKETPLACE NO LLEVA `.nvx-listrow` ─────────────────────────── 1. EL MARKETPLACE ES LA PANTALLA DE REFERENCIA, no una a corregir. El encargo que creo `tarjeta.js` fue, literal: «en el mercado Industria y ganado, es importante que se vean COMO SI FUERA EL MARKETPLACE: como tarjetas con imagenes». Convertir el marketplace en una lista de texto seria borrar el modelo al que se acaba de parecer las otras dos. 2. `.nvx-listrow` obliga a `.nvx-list`, que es UNA columna (abrir un acordeon en una rejilla estira a sus vecinas de fila). Medido en produccion: 20 publicaciones. En una columna, la plaza pasa de una pantalla a cinco. 3. La miniatura de `.nvx-listrow` es 46x46 con un ICONO, no la foto. 8 de las 20 publicaciones vivas traen foto propia; esconderlas en un cuadradito de 46 px tira lo unico que hace que una plaza se lea de un vistazo. ─── POR QUE NO LLEVA ACORDEON (`.nvx-toggle` / `.nvx-detailwrap`) ───────── Porque el detalle YA EXISTE y no es este: tocar la tarjeta abre `NutriversoDetalle.abrir(l, {propia:false})` — fotos, descripcion, fechas y el hilo con la otra parte. Un acordeon aqui seria un SEGUNDO detalle, mas pobre, del mismo objeto: dos sitios contando lo mismo, que es como se consigue que uno de los dos mienta. Y hay un motivo de uso, no solo de arquitectura: hoy la tarjeta ENTERA es el boton. Meterle un chevron dejaria dos blancos a 8 px uno del otro que contestan cosas distintas a la misma pregunta («enseñame esto»). El acordeon del artefacto es para las familias que NO tienen pantalla de detalle (un lote, una alerta, un curso). Esta si la tiene. ─── POR QUE VA TODO BAJO `.nvx-grid` Y NO SUELTO ────────────────────────── `nvx-pecuario-alimento.css` YA usa estos nombres (`.nvx-card`, `.nvx-head`, `.nvx-title`, `.nvx-metarow`, `.nvx-sub`, `.nvx-stat`) y `livestock.js` los pinta — siempre dentro de `.nvx-feed`, y esa hoja los escribe TODOS scoped. Si estas reglas fueran sueltas, cada propiedad que aquella hoja no declare (el recorte a dos lineas del titulo, por ejemplo) se le colaria a las tarjetas de alimentacion por cascada. Scoped a `.nvx-grid` no hay cruce posible, y es el mismo contrato que ya tiene `.nvx-list` con `.nvx-item`. ─── LAS TRES DESVIACIONES DEL ARTEFACTO, Y SU MOTIVO ────────────────────── 1. `.nvx-title` va RECORTADO A DOS LINEAS. En el artefacto los titulos son de galeria («Lote El Roble»); los REALES de esta pantalla llegan a 67 caracteres («Comercializadora exporta aguacate Hass, 12 toneladas semanales DEMO»), que en una columna de 250 px son cuatro renglones y una rejilla que baila. Es la misma leccion de `.nvx-listtitle` (ahi, una linea), con el limite que aguanta una tarjeta en vez de una fila. El titulo entero se lee al tocar, en `NutriversoDetalle`. 2. `.nvx-stat` NO lleva color de acento: hereda `--nv-texto`, que es lo que hace el artefacto (su unico `.nvx-stat` coloreado es una METRICA —el NDVI «0.472»—; el que lleva dinero, «$45.000», va en color de texto). SE PROBO PRIMERO EN `--nv-savia`, por parecerse a `.nvx-listprice` y `.nvx-dprice` de la oleada 1, y se descarto MIDIENDO: `#2FA98C` sobre `--nv-superficie` en modo oscuro da 2,93:1 — el precio que hay hoy (`--nv-cosecha`, `#B7CC00`) da 9,65:1. Habria sido cambiar un numero legible por uno que no llega ni a AA grande, en nombre de la coherencia. El color de texto da 15,7:1 en claro y sigue separandose del resto por lo que ya lo separaba: mono, negrita y cifras tabulares. 3. NO se escribe `:hover` para `.nvx-card`. La tarjeta del marketplace ya tiene el suyo (`.nv-mk-card:hover` levanta, `.nv-mk-click:hover` pinta el borde en savia porque la tarjeta entera es un boton) y no era lo que estaba mal. Una regla mia aqui solo serviria para ganarle por especificidad a un hover que si funciona. ────────────────────────────────────────────────────────────────────────── */ /* El contenedor. Los valores son los del artefacto: `clamp(210px,36vw,250px)` arranca en 210 en un telefono de 360 —igual que la rejilla que habia— y en pantalla ancha para en 250 en vez de seguir metiendo columnas de 210, que es lo que dejaba los titulos reales en tres y cuatro renglones. */ .nvx-grid { display: grid; gap: clamp(10px, 2vw, 16px); grid-template-columns: repeat(auto-fill, minmax(clamp(210px, 36vw, 250px), 1fr)); } /* `flex` en columna para que el pie de acciones se pegue abajo: en una fila de la rejilla las tarjetas se estiran a la mas alta, y sin esto los botones quedan flotando a media altura, cada uno a la suya. */ .nvx-grid .nvx-card { background: var(--nv-superficie); border: 1px solid var(--nv-linea); border-radius: var(--nv-r-md); box-shadow: var(--nv-sh-1); overflow: hidden; display: flex; flex-direction: column; min-width: 0; } /* La foto la pinta `NVTarjeta.media()` (`.nv-foto`), la misma pieza honesta que usan Industria y Ganado. Aqui solo se le pone la linea de abajo. */ .nvx-grid .nvx-card > .nv-foto { border-bottom: 1px solid var(--nv-linea); } .nvx-grid .nvx-head { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; } .nvx-grid .nvx-title { font-family: var(--nv-f-display); font-weight: 700; font-size: 13.5px; line-height: 1.28; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .nvx-grid .nvx-metarow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-width: 0; } .nvx-grid .nvx-sub { font-size: 11px; color: var(--nv-tenue); min-width: 0; } .nvx-grid .nvx-stat { font-family: var(--nv-f-mono); font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; } .nvx-grid .nvx-stat small { font-family: var(--nv-f-body); font-weight: 600; font-size: 10.5px; color: var(--nv-tenue); margin-left: 2px; } /* El pie de acciones. `margin-top: auto` es lo que lo pega abajo; el relleno se lo pone aqui porque el nodo vive FUERA de `.nvx-head` (si entrara dentro, los botones heredarian el `gap` de la cabecera y se pegarian al dato de arriba, que es el «se ve apeñuscado» que ya costo una vuelta en `.nvx-dfoot`). */ .nvx-grid .nvx-card > .nv-mk-act { margin-top: auto; padding: 0 14px 14px; } /* El chip de DEMANDA. No se usa `.mid` (dorado): en toda esta app el dorado significa «falta un dato / atencion» (`.nv-in-falta-t`, el «Sin perfil» de Industria), y que alguien COMPRE en vez de vender no es un aviso, es la otra mitad de la plaza — medido hoy: 10 de 20. `--nv-cosecha` es el color con el que la casa YA distingue una demanda (`.nv-mk-ichip.is-demanda`, en la ficha de prospeccion); se reusa ese criterio en vez de inventar un segundo. */ .nvx-chip.dem { color: var(--nv-cosecha); } /* ══════════════════════════════════════════════════════════════════════════ OLEADA 3 DEL PATRON `.nvx-*` — Academia, Biofabrica, Biogas, Cultivo y Deal Rooms. (2026-08-22) ══════════════════════════════════════════════════════════════════════════ NO HAY NI UNA REGLA NUEVA DE DISEÑO AQUI. Todo lo de abajo es el mismo trabajo de siempre: las cinco pantallas traian clases propias —de cuando cada tarjeta se pintaba a mano— que siguen puestas en el MISMO nodo que `.nvx-item`/`.nvx-card`, y algunas de ellas declaran `padding`, `gap` o `margin` que el patron no declara y que por lo tanto SOBREVIVEN a la cascada. Un `padding: 13px` heredado en la caja de fuera deja la foto sin sangrar y el detalle flotando; un `margin-bottom: 8px` se suma al `gap` de `.nvx-list` y descuadra la columna entera. POR QUE NO SE BORRAN ESAS CLASES DE LOS MODULOS Y YA: porque varias llevan informacion que el patron no tiene —la franja de severidad de una alerta, el borde rojo del filtro de H2S, el borde punteado de la mejora propuesta— y porque el `@media` de una columna en telefono vive en ellas. Se conservan y se les apaga SOLO lo que estorba, que es una linea por caso. ────────────────────────────────────────────────────────────────────────── */ /* ---- Academia: la tarjeta de curso y la de lectura entran en `.nvx-grid` ---- El pie va en COLUMNA y no en fila: antes era `justify-content: space-between` porque compartia renglon con el precio, y el precio ya no vive ahi — subio a `.nvx-metarow`, que es la regla del artefacto (titulo solo en su franja, la meta debajo). Lo que queda en el pie es el boton y el hueco de errores de `botonCurso()`, y esos dos se leen uno encima del otro. */ .nvx-grid .nvx-card > .nv-ac-cfoot { margin-top: auto; padding: 0 14px 14px; flex-direction: column; align-items: stretch; } /* `.nv-ac-cmeta` traia `margin: 6px 0` de cuando era el unico separador dentro del cuerpo. Dentro de `.nvx-head`, que ya tiene `gap: 7px`, eso son 13 px. */ .nvx-grid .nvx-head > .nv-ac-cmeta { margin: 0; } /* ---- Biofabrica: la foto de banco pasa de miniatura lateral a banda ---- `.nv-bf-card` era una fila (`display:flex; gap:12px; padding:13px`) con la foto de 84x84 a la izquierda. `.nvx-card` la vuelve columna, pero el relleno y el hueco NO los declara el patron y se quedarian puestos: la banda de foto saldria con 13 px de margen por dentro, que es justo lo que hace que una tarjeta con imagen se vea pegada. */ .nvx-grid .nv-bf-card { padding: 0; gap: 0; } .nvx-grid .nvx-card > .nv-bf-media { width: 100%; border-radius: 0; border-bottom: 1px solid var(--nv-linea); } /* 132 px es la altura de `.nv-foto`, la banda que usan Marketplace, Industria y Ganado. Se copia el numero para que las cinco pantallas tengan la foto del mismo alto y las rejillas no bailen al pasar de una a otra. */ .nvx-grid .nvx-card > .nv-bf-media img { width: 100%; height: 132px; } .nvx-grid .nvx-card > .nv-bf-cfoot { margin-top: auto; padding: 0 14px 14px; } /* ---- Cultivo: la alerta se despliega, y su severidad sigue viendose ---- La franja izquierda de 3 px es el unico sitio donde el nivel se lee sin mirar el chip, y `.nvx-item` la borra sin querer: su `border: 1px solid` es una propiedad ABREVIADA, o sea que reescribe `border-left` entero. Se vuelve a poner aqui, ya dentro del patron. El `padding` de `.nv-cr-alert` si se apaga: el relleno lo pone la fila (`.nvx-listrow`), y uno en la caja de fuera dejaria el detalle flotando dentro de un marco. */ .nvx-item.nv-cr-alert { padding: 0; border-left-width: 3px; border-left-color: var(--nv-tenue); } .nvx-item.nv-cr-alert.lvl-alta { border-left-color: var(--nv-critico); } .nvx-item.nv-cr-alert.lvl-media { border-left-color: var(--nv-dorado); } .nvx-item.nv-cr-alert.lvl-ok { border-left-color: var(--nv-savia-hi); } /* CAZADO AL MIRAR LA PANTALLA MONTADA EN EL NAVEGADOR, no leyendo el codigo, y no es de la tarjeta: es la de al lado. `.nv-cr-phenometa` reparte sus dos hijos con `justify-content: space-between` y SIN `gap`, asi que con el dato real de produccion —«Cultivo perenne: 3 año(s) y 2 mes(es) desde la siembra.», que ocupa dos renglones— el rotulo y la nota se quedan pegados y se lee «FenologiaCultivo perenne…». Una declaracion. */ .nv-cr-phenometa { gap: 10px; } /* ---- Deal Rooms: el prestador se despliega ---- Mismo caso: `.nv-dl-prov` era una fila con su propio relleno y su propio `margin-bottom: 8px`. El margen se apaga porque la separacion ya la pone el `gap` de `.nvx-list`; sumados daban 18 px entre prestadores y 10 entre categorias, o sea la jerarquia al reves. */ .nvx-item.nv-dl-prov { padding: 0; gap: 0; margin-bottom: 0; } /* La columna de prestadores va DENTRO de la caja de servicios, que ya tiene su relleno: solo hace falta separarla del rotulo de su categoria. */ .nv-dl-provs { margin: 8px 0 12px; } /* ---- Biogas: cada seccion del informe es una fila que se despliega ---- El contenido de las secciones son los mismos `.nv-bg-p`, `.nv-bg-fila` y `.nv-bg-cifras` de siempre, que no traen relleno propio porque antes vivian dentro de un `.nv-bg-card` con `padding: 14px`. Ahora viven en `.nvx-dextra`, que pone el relleno de los lados y el de abajo pero no el de arriba —en Industria y Ganado ese bloque va precedido de la cabecera de la ficha, y aqui es lo primero que hay debajo de la linea. */ .nv-bg .nvx-detail > .nvx-dextra { padding-top: 13px; } /* 🔴 EL BORDE ROJO DEL FILTRO DE H2S Y EL AMBAR DE «LO QUE NO SE SABE», QUE SE PERDIAN. Los pone el propio modulo (`.nv-bg-h2s`, `.nv-bg-sin`), y esas dos reglas son de UNA clase; `.nvx-item.is-open` son DOS, asi que le gana por especificidad aunque la hoja del modulo se inyecte despues. Y como estas dos secciones arrancan ABIERTAS —que es justo lo que exigen las reglas 2 y 4 de la cabecera de `biogas.js`—, el borde que se veia siempre era el verde de «abierta»: el filtro de H2S, que es el aviso de corrosion, salia sin su marca. CAZADO MIDIENDO CON `getComputedStyle` EN EL NAVEGADOR, no leyendo. Se usan `--nv-critico` y `--nv-dorado` y no los respaldos que escribe el modulo (`#e8695b`, `#e8b84b`): son los mismos colores con los que `.nvx-chip` pinta «alto» y «atencion» tres reglas mas arriba, y dos rojos parecidos en la misma pantalla se leen como dos cosas distintas. */ .nvx-item.nv-bg-h2s, .nvx-item.nv-bg-h2s.is-open { border-color: var(--nv-critico); } .nvx-item.nv-bg-sin, .nvx-item.nv-bg-sin.is-open { border-color: var(--nv-dorado); } /* La miniatura de la fila. Mismo trato que `.nv-cri`/`.nv-ibi` en las otras pantallas: el `` que envuelve el SVG tiene que ser una caja flex o el icono no se centra en los 46 px. */ .nvx-thumb-ic { display: inline-flex; align-items: center; justify-content: center; } /* El veredicto se queda en su tarjeta, arriba y solo — es LA respuesta, no una seccion del informe. Esto es lo unico que lo separa de la lista. */ .nv-bg-secciones { margin-top: 14px; } /* ══════════════════════════════════════════════════════════════════════════ OLEADA 4 DEL PATRON `.nvx-*` — Comando del Fundador, Fincas, Conocimiento, Biblioteca, Licitaciones y las tres pantallas de Mercado. (2026-08-22) ══════════════════════════════════════════════════════════════════════════ COMO EN LA OLEADA 3: NO HAY NI UNA REGLA NUEVA DE DISEÑO AQUI. Todo lo de abajo apaga lo que SOBREVIVE a la cascada: cada una de estas pantallas traia clases propias —de cuando la tarjeta se pintaba a mano— que siguen puestas en el MISMO nodo que `.nvx-item`/`.nvx-card` y que declaran `padding`, `gap` o `margin` que el patron no declara. Un `padding` heredado en la caja de fuera deja el detalle flotando dentro de un marco; un `margin-bottom` se suma al `gap` de `.nvx-list` y descuadra la columna entera. ─── LA ESPECIFICIDAD, QUE AQUI DECIDE MAS QUE EL ORDEN ──────────────────── `licitaciones.css` se enlaza DESPUES de `app.css` en `web/app/index.html`, asi que `.nv-lic-card` —una clase— le ganaba a `.nvx-item` —una clase— por orden de hoja. Por eso sus reglas van escritas con DOS clases (`.nvx-item.nv-lic-card`): dos le ganan a una venga la hoja donde venga. Es la misma leccion que la oleada 3 pago con el borde rojo del filtro de H2S en Biogas, y la unica forma de que esto no dependa del orden de los ``. ─── LO QUE ESTA OLEADA MIDIO Y NO SE ARREGLA AQUI ───────────────────────── `.nv-mk-conf-alta`, `.nv-mk-conf-media`, `.nv-mk-conf-baja`, `.nv-mk-prio-1/2/3` y `.nv-mk-fuera` NO EXISTEN en ninguna hoja: cero reglas. Medido con `getComputedStyle` en produccion, las tres confianzas de la ficha de prospeccion daban EXACTAMENTE el mismo color, sin fondo y sin borde. No se arregla escribiendo tres colores nuevos —seria un cuarto juego para la misma escala—: `market_prospect.js` pasa a usar `.nvx-chip.ok/.mid/.high`, que ya estan medidos. Estas clases se quedan escritas en el nodo por si alguien las quiere estilar algun dia, pero HOY no pintan nada y conviene saberlo. ────────────────────────────────────────────────────────────────────────── */ /* ---- Comando del Fundador: las tres colas se despliegan ---- `.nv-fd-card` traia `padding: 15px` y `margin-bottom: 12px` de cuando era una tarjeta muerta. Escrito con DOS clases a proposito: la MISMA `.nv-fd-card` se sigue usando —bien usada— como caja del parrafo que escribe el modelo en la pestaña de auditoria, y esa SI tiene que conservar su relleno. */ .nvx-item.nv-fd-card { padding: 0; margin-bottom: 0; } /* ---- Fincas: la rejilla de expedientes ---- El `padding` y el `margin-top` de `.nv-fn-item` se apagan en el propio modulo (`modules/fincas.js`, que inyecta su hoja), no aqui: esa hoja es suya y tiene dueño. Lo unico que hace falta desde `app.css` es que la tarjeta siga alineando su texto a la izquierda dentro de `.nvx-card` — es un `