/* UH19.1 — Inventario de la farmacia (solo Master). Sale del mockup aprobado: inventario.html, pantallas 1-3.
   Archivo aparte, como los demás: style.css no se toca. */

.pf-inv { display: flex; flex-direction: column; gap: var(--pf-s-4); }

.pf-inv__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pf-s-3); flex-wrap: wrap; }
.pf-inv__cab h3 { margin: 0; font: 700 var(--pf-fs-md) var(--pf-font-display); color: var(--pf-foreground); }
.pf-inv__cab p { margin: 2px 0 0; font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); }
.pf-inv__acc { display: flex; gap: var(--pf-s-2); flex-wrap: wrap; }

.pf-inv__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pf-s-3); margin-top: var(--pf-s-4); }
.pf-inv__kpi { border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); padding: var(--pf-s-3) var(--pf-s-4); background: #fff; }
.pf-inv__kpi b { display: block; font: 700 24px var(--pf-font-display); color: var(--pf-foreground); font-variant-numeric: tabular-nums; }
.pf-inv__kpi span { font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); }
.pf-inv__kpi small { display: block; font-size: var(--pf-fs-xs); color: var(--pf-muted-foreground); margin-top: 2px; }

.pf-inv__nota { margin: var(--pf-s-4) 0 0; border-left: 3px solid var(--pf-teal-600); background: var(--pf-teal-50, #E3F5F2); padding: var(--pf-s-3) var(--pf-s-4); border-radius: 0 var(--pf-r-md) var(--pf-r-md) 0; font-size: var(--pf-fs-sm); color: var(--pf-foreground); }
.pf-inv__nota button { border: 0; background: none; padding: 0; font: inherit; color: var(--pf-teal-700); text-decoration: underline; cursor: pointer; }

.pf-inv__horas { display: flex; flex-wrap: wrap; gap: var(--pf-s-2); align-items: center; margin-top: var(--pf-s-3); }
.pf-inv__hora { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--pf-border); border-radius: var(--pf-r-pill); padding: 5px 6px 5px 12px; font: 600 var(--pf-fs-sm) var(--pf-font-ui); color: var(--pf-foreground); background: #fff; font-variant-numeric: tabular-nums; }
.pf-inv__hora button { border: 0; background: var(--pf-sup-100); color: var(--pf-foreground); width: 20px; height: 20px; border-radius: var(--pf-r-pill); cursor: pointer; line-height: 1; font-size: 13px; }
.pf-inv__hora button:hover { background: var(--pf-sup-300); }
.pf-inv__add { display: inline-flex; gap: var(--pf-s-2); align-items: center; }
.pf-inv__add .ci-input { width: 120px; }
.pf-inv__sinhoras { font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); }

.pf-inv__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-inv__mono { font-family: ui-monospace, Consolas, monospace; font-size: var(--pf-fs-sm); }
.pf-inv__lista { margin-top: var(--pf-s-3); }
.pf-inv__lista h4 { margin: 0 0 var(--pf-s-2); font: 700 var(--pf-fs-base) var(--pf-font-display); color: var(--pf-foreground); }
.pf-inv .ci-alert { margin-top: var(--pf-s-3); }

/* El resultado lleva el mensaje debajo de la etiqueta: sin ancho mínimo, en el celular se parte letra por letra. */
.pf-inv__res { min-width: 200px; }
.pf-inv__res .ci-badge { white-space: nowrap; }
.pf-inv__res small { display: block; margin-top: 2px; }

@media (max-width: 900px) { .pf-inv__kpis { grid-template-columns: repeat(2, 1fr); } }

/* ── UH19.2 — El chip de existencias propias (Buscar Precios y Cotizador) ──────────────────────────────────────────────
   Solo informa: no cambia «Mejor precio», ahorro ni margen. Sin icono ni unidad (el ERP aún no define si cuenta piezas o
   cajas): «Existencias: N». Variantes: verde = hay · gris = sin existencia · ámbar = desactualizado o no alcanza. */
.pfi-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--pf-r-pill); font: 600 var(--pf-fs-xs) var(--pf-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; background: rgba(0,131,111,.13); color: var(--pf-teal-700); }
.pfi-chip small { font: 500 var(--pf-fs-xs) var(--pf-font-ui); opacity: .9; }
.pfi-chip--cero { background: rgba(74,78,99,.12); color: var(--pf-sup-700); }
.pfi-chip--viejo { background: var(--pf-amber-50); color: var(--pf-amber-700); }
/* En la cabecera de la tarjeta, a la derecha del título. */
.pfi-cab-der { margin-left: auto; align-self: center; display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* La franja del editor de cotizaciones: el corte va UNA vez aquí y no en cada renglón. */
.pfi-franja { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; border-radius: var(--pf-r-md); background: #fff; border: 1px solid var(--pf-border); font-size: var(--pf-fs-sm); color: var(--pf-sup-700); margin-bottom: var(--pf-s-3); }
.pfi-franja--viejo { background: var(--pf-amber-50); border-color: #E0B84A; color: var(--pf-amber-700); }
@media (max-width: 699px) { .pfi-cab-der { margin-left: 0; flex: 1 0 100%; justify-content: flex-start; } }

/* ── UH19.3 — Aviso y confirmación al comprar con existencias propias (carrito, solicitud, procesar compra) ──────────────────────── */
.pfi-aviso-linea { display: inline-flex; align-items: center; margin-top: 4px; padding: 3px 10px; border-radius: var(--pf-r-pill); font: 600 var(--pf-fs-xs) var(--pf-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--pf-amber-50); color: var(--pf-amber-700); }
.pfi-aviso-linea small { font: 500 var(--pf-fs-xs) var(--pf-font-ui); margin-left: 6px; opacity: .9; }
.pfi-banda { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--pf-r-md); background: var(--pf-amber-50); border: 1px solid #E0B84A; color: var(--pf-amber-700); font-size: var(--pf-fs-sm); margin-bottom: var(--pf-s-3); }
.pfi-tabla { width: 100%; border-collapse: collapse; font-size: var(--pf-fs-sm); font-variant-numeric: tabular-nums; }
.pfi-tabla th { text-align: left; font-size: var(--pf-fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--pf-muted-foreground); padding: 6px 8px; border-bottom: 1px solid var(--pf-border); }
.pfi-tabla td { padding: 8px; border-bottom: 1px solid var(--pf-sup-100); vertical-align: top; }
.pfi-tabla .n { text-align: right; white-space: nowrap; }
.pfi-tabla small { display: block; color: var(--pf-muted-foreground); }
.pfi-ok { font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); margin: var(--pf-s-3) 0 0; }
/* El aviso se abre a veces ENCIMA de otro modal (la revisión de una solicitud). Todos los .ci-modal-overlay valen 200 y gana el que va
   después en el HTML: sin esto el aviso quedaba detrás y no se podía pulsar. Por encima de cualquier modal, por debajo de los avisos flotantes (950). */
#avisoCompraModal { z-index: 210; }

/* UH19.5 — Subir archivo y catálogo del ERP */
.pf-inv__drop { border: 2px dashed var(--pf-border); border-radius: var(--pf-r-md); padding: var(--pf-s-5); text-align: center; background: #F8FAFC; color: var(--pf-muted-foreground); font-size: var(--pf-fs-sm); }
.pf-inv__drop b { color: var(--pf-foreground); }
.pf-inv__det { display: flex; gap: var(--pf-s-3); align-items: flex-start; border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); padding: var(--pf-s-3) var(--pf-s-4); background: #fff; margin-top: var(--pf-s-3); }
.pf-inv__det h5 { margin: 0 0 2px; font: 700 var(--pf-fs-sm) var(--pf-font-ui); color: var(--pf-foreground); }
.pf-inv__det p { margin: 0; font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); }
.pf-inv__cat { display: flex; gap: var(--pf-s-5); flex-wrap: wrap; margin-top: var(--pf-s-3); }
.pf-inv__cat div { font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); }
.pf-inv__cat b { display: block; font: 700 20px var(--pf-font-display); color: var(--pf-foreground); font-variant-numeric: tabular-nums; }