/* ============================================================
   PYM360 · MODULE — Cotizador
   Capa 3 — específico de #pym-view-cotizador.
   Solo se aplica dentro de esa vista. Cambios aquí no afectan
   otros módulos.
   ============================================================ */

#pym-view-cotizador{
  /* v6.5.37 BUG-094/097: padding lateral reducido (8 → 6) para que los cards
     se acerquen más al borde del viewport. */
  padding:var(--pym-space-6);
  /* v6.5.36 BUG-094/097: sin cap de ancho para que la tabla de resultados
     (10 columnas densas) aproveche todo el viewport en monitores grandes.
     Otros módulos siguen con el cap de 1280px del token. */
  max-width:none;
  margin:0 auto;
}

/* v6.5.38 BUG-094/097: distribución de anchos definitiva.
   table-layout:fixed + <colgroup> con anchos explícitos. "Producto encontrado"
   es la única columna flex (toma el ancho restante). Las demás tienen ancho
   fijo predecible — no más gaps raros ni columnas cortadas.
   Default vertical-align: middle. Filas con sugerencias usan pym-tr--tall
   que cambia a vertical-align: top. */
#pym-view-cotizador #results-panel .pym-table{
  table-layout:fixed;
}
#pym-view-cotizador #results-panel .pym-table tbody td{
  vertical-align:middle;
}
#pym-view-cotizador #results-panel .pym-table tbody tr.pym-tr--tall td{
  vertical-align:top;
}
#pym-view-cotizador #results-panel .pym-table .pym-td-primary,
#pym-view-cotizador #results-panel .pym-table .pym-td-sub{
  overflow-wrap:break-word;
  word-break:normal;
}
@media (max-width:980px){
  #pym-view-cotizador{padding:var(--pym-space-4)}
}

/* ============================================================
   PAGE HEADER (título + versión + acciones)
   ============================================================ */
.cot-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:var(--pym-space-4);
  gap:var(--pym-space-5);
  flex-wrap:wrap;
}
.cot-header-title h2{
  font-size:var(--pym-fs-2xl);
  font-weight:var(--pym-fw-semibold);
  letter-spacing:-.02em;
  color:var(--pym-color-text);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}
.cot-header-title h2 svg{width:20px;height:20px;color:var(--pym-color-accent-2)}
.cot-header-title-ver{
  font-size:var(--pym-fs-xs);
  color:var(--pym-color-accent-2);
  background:var(--pym-color-accent-dim);
  padding:2px 7px;
  border-radius:var(--pym-radius-sm);
  font-family:var(--pym-font-mono);
  font-weight:var(--pym-fw-semibold);
}
.cot-header-title p{
  font-size:var(--pym-fs-base);
  color:var(--pym-color-text-muted);
  margin-top:4px;
}
.cot-header-actions{display:flex;gap:var(--pym-space-2);flex-shrink:0;flex-wrap:wrap}

/* ============================================================
   STEP NUMBER MARK en card header
   ============================================================ */
.cot-step{
  width:22px;height:22px;
  border-radius:var(--pym-radius-sm);
  background:linear-gradient(135deg,var(--pym-color-accent),var(--pym-color-accent-2));
  color:#fff;
  font-size:var(--pym-fs-sm);
  font-weight:var(--pym-fw-bold);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* ============================================================
   INPUT ROW — textarea + config side
   ============================================================ */
.cot-input-row{
  display:grid;
  /* v6.5.38: sidebar 280→360 y textarea no-full-width. Distribuye mejor el
     espacio en monitores anchos (la sidebar ahora aloja candidatos + grid 2
     cols de proveedores en un solo bloque). */
  grid-template-columns:1fr 360px;
  gap:var(--pym-space-4);
}
@media (max-width:980px){.cot-input-row{grid-template-columns:1fr}}

/* v6.5.38: textarea con altura mínima decente para que matchee la sidebar */
.cot-input-row > div:first-child > .pym-textarea{
  min-height:240px;
}

.cot-input-tip{
  margin-top:var(--pym-space-2);
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
  display:flex;
  align-items:center;
  gap:6px;
}
.cot-input-tip code{
  background:var(--pym-color-surface-2);
  padding:1px 5px;
  border-radius:var(--pym-radius-xs);
  font-family:var(--pym-font-mono);
  font-size:10.5px;
  color:var(--pym-color-accent-2);
}
.cot-input-tools{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:var(--pym-space-3);
}

/* Config side (panel derecho del input row) */
.cot-config{
  background:var(--pym-color-surface-2);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-lg);
  padding:var(--pym-space-3) var(--pym-space-4);
  display:flex;
  flex-direction:column;
  gap:var(--pym-space-2);
}

