/* ============================================================================
   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 «Acero Nocturno», 2026-08-25) ---- */
  --nv-abismo:      #0C0F12;
  --nv-suelo:       #171B1F;
  --nv-superficie:  #171B1F;
  --nv-superficie-2:#1D2227;
  --nv-linea:       rgba(180,190,200,.14);
  --nv-linea-fuerte:rgba(180,190,200,.26);

  /* ---- 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);

  /* ---- 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;
  --nv-fantasma:    #495259;

  /* ---- Colores por puerta (rediseño de menú, 2026-08-25) -------------
     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.
     `precios` y `energia` OSCURECIDOS EL MISMO DÍA: con el ícono blanco que
     llegó después (chip a color pleno + `NVIcon.get(..., {mono:true})`),
     los tonos originales (#B98A1E / #D2860F) daban blanco-sobre-ámbar a
     3,13:1 y 2,93:1 — por debajo del 3:1 que pide WCAG para componentes no
     textuales. Se bajó la luminosidad manteniendo tono y saturación:
     #96701A da 4,54:1, #A8690C da 4,48:1 contra blanco (fórmula de
     contraste relativo estándar). Mismo criterio que ya usa este archivo
     con `--nv-alerta`/`--nv-critico` del bloque claro más abajo. */
  --nv-puerta-inicio:      #1E9E7A;
  --nv-puerta-mercado:     #C1622B;
  --nv-puerta-transporte:  #4A6B80;
  --nv-puerta-precios:     #96701A;
  --nv-puerta-finca:       #2E6B3F;
  --nv-puerta-inteligencia:#748F1E;
  --nv-puerta-terreno:     #9A6B2E;
  --nv-puerta-energia:     #A8690C;
  --nv-puerta-tecnicos:    #2A5FA0;
  --nv-puerta-fondeo:      #6B4FA0;
  --nv-puerta-crece:       #C15F6E;
  --nv-puerta-creativo:    #B23E82;
  --nv-puerta-perfil:      #5C6B7A;

  /* ---- 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;
  --nv-savia:       #1E9E7A;
  --nv-savia-hi:    #0E7A5C;
  --nv-bosque:      #2E6B54;
  --nv-cielo:       #1E6FC2;
  --nv-cosecha:     #6E7C00;
  --nv-dorado:      #B08D2E;
  --nv-texto:       #14181C;
  --nv-tenue:       #5B6570;
  --nv-fantasma:    #9AA4AD;
  /* `--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 (#EEF4F0, el
     fondo real de página, no solo el de tarjeta):
       --nv-alerta:  #816D00 → 4,60:1 sobre #EEF4F0 · 5,10:1 sobre blanco
       --nv-critico: #DD0021 → 4,60:1 sobre #EEF4F0 · 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;
    --nv-savia:#1E9E7A; --nv-savia-hi:#0E7A5C; --nv-bosque:#2E6B54; --nv-cielo:#1E6FC2;
    --nv-cosecha:#6E7C00; --nv-dorado:#B08D2E;
    --nv-texto:#14181C; --nv-tenue:#5B6570; --nv-fantasma:#9AA4AD;
    /* 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:#04140E}
: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 `<div class="nv-langsel-wrap">`, 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;
  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}
.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}
.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)}
.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) */
.nv-theme-btn{width:36px;height:34px;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}}