/* ============================================================================
   TUXANI — PRECIOS (hito 32). Hoja propia y ADITIVA.

   POR QUE NO VA EN `app.css`: ese archivo no tiene dueño y lo toca todo el
   mundo; dos agentes escribiendo en el mismo sitio se pisan. El precedente lo
   dejo el hito 24 con `asistente.css`. Aqui solo hay clases NUEVAS (`nv-pr-*`,
   `nv-mk-palterna`, `nv-mk-reparto`, `nv-mk-aprecios`): no se redefine ni una
   sola regla de `app.css`, asi que el orden de carga da igual y nada de lo que
   ya funcionaba puede cambiar de aspecto por culpa de este archivo.

   Y LOS COLORES SALEN DE `tokens.css`, ninguno escrito a mano: el dia que la
   marca cambie una variable, esta pantalla cambia con las demas en vez de
   quedarse sola con un verde viejo.
   ========================================================================== */

/* ─── Las pestañas ─────────────────────────────────────────────────────────
   Un tamaño de toque de 40px de alto: esto se usa de pie, en el campo, con
   guantes y con sol. Y la activa se marca con COLOR Y GROSOR, no solo con
   color: quien no distingue bien los verdes tiene que poder ver cual esta
   abierta. */
/* ── 🔴 LOS CHIPS ENVUELVEN SIEMPRE. NO SE DESPLAZAN. ─────────────────────────
   Daniel, 2026-08-29: «estos títulos o menú selectivo no me dejan scrollar a la
   derecha o izquierda».

   Tenía razón, y la causa era esta regla: había `overflow-x: auto` (así que la
   fila SÍ desbordaba) junto con `scrollbar-width: none` y
   `::-webkit-scrollbar { display: none }` (así que la barra estaba escondida).
   En un teléfono se arrastra con el dedo y funciona; **en un computador con
   ratón normal no hay ningún gesto que la mueva** — la rueda desplaza en
   vertical, no en horizontal. El último chip quedaba cortado en el borde y era
   inalcanzable. Se veía como una lista incompleta, que es exactamente como se
   leyó.

   El arreglo no es enseñar la barra: es que no haga falta. Con `flex-wrap: wrap`
   los chips bajan de línea y se ven todos, en cualquier ancho. Ocho pestañas
   caben en dos filas. `flex-wrap` ya estaba puesto para pantallas estrechas
   (§520px, más abajo) — resulta que el caso estrecho era el único que estaba
   bien. Aquí se sube esa misma solución a todos los anchos. */
.nv-pr-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px;
}
/* La regla de la barra oculta se queda sin objeto al no haber desplazamiento,
   pero se conserva inofensiva por si otra pantalla reusa la clase. */
.nv-pr-tabs::-webkit-scrollbar { display: none; }
.nv-pr-tab {
  flex: 0 0 auto; min-height: 40px; padding: 9px 14px;
  font-size: 13px; font-weight: 600; color: var(--nv-tenue);
  background: transparent; border: 1px solid var(--nv-linea);
  border-radius: var(--nv-r-sm); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nv-pr-tab:hover { color: var(--nv-texto); border-color: var(--nv-savia-hi); }
.nv-pr-tab:focus-visible { outline: 2px solid var(--nv-savia-hi); outline-offset: 2px; }
.nv-pr-tab.is-on {
  color: var(--nv-savia-hi); font-weight: 800;
  border-color: var(--nv-savia-hi);
  background: color-mix(in srgb, var(--nv-savia-hi) 10%, transparent);
}

/* ─── La fecha del dato ────────────────────────────────────────────────────
   Va arriba y en grande a proposito. El DANE no publica fines de semana ni
   festivos —mas de un tercio del año— asi que el precio de «hoy» casi nunca es
   de hoy, y un numero sin su fecha delante envejece en silencio. */
.nv-pr-fecha {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 12px 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--nv-linea);
}
.nv-pr-fdia { font-size: 17px; font-weight: 800; color: var(--nv-texto); font-variant-numeric: tabular-nums; }
.nv-pr-fhace { font-size: 12px; color: var(--nv-tenue); }
.nv-pr-funi { font-size: 12px; font-weight: 700; color: var(--nv-dorado); }

