/* ============================================================================
   huerta.css — Cuánta tierra hace falta para comer (2026-08-14).

   Hoja propia y ADITIVA, mismo motivo que `informe.css`, `licitaciones.css` y
   `marca.css`: `app.css` no tiene dueño y varios hilos lo tocan a la vez — dos
   agentes en el mismo archivo se pisan. Aquí solo hay clases NUEVAS, todas con
   el prefijo `nv-hue-` y todas scopeadas bajo `.nv-hue`, incluidas las que
   suenan genéricas (`.nv-dim`, `.nv-hue-link`). Con eso, esta hoja no puede
   afectar a ninguna otra pantalla.

   Aquí NO hay dos mundos como en `informe.css`: nada de esto se imprime ni imita
   un papel, así que TODO usa las variables del tema (`--nv-tenue`, `--nv-texto`,
   `--nv-superficie`, `--nv-linea`, `--nv-acento`) y se ve bien en claro y en
   oscuro. Los tres colores escritos a mano son los ámbar de aviso, y llevan su
   explicación al lado.

   Una sola columna hasta 620 px, el mismo quiebre que ya usan `.nv-inf-modos`,
   `.nv-lic-grid` y `.nv-coop-body`. Y `overflow-wrap: anywhere` en los nombres
   de cultivo, en las notas y en los enlaces: los nombres de la FAO vienen como
   «Vegetables, fresh nes» y los `origen` de los avisos como
   «fao_meta/estado.advertencia», sin un solo espacio donde partir, y a 360 px se
   salen de la tarjeta. Medido y obligatorio: se ve a 360 px sin desbordamiento
   horizontal.
   ========================================================================== */
.nv-hue { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nv-hue .nv-mod-h { display: flex; flex-direction: column; gap: 4px; }
.nv-hue .nv-mod-h h2 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.nv-hue .nv-dim { color: var(--nv-tenue); font-size: 13px; line-height: 1.5; margin: 0; }
.nv-hue .nv-hue-i { display: inline-flex; flex: none; }
.nv-hue .nv-hue-loading { padding: 18px 4px; color: var(--nv-tenue); font-size: 13.5px; }
.nv-hue .nv-hue-nota { font-size: 12.5px; }
.nv-hue .nv-hue-sec-h { font-size: 13.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--nv-tenue); }

/* ── EL FORMULARIO: las dos direcciones ──────────────────────────────────────
   El interruptor no es decorativo: es lo que hace que «somos 4, ¿cuánto
   necesito?» y «tengo 30 m², ¿para cuántos alcanza?» vivan en la misma pantalla
   en vez de en dos. Por eso va arriba del todo y ocupa el ancho: es la primera
   decisión que toma quien llega. */
.nv-hue .nv-hue-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nv-hue .nv-hue-swi { display: flex; border: 1px solid var(--nv-linea);
  border-radius: 999px; overflow: hidden; }
.nv-hue .nv-hue-swi-b { flex: 1 1 0; min-width: 0; background: none; border: 0;
  padding: 9px 12px; font: inherit; font-size: 13px; line-height: 1.3;
  color: var(--nv-tenue); cursor: pointer; }
.nv-hue .nv-hue-swi-b.is-on { background: var(--nv-acento); color: #06231c; font-weight: 700; }

.nv-hue .nv-hue-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nv-hue .nv-hue-lb { font-size: 13.5px; font-weight: 700; color: var(--nv-texto); }
.nv-hue .nv-hue-in { width: 100%; box-sizing: border-box; padding: 10px 12px;
  font: inherit; font-size: 16px; background: var(--nv-superficie); color: var(--nv-texto);
  border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm, 14px); }
/* 16px y no 14 en el campo: por debajo de 16, Safari en iPhone hace zoom al
   enfocar y deja la pantalla descuadrada. Es el único sitio de esta hoja donde
   el tamaño lo manda el navegador y no el diseño. */
