/* pedidos.css — estilos de la herramienta pedidos (42.6). Cada tarea escribe solo en su archivo. */

/* ---- Tablas del pedido (pedido-lineas.js) ---- */
.ped-suf { font-size: 11px; }

/* ---- Relojito: marcado mientras se ve el historial ---- */
#btn-pedidos-historial.activo {
  background: var(--brand-light);
  border-color: var(--brand-2);
  color: var(--brand);
}

/* ---- Cabecera de la tarjeta: tienda · casilla del número · estado ---- */
.ped-cabecera { flex-wrap: wrap; }
.ped-cabecera h3 { margin-right: auto; }
.ped-estados { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.ped-num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
}
.ped-num-rot { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ped-num-valor { font-variant-numeric: tabular-nums; color: var(--ok); }
.ped-num-otra { color: var(--warn); font-weight: 600; }
.ped-num .btn.link { font-size: 12.5px; text-decoration: underline; }
.ped-num-input, .ped-num-motivo {
  font-size: 13px;
  padding: 5px 10px;
  min-height: 29px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
}
.ped-num-input:focus, .ped-num-motivo:focus {
  outline: none;
  border: 1.5px solid var(--brand);
  box-shadow: 0 0 0 3px rgba(13, 79, 90, 0.08);
}
.ped-num-error { margin: 0 0 10px; font-size: 12.5px; }

@media (max-width: 700px) {
  .ped-cabecera .ped-num { order: 3; flex-basis: 100%; }
}

/* ---- Historial (pedidos-historial.js) ---- */
.ph-filtros { box-shadow: none; margin-bottom: 12px; }
.ph-solo { cursor: pointer; }
.ph-solo input { min-height: 0; accent-color: var(--brand-2); }
.ph-tabla td { white-space: normal; }
.ph-fila { cursor: pointer; }
.ph-fila.abierta td { background: var(--brand-light); }
.ph-abrir {
  background: none;
  border: none;
  padding: 2px 0;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.ph-abrir:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 4px; }
.ph-fecha { white-space: nowrap; }
.ph-codigo { font-size: 11.5px; }
.ph-tabla td.ph-estados .badge { margin: 2px 6px 2px 0; }
.ph-cda { background: var(--card); color: var(--muted); border-color: var(--line-strong); }
.ph-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: 12.5px; }
.ph-detalle > td { background: var(--bg); padding: 12px 16px 16px; }
.ph-detalle:hover td { background: var(--bg); }
.ph-bloque { margin-top: 12px; }
.ph-bloque h4 { margin: 0 0 6px; }
.ph-meta { margin: 8px 0 0; font-size: 13px; }
.ph-dif { color: var(--warn); font-weight: 800; }
.ph-previos { margin: 0; padding-left: 18px; font-size: 13px; }

@media (max-width: 700px) {
  .ph-filtros label { flex: 1 1 140px; }
  .ph-filtros input:not([type="checkbox"]), .ph-filtros select { width: 100%; min-width: 0; }
  .ph-tabla { table-layout: fixed; }
  .ph-tabla th, .ph-tabla td { padding: 9px 5px; }
  .ph-tabla th:nth-child(1) { width: 16%; }
  .ph-tabla th:nth-child(2) { width: 26%; }
  .ph-tabla th:nth-child(4) { width: 33%; }
  .ph-fecha { font-size: 12px; }
  .ph-codigo { display: none; }
  .ph-tabla .badge { padding: 2px 6px; font-size: 8.5px; letter-spacing: 0.02em; gap: 4px; max-width: 100%; }
  .ph-tabla .badge::before { width: 5px; height: 5px; }
  .ph-detalle > td { padding: 10px 6px 14px; }
}