/* v6.5.38: pym-field dentro de cot-config va inline (label izq + select der)
   en vez de stack vertical. El help "<b>15</b> es el punto óptimo..." baja
   al tooltip del help-icon en vez de ocupar 3 líneas. */
.cot-config .pym-field{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pym-space-3);
  margin:0;
}
.cot-config .pym-field-lbl{
  margin:0;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--pym-color-text-muted);
  font-weight:var(--pym-fw-semibold);
}
.cot-config .pym-field-help{
  display:none; /* el texto vive en el tooltip del help-icon */
}
.cot-config .pym-select{
  flex-shrink:0;
}

/* v6.5.38: divisor entre candidatos y la lista de proveedores */
.cot-config-divider{
  height:1px;
  background:var(--pym-color-border);
  margin:2px calc(-1 * var(--pym-space-4));
}
.cot-config-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pym-space-2);
}
.cot-config-row-lbl{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--pym-color-text-muted);
  font-weight:var(--pym-fw-semibold);
}
.cot-config-row-count{
  font-family:var(--pym-font-mono);
  font-size:10.5px;
  color:var(--pym-color-text-dim);
  background:var(--pym-color-bg);
  padding:1px 6px;
  border-radius:var(--pym-radius-xs);
}

/* v6.5.38: lista de proveedores como grid 2 cols compacto, no flex chips
   anchos. Overrides scopeados — cat-info/cat-card solo se usan en el
   cotizador. */
.cot-config .cat-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin-top:0;
}
.cot-config .cat-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--pym-color-bg);
  border:1px solid transparent;
  border-radius:var(--pym-radius-xs);
  padding:4px 7px;
  font-size:11px;
  min-width:0;
  gap:6px;
}
.cot-config .cat-card:hover{
  border-color:var(--pym-color-border);
}
.cot-config .cat-card strong{
  color:var(--pym-color-accent-2);
  font-family:var(--pym-font-mono);
  font-size:11px;
  font-weight:var(--pym-fw-semibold);
}
.cot-config .cat-card .prov-tag{
  font-size:10px;
  padding:1px 5px;
  border-radius:var(--pym-radius-xs);
  flex-shrink:0;
}
/* el sufijo " productos" se oculta para ahorrar espacio (la columna ya
   se titula "Proveedores", no hace falta repetir) */
.cot-config .cat-card-suffix{
  display:none;
}

/* ============================================================
   ADJUNTOS panel (Compra Ágil)
   ============================================================ */
.cot-adjuntos{
  margin-top:var(--pym-space-3);
  padding:var(--pym-space-4);
  border:2px dashed var(--pym-color-border-strong);
  border-radius:var(--pym-radius-lg);
  background:var(--pym-color-surface-2);
}
.cot-adjuntos-header{
  display:flex;
  align-items:center;
  gap:var(--pym-space-2);
  flex-wrap:wrap;
  margin-bottom:var(--pym-space-2);
}
.cot-adjuntos-header svg{color:var(--pym-color-accent-2);width:16px;height:16px;flex-shrink:0}
.cot-adjuntos-title{
  font-weight:var(--pym-fw-semibold);
  color:var(--pym-color-text);
  font-size:var(--pym-fs-md);
}
.cot-adjuntos-tip{
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
}
.cot-adjuntos-list{
  margin-top:var(--pym-space-2);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* ============================================================
   PROGRESS panel
   ============================================================ */
.cot-progress{
  display:flex;
  flex-direction:column;
  gap:var(--pym-space-2);
}
.cot-progress-text{
  display:flex;
  justify-content:space-between;
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-dim);
  font-family:var(--pym-font-mono);
}
.cot-progress-bar{
  height:6px;
  background:var(--pym-color-surface-2);
  border-radius:var(--pym-radius-pill);
  overflow:hidden;
}
.cot-progress-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--pym-color-accent),var(--pym-color-accent-2));
  transition:width .3s ease;
  border-radius:var(--pym-radius-pill);
}
.cot-progress-current{
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
  font-family:var(--pym-font-mono);
  min-height:18px;
  text-align:center;
  font-style:italic;
}

/* v6.5.53 SUG-028: progress panel compacto (1 banda horizontal en lugar de card) */
.cot-progress-compact{
  background:var(--pym-color-surface);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-md);
  padding:8px 14px;
  margin-bottom:12px;
}
.cot-progress-compact-row{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
}
.cot-progress-compact-title{font-weight:600;color:var(--pym-color-text);white-space:nowrap}
.cot-progress-compact-label{color:var(--pym-color-text-muted);font-size:12px;white-space:nowrap;font-family:var(--pym-font-mono)}
.cot-progress-compact-pct{font-family:var(--pym-font-mono);font-weight:600;color:var(--pym-color-accent);min-width:42px;text-align:right}
.cot-progress-compact .cot-progress-current{margin-top:4px;font-size:11px;text-align:left;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:0}
.cot-progress-compact .cot-progress-current:empty{display:none}

