/* ============================================================================
   formulacion.css — LA PESTAÑA «FORMULAR» DE LA BIOFABRICA.

   Daniel, 2026-08-29: «no vi el motor de formulacion en biofabrica». El motor
   existia con 168 asertos en verde y no tenia pantalla. Esto viste esa pantalla.

   ─── POR QUE UN ARCHIVO NUEVO ───────────────────────────────────────────────
   `app.css` son 362 KB sin dueño y lo tocan varios hilos a la vez; y
   `biofabrica_nutrientes.css` lo esta editando otro agente ahora mismo. El
   proyecto ya tiene la convencion de un CSS por modulo cargado desde
   `index.html`, asi 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 aqui haria que esta pestaña se viera de otra aplicacion.

   ─── LA REGLA DE COLOR DE ESTE ARCHIVO, QUE NO ES DECORATIVA ────────────────
   Aqui conviven CUATRO mensajes que NO se pueden confundir de un vistazo, y por
   eso cada uno tiene su color y su peso:

     · el DATO             la dosis, en rango. Es lo que se lleva al lote.
     · el HUECO declarado  «no lo sabemos, y esto es lo que falta». En dorado,
                           que es como esta app marca lo que falta desde la
                           tabla de nutrientes.
     · el OJO              «estos kilos ya son lo que se echa». En critico,
                           porque confundirlo triplica la dosis.
     · la FIRMA            esto no es una recomendacion firmada. Discreta pero
                           siempre presente: si gritara, se dejaria de leer.

   Y una regla de forma: NADA depende del color por si solo. El hueco lleva su
   texto, el ojo lleva su texto. Quien no distinga los tonos lee lo mismo.
   ========================================================================== */

.nv-fm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nv-fm-tit { margin: 0; font-size: 17px; }
.nv-fm-intro { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--nv-tenue); }

/* Los pasos numerados. Van con numero porque son un orden, no un menu: elegir
   el cultivo antes que el sistema deja media pantalla sin sentido. */
.nv-fm-paso {
  margin: 6px 0 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--nv-tenue);
}

/* ─── LOS SEIS SISTEMAS ──────────────────────────────────────────────────── */
.nv-fm-sistemas { display: flex; flex-wrap: wrap; gap: 7px; }

.nv-fm-sis {
  border: 1px solid var(--nv-linea);
  background: var(--nv-superficie);
  color: var(--nv-texto);
  border-radius: var(--nv-r-sm, 8px);
  padding: 8px 13px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.nv-fm-sis:hover { border-color: var(--nv-savia); }
/* EL ELEGIDO SE VE, y no solo por el color: cambia el grosor del texto. */
.nv-fm-sis.on {
  border-color: var(--nv-savia);
  background: color-mix(in srgb, var(--nv-savia) 12%, var(--nv-superficie));
  font-weight: 600;
}

/* El metodo de ese sistema, pegado a la eleccion: hay que entender por que la
   acuaponia contesta distinto ANTES de pulsar calcular. */
.nv-fm-metodo {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--nv-texto);
  border-left: 3px solid var(--nv-savia);
  padding-left: 10px;
}

/* ─── LOS CAMPOS ─────────────────────────────────────────────────────────── */
.nv-fm-cultivo,
.nv-fm-num {
  width: 100%;
  max-width: 340px;
  padding: 9px 11px;
  font-size: 14px;
  color: var(--nv-texto);
  background: var(--nv-superficie);
  border: 1px solid var(--nv-linea);
  border-radius: var(--nv-r-sm, 8px);
}
.nv-fm-lab {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: var(--nv-tenue);
  margin-top: 8px;
}

/* El hueco para subir el analisis propio. Enmarcado para que se lea como una
   invitacion y no como un requisito: sin el se formula igual. */
.nv-fm-analisis {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px dashed var(--nv-linea);
  border-radius: var(--nv-r-md, 12px);
  padding: 12px;
}

.nv-fm-acc { margin-top: 10px; }

/* ─── EL RESULTADO ───────────────────────────────────────────────────────── */
.nv-fm-res {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--nv-linea);
  padding-top: 14px;
  margin-top: 4px;
}

