/* ═══════════════════════════════════════════════════════════════════════════
   COTIZADOR DE VENTAS (Epic 14) · UH14.1 Clientes

   Solo lo que no existía: la barra de búsqueda con su filtro y la rejilla del
   formulario. La tarjeta, la tabla, los chips de estado, los botones, la
   pastilla de filtro (`pf-filtro-oc`) y el modal son los de siempre.

   El diseño sale del mockup aprobado el 2026-10-08. TODO VA CON LOS TOKENS
   `--pf-*` y la escala de espaciado: ningún valor suelto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La barra: búsqueda + filtro ──────────────────────────────────────────────
   El campo toma el ancho que sobra y el filtro conserva el suyo; si no caben en
   una fila, el filtro baja entero en vez de partirse. */
.pf-cli-tool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-s-3);
  margin-bottom: var(--pf-s-4);
}
.pf-cli-tool .ci-input { flex: 1 1 280px; min-width: 0; }
.pf-cli-filtro { margin: 0; }

/* ── La tabla ─────────────────────────────────────────────────────────────────
   RFC y teléfono no se parten (un RFC cortado en dos renglones no se puede leer
   ni copiar) y las acciones van siempre en una fila. */
.pf-cli-nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-cli-acciones { white-space: nowrap; }
.pf-cli-acciones .ci-btn + .ci-btn { margin-left: var(--pf-s-2); }
.pf-cli-sub { display: block; font-size: var(--pf-fs-sm); color: var(--ci-text-muted); }
.pf-cli-tipo { font-size: var(--pf-fs-sm); color: var(--ci-text-muted); }
/* Un cliente de baja se queda en la lista cuando se pide verlo, pero atenuado. */
.pf-cli-baja > td { opacity: .75; }

/* ── Siete columnas cuando caben; cinco cuando no ─────────────────────────────
   El mockup aprobado dibujaba la tabla SIN la barra lateral y por eso nunca
   mostró que con ella desbordaba: 33px a 1280, 245 a 900, 301 a 840 (medido en
   UH14.1, el 2026-10-08).

   EL UMBRAL SE CALCULA, NO SE ELIGE (design system §5.quinquies). Se midió el
   ancho MÍNIMO de la tabla con datos largos y realistas —un hospital con nombre
   de 80 caracteres y un correo de 40 que no se parte—:
       7 columnas  →  978px
   Por debajo, «Tipo» y «Teléfono» dejan de ser columnas y bajan como una
   sublínea de «Cliente» y de «Contacto»: no se pierde ningún dato, solo cambia
   dónde está. Ahí el correo sí puede partirse, que es lo que baja el mínimo.

   Es una consulta de CONTENEDOR y no de pantalla porque el ancho útil depende de
   si la barra lateral está expandida (248px) o colapsada (76px, bajo 1100px), y
   una consulta de pantalla no lo sabe. */
#clientesView .ci-table-wrap { container: pf-cli / inline-size; }
.pf-cli-solo-compacta { display: none; }
@container pf-cli (width < 978px) {
  .pf-cli-col-ancha { display: none; }
  .pf-cli-solo-compacta { display: block; }
  /* Ninguna celda puede forzar el desborde con una cadena sin espacios (un correo
     largo, una dirección pegada como nombre). RFC y teléfono no se parten: llevan
     `nowrap`, que manda sobre esto. */
  #clientesView .ci-table td { overflow-wrap: anywhere; }
}

/* ── El formulario ────────────────────────────────────────────────────────────
   Dos columnas; los campos largos ocupan las dos. En ancho de teléfono baja a una. */
.pf-cli-modal { max-width: 640px; }

/* EL FORMULARIO NO CAMBIA DE TAMAÑO. Los avisos (RFC repetido, RFC mal escrito)
   aparecen y desaparecen AL SALIR de un campo, y eso pasa justo cuando se pulsa
   «Guardar»: el aviso se retiraba entre que el botón se hundía y se soltaba, el
   formulario se encogía, el pie se movía y EL CLIC SE PERDÍA. Con un alto fijo el
   pie no se mueve nunca; lo que cambia de largo se desplaza dentro del cuerpo.
   Por debajo de 768px el modal ya es de pantalla completa (style.css), o sea
   de tamaño fijo, y no hace falta. El alto sale de medir el formulario sin avisos
   (≈ 615px) y se recorta con la pantalla para no desbordarla. */
@media (min-width: 769px) {
  .pf-cli-modal .ci-modal-body {
    height: 700px;   /* UH14.10: el selector de sector sumó una fila; sin esto los contactos quedaban fuera de vista */
    max-height: calc(100vh - 11rem);
  }
}
.pf-cli-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--pf-s-4);
}
.pf-cli-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .pf-cli-grid { grid-template-columns: minmax(0, 1fr); }
}

/* El error de un campo: texto en el rojo del sistema (5.89 sobre blanco) y el
   borde del campo en el mismo rojo. Nunca solo color: lleva su texto. */
.pf-cli-err {
  display: block;
  margin-top: var(--pf-s-1);
  font-size: var(--pf-fs-xs);
  font-weight: 600;
  color: var(--pf-destructive);
}
.ci-input.pf-cli-malo { border-color: var(--pf-destructive); }

.pf-cli-notas { min-height: 72px; resize: vertical; font: inherit; }


/* ═══════════════════════════════════════════════════════════════════════════
   UH14.2b · LA TARJETA DE PRODUCTO EN MODO COTIZAR

   La tarjeta de Buscar Precios es la misma; en modo cotizar solo cambian el
   botón de cada proveedor y los avisos de «ya está en la cotización». Todo cuelga
   de clases que SOLO existen en ese modo, así que en modo carrito no se nota.
   Sale del mockup aprobado el 2026-10-09 (v2-busqueda-*.html).
   ═══════════════════════════════════════════════════════════════════════════ */

/* El botón lleva texto («Agregar», «Cambiar a este»), no solo un icono. */
.pft-btn--cot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 0 var(--pf-s-3);
  white-space: nowrap;
  font-weight: 600;
}
.pft-btn--cot svg { flex: none; }
/* La columna del botón lleva texto: el más largo es «Cambiar a este». En una
   tarjeta angosta pasa a «Cambiar» (el resto va en el `title` y el `aria-label`),
   y la tabla de costos le da el ancho (UH18.7). */
.pft-card--costo:has(.pft-btn--cot) .pft-tab th:nth-child(7) { width: 150px; }
@container pft-costo (width < 980px) {
  .pft-card--costo:has(.pft-btn--cot) .pft-tab th:nth-child(7) { width: 92px; }
  .pft-btn--cot { padding: 0 var(--pf-s-2); }
  .pft-btn--cot .pft-largo { display: none; }
}

/* El proveedor que ya está en la cotización: chip, y la fila con tinte y filete. */
.pf-cot-enlaq {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--pf-s-05) var(--pf-s-2);
  border-radius: var(--pf-r-pill);
  background: rgba(0, 131, 111, .13);
  color: var(--pf-teal-700);
  font-size: var(--pf-fs-micro);
  font-weight: 700;
  white-space: nowrap;
}
tr.pf-cot-elegido td { box-shadow: inset 0 0 0 9999px rgba(0, 131, 111, .06); }
tr.pf-cot-elegido td:first-child {
  box-shadow: inset 3px 0 0 var(--pf-teal-600), inset 0 0 0 9999px rgba(0, 131, 111, .06);
}