/* ============================================================
   RESULTS — summary pills row
   ============================================================ */
.cot-summary-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--pym-space-2);
  padding:var(--pym-space-3) var(--pym-space-4);
  background:rgba(73,124,251,.04);
  border-bottom:1px solid var(--pym-color-border);
  align-items:center;
}
.cot-summary-pill{
  font-size:var(--pym-fs-sm);
  font-weight:var(--pym-fw-medium);
  background:var(--pym-color-surface-2);
  border:1px solid var(--pym-color-border);
  padding:4px 9px;
  border-radius:var(--pym-radius-sm);
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--pym-color-text-dim);
}
.cot-summary-pill b{
  color:var(--pym-color-text);
  font-feature-settings:"tnum";
  font-family:var(--pym-font-mono);
}
.cot-summary-pill--ok{border-color:rgba(83,169,69,.2);color:var(--pym-color-success)}
.cot-summary-pill--ok b{color:var(--pym-color-success)}
.cot-summary-pill--warn{border-color:rgba(245,185,85,.2);color:var(--pym-color-warning)}
.cot-summary-pill--warn b{color:var(--pym-color-warning)}
.cot-summary-pill--total{
  margin-left:auto;
  background:linear-gradient(135deg,rgba(73,124,251,.1),rgba(90,175,255,.05));
  border-color:rgba(73,124,251,.3);
  color:var(--pym-color-accent-2);
}
.cot-summary-pill--total b{color:var(--pym-color-text);font-size:var(--pym-fs-md)}

/* Inputs inline en celdas (cantidad, precio, color, talla) */
.cot-cell-input{
  background:var(--pym-color-surface-2);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-xs);
  color:var(--pym-color-text);
  font-size:var(--pym-fs-base);
  padding:3px 6px;
  font-family:var(--pym-font-mono);
  font-feature-settings:"tnum";
  width:80px;
  transition:border-color var(--pym-trans-fast);
}
.cot-cell-input:focus{
  outline:none;
  border-color:var(--pym-color-accent);
  background:var(--pym-color-surface);
}
/* BUG-102: 54px con type=number + padding 12px + spinner arrows (~16-20px) dejaba
   ~22-26px utiles = 2-3 chars. "1000" se veia como "10" y no se distinguia de 100/10.
   Ahora 76px + appearance:textfield (oculta spinners nativos del browser, recuperando
   todo el ancho util). 76px - 12px padding = 64px ~ 6 chars monospace = hasta "100000". */
.cot-cell-input--qty{
  width:76px;text-align:center;
  -moz-appearance:textfield;
  appearance:textfield;
}
.cot-cell-input--qty::-webkit-outer-spin-button,
.cot-cell-input--qty::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
/* BUG-088/091: 110px se cortaba con $1.555 (mostraba "1.55") por el padding interno + box-sizing.
   130px cabe "$10.000.000" con holgura. */
.cot-cell-input--price{width:130px;text-align:right}
/* BUG-092: 90px solo dejaba ver 2-3 letras ("Co"/"Ico"). 120px cabe "Naranja"/"Amarillo" completos. */
.cot-cell-input--color{width:120px}

.cot-talla-select{
  font-size:11px;
  background:var(--pym-color-surface-2);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-xs);
  padding:1px 4px;
  color:var(--pym-color-text);
  font-family:var(--pym-font-mono);
  cursor:pointer;
}

.cot-results-foot{
  padding:var(--pym-space-3) var(--pym-space-4);
  display:flex;
  align-items:center;
  gap:var(--pym-space-2);
  border-top:1px solid var(--pym-color-border);
  flex-wrap:wrap;
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
}
.cot-results-foot b{color:var(--pym-color-text)}
.cot-results-foot-spacer{flex:1}

/* ============================================================
   DOLIBARR send panel
   ============================================================ */
.cot-doli{
  background:linear-gradient(180deg,var(--pym-color-surface),var(--pym-color-bg));
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-xl);
  overflow:hidden;
}
.cot-doli .pym-card-h{background:linear-gradient(90deg,rgba(73,124,251,.06),transparent)}

.cot-doli-grid{
  /* SUG-011: 5ª columna para Utilidad live junto a Margen */
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--pym-space-3);
  padding:var(--pym-space-4);
}
@media (max-width:1180px){.cot-doli-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.cot-doli-grid{grid-template-columns:repeat(2,1fr)}}

