/* ============================================================================
   biofabrica_nutrientes.css — la tabla del ESPECTRO NUTRICIONAL COMPLETO.

   Pedido de Daniel el 2026-08-27: «no es solo NPK, son TODOS los nutrientes»,
   y sobre el proyecto entero: «ahora no está o NO SE VE». Este archivo existe
   por la segunda mitad de esa frase: el balance puede venir perfecto en el JSON
   y seguir incumplido si en la pantalla es una lista gris que nadie lee.

   ─── POR QUE UN ARCHIVO NUEVO Y NO UN PARCHE A `app.css` ────────────────────
   `app.css` son 362 KB sin dueño y lo tocan varios hilos: un reemplazo de texto
   ahí es como se pisan dos agentes. El proyecto YA tiene la convención de un CSS
   por módulo cargado desde `index.html` (asistente, precios, huerta, informe,
   licitaciones…), así que esto la sigue en vez de estrenar otra.

   Se reutilizan los tokens que ya existen (`--nv-savia`, `--nv-dorado`,
   `--nv-critico`, `--nv-superficie`, `--nv-linea`, `--nv-tenue`, `--nv-r-md`):
   inventar colores propios aquí haría que esta tarjeta se viera de otra app.
   ========================================================================== */

.nv-bf-nut {
  background: var(--nv-superficie);
  border: 1px solid var(--nv-linea);
  border-radius: var(--nv-r-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nv-bf-nut-cab { display: flex; flex-direction: column; gap: 3px; }
.nv-bf-nut-muestra,
.nv-bf-nut-cultivo { font-size: 11.5px; color: var(--nv-tenue); margin: 0; line-height: 1.45; }

/* SIN ANALISIS NO SE PINTA UNA TABLA VACIA: se pinta el motivo, y se pinta con
   peso suficiente para que se lea como una explicación y no como un pie de
   página. Un hueco explicado es información; un hueco mudo parece un fallo. */
.nv-bf-nut-sinanalisis {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
  color: var(--nv-texto);
  background: color-mix(in srgb, var(--nv-dorado) 9%, var(--nv-superficie));
  border: 1px solid color-mix(in srgb, var(--nv-dorado) 30%, transparent);
  border-radius: var(--nv-r-sm);
  padding: 11px 12px;
}

.nv-bf-nut-grupo {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nv-tenue);
}

/* La tabla se desborda EN SU PROPIA CAJA, no empuja la página: en un teléfono
   son cinco columnas y el modo de fallo silencioso sería que el productor
   nunca llegue a ver la columna de la lectura. */
.nv-bf-nut-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.nv-bf-nut-tabla th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nv-tenue);
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--nv-linea);
}
.nv-bf-nut-tabla td {
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--nv-linea) 60%, transparent);
  vertical-align: top;
}
.nv-bf-nut-tabla tr:last-child td { border-bottom: 0; }

/* El símbolo químico manda visualmente: es lo que un agrónomo busca al barrer
   la tabla con la vista. El nombre largo va debajo, en tono menor. */
.nv-bf-nut-e { min-width: 108px; }
.nv-bf-nut-sim {
  display: inline-block;
  min-width: 26px;
  font-family: var(--nv-f-mono);
  font-weight: 800;
  font-size: 13px;
  color: var(--nv-texto);
}
.nv-bf-nut-nom { color: var(--nv-tenue); font-size: 11.5px; }

.nv-bf-nut-lleva,
.nv-bf-nut-lote,
.nv-bf-nut-pide { font-family: var(--nv-f-mono); font-size: 11.5px; color: var(--nv-texto); }
.nv-bf-nut-pide { color: var(--nv-tenue); }

.nv-bf-nut-v { white-space: nowrap; }
.nv-bf-nut-riq { margin-left: 6px; font-family: var(--nv-f-mono); font-size: 11px; color: var(--nv-tenue); }

/* «No se sabe» NO se pinta en gris de relleno: se pinta legible, porque saber
   QUÉ falta es la mitad de lo que hace útil esta tabla. */
.nv-bf-nut-nose { font-size: 11px; color: var(--nv-tenue); font-style: italic; white-space: normal; }

/* La fila entera se tiñe según la lectura: en una tabla de 17 filas, el color
   es lo que deja ver de un vistazo dónde hay problema. */
.nv-bf-nut-fila.v-pobre { background: color-mix(in srgb, var(--nv-critico) 6%, transparent); }
.nv-bf-nut-fila.v-rico { background: color-mix(in srgb, var(--nv-dorado) 7%, transparent); }
.nv-bf-nut-fila.v-sinDato { opacity: .72; }

