/* Cotizaciones · el centro de control y el asistente de 5 pasos.
   Solo variables y clases de estilos.css; las clases propias llevan el prefijo cot-. Nada depende únicamente del color: cada estado trae su texto. */

/* ---------- Casillas (esta pantalla): marco y texto alineados, tamaño táctil ---------- */
.cot-form .casilla, .cot-bloque .casilla, .cot-proveedores .casilla, .cot-refs-lista .casilla, .cot-campos .casilla, .cot-plan-paso .casilla, .cot-abrir .casilla, .cot-origen .casilla, .cot-previa .casilla, .casillas-grupo .casilla {
  display: inline-flex; align-items: flex-start; gap: var(--e2); min-height: 1.75rem; cursor: pointer; line-height: 1.4; min-width: 0;
}
.cot-form .casilla input, .cot-bloque .casilla input, .cot-proveedores .casilla input, .cot-refs-lista .casilla input, .cot-campos .casilla input, .cot-plan-paso .casilla input, .cot-abrir .casilla input, .cot-origen .casilla input, .casillas-grupo .casilla input { margin-top: 0.1rem; }

/* ---------- El centro ---------- */
.cot-resumen { gap: var(--e4); }
.cot-frase { margin: 0; font-size: var(--paso-1); font-weight: 700; line-height: 1.35; max-width: 60ch; }
.cot-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--e3); margin: 0; }
.cot-cifras > div { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e1); padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1.1rem; min-width: 0; }
.cot-cifras dt { font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); line-height: 1.3; }
.cot-cifras dd { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1.1; }
.cot-cifras > div[data-urge="true"] { background: var(--tx); border-color: var(--tx); color: var(--fondo); }
.cot-cifras > div[data-urge="true"] dt { color: var(--fondo); }
.cot-empieza { display: flex; align-items: flex-start; gap: var(--e2); margin: 0; font-size: var(--paso-0, 1rem); line-height: 1.45; }
.cot-empieza .icono { flex: none; width: 1.2em; height: 1.2em; margin-top: 0.2em; }
.cot-empieza a { font-weight: 700; }

.cot-categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--e2); }
.cot-cat { display: flex; align-items: center; gap: var(--e3); min-height: 3.25rem; padding: 0.5rem var(--e4); text-align: left; border: 1px solid var(--bd); border-radius: 1.1rem; background: var(--fondo); color: var(--tx); font: inherit; font-weight: 600; font-size: var(--paso--1); line-height: 1.25; cursor: pointer; min-width: 0; transition: background-color 0.2s, color 0.2s, border-color 0.2s, translate 0.15s; }
.cot-cat strong { flex: none; min-width: 1.6rem; font-size: 1.35rem; font-weight: 800; line-height: 1; text-align: center; }
.cot-cat span { min-width: 0; overflow-wrap: anywhere; }
.cot-cat:hover { border-color: var(--tx); }
.cot-cat:active { translate: 0 1px; }
.cot-cat:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cot-cat[aria-pressed="true"] { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
.cot-cat[data-urge="true"]:not([aria-pressed="true"]) { border-width: 2px; padding-block: calc(0.5rem - 1px); }

.cot-filtro-embarque { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); }
.cot-filtro-embarque p { display: flex; align-items: flex-start; gap: var(--e2); margin: 0; }
.cot-filtro-embarque p .icono { flex: none; width: 1.2em; height: 1.2em; margin-top: 0.15em; }
.cot-tabla td { vertical-align: top; }
.cot-tabla .tabla.ancha td:last-child { white-space: normal; }
.cot-tabla .chip { white-space: normal; overflow-wrap: anywhere; }
.cot-tabla .cot-chips { align-items: flex-start; }
.cot-nombre { color: var(--tx); font-weight: 700; font-size: var(--paso-0, 1rem); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.cot-nombre:hover { text-decoration-thickness: 2px; }
.cot-codigo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: 0.15rem; }
.cot-vinculos { display: flex; flex-wrap: wrap; gap: 0.15rem var(--e3); margin-top: 0.25rem; }
.cot-vinculos a { font-weight: 600; }
.cot-avance { display: flex; flex-direction: column; gap: 0.2rem; font-size: var(--paso--1); line-height: 1.4; min-width: 0; }
.cot-cobertura { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.cot-barra { display: inline-block; position: relative; width: 5.5rem; height: 0.5rem; border-radius: 99px; background: var(--ln); overflow: hidden; flex: none; }
.cot-barra > span { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: inherit; background: var(--celeste); transition: width 0.5s var(--salida, ease-out); }
.cot-falta { font-weight: 700; }
.cot-siguiente { display: block; margin-bottom: var(--e2); line-height: 1.4; min-width: 0; }
.cot-razones { margin-top: var(--e1); }
.cot-razones summary { min-height: 1.75rem !important; font-size: var(--paso--1); font-weight: 600; color: var(--tx-2); }
.cot-razones ul { margin: var(--e1) 0 0; padding-left: 1.1rem; font-size: var(--paso--1); line-height: 1.45; }
.cot-vacio { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e5) 0; }
.cot-vacio p { margin: 0; }
.cot-error h2 { margin: 0; }