/* El aviso de arriba de la tarjeta. Texto en teal-800 sobre teal-50. */
.pf-cot-aviso-ya {
  margin: 0 0 var(--pf-s-3);
  padding: var(--pf-s-3) var(--pf-s-4);
  border: 1px solid var(--pf-teal-200);
  border-radius: var(--pf-r-md);
  background: var(--pf-teal-50);
  color: var(--pf-teal-800);
  font-size: var(--pf-fs-sm);
}
.pf-cot-aviso-ya b { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════════
   UH14.2c · COTIZACIONES: LISTA, FRANJA, PESTAÑAS Y RENGLONES

   Sale del mockup aprobado el 2026-10-09 (v2-*.html), con las lecciones de la
   revisión de ancho: la tabla de renglones es un CONTENEDOR (`pf-cot`) y compacta
   por debajo de 920px de ancho útil; el margen baja a la celda de Mercado. Todo
   con tokens `--pf-*`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera de la vista ── */
.pf-cot-volver { display: inline-flex; align-items: center; gap: var(--pf-s-1); font-size: var(--pf-fs-sm); color: var(--pf-sup-600); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--pf-font-ui); }

.pf-cot-volver:hover { color: var(--pf-teal-600); }

.pf-cot-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-3); justify-content: space-between; }

.pf-cot-cab__tit { display: flex; align-items: center; gap: var(--pf-s-3); min-width: 0; }

.pf-cot-cab__tit h2 { margin: 0; font-family: var(--pf-font-display); font-size: var(--pf-fs-lg); color: var(--pf-sup-700); }

.pf-cot-cab__acc { display: flex; flex-wrap: wrap; gap: var(--pf-s-2); align-items: center; }

.pf-cot-sin-guardar { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pf-fs-sm); font-weight: 600; color: var(--pf-amber-700); }

.pf-cot-sin-guardar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pf-amber-400); }

.pf-cot-meta { font-size: var(--pf-fs-sm); color: var(--pf-sup-600); }

/* ── Bloque de cliente ── */
.pf-cot-cliente { display: flex; flex-wrap: wrap; gap: var(--pf-s-4); align-items: center; justify-content: space-between;
  padding: var(--pf-s-4); border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); background: var(--pf-sup-50); }

.pf-cot-cliente__nom { font-weight: 700; color: var(--pf-sup-700); font-size: var(--pf-fs-md); }

.pf-cot-cliente__sub { font-size: var(--pf-fs-sm); color: var(--pf-sup-600); display: flex; flex-wrap: wrap; gap: var(--pf-s-1) var(--pf-s-4); margin-top: var(--pf-s-1); }

.pf-cot-cliente__sub b { font-weight: 600; color: var(--pf-sup-700); font-variant-numeric: tabular-nums; }

.pf-cot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pf-s-4); }

.pf-cot-lbl { display: block; font-size: var(--pf-fs-sm); font-weight: 600; color: var(--pf-sup-700); margin-bottom: var(--pf-s-1); }
/* ── La tabla de renglones ── */
.pf-cot-tabla td { vertical-align: top; }

.pf-cot-prod__nom { font-weight: 600; color: var(--pf-sup-700); }

.pf-cot-prod__id { display: block; font-size: var(--pf-fs-sm); color: var(--pf-sup-600); margin-top: 2px; }

.pf-cot-cant { width: 84px; text-align: center; font-variant-numeric: tabular-nums; }

.pf-cot-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.pf-cot-costo b { display: block; font-size: var(--pf-fs-md); color: var(--pf-sup-700); }

.pf-cot-sub { display: block; font-size: var(--pf-fs-sm); color: var(--pf-sup-600); margin-top: 2px; }

.pf-cot-chips { display: flex; flex-wrap: wrap; gap: var(--pf-s-1); margin-top: var(--pf-s-1); }

.pf-cot-chip { display: inline-flex; align-items: center; gap: 5px; padding: var(--pf-s-05) var(--pf-s-2); border-radius: var(--pf-r-pill);
  font-size: var(--pf-fs-micro); font-weight: 600; background: rgba(74,78,99,.12); color: var(--pf-sup-700); white-space: nowrap; font-variant-numeric: tabular-nums; }

.pf-cot-chip--ok::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pf-teal-600); }

.pf-cot-chip--aviso { background: var(--pf-amber-50); color: var(--pf-amber-700); }

.pf-cot-chip--malo { background: var(--pf-red-100); color: var(--pf-red-700); }

.pf-cot-chip--sano { background: rgba(0,131,111,.13); color: var(--pf-teal-700); }

.pf-cot-merc__rango { font-weight: 700; color: var(--pf-sup-700); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pf-cot-merc__nada { color: var(--pf-sup-600); font-size: var(--pf-fs-sm); }

.pf-cot-ver { background: none; border: 0; padding: 0; margin-top: var(--pf-s-1); font: 600 var(--pf-fs-sm)/1.4 var(--pf-font-ui); color: var(--pf-teal-700); cursor: pointer; }

.pf-cot-ver:hover { text-decoration: underline; }

.pf-cot-acc { white-space: nowrap; text-align: right; }

.pf-cot-quitar { background: none; border: 0; width: 36px; height: 36px; border-radius: var(--pf-r-sm); color: var(--pf-sup-500); cursor: pointer; display: inline-grid; place-items: center; }

.pf-cot-quitar:hover { background: var(--pf-red-50); color: var(--pf-red-700); }

/* ── El detalle de referencias (se despliega bajo el renglón) ── */
.pf-cot-det > td { background: var(--pf-sup-50); padding: var(--pf-s-4) var(--pf-s-4) var(--pf-s-5); }

.pf-cot-det__tit { font-size: var(--pf-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pf-sup-600); margin: 0 0 var(--pf-s-2); }

.pf-cot-det__tabla { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); }

.pf-cot-det__tabla th, .pf-cot-det__tabla td { padding: var(--pf-s-2) var(--pf-s-3); text-align: left; font-size: var(--pf-fs-sm); border-bottom: 1px solid var(--pf-sup-200); }

.pf-cot-det__tabla th { color: var(--pf-sup-600); font-weight: 600; background: #fff; }

.pf-cot-det__tabla tr:last-child td { border-bottom: 0; }

.pf-cot-det__tabla .d { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }



.pf-cot-det__nota { margin: var(--pf-s-1) 0 0; font-size: var(--pf-fs-xs); color: var(--pf-sup-600); }

/* ── Pie de la tabla ── */
.pf-cot-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--pf-s-3); margin-top: var(--pf-s-4); }



/* ── Producto fuera de catálogo (UH14.13) ── */
.pf-cot-libre-barra { display: flex; justify-content: flex-end; margin-bottom: var(--pf-s-2); }
.pf-cot-libre-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pf-s-3); margin: var(--pf-s-3) 0; }
.pf-cot-lbl small { font-weight: 400; color: var(--pf-sup-600); }
@media (max-width: 520px) { .pf-cot-libre-campos { grid-template-columns: 1fr; } }

/* ── Vacío ── */
.pf-cot-vacio { text-align: center; padding: var(--pf-s-8) var(--pf-s-4); color: var(--pf-sup-600); border: 1px dashed var(--pf-sup-400); border-radius: var(--pf-r-md); }

.pf-cot-vacio b { display: block; color: var(--pf-sup-700); font-size: var(--pf-fs-md); margin-bottom: var(--pf-s-1); }

/* ── Lista ── */
.pf-cot-lista-tool { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-3); margin-bottom: var(--pf-s-4); }

.pf-cot-lista-tool .ci-input { flex: 1 1 280px; min-width: 0; }

/* ── Cabeceras del detalle: sin mayúsculas, que no compitan con la tabla ── */
.pf-cot-det__tabla th { text-transform: none; letter-spacing: 0; font-size: var(--pf-fs-sm); }

/* ── Seis columnas cuando caben; cinco cuando no ──────────────────────────────
   Consulta de CONTENEDOR (el ancho útil depende de si la barra lateral está
   expandida o colapsada). Por debajo del umbral, «Margen» baja a la celda de
   «Mercado»: no se pierde ningún dato, solo cambia de lugar. El umbral se
   mide al construir. */
