/* ============================================================================
   dealroom_propuestas.css — LA PROPUESTA DE CADA PARTE, UNA AL LADO DE LA OTRA.

   Encargo de Daniel, 2026-08-27 (PARTE F): «chat + deal rooms PRELLENADOS con
   la última propuesta de cada parte».

   EL FALLO QUE VISTE ESTA HOJA: hasta hoy el trato era UN objeto compartido.
   Ana proponía 3.000, Beto contraproponía 2.800, y los 3.000 de Ana
   desaparecían — el deal room mentía sobre lo que cada parte había ofrecido,
   que es justo lo que un deal room existe para no hacer.

   ─── POR QUE UNA HOJA NUEVA Y NO UN PARCHE A `app.css` ──────────────────────
   Misma convención que ya siguen `subasta_pujas.css`, `biofabrica_nutrientes.css`
   y ocho más, y por el mismo motivo escrito en el propio `index.html`: `app.css`
   son 362 KB sin dueño que tocan varios hilos a la vez. Todo cuelga de
   `.nv-dl-*`, que es el prefijo que ya usa la sala.

   ─── SIN EMOJIS ────────────────────────────────────────────────────────────
   Regla de Daniel del 2026-08-27: iconografía oficial de Tuxani/Nutriverso en
   toda la interfaz. La discrepancia se marca con color Y CON PALABRAS («tú
   pedías X»), porque el color solo no sirve para quien no lo distingue.
   ========================================================================== */

/* La ficha de lo que pide el otro. Borde a la izquierda para que se lea como
   una cita —«esto lo dice él»— y no como otro formulario que se puede editar. */
.nv-dl-suya {
  border-left: 3px solid var(--nv-acento);
}
.nv-dl-suya .nv-dl-ctitle { gap: 7px; }

.nv-dl-cmp {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 10px;
}

/* rótulo · valor de él · «tú pedías X».
   `minmax(0,auto)` en el valor para que un número largo no empuje la tercera
   columna fuera de la tarjeta. */
.nv-dl-cmpf {
  display: grid;
  grid-template-columns: minmax(0, 88px) minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
  padding: 6px 8px;
  border-radius: 8px;
  min-width: 0;
}

.nv-dl-cmpk {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--nv-fantasma);
  overflow-wrap: anywhere;
}
.nv-dl-cmpv {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.nv-dl-cmpmio {
  font-size: 11.5px;
  color: var(--nv-tenue);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ── LO QUE NO CUADRA ──────────────────────────────────────────────────────
   Se marca SOLO lo que discrepa. Pintar las cuatro filas siempre haría que el
   color dejara de significar nada — y con él se pierde el único aviso de que
   hay algo que negociar. */
.nv-dl-cmpf.is-dif {
  background: color-mix(in oklab, var(--nv-cosecha, var(--nv-dorado)) 12%, transparent);
  box-shadow: inset 2px 0 0 0 var(--nv-cosecha, var(--nv-dorado));
}
.nv-dl-cmpf.is-dif .nv-dl-cmpmio { color: var(--nv-cosecha, var(--nv-dorado)); }
.nv-dl-hint.is-dif { color: var(--nv-cosecha, var(--nv-dorado)); }

.nv-dl-cmpnotas {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--nv-tenue);
  overflow-wrap: anywhere;
}

/* ── A 360 px ──────────────────────────────────────────────────────────────
   Tres columnas no caben en la pantalla más estrecha del proyecto: el «tú
   pedías X» baja a su propia línea. Sin esto se sale de la tarjeta justo el
   dato que hace útil la comparación. */
@media (max-width: 420px) {
  .nv-dl-cmpf { grid-template-columns: minmax(0, 88px) minmax(0, 1fr); }
  .nv-dl-cmpmio { grid-column: 1 / -1; }
}