/* ============================================================================
   TUXANI — Costo de alimentación y sustitución de concentrado (pecuario).

   HOJA PROPIA Y ADITIVA, Y NO ES UNA MANÍA: `app.css` no tiene dueño y el hilo
   de QA/rediseño lo está tocando EN PARALELO para adoptar en toda la app el
   sistema de tarjetas de `docs/hilos/DISENO_TOKENS_TARJETAS.md`. Dos agentes en
   el mismo archivo se pisan, y aquí lo que se perdería es la hoja del otro.
   Todo lo de abajo son clases NUEVAS bajo `.nvx-feed`: no redefine ni una regla
   existente, así que el orden del <link> da igual y el día que el hilo de QA
   integre el sistema completo esta hoja se borra sin dejar nada roto.

   ─── POR QUÉ LOS TOKENS SE MAPEAN Y NO SE COPIAN ──────────────────────────────
   El mockup declara `--savia`, `--texto`, `--linea`… en `:root`. Copiarlos tal
   cual aquí sería declarar una SEGUNDA fuente de la paleta, con dos defectos:
   uno, se desincroniza de `tokens.css` en cuanto alguien afine un color allá;
   dos, y peor, el mockup trae su propio bloque claro/oscuro y `tokens.css` YA
   tiene el suyo — dos interruptores para el mismo tema es como se consigue una
   tarjeta clara sobre un fondo oscuro. Se comprobó y los valores del mockup son
   EXACTAMENTE los de `tokens.css` con otro nombre (`--savia:#178069` es
   `--nv-savia:#178069`), tal como dice el pie del propio mockup. Así que aquí
   se apunta a los de la app: mismo aspecto, una sola fuente, y el modo oscuro
   sale gratis porque ya lo resuelve `tokens.css`.

   La regla central del diseño aprobado, escrita donde se aplica: EL TÍTULO VA
   SOLO EN SU FRANJA SUPERIOR (`.nvx-titlerow`) y el precio/estado va DEBAJO, en
   su propia fila (`.nvx-metarow`). Nunca compitiendo por el mismo renglón — es
   la corrección que pidió el dueño en ese hilo.
   ========================================================================== */

.nvx-feed {
  /* Los nombres van prefijados `--nvx-` a propósito: `--bg` o `--texto` a secas
     son nombres tan genéricos que el día que otra hoja los use dentro de este
     árbol se los encontraría redefinidos sin saber por qué. */
  --nvx-suelo: var(--nv-suelo);
  --nvx-superficie: var(--nv-superficie);
  --nvx-linea: var(--nv-linea);
  --nvx-linea-fuerte: var(--nv-linea-fuerte);
  --nvx-savia: var(--nv-savia);
  --nvx-dorado: var(--nv-dorado);
  --nvx-critico: var(--nv-critico);
  --nvx-texto: var(--nv-texto);
  --nvx-tenue: var(--nv-tenue);
  --nvx-sh-1: var(--nv-sh-1);
  --nvx-r-sm: var(--nv-r-sm);
  --nvx-r-md: var(--nv-r-md);
  --nvx-r-pill: var(--nv-r-pill);
  --nvx-f-display: var(--nv-f-display);
  --nvx-f-body: var(--nv-f-body);
  --nvx-f-mono: var(--nv-f-mono);
  --nvx-ease: var(--nv-ease);
  --nvx-dur: var(--nv-dur);

  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0 4px;
}

/* ---------- tarjeta ---------- */
.nvx-feed .nvx-card {
  background: var(--nvx-superficie);
  border: 1px solid var(--nvx-linea);
  border-radius: var(--nvx-r-md);
  box-shadow: var(--nvx-sh-1);
  overflow: hidden;
}
/* Borde de severidad. Se usa SOLO cuando hay algo que decir (falta un dato),
   nunca de adorno: un borde ámbar permanente deja de significar nada. */
.nvx-feed .nvx-sev { border-left: 3px solid var(--nvx-savia); }
.nvx-feed .nvx-sev.mid { border-left-color: var(--nvx-dorado); }
.nvx-feed .nvx-sev.high { border-left-color: var(--nvx-critico); }

.nvx-feed .nvx-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 14px;
}

