/* Cotizaciones · decisión y reglas: la pestaña Decisión de una ronda (referencia por referencia, lote, órdenes) y la página de Reglas (criterios, tasas, importador).
   Solo variables y clases de estilos.css; lo propio lleva el prefijo cot-. Nada depende solo del color: cada estado lleva su texto. */

/* ---------- Piezas comunes ---------- */
.chip.chico { padding: 0.12rem 0.65rem 0.12rem 0.55rem; font-size: 0.75rem; line-height: 1.5; }
.cot-dec { min-width: 0; }
.cot-dec h3, .cot-dec h4 { margin: 0; }
.cot-dec h4 { font-size: var(--paso-0); font-weight: 800; }
.cot-dec-nota, .cot-dec-alerta { display: flex; align-items: flex-start; gap: var(--e3); margin: 0; padding: var(--e3) var(--e4); border: 1px solid var(--bd); border-radius: 1rem; font-size: var(--paso--1); line-height: 1.5; max-width: none; }
.cot-dec-nota { background: var(--sup); color: var(--tx-2); }
.cot-dec-alerta { border-color: var(--tx); border-width: 1.5px; color: var(--tx); }
.cot-dec-nota > .icono, .cot-dec-alerta > .icono { flex: none; width: 1.2em; height: 1.2em; margin-top: 0.15em; }
.cot-dec-alerta ul, .cot-dec-lista-simple, .cot-dec-razones { margin: var(--e1) 0 0; padding-left: 1.1rem; }
.cot-dec-lista-simple li, .cot-dec-razones li, .cot-dec-alerta li { margin-bottom: 0.2rem; line-height: 1.45; }
.cot-dec-razones { font-size: var(--paso--1); color: var(--tx-2); }
.cot-dec-lineas { display: flex; flex-direction: column; gap: var(--e2); }
.cot-dec-lineas p { margin: 0; max-width: none; line-height: 1.6; }
.cot-dec-lineas .icono { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-right: 0.3em; }
.cot-dec-no { font-weight: 800; }
.cot-dec-chips { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: 0.3rem; }
.cot-dec-formula { margin-top: var(--e1); font-size: var(--paso--1); }
.cot-dec-formula > summary { cursor: pointer; color: var(--tx-2); font-weight: 600; min-height: 1.5rem; display: inline-flex; align-items: center; }
.cot-dec-formula > summary:hover { color: var(--tx); }
.cot-dec-formula[open] > summary { margin-bottom: var(--e2); }
.cot-dec .kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.cot-dec .kpi strong { font-size: 1.6rem; }
.cot-dec .kpi { padding: var(--e3); }
.cot-dec .tabla-caja, .cot-regl .tabla-caja { margin-inline: 0; padding-inline: 0; }
.cot-dec .tabla th, .cot-regl .tabla th { white-space: normal; }
.cot-dec .tabla td, .cot-regl .tabla td { overflow-wrap: break-word; }
.cot-dec .tabla td[data-etiqueta="Precio"], .cot-dec .tabla td[data-etiqueta="Precio e impacto"], .cot-dec .tabla td[data-etiqueta="Total"], .cot-dec .tabla td[data-etiqueta="Puntos"] { white-space: nowrap; }
.cot-lote-motivo { margin-top: var(--e2); white-space: normal; }
.cot-dec .campo > span small { display: block; font-weight: 400; }
.cot-dec .tabla th, .cot-dec .tabla td, .cot-regl .tabla th, .cot-regl .tabla td { padding-right: var(--e3); }
.cot-regl { min-width: 0; }
.cot-regl h3 { margin: 0; }
.cot-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e2); padding: var(--e3) var(--e5) var(--e4); border-top: 1px solid var(--ln); }

