/* ============================================================================ NOVA · SISTEMA VISUAL — v2.1 (14/09/2026: cuadrito NS legible en las dos superficies) Identidad: Azul Acero (estructura) + Rojo Vino (firma y accion). ESTE ARCHIVO ES LA FUENTE UNICA. Antes lo decia y no era cierto: de las 14 pantallas del sistema, UNA sola lo cargaba (contacto.html). Las demas llevaban su propia paleta adentro y habia CINCO lenguajes distintos: Buscadores y catalogos ... su CSS propio (v3) Portales y portada ....... hexadecimales sueltos: morado #7c3aed, verde azulado #0d9488, ambar #b45309 Seguimiento .............. su tercera paleta: #243541 #D65C7C #E0A63C Pantalla de ofertas ...... la variante oscura, bien hecha contacto.html ............ este archivo Ahora todas beben de aqui. Las paginas estaticas lo enlazan; gen_html.py lo LEE Y LO INCRUSTA al generar, para que el buscador siga funcionando aunque el archivo falte — es la herramienta con la que se atiende al cliente y no puede depender de que un .css cargue. DOS SUPERFICIES, UN SOLO LENGUAJE --------------------------------- CLARA (por defecto): herramientas de trabajo. Buscadores, cotizacion, pedidos, taller. Se usan de cerca, muchas horas, con luz de tienda. OSCURA (.nv-oscuro): pantallas que se miran de lejos y menus de entrada. La pantalla de ofertas de la tienda y los portales de sede. Sobre negro el vino #8A2740 se apaga, por eso la superficie oscura usa el vino vivo #C8506E — el mismo criterio que ya tenia la pantalla de ofertas, que es la pieza mejor resuelta del sistema y de donde sale esta variante. ============================================================================ */ /* ---- Fuentes: cargar en el de cada pagina ---- El respaldo NO es "system-ui" a secas: el servidor y las cajas son Windows, y ahi system-ui resuelve a Segoe UI, pero en otras maquinas puede caer en una serif y la interfaz entera cambia de cara. Se nombra explicito. */ :root{ /* ---- ACERO: estructura y autoridad ---- */ --steel-900:#14212C; /* tinta principal */ --steel-800:#0B141C; /* base de la superficie oscura */ --steel-700:#1E3A52; /* cabeceras, nav */ --steel-600:#26455F; /* elevado sobre el 700 */ --steel-500:#35617F; /* enlaces, foco */ --steel-100:#E9EEF3; /* fondos de mosaico, chips */ /* ---- VINO: firma, accion, descuento ---- */ --wine-800:#6E1E33; --wine-700:#8A2740; /* sobre claro */ --wine-500:#C8506E; /* sobre oscuro: el 700 se apaga en negro */ --wine-50:#F7E9ED; /* ---- Superficies ---- */ --paper:#FFFFFF; --card:#FFFFFF; --bg:#F3F6F9; --surface:#F3F6F9; --surface-2:#E9EEF3; --surface-quiet:#EDF1F5; --line:#DFE5EC; --line-2:#C6D0DA; --border:#DFE5EC; --border-strong:#C6D0DA; --text:#14212C; --tx:#14212C; --text-muted:#54606C; /* 5.6:1 sobre blanco */ --muted:#54606C; /* ---- Semanticos: NO son marca. Solo dicen un hecho ---- */ --ok-t:#0A6B44; --ok-b:#E4F5EC; /* hay stock */ --no-t:#B4232A; --no-b:#FBE9E9; /* agotado */ --ask-t:#8A5A00; --ask-b:#FBF2DC; /* a consultar */ --link:#35617F; --navy:#1E3A52; --green:#0A6B44; --danger:#B4232A; /* nombres heredados */ /* ---- TIPOGRAFIA ---------------------------------------------------- Ocho pasos y ni uno mas. El piso son 12px: por debajo no se lee de pie en el mostrador. Los saltos son grandes a proposito — dos textos que se diferencian en 1px no se diferencian. */ --font-disp:"Archivo","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-body:"DM Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace; --fs-micro:12px; /* etiquetas, codigos, badges */ --fs-small:13px; /* apoyo, filtros */ --fs-base:15px; /* texto de interfaz */ --fs-lg:17px; /* nombre de producto */ --fs-h3:20px; --fs-h2:24px; --fs-price:24px; --fs-display:34px; /* ---- ESPACIO: todo multiplo de 4 ---- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; /* ---- FORMA: tres radios, no ocho ---- */ --r-ctl:8px; /* controles */ --r-card:12px; /* tarjetas, modales */ --r-pill:999px; /* solo chips */ --radius:8px; --radius-card:12px; --radius-pill:999px; /* heredados */ /* ---- ALTURA MINIMA DE LO QUE SE TOCA ---- */ --tap:40px; /* ---- ELEVACION: desplazamiento + difuminado. Nunca un halo de color ---- */ --sh1:0 1px 2px rgba(20,33,44,.06); --sh2:0 6px 18px rgba(20,33,44,.10); --sh3:0 18px 40px rgba(20,33,44,.16); --shadow-sm:var(--sh1); --shadow-md:var(--sh2); --shadow-lg:var(--sh3); /* ---- MOVIMIENTO ---------------------------------------------------- Las curvas propias de CSS son debiles. Estas son las de la pantalla de ofertas, que ya estaban bien elegidas. NUNCA ease-in en interfaz: hace que todo arranque dormido. */ --e-out:cubic-bezier(.23,1,.32,1); --e-in-out:cubic-bezier(.77,0,.175,1); --t-tap:120ms; /* respuesta al toque */ --t-in:200ms; /* algo entra */ --t-out:140ms; /* algo sale: mas rapido que al entrar */ } /* ============================================================================ SUPERFICIE OSCURA Se activa poniendo la clase en . Redefine SOLO lo que cambia; el resto del sistema sigue igual, que es justamente la idea de tener tokens. ============================================================================ */ .nv-oscuro{ --paper:#101C26; --card:#101C26; --bg:#0B141C; --surface:#0B141C; --surface-2:#16242F; --surface-quiet:#16242F; --line:#22333F; --line-2:#2E4352; --text:#F2F5F7; --tx:#F2F5F7; --text-muted:#B6C6D3; /* 8.9:1 sobre #0B141C */ --muted:#B6C6D3; --wine-700:var(--wine-500); --link:#8FC0E0; --sh1:0 1px 2px rgba(0,0,0,.35); --sh2:0 8px 24px rgba(0,0,0,.45); --sh3:0 20px 48px rgba(0,0,0,.55); } /* ============================ BASE ============================ */ body{font-family:var(--font-body);color:var(--text);background:var(--bg); line-height:1.55;font-size:var(--fs-base);-webkit-font-smoothing:antialiased} h1,h2,h3,h4,.disp{font-family:var(--font-disp);letter-spacing:-.02em;margin:0;text-wrap:balance} h1{font-size:var(--fs-display);line-height:1.12;font-weight:800} h2{font-size:var(--fs-h2);line-height:1.16;font-weight:800} h3{font-size:var(--fs-h3);line-height:1.25;font-weight:700} .mono{font-family:var(--font-mono)} a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline} /* Nada por debajo de 12px en ningun control ni texto de datos. */ body,td,th,input,select,textarea,button,label,li,p{font-size:max(var(--fs-small),12px)} /* Numeros que se comparan en columna: cifras del mismo ancho. */ td,th,.precio,.total,.num,.cant,[class*="precio"],[class*="total"],[class*="monto"]{ font-variant-numeric:tabular-nums} /* El foco del teclado se ve SIEMPRE. Quien atiende rapido tabula. */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--steel-500);outline-offset:2px;border-radius:6px} /* ============================ BOTONES ============================ */ .nv-btn{font-family:var(--font-body);font-weight:700;font-size:var(--fs-base);border:0; border-radius:var(--r-ctl);min-height:var(--tap);padding:0 var(--sp-5);cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); transition:background var(--t-tap) var(--e-out),transform var(--t-tap) var(--e-out), box-shadow var(--t-tap) var(--e-out)} .nv-btn:active{transform:scale(.97)} .nv-btn--steel{background:var(--steel-700);color:#fff} .nv-btn--cta{background:var(--wine-700);color:#fff} .nv-btn--ghost{background:transparent;color:var(--text);border:1.5px solid var(--line-2)} @media (hover:hover) and (pointer:fine){ .nv-btn--steel:hover{background:var(--steel-600);box-shadow:var(--sh2)} .nv-btn--cta:hover{background:var(--wine-800);box-shadow:var(--sh2)} .nv-btn--ghost:hover{border-color:var(--steel-500);background:var(--surface)} } /* ============================ TARJETA ============================ */ .nv-card{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh2); overflow:hidden;display:flex;flex-direction:column; transition:transform var(--t-tap) var(--e-out),box-shadow var(--t-tap) var(--e-out)} @media (hover:hover) and (pointer:fine){ .nv-card:hover{transform:translateY(-4px);box-shadow:var(--sh3)} } /* ============================ ETIQUETAS ============================ */ .nv-badge{font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:700; padding:3px 9px;border-radius:6px;letter-spacing:.02em;display:inline-block} .nv-badge--ok{background:var(--ok-b);color:var(--ok-t)} .nv-badge--no{background:var(--no-b);color:var(--no-t)} .nv-badge--ask{background:var(--ask-b);color:var(--ask-t)} .nv-badge--disc{background:var(--wine-700);color:#fff} .nv-chip{font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:500; letter-spacing:.06em;padding:0 var(--sp-4);min-height:var(--tap); display:inline-flex;align-items:center;border-radius:var(--r-pill); border:1.5px solid var(--line-2);color:var(--text-muted);background:transparent;cursor:pointer} .nv-chip.is-on{background:var(--wine-700);color:#fff;border-color:var(--wine-700);font-weight:700} /* ============================ CAMPOS ============================ */ .nv-field label{display:block;font-size:var(--fs-small);font-weight:700;margin-bottom:var(--sp-1)} .nv-field input,.nv-field select{width:100%;min-height:var(--tap);padding:0 var(--sp-4); border:1.5px solid var(--line-2);border-radius:var(--r-ctl);font-family:var(--font-body); font-size:var(--fs-base);color:var(--text);background:var(--paper);outline:none; transition:border-color var(--t-tap) var(--e-out),box-shadow var(--t-tap) var(--e-out)} .nv-field input:focus,.nv-field select:focus{border-color:var(--steel-500); box-shadow:0 0 0 3px rgba(53,97,127,.28)} /* ============================ PRECIO ============================ */ .nv-price{font-family:var(--font-disp);font-weight:800;font-size:var(--fs-price); letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums} .nv-price s{font-family:var(--font-mono);font-size:var(--fs-small);font-weight:500; color:var(--text-muted);margin-left:var(--sp-1)} /* ============================================================================ LANZADOR — la portada de sedes y los portales Son la primera pantalla que alguien ve cada dia. Antes cada sede tenia un color inventado (morado, verde azulado, ambar) y eso no significaba nada: Lima no es azul y Huaraz no es naranja. La sede se distingue por su NOMBRE, que es lo que la persona esta leyendo. El color queda para lo que si significa algo: vino = la que estas mirando. ============================================================================ */ .nv-lanzador{min-height:100vh;display:flex;flex-direction:column;align-items:center; justify-content:center;padding:var(--sp-5);gap:var(--sp-5);text-align:center} .nv-lanzador__marca{display:flex;align-items:center;gap:var(--sp-3); font-family:var(--font-disp);font-weight:800;font-size:var(--fs-h2);letter-spacing:-.02em} /* El cuadrito NS: sobre claro va el vino 700 (8:1). El 500 daba 4.35:1 con la letra blanca. */ .nv-lanzador__logo{background:var(--wine-700);color:#fff;border-radius:var(--r-ctl); width:42px;height:42px;display:flex;align-items:center;justify-content:center; font-weight:900;font-size:var(--fs-base)} .nv-lanzador__sub{color:var(--text-muted);font-size:var(--fs-small);max-width:52ch} .nv-lanzador__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--sp-3);width:100%;max-width:760px} .nv-mosaico{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--sp-1);min-height:104px;padding:var(--sp-4);border-radius:var(--r-card); background:var(--paper);border:1.5px solid var(--line);color:var(--text); text-decoration:none;font-family:var(--font-disp);font-weight:800;font-size:var(--fs-lg); letter-spacing:-.01em;box-shadow:var(--sh1);text-wrap:balance; transition:transform var(--t-tap) var(--e-out),border-color var(--t-tap) var(--e-out), box-shadow var(--t-tap) var(--e-out)} .nv-mosaico:hover{text-decoration:none} .nv-mosaico .ico{font-size:26px;line-height:1;margin-bottom:var(--sp-1)} /* La descripcion reserva dos renglones aunque use uno. Sin esto, en una fila de mosaicos de igual alto los titulos quedan a distinta altura segun cuantas lineas ocupe su descripcion, y la fila se ve torcida. */ .nv-mosaico small{display:block;font-family:var(--font-body);font-weight:400; font-size:var(--fs-micro);color:var(--text-muted);margin-top:var(--sp-1); line-height:1.4;max-width:26ch;min-height:2.8em;text-wrap:balance} .nv-mosaico:active{transform:scale(.98)} @media (hover:hover) and (pointer:fine){ .nv-mosaico:hover{transform:translateY(-3px);border-color:var(--wine-500);box-shadow:var(--sh2)} } /* La sede en la que estas parado. Es la unica que lleva color. */ .nv-mosaico--aqui{border-color:var(--wine-500);box-shadow:inset 0 0 0 1px var(--wine-500),var(--sh1)} /* Sobre oscuro el 700 se vuelve 500 (4.35:1): el cuadrito usa un vino intermedio que si llega a 5.7:1. */ .nv-oscuro .nv-lanzador__logo{background:#B23A5A} .nv-lanzador__pie{color:var(--text-muted);font-size:var(--fs-micro); max-width:56ch;text-wrap:balance} .nv-lanzador__volver{color:var(--text-muted);font-size:var(--fs-small)} /* ============================================================================ MENOS MOVIMIENTO SI EL SISTEMA LO PIDE Menos y mas suave, no cero. ============================================================================ */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} .nv-card:hover,.nv-mosaico:hover{transform:none} }