.pf-cot-wrap { container: pf-cot / inline-size; }



/* La mini-tabla de referencias vive DENTRO de la tabla de renglones: si sus
   columnas no encogen, ella sola fija el ancho mínimo de todo. Se le permite
   partir el texto y, en ancho estrecho, soltar «Actualizado». */
.pf-cot-det__tabla { table-layout: auto; }

.pf-cot-det__tabla th { white-space: normal; }


@container pf-cot (width < 920px) {
  .pf-cot-det__tabla .c-act { display: none; }
  .pf-cot-det__tabla th, .pf-cot-det__tabla td { padding: var(--pf-s-2); }
}



/* Franja estrecha (≈ 780-899px de pantalla): lo que fijaba el ancho mínimo era
   la casilla de cantidad (84px) y los chips que no se partían. */
@container pf-cot (width < 920px) {
  .pf-cot-cant { width: 64px; padding-left: var(--pf-s-2); padding-right: var(--pf-s-2); }
  .pf-cot-chip { white-space: normal; }
  .pf-cot-tabla th, .pf-cot-tabla td { padding-left: var(--pf-s-2); padding-right: var(--pf-s-2); }
  .pf-cot-acc { width: 44px; }
}


@container pf-cot (width < 920px) {
  .pf-cot-tabla thead th { white-space: normal; }
}

.pf-cot-franja__izq { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2) var(--pf-s-3); min-width: 0; }

.pf-cot-franja__lbl { font-size: var(--pf-fs-sm); color: var(--pf-sup-600); }

.pf-cot-franja__cli { font-family: var(--pf-font-display); font-weight: 700; color: var(--pf-sup-700); font-size: var(--pf-fs-md); }

.pf-cot-franja__cuenta { font-size: var(--pf-fs-sm); color: var(--pf-sup-600); font-variant-numeric: tabular-nums; }

.pf-cot-franja__acc { display: flex; flex-wrap: wrap; gap: var(--pf-s-2); }

/* ── Pestañas ── */
.pf-cot-tabs { display: flex; gap: var(--pf-s-1); border-bottom: 1px solid var(--pf-border); }

.pf-cot-tab { display: inline-flex; align-items: center; gap: var(--pf-s-2); padding: var(--pf-s-3) var(--pf-s-4);
  margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer;
  font: 600 var(--pf-fs-base)/1.2 var(--pf-font-ui); color: var(--pf-sup-600); }

.pf-cot-tab:hover { color: var(--pf-sup-700); }

.pf-cot-tab[aria-selected="true"] { color: var(--pf-teal-700); border-bottom-color: var(--pf-teal-600); }

.pf-cot-tab__n { min-width: 22px; padding: 1px 7px; border-radius: var(--pf-r-pill); text-align: center;
  background: rgba(74,78,99,.12); color: var(--pf-sup-700); font-size: var(--pf-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }

.pf-cot-tab[aria-selected="true"] .pf-cot-tab__n { background: var(--pf-teal-600); color: #fff; }

/* ── Pestaña Cotización: el proveedor del renglón ── */
.pf-cot-prov { display: block; font-weight: 700; color: var(--pf-sup-700); }

.pf-cot-cambiar { display: inline-block; margin-top: var(--pf-s-1); background: none; border: 0; padding: 0;
  font: 600 var(--pf-fs-sm)/1.4 var(--pf-font-ui); color: var(--pf-teal-700); cursor: pointer; }

.pf-cot-cambiar:hover { text-decoration: underline; }

.pf-cot-celda-prov { position: relative; }

.pf-cot-chip--mas { background: var(--pf-amber-50); color: var(--pf-amber-700); }

.pf-cot-chip--min { background: rgba(0,131,111,.13); color: var(--pf-teal-700); }

/* ── El selector de proveedor (se abre desde «Cambiar») ── */
.pf-cot-pick { position: absolute; z-index: 7; top: calc(100% - var(--pf-s-2)); left: 0; width: 440px; max-width: 92vw;
  background: #fff; border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); box-shadow: var(--pf-sh-md); overflow: hidden; }

.pf-cot-pick__tit { padding: var(--pf-s-3) var(--pf-s-4); font-size: var(--pf-fs-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pf-sup-600); background: var(--pf-sup-50); border-bottom: 1px solid var(--pf-sup-200); }

.pf-cot-pick__fila { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--pf-s-3); align-items: center;
  padding: var(--pf-s-3) var(--pf-s-4); border-bottom: 1px solid var(--pf-sup-200); }

.pf-cot-pick__fila:last-of-type { border-bottom: 0; }

.pf-cot-pick__fila--act { background: rgba(0,131,111,.07); }

.pf-cot-pick__nom { font-weight: 700; color: var(--pf-sup-700); font-size: var(--pf-fs-base); }

.pf-cot-pick__det { display: flex; flex-wrap: wrap; gap: var(--pf-s-1) var(--pf-s-3); margin-top: 2px; font-size: var(--pf-fs-sm); color: var(--pf-sup-600); font-variant-numeric: tabular-nums; }

.pf-cot-pick__der { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pf-cot-pick__der b { display: block; color: var(--pf-sup-700); }

.pf-cot-pick__der small { font-size: var(--pf-fs-xs); color: var(--pf-sup-600); }

.pf-cot-pick__pie { padding: var(--pf-s-2) var(--pf-s-4); font-size: var(--pf-fs-xs); color: var(--pf-sup-600); background: var(--pf-sup-50); }

.pf-cot-pick__falta { color: var(--pf-amber-700); font-weight: 600; }

/* ── Aire de la franja y el cuerpo ── */
.pf-cot-cuerpo { display: flex; flex-direction: column; gap: var(--pf-s-4); }



@container pf-cot (width < 920px) {
  .pf-cot-pick { width: 320px; }
}


@media (max-width: 640px) {
  .pf-cot-tab { padding: var(--pf-s-3) var(--pf-s-3); }
}


@container pf-cot (width < 920px) {
  .pf-cot-pick { left: auto; right: 0; width: 300px; }
}

/* Texto para lector de pantalla que no se ve (la columna de «Quitar» no lleva rótulo visible). */
.pf-cot-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Los modales de Cotizaciones no cambian de tamaño con sus avisos. */
.pf-cot-modal { max-width: 520px; }

/* El selector de cliente: lista estática dentro del modal, con foco visible al navegar con teclado. */
.pf-cot-res { background: #fff; border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); overflow: hidden; }
.pf-cot-res--est { position: static; box-shadow: none; margin-top: var(--pf-s-2); max-height: 260px; overflow-y: auto; }
.pf-cot-res__fila { display: block; width: 100%; padding: var(--pf-s-3) var(--pf-s-4); border: 0; border-bottom: 1px solid var(--pf-sup-200);
  background: none; text-align: left; cursor: pointer; font-family: var(--pf-font-ui); }
.pf-cot-res__fila:last-child { border-bottom: 0; }
.pf-cot-res__fila:hover, .pf-cot-res__fila:focus-visible { background: var(--pf-sup-50); outline: none; }
.pf-cot-res__fila[aria-selected="true"] { background: rgba(0,131,111,.1); box-shadow: inset 3px 0 0 var(--pf-teal-600); }
.pf-cot-res__nom { display: block; font-weight: 600; color: var(--pf-sup-700); font-size: var(--pf-fs-base); }
.pf-cot-res__id { display: block; font-size: var(--pf-fs-sm); color: var(--pf-sup-600); margin-top: 2px; }
.pf-cot-res__vacio { padding: var(--pf-s-4); font-size: var(--pf-fs-sm); color: var(--pf-sup-600); }

/* Un cliente de baja en la lista: etiqueta ámbar junto al nombre. */
.pf-cot-sub-fila { display: block; font-size: var(--pf-fs-sm); color: var(--pf-sup-600); margin-top: 2px; }
.pf-cot-lista-acc { white-space: nowrap; }

/* El selector de proveedor cuelga de <body> y se ancla al botón con `fixed`: la tabla
   de renglones recorta (overflow) lo que sobresale, y un selector recortado no se puede usar. */
.pf-cot-pick--flota { position: fixed; top: 0; left: 0; z-index: 60; max-height: calc(100vh - 16px); overflow-y: auto; }

/* La franja: SIEMPRE a la vista sobre las dos pestañas. Se pega bajo la cabecera al desplazar. */
.pf-cot-franja { position: sticky; top: calc(var(--pf-topbar-h) + var(--pf-s-2)); z-index: 6;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pf-s-3);
  padding: var(--pf-s-3) var(--pf-s-4); background: #fff; border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md); box-shadow: var(--pf-sh-sm); }
.pf-cot-franja__acc { margin-left: auto; }


/* ═══════════════════════════════════════════════════════════════════════════
   UH14.3 · MARGEN, PRECIO DE VENTA E IVA EN LA COTIZACIÓN
   Sale del mockup aprobado el 2026-10-09 (v3-cotizacion*.html). El precio de
   referencia (mercado) solo se VE: no interviene en ningún cálculo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cliente (mitad) y margen global (mitad), lado a lado. */
.pf-cot-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pf-s-4); align-items: stretch; }
.pf-cot-dos > .ci-card { margin: 0; }
.pf-cot-margen-card { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--pf-s-3); }
.pf-cot-mg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pf-s-2); }
.pf-cot-mg__tit { font-family: var(--pf-font-display); font-weight: 700; color: var(--pf-sup-700); }
.pf-cot-mg__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-3); }
.pf-cot-mg__txt { margin: 0; font-size: var(--pf-fs-sm); color: var(--pf-sup-600); line-height: 1.55; }
.pf-cot-mg__txt b { color: var(--pf-sup-700); }
.pf-cot-mg__txt .pf-cot-mg__dif { color: var(--pf-amber-700); }
@media (max-width: 1100px) { .pf-cot-dos { grid-template-columns: minmax(0, 1fr); } }