.nv-bf-nut-res {
  border-top: 1px solid var(--nv-linea);
  padding-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.nv-bf-nut-res p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--nv-tenue); }
.nv-bf-nut-pobres { color: var(--nv-critico) !important; font-weight: 700; }
.nv-bf-nut-ricos { color: var(--nv-dorado) !important; font-weight: 700; }

/* EL AVISO DE QUE ESTO NO ES UNA DOSIS. Va con borde y peso propio: un índice
   sin su advertencia al lado se lee como una dosis, y una dosis mal puesta
   quema una cosecha. No es letra pequeña por eso. */
.nv-bf-nut-aviso {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--nv-texto);
  background: color-mix(in srgb, var(--nv-critico) 7%, var(--nv-superficie));
  border-left: 3px solid color-mix(in srgb, var(--nv-critico) 55%, transparent);
  border-radius: 0 var(--nv-r-sm) var(--nv-r-sm) 0;
  padding: 10px 12px;
}

.nv-bf-nut-fuentes { border-top: 1px solid var(--nv-linea); padding-top: 9px; }
.nv-bf-nut-fl { margin: 6px 0 2px; font-size: 11px; font-weight: 700; color: var(--nv-tenue); }
.nv-bf-nut-fuentes .nv-bf-cita { font-size: 11.5px; line-height: 1.45; color: var(--nv-tenue); }

.nv-bf-cultivo { width: 100%; }

/* 🔴 EL AVISO DE QUE LA TABLA ES UN ESTIMADO.

   Va ARRIBA de la tabla, no al pie, y con el mismo peso visual que el cartel de
   «sin analisis» — porque cumple la misma funcion: decir de donde sale el
   numero antes de que alguien lo lea. Si esto se leyera como una nota al margen,
   la tabla se leeria como un analisis de laboratorio, que es justo lo que no es.

   Se distingue del dorado del hueco: aquel avisa de que FALTA algo; este de que
   lo que hay es aproximado. Dos mensajes distintos no pueden tener el mismo
   color, o el ojo deja de mirarlos. */
.nv-bf-nut-estimado {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 10px;
  color: var(--nv-texto);
  background: color-mix(in srgb, var(--nv-acento) 8%, var(--nv-superficie));
  border: 1px solid color-mix(in srgb, var(--nv-acento) 28%, transparent);
  border-left-width: 3px;
  border-radius: var(--nv-r-sm);
  padding: 10px 12px;
}

/* La invitacion a mandar analizar, cuando no hay ni estimado. Mas discreta que
   el hueco: es un consejo, no un aviso. */
.nv-bf-nut-mejor {
  font-size: 12px;
  line-height: 1.5;
  margin: 9px 0 0;
  color: var(--nv-texto-2, var(--nv-texto));
}

/* ═══ TUS LOTES EN EL FORMULADOR ═══
   Botones grandes y con la información de un vistazo: nombre, cultivo, área y
   —lo que más importa— si ese lote tiene análisis de suelo. Esa última línea es
   la que separa una dosis calculada con su tierra de una calculada a ciegas, así
   que se ve ANTES de tocar, no después. */
.nv-fm-lotes { margin: 0 0 18px; }
.nv-fm-lote {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  text-align: left; margin: 0 0 8px; padding: 11px 13px; cursor: pointer;
  background: var(--nv-superficie);
  border: 1px solid color-mix(in srgb, var(--nv-texto) 14%, transparent);
  border-radius: var(--nv-r-sm);
  color: var(--nv-texto);
  transition: border-color 140ms ease, background 140ms ease;
}
.nv-fm-lote:hover { border-color: color-mix(in srgb, var(--nv-acento) 45%, transparent); }
.nv-fm-lote:focus-visible { outline: 2px solid var(--nv-acento); outline-offset: 2px; }
.nv-fm-lote.sel {
  border-color: var(--nv-acento);
  background: color-mix(in srgb, var(--nv-acento) 8%, var(--nv-superficie));
}
.nv-fm-lote strong { font-size: 14px; }
.nv-fm-lote-d { font-size: 12px; opacity: .75; }
/* Sin análisis en gris, con análisis en verde: el color hace el trabajo que
   haría leerse la línea entera. */
.nv-fm-lote-an { font-size: 11.5px; opacity: .65; }
.nv-fm-lote-an.ok { opacity: 1; color: var(--nv-ok, #3fb27f); }
/* Los lotes incompletos: visibles pero sin competir con los que sí sirven. */
.nv-fm-lotes-faltan { margin: 12px 0 4px; font-size: 12px; }
.nv-fm-lotes-lista { margin: 0 0 4px; padding-left: 18px; font-size: 11.5px; opacity: .7; }
.nv-fm-lotes-lista li { margin: 2px 0; }