/* ============================================================================
   subasta_pujas.css — EL HISTORIAL DE PUJAS Y LA CUENTA REGRESIVA.

   Pedido de Daniel el 2026-08-27 (PARTE F): «subastas con historial de pujas
   VISIBLE y cuenta regresiva». La palabra que manda es VISIBLE: el servidor
   lleva desde el hito 21 devolviendo la lista entera de pujas en
   `/api/subasta/lote-detalle`, con monto, hora, cual es tuya y cual va
   ganando — y la pantalla solo pintaba el numero «Pujas: 3». Construido,
   desplegado, verificado en verde, e invisible. La frase del dueño para esto
   es «no esta o NO SE VE».

   ─── POR QUE UN ARCHIVO NUEVO Y NO UN PARCHE A `app.css` ────────────────────
   Mismo motivo escrito en `biofabrica_nutrientes.css` y en el propio
   `index.html`: `app.css` son 362 KB sin dueño que tocan varios hilos a la vez,
   y un reemplazo de texto ahi es como se pisan dos agentes. El proyecto ya
   tiene la convencion de un CSS por modulo; esto la sigue.

   Se reutilizan los tokens que ya existen. Ningun color propio: una tarjeta de
   subasta con su paleta particular se ve como si fuera de otra aplicacion.
   ========================================================================== */

/* ── LA CUENTA REGRESIVA ────────────────────────────────────────────────────
   Va en mono y con `tabular-nums` A PROPOSITO. Un reloj que cambia cada
   segundo con cifras de ancho variable BAILA: los numeros se corren de sitio a
   cada tic y el ojo lo lee como un parpadeo, no como una cuenta. */
.nv-sb-reloj {
  font-family: var(--nv-f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  color: var(--nv-acento);
  letter-spacing: .02em;
}
/* VENCIDO NO ES ROJO DE ERROR: no se rompio nada, se acabo el plazo. */
.nv-sb-reloj.is-vencido { color: var(--nv-tenue); font-size: 12.5px; }

/* La fecha exacta debajo del reloj. El reloj dice CUANTO falta; la fecha dice
   CUANDO es. Quien tiene que mandar el camion necesita las dos, y por eso no
   se sustituyo una por otra. */
.nv-sb-relojfecha {
  display: block;
  font-size: 11px;
  color: var(--nv-tenue);
  margin-top: 2px;
  line-height: 1.35;
}

/* ── EL HISTORIAL ──────────────────────────────────────────────────────────
   `.nv-sb-pujasbox` nace VACIO y sin relleno: se llena al abrir la ficha. Sin
   `:empty` dejaria un hueco con borde en toda tarjeta cerrada, que se lee como
   una seccion que no cargo. */
.nv-sb-pujasbox { margin-top: 12px; }
.nv-sb-pujasbox:empty { display: none; }

.nv-sb-pujas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.nv-sb-pujafila {
  display: grid;
  /* posicion · monto · quien · hora — y `minmax(0,1fr)` en «quien» para que un
     uid largo se recorte en vez de empujar la hora fuera de la tarjeta. */
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 10px;
  background: var(--nv-superficie);
  border: 1px solid var(--nv-linea);
  border-radius: var(--nv-r-md, 10px);
  min-width: 0;
}

.nv-sb-pujapos {
  font-family: var(--nv-f-mono);
  font-size: 10.5px;
  color: var(--nv-fantasma);
}
.nv-sb-pujamonto {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nv-sb-pujaquien {
  font-size: 12px;
  color: var(--nv-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.nv-sb-pujahora {
  font-family: var(--nv-f-mono);
  font-size: 11px;
  color: var(--nv-tenue);
  white-space: nowrap;
}

/* LA QUE VA GANANDO SE DISTINGUE SIN LEER. Es el unico dato de esta lista que
   cambia una decision: si la de arriba ya es la mia, no vuelvo a pujar. */
.nv-sb-pujafila.is-gana {
  border-color: var(--nv-savia, var(--nv-ok));
  box-shadow: inset 3px 0 0 0 var(--nv-savia, var(--nv-ok));
}
/* LA MIA, con el acento. Y el borde de «gana» manda sobre este cuando son la
   misma: ir ganando es mas importante que ser mia. */
.nv-sb-pujafila.is-mia { border-color: var(--nv-acento); }
.nv-sb-pujafila.is-mia.is-gana { border-color: var(--nv-savia, var(--nv-ok)); }

/* ── A 360 px ──────────────────────────────────────────────────────────────
   Cuatro columnas no caben en la pantalla mas estrecha que usa este proyecto.
   Se apila en dos filas: arriba el monto con su posicion, abajo quien y
   cuando. Sin esto, la hora se sale de la tarjeta. */
@media (max-width: 400px) {
  .nv-sb-pujafila { grid-template-columns: auto minmax(0, 1fr); }
  .nv-sb-pujaquien { grid-column: 1 / -1; }
  .nv-sb-pujahora { grid-column: 1 / -1; }
}