/* La tabla en pantallas con sitio: columnas con anchos pensados (el apilado de móvil lo da .tabla-compras) */
@container compras (min-width: 900px) {
  .cot-tabla .tabla.ancha { min-width: 0; table-layout: fixed; }
  .cot-tabla .tabla.ancha th:nth-child(1) { width: 29%; }
  .cot-tabla .tabla.ancha th:nth-child(2) { width: 19%; }
  .cot-tabla .tabla.ancha th:nth-child(3) { width: 17%; }
  .cot-tabla .tabla.ancha th:nth-child(4) { width: 17%; }
  .cot-tabla .tabla.ancha th:nth-child(5) { width: 18%; }
  .cot-tabla .tabla.ancha td { overflow-wrap: anywhere; }
  .cot-tabla .tabla.ancha td:last-child { width: auto; }
}
@container compras (max-width: 899px) {
  .cot-tabla .tabla.ancha td[data-etiqueta="Ronda"] { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .cot-tabla .tabla.ancha td[data-etiqueta="Ronda"]::before { display: none; }
  .cot-tabla .tabla.ancha td[data-etiqueta="Estado y riesgo"] > div, .cot-tabla .tabla.ancha td[data-etiqueta="Responsable"] > div { flex: 1 0 100%; }
  .cot-tabla .tabla.ancha td[data-etiqueta="Estado y riesgo"] > .cot-chips { flex: 1 1 12rem; }
  .cot-tabla .tabla.ancha td[data-etiqueta="Qué sigue"] { flex-direction: column; align-items: flex-start; }
  .cot-tabla .tabla.ancha td[data-etiqueta="Qué sigue"]::before { flex-basis: auto; }
}

/* ---------- El asistente ---------- */
.cot-form { max-width: 62rem; }
.cot-origen { display: flex; flex-direction: column; gap: var(--e3); }
.cot-sub { margin-left: 2rem; max-width: 34rem; }
.cot-guardado { display: flex; align-items: flex-start; gap: var(--e2); margin: 0; max-width: 62ch; }
.cot-guardado .icono { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.15em; }

.cot-pasos-nav { min-width: 0; }
.cot-pasos-nav .cot-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e2); }
.cot-paso { display: flex; align-items: center; gap: var(--e2); width: 100%; min-height: 3.25rem; padding: 0.4rem var(--e3); text-align: left; border: 1px solid var(--ln); border-radius: 1.1rem; background: var(--fondo); color: var(--tx-2); font: inherit; font-size: var(--paso--1); font-weight: 600; line-height: 1.25; cursor: pointer; min-width: 0; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.cot-paso:hover { border-color: var(--tx); color: var(--tx); }
.cot-paso:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cot-n { flex: none; display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1.5px solid currentColor; border-radius: 50%; font-weight: 800; }
.cot-paso-texto { min-width: 0; overflow-wrap: anywhere; }
.cot-paso[data-hecho="true"] .cot-n { background: var(--celeste); border-color: var(--celeste); color: #000; }
.cot-paso[aria-current="step"] { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
.cot-paso[aria-current="step"] .cot-n { background: var(--fondo); border-color: var(--fondo); color: var(--tx); }

.cot-bloque { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border: 1px solid var(--ln); border-radius: 1.1rem; min-width: 0; }
.cot-bloque h3 { margin: 0; }
.cot-buscar { max-width: 22rem; }
.cot-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e3); padding-top: var(--e2); }
.cot-paginas { justify-content: center; gap: var(--e3); }
.cot-descartar { max-width: 40rem; }
.cot-descartar form { align-items: flex-end; margin-top: var(--e2); }
.cot-descartar .campo { flex: 1 1 16rem; }

.cot-una-fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(7rem, 1fr) minmax(9rem, 1fr); gap: var(--e3); align-items: start; }
.cot-una-dup { flex: 1 1 16rem; max-width: 22rem; }
.cot-importar-campos { display: grid; gap: var(--e3); max-width: 46rem; }
.cot-archivo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0; }
.cot-archivo .icono { width: 1.1em; height: 1.1em; }

