/* ═══════════════════════════════════════════════════════════════
   css/catalogo-proveedores.css — Sección "Catálogo de Proveedores"
   dentro de Analista de Productos (Operación → Catálogo de
   Proveedores). Usa las mismas variables de tema (--ap-*, definidas
   en analista-productos.css sobre #page-analista_productos) en vez de
   una paleta propia — mismo criterio que dropshipping.css.
   ═══════════════════════════════════════════════════════════════ */

#page-analista_productos .cp-loading,
#page-analista_productos .cp-error,
#page-analista_productos .cp-empty {
  padding: 50px; text-align: center; color: var(--ap-text2); font-size: 13px;
}
#page-analista_productos .cp-error { color: var(--ap-red); }

#page-analista_productos .cp-btn {
  border: none; border-radius: 9px; padding: 9px 16px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
#page-analista_productos .cp-btn:disabled { opacity: .5; cursor: not-allowed; }
#page-analista_productos .cp-btn-primary { background: var(--ap-blue); color: #fff; }
#page-analista_productos .cp-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
#page-analista_productos .cp-btn-ghost { background: var(--ap-bg); color: var(--ap-text); border: 1px solid var(--ap-border); }
#page-analista_productos .cp-btn-ghost:hover:not(:disabled) { filter: brightness(0.97); }
#page-analista_productos .cp-btn-sm { padding: 6px 12px; font-size: 11.5px; }

/* ── Toolbar de categorías (chips) ── */
#page-analista_productos .cp-toolbar { margin-bottom: 18px; }
#page-analista_productos .cp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#page-analista_productos .cp-chip {
  background: var(--ap-card); border: 1px solid var(--ap-border); border-radius: 999px;
  padding: 7px 14px; font-size: 12px; font-weight: 700; color: var(--ap-text2); cursor: pointer; transition: all .15s;
}
#page-analista_productos .cp-chip:hover { border-color: var(--ap-blue); color: var(--ap-text); }
#page-analista_productos .cp-chip.active { background: var(--ap-blue); border-color: var(--ap-blue); color: #fff; }

/* ── Grid de proveedores ── */
#page-analista_productos .cp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;
}
#page-analista_productos .cp-supplier-card {
  position: relative;
  background: var(--ap-card); border: 1px solid var(--ap-border); border-radius: var(--ap-r-lg);
  padding: 20px 16px; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; cursor: pointer; transition: transform .15s, border-color .15s; box-shadow: var(--ap-shadow);
}
#page-analista_productos .cp-supplier-card:hover { border-color: var(--ap-blue); transform: translateY(-2px); box-shadow: var(--ap-shadow-hov); }
#page-analista_productos .cp-card-menu-btn {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 8px;
  border: none; background: transparent; color: var(--ap-text2); font-size: 16px; font-weight: 800;
  cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: background .12s;
}
#page-analista_productos .cp-card-menu-btn:hover { background: var(--ap-bg); color: var(--ap-text); }

/* Ojo de "ocultar del Catálogo de Productos" — mismo círculo que el
   botón de 3 puntos, al lado. */
#page-analista_productos .cp-card-eye-btn {
  position: absolute; top: 8px; right: 38px; width: 26px; height: 26px; border-radius: 8px;
  border: none; background: transparent; font-size: 13px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: background .12s; opacity: .75;
}
#page-analista_productos .cp-card-eye-btn:hover { background: var(--ap-bg); opacity: 1; }
#page-analista_productos .cp-supplier-hidden { opacity: .55; }
#page-analista_productos .cp-supplier-hidden:hover { opacity: .85; }
#page-analista_productos .cp-hidden-badge { background: rgba(148,163,184,.16); color: var(--ap-text2); }

/* Fallback con color fijo: este menú se apendea DENTRO de
   #page-analista_productos (ver cpOpenCardMenu) así que las var(--ap-*)
   ya resuelven bien, pero se deja un valor de respaldo por si en algún
   punto de entrada quedara fuera de ese scope — nunca más transparente. */