/* Campo de % (el global y el de cada fila). */
.pf-cot-m { display: inline-flex; align-items: center; gap: var(--pf-s-1); font-weight: 600; color: var(--pf-sup-700); }
.pf-cot-m__in { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.pf-cot-m--g .pf-cot-m__in { width: 84px; }
.ci-input.pf-cot-m__in--mal { border-color: var(--pf-destructive); }

/* La tabla de ocho columnas. */
.pf-cot-tabla--v3 th.d, .pf-cot-tabla--v3 .pf-cot-celda-i { text-align: right; }
.pf-cot-tabla--v3 .pf-cot-celda-ref { color: var(--pf-sup-600); font-size: var(--pf-fs-sm); }
.pf-cot-celda-m .pf-cot-sub, .pf-cot-celda-p .pf-cot-sub, .pf-cot-celda-i .pf-cot-sub { display: block; }
.pf-cot-celda-p .pf-cot-num, .pf-cot-celda-i .pf-cot-num, .pf-cot-celda-prov .pf-cot-num { display: block; }
.pf-cot-num--nd { color: var(--pf-sup-600); }

/* IVA de venta. */
.pf-cot-iva { display: inline-flex; padding: var(--pf-s-05) var(--pf-s-2); border-radius: var(--pf-r-pill);
  background: rgba(74, 78, 99, .10); color: var(--pf-sup-700); font-size: var(--pf-fs-micro); font-weight: 700; white-space: nowrap; }
.pf-cot-iva small { font-weight: 500; }
.pf-cot-iva-pend { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pf-s-1); }
.pf-cot-iva-op { display: inline-flex; border: 1.5px solid var(--pf-border); border-radius: 8px; overflow: hidden; }
.pf-cot-iva-b { padding: var(--pf-s-1) var(--pf-s-3); background: #fff; border: 0; cursor: pointer;
  font: 700 var(--pf-fs-sm)/1.3 var(--pf-font-ui); color: var(--pf-sup-700); }
.pf-cot-iva-b + .pf-cot-iva-b { border-left: 1.5px solid var(--pf-border); }
.pf-cot-iva-b:hover { background: var(--pf-sup-50); }

/* Lo que impide generar la cotización. */
.pf-cot-bloqueo { margin-top: var(--pf-s-4); padding: var(--pf-s-3) var(--pf-s-4); border-radius: var(--pf-r-md);
  background: var(--pf-amber-50); color: var(--pf-amber-700); border: 1px solid rgba(255, 193, 43, .5); font-size: var(--pf-fs-sm); line-height: 1.5; }

/* Subtotal, IVA y total. */
.pf-cot-tot { margin: 0; min-width: 240px; margin-left: auto; }
.pf-cot-tot > div { display: flex; justify-content: space-between; gap: var(--pf-s-6); padding: var(--pf-s-1) 0; font-size: var(--pf-fs-sm); color: var(--pf-sup-700); }
.pf-cot-tot dt { color: var(--pf-sup-600); }
.pf-cot-tot dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-cot-tot__g { margin-top: var(--pf-s-1); padding-top: var(--pf-s-2) !important; border-top: 1px solid var(--pf-border); }
.pf-cot-tot__g dt { font-weight: 700; color: var(--pf-sup-700); }
.pf-cot-tot__g dd { font-family: var(--pf-font-ui); font-size: var(--pf-fs-lg); font-weight: 700; }
.pf-cot-tot dt small { font-weight: 500; }

/* Aviso al aplicar el margen global: la lista de filas que cambiarían. */
.pf-cot-av { max-width: 560px; }
.pf-cot-av__lista { border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); overflow: hidden; margin: var(--pf-s-3) 0; }
.pf-cot-av__fila { display: flex; justify-content: space-between; gap: var(--pf-s-4); padding: var(--pf-s-2) var(--pf-s-3); font-size: var(--pf-fs-sm); }
.pf-cot-av__fila + .pf-cot-av__fila { border-top: 1px solid var(--pf-sup-200); }
.pf-cot-av__fila b { font-variant-numeric: tabular-nums; }
.pf-cot-av__nota { font-size: var(--pf-fs-xs); color: var(--pf-sup-600); margin: 0; }
.pf-cot-av .ci-modal-footer { flex-wrap: wrap; }

/* Tabla angosta: el «Precio de referencia» deja su columna y pasa debajo del producto
   (no se pierde ningún dato, solo cambia de lugar). Consulta de CONTENEDOR: el ancho
   útil depende de la barra lateral. El umbral se mide al construir. */
