/* Compras (28-oct-2026). Lo común (tabla .t, .acciones, .pill, diálogos, pestañas .inv-tabs) viene de
   tablero.css y de inventario.css: esta página reusa la clase tb-inv para las pestañas de sitio. */

.tb-compras .cmp-apagado { margin: 0 0 16px; }

/* ---- Una tarjeta por orden de compra -------------------------------------- */
.tb-compras .cmp-oc { border: 1px solid var(--hg-linea-2); border-radius: 12px; background: var(--hg-plano-2);
  padding: 14px 16px 12px; margin: 0 0 14px; }
.tb-compras .cmp-oc.cancelada { opacity: .62; }

.tb-compras .cmp-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 8px; }
.md-typeset .tb-compras .cmp-cab h2 { margin: 0; font-size: 18px; font-variant-numeric: tabular-nums; }
.tb-compras .cmp-cab .chip { font-size: 12px; padding: 1px 8px; border-radius: 6px; background: var(--hg-elevado);
  border: 1px solid var(--hg-linea); color: var(--hg-texto-2); white-space: nowrap; }
.tb-compras .cmp-cab .chip.tarde { background: var(--hg-bloqueado-bg); color: var(--hg-bloqueado); border-color: transparent; font-weight: 600; }

/* estados de la OC: los mismos tonos que el tablero de pendientes */
.tb-compras .pill.e-aut { background: var(--hg-plano-2); color: var(--hg-texto-2); }
.tb-compras .pill.e-pag { background: var(--hg-curso-bg); color: var(--hg-curso); }
.tb-compras .pill.e-cam { background: var(--hg-aviso-bg); color: var(--hg-aviso); }
.tb-compras .pill.e-par { background: var(--hg-aviso-bg); color: var(--hg-aviso); }
.tb-compras .pill.e-rec { background: var(--hg-hecho-bg); color: var(--hg-hecho); }
.tb-compras .pill.e-can { background: var(--hg-bloqueado-bg); color: var(--hg-bloqueado); }

.tb-compras .cmp-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--hg-texto-2);
  margin: 0 0 10px; }
.tb-compras .cmp-meta b { font-weight: 600; color: var(--hg-texto-2); }

/* ---- Renglones ------------------------------------------------------------ */
.tb.tb-compras #cont table.cmp-ren { min-width: 0; margin: 0; }   /* tablero.css fuerza 780 px: esta ya cabe */
.tb-compras .cmp-ren { table-layout: auto; width: 100%; }
.tb-compras .cmp-ren tr.recibido td { color: var(--hg-texto-2); }
.tb-compras .cmp-ren tr.recibido td:last-child { color: var(--hg-hecho); font-weight: 600; }
.tb-compras .cmp-ren .desc { font-weight: 500; color: var(--hg-texto-fuerte); }
.tb-compras .cmp-ren code { font-size: 12.5px; }
.tb-compras .cmp-ren .aviso-t { color: var(--hg-aviso); }
.tb-compras button.cmp-ligar { padding: 3px 10px; font-size: 12.5px; }

.tb-compras .cmp-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0 0;
  padding-top: 10px; border-top: 1px dashed var(--hg-linea); }
.tb-compras .cmp-acc button { padding: 6px 16px; }

.tb-compras dialog .t { margin: 6px 0 12px; }
.tb-compras dialog input[type="number"] { width: 5.5em; text-align: center; }

@media (max-width: 640px) {
  .tb-compras .cmp-oc { padding: 12px 12px 10px; }
  .tb-compras .cmp-meta { gap: 2px 12px; font-size: 12.5px; }
  /* teléfono: fuera el número de renglón y la columna de «Pedido» (la cantidad se ve en el diálogo de Recibir) */
  .tb-compras .cmp-ren th:nth-child(1), .tb-compras .cmp-ren td:nth-child(1),
  .tb-compras .cmp-ren th:nth-child(3), .tb-compras .cmp-ren td:nth-child(3) { display: none; }
  .tb-compras .cmp-ren { font-size: 13px; }
  .tb-compras .cmp-ren th, .tb-compras .cmp-ren td { padding-left: 6px; padding-right: 6px; }
  .tb-compras dialog .t th:nth-child(1), .tb-compras dialog .t td:nth-child(1) { display: none; }
}