.cp-card-menu {
  position: absolute; z-index: 500; min-width: 220px; padding: 6px;
  background: var(--ap-card, #12141C); border: 1px solid var(--ap-border, rgba(255,255,255,.08));
  border-radius: var(--ap-r-lg, 14px); box-shadow: var(--ap-shadow-hov, 0 20px 50px rgba(0,0,0,.6));
}
.cp-card-menu button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; font-size: 13px; font-weight: 600;
  color: var(--ap-text, #E8EAF0); background: none; border: none; border-radius: 8px; cursor: pointer;
}
.cp-card-menu button:hover { background: var(--ap-bg, #0B0D14); }
.cp-card-menu-danger { color: #dc2626 !important; }

/* ── Modal "Ver en Mercado Libre" ── */
.cp-ml-listings-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; margin: 10px 0; }
.cp-ml-listing-row {
  display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--ap-border);
  border-radius: var(--ap-r-md); background: var(--ap-bg);
}
.cp-ml-listing-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--ap-card); }
.cp-ml-listing-info { flex: 1; min-width: 0; }
.cp-ml-listing-title { font-size: 12.5px; font-weight: 700; color: var(--ap-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-ml-listing-meta { font-size: 11px; color: var(--ap-text2); margin-top: 2px; }
.cp-ml-listing-status { text-transform: capitalize; }
.cp-ml-listing-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Modal "Errores" (menú ⋮ de cada proveedor) — pedido explícito
   2026-08-20: clasificación visible por fila (foto / política / datos). ── */
.cp-error-kind-badge {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: 2px;
}
.cp-error-kind-imagen   { background: color-mix(in srgb, #0ea5e9 16%, transparent); color: #0ea5e9; }
.cp-error-kind-politica { background: color-mix(in srgb, #dc2626 16%, transparent); color: #dc2626; }
.cp-error-kind-token    { background: color-mix(in srgb, #a855f7 16%, transparent); color: #a855f7; }
.cp-error-kind-datos    { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #f59e0b; }
.cp-error-msg { font-size: 10.5px; color: var(--ap-text2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
#page-analista_productos .cp-supplier-logo {
  width: 68px; height: 68px; border-radius: 50%; overflow: hidden; background: var(--ap-bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#page-analista_productos .cp-supplier-logo img { width: 100%; height: 100%; object-fit: cover; }
#page-analista_productos .cp-supplier-logo-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ap-blue), var(--ap-green)); color: #fff; font-weight: 800; font-size: 20px;
}
#page-analista_productos .cp-supplier-name { font-size: 13.5px; font-weight: 700; color: var(--ap-text); }
#page-analista_productos .cp-supplier-cat {
  display: inline-block; background: var(--ap-bg); color: var(--ap-text2); border-radius: 6px;
  padding: 2px 8px; font-size: 10.5px; font-weight: 600; margin-left: 8px;
}
#page-analista_productos .cp-own-stock-badge {
  display: inline-block; background: color-mix(in srgb, var(--ap-blue) 12%, transparent); color: var(--ap-blue);
  border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 700; margin-left: 8px; vertical-align: middle;
}
#page-analista_productos .cp-supplier-card .cp-own-stock-badge { margin-left: 0; }
#page-analista_productos .cp-supplier-card .cp-supplier-cat { margin-left: 0; }
#page-analista_productos .cp-supplier-count { font-size: 11px; color: var(--ap-text2); }

/* ── Detalle del proveedor ── */
#page-analista_productos .cp-detail-hdr { margin-bottom: 14px; }
#page-analista_productos .cp-link-back { background: none; border: none; color: var(--ap-blue); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }

#page-analista_productos .cp-profile-card {
  background: var(--ap-card); border: 1px solid var(--ap-border); border-radius: var(--ap-r-lg);
  padding: 20px; display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; box-shadow: var(--ap-shadow);
}
#page-analista_productos .cp-profile-logo { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
#page-analista_productos .cp-profile-logo img,
#page-analista_productos .cp-profile-logo .cp-supplier-logo-fallback {
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
}
#page-analista_productos .cp-logo-upload-btn {
  position: absolute; bottom: -2px; right: -2px; background: var(--ap-blue); color: #fff;
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer; border: 2px solid var(--ap-card);
}
#page-analista_productos .cp-profile-main { flex: 1; min-width: 0; }
#page-analista_productos .cp-profile-name { font-size: 18px; font-weight: 800; color: var(--ap-text); display: flex; align-items: center; flex-wrap: wrap; }
#page-analista_productos .cp-profile-contact { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12.5px; color: var(--ap-text2); }
#page-analista_productos .cp-profile-contact a { color: var(--ap-blue); text-decoration: none; }
#page-analista_productos .cp-profile-empty { font-size: 12px; color: var(--ap-text2); margin-top: 8px; font-style: italic; }
#page-analista_productos .cp-social-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#page-analista_productos .cp-social-pill {
  background: var(--ap-bg); color: var(--ap-blue); border-radius: 999px; padding: 4px 12px;
  font-size: 11px; font-weight: 700; text-decoration: none; text-transform: capitalize;
}

/* ── Editar perfil ── */
#page-analista_productos .cp-edit-profile-card {
  background: var(--ap-card); border: 1px solid var(--ap-border); border-radius: var(--ap-r-sm); padding: 18px; margin-bottom: 18px;
}
#page-analista_productos .cp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
#page-analista_productos .cp-form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--ap-text2); font-weight: 600; }
#page-analista_productos .cp-form-grid input {
  background: var(--ap-bg); border: 1px solid var(--ap-border); border-radius: 8px; padding: 8px 10px;
  color: var(--ap-text); font-size: 12.5px; outline: none;
}
#page-analista_productos .cp-form-grid input:focus { border-color: var(--ap-blue); }
#page-analista_productos .cp-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ── Card "+ Agregar proveedor" — misma forma/tamaño que una card de
   proveedor real, para que abra el grid como una más (ver cpPaintGrid). ── */
#page-analista_productos .cp-add-supplier-card {
  border-style: dashed !important; justify-content: center; color: var(--ap-text2);
}
#page-analista_productos .cp-add-supplier-card:hover { color: var(--ap-blue); }
#page-analista_productos .cp-add-supplier-plus {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; background: var(--ap-bg); color: inherit;
}
#page-analista_productos .cp-add-supplier-card .cp-supplier-name { color: inherit; }

/* ── Modal "Agregar proveedor" — nombre + archivo + URLs (ver
   cpOpenAddSupplierModal) ── */
.cp-add-file-drop {
  border: 2px dashed var(--ap-border, rgba(255,255,255,.14)); border-radius: 10px; padding: 20px;
  text-align: center; cursor: pointer; transition: .15s; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; margin: 4px 0 14px;
}
.cp-add-file-drop:hover, .cp-add-file-drop.cp-drop-over { border-color: #3B82F6; }
.cp-add-file-drop-icon { font-size: 22px; }
.cp-add-file-drop-text { font-size: 12px; font-weight: 600; color: var(--ap-text, #101828); }
.cp-add-file-drop-hint { font-size: 10.5px; color: var(--ap-text2, #667085); }
.cp-add-file-chosen { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--ap-bg, #F6F8FB); border-radius: 8px; padding: 8px 10px; margin: 4px 0 14px; font-size: 11.5px; }
.cp-add-file-chosen button { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 13px; font-weight: 700; }

.cp-add-url-row { display: flex; gap: 8px; margin: 4px 0 10px; }
.cp-add-url-row input {
  flex: 1; background: var(--ap-bg, #F6F8FB); border: 1px solid var(--ap-border, rgba(255,255,255,.14));
  border-radius: 8px; padding: 9px 11px; color: var(--ap-text, #101828); font-size: 12.5px; outline: none;
}
.cp-add-url-row input:focus { border-color: #3B82F6; }
.cp-add-url-plus {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px; border: none;
  background: rgba(59,130,246,.15); color: #3B82F6; font-size: 18px; font-weight: 800; cursor: pointer;
}
.cp-add-url-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cp-add-url-chip {
  display: flex; align-items: center; gap: 6px; max-width: 260px; background: rgba(59,130,246,.12); color: #3B82F6;
  border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 11px; font-weight: 600;
}
.cp-add-url-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-add-url-chip button { background: none; border: none; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 2px; opacity: .75; }
.cp-add-url-chip button:hover { opacity: 1; }
.cp-add-progress { font-size: 11.5px; color: var(--ap-text2, #667085); margin-top: 8px; line-height: 1.6; min-height: 16px; }

/* ── Toolbar de resultados (toggle filas/boxes + seleccionar todos) ── */
#page-analista_productos .cp-results-toolbar {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
/* Selector Filas/Cards — pedido explícito 22/08/2026: icon-only,
   cuadrados, siempre en el margen DERECHO del toolbar de resultados
   (reusado tal cual en Catálogo de Productos e Integraciones, ver
   analista-productos.css/integraciones.css — CSS único para no
   desincronizar el look entre módulos). */
#page-analista_productos .cp-view-toggle { display: flex; gap: 4px; background: var(--ap-bg); border-radius: 9px; padding: 3px; flex-shrink: 0; }
#page-analista_productos .cp-view-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: none; border: none; color: var(--ap-text2); font-size: 14px;
  border-radius: 7px; cursor: pointer; transition: all .15s;
}
#page-analista_productos .cp-view-toggle-btn.active { background: var(--ap-card); color: var(--ap-text); box-shadow: var(--ap-shadow); }
#page-analista_productos .cp-view-toggle-btn:hover:not(.active) { color: var(--ap-text); }
#page-analista_productos .cp-selectall { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ap-text2); cursor: pointer; }

/* ── Tabla de filas ── */
#page-analista_productos .cp-table-wrap { overflow-x: auto; padding-bottom: 90px; }
#page-analista_productos .cp-rows-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 900px; }
#page-analista_productos .cp-rows-table thead tr { border-bottom: 1px solid var(--ap-border); }
#page-analista_productos .cp-rows-table th {
  text-align: left; padding: 10px 12px; color: var(--ap-text2); font-weight: 600;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
}
#page-analista_productos .cp-rows-table td { padding: 10px 12px; border-bottom: 1px solid var(--ap-border); vertical-align: middle; }
#page-analista_productos .cp-col-check { width: 34px; }
#page-analista_productos .cp-col-check input { width: 16px; height: 16px; cursor: pointer; }
#page-analista_productos .cp-col-img { width: 64px; }
#page-analista_productos .cp-col-img img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: var(--ap-bg); }
#page-analista_productos .cp-row-img-placeholder {
  width: 52px; height: 52px; border-radius: 8px; background: var(--ap-bg); color: var(--ap-border);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
#page-analista_productos .cp-row-title { font-size: 12.5px; font-weight: 700; color: var(--ap-text); margin-bottom: 2px; }
#page-analista_productos .cp-row-sub { font-size: 11px; color: var(--ap-text2); }
#page-analista_productos .cp-col-price { white-space: nowrap; font-weight: 700; color: var(--ap-text); }
#page-analista_productos .cp-col-markup { width: 90px; }

#page-analista_productos .cp-inline-input {
  width: 78px; background: var(--ap-bg); border: 1px solid var(--ap-border); border-radius: 7px;
  padding: 6px 8px; color: var(--ap-text); font-size: 12px; outline: none;
}
#page-analista_productos .cp-inline-input:focus { border-color: var(--ap-blue); }
#page-analista_productos .cp-inline-input-sm { width: 64px; }

#page-analista_productos .cp-badge {
  display: inline-block; border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 700;
  text-decoration: none; margin-top: 4px; margin-right: 4px;
}
#page-analista_productos .cp-badge-ml { background: color-mix(in srgb, var(--ap-green) 15%, transparent); color: var(--ap-green); }
#page-analista_productos .cp-badge-shopify { background: rgba(149,225,71,0.18); color: #5a9c1f; }

/* ── Vista boxes — estilo foto-adelante inspirado en cómo el propio
   proveedor (ej. elparaisodepaso.com.ar) muestra sus productos: imagen
   grande y centrada, marca chica arriba, título debajo, precio al pie. */
#page-analista_productos .cp-boxes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding-bottom: 90px;
}
#page-analista_productos .cp-box {
  position: relative; background: var(--ap-card); border: 1px solid var(--ap-border); border-radius: var(--ap-r-sm);
  min-height: 12cm; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: var(--ap-shadow);
  transition: transform 150ms var(--ap-ease), box-shadow 150ms var(--ap-ease); cursor: pointer;
}
#page-analista_productos .cp-box:hover { transform: translateY(-3px); box-shadow: var(--ap-shadow-hov); }
#page-analista_productos .cp-box-check { position: absolute; top: 12px; left: 12px; z-index: 1; }
#page-analista_productos .cp-box-check input { width: 16px; height: 16px; cursor: pointer; }
#page-analista_productos .cp-box-img {
  display: flex; justify-content: center; align-items: center; width: 100%; height: 4.5cm; flex-shrink: 0;
  background: var(--ap-bg); border-radius: 10px; overflow: hidden; margin-bottom: 4px;
}
#page-analista_productos .cp-box-img img { width: 100%; height: 100%; object-fit: cover; }
#page-analista_productos .cp-box-brand { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ap-blue); }
#page-analista_productos .cp-box-sku { font-size: 10.5px; color: var(--ap-text2); }
#page-analista_productos .cp-box-title { font-size: 12.5px; font-weight: 700; color: var(--ap-text); text-align: center; line-height: 1.35; }
#page-analista_productos .cp-box-prices { width: 100%; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--ap-text2); margin-top: 4px; }
#page-analista_productos .cp-box-prices > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#page-analista_productos .cp-box-venta { font-size: 13px; color: var(--ap-text); border-top: 1px solid var(--ap-border); padding-top: 6px; margin-top: 2px; }
#page-analista_productos .cp-box-ganancia { font-size: 12.5px; color: var(--ap-green); }
#page-analista_productos .cp-box .cp-btn { width: 100%; justify-content: center; margin-top: 6px; }

/* ── Buscador + filtros del proveedor (categoría / marca) — genérico,
   aplica igual a cualquier proveedor (manual o creado por un escaneo). */
#page-analista_productos .cp-search-row { display: flex; gap: 8px; margin-bottom: 10px; }
#page-analista_productos .cp-search-input { flex: 1; padding: 10px 14px; border-radius: var(--ap-r-sm); border: 1px solid var(--ap-border); background: var(--ap-card); color: var(--ap-text); font-size: 13px; }
#page-analista_productos .cp-filters-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
#page-analista_productos .cp-filter-select { padding: 8px 12px; border-radius: var(--ap-r-sm); border: 1px solid var(--ap-border); background: var(--ap-card); color: var(--ap-text); font-size: 12.5px; min-width: 180px; }
#page-analista_productos .cp-ai-scan-badge { background: color-mix(in srgb, var(--ap-blue) 15%, transparent); color: var(--ap-blue); }
#page-analista_productos .cp-ganancia-cell { color: var(--ap-green); font-weight: 600; }
#page-analista_productos .cp-col-stock { min-width: 110px; }
#page-analista_productos .cp-stock-ok { color: var(--ap-green); font-weight: 600; font-size: 12.5px; }
#page-analista_productos .cp-stock-out { color: var(--ap-red); font-weight: 700; font-size: 12.5px; }
#page-analista_productos .cp-stock-unsynced { color: var(--ap-text2); font-size: 11.5px; font-style: italic; }
#page-analista_productos .cp-class-suggested { color: #b45309; font-weight: 600; font-size: 12.5px; }
#page-analista_productos .cp-fee-loading { color: var(--ap-text2); font-size: 11.5px; font-style: italic; }
#page-analista_productos .cp-fee-error { color: var(--ap-text2); cursor: help; }
#page-analista_productos .cp-fee-manual-badge {
  display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700;
  background: color-mix(in srgb, #b45309 15%, transparent); color: #b45309;
}
#page-analista_productos .cp-fee-override-input { width: 52px; margin-left: 4px; }
#page-analista_productos .cp-row-sku { font-size: 11.5px; color: var(--ap-text2); white-space: nowrap; }
#page-analista_productos .cp-ml-link-badge {
  display: block; margin-top: 6px; text-align: center; font-size: 10.5px; font-weight: 700;
  padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ap-blue) 15%, transparent); color: var(--ap-blue);
  text-decoration: none;
}
#page-analista_productos .cp-ml-link-badge-shopify { background: rgba(149,225,71,0.18); color: #5a9c1f; }
#page-analista_productos .cp-ml-link-badge:hover { filter: brightness(1.15); }

/* ── Barra flotante de selección múltiple ── */
#page-analista_productos .cp-bulkbar {
  display: none; position: sticky; bottom: 16px; align-items: center; justify-content: space-between;
  background: var(--ap-card); border: 1px solid var(--ap-blue); border-radius: 12px; padding: 12px 18px;
  box-shadow: var(--ap-shadow-hov); max-width: 480px; margin: 0 auto;
}
#page-analista_productos .cp-bulkbar-count { font-size: 12.5px; font-weight: 700; color: var(--ap-text); }

/* ── Modal de publicación (se agrega a document.body, fuera del scope
   de #page-analista_productos — usa colores propios, no depende de que
   el módulo esté montado, mismo criterio que otros overlays de la app) ── */
.cp-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.55); display: flex; align-items: center;
  justify-content: center; z-index: 9999;
}
.cp-modal {
  --cp-modal-bg: #FFFFFF; --cp-modal-text: #101828; --cp-modal-border: #FFE600;
  background: var(--cp-modal-bg); color: var(--cp-modal-text);
  border: 5px solid var(--cp-modal-border); border-radius: 20px; padding: 24px;
  width: 15cm; min-width: 320px; height: 15cm; min-height: 260px;
  max-width: 95vw; max-height: 92vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex; flex-direction: column; overflow: auto;
  resize: both; /* tirar de la esquina inferior derecha para agrandar/achicar */
}
.cp-modal-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-shrink: 0; }
.cp-modal-color-trigger-wrap { position: relative; }
.cp-modal-color-trigger {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.04);
  font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 120ms ease, border-color 120ms ease;
}
.cp-modal-color-trigger:hover { background: rgba(0,0,0,.08); }
.cp-modal-color-popover {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 5;
  display: none; flex-direction: column; gap: 10px; padding: 12px 14px;
  background: var(--cp-modal-bg, #fff); border: 1px solid rgba(0,0,0,.12); border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.3); min-width: 150px;
}
.cp-modal-color-popover.open { display: flex; }
.cp-modal-color-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 700;
  color: var(--cp-modal-text); cursor: pointer;
}
.cp-modal-color-row input[type="color"] { width: 30px; height: 24px; border: none; border-radius: 6px; cursor: pointer; padding: 0; }
.cp-modal-min-btn {
  width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0,0,0,.12);
  color: var(--cp-modal-text); font-size: 16px; font-weight: 800; line-height: 1; cursor: pointer;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.cp-modal-minimized { height: auto !important; min-height: 0 !important; resize: none; }