.pf-cot-ref-compacta { display: none; margin-top: var(--pf-s-2); font-size: var(--pf-fs-sm); color: var(--pf-sup-600); }
.pf-cot-ref-compacta__tit { display: block; font-size: var(--pf-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
@container pf-cot (width < 1020px) {
  .pf-cot-tabla--v3 .pf-cot-celda-ref { display: none; }
  .pf-cot-ref-compacta { display: block; }
}

/* Más angosto aún (≈ 780px con la barra lateral colapsada): casillas y celdas más
   compactas para que «Importe» no quede fuera de la tarjeta. */
@container pf-cot (width < 760px) {
  .pf-cot-tabla--v3 th, .pf-cot-tabla--v3 td { padding-left: var(--pf-s-1); padding-right: var(--pf-s-1); }
  .pf-cot-tabla--v3 .pf-cot-cant { width: 48px; }
  .pf-cot-tabla--v3 .pf-cot-m__in { width: 48px; padding-left: var(--pf-s-1); padding-right: var(--pf-s-1); }
  .pf-cot-tabla--v3 .pf-cot-celda-m .pf-cot-sub { display: none; }
  .pf-cot-tabla--v3 .pf-cot-celda-p .pf-cot-sub { display: none; }
  .pf-cot-tabla--v3 thead th { font-size: var(--pf-fs-xs); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UH14.3b · PRECIO EDITABLE (la cuenta funciona en los dos sentidos), CLIC EN
   LA REFERENCIA Y MARGEN EN MONEDA
   ═══════════════════════════════════════════════════════════════════════════ */

/* El campo del precio de venta: «$» + número, igual de alto que el del margen. */
.pf-cot-pv { display: inline-flex; align-items: center; gap: var(--pf-s-1); font-weight: 600; color: var(--pf-sup-700); }
.pf-cot-pv__in { width: 96px; text-align: left; font-variant-numeric: tabular-nums; }
.pf-cot-pv__in:disabled { background: var(--pf-sup-50); color: var(--pf-sup-600); cursor: not-allowed; }
.pf-cot-sub--mal { color: var(--pf-destructive); font-weight: 600; }

/* Un precio de referencia que se puede usar: se ve como enlace, no como botón. */
.pf-cot-ref-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--pf-teal-700);
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; font-variant-numeric: tabular-nums; }
.pf-cot-ref-btn:hover { text-decoration-style: solid; color: var(--pf-teal-800); }

/* El margen en moneda, en la tarjeta del margen. */
.pf-cot-mgfig { display: flex; flex-wrap: wrap; gap: var(--pf-s-2) var(--pf-s-6); margin: 0; padding-top: var(--pf-s-3);
  border-top: 1px solid var(--pf-border); width: 100%; }
.pf-cot-mgfig > div { min-width: 0; }
.pf-cot-mgfig dt { font-size: var(--pf-fs-xs); color: var(--pf-sup-600); }
.pf-cot-mgfig dd { margin: 0; font-family: var(--pf-font-ui); font-weight: 700; font-size: var(--pf-fs-md); color: var(--pf-sup-700); font-variant-numeric: tabular-nums; }
.pf-cot-mgfig__nota { margin: 0; font-size: var(--pf-fs-xs); color: var(--pf-amber-700); }

@container pf-cot (width < 760px) {
  .pf-cot-tabla--v3 .pf-cot-pv__in { width: 78px; padding-left: var(--pf-s-1); padding-right: var(--pf-s-1); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   UH14.3c · AJUSTES DE DISEÑO DEL EDITOR
   Una sola barra con las pestañas y, a la derecha, el cliente, el estado y las
   acciones (sin fondo ni borde); sin «← Cotizaciones» (se vuelve desde el menú
   lateral); sin tarjeta de cliente; el margen ocupa todo el ancho con sus cifras.
   ═══════════════════════════════════════════════════════════════════════════ */
.pf-cot-barra { position: sticky; top: calc(var(--pf-topbar-h) + var(--pf-s-2)); z-index: 6;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pf-s-2) var(--pf-s-4);
  padding-top: var(--pf-s-2); background: var(--pf-sup-100); border-bottom: 1px solid var(--pf-border); }
.pf-cot-barra .pf-cot-tabs { border-bottom: 0; align-self: flex-end; }
.pf-cot-barra__der { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--pf-s-2) var(--pf-s-3);
  margin-left: auto; min-width: 0; padding-bottom: var(--pf-s-2); }
.pf-cot-barra__acc { display: inline-flex; flex-wrap: wrap; gap: var(--pf-s-2); }
.pf-cot-franja__cli { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }

/* La tarjeta del margen: una fila con el campo, el botón y las cifras. */
.pf-cot-margen-card { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--pf-s-3); }
.pf-cot-margen-card .pf-cot-mg__fila { flex-wrap: wrap; align-items: center; gap: var(--pf-s-2) var(--pf-s-4); }
.pf-cot-margen-card .pf-cot-mgfig { margin: 0 0 0 auto; padding: 0; border: 0; width: auto; align-items: flex-end; }
.pf-cot-margen-card .pf-cot-mgfig > div { text-align: center; }
.pf-cot-mgfig__nota { align-self: center; padding: var(--pf-s-05) var(--pf-s-2); border-radius: var(--pf-r-pill);
  background: var(--pf-amber-50); color: var(--pf-amber-700); font-size: var(--pf-fs-micro); font-weight: 700; }

/* Un aviso corto («bajo tu costo») nunca ensancha la columna. */
.pf-cot-celda-p .pf-cot-sub { overflow-wrap: anywhere; }

/* UH14.3g · «Precio fijado» como chip, junto al del IVA. */
.pf-cot-chip--fijado { background: rgba(0, 131, 111, .13); color: var(--pf-teal-700); }


/* ═══════════════════════════════════════════════════════════════════════════
   UH14.4 · GENERAR LA COTIZACIÓN
   El folio, la franja de «congelada», el cuadro de Generar y la vista de solo
   lectura. Sale del mockup aprobado el 2026-10-09 (v5-*.html). Lo demás (barra,
   margen, tabla, pie) es lo de siempre.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El folio: el dato que identifica la cotización. */
.pf-cot-folio { display: inline-flex; align-items: baseline; gap: var(--pf-s-2); font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: var(--pf-fs-md); color: var(--pf-foreground); white-space: nowrap; }
.pf-cot-folio--tabla { font-size: var(--pf-fs-base); }
.pf-cot-folio--nada { font-weight: 500; color: var(--pf-sup-600); font-family: inherit; }
.pf-cot-folio-sub { display: block; font-size: var(--pf-fs-xs); color: var(--ci-text-muted); font-weight: 500; margin-top: var(--pf-s-05); }
.pf-cot-folio-sub .ci-badge { margin-top: var(--pf-s-1); }
.pf-cot-folio-sub { white-space: normal; }

/* ── La lista: seis columnas cuando caben, cuatro cuando no ────────────────────
   Consulta de CONTENEDOR (el ancho útil depende de la barra lateral). Medido con
   datos reales: las seis columnas piden ≈ 716px; por debajo de 760px «Estado» y
   «Fecha y autor» dejan de ser columnas y bajan como sublínea del cliente: no se
   pierde ningún dato, solo cambia de sitio. A 780px de pantalla la tabla pasaba de
   458px de ancho útil a 687px de contenido (144px de desborde, UH14.4). */
#cotLista .ci-table-wrap { container: pf-cotl / inline-size; }
.pf-cot-solo-compacta { display: none; }
@container pf-cotl (width < 760px) {
  .pf-cot-col-ancha { display: none; }
  .pf-cot-solo-compacta { display: block; }
  #cotLista .ci-table td { overflow-wrap: anywhere; }
}

/* Barra de la generada: sin pestañas, con el folio al frente. */
.pf-cot-barra--gen { align-items: center; padding-bottom: var(--pf-s-2); }
.pf-cot-barra__izq { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2) var(--pf-s-4); min-width: 0; }

/* «Precios congelados»: dice qué significa estar generada. */
.pf-cot-congelada { display: flex; gap: var(--pf-s-3); align-items: flex-start; padding: var(--pf-s-3) var(--pf-s-4);
  border-radius: var(--pf-r-md); background: var(--pf-teal-50); color: var(--pf-teal-700); font-size: var(--pf-fs-base); }
.pf-cot-congelada svg { flex: 0 0 auto; margin-top: var(--pf-s-05); }

/* Un borrador que nace de otra cotización. */
.pf-cot-ver-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2) var(--pf-s-3); padding: var(--pf-s-3) var(--pf-s-4);
  border-radius: var(--pf-r-md); background: var(--pf-sup-100); border: 1px solid var(--pf-border); font-size: var(--pf-fs-base); }