/* LA FRANJA DEL TÍTULO. Solo el ícono y el título viven aquí. */
.nvx-feed .nvx-titlerow { display: flex; align-items: center; gap: 8px; }
.nvx-feed .nvx-ic {
  width: 26px; height: 26px;
  border-radius: var(--nvx-r-pill);
  display: grid; place-items: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--nvx-savia) 14%, transparent);
  color: var(--nvx-savia);
  font-size: 13px;
}
.nvx-feed .nvx-ic.mid {
  background: color-mix(in srgb, var(--nvx-dorado) 16%, transparent);
  color: var(--nvx-dorado);
}
.nvx-feed .nvx-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--nvx-f-display);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.28;
  text-wrap: balance;
  color: var(--nvx-texto);
}

/* LA FILA DE ABAJO. Aquí van el subtítulo y el número/estado, y por eso no
   compiten con el título: están en otro renglón, no a su derecha. */
.nvx-feed .nvx-metarow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.nvx-feed .nvx-sub { font-size: 11px; color: var(--nvx-tenue); }
.nvx-feed .nvx-stat {
  font-family: var(--nvx-f-mono);
  font-weight: 700;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--nvx-texto);
}
.nvx-feed .nvx-stat small {
  font-family: var(--nvx-f-body);
  font-weight: 600;
  font-size: 10.5px;
  color: var(--nvx-tenue);
  margin-left: 2px;
}
/* La raya de «no lo hemos medido». NO es un cero y no se pinta como un número
   fuerte: un cero en mono y en negrita se lee como una medición. */
.nvx-feed .nvx-stat.is-vacio { color: var(--nvx-tenue); font-weight: 600; }

/* ---------- chips ---------- */
.nvx-feed .nvx-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 10.5px/1 var(--nvx-f-body);
  color: var(--nvx-tenue);
  background: var(--nvx-suelo);
  border: 1px solid var(--nvx-linea-fuerte);
  border-radius: var(--nvx-r-pill);
  padding: 5px 9px;
  white-space: nowrap;
}
.nvx-feed .nvx-chip.ok { color: var(--nvx-savia); }
.nvx-feed .nvx-chip.mid { color: var(--nvx-dorado); }
.nvx-feed .nvx-chip.high { color: var(--nvx-critico); }

/* ---------- cuerpo colapsable ---------- */
.nvx-feed .nvx-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none; border-top: 1px solid var(--nvx-linea);
  color: var(--nvx-tenue);
  font: 600 11.5px/1 var(--nvx-f-body);
  padding: 9px; cursor: pointer;
  transition: var(--nvx-dur) var(--nvx-ease);
}
.nvx-feed .nvx-toggle:hover { color: var(--nvx-savia); background: var(--nvx-suelo); }
.nvx-feed .nvx-toggle svg { transition: transform var(--nvx-dur) var(--nvx-ease); flex-shrink: 0; }
.nvx-feed .nvx-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nvx-feed .nvx-bodywrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--nvx-dur) var(--nvx-ease);
}
.nvx-feed .nvx-bodywrap.open { grid-template-rows: 1fr; }
.nvx-feed .nvx-bodyinner { overflow: hidden; min-height: 0; }
.nvx-feed .nvx-body {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--nvx-linea);
  font-size: 12px; color: var(--nvx-tenue);
  display: flex; flex-direction: column; gap: 7px;
}
.nvx-feed .nvx-kv { display: flex; justify-content: space-between; gap: 10px; }
.nvx-feed .nvx-kv b { color: var(--nvx-texto); font-weight: 600; }

/* El lado derecho de la fila de abajo. Puede llevar el número, o la raya y uno
   o dos chips con el motivo de que no lo haya — envuelve en vez de apretarse. */
.nvx-feed .nvx-metaend {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end;
}

/* La franja bajo la cabecera: motivos, formularios en el sitio, y la salida del
   recomendador. Fuera de `.nvx-head` para que nada de esto pueda acabar
   colándose en el renglón del título. */
.nvx-feed .nvx-zona { padding: 0 14px 13px; }
.nvx-feed .nvx-zona:empty { padding: 0; }
.nvx-feed .nvx-out { display: flex; flex-direction: column; gap: 10px; }