.cot-doli-banner{
  margin:0 var(--pym-space-4) var(--pym-space-3);
  padding:10px 14px;
  background:linear-gradient(90deg,rgba(125,208,109,.08),transparent);
  border:1px solid rgba(125,208,109,.2);
  border-radius:var(--pym-radius-md);
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--pym-fs-base);
  color:var(--pym-color-success);
}
.cot-doli-banner svg{flex-shrink:0;width:16px;height:16px}
.cot-doli-banner--warn{
  background:linear-gradient(90deg,rgba(245,185,85,.08),transparent);
  border-color:rgba(245,185,85,.2);
  color:var(--pym-color-warning);
}
.cot-doli-banner--danger{
  background:linear-gradient(90deg,rgba(255,141,123,.08),transparent);
  border-color:rgba(255,141,123,.2);
  color:var(--pym-color-danger);
}

.cot-doli-preview{
  margin:0 var(--pym-space-4) var(--pym-space-3);
  padding:var(--pym-space-3) var(--pym-space-4);
  background:var(--pym-color-bg);
  border:1px dashed var(--pym-color-border-strong);
  border-radius:var(--pym-radius-md);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--pym-space-2);
}
@media (max-width:980px){.cot-doli-preview{grid-template-columns:repeat(2,1fr)}}
.cot-doli-preview-cell{display:flex;flex-direction:column;gap:2px}
.cot-doli-preview-lbl{
  font-size:var(--pym-fs-xs);
  color:var(--pym-color-text-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.cot-doli-preview-val{
  font-size:var(--pym-fs-md);
  font-weight:var(--pym-fw-semibold);
  color:var(--pym-color-text);
  font-family:var(--pym-font-mono);
  font-feature-settings:"tnum";
}
.cot-doli-preview-val--success{color:var(--pym-color-success)}
.cot-doli-preview-val--accent{color:var(--pym-color-accent-2)}

.cot-doli-nota{padding:0 var(--pym-space-4) var(--pym-space-4)}
.cot-doli-nota-head{
  display:flex;
  align-items:center;
  gap:var(--pym-space-2);
  flex-wrap:wrap;
  margin-bottom:6px;
}
.cot-doli-nota-head label{
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-dim);
  font-weight:var(--pym-fw-medium);
}

.cot-doli-send{
  padding:0 var(--pym-space-4) var(--pym-space-4);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-top:1px solid var(--pym-color-border);
  padding-top:var(--pym-space-3);
  margin-top:4px;
}
.cot-doli-send-info{
  font-size:11.5px;
  color:var(--pym-color-text-muted);
  flex:1;
}
.cot-doli-send-info b{color:var(--pym-color-text)}

.cot-doli-rut-info,
.cot-doli-cliente-info,
.cot-doli-resultado{
  margin-top:var(--pym-space-2);
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
}

.cot-doli-entrega{
  margin-top:var(--pym-space-2);
  padding:8px 12px;
  background:var(--pym-color-surface);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-sm);
  font-size:var(--pym-fs-base);
}
.cot-doli-entrega b{color:var(--pym-color-text);font-weight:var(--pym-fw-semibold)}

/* Panel de inteligencia del organismo (Compra Ágil) — bajo el grid Dolibarr */
.cot-org-intel{
  margin:0 var(--pym-space-4) var(--pym-space-3);
  border:1px solid var(--pym-color-border);
  border-left:3px solid var(--pym-color-accent-2);
  border-radius:var(--pym-radius-md);
  overflow:hidden;
}
.cot-org-intel-h{
  padding:7px 12px;
  font-size:11px;
  font-weight:var(--pym-fw-semibold);
  color:var(--pym-color-text);
  background:var(--pym-color-surface-2);
  border-bottom:1px solid var(--pym-color-border);
}
.cot-org-intel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--pym-color-border);
}
@media (max-width:780px){.cot-org-intel-grid{grid-template-columns:1fr}}
.cot-org-col{
  background:var(--pym-color-surface);
  padding:9px 12px;
}
.cot-org-col-h{
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--pym-color-text-muted);
  font-weight:var(--pym-fw-semibold);
  margin-bottom:6px;
}
.cot-org-line{
  font-size:11px;
  color:var(--pym-color-text-dim);
  margin-bottom:3px;
  line-height:1.4;
}
.cot-org-line b{color:var(--pym-color-text)}
.cot-org-rank{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  padding:2px 0;
  color:var(--pym-color-text-dim);
}
.cot-org-rank span:first-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cot-org-rank b{
  font-family:var(--pym-font-mono);
  color:var(--pym-color-text);
  flex-shrink:0;
}
.cot-org-empty{
  font-size:10.5px;
  color:var(--pym-color-text-muted);
}

/* ============================================================
   KNOWLEDGE TAB — synonyms grid + learned matches preview
   ============================================================ */
.cot-syn-input-row{
  display:flex;
  gap:var(--pym-space-2);
  margin-bottom:var(--pym-space-2);
  flex-wrap:wrap;
  align-items:center;
}
.cot-help-text{
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
  margin-bottom:var(--pym-space-3);
  line-height:1.4;
}