/* Las presentaciones que quedaron fuera. En ambar, como todo lo que es un
   matiz del dato y no un fallo. */
.nv-pr-otras {
  margin-top: 10px; padding: 9px 12px; font-size: 12px; line-height: 1.45;
  color: var(--nv-texto);
  background: color-mix(in srgb, var(--nv-dorado) 7%, var(--nv-superficie));
  border: 1px solid color-mix(in srgb, var(--nv-dorado) 22%, transparent);
  border-radius: var(--nv-r-sm);
}

/* ─── El catalogo entero ───────────────────────────────────────────────── */
.nv-pr-cat { display: flex; flex-direction: column; gap: 6px; }
.nv-pr-catitem {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 10px 13px; text-align: left;
  background: var(--nv-superficie); border: 1px solid var(--nv-linea);
  border-radius: var(--nv-r-sm); cursor: pointer;
  transition: border-color .15s ease;
}
.nv-pr-catitem:hover { border-color: var(--nv-savia-hi); }
.nv-pr-catitem:focus-visible { outline: 2px solid var(--nv-savia-hi); outline-offset: 2px; }
.nv-pr-cizq { min-width: 0; }
.nv-pr-cnom { font-size: 13.5px; font-weight: 700; color: var(--nv-texto); }
.nv-pr-cmeta { font-size: 11.5px; color: var(--nv-tenue); margin-top: 2px; }
/* La flecha del item mira a la derecha: el icono `back` apunta al reves. */
.nv-pr-catitem > svg { flex-shrink: 0; transform: rotate(180deg); opacity: .55; }

/* ─── El sello de la otra fuente ──────────────────────────────────────────
   Este precio no lo publico el boletin del DANE: viene de la planilla de la
   Central Mayorista. Va en ambar y pegado al nombre de la plaza, no al pie:
   un dato cierto con una procedencia falsa sigue siendo media mentira. */
.nv-mk-palterna { font-size: 11px; color: var(--nv-dorado); margin-top: 2px; font-weight: 600; }

