/* ═══════════════════════════════════════════════════════════════════════════
   UH6.5 · SOLICITUDES DE COMPRA CON AUTORIZACIÓN

   Mostrador PIDE, Administración AUTORIZA. Este archivo solo tiene lo que no
   existía: el filtro «Por autorizar» de Órdenes, la ventana de revisión y el
   aviso del panel. Las tablas, los botones y los chips de estado son los de
   siempre (`ci-table`, `ci-btn`, `pf-estado--*`).

   TODO VA CON LOS TOKENS `--pf-*` y la escala de espaciado: ningún valor suelto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El filtro de Órdenes ─────────────────────────────────────────────────────
   Dos botones con la forma del segmentado de Buscar Precios, pero con CLASES
   PROPIAS: `.pf-segmentado .ci-mode-btn` lo manejan los atajos de esa pantalla
   (navigateTo busca `.pf-segmentado .ci-mode-btn.active`), y compartir la clase
   les cambiaría el comportamiento. */
.pf-filtro-oc {
  display: inline-flex;
  background: var(--pf-sup-200);
  border-radius: var(--pf-r-sm);
  padding: 3px;
  margin: var(--pf-s-4) 0;
}
.pf-filtro-oc__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-s-2);
  border: 0;
  background: transparent;
  padding: 7px 14px;
  border-radius: 4px;
  font: inherit;
  font-size: var(--pf-fs-sm);
  font-weight: 500;
  color: var(--ci-text-muted);
  cursor: pointer;
  transition: background var(--pf-t-fast), color var(--pf-t-fast), box-shadow var(--pf-t-fast);
}
.pf-filtro-oc__btn:hover:not(.active) { background: rgba(255, 255, 255, .55); color: var(--ci-text-main); }
.pf-filtro-oc__btn.active {
  background: var(--pf-card);
  color: var(--ci-text-main);
  font-weight: 700;
  box-shadow: var(--pf-sh-xs);
}
.pf-filtro-oc__btn:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 1px; }

/* El número de pendientes: ámbar, el color del aviso (design system §4.1). */
.pf-filtro-oc__n {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--pf-r-pill);
  background: var(--pf-warning-subtle);
  color: var(--pf-warning-on-subtle);   /* 6.35 */
  font-size: var(--pf-fs-micro);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (pointer: coarse) {
  .pf-filtro-oc__btn { min-height: 44px; }
}

/* Una solicitud por autorizar se distingue en la lista: es la fila que pide
   algo de quien mira. Un filete ámbar a la izquierda, no el relleno de la fila
   (cien filas teñidas son un muro de color, lección de UH16.26). */
.pf-fila-pendiente > td:first-child { box-shadow: inset 3px 0 0 var(--pf-amber-400); }

/* «Respuesta nueva» en Mis solicitudes: lo que Mostrador no ha visto aún. */
.pf-sol-nueva {
  display: inline-block;
  margin-left: var(--pf-s-2);
  padding: var(--pf-s-05) var(--pf-s-2);
  border-radius: var(--pf-r-pill);
  background: var(--pf-primary);
  color: #FFFFFF;                        /* 4.69 sobre teal-600 */
  font-size: var(--pf-fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* ── La ventana de la solicitud ───────────────────────────────────────────── */
#solModal .ci-modal-lg { max-width: 900px; }

.pf-sol-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-s-2) var(--pf-s-6);
  margin-bottom: var(--pf-s-4);
  font-size: var(--pf-fs-sm);
  color: var(--ci-text-muted);
}
.pf-sol-meta strong { color: var(--ci-text-main); }