/* ---------- fila horizontal (las parcelas de la finca) ---------- */
.nvx-feed .nvx-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--nvx-superficie);
  border: 1px solid var(--nvx-linea);
  border-radius: var(--nvx-r-md);
  padding: 12px 13px; width: 100%;
  box-shadow: var(--nvx-sh-1);
}
.nvx-feed .nvx-row-mid { flex: 1 1 128px; min-width: 0; }
.nvx-feed .nvx-row-title {
  font-weight: 700; font-size: 13.5px; line-height: 1.3;
  color: var(--nvx-texto); text-wrap: balance;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.nvx-feed .nvx-row-sub { font-size: 11.5px; color: var(--nvx-tenue); margin-top: 2px; }
.nvx-feed .nvx-row-end { flex-shrink: 0; text-align: right; white-space: nowrap; }
.nvx-feed .nvx-rows { display: flex; flex-direction: column; gap: 9px; }

/* ---------- lo propio de este módulo ---------- */

/* EL LÍMITE («esto no es una ración») VA GRANDE Y ARRIBA, NO EN LETRA CHICA.
   Es la frase que impide que una sugerencia se lea como una formulación, y una
   advertencia que hay que buscar con lupa es una advertencia que no se dio. */
.nvx-feed .nvx-limite {
  display: flex; gap: 9px; align-items: flex-start;
  background: color-mix(in srgb, var(--nvx-dorado) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nvx-dorado) 34%, transparent);
  border-radius: var(--nvx-r-sm);
  padding: 11px 13px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--nvx-texto);
}

/* El aviso de «este lote no tiene finca». Mismo tono que el resto de motivos
   grises de la pantalla: informa, no alarma. */
.nvx-feed .nvx-nota {
  font-size: 12px; line-height: 1.5; color: var(--nvx-tenue);
  border-left: 2px solid var(--nvx-linea-fuerte);
  padding: 2px 0 2px 10px;
}

.nvx-feed .nvx-sec {
  font-family: var(--nvx-f-display); font-weight: 700;
  font-size: 12px; letter-spacing: -.01em;
  color: var(--nvx-texto);
  margin-top: 4px;
}

/* Una opción de sustitución. El rango va en mono y con su unidad: es el número
   que el productor va a copiar, y un rango en la misma fuente que la prosa se
   lee como parte de la frase. */
.nvx-feed .nvx-op { display: flex; flex-direction: column; gap: 6px; }
.nvx-feed .nvx-oprango {
  font-family: var(--nvx-f-mono); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--nvx-savia);
}
.nvx-feed .nvx-oplinea { font-size: 12px; line-height: 1.5; color: var(--nvx-tenue); }
.nvx-feed .nvx-oplinea b { color: var(--nvx-texto); font-weight: 600; }

.nvx-feed .nvx-ref {
  display: block; font-size: 12px; color: var(--nvx-savia);
  text-decoration: none; padding: 3px 0;
}
.nvx-feed .nvx-ref:hover { text-decoration: underline; }
.nvx-feed .nvx-refsrc { color: var(--nvx-tenue); font-size: 11px; }

/* El formulario que se abre EN EL SITIO donde falta el dato — los kilos del
   bulto tras un dictado rechazado, o el precio del kilo desde la tarjeta de
   costo. Va dentro de la tarjeta a propósito: mandar al productor a otra
   pantalla a declarar un número es cómo se pierde el registro que iba a hacer. */
.nvx-feed .nvx-inline,
.nv-lv .nvx-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px;
}
.nvx-feed .nvx-inline input,
.nv-lv .nvx-inline input { flex: 1 1 130px; min-width: 0; }
.nvx-feed .nvx-inlinenota,
.nv-lv .nvx-inlinenota {
  flex: 1 1 100%;
  font-size: 12px; line-height: 1.5;
  color: var(--nv-tenue);
}
/* El formulario de recuperación del dictado vive FUERA de `.nvx-feed` (cuelga
   del compositor), así que sus tokens salen directos de `tokens.css`. */
.nv-lv .nvx-rescate {
  background: var(--nv-superficie);
  border: 1px solid var(--nv-linea-fuerte);
  border-left: 3px solid var(--nv-dorado);
  border-radius: var(--nv-r-md);
  padding: 12px 13px;
  margin: 8px 0;
}