#cpModalBody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cp-modal-title { font-size: 15px; font-weight: 800; color: inherit; margin-bottom: 14px; }
.cp-modal-channels { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cp-channel-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: inherit; cursor: pointer; }
.cp-modal-field { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: inherit; font-weight: 600; margin-bottom: 16px; }
.cp-modal-field input {
  background: #F6F8FB; border: 1px solid rgba(15,23,42,.08); border-radius: 8px; padding: 9px 10px;
  font-size: 12.5px; outline: none;
}
/* El resto de la app fuerza `input:not(...):not(...):not(...):not(...) {
   color !important }` (index.html) con especificidad (0,4,1) — más alta
   que una clase sola. Un ID le gana a cualquier combinación de clases sin
   depender del orden de carga de las hojas de estilo. */
/* color-scheme:light agregado acá — pedido explícito 22/08/2026: el
   selector "Talle / Modelo" se veía como una caja negra vacía, sin
   texto legible ni siquiera el placeholder "Seleccioná una opción".
   Mismo bug ya diagnosticado antes en el bubble de WhatsApp del
   Cotizador (ver ctzWaBubbleWrap en index.html): con color-scheme:dark
   en :root (el resto de la app), el navegador sigue aplicando su
   heurística nativa de "auto-dark" a los controles de formulario aunque
   color/background ya vengan fijados a mano — un <select> es más
   sensible a esto que un <input> de texto porque su chrome nativo
   (flecha, fondo cerrado) depende más del tema del SO. */