.nv-hue .nv-hue-err-campo { margin: 0; font-size: 12.5px; color: #c98a00; }
.nv-hue .nv-hue-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-hue .nv-hue-btn { align-self: flex-start; background: var(--nv-superficie);
  border: 1px solid var(--nv-linea); border-radius: 999px; padding: 10px 18px;
  font: inherit; font-size: 14px; color: var(--nv-texto); cursor: pointer; }
.nv-hue .nv-hue-btn.is-fuerte { background: var(--nv-acento); border-color: var(--nv-acento);
  color: #06231c; font-weight: 700; }
.nv-hue .nv-hue-btn:disabled { opacity: .5; cursor: not-allowed; }

.nv-hue .nv-hue-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ── EL TITULAR ──────────────────────────────────────────────────────────────
   La cifra es grande porque es la respuesta, pero NUNCA está sola: debajo van
   siempre la escala («un cuadrado de 28 × 28 m») y la frase que sitúa el
   número. 790 m² soltados a solas hacen que la persona cierre la pantalla; con
   su escala al lado, se convierten en algo que puede mirar por la ventana. */
.nv-hue .nv-hue-tit { display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border-radius: var(--nv-r-sm, 14px);
  background: var(--nv-superficie); border: 1px solid var(--nv-linea); min-width: 0; }
.nv-hue .nv-hue-cifra { font-size: 38px; line-height: 1.05; font-weight: 800;
  color: var(--nv-acento); overflow-wrap: anywhere; }
.nv-hue .nv-hue-cifra-u { font-size: 14px; font-weight: 700; color: var(--nv-tenue); margin-top: -2px; }
.nv-hue .nv-hue-tit-t { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5;
  color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hue-escala { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--nv-tenue); }
/* La frase de escala va en el color del texto y no en gris tenue: es lo que
   evita que alguien se vaya creyendo que la canasta completa le cabe en el
   balcón. Una advertencia en gris al pie no la lee nadie. */
.nv-hue .nv-hue-escala-t { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55;
  color: var(--nv-texto); overflow-wrap: anywhere; }
/* La nota que redacta el backend en la raíz. Con filete a la izquierda para que
   se lea como una voz distinta de la nuestra, que es lo que es. */
.nv-hue .nv-hue-nota-raiz { margin: 8px 0 0; padding-left: 10px;
  border-left: 2px solid var(--nv-acento); font-size: 13.5px; line-height: 1.55;
  color: var(--nv-texto); overflow-wrap: anywhere; }

/* ── LOS AVISOS ──────────────────────────────────────────────────────────────
   🔴 ÁMBAR, ENTEROS Y PEGADOS AL TITULAR. Ámbar y no rojo, mismo criterio que
   el resto del repo: no ha fallado nada — es que el número significa menos de
   lo que parece. Y no llevan `max-height` ni recorte de líneas a propósito: un
   aviso recortado es un aviso que no se dio. */
.nv-hue .nv-hue-avisos { display: flex; flex-direction: column; gap: 10px;
  padding: 13px 14px; border-radius: var(--nv-r-sm, 14px);
  border: 1px solid #c98a00; min-width: 0; }
.nv-hue .nv-hue-avisos-h { font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #c98a00; }
.nv-hue .nv-hue-aviso { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nv-hue .nv-hue-aviso-t { margin: 0; font-size: 13.5px; line-height: 1.55;
  color: var(--nv-texto); overflow-wrap: anywhere; }
/* El origen se enseña pequeño pero se enseña: es la ruta exacta para ir a
   comprobar el aviso («fao_meta/estado.advertencia»). Sin espacios donde
   partir, así que `anywhere` es obligatorio a 360 px. */
.nv-hue .nv-hue-aviso-o { margin: 0; font-size: 11px; line-height: 1.4;
  color: var(--nv-tenue); overflow-wrap: anywhere; }

/* ── EL FILTRO ───────────────────────────────────────────────────────────────
   Los chips se envuelven en varias líneas y nunca hacen scroll horizontal: en
   un carrusel lateral, los cultivos del final no existen para quien no sabe que
   puede arrastrar. */
.nv-hue .nv-hue-filtro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nv-hue .nv-hue-filtro-h { font-size: 14px; font-weight: 700; color: var(--nv-texto); }
.nv-hue .nv-hue-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.nv-hue .nv-hue-chip { background: var(--nv-superficie); border: 1px solid var(--nv-linea);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13px;
  color: var(--nv-texto); cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.nv-hue .nv-hue-chip.is-on { background: var(--nv-acento); border-color: var(--nv-acento);
  color: #06231c; font-weight: 700; }

/* ── CULTIVO POR CULTIVO ─────────────────────────────────────────────────── */
.nv-hue .nv-hue-cultivos { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nv-hue .nv-hue-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 620px) { .nv-hue .nv-hue-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } }
.nv-hue .nv-hue-cul { display: flex; flex-direction: column; gap: 7px;
  background: var(--nv-superficie); border: 1px solid var(--nv-linea);
  border-radius: var(--nv-r-sm, 14px); padding: 13px 14px; min-width: 0; }
.nv-hue .nv-hue-cul-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nv-hue .nv-hue-cul-n { font-size: 15px; font-weight: 800; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--nv-linea); color: var(--nv-tenue); white-space: nowrap; }
.nv-hue .nv-hue-tag.is-perenne { border-color: var(--nv-acento); color: var(--nv-acento); }

/* 🔴 LA FRASE DEL CALENDARIO ES EL TITULAR DE LA TARJETA, no una nota al pie.
   Va primero, más grande que los datos y con el filete del acento: es lo único
   de aquí que alguien puede ejecutar el lunes («siembra 1,93 m² cada semana;
   desde el día 150 cosechas unos 4,38 kg todas las semanas»). Los metros
   cuadrados sueltos no le dicen a nadie qué hacer. */
.nv-hue .nv-hue-cul-nota { margin: 0; padding-left: 10px;
  border-left: 3px solid var(--nv-acento); font-size: 13.5px; line-height: 1.55;
  color: var(--nv-texto); overflow-wrap: anywhere; }

.nv-hue .nv-hue-datos { margin: 2px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px; }
.nv-hue .nv-hue-dato { display: flex; flex-wrap: wrap; gap: 4px 10px;
  justify-content: space-between; font-size: 13px; line-height: 1.45; min-width: 0; }
.nv-hue .nv-hue-dato-k { color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hue-dato-v { font-weight: 700; color: var(--nv-texto); overflow-wrap: anywhere; }

/* Un perenne no lleva semanas, y decirlo explícitamente vale más que dejar el
   hueco: el hueco se lee como que faltó el dato. */
.nv-hue .nv-hue-perenne { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--nv-tenue); }
/* La letra pequeña del dato (el arroz que mezcla blanco con paddy) va en ámbar:
   no es un error, es una salvedad — y sin ella el número parece más firme de lo
   que es. */
.nv-hue .nv-hue-empalme { margin: 0; font-size: 12.5px; line-height: 1.5;
  color: #c98a00; overflow-wrap: anywhere; }
.nv-hue .nv-hue-conf { font-size: 12px; }
/* La procedencia de cada cifra, con SU año. Separada por una línea porque es
   metadato del dato, no el dato. */
.nv-hue .nv-hue-proc { display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--nv-linea); padding-top: 6px; margin-top: 2px; }
.nv-hue .nv-hue-proc-l { margin: 0; font-size: 11.5px; line-height: 1.45;
  color: var(--nv-tenue); overflow-wrap: anywhere; }

/* ── LO QUE NO ENTRÓ ────────────────────────────────────────────────────────
   🔴 ANTES DECÍA AQUÍ: «se ve entero y sin plegar; un desplegable "ver los
   omitidos" sería esconder justo lo que impide creer que la lista está
   completa». El razonamiento SIGUE VALIENDO y por eso lo que se pliega no es la
   noticia, sino la letra pequeña: el rótulo de la sección y la frase que dice
   qué son estos cultivos —«los puede sembrar y tenemos su información
   nutricional, pero no sabemos cuánto producen por metro»— están SIEMPRE a la
   vista, en el `<summary>`. Lo que se pliega es el motivo técnico de cada uno,
   que está escrito para quien mantiene el código y no para un campesino.
   Disponible, no encima (rediseño 2026-08-28). */
.nv-hue .nv-hue-omit { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.nv-hue .nv-hue-omit-l { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px; }
.nv-hue .nv-hue-omit-i { display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border-radius: 12px; border: 1px dashed var(--nv-linea); min-width: 0; }
.nv-hue .nv-hue-omit-n { font-size: 13.5px; font-weight: 700; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-omit-m { font-size: 12.5px; line-height: 1.5; color: var(--nv-tenue);
  overflow-wrap: anywhere; }

.nv-hue .nv-hue-desc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nv-hue .nv-hue-desc-t { margin: 0; font-size: 13px; line-height: 1.5;
  color: var(--nv-tenue); overflow-wrap: anywhere; }

/* ── DE DÓNDE SALEN LOS DATOS ───────────────────────────────────────────── */
.nv-hue .nv-hue-fuente { display: flex; flex-direction: column; gap: 6px;
  padding-top: 12px; border-top: 1px solid var(--nv-linea); min-width: 0; }
.nv-hue .nv-hue-fuente-t { margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hue-links { display: flex; flex-wrap: wrap; gap: 10px; }
.nv-hue .nv-hue-link { font-size: 12.5px; color: var(--nv-acento);
  text-decoration: underline; overflow-wrap: anywhere; }

/* ── ERRORES ─────────────────────────────────────────────────────────────── */
.nv-hue .nv-hue-err { padding: 14px; border: 1px solid #b3403a; border-radius: var(--nv-r-sm, 14px); }
.nv-hue .nv-hue-err-h { font-size: 13.5px; font-weight: 700; }

/* ============================================================================
   ANIMALES Y MOTOR ABIERTO (2026-08-15) — lo pinta `huerta_animales.js`.

   ADITIVO Y AL FINAL, mismo motivo que toda esta hoja: nada de aquí abajo
   redefine una clase de arriba, así que la pantalla de cultivos —que ya está
   verificada en producción— no puede cambiar de aspecto por este bloque. Se
   REUTILIZAN sin tocarlas `.nv-hue-grid`, `.nv-hue-tag`, `.nv-hue-btn`,
   `.nv-hue-datos`, `.nv-hue-dato*`, `.nv-hue-sec-h`, `.nv-hue-proc*`,
   `.nv-hue-avisos*`, `.nv-hue-in` y `.nv-hue-chip`.

   LAS DOS DECISIONES VISUALES QUE NO SON DECORACIÓN:

   A. LA TARJETA DE ANIMAL NO TIENE UNA FILA DE METROS CUADRADOS, y no es un
      olvido: FAOSTAT no publica cuánto ocupa un animal (`huerta_animales.js`
      no manda `areaM2` ni en `null`). No hay clase para pintarlo, para que no
      se pueda añadir por descuido. Lo único que puede dar un área es el motor
      abierto, y sale con el rótulo de literatura.

   B. LO DE LA BIBLIOTECA SE VE DISTINTO A LA VISTA, no en un comentario. Borde
      DISCONTINUO y rótulo ámbar propio, frente al borde macizo de las tarjetas
      de FAOSTAT. Mezclarlos destruiría lo único que hace valiosa a la tabla —
      que cada cifra se rastrea hasta su ítem— y lo haría sin que se note.
   ========================================================================== */
/* 🔴 `--nv-acento` NO EXISTE. Medido en el navegador el 2026-08-15 a 360 px:
   `getPropertyValue('--nv-acento')` devuelve CADENA VACÍA, mientras que
   `--nv-texto`, `--nv-tenue`, `--nv-superficie`, `--nv-linea` y `--nv-r-sm` sí
   resuelven. No está declarada en NINGÚN archivo del repo (`--nv-acento:` no
   aparece ni una vez), y seis hojas la usan.

   Lo que eso hace: en `background`, un `var()` vacío invalida la propiedad y
   deja el fondo TRANSPARENTE; el texto de esos botones es `#06231c`, casi
   negro. Sobre el tema oscuro, el botón se vuelve ILEGIBLE.

   Afecta también al botón «Calcular» y a los chips del filtro de cultivos, que
   son de ANTES de este bloque. Eso NO se toca aquí: cambiarlo alteraría una
   pantalla ya verificada en producción y la decisión (y el verde exacto) es
   del líder. Va escrito en el informe con la medición.

   Aquí abajo se usa el respaldo `var(--nv-acento, #78CC8C)`, y ese verde no es
   inventado: es el `rgb(120,204,140)` que ya vive en `--nv-linea` de este mismo
   tema. Si algún día se declara `--nv-acento`, estas reglas la siguen sola. */
.nv-hue .nv-hue-an { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nv-hue .nv-hue-an-ayuda { margin: 0; font-size: 13px; line-height: 1.5; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-an-nota { margin: 0; padding-left: 10px;
  border-left: 2px solid var(--nv-acento, #78CC8C);
  font-size: 13.5px; line-height: 1.55; color: var(--nv-texto); overflow-wrap: anywhere; }

.nv-hue .nv-hue-an-c { display: flex; flex-direction: column; gap: 7px;
  background: var(--nv-superficie); border: 1px solid var(--nv-linea);
  border-radius: var(--nv-r-sm, 14px); padding: 13px 14px; min-width: 0; }
.nv-hue .nv-hue-an-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nv-hue .nv-hue-an-n { font-size: 15px; font-weight: 800; color: var(--nv-texto);
  overflow-wrap: anywhere; }

/* 🔴 EL TITULAR ES EL CAMPO QUE MANDA (`manda`), Y SU UNIDAD VA PEGADA.
   «83,58» sin «al año, en tandas» al lado es el error que manda a alguien a
   construir un galpón nueve veces más grande. La unidad no es letra pequeña
   aquí: por eso va en el color del texto y en negrita, no en gris. */
.nv-hue .nv-hue-an-cifra { font-size: 30px; line-height: 1.05; font-weight: 800;
  color: var(--nv-acento, #78CC8C); overflow-wrap: anywhere; }
.nv-hue .nv-hue-an-u { font-size: 13px; font-weight: 700; color: var(--nv-texto); margin-top: -1px; }
/* Cuando el backend manda `frase` («Una vaca da leche para unas 18 personas»)
   ES ELLA la que va arriba y grande: «0,23 vacas» es correcto y suena a error,
   y quien lo lee sin la frase cierra la pantalla. La cifra pasa debajo. */
.nv-hue .nv-hue-an-frase { margin: 0; font-size: 15.5px; line-height: 1.5; font-weight: 700;
  color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hue-an-cifra-min { margin: 0; font-size: 12.5px; line-height: 1.45;
  color: var(--nv-tenue); overflow-wrap: anywhere; }
/* Las DOS cifras del flujo, juntas y en ámbar: no es un fallo, es que la cifra
   anual y la simultánea son cosas distintas y confundirlas cuesta dinero. */
.nv-hue .nv-hue-an-dos { margin: 0; padding: 8px 10px; border-radius: 12px;
  border: 1px solid #c98a00; font-size: 13px; line-height: 1.5; color: var(--nv-texto);
  overflow-wrap: anywhere; }
/* `origenCiclo` va PEGADO a esa cifra porque los ~42 días NO son de FAOSTAT.
   Separarlo la haría parecer tan auditable como el resto de la tarjeta. */
.nv-hue .nv-hue-an-ciclo { margin: 0; font-size: 11.5px; line-height: 1.45;
  color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hue-an-nota-b { margin: 0; padding-left: 10px; border-left: 3px solid var(--nv-acento, #78CC8C);
  font-size: 13.5px; line-height: 1.55; color: var(--nv-texto); overflow-wrap: anywhere; }
/* `consumoMarginal` y `notaEmpalme`: ámbar, enteros y sin recorte. La oveja
   sale absurda («alcanzaría para 800 personas») y el aviso ES el dato. */
.nv-hue .nv-hue-an-marg { margin: 0; font-size: 12.5px; line-height: 1.5;
  color: #c98a00; overflow-wrap: anywhere; }
.nv-hue .nv-hue-an-sinarea { margin: 0; font-size: 11.5px; line-height: 1.45;
  color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hue-an-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.nv-hue .nv-hue-an-c .nv-hue-btn { align-self: auto; padding: 8px 14px; font-size: 13px; }

/* ── EL MOTOR ABIERTO ────────────────────────────────────────────────────── */
.nv-hue .nv-hue-bib { display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding-top: 14px; border-top: 1px solid var(--nv-linea); }
.nv-hue .nv-hue-bib-form { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nv-hue .nv-hue-bib-tipos { display: flex; flex-wrap: wrap; gap: 7px; }
.nv-hue .nv-hue-bib-caja { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 13px 14px; border-radius: var(--nv-r-sm, 14px);
  border: 1px solid var(--nv-linea); background: var(--nv-superficie); }
.nv-hue .nv-hue-bib-k { font-size: 12px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--nv-tenue); }
.nv-hue .nv-hue-bib-t { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-bib-dim { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--nv-tenue);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-bib-tabla { align-self: flex-start; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--nv-linea); color: var(--nv-tenue); }
/* 🔴 EL PRECIO, ANTES DE LLAMAR Y SIEMPRE. En ámbar y con borde propio para que
   no se pueda leer la pantalla sin haberlo visto: nadie debe descubrir el cobro
   después de que ya se cobró. */
.nv-hue .nv-hue-bib-precio { display: flex; flex-direction: column; gap: 4px;
  padding: 11px 12px; border-radius: 12px; border: 1px solid #c98a00; min-width: 0; }
.nv-hue .nv-hue-bib-precio-t { margin: 0; font-size: 13px; line-height: 1.5; color: var(--nv-texto);
  overflow-wrap: anywhere; }
/* La consulta literal que se va a mandar. Se enseña entera: es lo que permite
   decidir si vale la pena pagarla. */
.nv-hue .nv-hue-bib-q { margin: 0; padding: 9px 11px; border-radius: 12px;
  border: 1px dashed var(--nv-linea); font-size: 12.5px; line-height: 1.5;
  color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hue-bib-espera { margin: 0; font-size: 13px; line-height: 1.5; color: #c98a00;
  overflow-wrap: anywhere; }

/* ── LO QUE VUELVE DE LA BIBLIOTECA: OTRO MUNDO, Y SE VE ─────────────────── */
.nv-hue .nv-hue-bib-lit { display: flex; flex-direction: column; gap: 9px; min-width: 0;
  padding: 13px 14px; border-radius: var(--nv-r-sm, 14px);
  border: 2px dashed #c98a00; }
.nv-hue .nv-hue-bib-rot { align-self: flex-start; font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
  border: 1px solid #c98a00; color: #c98a00; }
.nv-hue .nv-hue-bib-rot-d { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--nv-texto);
  overflow-wrap: anywhere; }
/* `textoLiteral` lo escribe un modelo. Va por `textContent`, nunca por
   `innerHTML` — meterlo como HTML sería un XSS con firma nuestra. */
.nv-hue .nv-hue-bib-lit-t { margin: 0; padding-left: 10px; border-left: 3px solid #c98a00;
  font-size: 13.5px; line-height: 1.6; color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hue-bib-rangos { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px; }
.nv-hue .nv-hue-bib-rango { display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 9px 11px; border-radius: 12px; border: 1px dashed var(--nv-linea); }
.nv-hue .nv-hue-bib-rango-v { font-size: 13.5px; font-weight: 800; color: var(--nv-texto);
  overflow-wrap: anywhere; }
/* El `contexto` es el trozo de texto donde se leyó el rango: es LA PRUEBA, y
   por eso no se recorta ni se pliega. */
.nv-hue .nv-hue-bib-ctx { font-size: 11.5px; line-height: 1.5; color: var(--nv-tenue);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-bib-env { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--nv-tenue);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-bib-fuentes { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px; }
.nv-hue .nv-hue-bib-fuente { display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font-size: 12.5px; line-height: 1.45; color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hue-bib-fuente-n { font-weight: 700; color: var(--nv-texto); overflow-wrap: anywhere; }

/* 🔴 LOS DOS CONTROLES DE ESTE BLOQUE, LEGIBLES PASE LO QUE PASE.
   Heredan `.nv-hue-btn.is-fuerte` y `.nv-hue-chip.is-on`, que pintan el fondo
   con `var(--nv-acento)` SIN respaldo — y esa variable no existe (ver la
   explicación larga arriba): fondo transparente y texto `#06231c` sobre tema
   oscuro = botón invisible. Medido a 360 px el 2026-08-15:
   `backgroundColor: rgba(0,0,0,0)`, `color: rgb(6,35,28)`.

   Un botón invisible se puede tolerar en cualquier sitio menos en éste: es EL
   QUE COBRA. Si no se ve, se pulsa por accidente o no se pulsa nunca.

   El selector lleva `.nv-hue-bib` delante a propósito, para arreglar SOLO lo
   mío: el «Calcular» y los chips del filtro de cultivos siguen exactamente
   como estaban, porque son de una pantalla ya verificada en producción y ese
   arreglo lo decide el líder. */
.nv-hue .nv-hue-bib .nv-hue-btn.is-fuerte,
.nv-hue .nv-hue-bib-tipos .nv-hue-chip.is-on {
  background: var(--nv-acento, #78CC8C);
  border-color: var(--nv-acento, #78CC8C);
  color: #06231c;
}

/* ══════════════════════════════════════════════════════════════════════════
   BALANCE NUTRICIONAL (2026-08-15) — «¿con esto se come?»

   ADITIVO: clases nuevas, todas con prefijo `nv-hue-bal-` y todas bajo
   `.nv-hue`. No se reescribe ni una regla de arriba: la pantalla de cultivos
   está verificada en producción y este bloque no puede moverle nada.

   🔴 `--nv-acento` NO EXISTE en el tema (medido el 2026-08-15 en este mismo
   archivo, ver el bloque de la Biblioteca al final del anterior). Aquí se usa
   SIEMPRE con respaldo —`var(--nv-acento, #78CC8C)`— porque una barra de
   progreso con fondo transparente no es una barra: es nada, y el usuario leería
   «0 %» donde hay 50.

   Los tres colores de estado están escritos a mano a propósito: verde para
   «sale», ámbar para «no alcanza con lo medido» y rojo apagado para «no
   alcanza». El ámbar del estado intermedio NO es decorativo — es el que
   distingue «te falta comida» de «nos falta dato», que es la distinción que
   este bloque entero existe para sostener.
   ══════════════════════════════════════════════════════════════════════════ */
.nv-hue .nv-hue-bal { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nv-hue .nv-hue-sec-h2 { font-size: 14px; font-weight: 800; color: var(--nv-texto);
  margin: 2px 0 0; overflow-wrap: anywhere; }

.nv-hue .nv-hue-bal-tit { display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 14px; border-radius: 14px; border: 1px solid var(--nv-linea);
  background: var(--nv-superficie); border-left-width: 4px; }
.nv-hue .nv-hue-bal-tit.is-cubre { border-left-color: #2e9e5b; }
.nv-hue .nv-hue-bal-tit.is-piso { border-left-color: #c98a00; }
.nv-hue .nv-hue-bal-tit.is-falta { border-left-color: #b4573b; }
.nv-hue .nv-hue-bal-v { font-size: 15px; font-weight: 800; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-bal-pct { margin: 0; font-size: 13px; color: var(--nv-tenue);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-bal-faltan { margin: 0; font-size: 13.5px; font-weight: 700;
  color: var(--nv-texto); overflow-wrap: anywhere; }

/* La barra se recorta al 100 % para dibujar; el número de al lado no se recorta
   (ver `ancho()` en el módulo). Sin `overflow:hidden` un 340 % se saldría de la
   tarjeta y a 360 px eso rompe la pantalla entera. */
.nv-hue .nv-hue-bal-barra { height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--nv-linea); width: 100%; }
.nv-hue .nv-hue-bal-barra-f { height: 100%; border-radius: 999px; min-width: 2px;
  background: var(--nv-acento, #78CC8C); }
.nv-hue .nv-hue-bal-barra-f.is-cubre { background: #2e9e5b; }
.nv-hue .nv-hue-bal-barra-f.is-piso { background: #c98a00; }
.nv-hue .nv-hue-bal-barra-f.is-falta { background: #b4573b; }
.nv-hue .nv-hue-bal-barra-f.is-grupo { background: var(--nv-acento, #78CC8C); }

.nv-hue .nv-hue-bal-grupos { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.nv-hue .nv-hue-bal-grupo { display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 10px 11px; border-radius: 12px; border: 1px solid var(--nv-linea); }
/* A 360 px el nombre del grupo y su cifra NO caben en una línea con
   `justify-content: space-between` cuando la etiqueta es «Semillas y frutos
   secos». Se envuelven, y la cifra cae debajo en vez de empujar el nombre a un
   hilo de 40 px. */
.nv-hue .nv-hue-bal-grupo-h { display: flex; flex-wrap: wrap; gap: 4px 10px;
  align-items: baseline; justify-content: space-between; min-width: 0; }
.nv-hue .nv-hue-bal-grupo-n { font-size: 13.5px; font-weight: 700; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-bal-grupo-v { font-size: 13px; font-weight: 800; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-bal-grupo-p { margin: 0; font-size: 12px; color: var(--nv-tenue); }
.nv-hue .nv-hue-bal-grupo-q { margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hue-bal-grupo-i { margin: 0; font-size: 11.5px; color: var(--nv-tenue);
  overflow-wrap: anywhere; }

.nv-hue .nv-hue-bal-prot { display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 12px; border-radius: 14px; border: 1px solid var(--nv-linea); }
.nv-hue .nv-hue-bal-prot-c { font-size: 20px; font-weight: 800; color: var(--nv-texto); }
.nv-hue .nv-hue-bal-prot-h { margin: 0; font-size: 13.5px; font-weight: 700;
  color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hue-bal-prot-n { margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--nv-tenue); overflow-wrap: anywhere; }
/* Tres columnas fijas para la tabla de pesos: peso · lo que hace falta · si está
   cubierto. Cabe a 360 px porque las tres celdas son cortas por construcción. */
.nv-hue .nv-hue-bal-peso { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0;
  padding: 6px 0; border-top: 1px dashed var(--nv-linea); font-size: 12.5px; }
.nv-hue .nv-hue-bal-peso-k { font-weight: 700; color: var(--nv-texto); min-width: 48px; }
.nv-hue .nv-hue-bal-peso-v { color: var(--nv-tenue); flex: 1 1 auto; }
.nv-hue .nv-hue-bal-peso-e { font-weight: 700; overflow-wrap: anywhere; }
.nv-hue .nv-hue-bal-peso.is-si .nv-hue-bal-peso-e { color: #2e9e5b; }
.nv-hue .nv-hue-bal-peso.is-no .nv-hue-bal-peso-e { color: #b4573b; }

.nv-hue .nv-hue-bal-sug { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nv-hue .nv-hue-bal-sug-i { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  min-width: 0; padding: 8px 10px; border-radius: 12px; border: 1px dashed var(--nv-linea); }
.nv-hue .nv-hue-bal-sug-n { font-size: 13.5px; font-weight: 800; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-bal-sug-k { font-size: 12.5px; color: var(--nv-texto); }
.nv-hue .nv-hue-bal-sug-a { font-size: 12px; color: var(--nv-tenue); }

.nv-hue .nv-hue-bal-sin { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nv-hue .nv-hue-bal-sin-h { margin: 4px 0 0; font-size: 12.5px; font-weight: 700;
  color: var(--nv-texto); overflow-wrap: anywhere; }

/* 🔴 LAS DOS REFERENCIAS SE TIENEN QUE VER DISTINTAS A UN METRO DE DISTANCIA.
   Si se parecieran, alguien leería los 3.126 kcal de FAO como si fueran la meta
   —que es exactamente el error que el bloque entero existe para impedir—. Por
   eso la del requerimiento lleva borde continuo y la del consumo del país borde
   discontinuo y ámbar: el mismo lenguaje visual que ya separa la Biblioteca de
   FAOSTAT en `huerta_animales.js`. */
.nv-hue .nv-hue-bal-refs { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.nv-hue .nv-hue-bal-ref { display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 11px; border-radius: 12px; }
.nv-hue .nv-hue-bal-ref.is-req { border: 1px solid var(--nv-linea); }
.nv-hue .nv-hue-bal-ref.is-pais { border: 1px dashed #c98a00; }
.nv-hue .nv-hue-bal-ref-q { font-size: 13.5px; font-weight: 800; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-bal-ref-n, .nv-hue .nv-hue-bal-ref-m { margin: 0; font-size: 12.5px;
  line-height: 1.5; color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hue-bal-ref-f { margin: 0; font-size: 12px; line-height: 1.45;
  color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hue-bal-ref-p { margin: 0; font-size: 11.5px; color: var(--nv-tenue);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-bal-nota { margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--nv-tenue); overflow-wrap: anywhere; }

/* ============================================================================
   EL PERFIL NUTRICIONAL COMPLETO — 24 filas, cada una con DOS barras

   Lo pinta `pintarNutricion()` en `huerta_balance.js`. Pedido de Daniel el
   2026-08-27: las 13 vitaminas y los 11 minerales, con el % de cobertura de
   cada uno.

   🔴 POR QUÉ CADA NUTRIENTE OCUPA EL DOBLE, Y NO SE VA A «COMPACTAR»:
   El hierro son 8 mg al día para un hombre y 18 para una mujer de 19 a 50. Una
   sola barra tendría que elegir a cuál de los dos describe, o pintar el
   promedio —13— que no es el requerimiento de nadie. Así que van DOS líneas por
   nutriente, cada una con su barra, su porcentaje y su referencia. El día que
   alguien quiera reducirlo a una sola barra, esto es lo que se estaría tirando.

   Se reutiliza el mismo lenguaje visual de las barras del balance (verde
   cubierto, ámbar a medias, rojo bajo) en vez de inventar otro: dos escalas de
   color distintas en la misma pantalla se leen como dos cosas distintas.

   A 360 px los nombres de nutriente («Vitamina B5 (ác. pantoténico)») y los
   textos que manda el backend no tienen dónde partir, así que `overflow-wrap:
   anywhere` es obligatorio en todo lo que traiga texto de allá — la misma regla
   medida y escrita en la cabecera de este archivo. La cabecera de cada fila
   envuelve porque nombre + valor + etiqueta RDA + marca de piso no caben en una
   línea a ese ancho. */
.nv-hue .nv-hue-nut { display: flex; flex-direction: column; gap: 12px; min-width: 0;
  margin-top: 18px; }

.nv-hue .nv-hue-nut-grupo { display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 12px; border-radius: var(--nv-r-sm, 14px);
  background: var(--nv-superficie); border: 1px solid var(--nv-linea); }
.nv-hue .nv-hue-nut-grupo-h { font-size: 12.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--nv-tenue); }

.nv-hue .nv-hue-nut-fila { display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 9px 0; border-top: 1px solid var(--nv-linea); }
.nv-hue .nv-hue-nut-grupo > .nv-hue-nut-fila:first-of-type { border-top: 0; padding-top: 2px; }

.nv-hue .nv-hue-nut-cab { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 8px; min-width: 0; }
.nv-hue .nv-hue-nut-n { font-size: 13.5px; font-weight: 700; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-nut-v { font-size: 13px; font-weight: 800; color: var(--nv-acento, #78CC8C);
  overflow-wrap: anywhere; }
/* Un hueco de dato NO se pinta como un cero: se rotula y se apaga. */
.nv-hue .nv-hue-nut-v.is-sin { color: var(--nv-tenue); font-weight: 700; font-style: italic; }
/* RDA y AI no son lo mismo y la diferencia importa; la etiqueta lleva `title`. */
.nv-hue .nv-hue-nut-tipo { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; border: 1px solid var(--nv-linea);
  color: var(--nv-tenue); cursor: help; }
.nv-hue .nv-hue-nut-piso { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; border: 1px dashed #c98a00; color: #c98a00;
  cursor: help; }

/* LAS DOS LÍNEAS, la de él y la de ella. `grid` y no `flex` para que las barras
   de hombre y mujer queden alineadas entre sí en TODAS las filas: desalineadas,
   comparar hierro con zinc de un vistazo deja de ser posible, que es justo para
   lo que sirve esta tabla. A 360 px la referencia («de 18 mg») se cae a la
   segunda línea en vez de estrujar la barra. */
.nv-hue .nv-hue-nut-sexo { display: grid; grid-template-columns: 56px 1fr auto;
  align-items: center; gap: 4px 8px; min-width: 0; }
.nv-hue .nv-hue-nut-sexo-k { font-size: 12px; color: var(--nv-tenue); font-weight: 700; }
.nv-hue .nv-hue-nut-sexo-p { font-size: 12.5px; font-weight: 800; color: var(--nv-texto);
  text-align: right; white-space: nowrap; }
.nv-hue .nv-hue-nut-sexo-r { grid-column: 2 / -1; font-size: 11.5px; color: var(--nv-tenue);
  overflow-wrap: anywhere; }

.nv-hue .nv-hue-nut-barra { height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--nv-linea); width: 100%; min-width: 0; }
.nv-hue .nv-hue-nut-barra-f { height: 100%; border-radius: 999px; min-width: 2px;
  background: var(--nv-acento, #78CC8C); }
.nv-hue .nv-hue-nut-barra-f.is-cubierto { background: #2e9e5b; }
.nv-hue .nv-hue-nut-barra-f.is-a_medias { background: #c98a00; }
.nv-hue .nv-hue-nut-barra-f.is-bajo { background: #b4573b; }
/* Sin dato NO es cero y no puede parecerlo: la barra se queda vacía del todo. */
.nv-hue .nv-hue-nut-barra-f.is-sin_dato { background: transparent; min-width: 0; }

/* Las notas que convierten un número bajo en algo accionable (la vitamina D
   viene del sol, la B12 solo del animal). Llevan borde para que no se lean
   como parte de la cifra de arriba. */
.nv-hue .nv-hue-nut-nota { margin: 3px 0 0; padding-left: 9px;
  border-left: 2px solid var(--nv-acento, #78CC8C); font-size: 12.5px; line-height: 1.5;
  color: var(--nv-texto); overflow-wrap: anywhere; }

.nv-hue .nv-hue-nut-sug, .nv-hue .nv-hue-nut-bajos, .nv-hue .nv-hue-nut-huecos,
.nv-hue .nv-hue-nut-contraste, .nv-hue .nv-hue-nut-fuentes {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 12px; border-radius: var(--nv-r-sm, 14px);
  background: var(--nv-superficie); border: 1px solid var(--nv-linea); }
.nv-hue .nv-hue-nut-sug-h, .nv-hue .nv-hue-nut-bajos-h, .nv-hue .nv-hue-nut-huecos-h {
  font-size: 12.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--nv-tenue); }

.nv-hue .nv-hue-nut-sug-l { margin: 0; padding-left: 20px; display: flex;
  flex-direction: column; gap: 8px; min-width: 0; }
.nv-hue .nv-hue-nut-sug-i { min-width: 0; }
.nv-hue .nv-hue-nut-sug-t { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 3px 8px; min-width: 0; }
.nv-hue .nv-hue-nut-sug-c { font-size: 13.5px; font-weight: 800; color: var(--nv-texto);
  overflow-wrap: anywhere; }
/* Los animales no llevan metros cuadrados y la pantalla lo DICE en vez de
   dejar el hueco: sus cabezas no son área. */
.nv-hue .nv-hue-nut-sug-a { font-size: 12px; color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hue-nut-sug-q { margin: 2px 0 0; font-size: 12px; line-height: 1.5;
  color: var(--nv-acento, #78CC8C); overflow-wrap: anywhere; }
.nv-hue .nv-hue-nut-sug-n { margin: 0; font-size: 12px; line-height: 1.5;
  overflow-wrap: anywhere; }

/* Lo que sigue sin cubrirse. Borde ámbar discontinuo: el mismo lenguaje que ya
   separa «esto es un límite conocido» de «esto está bien» en el resto de la
   pantalla (ver la tarjeta `is-pais` del balance). */
.nv-hue .nv-hue-nut-bajos { border: 1px dashed #c98a00; }
.nv-hue .nv-hue-nut-bajos-l { margin: 0; padding: 0; list-style: none; display: flex;
  flex-direction: column; gap: 7px; min-width: 0; }
.nv-hue .nv-hue-nut-bajos-i { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nv-hue .nv-hue-nut-bajos-n { font-size: 13px; font-weight: 700; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-nut-bajos-p { font-size: 12.5px; font-weight: 800; color: #c98a00; }
.nv-hue .nv-hue-nut-bajos-m { font-size: 12px; line-height: 1.5; color: var(--nv-tenue);
  overflow-wrap: anywhere; }

.nv-hue .nv-hue-nut-hueco { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nv-hue .nv-hue-nut-hueco-t { margin: 0; font-size: 13px; font-weight: 700;
  color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hue-nut-hueco-m { margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--nv-texto); overflow-wrap: anywhere; }

.nv-hue .nv-hue-nut-contraste-t { margin: 0; font-size: 13px; font-weight: 700;
  color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hue-nut-contraste-n { margin: 0; font-size: 12px; line-height: 1.5;
  overflow-wrap: anywhere; }

.nv-hue .nv-hue-nut-fuente { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nv-hue .nv-hue-nut-fuente-t { margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hue-nut-fuente-a { margin: 0; font-size: 12px; line-height: 1.45;
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-nut-fuente-u { font-size: 12px; color: var(--nv-acento, #78CC8C);
  overflow-wrap: anywhere; }

/* A partir de 620 px caben dos columnas de nutrientes: la lista de 24 filas es
   larga y en pantalla ancha obliga a un scroll que no hace falta. Por debajo se
   queda en una sola columna, que es lo medido a 360 px. Es el mismo corte que
   ya usa `.nv-hue-grid` más arriba, para no tener dos rejillas que respiran en
   anchos distintos en la misma pantalla. */
@media (min-width: 620px) {
  .nv-hue .nv-hue-nut-grupo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px; }
  .nv-hue .nv-hue-nut-grupo-h { grid-column: 1 / -1; }
  .nv-hue .nv-hue-nut-grupo > .nv-hue-nut-fila:nth-of-type(2) { border-top: 0; padding-top: 2px; }
}

/* ============================================================================
   EL CATÁLOGO DE ALIMENTOS — las fichas de los 117

   Lo pinta `modules/huerta_catalogo.js`. Existe porque la tabla tenía 117
   alimentos y la pantalla solo podía pedir 25.

   🔴 POR QUÉ NO ES UNA PARRILLA DE 33 COLUMNAS, que sería lo obvio:
   porque no la lee nadie. Ni Daniel, que tiene dislexia, ni un productor
   mirando el celular al sol en una finca. Así que cada nutriente es una FILA
   con el nombre siempre a la izquierda, el valor debajo en pequeño, y los dos
   porcentajes —hombre y mujer— cada uno en su renglón a la derecha.
   Ocupa más y se lee. Ése es el trato, y no se «optimiza» luego.

   Los grupos (Vitaminas, Minerales, Lo básico) van en cajas separadas: una
   lista de 33 filas seguidas se lee como un muro, y lo que hace falta es poder
   saltar al bloque que a uno le interesa.

   Medido a 360 px: los nombres largos («Vitamina B5 (ác. pantoténico)») y los
   motivos que manda el backend no tienen dónde partir, así que
   `overflow-wrap: anywhere` es obligatorio en todo lo que traiga texto de allá,
   y `min-width: 0` en los contenedores flex — la regla ya escrita en la
   cabecera de este archivo. */
.nv-hue .nv-hcat { display: flex; flex-direction: column; gap: 12px; min-width: 0;
  margin-top: 18px; }
.nv-hue .nv-hcat-off { margin: 8px 0; font-size: 12.5px; line-height: 1.5;
  color: var(--nv-tenue); overflow-wrap: anywhere; }

/* ── La lista ─────────────────────────────────────────────────────────── */
.nv-hue .nv-hcat-lista { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nv-hue .nv-hcat-buscar { width: 100%; box-sizing: border-box; padding: 11px 13px;
  font: inherit; font-size: 16px; background: var(--nv-superficie); color: var(--nv-texto);
  border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm, 14px); }
.nv-hue .nv-hcat-resumen { margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--nv-tenue); overflow-wrap: anywhere; }

.nv-hue .nv-hcat-seccion { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 12px; border-radius: var(--nv-r-sm, 14px);
  background: var(--nv-superficie); border: 1px solid var(--nv-linea); }
.nv-hue .nv-hcat-seccion-h { font-size: 12.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hcat-items { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.nv-hue .nv-hcat-item { display: inline-flex; align-items: baseline; gap: 5px;
  padding: 7px 11px; border-radius: 999px; border: 1px solid var(--nv-linea);
  background: transparent; color: var(--nv-texto); font: inherit; font-size: 13px;
  cursor: pointer; max-width: 100%; }
.nv-hue .nv-hcat-item:hover { border-color: var(--nv-acento, #78CC8C); }
.nv-hue .nv-hcat-item-n { overflow-wrap: anywhere; }
.nv-hue .nv-hcat-item-e { font-size: 10.5px; color: var(--nv-tenue); white-space: nowrap; }
.nv-hue .nv-hcat-item-e.is-no { color: #b4573b; }
.nv-hue .nv-hcat-volver { align-self: flex-start; background: transparent; border: 0;
  padding: 6px 0; font: inherit; font-size: 13px; color: var(--nv-acento, #78CC8C);
  cursor: pointer; }

/* ── La ficha ─────────────────────────────────────────────────────────── */
.nv-hue .nv-hcat-ficha { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nv-hue .nv-hcat-fcab { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nv-hue .nv-hcat-fnom { font-size: 19px; font-weight: 800; color: var(--nv-texto);
  text-transform: capitalize; overflow-wrap: anywhere; }
/* El nombre científico en cursiva, que es la convención de toda la biología —
   y es el ancla: `Sechium edule` es el mismo en los cuatro países donde el
   chayote se llama distinto. */
.nv-hue .nv-hcat-fcie { font-size: 13px; font-style: italic; color: var(--nv-tenue);
  overflow-wrap: anywhere; }
.nv-hue .nv-hcat-ffam { font-size: 12px; color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hcat-por100 { margin: 0; font-size: 12.5px; color: var(--nv-tenue);
  overflow-wrap: anywhere; }

/* El bloque de «no se puede calcular la tierra». Borde ámbar discontinuo: el
   mismo lenguaje que en el resto de la app separa «esto es un límite conocido»
   de «esto está mal». */
.nv-hue .nv-hcat-sinarea { display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 11px 12px; border-radius: var(--nv-r-sm, 14px); border: 1px dashed #c98a00; }
.nv-hue .nv-hcat-sinarea-t { font-size: 13px; font-weight: 800; color: #c98a00;
  overflow-wrap: anywhere; }
.nv-hue .nv-hcat-sinarea-m, .nv-hue .nv-hcat-sinarea-c { margin: 0; font-size: 12.5px;
  line-height: 1.5; color: var(--nv-texto); overflow-wrap: anywhere; }

.nv-hue .nv-hcat-grupo { display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 12px; border-radius: var(--nv-r-sm, 14px);
  background: var(--nv-superficie); border: 1px solid var(--nv-linea); }
.nv-hue .nv-hcat-grupo-h { font-size: 12.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--nv-tenue); margin-bottom: 6px; }

/* UNA FILA POR NUTRIENTE. `grid` con el nombre a la izquierda fijo y los
   porcentajes a la derecha: así todas las filas quedan alineadas entre sí y se
   puede comparar de un vistazo sin leerlas todas. */
.nv-hue .nv-hcat-fila { display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 2px 12px; min-width: 0;
  padding: 8px 0; border-top: 1px solid var(--nv-linea); }
.nv-hue .nv-hcat-grupo > .nv-hcat-fila:first-of-type { border-top: 0; }
.nv-hue .nv-hcat-fizq { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nv-hue .nv-hcat-fnut { font-size: 13px; font-weight: 700; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hcat-fval { font-size: 12.5px; font-weight: 800;
  color: var(--nv-acento, #78CC8C); overflow-wrap: anywhere; }
/* «sin medir» NO se pinta como un cero ni como un error: se apaga y se rotula.
   Que USDA no lo midiera no dice nada del alimento. */
.nv-hue .nv-hcat-fsin { font-size: 12px; font-style: italic; color: var(--nv-tenue); }

.nv-hue .nv-hcat-fder { display: flex; flex-direction: column; gap: 1px;
  align-items: flex-end; min-width: 0; cursor: help; }
.nv-hue .nv-hcat-fpct { display: flex; align-items: baseline; gap: 5px; }
.nv-hue .nv-hcat-fpct-k { font-size: 10.5px; font-weight: 800; color: var(--nv-tenue); }
.nv-hue .nv-hcat-fpct-v { font-size: 12.5px; font-weight: 800; color: var(--nv-texto);
  white-space: nowrap; }
.nv-hue .nv-hcat-fnota { grid-column: 1 / -1; margin: 4px 0 0; padding-left: 9px;
  border-left: 2px solid var(--nv-acento, #78CC8C); font-size: 12px; line-height: 1.5;
  color: var(--nv-texto); overflow-wrap: anywhere; }

.nv-hue .nv-hcat-sinmedir { display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 11px 12px; border-radius: var(--nv-r-sm, 14px); border: 1px solid var(--nv-linea); }
.nv-hue .nv-hcat-sinmedir-t { font-size: 12.5px; font-weight: 800; color: var(--nv-tenue);
  overflow-wrap: anywhere; }
.nv-hue .nv-hcat-sinmedir-l, .nv-hue .nv-hcat-sinmedir-n { margin: 0; font-size: 12px;
  line-height: 1.5; color: var(--nv-texto); overflow-wrap: anywhere; }

.nv-hue .nv-hcat-aviso { margin: 0; font-size: 12px; line-height: 1.5;
  color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hcat-proc { display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding-top: 8px; border-top: 1px solid var(--nv-linea); }
.nv-hue .nv-hcat-proc-t { font-size: 12px; color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hcat-proc-u { font-size: 12px; color: var(--nv-acento, #78CC8C);
  overflow-wrap: anywhere; }

/* A partir de 620 px la ficha entra en dos columnas: la lista de 33 filas es
   larga y en pantalla ancha obliga a un scroll que no hace falta. Mismo corte
   que el resto de esta pantalla, para no tener dos rejillas que respiran en
   anchos distintos. */
@media (min-width: 620px) {
  .nv-hue .nv-hcat-grupo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px; }
  .nv-hue .nv-hcat-grupo-h { grid-column: 1 / -1; }
  .nv-hue .nv-hcat-grupo > .nv-hcat-fila:nth-of-type(2) { border-top: 0; }
}

/* ============================================================================
   ¿QUE PUEDO SEMBRAR AQUI? — la pantalla del motor edafoclimatico

   Lo pinta `modules/huerta_edafo.js`.

   🔴 LA JERARQUIA NO ES ESTETICA: el backend devuelve TRES cosas distintas
   (puede/no puede · que tan bien · que tan bien lo describe el libro) y si se
   pintan al mismo nivel se leen como una nota de colegio. Peor: la tercera NO
   habla del terreno, habla del libro — mezclarla haria que un cultivo perfecto
   pareciera dudoso.

   Por eso:
     1. el numero de cultivos que van, GRANDE y arriba del todo;
     2. lo que falta por saber, en ambar, ANTES de la lista — no en un pie de
        pagina: es la diferencia entre una recomendacion y una apuesta;
     3. cada cultivo: el NOMBRE primero, la calidad en pequeno y con palabras
        ('va muy bien' / 'va bien' / 'va justo'), nunca un numero ni una nota;
     4. la frase literal del libro, dentro del detalle y a un toque. Esta para
        que un agronomo la EXIJA, no para que la lea todo el mundo.

   Pensado para leerse en el celular, al sol, en una finca. */
.nv-hue .nv-hed { display: flex; flex-direction: column; gap: 11px; min-width: 0;
  margin-top: 18px; }
.nv-hue .nv-hed-sub { margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hed-nota { margin: 0; font-size: 12px; line-height: 1.5;
  color: var(--nv-tenue); overflow-wrap: anywhere; }

.nv-hue .nv-hed-form { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.nv-hue .nv-hed-campo { display: flex; flex-direction: column; gap: 3px;
  flex: 1 1 130px; min-width: 0; }
.nv-hue .nv-hed-campo-l { font-size: 12px; font-weight: 700; color: var(--nv-texto); }
.nv-hue .nv-hed-campo-i { width: 100%; box-sizing: border-box; padding: 10px 12px;
  font: inherit; font-size: 16px; background: var(--nv-superficie); color: var(--nv-texto);
  border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm, 14px); }

.nv-hue .nv-hed-salida { display: flex; flex-direction: column; gap: 11px; min-width: 0; }

/* ── EL SELECTOR DE CULTIVOS (2026-08-28) ─────────────────────────────────────
   Sustituye a la fila de píldoras. La mecánica es la del selector de idiomas
   (`lang-selector.js`): botón, panel, buscador. Lo que cambia es que aquél elige
   uno y éste elige varios, así que el panel no se cierra al tocar un cultivo.

   🔴 LOS COLORES SON LOS QUE YA USA ESTA PANTALLA — `#2e9e5b` para lo que va
   bien y `#c98a00` para el aviso, los mismos de `.nv-hed-fac` y de
   `.nv-hue-avisos-h`. Un verde nuevo para decir lo mismo enseñaría dos idiomas
   en la misma pantalla.

   Y NINGÚN ESTADO SE CUENTA SOLO CON COLOR: cada grupo lleva su título y su
   frase de leyenda encima. Al sol, en una finca y con daltonismo, el color solo
   no dice nada. */
.nv-hue .nv-hue-sel { position: relative; min-width: 0; }
.nv-hue .nv-hue-sel-b { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; box-sizing: border-box; background: var(--nv-superficie);
  border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm, 14px);
  padding: 12px 14px; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--nv-texto); cursor: pointer; text-align: left; }
.nv-hue .nv-hue-sel-b[aria-expanded="true"] { border-color: var(--nv-acento); }
.nv-hue .nv-hue-sel-b-t { min-width: 0; overflow-wrap: anywhere; }
.nv-hue .nv-hue-sel-b-f { flex: none; color: var(--nv-tenue); font-size: 12px; }

/* El panel se ancla al botón y ocupa TODO su ancho: a 360 px un panel más
   estrecho que su botón parte los nombres en dos líneas sin necesidad. */
.nv-hue .nv-hue-sel-panel { position: absolute; z-index: 30; top: calc(100% + 6px);
  left: 0; right: 0; display: flex; flex-direction: column; gap: 8px;
  box-sizing: border-box; background: var(--nv-superficie);
  border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm, 14px);
  padding: 10px; min-width: 0; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
.nv-hue .nv-hue-sel-estado { margin: 0; font-size: 12px; line-height: 1.5;
  color: var(--nv-tenue); overflow-wrap: anywhere; }
/* 16 px en el buscador a propósito: por debajo de eso, iOS hace zoom al enfocar
   y descoloca el panel entero. Mismo criterio que `.nv-hed-campo-i`. */
.nv-hue .nv-hue-sel-buscar { width: 100%; box-sizing: border-box;
  background: transparent; border: 1px solid var(--nv-linea); border-radius: 10px;
  padding: 9px 11px; font: inherit; font-size: 16px; color: var(--nv-texto); }
.nv-hue .nv-hue-sel-lista { display: flex; flex-direction: column; gap: 10px;
  max-height: 46vh; overflow-y: auto; min-width: 0; }
.nv-hue .nv-hue-sel-vacio { margin: 6px 2px; font-size: 13px; color: var(--nv-tenue); }

.nv-hue .nv-hue-sel-g { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nv-hue .nv-hue-sel-g-h { font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--nv-tenue); padding: 2px 2px 0; }
.nv-hue .nv-hue-sel-g-l { margin: 0 2px 4px; font-size: 11.5px; line-height: 1.45;
  color: var(--nv-tenue); overflow-wrap: anywhere; }
.nv-hue .nv-hue-sel-g.is-bien .nv-hue-sel-g-h { color: #2e9e5b; }
.nv-hue .nv-hue-sel-g.is-justo .nv-hue-sel-g-h { color: #c98a00; }

.nv-hue .nv-hue-op { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  width: 100%; box-sizing: border-box; background: transparent; border: 0;
  border-left: 3px solid transparent; border-radius: 8px; padding: 8px 9px;
  font: inherit; font-size: 14px; color: var(--nv-texto); text-align: left;
  cursor: pointer; min-width: 0; }
.nv-hue button.nv-hue-op:hover, .nv-hue .nv-hue-op.is-marcado { background: rgba(127, 127, 127, .14); }
.nv-hue .nv-hue-op.is-on { background: rgba(46, 158, 91, .16); }
/* Los que solo tienen veredicto y no entran en la cuenta de metros: se VEN —es
   lo que se pidió— pero no se pueden pulsar, para que no falseen un número. */
.nv-hue .nv-hue-op.is-mirar { cursor: default; opacity: .78; }

/* La casilla es CSS y el ✓ es texto: así «elegido» no se confunde con la marca
   de aptitud, que va en el título del grupo y en el filete de color. */
.nv-hue .nv-hue-op-caja { flex: none; width: 18px; height: 18px; line-height: 16px;
  text-align: center; font-size: 12px; font-weight: 800;
  border: 1px solid var(--nv-linea); border-radius: 5px;
  background: transparent; color: transparent; visibility: hidden; }
.nv-hue button.nv-hue-op .nv-hue-op-caja { visibility: visible; }
.nv-hue .nv-hue-op.is-on .nv-hue-op-caja { background: var(--nv-acento);
  border-color: var(--nv-acento); color: #06231c; }
.nv-hue .nv-hue-op-n { min-width: 0; overflow-wrap: anywhere; }
.nv-hue .nv-hue-op.is-on .nv-hue-op-n { font-weight: 800; }
.nv-hue .nv-hue-op-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--nv-linea); color: var(--nv-tenue); }

/* 🔴 LA ÚNICA ETIQUETA DE ESTA PANTALLA QUE GRITA, Y ES A PROPÓSITO (2026-08-28).
   Marca los forrajes con un aviso de toxicidad de gravedad ALTA —la mimosina de
   la leucaena, el cianhídrico del sorgo, los oxalatos del kikuyo—, y va en la
   LISTA, no dentro de la ficha: un ganadero puede leer solo la lista y sembrar.

   Las demás etiquetas siguen en gris a propósito. Si «con aviso», «sin riesgo
   conocido» y «riesgo grave» se pintaran las tres igual de fuerte, ninguna se
   leería: es el aviso mal calibrado que la propia tabla de datos evita cuando
   se niega a marcar como tóxica una planta que se usa a diario sin problema.

   Rojo del mismo `#b4573b` que ya usan `.nv-hue-bal-peso.is-no` y
   `.nv-hue-hed-tit.is-no`. Un rojo nuevo para decir lo mismo enseñaría dos
   idiomas de color en la misma app. */
.nv-hue .nv-hue-op-tag.is-toxico { border-color: #b4573b; color: #b4573b;
  background: rgba(180, 87, 59, .12); }
/* El hueco entre el triángulo y la palabra va en TODAS las etiquetas que llevan
   icono, no solo en la roja: la de «con aviso» también lo lleva, y sin el hueco
   el triángulo se pega a la letra y se lee como una A rota (visto en el
   navegador el 2026-08-28). */
.nv-hue .nv-hue-op-tag { display: inline-flex; align-items: center; gap: 4px; }
.nv-hue .nv-hue-op-tag .nv-hue-i { display: inline-flex; }
.nv-hue .nv-hue-op-tag .nv-hue-i svg { width: 13px; height: 13px; }
/* La cabecera del bloque de riesgo dentro de la ficha, cuando es grave. Mismo
   rojo y mismo icono: la marca de la lista y la del detalle tienen que
   reconocerse como la misma cosa. */
.nv-hue .nv-hue-an-c .nv-hue-avisos-h { display: flex; align-items: center; gap: 6px; }

/* LO QUE VA BIEN, RESALTADO Y ARRIBA. Lo que va justo, visible y apagado. Lo que
   aquí no va, en gris y al final — pero NUNCA escondido. */
.nv-hue .nv-hue-sel-g.is-bien .nv-hue-op { border-left-color: #2e9e5b; }
.nv-hue .nv-hue-sel-g.is-bien .nv-hue-op-n { font-weight: 700; }
.nv-hue .nv-hue-sel-g.is-justo .nv-hue-op { border-left-color: #c98a00; }
.nv-hue .nv-hue-sel-g.is-no .nv-hue-op-n,
.nv-hue .nv-hue-sel-g.is-nosesabe .nv-hue-op-n,
.nv-hue .nv-hue-sel-g.is-nolibro .nv-hue-op-n { color: var(--nv-tenue); }

/* ============================================================================
   EL REDISEÑO: SECCIONES PLEGABLES (2026-08-28)

   Doce bloques abiertos a la vez no tienen jerarquía: todo pesa lo mismo, así
   que nada destaca, y el resultado es el cansancio que describió Daniel. Aquí
   está el vestido de la solución; el porqué está en la cabecera de `huerta.js`.

   🔴 CADA PLEGABLE ES UNA TARJETA, Y NO UNA LÍNEA CON UNA FLECHA. Una lista de
   títulos subrayados se lee como un índice y no como contenido: quien llega no
   sabría que ahí dentro está su respuesta. La tarjeta dice «esto es un bloque
   que existe y está lleno», y la línea de resumen dice de qué.

   ADITIVO, como toda esta hoja: nada de aquí abajo redefine una clase de
   arriba. Lo único que se hace es NEUTRALIZAR el marco propio de tres bloques
   (`.nv-hue-tit`, `.nv-hue-avisos`, `.nv-hue-fuente`) cuando van DENTRO de un
   plegable, y solo entonces: una tarjeta dentro de otra tarjeta es un borde de
   más, y la raya de la fuente flotando dentro de una caja no separa nada. Fuera
   del plegable siguen exactamente igual que antes. */
.nv-hue .nv-hue-plg { border: 1px solid var(--nv-linea); border-radius: var(--nv-r-sm, 14px);
  background: var(--nv-superficie); min-width: 0; }
.nv-hue .nv-hue-plg-s { cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  padding: 13px 38px 13px 14px; position: relative; min-width: 0;
  list-style: none; border-radius: var(--nv-r-sm, 14px); }
/* El marcador nativo se pinta a la izquierda y centrado, y en un summary de dos
   líneas queda descolgado del título. Se dibuja aquí, a la derecha y a la
   altura de la primera línea. Es un carácter, NO un emoji de color. */
.nv-hue .nv-hue-plg-s::-webkit-details-marker { display: none; }
.nv-hue .nv-hue-plg-s::marker { content: ''; }
.nv-hue .nv-hue-plg-s::after { content: '▾'; position: absolute; right: 14px; top: 13px;
  font-size: 13px; line-height: 1.4; color: var(--nv-tenue); }
.nv-hue .nv-hue-plg[open] > .nv-hue-plg-s::after { content: '▴'; }
.nv-hue .nv-hue-plg-t { font-size: 15px; font-weight: 700; line-height: 1.35;
  color: var(--nv-texto); overflow-wrap: anywhere; }
/* 🔴 LA LÍNEA DE «QUÉ HAY DENTRO» NO SE RECORTA NI SE PONE A UNA LÍNEA. Es lo
   que hace que plegar no sea esconder: cortada a la mitad obligaría a abrir
   para saber si vale la pena abrir, que es justo lo que evita. */
.nv-hue .nv-hue-plg-r { font-size: 12.5px; line-height: 1.5; color: var(--nv-tenue);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-plg-c { display: flex; flex-direction: column; gap: 16px;
  padding: 0 14px 14px; min-width: 0; }
/* El bloque que ya trae su propio marco no lleva dos. */
.nv-hue .nv-hue-plg-c > .nv-hue-tit { padding: 0; border: 0; background: none; }
.nv-hue .nv-hue-plg-c > .nv-hue-avisos { padding: 0; border: 0; border-radius: 0; }
.nv-hue .nv-hue-plg-c > .nv-hue-fuente { padding-top: 0; border-top: 0; }

/* LOS AVISOS SIGUEN EN ÁMBAR AUNQUE ESTÉN PLEGADOS, y el rótulo —«Léelo antes
   de creerte el número»— es el título del plegable, así que está SIEMPRE a la
   vista. Se pliega el texto, nunca la advertencia de que hay algo que leer. */
.nv-hue .nv-hue-plg.is-aviso { border-color: #c98a00; }
.nv-hue .nv-hue-plg.is-aviso .nv-hue-plg-t { color: #c98a00; }
.nv-hue .nv-hue-plg.is-aviso .nv-hue-plg-s::after { color: #c98a00; }

/* EL PIE: la letra pequeña honesta, más callada que la consulta de arriba pero
   nunca escondida. Sin fondo, para que el ojo sepa que ya salió del cuerpo. */
.nv-hue .nv-hue-pie { display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--nv-linea); min-width: 0; }
.nv-hue .nv-hue-pie .nv-hue-plg { background: none; }
.nv-hue .nv-hue-pie .nv-hue-plg-t { font-size: 13.5px; }

/* ============================================================================
   LO QUE NO ENTRÓ: SU FICHA NUTRICIONAL (2026-08-28)

   El backend ya mandaba `tieneFicha`, `comoIncluirlo` y `fichaEn`, y nadie los
   pintaba. Encargo de Daniel: «deben salir con su ficha nutricional».

   🔴 VERDE PARA «SÍ LA TENEMOS» Y ÁMBAR PARA «NO SUMA METROS». Son dos cosas
   distintas y tienen que verse distintas: la primera es una buena noticia, la
   segunda es el límite que no se puede olvidar al leer la tabla. El mismo verde
   `#2e9e5b` de «va bien en tu tierra» y el mismo ámbar `#c98a00` de los avisos:
   un color nuevo para decir lo mismo enseñaría dos idiomas en la misma app. */
.nv-hue .nv-hue-omit-si { font-size: 12px; font-weight: 700; color: #2e9e5b;
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-omit-como { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hue-omit-pq { margin-top: 5px; }
.nv-hue .nv-hue-omit-pq-s { cursor: pointer; list-style: none; font-size: 12px;
  color: var(--nv-tenue); text-decoration: underline; }
.nv-hue .nv-hue-omit-pq-s::-webkit-details-marker { display: none; }
.nv-hue .nv-hue-omit-pq-s::marker { content: ''; }
.nv-hue .nv-hue-omit-pq .nv-hue-omit-m { margin: 4px 0 0; }
.nv-hue .nv-hue-omit-f { display: flex; flex-direction: column; gap: 9px; margin-top: 7px;
  min-width: 0; }
.nv-hue .nv-hue-omit-fb { align-self: flex-start; font-size: 13px; padding: 7px 14px; }
.nv-hue .nv-hue-omit-fs { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nv-hue .nv-hue-omit-noentra { margin: 0; padding: 8px 10px; border-radius: 10px;
  border: 1px solid #c98a00; font-size: 12.5px; line-height: 1.5;
  color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hue-omit-g { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nv-hue .nv-hue-omit-gh { font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--nv-tenue); }
/* Una fila por nutriente, el nombre a la izquierda y el número a la derecha.
   A 360 px se envuelven en dos líneas antes que salirse de la caja. */
.nv-hue .nv-hue-omit-nf { display: flex; flex-wrap: wrap; gap: 2px 12px;
  justify-content: space-between; padding: 5px 0;
  border-bottom: 1px solid var(--nv-linea); min-width: 0; }
.nv-hue .nv-hue-omit-nk { font-size: 12.5px; line-height: 1.45; color: var(--nv-tenue);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-omit-nv { font-size: 12.5px; line-height: 1.45; font-weight: 700;
  color: var(--nv-texto); overflow-wrap: anywhere; }

.nv-hue .nv-hue-sel-pie { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px; border-top: 1px solid var(--nv-linea);
  padding-top: 8px; }
.nv-hue .nv-hue-sel-cuenta { font-size: 11.5px; line-height: 1.45;
  color: var(--nv-tenue); min-width: 0; overflow-wrap: anywhere; }
.nv-hue .nv-hue-sel-cuenta.is-tope { color: #c98a00; font-weight: 700; }
.nv-hue .nv-hue-chip-x { margin-left: 7px; font-weight: 800; }

/* 1) EL TITULAR. Lo unico que se lee de un vistazo desde lejos. */
.nv-hue .nv-hed-tit { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  min-width: 0; padding: 14px 15px; border-radius: var(--nv-r-sm, 14px);
  border-left: 4px solid var(--nv-linea); background: var(--nv-superficie);
  border-top: 1px solid var(--nv-linea); border-right: 1px solid var(--nv-linea);
  border-bottom: 1px solid var(--nv-linea); }
.nv-hue .nv-hed-tit.is-si { border-left-color: #2e9e5b; }
.nv-hue .nv-hed-tit.is-no { border-left-color: #b4573b; }
.nv-hue .nv-hed-tit-n { font-size: 30px; font-weight: 900; line-height: 1;
  color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hed-tit-t { font-size: 14px; font-weight: 700; color: var(--nv-tenue);
  overflow-wrap: anywhere; }

/* 2) LO QUE FALTA. Ambar y ANTES de la lista, no debajo. */
.nv-hue .nv-hed-falta { display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 11px 12px; border-radius: var(--nv-r-sm, 14px); border: 1px dashed #c98a00; }
.nv-hue .nv-hed-falta-t { font-size: 13px; font-weight: 800; color: #c98a00;
  overflow-wrap: anywhere; }
.nv-hue .nv-hed-falta-i { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nv-hue .nv-hed-falta-k { font-size: 12.5px; font-weight: 800; color: var(--nv-texto); }
.nv-hue .nv-hed-falta-p { font-size: 12.5px; line-height: 1.5; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hed-nomotivo { margin: 0; font-size: 13px; line-height: 1.55;
  color: var(--nv-texto); overflow-wrap: anywhere; }

.nv-hue .nv-hed-origen, .nv-hue .nv-hed-grupo, .nv-hue .nv-hed-det,
.nv-hue .nv-hed-lluvia, .nv-hue .nv-hed-suelo {
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  padding: 12px; border-radius: var(--nv-r-sm, 14px);
  background: var(--nv-superficie); border: 1px solid var(--nv-linea); }
.nv-hue .nv-hed-grupo-h, .nv-hue .nv-hed-lluvia-t { font-size: 12.5px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: var(--nv-tenue); }
.nv-hue .nv-hed-origen-f { display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.nv-hue .nv-hed-origen-k { font-size: 12px; font-weight: 700; color: var(--nv-texto); }
.nv-hue .nv-hed-origen-v { font-size: 12px; color: var(--nv-tenue); overflow-wrap: anywhere; }

/* 3) LA TARJETA DE CADA CULTIVO. En columna: el nombre primero y solo, para que
   la vista lo encuentre; lo demas debajo y en pequeno. En una linea, el nombre
   competiria con la calidad y ninguno de los dos se leeria rapido. */
.nv-hue .nv-hed-items { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.nv-hue .nv-hed-item { display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--nv-linea);
  border-left-width: 3px; background: transparent; color: var(--nv-texto);
  font: inherit; text-align: left; cursor: pointer; max-width: 100%; min-width: 0; }
.nv-hue .nv-hed-item.is-optimo { border-left-color: #2e9e5b; }
.nv-hue .nv-hed-item.is-bueno { border-left-color: var(--nv-acento, #78CC8C); }
.nv-hue .nv-hed-item.is-limite { border-left-color: #c98a00; }
.nv-hue .nv-hed-item:hover { border-color: var(--nv-acento, #78CC8C); }
.nv-hue .nv-hed-item-n { font-size: 14px; font-weight: 800; text-transform: capitalize;
  overflow-wrap: anywhere; }
.nv-hue .nv-hed-item-c { font-size: 11.5px; color: var(--nv-tenue); overflow-wrap: anywhere; }
/* La confianza habla del LIBRO, no del terreno: por eso se escribe con palabras
   («el libro lo describe con menos detalle») y no con un icono de duda, que se
   leeria como que la finca es mala. */
.nv-hue .nv-hed-item-f { font-size: 10.5px; color: var(--nv-tenue); font-style: italic;
  cursor: help; overflow-wrap: anywhere; }
.nv-hue .nv-hed-item-p { font-size: 10.5px; color: #c98a00; font-weight: 700; }

/* 4) EL DETALLE, y dentro la cita del libro. */
.nv-hue .nv-hed-det-cab { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nv-hue .nv-hed-det-nom { font-size: 17px; font-weight: 800; text-transform: capitalize;
  color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hed-det-cie { font-size: 12.5px; font-style: italic; color: var(--nv-tenue);
  overflow-wrap: anywhere; }
.nv-hue .nv-hed-fac { display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 8px 0; border-top: 1px solid var(--nv-linea); }
.nv-hue .nv-hed-fac-t { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 3px 8px; min-width: 0; }
.nv-hue .nv-hed-fac-k { font-size: 13px; font-weight: 700; color: var(--nv-texto); }
.nv-hue .nv-hed-fac-v { font-size: 12px; font-weight: 800; color: var(--nv-tenue); }
.nv-hue .nv-hed-fac.is-optimo .nv-hed-fac-v { color: #2e9e5b; }
.nv-hue .nv-hed-fac.is-fuera .nv-hed-fac-v { color: #b4573b; }
.nv-hue .nv-hed-fac-r { font-size: 12.5px; color: var(--nv-texto); overflow-wrap: anywhere; }
/* La cita del INIFAP: en cursiva y con barra, para que se lea como lo que es —
   palabra de la fuente, no nuestra. */
.nv-hue .nv-hed-fac-cita { margin: 3px 0 0; padding-left: 10px;
  border-left: 2px solid var(--nv-linea); font-size: 12px; line-height: 1.5;
  font-style: italic; color: var(--nv-tenue); overflow-wrap: anywhere; }

.nv-hue .nv-hed-lluvia-v { font-size: 13px; font-weight: 700; color: var(--nv-texto); }
.nv-hue .nv-hed-suelo-f { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nv-hue .nv-hed-suelo-k { font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; color: var(--nv-tenue); }
.nv-hue .nv-hed-suelo-v { font-size: 12.5px; line-height: 1.5; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hed-detalle { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   LA LISTA FILTRADA Y EL CULTIVO QUE APORTA CERO (2026-08-29)

   ADITIVO: tres clases nuevas, ninguna regla de arriba reescrita.

   🔴 EL «VER TODOS» TIENE QUE VERSE COMO UN BOTÓN Y NO COMO UNA NOTA. Lo que
   Daniel pidió es que lo que no sirve deje de estorbar POR DEFECTO, no que
   desaparezca: si la puerta de vuelta se lee como letra pequeña, esconder pasa
   a ser esconder de verdad. Por eso lleva borde, ancho completo y el mismo
   tamaño de texto que una opción de la lista.
   ══════════════════════════════════════════════════════════════════════════ */
.nv-hue .nv-hue-sel-vertodos { display: block; width: 100%; box-sizing: border-box;
  margin: 6px 0 2px; padding: 9px 10px; background: transparent;
  border: 1px dashed var(--nv-linea); border-radius: 9px;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--nv-texto);
  text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.nv-hue .nv-hue-sel-vertodos:hover { background: rgba(127, 127, 127, .14); }

/* La frase del cero va en su propio renglón y ocupa la fila entera: pegada al
   nombre se leería como una etiqueta más, y esto no es una etiqueta — es lo
   que hay que hacer para que ese cultivo deje de aportar cero. */
.nv-hue .nv-hue-op-cero { flex-basis: 100%; margin-left: 26px;
  font-size: 11.5px; line-height: 1.45; color: #c98a00; overflow-wrap: anywhere; }

/* El mismo aviso, fuera del desplegable y pegado a lo elegido. Ámbar y con
   filete: es lo único de esta zona que pide una acción. */
.nv-hue .nv-hue-chips-cero { flex-basis: 100%; margin: 4px 0 0; padding: 7px 10px;
  border-left: 3px solid #c98a00; border-radius: 0 8px 8px 0;
  background: rgba(201, 138, 0, .10); display: flex; flex-direction: column;
  gap: 2px; min-width: 0; }
.nv-hue .nv-hue-chips-cero-t { font-size: 12.5px; font-weight: 700;
  color: var(--nv-texto); overflow-wrap: anywhere; }
.nv-hue .nv-hue-chips-cero-d { font-size: 12px; line-height: 1.45;
  color: var(--nv-tenue); overflow-wrap: anywhere; }

/* ── LAS DOS FIRMAS DE LA DENSIDAD (2026-08-29) ──────────────────────────────
   «Mi Huerta» calcula metros con DOS tablas de densidad de siembra que no son
   la misma cosa y no se pueden leer como si lo fueran:

     `nv-hue-firma-st`   la experiencia de la Fundación Salva Terra, 13 años de
                         huertas de seguridad alimentaria en Colombia.
     `nv-hue-firma-pub`  56 densidades publicadas por instituciones de diez
                         países (AGROSAVIA, ICA, DANE, INIFAP, SADER, MAPA de
                         España, UF/IFAS…), cada una con su cita.

   🔴 SE PINTAN DISTINTO A PROPÓSITO. Dos párrafos idénticos y seguidos se leen
   como uno solo, y «uno solo» aquí significa la firma de la Fundación encima de
   una cifra que midió otro. La raya de color de la izquierda es lo que hace que
   se vean como dos cosas separadas de un vistazo, sin tener que leerlas.
   Sin color de relleno y sin iconos: es texto de procedencia, no una alerta. */
.nv-hue .nv-hue-firma { display: flex; flex-direction: column; gap: 6px;
  margin: 12px 0 0; padding: 10px 12px; border-radius: var(--nv-r-sm, 14px);
  border: 1px solid var(--nv-linea); border-left-width: 3px;
  min-width: 0; overflow-wrap: anywhere; }
.nv-hue .nv-hue-firma > p { margin: 0; }
.nv-hue .nv-hue-firma-st { border-left-color: var(--nv-acento); }
.nv-hue .nv-hue-firma-pub { border-left-color: #6fa8dc; }

/* ── EL MERCADO SEMANAL (2026-08-30) ─────────────────────────────────────────
   Encargo de Daniel: *«poner en el selector del cultivo que puedan editar o
   seleccionar unidades o kilos de ese producto a la semana»*. Vive pegado a los
   chips de lo elegido, FUERA del desplegable, que es donde se lee sin abrir
   nada.

   🔴 CADA CULTIVO EN SU CAJA, Y SE VE LA SEPARACIÓN. Cinco campos seguidos sin
   marco se leen como un formulario largo, y Daniel es disléxico: si no se ve
   dónde acaba el aguacate y empieza la mora, se escribe el número en la fila de
   al lado. El nombre va en negrita arriba de todo, no al lado de la casilla. */
.nv-hue .nv-hue-km { flex-basis: 100%; margin: 10px 0 0; min-width: 0;
  display: flex; flex-direction: column; gap: 10px; }
.nv-hue .nv-hue-km-t { margin: 0; font-size: 14px; font-weight: 700;
  color: var(--nv-texto); }
.nv-hue .nv-hue-km-ayuda { margin: 0; font-size: 12.5px; line-height: 1.5; }
.nv-hue .nv-hue-km-fila { display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border-radius: var(--nv-r-sm, 14px);
  border: 1px solid var(--nv-linea); min-width: 0; }
.nv-hue .nv-hue-km-n { font-size: 14px; font-weight: 700; color: var(--nv-texto);
  overflow-wrap: anywhere; }
.nv-hue .nv-hue-km-lb { font-weight: 600; }

/* Los dos botones de unidad. `is-on` tiene relleno y no solo un borde: un
   estado seleccionado que se distingue solo por el grosor del borde no se ve
   en un teléfono a pleno sol, y entonces alguien escribe unidades creyendo
   que escribe kilos. */
.nv-hue .nv-hue-km-sw { display: flex; gap: 6px; flex-wrap: wrap; }
.nv-hue .nv-hue-km-swb { font-size: 13px; padding: 6px 14px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--nv-linea);
  background: transparent; color: var(--nv-tenue); }
.nv-hue .nv-hue-km-swb:hover { color: var(--nv-texto); }
.nv-hue .nv-hue-km-swb.is-on { border-color: var(--nv-acento);
  background: var(--nv-acento); color: #0d1210; font-weight: 700; }

/* La caja del peso por unidad. Filete al lado, como las dos firmas de
   densidad, y por el mismo motivo: es un dato con procedencia —la de la
   persona— y tiene que verse que no lo pusimos nosotros. */
.nv-hue .nv-hue-km-peso { display: flex; flex-direction: column; gap: 6px;
  padding: 9px 11px; border-radius: var(--nv-r-sm, 14px);
  border: 1px solid var(--nv-linea); border-left-width: 3px;
  border-left-color: var(--nv-acento); min-width: 0; }
.nv-hue .nv-hue-km-peso > p { margin: 0; }
.nv-hue .nv-hue-km-tuyo { font-style: italic; }

/* El eco: lo que la persona acaba de escribir, dicho en la otra unidad, sin
   pedirle nada al servidor. Es lo que hace que la pantalla enseñe en vez de
   preguntar, así que se ve aunque no se busque. */
.nv-hue .nv-hue-km-eco:empty { display: none; }
.nv-hue .nv-hue-km-eco { margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--nv-texto); }
.nv-hue .nv-hue-km-puesto { margin: 0; }

/* Los metros, que es la respuesta a la pregunta entera. Se pintan con el color
   de acento porque son el número que la persona vino a buscar. */
.nv-hue .nv-hue-km-metros { margin: 0; font-size: 13px; line-height: 1.5;
  font-weight: 700; color: var(--nv-acento); overflow-wrap: anywhere; }
.nv-hue .nv-hue-km-cambiar { margin-top: 2px; }