/* UH18.2 — La pantalla de Market Research.
 *
 * Archivo propio y NO `style.css`: esa hoja la comparten las vistas que todavía
 * conservan su aspecto viejo. Aquí solo vive lo que no existía antes.
 * Ni un color suelto: todo sale de los tokens del Epic 16.
 */

/* ── Las dos cifras ─────────────────────────────────────────────────────────
   Dos bloques y no cuatro: el Epic 16 ya aprendió que cuatro números iguales en
   fila se leen como ninguno. Aquí solo hay dos, y NO son equivalentes — uno es
   una constatación y el otro pide una acción, así que solo uno lleva color. */
.pf-mercado-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--pf-s-4);
  margin-top: var(--pf-s-4);
}

.pf-mercado-cifra {
  background: var(--pf-sup-50);
  border: 1px solid transparent;
  border-radius: var(--pf-r-sm);
  padding: var(--pf-s-4);
}

/* La alerta lleva rojo porque aquí SÍ significa lo que significa en toda la
   app: algo va mal. Es la diferencia con el chip de oferta de UH17.5, donde el
   rojo se rechazó justamente por eso. */
.pf-mercado-cifra--alerta {
  background: var(--pf-destructive-subtle);
  border-color: var(--pf-red-200);
}

.pf-mercado-num {
  font-family: var(--pf-font-display);
  font-size: var(--pf-fs-2xl);
  font-weight: 700;
  color: var(--ci-text-main);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pf-mercado-cifra--alerta .pf-mercado-num { color: var(--pf-destructive-on-subtle); }

.pf-mercado-pie {
  font-size: var(--pf-fs-sm);
  color: var(--ci-text-muted);
  margin-top: var(--pf-s-1);
  line-height: 1.45;
}
.pf-mercado-cifra--alerta .pf-mercado-pie { color: var(--pf-red-800); }

.pf-mercado-ver {
  margin-top: var(--pf-s-3);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-sm);
  font-weight: 700;
  color: var(--pf-destructive-on-subtle);
  cursor: pointer;
}
.pf-mercado-ver:hover { text-decoration: underline; }
.pf-mercado-ver:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 2px; border-radius: var(--pf-r-sm); }

/* Los que no se pueden juzgar se dicen aparte, en vez de esconderse dentro de
   una de las dos cifras. */
.pf-mercado-nota {
  margin-top: var(--pf-s-4);
  font-size: var(--pf-fs-sm);
  color: var(--ci-text-muted);
  line-height: 1.5;
}

/* ── La tabla de fuentes ──────────────────────────────────────────────────── */

.pf-mercado-sub {
  font-size: var(--pf-fs-micro);
  color: var(--ci-text-muted);
  margin-top: 2px;
}

.pf-mercado-falta {
  color: var(--pf-warning-on-subtle);
  font-weight: 600;
}

.pf-mercado-negativo {
  color: var(--pf-destructive-on-subtle);
  font-weight: 700;
}

/* ── El historial ───────────────────────────────────────────────────────────
   Filas, no tarjetas: son ocho líneas que se escanean de arriba abajo. */
.pf-mercado-hist { margin-top: var(--pf-s-3); }

.pf-mercado-hist-fila {
  display: flex;
  align-items: center;
  gap: var(--pf-s-3);
  padding: var(--pf-s-2) 0;
  border-bottom: 1px solid var(--pf-border);
  font-size: var(--pf-fs-sm);
}
.pf-mercado-hist-fila:last-child { border-bottom: 0; }

.pf-mercado-hist-nombre { flex: none; width: 130px; font-weight: 600; color: var(--ci-text-main); }
.pf-mercado-hist-detalle {
  flex: 1; min-width: 0;
  color: var(--ci-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-mercado-hist-fecha { flex: none; color: var(--ci-text-muted); }

.pf-punto-estado {
  flex: none;
  width: 8px; height: 8px;
  border-radius: var(--pf-r-pill);
  background: var(--pf-sup-400);
}
.pf-punto-estado--ok    { background: var(--pf-teal-600); }
.pf-punto-estado--tibio { background: var(--pf-amber-400); }
.pf-punto-estado--error { background: var(--pf-destructive); }

/* ── Pantalla angosta ───────────────────────────────────────────────────────
   El nombre deja de tener ancho fijo y el detalle se va a su propia línea: en
   una fila de 130px + texto + fecha, bajo 700px no queda sitio para leer nada. */
@media (max-width: 699px) {
  .pf-mercado-hist-fila { flex-wrap: wrap; }
  .pf-mercado-hist-nombre { width: auto; }
  .pf-mercado-hist-detalle { flex: 1 0 100%; white-space: normal; order: 3; }
}