#cpModalOverlay input, #cpModalOverlay textarea, #cpModalOverlay select,
#cpDetailOverlay input, #cpDetailOverlay textarea, #cpDetailOverlay select,
#cpHistoryOverlay input, #cpHistoryOverlay textarea, #cpHistoryOverlay select {
  color: #101828 !important; caret-color: #101828 !important; color-scheme: light;
}
.cp-modal-field input:focus { border-color: #3B82F6; }
.cp-modal-actions { display: flex; justify-content: center; gap: 8px; margin-top: auto; padding-top: 12px; }
.cp-modal-wide { width: 30cm; }

.cp-publish-rows { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; margin-bottom: 8px; flex: 1; }
.cp-publish-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(15,23,42,.06);
  font-size: 12px; color: inherit;
}
.cp-publish-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-publish-row-chan { color: inherit; opacity: .7; font-size: 11px; width: 90px; flex-shrink: 0; }
.cp-publish-row-status { font-weight: 700; text-align: right; flex-shrink: 0; min-width: 130px; }
.cp-publish-row-status[data-status="pending"] { color: #667085; font-weight: 400; }
.cp-publish-row-status[data-status="ok"] { color: #16a34a; }
.cp-publish-row-status[data-status="ok"] a { color: #16a34a; }
.cp-publish-row-status[data-status="skip"] { color: #667085; }
.cp-publish-row-status[data-status="error"] { color: #dc2626; white-space: normal; text-align: left; }

/* ── Categoría ML: autocompletar + atributos obligatorios ── */
.cp-category-row { display: flex; gap: 6px; }
.cp-category-row input { flex: 1; }
.cp-btn-ai {
  background: linear-gradient(135deg,#8248ff,#22d3ee); color: #fff; border: none; border-radius: 8px;
  padding: 9px 12px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.cp-btn-ai:disabled { opacity: .6; cursor: not-allowed; }
.cp-category-name { font-size: 11.5px; color: inherit; opacity: .8; margin-top: 5px; min-height: 14px; line-height: 1.5; }
.cp-category-query { font-size: 10.5px; font-style: italic; opacity: .75; }
.cp-attrs-title { font-size: 11.5px; font-weight: 700; color: inherit; margin: 14px 0 8px; }
.cp-attrs-loading { font-size: 12px; color: inherit; opacity: .8; padding: 6px 0; }
.cp-auto-tag {
  display: inline-block; background: rgba(34,197,94,.12); color: #16a34a; border-radius: 5px;
  padding: 1px 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; vertical-align: middle;
}
#cpModalOverlay select {
  background: #F6F8FB; border: 1px solid rgba(15,23,42,.08); border-radius: 8px; padding: 9px 10px;
  font-size: 12.5px; outline: none; width: 100%;
}
[data-cp-attr].cp-attr-missing { border-color: #dc2626 !important; }
.cp-attr-hint { font-size: 10px; font-weight: 400; opacity: .75; line-height: 1.4; }
.cp-opt-tag { background: rgba(102,112,133,.15) !important; color: #667085 !important; }

.cp-modal-note { font-size: 11px; opacity: .8; margin-bottom: 8px; line-height: 1.5; }
.cp-btn-manual-cat {
  background: none; border: none; color: inherit; opacity: .85; text-decoration: underline;
  font-size: 11px; font-weight: 600; cursor: pointer; padding: 6px 0 0; text-align: left;
}
.cp-category-picker { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cp-category-level {
  background: #F6F8FB; border: 1px solid rgba(15,23,42,.08); border-radius: 8px; padding: 9px 10px;
  font-size: 12.5px; outline: none; width: 100%; color: #101828 !important;
}
.cp-modal .cp-btn { border: none; border-radius: 9px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cp-modal .cp-btn-primary { background: #3B82F6; color: #fff; }
.cp-modal .cp-btn-ghost { background: #F6F8FB; color: #101828; border: 1px solid rgba(15,23,42,.08); }

/* ── Sync Stock y Precios — botones de header + barra de progreso ── */
#page-analista_productos .cp-detail-hdr { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
#page-analista_productos .cp-detail-hdr-actions { display: flex; gap: 8px; align-items: center; }
#page-analista_productos .cp-sync-meta { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#page-analista_productos .cp-sync-last { font-size: 10px; color: var(--ap-text2); white-space: nowrap; }
#page-analista_productos .cp-sync-progress {
  display: flex; align-items: center; gap: 10px; background: var(--ap-card); border: 1px solid var(--ap-border);
  border-radius: var(--ap-r-sm); padding: 4px; margin-bottom: 14px; position: relative; overflow: hidden; height: 30px;
}
#page-analista_productos .cp-sync-bar-fill { position: absolute; inset: 0; background: color-mix(in srgb, var(--ap-blue) 22%, transparent); transition: width 300ms var(--ap-ease); border-radius: var(--ap-r-sm); }
#page-analista_productos .cp-sync-bar-label { position: relative; z-index: 1; font-size: 11.5px; color: var(--ap-text); padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Modal "Historial de cambios" — animado e interactivo, sin libs
   externas (barras/números en CSS + JS puro). ── */
.cp-history-modal { height: 18cm; }
.cp-history-title { font-size: 14.5px; font-weight: 800; }
.cp-history-body { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1; }
.cp-ai-banner {
  display: flex; gap: 12px; align-items: flex-start; background: rgba(15,23,42,.05); border-radius: 14px; padding: 14px 16px;
  animation: cp-fade-in .4s ease both;
}
.cp-ai-banner-icon { font-size: 22px; }
.cp-ai-banner-text { font-size: 12.5px; line-height: 1.5; white-space: pre-line; }
.cp-history-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.cp-history-stat { background: rgba(15,23,42,.04); border-radius: 12px; padding: 12px; text-align: center; }
.cp-history-stat-num { font-size: 24px; font-weight: 800; }
.cp-history-stat-warn .cp-history-stat-num { color: #dc2626; }
.cp-history-stat-label { font-size: 10.5px; opacity: .75; margin-top: 2px; }
.cp-history-chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 8px 4px; border-bottom: 1px solid rgba(15,23,42,.1); }
.cp-history-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; font-size: 10px; }
.cp-history-bar { width: 60%; min-width: 8px; background: linear-gradient(180deg, #3B82F6, #60a5fa); border-radius: 4px 4px 0 0; transition: height 700ms cubic-bezier(.22,1,.36,1); }
.cp-history-bar-col small { opacity: .6; font-size: 9px; }
.cp-history-list { display: flex; flex-direction: column; gap: 2px; }
.cp-history-row { display: grid; grid-template-columns: 1.6fr .8fr 1fr 1.1fr .7fr; gap: 8px; align-items: center; padding: 7px 4px; border-bottom: 1px solid rgba(15,23,42,.06); font-size: 11px; }
.cp-history-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-history-row-field { opacity: .8; }
.cp-history-row-change { font-weight: 700; }
.cp-change-up { color: #dc2626; }
.cp-change-down { color: #16a34a; }
.cp-history-row-date { opacity: .65; font-size: 10px; }
.cp-history-row-source { opacity: .55; font-size: 10px; text-transform: capitalize; }
@keyframes cp-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Aplicar IVA%/Markup% a todos los productos de la lista de una ── */
#page-analista_productos .cp-bulk-pct-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
#page-analista_productos .cp-bulk-pct-field { font-size: 11px; color: var(--ap-text2); display: flex; flex-direction: column; gap: 4px; }
#page-analista_productos .cp-bulk-pct-input { display: flex; gap: 6px; }
#page-analista_productos .cp-bulk-pct-input input {
  width: 70px; padding: 7px 10px; border-radius: var(--ap-r-sm); border: 1px solid var(--ap-border);
  background: var(--ap-card); color: var(--ap-text); font-size: 12.5px;
}

/* ── Ganancia neta editable ── */
#page-analista_productos .cp-ganancia-neta-wrap { display: flex; align-items: center; gap: 6px; }
#page-analista_productos .cp-ganancia-input { width: 90px; font-weight: 700; color: var(--ap-green) !important; }
#page-analista_productos .cp-rows-table tbody tr { cursor: pointer; }
#page-analista_productos .cp-rows-table tbody tr:hover { background: rgba(15,23,42,.03); }

/* ── Modal de detalle de producto — galería con flechas + info real +
   variantes + precio/IVA/markup/envío editables + stock en vivo.
   Reusa .cp-modal/.cp-modal-wide (mismo header con selector de color +
   minimizar que el resto de los modales de este módulo). ── */
.cp-detail-modal { height: 20cm; }
.cp-detail-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.08); color: inherit; font-size: 14px; cursor: pointer;
}
.cp-detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 100%; overflow: hidden; position: relative; }
.cp-detail-gallery { display: flex; flex-direction: column; gap: 10px; align-items: center; overflow: hidden; }
.cp-detail-gallery-main {
  position: relative; width: 100%; height: 85%; background: rgba(0,0,0,.04); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cp-detail-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.cp-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.35); color: #fff; font-size: 20px; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.cp-gallery-arrow:hover { background: rgba(0,0,0,.55); }
.cp-gallery-prev { left: 8px; }
.cp-gallery-next { right: 8px; }

/* Tira de miniaturas reales debajo de la foto de portada — mismo patrón
   que la ficha real de los proveedores (portada grande + slider de
   cuadrados clickeables abajo), pedido explícito para reemplazar los
   puntos genéricos que no dejaban ver cuántas/cuáles fotos había. */
.cp-detail-thumbs { display: flex; gap: 8px; width: 100%; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.cp-detail-thumb {
  flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border-radius: 9px; cursor: pointer;
  border: 2px solid transparent; background: rgba(0,0,0,.04); overflow: hidden; transition: border-color 150ms, opacity 150ms;
}
.cp-detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-detail-thumb:hover { opacity: .85; }
.cp-detail-thumb.active { border-color: var(--cp-modal-border, #3B82F6); }

/* Info agrupada en bloques con separador (identidad / precio+variante /
   cálculo+totales / stock+publicar) — antes todo era un único flujo de
   gap:6px sin secciones, difícil de escanear. Cada bloque tiene su
   propio ritmo vertical; la tipografía dentro de cada uno ahora tiene
   jerarquía real (título > precio > resto) en vez de que la marca
   (22px) le ganara en tamaño al título del producto (16px). */
.cp-detail-info { display: flex; flex-direction: column; gap: 0; overflow-y: auto; padding-right: 4px; }
.cp-detail-block { padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.cp-detail-block:first-child { padding-top: 0; }
.cp-detail-block-last { border-bottom: none; padding-bottom: 0; }
.cp-detail-cat {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--cp-modal-border, #3B82F6); margin-bottom: 8px;
}
.cp-detail-cat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cp-modal-border, #3B82F6); flex-shrink: 0; }
.cp-detail-title { font-size: 22px; font-weight: 800; line-height: 1.22; letter-spacing: -.015em; margin-bottom: 8px; }
.cp-detail-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-detail-sku { font-size: 10.5px; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; opacity: .55; letter-spacing: .01em; }
.cp-detail-brand {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--cp-modal-border, #101828); background: color-mix(in srgb, var(--cp-modal-border, #3B82F6) 12%, transparent);
  padding: 3px 8px; border-radius: 5px;
}
.cp-detail-desc { font-size: 13px; line-height: 1.65; opacity: .75; margin-top: 10px; }
.cp-detail-price-block { display: flex; flex-direction: column; gap: 10px; }
.cp-detail-price { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--cp-modal-text, #101828); }
.cp-detail-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; opacity: .85; }
.cp-detail-field select {
  padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); background: #fff; color: #101828; font-size: 12.5px;
  transition: border-color .15s, box-shadow .15s;
}
/* CTA visual mientras no se eligió variante — pedido explícito
   22/08/2026 ("que se vea como una llamada a la acción real"). Se saca
   sola apenas el usuario elige una opción real (ver cpWireDetailModal). */
.cp-variant-select-cta {
  border: 1.5px solid #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
  font-weight: 700;
}
.cp-detail-variant-info {
  display: flex; align-items: center; gap: 10px; margin-top: 2px;
  font-size: 12.5px; font-weight: 700;
}
.cp-variant-info-price { color: #101828; }
.cp-variant-info-stock { padding: 3px 9px; border-radius: 999px; font-size: 11px; }
.cp-variant-stock-ok   { background: rgba(16,185,129,.12); color: #047857; }
.cp-variant-stock-low  { background: rgba(245,158,11,.14); color: #b45309; }
.cp-variant-stock-out  { background: rgba(239,68,68,.12);  color: #b91c1c; }
.cp-variant-info-pending { font-size: 11.5px; font-weight: 600; opacity: .65; }
.cp-detail-calc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cp-detail-calc-row label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .55; }
.cp-detail-calc-row input {
  padding: 7px 8px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); background: #fff; color: #101828; font-size: 12.5px; text-align: center;
}
.cp-detail-totals { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cp-detail-total-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; opacity: .7; }
.cp-detail-total-row b { font-size: 14px; font-weight: 800; opacity: 1; }
.cp-detail-total-row-highlight { opacity: 1; }
.cp-detail-total-row-highlight span { font-weight: 700; opacity: .85; }
.cp-detail-total-row-highlight b { font-size: 19px; color: #16a34a; }
/* Los .cp-stock-* originales están escopeados a #page-analista_productos
   (viven en analista-productos.css) — este modal cuelga directo de
   document.body, así que esas reglas nunca llegan acá y el texto de
   stock quedaba con el color por defecto (poco legible). Colores fijos
   acá, tipografía propia más grande/en negrita, como en la ficha real
   del sitio ("🟢 Stock: N unidades disponibles..."). */
.cp-detail-stock {
  margin-top: 4px; font-size: 13.5px; font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700; letter-spacing: .01em;
}
.cp-detail-stock .cp-stock-ok { color: #15803d; }
.cp-detail-stock .cp-stock-out { color: #dc2626; }
.cp-detail-stock .cp-stock-unsynced { color: #6b7280; font-style: normal; font-weight: 600; }
.cp-detail-publish-btn { margin-top: 8px; width: 100%; justify-content: center; padding: 11px; font-size: 13px; }

@media (max-width: 700px) {
  .cp-detail-layout { grid-template-columns: 1fr; }
  .cp-detail-modal { height: 90vh; }
}