/* ============================================================================ TUXANI — El asistente que ve la pantalla (hito 24). Clases `nv-as-*`. ─── POR QUE UN ARCHIVO NUEVO Y NO `app.css` ──────────────────────────────── `app.css` lo tocan varios hilos a la vez y son 2.000+ lineas. Este archivo es aditivo, es nuevo y no lo comparte nadie — mismo criterio que `i18n/asistente.js`. ─── Y POR QUE ESTE ARCHIVO EXISTE, QUE ES LA LECCION DEL QA DEL DUENO ────── El 2026-08-02 UN SOLO BUG de dos lineas explico DIEZ de las 32 capturas: el modal de «nueva casa de cultivo» se creaba con las clases `nv-modal` / `nv-modal-box`, QUE NO EXISTIAN EN NINGUNA HOJA DE ESTILO. Sin `position: fixed` no era un overlay sino un bloque colgado del ``, y te seguia a todas partes. **Una clase CSS que no existe NO DA ERROR**: el navegador no avisa, se pinta el div, se ve raro y nadie lo relaciona. Asi que aqui esta escrita CADA clase que usa `modules/asistente.js`, y `verify_asistente_pantalla.mjs` comprueba que no falte ninguna. De paso se definen `nv-as-btn-sm` y `nv-as-btn-danger` con prefijo propio: las genericas `nv-btn-sm` y `nv-btn-danger` que pedia el primer borrador NO EXISTEN en `app.css` — se comprobo con grep antes de escribirlas, no despues. ========================================================================== */ /* La tira vive ENTRE la cabecera y el panel. Nunca `position:fixed`, nunca colgada del : ver la cabecera. */ .nv-as-tira { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px 0; } /* ── El «te estoy mirando». Tiene que NOTARSE sin gritar. ────────────────── */ .nv-as-chip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 10px; border: 1px solid var(--nv-borde, #d8e0d0); border-left: 3px solid var(--nv-ok, #3d8b37); border-radius: 8px; background: var(--nv-fondo2, #fff); font-size: 13px; } .nv-as-chip-tx { color: var(--nv-txt2, #6b7280); } /* El punto que late: es la señal de «esto esta encendido AHORA». */ .nv-as-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--nv-ok, #3d8b37); flex: 0 0 auto; animation: nv-as-late 2.4s ease-in-out infinite; } @keyframes nv-as-late { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* Quien pidio que no se mueva nada, no se mueve nada. */ @media (prefers-reduced-motion: reduce) { .nv-as-punto { animation: none; } } .nv-as-link { background: none; border: 0; padding: 0; color: var(--nv-primario, #3d8b37); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; } .nv-as-link:hover { opacity: .8; } .nv-as-link:focus-visible { outline: 2px solid var(--nv-primario, #3d8b37); outline-offset: 2px; } /* La oferta para quien no lo activo: una linea, y con su X. */ .nv-as-oferta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nv-txt2, #6b7280); } .nv-as-x { background: none; border: 0; cursor: pointer; color: var(--nv-txt2, #6b7280); font-size: 16px; line-height: 1; padding: 0 4px; margin-left: auto; } /* ── El banner proactivo ─────────────────────────────────────────────────── */ .nv-as-banner { border: 1px solid var(--nv-borde, #d8e0d0); border-left: 3px solid var(--nv-alerta, #d98324); border-radius: 10px; background: var(--nv-fondo2, #fff); padding: 12px 14px; } .nv-as-banner-tx strong { display: block; font-size: 13px; color: var(--nv-alerta, #d98324); margin-bottom: 4px; } .nv-as-banner-tx p { margin: 0 0 10px 0; font-size: 14px; line-height: 1.45; } .nv-as-banner-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* Botones propios: las genericas `nv-btn-sm`/`nv-btn-danger` NO existen. */ .nv-as-btn-sm { padding: 6px 12px; font-size: 13px; } .nv-as-btn-danger { background: var(--nv-critico, #ef4444); border-color: var(--nv-critico, #ef4444); color: #fff; } /* La respuesta de la IA, cuando el productor decide preguntar. */ .nv-as-resp { border: 1px solid var(--nv-borde, #d8e0d0); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: var(--nv-fondo2, #fff); } .nv-as-resp-tx { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; } /* ── La tarjeta del permiso ──────────────────────────────────────────────── */ .nv-as-card { max-width: 760px; } .nv-as-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: var(--nv-fondo, #f9fbf2); border: 1px solid var(--nv-borde, #d8e0d0); font-size: 12px; color: var(--nv-txt2, #6b7280); margin-bottom: 10px; } .nv-as-badge .nv-as-punto { background: var(--nv-txt2, #9ca3af); animation: none; } .nv-as-on { border-color: var(--nv-ok, #3d8b37); color: var(--nv-ok, #3d8b37); } .nv-as-on .nv-as-punto { background: var(--nv-ok, #3d8b37); animation: nv-as-late 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .nv-as-on .nv-as-punto { animation: none; } } .nv-as-intro { font-size: 14px; line-height: 1.5; margin: 0 0 8px 0; } .nv-as-gratis { display: inline-block; margin-bottom: 12px; } .nv-as-fecha, .nv-as-nota { font-size: 12px; color: var(--nv-txt2, #6b7280); margin: 4px 0; } .nv-as-ok { font-size: 13px; color: var(--nv-ok, #3d8b37); margin: 6px 0; } .nv-as-h { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--nv-txt2, #6b7280); margin: 16px 0 6px 0; } /* La lista de campos: el campo, de donde sale, y POR QUE. El porque en su propia linea a proposito — es lo que de verdad hay que leer. */ .nv-as-campos { list-style: none; margin: 0; padding: 0; } .nv-as-campos li { padding: 8px 0; border-bottom: 1px solid var(--nv-borde, #eef1e9); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .nv-as-campos li:last-child { border-bottom: 0; } .nv-as-campo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--nv-fondo, #f9fbf2); border: 1px solid var(--nv-borde, #d8e0d0); border-radius: 4px; padding: 1px 6px; } .nv-as-origen { font-size: 11px; color: var(--nv-txt2, #6b7280); font-style: italic; } .nv-as-porque { flex: 1 1 100%; font-size: 13px; line-height: 1.4; } .nv-as-nada, .nv-as-bloq { font-size: 13px; color: var(--nv-txt2, #6b7280); margin: 6px 0; } .nv-as-bloq { color: var(--nv-critico, #ef4444); } .nv-as-todas { margin-top: 10px; } .nv-as-pant { padding: 10px 0; border-top: 1px solid var(--nv-borde, #eef1e9); } .nv-as-pant h6 { margin: 0 0 4px 0; font-size: 13px; } .nv-as-no { margin: 0 0 10px 0; padding-left: 18px; } .nv-as-no li { font-size: 13px; line-height: 1.5; margin-bottom: 6px; } .nv-as-acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } /* Movil: el chip y las acciones no pueden salirse. Es la pantalla en la que de verdad se usa esta app. */ @media (max-width: 560px) { .nv-as-chip, .nv-as-banner-acc, .nv-as-acc { gap: 8px; } .nv-as-card { max-width: 100%; } .nv-as-campos li { gap: 6px; } }