/* El cuadro de Generar */
.pf-cot-gen { max-width: 640px; }
.pf-cot-gen__resumen { margin: var(--pf-s-3) 0; padding: var(--pf-s-2) var(--pf-s-4); border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); font-size: var(--pf-fs-base); }
.pf-cot-gen__resumen .fila { display: flex; justify-content: space-between; gap: var(--pf-s-6); padding: var(--pf-s-1) 0; }
.pf-cot-gen__resumen dt { color: var(--ci-text-muted); }
.pf-cot-gen__resumen dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-cot-gen__resumen .tot { border-top: 1px solid var(--pf-sup-200); margin-top: var(--pf-s-1); padding-top: var(--pf-s-2); }
.pf-cot-gen__resumen .tot dt { color: var(--pf-foreground); font-weight: 700; }
.pf-cot-gen__resumen .tot dd { font-family: 'Montserrat', sans-serif; font-size: var(--pf-fs-md); font-weight: 700; }
.pf-cot-gen__reglas { margin: var(--pf-s-3) 0 0; padding-left: var(--pf-s-5); font-size: var(--pf-fs-base); }
.pf-cot-gen__reglas li + li { margin-top: var(--pf-s-1); }
.pf-cot-gen__aviso { padding: var(--pf-s-3) var(--pf-s-4); border-radius: var(--pf-r-md); background: var(--pf-amber-50); color: var(--pf-amber-700);
  font-size: var(--pf-fs-base); margin: 0 0 var(--pf-s-3); }
.pf-cot-gen__lista { margin: var(--pf-s-2) 0 0; padding-left: var(--pf-s-5); }

.pf-cot-cambios-caja { border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); overflow: hidden; margin: var(--pf-s-3) 0; }
.pf-cot-cambios { width: 100%; border-collapse: collapse; font-size: var(--pf-fs-base); }
.pf-cot-cambios th { text-align: left; font-size: var(--pf-fs-xs); font-weight: 600; color: var(--ci-text-muted); padding: var(--pf-s-2) var(--pf-s-3); border-bottom: 1px solid var(--pf-border); }
.pf-cot-cambios td { padding: var(--pf-s-2) var(--pf-s-3); vertical-align: top; }
.pf-cot-cambios tr + tr td { border-top: 1px solid var(--pf-sup-200); }
.pf-cot-cambios .d { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-cot-cambios .antes { color: var(--ci-text-muted); text-decoration: line-through; }
.pf-cot-cambios .ahora { font-weight: 700; }
.pf-cot-cambios .que { color: var(--ci-text-muted); font-size: var(--pf-fs-xs); display: block; }

/* El primario deshabilitado (hay renglones por resolver). */
.ci-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* La tabla congelada: texto, nunca campos. */
.pf-cot-fz { font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-cot-fz--cant { text-align: center; }
#cotGenerada .pf-cot-celda-i .pf-cot-sub { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   UH14.5a · EL DOCUMENTO AL CLIENTE: configuración, firma, descripción, vigencia
   Todo con los tokens `--pf-*` y la escala de espaciado: ningún valor suelto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Configuración → Documento de cotización: dos columnas; los textos, a lo ancho.
   Una columna por debajo de 760px. Las etiquetas y los campos son los de siempre. */
.pf-cot-cfg { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--pf-s-5); }
.pf-cot-cfg > .ci-form-group { min-width: 0; }
.pf-cot-cfg__ancho { grid-column: 1 / -1; }
.pf-cot-cfg__area { min-height: 5.5rem; resize: vertical; line-height: 1.5; }
@media (max-width: 760px) { .pf-cot-cfg { grid-template-columns: 1fr; } }

/* ── Mi firma: la vista previa sobre blanco, que es donde irá en el documento. */
.pf-cot-firma__vista {
  display: grid; place-items: center; min-height: 120px; margin-bottom: var(--pf-s-3);
  padding: var(--pf-s-4); background: var(--pf-card);
  border: 1.5px dashed var(--pf-input); border-radius: var(--pf-r-md);
}
.pf-cot-firma__vista img { max-width: 100%; max-height: 120px; }
.pf-cot-firma__vacia { color: var(--ci-text-muted); font-size: var(--pf-fs-sm); }

/* ── La descripción para el cliente, bajo el nombre del producto en el borrador. */
.pf-cot-desc { display: block; }
.pf-cot-desc__txt { display: block; color: var(--pf-teal-700); overflow-wrap: anywhere; }

/* ── El cuadro «Generar»: vigencia y avisos del documento. */
.pf-cot-gen__vig { margin-top: var(--pf-s-4); }
.pf-cot-gen__vig-in { display: inline-flex; align-items: center; gap: var(--pf-s-2); }
.pf-cot-gen__vig-in .ci-input { width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.pf-cot-gen__nota {
  margin: var(--pf-s-3) 0 0; padding: var(--pf-s-3) var(--pf-s-4); border-radius: var(--pf-r-md);
  background: var(--pf-amber-50); color: var(--pf-amber-700); font-size: var(--pf-fs-sm);   /* 6.35 */
}

/* ═══════════════════════════════════════════════════════════════════════════
   UH14.5b · ENVIAR, SEGUIMIENTO Y APROBACIÓN
   Todo con los tokens `--pf-*` y la escala de espaciado.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Los estados que nacen aquí. Pares ya medidos del sistema:
   vista = el azul de «confirmada» (8.45) · aprobada = tinte teal (6.60) ·
   vencida = el gris de «generada» (10.43). Enviada y generada ya existían. */
.pf-estado--vista    { background: #e6ecf9; color: #1f3e87; }
.pf-estado--aprobada { background: var(--pf-teal-50); color: var(--pf-teal-700); }
.pf-estado--vencida  { background: #e9eaec; color: #303340; }
.pf-cot-barra__izq .pf-estado { flex: 0 0 auto; padding-inline: var(--pf-s-3); }

/* ── Seguimiento: la línea de tiempo. Lo hecho va en teal; lo que falta, en hueco. */
.pf-cot-seg__tit { margin: 0 0 var(--pf-s-3); font: 700 var(--pf-fs-md) var(--pf-font-display); color: var(--pf-foreground); }
.pf-cot-linea { list-style: none; margin: 0; padding: 0; }
.pf-cot-linea li { position: relative; padding: 0 0 var(--pf-s-4) var(--pf-s-8); color: var(--pf-muted-foreground); }
.pf-cot-linea li:last-child { padding-bottom: 0; }
.pf-cot-linea li::before { content: ""; position: absolute; left: 7px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--pf-sup-400); background: var(--pf-card); }
.pf-cot-linea li::after { content: ""; position: absolute; left: 12px; top: 18px; bottom: -2px; width: 2px; background: var(--pf-sup-300); }
.pf-cot-linea li:last-child::after { display: none; }
.pf-cot-linea li.ok::before { background: var(--pf-teal-500); border-color: var(--pf-teal-500); }
.pf-cot-linea li.ok::after { background: var(--pf-teal-300); }
.pf-cot-linea li.ahora::before { box-shadow: 0 0 0 4px var(--pf-teal-100); }
.pf-cot-linea b { display: block; color: var(--pf-foreground); font-size: var(--pf-fs-base); }
.pf-cot-linea span { font-size: var(--pf-fs-sm); overflow-wrap: anywhere; }

.pf-cot-enlace { margin-top: var(--pf-s-5); padding-top: var(--pf-s-4); border-top: 1px solid var(--pf-border); }
.pf-cot-enlace__fila { display: flex; flex-wrap: wrap; gap: var(--pf-s-2); align-items: center; }
.pf-cot-enlace__url { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: var(--pf-fs-sm); }
.pf-cot-aprobacion { cursor: default; }

/* ── La ventana «Enviar al cliente» */
.pf-cot-modal--ancho { max-width: 860px; }
.pf-cot-canales { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pf-s-3); margin-bottom: var(--pf-s-5); }
.pf-cot-canal { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: 1.5px solid var(--pf-border); background: var(--pf-card); border-radius: var(--pf-r-md);
  padding: var(--pf-s-3) var(--pf-s-4); font: inherit; color: var(--pf-foreground); cursor: pointer; }
.pf-cot-canal small { font-size: var(--pf-fs-xs); color: var(--pf-muted-foreground); }
.pf-cot-canal.activo { border-color: var(--pf-teal-500); background: var(--pf-teal-50); box-shadow: var(--pf-sh-xs); }
.pf-cot-canal:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 2px; }
.pf-cot-dos { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--pf-s-5); }
.pf-cot-dos > div { min-width: 0; }
.pf-cot-sep { margin-top: var(--pf-s-4); }
.pf-cot-wa { font-size: var(--pf-fs-base); line-height: 1.45; resize: vertical; }
.pf-cot-nota-correo { margin: 0; color: var(--pf-muted-foreground); font-size: var(--pf-fs-sm); }
.pf-cot-fuera { position: fixed; left: -9999px; top: 0; }
@media (max-width: 760px) {
  .pf-cot-canales { grid-template-columns: 1fr; }
  .pf-cot-dos { grid-template-columns: 1fr; }
}