/* ---------- Lista y detalle de referencias (maestro / detalle) ---------- */
.cot-dec-marco { container: cotdec / inline-size; min-width: 0; }
.cot-dec-rejilla { display: grid; grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr); gap: var(--e5); align-items: start; }
.cot-dec-lista { min-width: 0; }
.cot-dec-barra { display: grid; gap: var(--e3); grid-template-columns: minmax(0, 1fr); }
.cot-dec-items { list-style: none; margin: 0; padding: 0 var(--e1) var(--e1) 0; display: flex; flex-direction: column; gap: var(--e2); max-height: 44rem; overflow-y: auto; }
.cot-dec-item { display: grid; gap: 0.25rem; width: 100%; text-align: left; padding: var(--e3) var(--e4); background: transparent; color: var(--tx); border: 1px solid var(--ln); border-radius: 1rem; cursor: pointer; font: inherit; transition: border-color 0.2s var(--salida), background-color 0.2s var(--salida); }
.cot-dec-item:hover { border-color: var(--tx-2); background: var(--r1); }
.cot-dec-item[aria-current="true"] { border-color: var(--tx); border-width: 1.5px; background: var(--r2); }
.cot-dec-item:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cot-dec-item-t { font-size: var(--paso-0); overflow-wrap: anywhere; }
.cot-dec-item-m, .cot-dec-item-r { font-size: var(--paso--1); color: var(--tx-2); overflow-wrap: anywhere; }
.cot-dec-item-c { display: flex; flex-wrap: wrap; gap: var(--e1); }
.cot-dec-pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); margin-top: var(--e3); }
.cot-dec-detalle { min-width: 0; border: 1px solid var(--ln); border-radius: var(--radio); padding: var(--e5); }
.cot-dec-detalle-in { min-width: 0; }
.cot-dec-detalle-in > header h3 { font-size: var(--paso-2); line-height: 1.25; }
.cot-dec-vacio { display: grid; place-items: center; min-height: 12rem; text-align: center; }
.cot-dec-vacio p { margin: 0; max-width: 34ch; }
.cot-dec-volver { display: none; align-self: flex-start; }
.cot-dec-actual, .cot-dec-reco, .cot-dec-hist { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4); border: 1px solid var(--bd); border-radius: 1rem; min-width: 0; }
.cot-dec-actual { border-color: var(--tx); border-width: 1.5px; }
.cot-dec-actual p, .cot-dec-reco p, .cot-dec-hist p { margin: 0; max-width: none; }
.cot-dec-hist-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.cot-dec-hist-lista li { padding-bottom: var(--e3); border-bottom: 1px solid var(--ln); line-height: 1.5; }
.cot-dec-hist-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.cot-dec-opciones td { vertical-align: top; }
.cot-dec-elegir { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 700; cursor: pointer; margin-bottom: var(--e2); }

/* En un espacio angosto la lista y el detalle no van juntos: se ve uno y se vuelve al otro con un botón */
@container cotdec (max-width: 62rem) {
  .cot-dec-rejilla { grid-template-columns: minmax(0, 1fr); }
  .cot-dec-rejilla[data-abierta] .cot-dec-lista { display: none; }
  .cot-dec-rejilla:not([data-abierta]) .cot-dec-detalle { display: none; }
  .cot-dec-rejilla[data-abierta] .cot-dec-volver { display: inline-flex; }
  .cot-dec-items { max-height: none; }
  .cot-dec-detalle { padding: var(--e4); }
}

