/* ---------------------------------------------------------------------------
 * Cola de envío a proveedores — pedir listas y consultar precio.
 *
 * La pantalla tiene un solo trabajo: que se vea cuánto falta y cuál sigue.
 * Por eso el único elemento con color fuerte es la barra de avance, y la fila
 * ya despachada se apaga en vez de desaparecer —quien va por el número doce
 * necesita ver los once que lleva, no una lista que se encoge.
 * ------------------------------------------------------------------------- */

/* ── Avance ─────────────────────────────────────────────────────────────── */

.avance{
  display:flex; align-items:center; gap:14px;
  margin-bottom:14px; padding:12px 16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh);
}
.avance-barra{
  flex:1; height:7px; border-radius:99px;
  background:var(--line-2); overflow:hidden;
}
.avance-barra span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gi-navy),var(--gi-blue));
  border-radius:99px;
  transition:width .38s var(--ease-salida);
}
.avance-texto{font-size:13px; color:var(--ink-2); white-space:nowrap}
.avance-texto b{color:var(--ink)}

/* ── Filas de la cola ───────────────────────────────────────────────────── */

.cola{display:flex; flex-direction:column}

.cola-fila{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 16px;
  align-items:center;
  padding:13px 16px;
  border-bottom:1px solid var(--line-2);
  transition:background .18s var(--ease-suave), opacity .18s var(--ease-suave);
}
.cola-fila:last-child{border-bottom:0}
.cola-fila:hover{background:#FAFCFD}

/* Despachada: se apaga y se marca con un filete verde a la izquierda. El
   color va en el borde y no en el fondo para que la fila que TOCA siga siendo
   la más legible de la lista. */
.cola-fila.hecha{
  box-shadow:inset 3px 0 0 var(--ok);
  background:var(--ok-bg);
}
.cola-fila.hecha .cola-quien{opacity:.62}
.cola-fila.omitida{opacity:.45}
.cola-fila.omitida .cola-quien b{text-decoration:line-through}

.cola-quien b{font-size:14px}
.cola-quien .small{margin-top:3px}
.cola-acciones{justify-self:end}

/* El panel del mensaje ocupa el ancho completo de la fila */
.cola-panel{grid-column:1 / -1; padding-top:6px}
.cola-texto{
  width:100%; margin-top:4px;
  font:13px/1.55 var(--sans);
  padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--canvas); color:var(--ink);
  resize:vertical;
}
.cola-texto:focus{
  outline:2px solid var(--gi-blue); outline-offset:1px;
  background:var(--surface);
}

/* ── Buscador de artículos y selección ──────────────────────────────────── */

.filtros .campo.ancho input{min-width:min(420px,58vw)}

.resultados{display:flex; flex-direction:column}
.resultado{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:11px 2px; border-bottom:1px solid var(--line-2);
}
.resultado:last-child{border-bottom:0}
.resultado b{font-size:13.5px}

.elegidos{display:flex; flex-direction:column; gap:10px}
.elegido{
  display:grid;
  grid-template-columns:1fr 132px auto;
  gap:14px; align-items:end;
  padding:11px 13px;
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.elegido .field.compacto{margin:0}
.elegido .field.compacto label{
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:3px; display:block;
}
.elegido .field.compacto input{width:100%; padding:6px 9px; font-size:13px}

/* ── Angosto ────────────────────────────────────────────────────────────── */

@media (max-width:720px){
  .cola-fila{grid-template-columns:1fr}
  .cola-acciones{justify-self:stretch}
  .cola-acciones .row{justify-content:flex-start}
  .elegido{grid-template-columns:1fr; align-items:stretch}
  .avance{flex-direction:column; align-items:stretch; gap:8px}
  .avance-texto{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  .avance-barra span,.cola-fila{transition:none}
}