/* ============================================================================ TUXANI — Design System / Tokens (Fase 0) "Agro cósmico" — derivado del logo (gradiente lima→teal→azul + hoja + órbitas) Fuente de verdad del color/tipografía/espaciado. Nada se hardcodea fuera de aquí. ========================================================================== */ :root { color-scheme: dark; /* ---- Fondos (paleta «Noche de Tierra», 2026-09-07) ------------------ SUSTITUYE a «Acero Nocturno» (2026-08-25). Dos motivos, y los dos se midieron en produccion el 2026-09-07 antes de tocar nada. 🔴 1. LA TARJETA Y EL SUELO ERAN EL MISMO COLOR. `--nv-suelo` y `--nv-superficie` valian LOS DOS `#171B1F`. Medido en el navegador con `getComputedStyle`: los dos devolvian el mismo hex. Una `.nv-h6-card` (que se pinta de `--nv-superficie`) posada sobre `.nv-panel` (que se pinta de `--nv-suelo`) no tenia NINGUNA separacion figura/fondo: razon de contraste entre las dos capas = 1,000. Eso —y no la falta de gusto— es lo que hacia que la app «se viera plana» de noche; en tema claro no pasaba, porque alli si son `#FFFFFF` sobre `#F4F5F6`. Ahora la razon entre tarjeta y suelo es 1,096: la tarjeta existe. 2. EL SESGO PASA DE AZUL A VERDE. «Acero nocturno» describia bien lo que se sentia: gris azulado, frio, industrial —para un producto que es tierra—. Se conserva la MISMA familia de luminosidades y solo se gira el matiz hacia el verde, para no tocar el contraste del texto. ⚠️ NO SE TOCAN `--nv-texto`, `--nv-tenue` NI `--nv-fantasma`: son los tres que audito el preflight A-2 del 2026-09-04. Estos cuatro fondos se eligieron CONTRA esa auditoria, no a ojo. Peor caso, que es `--nv-fantasma` (#7D8B95) sobre `--nv-superficie-2`: antes #1D2227 -> 4,58:1 ahora #1C231F -> 4,58:1 (mismo piso, margen 0,00) `--nv-superficie-2` es el mas claro que sigue cumpliendo: un tono mas arriba cae a 4,43 y rompe AA. Si algun dia se quiere aclarar mas, hay que oscurecer antes `--nv-fantasma`, no al reves. */ --nv-abismo: #0A0F0B; --nv-suelo: #121812; --nv-superficie: #1A211A; --nv-superficie-2:#1C231F; --nv-linea: rgba(184,200,186,.14); --nv-linea-fuerte:rgba(184,200,186,.28); /* ---- Marca (gradiente del logo) ---- */ --nv-savia: #2FD9A8; /* primario: CTAs, activo, foco */ --nv-savia-hi: #5CE8BE; /* hover */ --nv-bosque: #407F69; --nv-cielo: #2E86DE; /* azul info/secundario */ /* ---- Alias ---------------------------------------------------------- `--nv-acento` no existe en ningun archivo del repo, y `cooperacion.css`, `feedback.css` y `huerta.css` lo usan (asi, sin respaldo, en varios sitios). MEDIDO en el navegador el 2026-08-15: `getPropertyValue( '--nv-acento')` devuelve cadena vacia, lo que deja el boton «Calcular» de huerta con `background: rgba(0,0,0,0)` y `color: rgb(6,35,28)` — negro sobre negro. Se declara como ALIAS de `--nv-savia`, no como un hex fijo, para que siga al tema (claro/oscuro) solo: un color escrito a mano aqui se habria quedado igual en el bloque de tema claro de mas abajo. */ --nv-acento: var(--nv-savia); /* ---- Otros dos alias, del MISMO fallo y encontrados el 2026-09-08 -------- `app.css` usa `var(--nv-texto-2, #9fb8ad)` en 20 reglas y `var(--nv-rojo, #E05555)` en 3. Ninguno de los dos tokens existía, así que el RESPALDO mandaba siempre — exactamente lo que ya había pasado con `--nv-acento` aquí arriba. 🔴 Y `--nv-texto-2` NO era inocuo. `#9fb8ad` es un verde grisáceo pensado para fondo oscuro, y al no ser un token no seguía al tema. Medido como COLOR DE TEXTO contra los cuatro fondos de cada bloque: tema oscuro -> peor 7,59:1 OK tema CLARO -> peor 1,78:1 ROMPE AA (mínimo 4,5) Veinte reglas de texto ilegibles en claro. Y desde el 2026-09-07 el claro es el tema POR DEFECTO del operador, así que le estaba pasando a todo productor que entrara. Se declaran como ALIAS y no como hex fijo, por el mismo motivo escrito arriba: un color a mano aquí se quedaría igual en el bloque claro. `--nv-tenue` es el token que ya hace ese trabajo (5,37 en oscuro y 5,00 en claro, los dos por encima de AA) y `--nv-critico` es el rojo de la casa. */ --nv-texto-2: var(--nv-tenue); --nv-rojo: var(--nv-critico); /* ---- Texto sobre el relleno de marca -------------------------------- AÑADIDO 2026-09-04 (preflight A-3). `--nv-savia` hace DOS trabajos: color de texto (129 reglas) y relleno de boton/chip (19 reglas). Al oscurecer la variante clara para que el TEXTO cumpla AA, el `#04140E` que iba encima del RELLENO caia de 5,60:1 a 3,49:1 — se arreglaba un lado rompiendo el otro. Este token separa los dos trabajos: es casi negro sobre la savia brillante del tema oscuro y blanco sobre la savia oscurecida del tema claro. NO se usa sobre `--nv-grad`, que es un gradiente FIJO (no sigue al tema) y ahi el casi-negro es lo correcto. */ --nv-sobre-savia: #04140E; /* ---- Acentos (usar con moderación) ---- */ --nv-cosecha: #B7CC00; /* lima: acento fuerte, cosecha/crecimiento */ --nv-dorado: #D9B24C; /* dorado: dinero, logros, destacados */ /* ---- Texto ---- */ --nv-texto: #EEF1F3; --nv-tenue: #8A97A3; /* SUBIDO 2026-09-04 (preflight A-2): #495259 daba 2,17:1 sobre --nv-suelo (#171B1F) y se usa como COLOR DE TEXTO en 29 reglas (rotulos .nv-fam, estado vacio .nv-int-vacio, y TODO placeholder via --nv-campo-ph). Oscurecido por HSL (mismo tono 206 y saturacion 10, solo sube la luz 31,8 -> 53,8) para no cambiar de familia. #7D8B95 mide 5,49:1 sobre #0C0F12, 4,95:1 sobre #171B1F y 4,58:1 sobre #1D2227 — cumple AA contra los TRES fondos oscuros, no solo contra la pagina. */ --nv-fantasma: #7D8B95; /* ---- Colores por puerta — «Neón de campo» (2026-09-07) -------------- Acento de marca de CADA puerta del home / bandeja «Más». No tienen variante clara ni oscura a propósito: identifican la puerta, no el tema, así que se declaran UNA sola vez aquí y valen en ambos modos. 🔴 CAMBIO DE PALETA, ELEGIDO POR EL DUEÑO EL 2026-09-07. Los tonos anteriores eran tierra apagados (#C1622B, #2E6B3F, #96701A…) y CONTRADECÍAN el propio logo, que es lima #B7CC00 → teal → azul #0055A3 (ver `--nv-grad` más abajo): la marca es viva y la app se veía muerta. Estos tonos suben la saturación manteniendo la familia de cada puerta. ⚠️ ESTE CAMBIO OBLIGA A VOLTEAR LA TINTA DEL CHIP, y una cosa sin la otra rompe la accesibilidad. Los tonos viejos se habían OSCURECIDO a propósito para sostener el ícono BLANCO (ver el comentario largo en `app.css`, «EL CHIP DE COLOR»): el peor caso era `energia` #D2860F con 2,93:1. Estos tonos son más claros, así que con ícono blanco el peor caso cae a 3,03:1 — al filo del 3:1 que pide WCAG para gráficos. Con ícono OSCURO (`--nv-sobre-puerta`) el peor caso sube a 4,30:1. Por eso `app.css` pasa el chip a tinta oscura y el degradado deja de oscurecer un 22 % (que hundía el caso peor a 2,30) y baja solo un 8 %. ─── SEGUNDA VUELTA, 2026-09-08: LOS ESCOGIÓ EL DUEÑO ──────────────── La primera versión de esta paleta la calculé yo con una regla prudente y él la rechazó tres veces seguidas («no me gustaron», «que no cansen», «proponme algo chévere»). Se le montó un constructor (`docs/`, artefacto) y ARMÓ LA SUYA arrastrando colores. Estos trece salen de ahí: OCHO son suyos tal cual y CINCO se movieron porque se pisaban entre sí. 🔴 EL MOTIVO DE MOVER ESOS CINCO NO ES DE GUSTO, ES FUNCIONAL. En la paleta que armó, `mercado`, `crece` y `energia` eran casi el mismo rosa-rojo: la distancia perceptual (ΔE en Lab) entre mercado y crece era 8,7 — por debajo de 10 el ojo no separa dos colores. Dos familias con el mismo color hacen que el color deje de servir para orientarse, que es TODO lo que este sistema viene a hacer. Movidos: energia #D31041 -> #F9C448 (era casi mercado; y era el más flojo en contraste: 3,06 con 3,00 de mínimo) crece #DA3C67 -> #FF42F2 (ΔE 8,7 con mercado) perfil #0B8C8C -> #48D0F9 (pegado a transporte) finca #0DAF5E -> #14F082 (pegado a inicio) inicio #00A882 -> #12B563 (ajuste para dejarle sitio a finca) Separación mínima resultante: 8,7 -> 24,2. Y LA REGLA DE FONDO, que también es suya: «los campesinos ya llegan bien cansados, darles cosas energéticamente apagadas no aguanta». Por eso la luminancia media sube a 0,406 — bastante por encima de lo que yo venía proponiendo. Tenía razón: es un argumento de producto. Contraste con la tinta oscura del chip, sobre el tono plano / sobre el extremo del degradado (92 %), medido sobre las 13 familias × 9 variantes = 117 combinaciones: PEOR CASO 3,62. Mínimo WCAG para elemento gráfico: 3,0. */ --nv-puerta-inicio: #12B563; --nv-puerta-mercado: #F13F6B; --nv-puerta-transporte: #0090CC; --nv-puerta-precios: #F1F13F; --nv-puerta-finca: #14F082; --nv-puerta-inteligencia:#6BF13F; --nv-puerta-terreno: #F16B3F; --nv-puerta-energia: #F9C448; --nv-puerta-tecnicos: #5273E4; --nv-puerta-fondeo: #975ED5; --nv-puerta-crece: #FF42F2; --nv-puerta-creativo: #DE22A6; --nv-puerta-perfil: #48D0F9; /* «Más» no es una familia, es la bandeja de lo que no cupo — por eso va en pizarra neutra y no en un color de puerta. TIENE TOKEN PROPIO DESDE EL 2026-09-07 porque antes lo calculaba `app.js` en línea (`color-mix(in srgb, var(--nv-tenue) 62%, #000000)`), y eso daba un gris OSCURO: con la tinta oscura nueva medía 2,84:1 en tema oscuro y 1,75:1 en claro — ilegible en los dos. Además seguía a `--nv-tenue`, que sí cambia con el tema, cuando el resto de las puertas es deliberadamente igual en ambos. #6E7A82 da 4,25:1 plano y 3,69:1 en el extremo del degradado, y queda un punto por debajo de `perfil` para que «Más» no compita con una puerta de verdad. */ --nv-puerta-mas: #6E7A82; /* ---- Tinta que va ENCIMA de un relleno de puerta -------------------- Mismo patrón que `--nv-sobre-savia` de aquí arriba, y por el mismo motivo: el color de la puerta hace de RELLENO, y lo que se posa encima (el ícono del chip, un rótulo sobre color pleno) necesita su propio token o alguien lo vuelve a escribir a mano. `app.css` tenía `color: #FFFFFF` clavado en `.nv-h6-ic`; ahora lee de aquí. NO sigue al tema: la puerta tampoco lo sigue. Es casi negro y no negro puro para que case con la familia verde de los fondos. */ --nv-sobre-puerta: #0B140F; /* ---- Semánticos (independientes del acento de marca) ---- */ --nv-ok: #35C79E; --nv-alerta: #E6C200; --nv-critico: #FF6B81; /* ---- Firma: gradiente del logo ---- */ --nv-grad: linear-gradient(120deg,#B7CC00 0%,#659648 32%,#246C82 66%,#0055A3 100%); /* ---- Tipografía ---- */ --nv-f-display: "Sora","Segoe UI",system-ui,-apple-system,Roboto,sans-serif; --nv-f-body: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --nv-f-mono: ui-monospace,"Cascadia Code","SF Mono",Consolas,"Liberation Mono",monospace; --nv-disp-weight: 800; /* ---- Espaciado ---- */ --nv-sp-1:4px; --nv-sp-2:8px; --nv-sp-3:12px; --nv-sp-4:16px; --nv-sp-5:24px; --nv-sp-6:32px; --nv-sp-8:48px; --nv-sp-10:64px; /* ---- Radios ---- */ --nv-r-sm:10px; --nv-r-md:14px; --nv-r-lg:18px; --nv-r-pill:999px; /* ---- Profundidad ---- */ --nv-sh-1: 0 1px 3px rgba(0,0,0,.45); --nv-sh-2: 0 18px 50px rgba(0,0,0,.55); --nv-glow: 0 0 26px rgba(47,169,140,.32); /* ---- Glass ---- */ --nv-glass-fill: rgba(10,42,32,.55); --nv-glass-blur: 10px; /* ---- CAMPOS DE ENTRADA ---------------------------------------------- «Ese blanco se ve muy impactante» (dueño, 2026-08-08, sobre «Flete y merma»: cinco campos seguidos). MEDIDO en produccion a 360 px: los `input.nv-in` daban `background-color: rgb(255,255,255)` con texto negro y 21 px de alto. No es que estuvieran mal pintados — es que NADIE les habia escrito una regla, asi que salia el aspecto por defecto del navegador: un rectangulo blanco puro sobre un fondo verde-noche. Van aqui y no sueltos en `app.css` porque un campo es una pieza del sistema, no un detalle de una pantalla: hoy son once las clases de campo sin regla, y si el color se escribe a ojo en cada una vuelven a divergir. Se definen por REFERENCIA a los fondos ya existentes para que el tema claro los siga solo, sin duplicar la tabla. `color-scheme` no es decoracion: sin el, las flechitas del `number`, el calendario del `date`, la lista desplegable del `select` y la barra de scroll las sigue pintando el navegador en claro, y el foco blanco reaparece al tocar el campo aunque la caja ya sea oscura. */ --nv-campo: var(--nv-suelo); --nv-campo-borde: var(--nv-linea-fuerte); --nv-campo-ph: var(--nv-fantasma); --nv-r-input: 12px; /* ---- Motion ---- */ --nv-ease: cubic-bezier(.16,1,.3,1); --nv-dur-fast: 150ms; --nv-dur: 220ms; } /* ============================================================================ VARIANTE CLARA - App del operador (campesino) usa CLARO por defecto (legible al sol). - Landing / cerebro del fundador usan OSCURO (base). Se activa con [data-theme="light"] o prefers-color-scheme. ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --nv-abismo: #F4F5F6; --nv-suelo: #F4F5F6; --nv-superficie: #FFFFFF; --nv-superficie-2:#E9ECEF; --nv-linea: #DADFE3; --nv-linea-fuerte:#C7CED4; /* CUATRO TOKENS OSCURECIDOS + DOS AÑADIDOS EL 2026-09-04 (preflight A-2/A-3). El tema claro nunca se habia auditado entero: solo se arreglaron --nv-alerta/--nv-critico (ver el comentario de abajo). Medido con la formula de luminancia de WCAG 2.x contra los TRES fondos de este mismo bloque —pagina #F4F5F6, tarjeta #FFFFFF y superficie-2 #E9ECEF—, no solo contra la pagina, porque el texto se posa sobre los tres: --nv-savia #1E9E7A -> #17785D 3,09 -> 4,96 / 5,41 / 4,56 (129 reglas de texto) --nv-dorado #B08D2E -> #806722 2,87 -> 4,96 / 5,41 / 4,56 ( 45 reglas) --nv-cosecha #6E7C00 -> #647000 4,23 -> 4,98 / 5,44 / 4,59 ( 36 reglas) --nv-fantasma #9AA4AD -> #606B76 2,32 -> 4,98 / 5,44 / 4,59 ( 29 reglas) --nv-ok (NO EXISTIA) -> #20775F 2,14 -> 4,98 / 5,43 / 4,58 Todos por HSL: mismo tono y saturacion, solo baja la luz, para que el verde siga verde y el dorado no se vuelva marron. --nv-savia-hi baja tambien (#0E7A5C -> #115A45): con la base ya en L28 el hover anterior (L27) era indistinguible del reposo, o sea que el estado :hover habria dejado de verse. --nv-tenue #5B6570 (526 reglas, el mas usado) NO se toca: ya cumple 5,43:1 / 5,00:1 / 4,66:1. */ --nv-savia: #17785D; --nv-savia-hi: #115A45; --nv-bosque: #2E6B54; --nv-cielo: #1E6FC2; --nv-cosecha: #647000; --nv-dorado: #806722; --nv-ok: #20775F; --nv-sobre-savia: #FFFFFF; --nv-texto: #14181C; --nv-tenue: #5B6570; --nv-fantasma: #606B76; /* `--nv-alerta`/`--nv-critico` NO tenían versión de tema claro: heredaban el hex del bloque `:root` de arriba (oscuro), pensado para leerse sobre fondo verde-noche. Sobre blanco daban 1,74:1 y 2,74:1 — muy por debajo del 4,5:1 que pide WCAG AA para texto. Medido con la fórmula de contraste relativo de la casa contra `--nv-superficie` (#FFFFFF) Y contra `--nv-abismo`/`--nv-suelo` de este mismo bloque (#F4F5F6, el fondo real de página, no solo el de tarjeta). CORREGIDO EL 2026-09-04 (preflight B-13): este comentario citaba #EEF4F0, el fondo de la paleta ANTERIOR a «Acero Nocturno» (2026-08-25); el cambio de paleta actualizó la línea 138 pero no este texto. Los ratios remedidos contra el fondo real, que salen casi iguales — la decisión era y sigue siendo correcta: --nv-alerta: #816D00 → 4,67:1 sobre #F4F5F6 · 5,10:1 sobre blanco --nv-critico: #DD0021 → 4,70:1 sobre #F4F5F6 · 5,13:1 sobre blanco Se oscurece por HSL (mismo tono y saturación, solo baja la luz) para que el amarillo se quede en la misma familia que `--nv-cosecha` de aquí arriba —no se vuelve marrón— y el rojo se quede rojo, no rosado desteñido. Solo se AÑADE aquí: la definición de `:root` (oscuro, arriba) no se toca, porque ahí SÍ cumple (8,85:1 y 5,62:1) y otras pantallas dependen de ese valor exacto. */ --nv-alerta: #816D00; --nv-critico: #DD0021; --nv-sh-1: 0 1px 3px rgba(11,31,25,.08); --nv-sh-2: 0 16px 44px rgba(11,31,25,.12); --nv-glow: 0 0 22px rgba(23,128,105,.18); --nv-glass-fill: rgba(255,255,255,.7); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --nv-abismo:#F4F5F6; --nv-suelo:#F4F5F6; --nv-superficie:#FFFFFF; --nv-superficie-2:#E9ECEF; --nv-linea:#DADFE3; --nv-linea-fuerte:#C7CED4; /* Mismos valores y mismo motivo que en `:root[data-theme="light"]` de arriba — ver el comentario largo ahi (preflight A-2/A-3, 2026-09-04). */ --nv-savia:#17785D; --nv-savia-hi:#115A45; --nv-bosque:#2E6B54; --nv-cielo:#1E6FC2; --nv-cosecha:#647000; --nv-dorado:#806722; --nv-ok:#20775F; --nv-sobre-savia:#FFFFFF; --nv-texto:#14181C; --nv-tenue:#5B6570; --nv-fantasma:#606B76; /* Mismo arreglo y mismos valores que en `:root[data-theme="light"]` de arriba — ver el comentario largo ahí. Este bloque es el que se activa cuando el usuario no eligió tema y el sistema pide claro. */ --nv-alerta:#816D00; --nv-critico:#DD0021; --nv-sh-1:0 1px 3px rgba(11,31,25,.08); --nv-sh-2:0 16px 44px rgba(11,31,25,.12); --nv-glow:0 0 22px rgba(23,128,105,.18); --nv-glass-fill:rgba(255,255,255,.7); } } /* ---- Reset mínimo ---- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--nv-abismo);color:var(--nv-texto); font-family:var(--nv-f-body);line-height:1.5;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} h1,h2,h3,h4{font-family:var(--nv-f-display);font-weight:var(--nv-disp-weight); letter-spacing:-.02em;text-wrap:balance;margin:0} a{color:inherit} img{max-width:100%;display:block} .nv-mono{font-family:var(--nv-f-mono);font-variant-numeric:tabular-nums lining-nums} ::selection{background:var(--nv-savia);color:var(--nv-sobre-savia)} :focus-visible{outline:2.5px solid var(--nv-savia);outline-offset:2px;border-radius:6px} /* Selector de idioma (compartido) — combobox con buscador (2026-08-22). `.nv-langsel-wrap` es `position:relative` para anclar el panel; cada `[data-nv-langsel]` monta su propio `
`, así que dos selectores en la misma pantalla no se pisan. */ .nv-langsel-wrap{position:relative;display:inline-block} .nv-langsel{font:600 12.5px/1 var(--nv-f-body);color:var(--nv-tenue);background:transparent; border:1px solid var(--nv-linea);border-radius:var(--nv-r-pill);padding:8px 14px 8px 10px;cursor:pointer; min-height:44px; transition:var(--nv-dur-fast);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; position:relative} .nv-langsel:hover,.nv-langsel[aria-expanded="true"]{color:var(--nv-texto);border-color:var(--nv-linea-fuerte)} .nv-langsel::after{content:'▾';position:absolute;right:8px;top:50%;transform:translateY(-50%); font-size:9px;color:var(--nv-tenue);pointer-events:none} .nv-langsel-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:60;width:240px;max-width:80vw; background:var(--nv-suelo);border:1px solid var(--nv-linea-fuerte);border-radius:var(--nv-r-md); box-shadow:0 10px 30px rgba(0,0,0,.35);padding:8px;display:flex;flex-direction:column;gap:6px} /* [hidden] pierde contra la regla de arriba: una regla de autor con la MISMA especificidad que `[hidden]` le gana al estilo por defecto del navegador sin importar el orden — por eso el panel se veía abierto siempre, aunque el JS de lang-selector.js sí alternaba bien `panel.hidden`. Sin esta línea el selector de idioma queda tapando el header en cada carga (2026-09-09). */ .nv-langsel-panel[hidden]{display:none} /* RTL: el botón queda al lado izquierdo; con right:0 el panel salía 131 px por la izquierda (el lado que se desplaza en rtl), medio buscador fuera de la pantalla. */ html[dir="rtl"] .nv-langsel-panel{right:auto;left:0} .nv-langsel-search{font:500 13px/1.2 var(--nv-f-body);color:var(--nv-texto);background:var(--nv-superficie); border:1px solid var(--nv-linea);border-radius:var(--nv-r-input);padding:9px 11px;width:100%;box-sizing:border-box} .nv-langsel-search:focus{outline:none;border-color:var(--nv-savia)} .nv-langsel-list{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto} /* min-height 44px (preflight M-4): estos renglones median 33px y son 50, uno por idioma. El objetivo tactil que piden Apple y Google es 44; con el dedo de trabajo y el telefono en el campo, 33px se falla y se elige el de al lado. */ .nv-langsel-item{font:500 13px/1.3 var(--nv-f-body);color:var(--nv-texto);padding:8px 10px; border-radius:var(--nv-r-sm);cursor:pointer;transition:var(--nv-dur-fast); min-height:44px;display:flex;align-items:center} .nv-langsel-item:hover,.nv-langsel-item.is-active{background:var(--nv-superficie-2);color:var(--nv-texto)} .nv-langsel-item[aria-selected="true"]{color:var(--nv-savia-hi);font-weight:700} .nv-langsel-empty{font:500 12.5px/1.3 var(--nv-f-body);color:var(--nv-tenue);padding:10px;text-align:center} /* Toggle día/noche (compartido) */ /* 44x44 (preflight M-4): medía 36x34. */ .nv-theme-btn{width:44px;height:44px;border-radius:var(--nv-r-pill);border:1px solid var(--nv-linea); background:transparent;color:var(--nv-tenue);cursor:pointer;font-size:15px;display:grid;place-items:center; transition:var(--nv-dur-fast);flex-shrink:0} .nv-theme-btn:hover{color:var(--nv-texto);border-color:var(--nv-linea-fuerte)} /* Wordmark con "by VILKA" (Tuxani bajo la sombrilla de VILKA) */ .nv-wordmark{display:flex;flex-direction:column;line-height:1} .nv-wordmark b{font-family:var(--nv-f-display);font-weight:800;font-size:18px;letter-spacing:-.01em} .nv-by{font-family:var(--nv-f-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase; color:var(--nv-tenue);margin-top:2px} @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}