/* ── Mi firma: la firma de los correos */
.pf-cot-firma__sub { margin: var(--pf-s-6) 0 var(--pf-s-2); font: 700 var(--pf-fs-base) var(--pf-font-display); color: var(--pf-foreground); }
.pf-cot-firma__pegar { min-height: 64px; padding: var(--pf-s-3) var(--pf-s-4); border: 1.5px dashed var(--pf-input);
  border-radius: var(--pf-r-md); background: var(--pf-card); color: var(--pf-muted-foreground); cursor: text; }
.pf-cot-firma__pegar:empty::before { content: attr(data-vacio); }
.pf-cot-firma__pegar:focus { outline: 2px solid var(--pf-ring); outline-offset: 2px; border-style: solid; }
.pf-cot-firma__codigo { margin: var(--pf-s-3) 0; }
.pf-cot-firma__codigo summary { cursor: pointer; font-size: var(--pf-fs-sm); color: var(--pf-teal-700); font-weight: 600; }
.pf-cot-firma__codigo textarea { width: 100%; margin-top: var(--pf-s-2); font-family: ui-monospace, Consolas, monospace; font-size: var(--pf-fs-xs); }
.pf-cot-firma__previa { display: block; width: 100%; height: 150px; border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); background: #fff; }
.pf-cot-firma__acc { display: flex; gap: var(--pf-s-2); justify-content: flex-end; margin-top: var(--pf-s-3); }

/* ── Usuarios: el correo de envío */
.pf-user-correo { margin: var(--pf-s-4) 0 0; padding: var(--pf-s-4); border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); }
.pf-user-correo legend { padding: 0 var(--pf-s-2); font: 700 var(--pf-fs-base) var(--pf-font-display); color: var(--pf-foreground); }
.pf-user-correo__lbl { color: var(--pf-muted-foreground); font-size: var(--pf-fs-xs); font-weight: 400; }
.pf-user-correo__res { margin-left: var(--pf-s-3); font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); }
.pf-user-correo > .ci-hint { margin: 0 0 var(--pf-s-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   UH14.1b · CONTACTOS DE CLIENTE
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-ctc-sec { margin: var(--pf-s-5) 0 0; padding-top: var(--pf-s-4); border-top: 1px solid var(--pf-border); }
.pf-ctc-sec h4 { margin: 0 0 2px; font: 700 var(--pf-fs-base) var(--pf-font-display); color: var(--pf-foreground); }
.pf-ctc-lista { display: flex; flex-direction: column; gap: var(--pf-s-2); margin: var(--pf-s-2) 0 var(--pf-s-3); }
.pf-ctc { display: grid; grid-template-columns: 1fr auto; gap: var(--pf-s-2) var(--pf-s-4); align-items: center;
  padding: var(--pf-s-3) var(--pf-s-4); border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); background: var(--pf-card); }
.pf-ctc--princ { border-color: var(--pf-teal-300); background: var(--pf-teal-50); }
.pf-ctc__nom { font-weight: 600; color: var(--pf-foreground); overflow-wrap: anywhere; }
.pf-ctc__dat { display: flex; flex-wrap: wrap; gap: 0 var(--pf-s-4); font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); overflow-wrap: anywhere; }
.pf-ctc__falta { color: var(--pf-warning-on-subtle); }
.pf-ctc__acc { display: flex; gap: var(--pf-s-2); flex-wrap: wrap; justify-content: flex-end; }
.pf-ctc-form { border: 1.5px solid var(--pf-teal-500); border-radius: var(--pf-r-md); padding: var(--pf-s-4); margin: var(--pf-s-2) 0 var(--pf-s-3); background: var(--pf-card); }
.pf-ctc-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pf-s-3) var(--pf-s-4); margin-top: var(--pf-s-3); }
.pf-ctc-form__ancho { grid-column: 1 / -1; }
.pf-ctc-form__grid > div { min-width: 0; }
.pf-ctc-form__pie { display: flex; justify-content: space-between; align-items: center; gap: var(--pf-s-2); flex-wrap: wrap; margin-top: var(--pf-s-3); }
.pf-ctc-check { display: flex; gap: var(--pf-s-2); align-items: center; font-size: var(--pf-fs-sm); }
.pf-ctc__err { display: block; margin-top: var(--pf-s-1); color: var(--pf-destructive-on-subtle); font-size: var(--pf-fs-sm); }
.pf-ctc-vacio { padding: var(--pf-s-4); border: 1.5px dashed var(--pf-input); border-radius: var(--pf-r-md); color: var(--pf-muted-foreground); font-size: var(--pf-fs-sm); text-align: center; margin: var(--pf-s-2) 0; }
@media (max-width: 760px) {
  .pf-ctc { grid-template-columns: 1fr; }
  .pf-ctc__acc { justify-content: flex-start; }
  .pf-ctc-form__grid { grid-template-columns: 1fr; }
}

/* ── Nueva cotización · a quién va dirigida */
.pf-ctc-cli { display: flex; gap: var(--pf-s-3); align-items: center; padding: var(--pf-s-3) var(--pf-s-4);
  border: 1.5px solid var(--pf-teal-500); border-radius: var(--pf-r-md); background: var(--pf-teal-50); }
.pf-ctc-cli__txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pf-ctc-cli__txt small { display: block; color: var(--pf-muted-foreground); }
.pf-ctc-lbl2 { margin-top: var(--pf-s-4); }
.pf-ctc-opc { font-weight: 400; color: var(--pf-muted-foreground); }
.pf-ctc-radio { display: flex; width: 100%; gap: var(--pf-s-3); align-items: flex-start; text-align: left; font: inherit; color: var(--pf-foreground); cursor: pointer;
  padding: var(--pf-s-3) var(--pf-s-4); border: 1.5px solid var(--pf-border); border-radius: var(--pf-r-md); margin-top: var(--pf-s-2); background: var(--pf-card); }