/* ─── El cero de prospeccion, con su motivo y sus salidas ────────────────── */
.nv-mk-nadatx { min-width: 0; }
.nv-mk-reparto {
  font-size: 12px; color: var(--nv-tenue); margin-top: 5px; line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.nv-mk-salidas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* La puerta a Precios desde prospeccion. Discreta pero presente: quitar los
   precios de aqui sin decir donde estan seria dejar al productor sin salida. */
.nv-mk-aprecios {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 18px; padding: 11px 13px; font-size: 12.5px; color: var(--nv-tenue);
  background: var(--nv-superficie); border: 1px dashed var(--nv-linea);
  border-radius: var(--nv-r-sm);
}

/* ─── Movil: la mitad de la gente entra por aqui ─────────────────────────── */
@media (max-width: 520px) {
  /* Con la 4ª pestaña (Mercado al Día, 2026-08-11) la tira ya no cabe a
     360 px (clientWidth 336 vs scrollWidth 561, medido) y la nueva quedaba
     ESCONDIDA tras un swipe sin pista visual (scrollbar-width:none). En dos
     filas se descubren todas; el overflow-x:auto de la base deja de
     dispararse porque ya no hay desbordamiento. */
  .nv-pr-tabs { flex-wrap: wrap; }
  .nv-pr-tab { padding: 9px 11px; font-size: 12.5px; }
  .nv-pr-fdia { font-size: 15px; }
  .nv-mk-salidas > .nv-btn { flex: 1 1 100%; justify-content: center; }
}

/* ══ EL BUSCADOR (encargo `precios-buscador`, 2026-08-15) ═══════════════════
   Se AÑADE al final, no se reescribe nada de arriba: los chips de orden reusan
   `.nv-pr-tabs` / `.nv-pr-tab` tal cual, que ya traen los 40 px de toque, la
   marca de activo con color Y grosor, y el envoltorio a 520 px. Aqui solo va
   lo que de verdad no existia. */

/* El rotulo «Ordenar por», DENTRO de la tira de chips y no encima: una linea
   suelta arriba empuja los chips 20 px hacia abajo y en un telefono eso es
   justo lo que se pierde al hacer scroll. `align-self:center` porque la tira es
   flex y sin el la etiqueta se estira a la altura del chip. */
.nv-pr-ordlab {
  flex: 0 0 auto; align-self: center; margin-right: 2px;
  font-size: 12px; font-weight: 700; color: var(--nv-tenue);
  text-transform: uppercase; letter-spacing: .04em;
}

/* El desplegable de departamento y su lista.
   `<select>` NATIVO a proposito: son 33 opciones y en un telefono abre la
   ruleta del sistema, que se maneja con el pulgar y busca escribiendo. No se
   le pone `appearance:none` — quitarle la flecha al select del sistema es
   quitarle la unica pista de que se puede abrir. */
.nv-pr-dep { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nv-pr-dep > select,
.nv-pr-dep > input { width: 100%; min-height: 44px; }

/* La lista de municipios de un departamento. Antioquia tiene 125: sin tope de
   alto, la caja empuja el resto de la pantalla fuera de la vista y el productor
   pierde de golpe el buscador de arriba y las pestañas. Con tope, la lista
   scrollea DENTRO y todo lo demas se queda donde estaba.
   El tope va en `vh` y no en px porque un telefono apaisado tiene 360 px de
   alto util y 320 px fijos lo llenarian entero. */
.nv-pr-dep .nv-mk-munlista { max-height: 44vh; overflow-y: auto; }

@media (max-width: 520px) {
  /* Con el rotulo dentro, la tira del orden son 4 elementos y a 360 px no
     entra en una linea (medido). Envuelve igual que la de las pestañas. */
  .nv-pr-ordlab { flex-basis: 100%; margin-bottom: 2px; }
}

/* ============================================================================
   EL RADAR DE PRECIOS — las cinco revisiones del día y la gráfica de 30 días

   Lo pinta `pintarRadar()` en `modules/market_precios.js`. Pedido de Daniel el
   2026-08-27.

   🔴 LOS CINCO PUNTOS SON CINCO REVISIONES, NO CINCO PRECIOS. El color de cada
   punto dice qué pasó a esa hora, y hay CUATRO estados distintos que no se
   pueden pintar igual:
     · verde  (ingerido)  — entró el boletín
     · ámbar  (sin_boletin) — se miró y no había. Sábado, domingo o festivo.
     · rojo   (error)     — falló de verdad
     · hueco  (pendiente) — esa hora todavía no ha llegado. NO es un fallo, y
                            por eso es un círculo VACÍO y no un punto apagado:
                            un punto gris se lee como «salió mal».
   Meter «pendiente» y «error» en el mismo gris sería el error que esta escala
   existe para evitar: son las diez de la mañana, la revisión de las seis no ha
   fallado.

   Medido a 360 px: la tira de cinco puntos entra en una línea con `flex` y
   `gap` pequeño; la gráfica es un SVG con `preserveAspectRatio: none` y
   `width: 100%`, así que se estira y nunca desborda. Todo lo que trae texto
   del backend lleva `overflow-wrap: anywhere`. */
.nv-pr-radar { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 10px 0 14px; }

.nv-pr-rad, .nv-pr-hist { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 11px 12px; border-radius: var(--nv-r-sm, 14px);
  background: var(--nv-superficie); border: 1px solid var(--nv-linea); }

.nv-pr-rad-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.nv-pr-rad-t { font-size: 12.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--nv-tenue); }
.nv-pr-rad-c { font-size: 12.5px; font-weight: 700; color: var(--nv-texto);
  overflow-wrap: anywhere; }

/* La tira de las cinco horas. `space-between` y no `gap` fijo para que a 360 px
   los cinco queden repartidos en vez de amontonados a la izquierda. */
.nv-pr-rad-tira { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 4px; min-width: 0; padding: 2px 0; }
.nv-pr-rad-p { display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0; cursor: help; }
.nv-pr-rad-hora { font-size: 10.5px; color: var(--nv-tenue); font-weight: 700; white-space: nowrap; }
.nv-pr-rad-punto { width: 12px; height: 12px; border-radius: 999px;
  border: 2px solid var(--nv-linea); background: var(--nv-linea); }

.nv-pr-rad-p.is-ingerido .nv-pr-rad-punto { background: #2e9e5b; border-color: #2e9e5b; }
.nv-pr-rad-p.is-sin_boletin .nv-pr-rad-punto { background: #c98a00; border-color: #c98a00; }
.nv-pr-rad-p.is-error .nv-pr-rad-punto { background: #b4573b; border-color: #b4573b; }
/* Pendiente = círculo VACÍO. Todavía no ha llegado esa hora; no ha fallado. */
.nv-pr-rad-p.is-pendiente .nv-pr-rad-punto { background: transparent; border-color: var(--nv-linea); }
.nv-pr-rad-p.is-pendiente .nv-pr-rad-hora { opacity: .6; }
/* Sin rastro = la hora pasó y no anotó nada. Eso SÍ merece verse raro. */
.nv-pr-rad-p.is-sin_rastro .nv-pr-rad-punto { background: transparent; border-style: dashed;
  border-color: #b4573b; }

.nv-pr-rad-av { margin: 0; font-size: 12px; line-height: 1.5; color: var(--nv-tenue);
  overflow-wrap: anywhere; }
.nv-pr-rad-off { margin: 8px 0; font-size: 12.5px; line-height: 1.5; color: var(--nv-tenue);
  overflow-wrap: anywhere; }

.nv-pr-hist-var { font-size: 12.5px; font-weight: 800; }
.nv-pr-hist-var.is-sube { color: #2e9e5b; }
.nv-pr-hist-var.is-baja { color: #b4573b; }

/* `preserveAspectRatio: none` + `width: 100%` = se estira al ancho que haya.
   La altura se fija aquí para que la caja no salte mientras carga. */
.nv-pr-hist-svg { width: 100%; height: 88px; display: block; overflow: visible; }
.nv-pr-hist-linea { fill: none; stroke: var(--nv-acento, #78CC8C); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nv-pr-hist-pt { fill: var(--nv-acento, #78CC8C); }
/* Un día suelto entre dos huecos no es una línea: es un punto, y se pinta así
   en vez de desaparecer. */
.nv-pr-hist-solo { fill: var(--nv-acento, #78CC8C); }

.nv-pr-hist-pie { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 2px 10px; font-size: 11.5px; color: var(--nv-tenue); min-width: 0;
  overflow-wrap: anywhere; }

/* ============================================================================
   PRECIOS DE INSUMOS — el mes del dato, y el precio de los que no tienen base

   Los dos arreglos del 2026-08-27, que salieron de una pregunta de Daniel: «ve
   si yo nunca he visto los precios de insumos».

   1. La lista traia el mes MAS VIEJO de la base (julio 2025) sin decirlo. El
      backend ya devuelve el mas reciente; esta cabecera lo ROTULA.
   2. En jornales, arrendamiento y empaques NO se pintaba ni un precio, porque
      la condicion era `precioPorBase != null` y el DANE no declara presentacion
      para esos tres grupos. Eran listas de nombres sin numeros. Ahora el precio
      sale igual, con su presentacion al lado — y SIN fingir que es comparable
      con el de una fila que si tiene base.

   El bloque del precio se apila (`column`) en vez de ir en una linea: a 360 px
   «13.767» y «por 12,5 kilogramos» no caben juntos, y partir el numero de su
   unidad es justo lo que convierte un dato en un malentendido. */
.nv-pr-insmes { display: flex; flex-direction: column; gap: 3px; min-width: 0;
  margin: 0 0 10px; padding: 9px 11px; border-radius: var(--nv-r-sm, 14px);
  border: 1px solid var(--nv-linea); background: var(--nv-superficie); }
.nv-pr-insmes-t { font-size: 13px; font-weight: 800; color: var(--nv-texto);
  overflow-wrap: anywhere; }
/* El aviso de que se retrocedio de mes va en ambar y discontinuo: el mismo
   lenguaje que ya separa «esto es un limite conocido» del resto. */
.nv-pr-insmes-n { font-size: 12px; line-height: 1.5; color: #c98a00;
  overflow-wrap: anywhere; }

.nv-pr-cprecio { display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px; min-width: 0; }
.nv-pr-cunidad { font-size: 11px; color: var(--nv-tenue); text-align: right;
  overflow-wrap: anywhere; }