.cot-previa { padding: var(--e4); border: 1px solid var(--bd); border-radius: 1.1rem; min-width: 0; }
.cot-previa-cuenta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.cot-filtro { max-width: 18rem; }
.cot-mapeo { padding: var(--e2) 0; }
.cot-mapeo .fila-flex { margin-top: var(--e3); align-items: flex-end; }
.cot-perfil-nombre { flex: 1 1 16rem; max-width: 24rem; }
.cot-errores ul { margin: var(--e2) 0; padding-left: 1.1rem; font-size: var(--paso--1); line-height: 1.5; max-height: 14rem; overflow: auto; }
.cot-dup { max-width: 34rem; }
.cot-problemas { margin: 0; padding: var(--e3) var(--e4); border: 1px dashed var(--tx); border-radius: 1rem; line-height: 1.45; }
.cot-problemas p { margin: 0; }
.cot-problemas p .icono { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.cot-problemas ul { margin: var(--e2) 0 0; padding-left: 1.1rem; font-size: var(--paso--1); }
.cot-previa tr[data-estado="error"] td:first-child { border-left: 3px solid var(--tx); padding-left: var(--e2); }

.cot-proveedores { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.cot-proveedor { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4); border: 1px solid var(--ln); border-radius: 1.1rem; min-width: 0; transition: border-color 0.2s; }
.cot-proveedor[data-sel="true"] { border-color: var(--tx); }
.cot-proveedor p { margin: 0; }
.cot-proveedor-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); }
.cot-proveedor-nombre { align-items: center; }
.cot-chips { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); }
.cot-proveedor-refs { gap: var(--e3); }
.cot-refs-elegir { padding: var(--e3); border: 1px dashed var(--bd); border-radius: 1rem; }
.cot-refs-elegir .fila-flex { align-items: flex-end; }
.cot-refs-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--e2) var(--e4); max-height: 17rem; overflow: auto; padding: var(--e1); }

.cot-campos td:first-child { font-weight: 400; }

.cot-canales { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.cot-canal { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4); border: 1px solid var(--ln); border-radius: 1.1rem; }
.cot-canal p { margin: 0; }
.cot-canal-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3) var(--e4); }
.cot-canal-fila > strong { flex: 1 1 14rem; min-width: 0; align-self: flex-end; padding-bottom: 0.7rem; overflow-wrap: anywhere; }
.cot-canal-fila .campo { flex: 0 1 15rem; }
.cot-plan-pasos { display: grid; gap: var(--e2); }
.cot-plan-paso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; min-width: 0; }
.cot-plan-paso > .campo.cot-corto { flex: 0 1 15rem; }
.cot-plan-paso > .campo.cot-corto input { max-width: 8rem; }

.cot-resumen-apertura { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e3); margin: 0; }
.cot-resumen-apertura > div { padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; min-width: 0; }
.cot-resumen-apertura dt { font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); }
.cot-resumen-apertura dd { margin: 0.1rem 0 0; font-weight: 700; overflow-wrap: anywhere; }
.cot-mensajes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.cot-msj { border: 1px solid var(--ln); border-radius: 1rem; padding: 0 var(--e4); min-width: 0; }
.cot-msj summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); min-height: 3rem; padding: var(--e2) 0; cursor: pointer; }
.cot-msj:has(details[open]) { border-color: var(--tx); }
.cot-mensaje { margin: var(--e2) 0 var(--e4); padding: var(--e3) var(--e4); border-radius: 1rem; background: var(--r2); font: inherit; font-size: var(--paso--1); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22rem; overflow: auto; }
.cot-mensaje:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cot-abrir { border-color: var(--tx); }
.cot-abrir p { margin: 0; }

/* ---------- Pantallas angostas ---------- */
@media (max-width: 899px) {
  .cot-pasos-nav .cot-pasos { grid-template-columns: minmax(0, 1fr); }
  .cot-una-fila { grid-template-columns: minmax(0, 1fr); }
  .cot-sub { margin-left: 0; }
}
@media (max-width: 560px) {
  .cot-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cot-cat { min-height: 3rem; padding-inline: var(--e3); gap: var(--e2); }
  .cot-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cot-cifras dd { font-size: 1.6rem; }
  .cot-pie { flex-direction: column-reverse; }
  .cot-pie > .fila-flex { width: 100%; }
  .cot-pie > .fila-flex > .boton { flex: 1 1 100%; justify-content: center; }
  .cot-barra { width: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cot-cat, .cot-paso, .cot-proveedor, .cot-barra > span { transition: none; }
}