.pf-ctc-radio.sel { border-color: var(--pf-teal-500); background: var(--pf-teal-50); }
.pf-ctc-radio:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 2px; }
.pf-ctc-radio .pto { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pf-sup-400); margin-top: 2px; background: #fff; }
.pf-ctc-radio.sel .pto { border-color: var(--pf-teal-600); background: var(--pf-teal-600); box-shadow: inset 0 0 0 3px #fff; }
.pf-ctc-radio b { display: block; }
.pf-ctc-radio small { display: block; color: var(--pf-muted-foreground); overflow-wrap: anywhere; }

/* ── El editor: «Atn.» junto al cliente, y «Enviar a» en la ventana de envío */
.pf-cot-franja__ctc { color: var(--pf-muted-foreground); font-size: var(--pf-fs-sm); }
.pf-cot-enviar-a { margin-bottom: var(--pf-s-4); }
.pf-cot-canal.apagado { opacity: .55; cursor: not-allowed; }
.pf-cot-canal:disabled { cursor: not-allowed; }

/* ── UH14.5b · El modal de envío, limpio: dos columnas para los campos cortos y el enlace con su icono. */
.pf-cot-modal--env { max-width: 720px; }
/* UH14.5c: con «Descargar PDF» el pie lleva cuatro botones: en celular envuelven en dos filas de dos, en vez de salirse. */
.pf-cot-modal--env .ci-modal-footer { flex-wrap: wrap; gap: var(--pf-s-2); }
@media (max-width: 560px) { .pf-cot-modal--env .ci-modal-footer .ci-btn { flex: 1 1 calc(50% - var(--pf-s-2)); justify-content: center; padding-left: var(--pf-s-3); padding-right: var(--pf-s-3); } }
.pf-cot-env-dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pf-s-4); }
.pf-cot-env-dos > div { min-width: 0; }
.pf-cot-env-copiar { display: flex; gap: var(--pf-s-2); align-items: center; }
.pf-cot-env-copiar .ci-input { flex: 1 1 auto; min-width: 0; }
.pf-cot-env-copiar .ci-btn-icon { flex: none; }
/* El mensaje de WhatsApp se ajusta a su contenido (tope: la mitad de la pantalla; pasado eso, se desplaza). */
.pf-cot-wa { overflow-y: auto; max-height: 55vh; }
@media (max-width: 560px) { .pf-cot-env-dos { grid-template-columns: 1fr; } }

/* ── UH14.6 · Dibujar la firma ──────────────────────────────────────────────
   Va por encima de «Mi firma y contacto» (z-index 200). `touch-action: none` en el lienzo
   evita que el dedo desplace la página mientras se firma. En celular ocupa toda la pantalla. */
.pf-firma-dibujo { z-index: 260; }
.pf-firma-dibujo__caja { width: min(720px, 100%); }
.pf-firma-dibujo__ayuda { margin: 0 0 var(--pf-s-3); }
.pf-firma-dibujo__giro { display: none; }
.pf-firma-dibujo__lienzo { position: relative; height: 260px; background: #fff; border: 1.5px dashed var(--pf-input); border-radius: 10px; overflow: hidden; }
.pf-firma-dibujo__lienzo::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 28%; border-bottom: 1px solid var(--pf-border); pointer-events: none; }
.pf-firma-dibujo__lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }
.pf-firma-dibujo__vacio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ci-text-muted); font-size: var(--pf-fs-sm); pointer-events: none; }
.pf-firma-dibujo__vacio.ci-hidden { display: none; }
@media (hover: none) and (pointer: coarse) { .pf-firma-dibujo__giro { display: inline; } }
/* Pantalla completa en celular, vertical (ancho corto) o de lado (alto corto) */
@media (max-width: 700px), (max-height: 500px) {
  .pf-firma-dibujo { padding: 0; }
  .pf-firma-dibujo__caja { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; display: flex; flex-direction: column; }
  .pf-firma-dibujo__cuerpo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .pf-firma-dibujo__lienzo { flex: 1; height: auto; min-height: 160px; }
}
@media (max-height: 500px) {
  .pf-firma-dibujo__ayuda { display: none; }
  .pf-firma-dibujo .ci-modal-header { padding-block: var(--pf-s-2); }
  .pf-firma-dibujo .ci-modal-footer { padding-block: var(--pf-s-2); }
  .pf-firma-dibujo__cuerpo { padding-block: var(--pf-s-2); }
}
/* El pie de «Mi firma y contacto» lleva tres botones: en celular pasan a otra línea en vez de cortarse */
#cotFirmaModal .ci-modal-footer { flex-wrap: wrap; }

/* ── UH14.8 · Importar clientes ─────────────────────────────────────────────── */
.pf-cli-imp { max-width: 760px; }
.pf-cli-imp .ci-modal-body { max-height: calc(100vh - 11rem); overflow-y: auto; }
.pf-cli-imp__acciones { display: flex; flex-wrap: wrap; gap: var(--pf-s-3); align-items: center; margin: var(--pf-s-4) 0 var(--pf-s-2); }
.pf-cli-imp__acciones input[type="file"] { flex: 1 1 260px; min-width: 0; }
.pf-cli-imp__fichas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pf-s-3); margin-bottom: var(--pf-s-3); }
.pf-cli-imp__ficha { border: 1px solid var(--pf-border); border-radius: var(--pf-r-md); padding: var(--pf-s-3) var(--pf-s-4); background: #fff; }
.pf-cli-imp__ficha b { display: block; font: 700 var(--pf-fs-2xl) var(--pf-font-display); color: var(--ci-text); line-height: 1.1; }
.pf-cli-imp__ficha span { font-size: var(--pf-fs-sm); color: var(--ci-text-muted); }
.pf-cli-imp__ficha--mal { background: var(--pf-destructive-subtle); border-color: var(--pf-destructive); }
.pf-cli-imp__ficha--mal b { color: var(--pf-destructive-on-subtle); }
.pf-cli-imp__extra { margin: 0 0 var(--pf-s-3); }
.pf-cli-imp__sub { margin: var(--pf-s-5) 0 var(--pf-s-2); font: 700 var(--pf-fs-base) var(--pf-font-display); }
.pf-cli-imp__sub--mal { color: var(--pf-destructive-on-subtle); }
.pf-cli-imp__tabla { max-height: 240px; overflow-y: auto; border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm); margin-bottom: var(--pf-s-2); }
.pf-cli-imp__det { margin: var(--pf-s-4) 0 0; }
.pf-cli-imp__det summary { cursor: pointer; font-weight: 600; color: var(--pf-teal-700); font-size: var(--pf-fs-sm); }
.pf-cli-imp__lista { margin: var(--pf-s-2) 0 0; padding-left: var(--pf-s-5); font-size: var(--pf-fs-sm); max-height: 220px; overflow-y: auto; }
.pf-cli-imp__lista li { margin-bottom: var(--pf-s-2); }
@media (max-width: 640px) { .pf-cli-imp__fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── UH14.10 · Selector de sector en la ficha del cliente ───────────────────── */
.pf-cli-sector { display: flex; width: 100%; }
.pf-cli-sector .pf-filtro-oc__btn { flex: 1 1 0; text-align: center; }

/* UH4.8c — En el selector de proveedor, los que no tienen existencias van al final, en gris y sin botón (mockup v10, pantalla 9). */
.pf-cot-pick__tit--agot { border-top: 1px solid var(--pf-border); }
.pf-cot-pick__fila--agot { opacity: .62; }

/* ── UH14.12 · Condiciones comerciales de la cotización (después del total) ── */
.pf-cot-cond { margin-top: var(--pf-s-5); }
.pf-cot-cond__cab { min-height: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-s-2) var(--pf-s-3); margin-bottom: var(--pf-s-2); }
.pf-cot-cond__cab .pf-cot-lbl { margin: 0; }
.pf-cot-cond__cab .ci-btn { margin-left: auto; }
.pf-cot-cond__txt { width: 100%; min-height: 120px; resize: vertical; line-height: 1.5; }
.pf-cot-cond__pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pf-s-1) var(--pf-s-3); margin-top: var(--pf-s-1); }
/* Dos tarjetas lado a lado (condiciones · instrucciones internas); en pantalla angosta se apilan. */
.pf-cot-textos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pf-s-4); margin-top: var(--pf-s-5); }
.pf-cot-textos .pf-cot-cond { margin-top: 0; }
@media (max-width: 900px) { .pf-cot-textos { grid-template-columns: minmax(0, 1fr); } }
.pf-cot-cond__lec { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; color: var(--pf-foreground); }
.pf-cot-cond__lec--vacio { color: var(--pf-sup-600); font-style: italic; }