.nv-fm-sub { margin: 0; font-size: 14px; }
.nv-fm-etq { margin: 0; font-size: 13px; font-weight: 600; }

/* CON QUE SE TRABAJO. Cambia de tono cuando manda el analisis del productor,
   porque es exactamente la diferencia que quiere ver quien se molesto en
   subirlo: laboratorio > estimado > hueco declarado. */
.nv-fm-conque {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--nv-tenue);
  border-left: 3px solid var(--nv-linea);
  padding-left: 10px;
}
.nv-fm-conque.lab {
  border-left-color: var(--nv-savia);
  color: var(--nv-texto);
}

/* 🔴 EL AVISO QUE IMPIDE TRIPLICAR LA DOSIS. Va en critico y ARRIBA de la
   tabla: leido debajo, el productor ya se llevo los kilos en la cabeza. */
.nv-fm-ojo {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--nv-texto);
  background: color-mix(in srgb, var(--nv-critico) 8%, var(--nv-superficie));
  border: 1px solid color-mix(in srgb, var(--nv-critico) 32%, transparent);
  border-radius: var(--nv-r-sm, 8px);
  padding: 10px 12px;
}

/* EL HUECO DECLARADO. Dorado, igual que en la tabla de nutrientes: en esta app
   el dorado ya significa «esto falta y se dice por que». */
.nv-fm-hueco {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  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, 8px);
  padding: 10px 12px;
}

.nv-fm-universal,
.nv-fm-balance,
.nv-fm-mas,
.nv-fm-ok { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--nv-tenue); }
.nv-fm-balance { color: var(--nv-texto); }

.nv-fm-aviso {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--nv-tenue);
}

/* LA FIRMA. Siempre presente y siempre discreta: un aviso que grita se deja de
   leer a la tercera pantalla, y este tiene que seguir ahi en la trigesima. */
.nv-fm-firma {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--nv-tenue);
  border-top: 1px solid var(--nv-linea);
  padding-top: 9px;
}

.nv-fm-err {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--nv-texto);
  background: color-mix(in srgb, var(--nv-critico) 8%, var(--nv-superficie));
  border: 1px solid color-mix(in srgb, var(--nv-critico) 30%, transparent);
  border-radius: var(--nv-r-sm, 8px);
  padding: 11px 12px;
}

/* ─── LAS TABLAS ─────────────────────────────────────────────────────────── */
/* LA TABLA SE DESPLAZA DENTRO DE SU CAJA, no empuja la pagina. En un telefono
   la columna del motivo es larga y sin esto el modulo entero se va de ancho. */
.nv-fm-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  display: block;
  overflow-x: auto;
}
.nv-fm-tabla th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--nv-tenue);
  font-weight: 600;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--nv-linea);
  white-space: nowrap;
}
.nv-fm-tabla td {
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--nv-linea) 55%, transparent);
  vertical-align: top;
}
/* El simbolo quimico no se traduce y es la llave de la fila: va en monoespaciada
   para que las 17 filas se lean en columna sin bailar. */
.nv-fm-e {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  white-space: nowrap;
}
/* EL DATO. Sin envolver, porque «entre 120 y 150 kg/ha» partido en dos lineas
   por la mitad se lee como dos numeros sueltos. */
.nv-fm-v { white-space: nowrap; }
.nv-fm-med { font-size: 11.5px; color: var(--nv-tenue); }

/* «NO LO SABEMOS» Y SU MOTIVO. Dos bloques, nunca dos `span`: pegados salia
   «No lo sabemosSe sabe que suele faltar…», y asi se vio en pantalla. */
.nv-fm-nose { min-width: 190px; }
.nv-fm-nose-t {
  font-weight: 600;
  color: color-mix(in srgb, var(--nv-dorado) 70%, var(--nv-texto));
}
.nv-fm-nose-d {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--nv-tenue);
  margin-top: 3px;
  white-space: normal;
}

.nv-fm-nopongas {
  border: 1px solid color-mix(in srgb, var(--nv-critico) 28%, transparent);
  border-radius: var(--nv-r-sm, 8px);
  padding: 10px 12px;
}
.nv-fm-pez {
  margin: 3px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: 13px;
}