/* El estado, dicho con palabras y una franja: el color nunca va solo. */
.pf-sol-aviso {
  margin-bottom: var(--pf-s-4);
  padding: var(--pf-s-3) var(--pf-s-4);
  border-radius: var(--pf-r-sm);
  font-size: var(--pf-fs-base);
  line-height: 1.5;
}
.pf-sol-aviso--ojo  { background: var(--pf-warning-subtle);     color: var(--pf-warning-on-subtle); }
.pf-sol-aviso--mal  { background: var(--pf-destructive-subtle); color: var(--pf-destructive-on-subtle); }
.pf-sol-aviso--bien { background: var(--pf-teal-50);            color: var(--pf-teal-700); }

/* Lo que Administración cambió: la cantidad pedida tachada y la autorizada al lado. */
.pf-sol-pidio { color: var(--ci-text-muted); text-decoration: line-through; margin-right: var(--pf-s-2); }
.pf-sol-quitada td { color: var(--ci-text-muted); }
.pf-sol-quitada td:nth-child(2) { text-decoration: line-through; }
.pf-sol-quitada-tag {
  display: inline-block;
  margin-left: var(--pf-s-2);
  padding: var(--pf-s-05) var(--pf-s-2);
  border-radius: var(--pf-r-pill);
  background: var(--pf-destructive-subtle);
  color: var(--pf-destructive-on-subtle);
  font-size: var(--pf-fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
}

/* El total y su diferencia. */
.pf-sol-total { display: flex; justify-content: flex-end; align-items: baseline; gap: var(--pf-s-4); margin-top: var(--pf-s-4); }
.pf-sol-total__lbl { font-size: var(--pf-fs-sm); color: var(--ci-text-muted); font-weight: 600; }
.pf-sol-total__num { font-size: var(--pf-fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* El motivo del rechazo: aparece al pulsar «Rechazar». */
.pf-sol-rechazo { margin-top: var(--pf-s-4); }
.pf-sol-rechazo textarea { width: 100%; min-height: 72px; resize: vertical; }

/* ── El aviso del panel de inicio ─────────────────────────────────────────── */
.pf-aviso-sol {
  display: flex;
  align-items: center;
  gap: var(--pf-s-4);
  width: 100%;
  margin-bottom: var(--pf-s-4);
  padding: var(--pf-s-4) var(--pf-s-5);
  border: 0;
  border-radius: var(--pf-r-md);
  background: var(--pf-warning-subtle);
  color: var(--pf-warning-on-subtle);    /* 6.35 */
  box-shadow: inset 4px 0 0 var(--pf-amber-400), var(--pf-sh-xs);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--pf-t-fast);
}
.pf-aviso-sol:hover { box-shadow: inset 4px 0 0 var(--pf-amber-400), var(--pf-sh-sm); }
.pf-aviso-sol:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 2px; }
.pf-aviso-sol__num {
  flex: none;
  font-size: var(--pf-fs-2xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pf-aviso-sol__txt { flex: 1 1 auto; min-width: 0; font-size: var(--pf-fs-base); font-weight: 600; }
.pf-aviso-sol__txt small { display: block; font-weight: 400; font-size: var(--pf-fs-sm); }
.pf-aviso-sol__ir { flex: none; font-weight: 700; font-size: var(--pf-fs-sm); }
.pf-aviso-sol--bien {
  background: var(--pf-teal-50);
  color: var(--pf-teal-700);
  box-shadow: inset 4px 0 0 var(--pf-teal-500), var(--pf-sh-xs);
}
.pf-aviso-sol--bien:hover { box-shadow: inset 4px 0 0 var(--pf-teal-500), var(--pf-sh-sm); }

@media (pointer: coarse) {
  .pf-aviso-sol { min-height: 44px; }
}

/* ── La pregunta «¿ya lo enviaste?» del pie de la orden (WhatsApp) ─────────── */
.ci-oc-wa-confirma {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pf-s-2);
  padding: var(--pf-s-2) var(--pf-s-3);
  border-radius: var(--pf-r-sm);
  background: var(--pf-warning-subtle);
  color: var(--pf-warning-on-subtle);
}
.ci-oc-wa-confirma .ci-hint { color: inherit; font-weight: 600; }