/* components/peticiones/peticiones.css */
/* Prefijos bnd- (bandeja) y det- (detalle) — aislados del resto
   del sistema, igual que usr-/ses- en el módulo de usuarios. */

.bnd-back-btn {
  font-size: 0.75rem; color: var(--muted); background: none; border: none;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.3125rem;
  padding: 0; margin-bottom: 0.875rem;
}
.bnd-back-btn:hover { color: var(--text); }

/* La bandeja se monta con mountDataGrid(): las clases de tabla propia
   (.bnd-row, .bnd-folio, .bnd-fecha, el mini-stepper de puntos y las
   celdas .bnd-obs) se eliminaron junto con el gradiente rojo→verde. Lo
   que queda aquí es la barra de pulso y los dos detalles que el datagrid
   no puede resolver solo. */

.bnd-pill { font-size: 0.6875rem; font-weight: 500; padding: 0.125rem 0.5625rem; border-radius: 1.25rem; white-space: nowrap; }
.bnd-pill-default { background: var(--bg); color: var(--muted); }
.bnd-pill-success { background: var(--success-bg); color: var(--success); }
.bnd-pill-warning { background: #FEF3C7; color: #B45309; }
.bnd-pill-danger { background: var(--danger-bg); color: var(--danger); }

@media (prefers-color-scheme: dark) {
  .bnd-pill-warning { background: #451A03; color: #FCD34D; }
}

/* Cabecera: filtro segmentado (Pendientes / Todas) + Nueva petición */
.bnd-header-acciones { display: flex; align-items: center; gap: 0.625rem; }
.bnd-filtro-seg {
  display: inline-flex; background: var(--bg); border: 0.5px solid var(--border);
  border-radius: 0.5rem; padding: 0.1875rem; gap: 0.1875rem;
}
.bnd-seg-btn {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 0.8125rem; font-weight: 500; padding: 0.375rem 0.75rem; border-radius: 0.375rem;
  white-space: nowrap; transition: background .15s, color .15s;
}
.bnd-seg-btn:hover { color: var(--text); }
.bnd-seg-activo { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ─────────────────────────────────────────────────────────────
   Barra de pulso — la primera línea que se lee al abrir el sistema.
   Es UNA LÍNEA DE TEXTO, no una fila de tarjetas: cifra grande,
   etiqueta pequeña debajo, separadores tenues y una regla de 1px que
   la despega de la tabla. Sin caja, sin borde, sin ícono, sin sombra:
   seis tiles de KPI dirían lo mismo ocupando cuatro veces más y
   compitiendo con la tabla, que es donde está el trabajo.

   El estado activo se marca con SUBRAYADO, no con relleno de color —
   el color de esta pantalla ya tiene un solo trabajo (de quién es la
   pelota) y no se puede gastar en señalar un filtro.
   ───────────────────────────────────────────────────────────── */
.bnd-pulso {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.25rem;
  padding: 0.125rem 0 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.875rem;
}
.bnd-pulso-vacio {
  padding: 0.375rem 0 0.75rem; border-bottom: 1px solid var(--border);
  margin-bottom: 0.875rem; font-size: 0.8125rem; color: var(--muted);
}
.bnd-pulso-seg {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.0625rem;
  background: none; border: none; padding: 0.125rem 0.625rem 0.1875rem;
  cursor: pointer; font-family: inherit; color: var(--text);
  border-bottom: 2px solid transparent; border-radius: 0.25rem 0.25rem 0 0;
  transition: background .14s ease, border-color .14s ease;
}
.bnd-pulso-seg:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.bnd-pulso-activo { border-bottom-color: currentColor; }
.bnd-pulso-cifra {
  font-size: 1.25rem; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.bnd-pulso-label { font-size: 0.6875rem; color: var(--muted); line-height: 1.2; }
/* Los dos únicos segmentos con color: dinero que falta entrar. */
.bnd-pulso-acento .bnd-pulso-cifra { color: var(--accent); }
.bnd-pulso-riesgo .bnd-pulso-cifra { color: var(--danger); }
.bnd-pulso-cero .bnd-pulso-cifra { color: var(--muted); font-weight: 500; }
.bnd-pulso-sep { color: var(--border-md); font-size: 0.875rem; align-self: center; user-select: none; }

/* Columna Progreso: puntos llenos = recorrido, huecos = pendiente. El
   avance se lee por posición; el color se reserva para el pill de estado. */
.bnd-prog {
  letter-spacing: 0.0625rem; font-size: 0.6875rem; color: var(--text);
}

/* Fila que cambió de estado entre dos refrescos automáticos: destello de
   400 ms sobre el pill y nada más — ni toast, ni sonido, ni badge. */
@keyframes bnd-cambio {
  from { box-shadow: inset 0 0 0 2rem color-mix(in srgb, var(--success) 35%, transparent); }
  to   { box-shadow: none; }
}
.bnd-cambio { animation: bnd-cambio .4s ease-out; }

/* La pantalla ocupa el alto del área de contenido y NO scrollea: el
   scroll es el de la tabla, virtualizado. Sin esto el datagrid no sabe
   cuánto mide y no puede virtualizar. */
.bnd-root { height: 100%; display: flex; min-height: 0; }
.bnd-pantalla {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  padding: 1.5rem 1.5rem 0;
}
.bnd-cabecera { margin-bottom: 0.875rem; }
.bnd-grid-host { flex: 1; min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .bnd-cambio { animation: none; }
  .bnd-pulso-seg { transition: none; }
}

/* Detalle */
.det-header { margin-bottom: 1.125rem; }
.det-folio { font-size: 1.0625rem; font-weight: 500; color: var(--text); }
.det-sub { font-size: 0.75rem; color: var(--muted); margin-top: 0.125rem; }

/* Stepper + navegación entre pasos.
   Las flechas flanquean el stepper y viven al mismo alto que los
   círculos: son el control de "en qué paso estoy", no un botón más de la
   pantalla. Sin etiqueta visible — el destino y el atajo van en el
   tooltip, para no repetir siete veces lo que el stepper ya dice. */
.det-stepper-wrap { display: flex; align-items: flex-start; gap: 0.25rem; margin-bottom: 1.375rem; }
.det-stepper-row { display: flex; align-items: flex-start; flex: 1; min-width: 0; }
.det-step-col {
  display: flex; flex-direction: column; align-items: center; flex: 1;
  position: relative; cursor: pointer;
}
/* Los pasos a los que todavía no se puede entrar no invitan al clic. */
.det-col-bloqueado { cursor: default; }
.det-step-circle {
  width: 1.875rem; height: 1.875rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 500; z-index: 1;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.det-step-col:not(.det-col-bloqueado):hover .det-step-circle { transform: translateY(-0.0625rem); }
.det-step-done { background: var(--success-bg); color: var(--success); }
.det-step-active { background: var(--accent-bg); color: var(--accent); border: 2px solid var(--accent); }
.det-step-pending { background: var(--bg); color: var(--muted); }
.det-step-label {
  font-size: 0.6875rem; color: var(--muted); margin-top: 0.3125rem; text-align: center;
  transition: color .22s ease;
}
.det-step-label-active { color: var(--text); font-weight: 500; }
.det-step-col:not(:last-child)::after {
  content: ''; position: absolute; top: 0.9375rem; left: calc(50% + 1.125rem);
  width: calc(100% - 2.25rem); height: 0.0938rem; background: var(--border-md); z-index: 0;
  transition: background .28s ease;
}
/* El tramo recorrido se pinta: el avance se lee de un vistazo, sin
   contar círculos. */
.det-col-done:not(:last-child)::after { background: var(--success); }

.det-flecha-paso {
  flex: 0 0 auto; width: 1.875rem; height: 1.875rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--border); background: transparent;
  color: var(--muted); font-size: 0.8125rem; cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s cubic-bezier(.2,.8,.2,1);
}
.det-flecha-paso:hover { color: var(--accent); border-color: var(--accent); }
.det-flecha-paso:active { transform: scale(0.9); }
/* Deshabilitada se queda en su lugar (no desaparece): que el control no
   salte de posición es la mitad de la sensación de solidez. */
.det-flecha-paso[disabled] { opacity: 0.25; cursor: default; }
.det-flecha-paso[disabled]:hover { color: var(--muted); border-color: var(--border); }

/* Cambio de paso: el contenido entra desde el lado del movimiento. 200 ms
   y 0.75rem de recorrido — suficiente para leer la dirección, corto para
   no estorbar en el décimo cambio de paso del día. */
@keyframes det-entra-der {
  from { opacity: 0; transform: translate3d(0.75rem, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes det-entra-izq {
  from { opacity: 0; transform: translate3d(-0.75rem, 0, 0); }
  to   { opacity: 1; transform: none; }
}
.det-entra-der { animation: det-entra-der .2s cubic-bezier(.2,.8,.2,1) both; }
.det-entra-izq { animation: det-entra-izq .2s cubic-bezier(.2,.8,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  .det-entra-der, .det-entra-izq { animation: none; }
  .det-step-circle, .det-step-label, .det-flecha-paso,
  .det-step-col:not(:last-child)::after { transition: none; }
  .det-step-col:not(.det-col-bloqueado):hover .det-step-circle { transform: none; }
}

.det-card {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 0.75rem; padding: 1.25rem 1.375rem;
}
.det-card-title { font-size: 0.8125rem; font-weight: 500; color: var(--text); margin-bottom: 0.625rem; }

.det-field-row { display: flex; justify-content: space-between; font-size: 0.8125rem; padding: 0.4375rem 0; border-bottom: 0.5px solid var(--border); }
.det-field-row:last-child { border-bottom: none; }
.det-field-label { color: var(--muted); }
.det-field-val { color: var(--text); font-weight: 500; text-align: right; }

.det-paso-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.875rem; }
.det-hint { font-size: 0.75rem; color: var(--muted); }

/* IVA puesto por el sistema (clave 010 → Tasa 0%): una marca mínima para
   que se note que el valor no lo escribió el operador. Sin texto: el
   porqué está en el title del select. */
.det-prop-iva-auto { box-shadow: inset 0.125rem 0 0 var(--accent); }

/* Aviso de UMA por renglón de propuesta (paso "Propuesta cliente").
   Recomendación, no error — de ahí el naranja y no el rojo de
   .crud-alert (reservado a errores de API).

   Regla de oro: NO puede cambiar el alto de la fila. Un bloque que
   aparece al teclear y empuja los renglones hacia abajo es lo que hace
   que una tabla de captura se sienta inestable. Así que el aviso son el
   input pintado + un botón mínimo a su lado, y la explicación vive en un
   globo con position: absolute que no ocupa espacio en el flujo. */
.det-td-cantidad { white-space: nowrap; }
.det-uma-wrap:empty { display: none; }
.det-uma { position: relative; display: inline-flex; vertical-align: middle; margin-left: 0.25rem; }

/* El input de cantidad fuera de rango: la señal más barata posible. */
.crud-input-uma {
  border-color: var(--orange) !important;
  color: var(--orange);
  font-weight: 600;
}

/* El botón ES la solución, no un "ver más": dice a cuántas piezas
   reduce, y un clic lo aplica. Sin la palabra "reducir" — la flecha
   hacia abajo y el número lo dicen en dos caracteres. */
.det-uma-fix {
  display: inline-flex; align-items: center; gap: 0.125rem;
  height: 1.5rem; padding: 0 0.4375rem; border-radius: 0.375rem;
  border: 0.5px solid var(--orange);
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--orange); font-family: inherit; font-size: 0.6875rem; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .14s ease, transform .14s cubic-bezier(.2,.8,.2,1);
}
.det-uma-fix:hover { background: color-mix(in srgb, var(--orange) 26%, transparent); }
.det-uma-fix:active { transform: scale(0.92); }
.det-uma-fix:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

/* El "por qué", a la vista solo si se pregunta (hover o foco). */
.det-uma-globo {
  position: absolute; bottom: calc(100% + 0.375rem); left: 50%;
  transform: translate(-50%, 0.1875rem);
  background: var(--surface); color: var(--text);
  border: 0.5px solid var(--border-md); border-left: 0.125rem solid var(--orange);
  border-radius: 0.375rem; padding: 0.3125rem 0.5rem;
  font-size: 0.6875rem; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  opacity: 0; pointer-events: none; z-index: 20;
  transition: opacity .14s ease, transform .14s cubic-bezier(.2,.8,.2,1);
}
.det-uma:hover .det-uma-globo,
.det-uma-fix:focus-visible ~ .det-uma-globo {
  opacity: 1; transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .det-uma-fix, .det-uma-globo { transition: none; }
  .det-uma-fix:active { transform: none; }
}

/* Botón-enlace sutil (p.ej. "Marcar como no disponible" / "Deshacer") */
.crud-btn-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 0.75rem; color: var(--muted); text-decoration: underline;
  font-family: inherit; transition: color 120ms ease;
}
.crud-btn-link:hover { color: var(--text); }
.crud-btn-link:active { transform: scale(0.97); }

.det-no-disp { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }

.det-renglon-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }

.det-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
@media (max-width: 30rem) {
  .det-form-row { grid-template-columns: 1fr; }
}

/* Precio final editable en el comparativo de la propuesta */
.det-prop-precio-wrap { display: inline-flex; align-items: center; gap: 0.25rem; }
.det-prop-precio-signo { color: var(--muted); font-size: 0.8125rem; }

/* Panel inline "Pegar claves" (alta de petición) */
.det-claves-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.625rem;
}
.det-pegar-toggle { padding: 0.3125rem 0.625rem; font-size: 0.75rem; }
.det-pegar-panel {
  border: 0.5px dashed var(--border-md); border-radius: 0.5rem;
  padding: 0.75rem 0.875rem; margin-bottom: 0.75rem;
}
.det-pegar-hint { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.5rem; line-height: 1.45; }
.det-pegar-textarea {
  width: 100%; resize: vertical; min-height: 6.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem; line-height: 1.5; white-space: pre;
}
.det-pegar-acciones {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-top: 0.5rem;
}
.det-pegar-ok { font-size: 0.75rem; color: var(--muted); margin-top: 0.5rem; }
/* Claves que no cruzaron: es un pendiente de validación, no un error del
   sistema — línea ámbar discreta en vez del panel rojo de .crud-alert,
   que estaba reservado a fallas de API. */
.det-pegar-faltantes {
  margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.5; word-break: break-word;
  color: var(--text); border-left: 0.125rem solid var(--orange);
  padding: 0.25rem 0 0.25rem 0.5rem;
}
.det-pegar-faltantes strong { color: var(--orange); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   Alta de petición — la pantalla que compite contra un Excel.
   Densidad primero: la cabecera cabe en una línea porque fecha y
   origen ya vienen resueltos, y cada clave es UN renglón. Las
   tarjetas por renglón (buscador + cantidad + notas apilados)
   medían el triple de alto: con 10 claves eso era media pantalla
   de aire y la lista dejaba de leerse como una hoja.
   ───────────────────────────────────────────────────────────── */
.det-alta-head {
  display: grid; grid-template-columns: 1fr 9rem 10rem;
  gap: 0.75rem; align-items: end;
}
@media (max-width: 48rem) {
  .det-alta-head { grid-template-columns: 1fr; }
}
/* Notas de la petición: escondidas tras un enlace hasta que se piden.
   Es un campo que casi nunca se llena y su textarea permanente era el
   bloque más grande de la primera tarjeta. */
.det-alta-notas-toggle { margin-top: 0.625rem; }
.det-alta-notas { margin-top: 0.75rem; }
.det-alta-agregar { margin-top: 0.625rem; }
.det-alta-acciones { display: flex; align-items: center; gap: 0.5rem; }

.det-hoja { display: flex; flex-direction: column; gap: 0.3125rem; }

/* Un renglón = una línea. La nota, cuando se pide, ocupa una segunda
   fila del mismo grid en vez de crecer una tarjeta aparte. */
.det-renglon-linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem 4rem 1.75rem 1.75rem;
  gap: 0.375rem; align-items: center;
}
.det-renglon-linea.con-nota { row-gap: 0.3125rem; }
.det-renglon-linea.con-nota .det-renglon-notas { grid-column: 1 / -1; }
.det-renglon-ac { min-width: 0; }
.det-renglon-ac .ac-wrap { margin: 0; }
.det-renglon-cantidad { text-align: right; font-variant-numeric: tabular-nums; }
/* La unidad de presentación no es un dato que se capture: es una
   confirmación de que se eligió la clave correcta. Va al lado, en gris,
   sin etiqueta. */
.det-renglon-unidad {
  font-size: 0.6875rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.det-renglon-hueco { display: block; }
.det-renglon-nota-btn { opacity: 0.35; transition: opacity .12s ease; }
.det-renglon-linea:hover .det-renglon-nota-btn,
.det-renglon-nota-btn:focus-visible { opacity: 1; }
.det-renglon-nota-btn.activo { opacity: 1; color: var(--accent); }

/* Clave repetida: el renglón que ya la tenía destella ámbar. El salto
   del cursor sin este aviso se sentiría como un error de la pantalla. */
@keyframes det-dup-flash {
  from { background: color-mix(in srgb, var(--orange) 22%, transparent); }
  to   { background: transparent; }
}
.det-dup-flash { animation: det-dup-flash .5s ease-out; border-radius: 0.375rem; }

@media (prefers-reduced-motion: reduce) {
  .det-dup-flash { animation: none; }
  .det-renglon-nota-btn { transition: none; }
}
.det-fuera-catalogo { color: var(--danger); font-style: italic; }

.det-cot-card { border: 0.5px solid var(--border); border-radius: 0.5rem; padding: 0.75rem 0.875rem; margin-bottom: 0.625rem; }
.det-cot-card:last-child { margin-bottom: 0; }
.det-cot-head { display: flex; align-items: center; justify-content: space-between; }
.det-cot-folio { font-size: 0.8125rem; font-weight: 500; color: var(--text); }
.det-cot-sub { font-size: 0.6875rem; color: var(--muted); margin-top: 0.125rem; }

.det-prov-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
  gap: 0.625rem; margin-top: 0.625rem;
}
.det-prov-card {
  border: 0.5px solid var(--border); border-radius: 0.5rem; padding: 0.625rem 0.75rem;
  background: var(--bg);
}
.det-prov-card-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.7812rem; font-weight: 500; color: var(--text); margin-bottom: 0.375rem;
}

.det-pedido-tabs {
  display: flex; gap: 0.375rem; margin-bottom: 0.75rem; border-bottom: 0.5px solid var(--border); padding-bottom: 0.5rem;
}
.det-pedido-tab {
  padding: 0.375rem 0.875rem; border-radius: 0.5rem; border: 0.5px solid var(--border-md);
  background: transparent; color: var(--text); font-size: 0.7812rem; cursor: pointer;
}
.det-pedido-tab-activo {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.det-claves-check-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text); padding: 0.3125rem 0; }

/* Recepción (paso 7): celda de producto ya precargado del pedido —
   se muestra como etiqueta de solo lectura, sin autocomplete. */
.det-rec-producto-fijo {
  padding: 0.375rem 0.125rem;
  line-height: 1.3;
}

/* Sub-stepper sutil de progreso dentro de los pasos 6/7/8 (B.3).
   Indicador visual, no navegable. Transiciones cortas y no bloqueantes. */
.substepper {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.125rem; margin: 0.25rem 0 0.875rem;
}
.substep { display: inline-flex; align-items: center; gap: 0.375rem; }
.substep-dot {
  width: 0.5625rem; height: 0.5625rem; border-radius: 50%;
  background: var(--border-md);
  transition: background 150ms ease, box-shadow 150ms ease;
  flex-shrink: 0;
}
.substep-label {
  font-size: 0.75rem; color: var(--muted);
  transition: color 150ms ease;
  white-space: nowrap;
}
.substep-line {
  width: 1.625rem; height: 0.125rem; background: var(--border);
  margin: 0 0.25rem; transition: background 150ms ease;
}
.substep-line-done { background: var(--accent); }

.substep-done .substep-dot { background: var(--accent); }
.substep-done .substep-label { color: var(--text); }

.substep-active .substep-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.substep-active .substep-label { color: var(--accent); font-weight: 600; }

.substep-pending .substep-dot { background: var(--border-md); }

.substep-cancelled .substep-dot { background: var(--border-md); }
.substep-cancelled .substep-label { color: var(--muted); text-decoration: line-through; }

/* ─────────────────────────────────────────────────────────────
   Paso 3 — captura de precios de proveedor
   La referencia es la hoja de cálculo que este paso reemplaza:
   una fila, tres campos, Enter. Nada se esconde detrás de un
   botón y nada abre un modal, porque cada clic extra en un
   trabajo repetitivo se paga multiplicado por 50 renglones.
   ───────────────────────────────────────────────────────────── */

.cot-progreso { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; }
.cot-progreso-barra {
  flex: 1; height: 0.25rem; border-radius: 0.25rem; overflow: hidden;
  background: var(--border);
}
.cot-progreso-fill {
  height: 100%; background: var(--success); border-radius: 0.25rem;
  transition: width .28s cubic-bezier(.2,.8,.2,1);
}
.cot-progreso-txt { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }

.cot-clave {
  background: var(--surface); border: 0.5px solid var(--border); border-radius: 0.625rem;
  padding: 0.75rem 0.875rem; margin-bottom: 0.625rem;
  border-left: 2px solid var(--border-md);
  transition: border-color .16s ease, opacity .16s ease, background .16s ease;
}
.cot-clave-ok { border-left-color: var(--success); }
/* Clave descartada: se apaga y se encoge — deja de competir por la
   atención sin desaparecer (la constancia sigue a la vista). */
.cot-clave-nodisp { opacity: 0.55; padding: 0.5rem 0.875rem; border-left-color: var(--orange); }
.cot-clave-nodisp:hover { opacity: 1; }

.cot-clave-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.cot-clave-id { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.cot-clave-num {
  font-size: 0.8125rem; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* La descripción del catálogo mide párrafos: un renglón y elipsis.
   El texto completo vive en el title. */
.cot-clave-desc {
  font-size: 0.75rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.cot-clave-cant {
  font-size: 0.75rem; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cot-clave-resumen { font-size: 0.6875rem; color: var(--muted); margin-top: 0.25rem; }

/* Tarjetas de precio ya capturado — toda la tarjeta es clicable para
   corregir el precio, así que se comporta como botón. */
.cot-prov-card { cursor: pointer; transition: border-color .14s ease, transform .14s ease; }
.cot-prov-card:hover { border-color: var(--accent); }
.cot-prov-card:active { transform: scale(0.985); }
.cot-prov-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cot-prov-card.es-mejor { border-color: var(--success); background: var(--success-bg); }
.cot-prov-card.es-pendiente { border-style: dashed; }
.cot-prov-nombre {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cot-prov-precio {
  font-size: 1rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
}
.cot-prov-piezas { font-size: 0.6875rem; font-weight: 400; color: var(--muted); }
.cot-prov-pendiente { font-size: 0.6875rem; color: var(--muted); }

/* ── El renglón de captura ── */
.cot-cap { margin-top: 0.625rem; }
.cot-cap.is-guardando { opacity: 0.6; }
.cot-cap-campos {
  display: grid; grid-template-columns: minmax(8rem, 1fr) 7.5rem 6.5rem 2.25rem;
  gap: 0.375rem; align-items: center;
}
.cot-cap-prov { min-width: 0; position: relative; }
.cot-cap-prov .ac-wrap { margin: 0; }
/* Confirmación silenciosa de que el proveedor quedó elegido: sin texto
   extra, sin mover el layout. */
.cot-cap-prov.is-listo .ac-input {
  border-color: var(--success);
  box-shadow: inset 0.125rem 0 0 var(--success);
}
.cot-cap-money, .cot-cap-pz { position: relative; display: flex; align-items: center; }
.cot-cap-afijo {
  position: absolute; font-size: 0.75rem; color: var(--muted); pointer-events: none;
}
.cot-cap-money .cot-cap-afijo { left: 0.5rem; }
.cot-cap-pz .cot-cap-afijo { right: 0.5rem; }
.cot-cap-precio, .cot-cap-piezas {
  width: 100%; font-variant-numeric: tabular-nums; text-align: right;
}
.cot-cap-precio { padding-left: 1.375rem; font-weight: 600; }
.cot-cap-piezas { padding-right: 1.75rem; }

.cot-cap-guardar {
  height: 2rem; border-radius: 0.5rem; border: 0.5px solid var(--border-md);
  background: var(--accent); color: #fff; font-size: 0.875rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s cubic-bezier(.2,.8,.2,1), filter .12s ease;
}
.cot-cap-guardar:hover { filter: brightness(1.08); }
.cot-cap-guardar:active { transform: scale(0.92); }
.cot-cap-guardar[disabled] { opacity: 0.6; cursor: default; }

.cot-cap-pie {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 0.375rem; font-size: 0.6875rem;
}
.cot-cap-hint { color: var(--muted); }
.cot-cap-error { color: var(--danger); font-weight: 500; }
.cot-cap-editando { font-size: 0.6875rem; color: var(--accent); margin-bottom: 0.375rem; }
.cot-cap-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
/* Reconocer en vez de recordar: los proveedores que ya se usaron en esta
   petición quedan a un clic, sin teclear ni esperar la búsqueda. */
.cot-chip {
  border: 0.5px solid var(--border-md); background: transparent; color: var(--muted);
  border-radius: 999px; padding: 0.125rem 0.5rem; font-size: 0.6875rem; cursor: pointer;
  max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}
.cot-chip:hover { color: var(--accent); border-color: var(--accent); }
.cot-cap-nodisp {
  margin-left: auto; border: none; background: transparent; color: var(--muted);
  font-size: 0.6875rem; cursor: pointer; text-decoration: underline;
  text-underline-offset: 0.125rem;
}
.cot-cap-nodisp:hover { color: var(--orange); }

.cot-spin {
  width: 0.75rem; height: 0.75rem; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: cot-spin .6s linear infinite;
}
@keyframes cot-spin { to { transform: rotate(360deg); } }

/* Destello al guardar: cierra el ciclo "escribí → pasó algo" sin robar
   el foco ni mover nada de lugar. */
@keyframes cot-flash {
  from { background: var(--success-bg); }
  to { background: var(--surface); }
}
.cot-flash { animation: cot-flash .5s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .cot-flash, .cot-spin { animation: none; }
  .cot-progreso-fill, .cot-cap-guardar, .cot-prov-card { transition: none; }
}

/* En pantallas angostas la fila se parte en dos renglones antes que
   volverse ilegible — el orden de tabulación no cambia. */
@media (max-width: 40rem) {
  .cot-cap-campos { grid-template-columns: 1fr 1fr; }
  .cot-cap-prov { grid-column: 1 / -1; }
  .cot-cap-guardar { grid-column: 2; }
}

/* ── Aviso de precarga (claves traídas de Requerimientos) ─────────────
   Entra con un deslizamiento corto porque aparece cuando el cruce con
   el catálogo termina, no al abrir la pantalla: sin la animación el
   bloque "parpadea" de un estado al otro. */
.det-precarga {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.625rem 0.875rem; margin-bottom: 0.875rem;
  font-size: 0.8125rem; line-height: 1.45;
  color: var(--accent);
  background: var(--accent-bg);
  border-left: 0.1875rem solid var(--accent);
  border-radius: 0.5rem;
  animation: det-precarga-in 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.det-precarga-cargando { color: var(--muted); background: color-mix(in srgb, var(--text) 5%, transparent); border-left-color: var(--border-md); }
.det-precarga-warn { color: var(--danger); font-size: 0.75rem; }
@keyframes det-precarga-in {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .det-precarga { animation: none; } }