/* UH14.6 — Remisiones de entrega: el panel «Remisiones», la tarjeta «Entregas» de la cotización y el modal «Generar remisión».
   Prefijo `pfr-`. Sale del mockup aprobado (v11-remision.html). Solo tokens del design system (pricefarma-tokens.css). */

.pfr-chip { display: inline-flex; align-items: center; border-radius: 99px; padding: 2px 10px; font: 600 var(--pf-fs-xs) var(--pf-font-ui); white-space: nowrap; }
.pfr-chip--parcial { background: var(--pf-warning-subtle); color: var(--pf-warning-on-subtle); }
.pfr-chip--completa { background: var(--pf-teal-50); color: var(--pf-teal-700); }
.pfr-chip--pend { background: var(--pf-sup-100); color: var(--pf-sup-700); }

/* ── Panel ── */
.pfr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pf-s-3); margin-bottom: var(--pf-s-4); }
.pfr-kpi { border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); padding: var(--pf-s-3) var(--pf-s-4); background: #fff; }
.pfr-kpi b { display: block; font: 700 24px var(--pf-font-display); color: var(--pf-foreground); font-variant-numeric: tabular-nums; }
.pfr-kpi span { font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); }
.pfr-kpi small { display: block; font-size: var(--pf-fs-xs); color: var(--pf-muted-foreground); margin-top: 2px; }
.pfr-tool { display: flex; gap: var(--pf-s-3); align-items: center; flex-wrap: wrap; margin: var(--pf-s-3) 0; }
.pfr-tool .ci-input { max-width: 340px; }
.pfr-lista td { vertical-align: middle; white-space: nowrap; }
.pfr-lista td:nth-child(2), .pfr-lista td:nth-child(7) { white-space: normal; }
.pfr-lista td:nth-child(2) { min-width: 160px; }
.pfr-lista .sub { display: block; color: var(--pf-muted-foreground); font-size: var(--pf-fs-xs); }
.pfr-lista .acc { white-space: nowrap; text-align: center; }
.pfr-lista .acc .ci-btn + .ci-btn { margin-left: 6px; }
.pfr-lista--por td:nth-child(2) { white-space: normal; min-width: 160px; }
.pfr-lista--por td:nth-child(7) { white-space: nowrap; }
.pfr-lista a { cursor: pointer; }
.pfr-barra { height: 8px; border-radius: 99px; background: var(--pf-sup-100); overflow: hidden; min-width: 120px; }
.pfr-barra i { display: block; height: 100%; background: var(--pf-teal-500); border-radius: 99px; }
.pfr-av { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.pfr-av small { color: var(--pf-muted-foreground); font-size: var(--pf-fs-xs); }

/* ── Tarjeta «Entregas» de la cotización ── */
.pfr-ent { display: flex; align-items: center; gap: var(--pf-s-4); padding: var(--pf-s-3) 0; border-top: 1px solid var(--pf-border); flex-wrap: wrap; }
.pfr-ent:first-of-type { border-top: 0; }
.pfr-ent b { font-variant-numeric: tabular-nums; }
.pfr-ent .det { color: var(--pf-muted-foreground); font-size: var(--pf-fs-sm); flex: 1; min-width: 220px; }

/* ── Modal «Generar remisión» ── */
.pfr-resumen { display: flex; gap: var(--pf-s-5); flex-wrap: wrap; margin: 0 0 var(--pf-s-3); }
.pfr-resumen div { font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); }
.pfr-resumen b { display: block; font: 700 var(--pf-fs-md) var(--pf-font-display); color: var(--pf-foreground); font-variant-numeric: tabular-nums; }
.pfr-tabla { width: 100%; border-collapse: collapse; }
.pfr-tabla th { font-size: var(--pf-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--pf-muted-foreground); font-weight: 600; text-align: left; padding: var(--pf-s-2) var(--pf-s-3); }
.pfr-tabla td { padding: var(--pf-s-3); border-top: 1px solid var(--pf-border); font-size: var(--pf-fs-sm); vertical-align: middle; }
.pfr-tabla .c { text-align: center; font-variant-numeric: tabular-nums; }
.pfr-tabla td small { display: block; color: var(--pf-muted-foreground); font-size: var(--pf-fs-xs); }
.pfr-tabla tr.cero td { color: var(--pf-muted-foreground); }
.pfr-qty { width: 74px; text-align: center; font-variant-numeric: tabular-nums; }
.pfr-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pf-s-3); }
.pfr-opcion { display: flex; gap: var(--pf-s-3); align-items: flex-start; border: 1.5px solid var(--pf-border); border-radius: var(--pf-r-md); padding: var(--pf-s-3) var(--pf-s-4); cursor: pointer; background: #fff; }
.pfr-opcion.on { border-color: var(--pf-teal-500); background: var(--pf-teal-50); }
.pfr-opcion b { display: block; font-size: var(--pf-fs-sm); }
.pfr-opcion small { color: var(--pf-muted-foreground); font-size: var(--pf-fs-xs); }
.pfr-folio { font: 700 var(--pf-fs-md) var(--pf-font-display); color: var(--pf-foreground); font-variant-numeric: tabular-nums; display: block; }

.pfr-solo-m { display: none; }

@media (max-width: 900px) {
  .pfr-kpis { grid-template-columns: repeat(2, 1fr); }
  .pfr-opciones { grid-template-columns: 1fr; }
}
/* En celular las tablas muestran lo esencial y la acción a la vista (sin desplazarse de lado): lo demás va como renglón debajo del folio. */
@media (max-width: 700px) {
  .pfr-hide-m { display: none; }
  .pfr-solo-m { display: block; }
  .pfr-lista td { white-space: normal; padding-left: var(--pf-s-2); padding-right: var(--pf-s-2); }
  .pfr-lista td:nth-child(2), .pfr-lista--por td:nth-child(2) { min-width: 0; }
  .pfr-lista .acc .ci-btn { padding-left: 10px; padding-right: 10px; }
  .pfr-lista .acc .ci-btn + .ci-btn { margin-left: 0; margin-top: 6px; }
  .pfr-tool .ci-input { max-width: none; flex: 1 1 100%; }
}