/* ---------- Formulario de decisión ---------- */
.cot-dec-form { padding: var(--e4); border: 1px solid var(--tx); border-radius: 1rem; }
.cot-dec-tipos { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.cot-dec-tipos legend { font-weight: 800; padding: 0; margin-bottom: var(--e2); }
.cot-dec-tipo { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 0.9rem; cursor: pointer; transition: border-color 0.2s var(--salida), background-color 0.2s var(--salida); }
.cot-dec-tipo:hover { border-color: var(--tx-2); }
.cot-dec-tipo:has(input:checked) { border-color: var(--tx); border-width: 1.5px; background: var(--r2); }
.cot-dec-tipo:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.cot-dec-tipo > span { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cot-dec-tipo small { color: var(--tx-2); font-size: var(--paso--1); line-height: 1.4; }
.cot-dec-sin { margin: 0; }

/* ---------- Lote ---------- */
.cot-lote-confirmar { padding: var(--e5); border: 1.5px solid var(--tx); border-radius: var(--radio); }
.cot-lote-total { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cot-lote-faltan { margin: 0; }
.cot-lote-faltan ul { margin: var(--e1) 0 0; padding-left: 1.1rem; }
.cot-lote-faltan li { margin-bottom: 0.2rem; line-height: 1.45; }
.cot-lote-nosel { padding: var(--e4); border: 1px dashed var(--tx); border-radius: 1rem; }
.cot-lote-resultado { border: 1.5px solid var(--tx); border-radius: var(--radio); padding: var(--e5); }
.cot-dec .tabla td input[type="text"], .cot-dec .tabla td select { min-width: 9rem; max-width: 17rem; }
.cot-dec .tabla td[data-etiqueta="Por qué es excepción"] { min-width: 13rem; }
.cot-dec .tabla td[data-etiqueta="Referencia"] { min-width: 10rem; }
.cot-dec .tabla td input[type="checkbox"] { margin: 0; }

/* La propuesta del lote tiene mucho texto por fila (razones, proveedor, motivo): pasa a fichas apiladas antes que las demás tablas */
@container compras (max-width: 1239px) {
  .cot-tabla-lote { min-width: 0; display: block; }
  .cot-tabla-lote thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cot-tabla-lote tbody { display: block; }
  .cot-tabla-lote tr { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4) 0; border-bottom: 1px solid var(--ln); }
  .cot-tabla-lote td { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem var(--e3); padding: 0; border: 0; min-width: 0; text-align: left; white-space: normal; }
  .cot-tabla-lote tbody tr:hover td { background: transparent; }
  .cot-tabla-lote td[data-etiqueta]::before { content: attr(data-etiqueta); flex: 0 0 8.5rem; color: var(--tx-2); font-size: var(--paso--1); font-weight: 700; }
  .cot-tabla-lote td > * { min-width: 0; }
  .cot-tabla-lote td[data-etiqueta="Por qué es excepción"] { min-width: 0; }
  .cot-tabla-lote td[data-etiqueta="Referencia"] { min-width: 0; }
}

/* ---------- Reglas ---------- */
.cot-regl-salto { margin-block: var(--e2); }
.cot-regl-pesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--e3) var(--e5); }
.cot-regl-peso { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: var(--e3); align-items: center; padding: var(--e3) 0; border-bottom: 1px solid var(--ln); }
.cot-regl-peso label { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cot-regl-peso small { color: var(--tx-2); font-size: var(--paso--1); line-height: 1.4; font-weight: 400; }
.cot-regl-peso input { text-align: right; }
.cot-regl-suma { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) var(--e4); border: 1px solid var(--bd); border-radius: 1rem; }
.cot-regl-suma[data-ok="true"] { border-color: var(--tx); border-width: 1.5px; }
.cot-regl-suma p { margin: 0; }
.cot-regl-barra { height: 0.6rem; border-radius: 99px; background: var(--r3); overflow: hidden; }
.cot-regl-barra span { display: block; height: 100%; background: var(--tx); border-radius: 99px; transition: width 0.25s var(--salida); }
.cot-regl-reglas { border: 0; margin: 0; padding: 0; min-width: 0; }
.cot-regl-reglas legend { font-weight: 800; padding: 0; margin-bottom: var(--e3); }
.cot-regl-detalle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.2rem var(--e4); }
.cot-regl-perfiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--e3); }
.cot-regl-perfil { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); padding: var(--e4); border: 1px solid var(--bd); border-radius: 1rem; min-width: 0; }
.cot-regl-perfil p { margin: 0; }
.cot-regl-mapeo { border: 1px solid var(--bd); border-radius: 1rem; padding: var(--e3) var(--e4); }
.cot-regl-mapeo > summary { cursor: pointer; font-weight: 700; min-height: 2rem; display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); }
.cot-regl-mapeo[open] > summary { margin-bottom: var(--e3); }
.cot-regl-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--e3); }
.cot-regl-campo { margin: 0; padding: var(--e3); border: 1px solid var(--ln); border-radius: 0.9rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2) var(--e3); min-width: 0; }
.cot-regl-campo legend { font-weight: 700; padding: 0 var(--e1); font-size: var(--paso--1); }
.cot-regl-campo .campo small { display: block; font-weight: 400; }
.cot-regl-robert { margin-top: var(--e2); }
.cot-regl-robert summary h3 { font-size: var(--paso-1); }

@media (prefers-reduced-motion: reduce) {
  .cot-dec-item, .cot-dec-tipo, .cot-regl-barra span { transition: none; }
}
@media (max-width: 480px) {
  .cot-regl-peso { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .cot-lote-confirmar, .cot-lote-resultado { padding: var(--e4); }
  .cot-pie { padding-inline: var(--e4); }
}

/* El impacto en dólares nunca se parte («32.614,» / «00»): en el área ancha ocupa dos casillas; en la angosta, una sola a todo lo ancho */
.cot-kpis-dec .kpi strong { overflow-wrap: normal; }
.cot-kpis-dec .kpi:last-child strong { white-space: nowrap; }
@container principal (min-width: 600px) {
  .cot-kpis-dec .kpi:last-child { grid-column: span 2; }
}