/* Precio visible del pop-up de Batuta (js/batutaPrecio.js). Mismas variables que Nagare v2; 13 px como mínimo; el color solo como punto. */
.bcp-precio { margin: 10px 0 4px; }
.bcp-linea { margin: 0; font-size: 14px; color: var(--tx2, #51635a); font-variant-numeric: tabular-nums; }
.bcp-linea b { color: var(--tx, #15221c); }
.bcp-unit { font-size: 16px; }
.bcp-avisos { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.bcp-aviso { color: var(--amb, #c98200); font-weight: 600; }
.bcp-aviso::before { content: "▲ "; }
.bcp-nota { color: var(--tx3, #6f8077); font-size: 13px; }
.bcp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.bcp-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line, #e3e8e5); border-radius: 999px; padding: 2px 10px; font-size: 13px; color: var(--tx2, #51635a); background: var(--panel2, #f8faf9); }
.bcp-p { width: 8px; height: 8px; border-radius: 50%; background: var(--tx3, #8a998f); flex: none; }
.bcp-verde .bcp-p { background: var(--ok, #1d6b4f); } .bcp-ambar .bcp-p { background: var(--amb, #c98200); } .bcp-rojo .bcp-p { background: var(--red, #d6322e); }
.bcp-costos { margin: 6px 0; font-size: 13px; color: var(--tx2, #51635a); }
.bcp-costos summary { cursor: pointer; width: fit-content; padding: 2px 0; }
.bcp-costos summary small { color: var(--tx3, #6f8077); }
.bcp-costos table { margin: 4px 0 0 18px; border-collapse: collapse; }
.bcp-costos th { text-align: left; font-weight: 500; padding: 1px 16px 1px 0; color: var(--tx3, #6f8077); }
.bcp-costos td { text-align: right; color: var(--tx, #15221c); font-variant-numeric: tabular-nums; }
.bcp-envio { margin: 4px 0; font-size: 13px; color: var(--tx2, #51635a); }
.bcp-envio small { color: var(--tx3, #6f8077); }
.bcp-mas { margin: 10px 0 4px; border-top: 1px solid var(--line, #e3e8e5); padding-top: 8px; font-size: 13px; }
.bcp-mas > summary { cursor: pointer; color: var(--tx2, #51635a); font-weight: 600; width: fit-content; }
.bcp-mas-c { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.bcp-campo { display: flex; flex-direction: column; gap: 3px; color: var(--tx2, #51635a); }
.bcp-campo input, .bcp-campo select, .bcp-campo textarea { border: 1px solid var(--line2, #d3dbd7); border-radius: 8px; padding: 5px 9px; font: inherit; background: var(--panel, #fff); color: var(--tx, #15221c); max-width: 320px; }
.bcp-campo small { color: var(--tx3, #6f8077); }
.bcp-mini { color: var(--tx2, #51635a); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---- acabado del pop-up (v2): «Abrir el chat» y la fila Fecha / Envío ---- */
#bcPopup a.bc-chat { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--line, #e3e8e5); border-radius: 999px; background: var(--panel2, #f8faf9); color: var(--g7, #1d6b4f); font-size: 13px; font-weight: 600; text-decoration: none; }
#bcPopup a.bc-chat:hover, #bcPopup a.bc-chat:focus-visible { border-color: var(--g7, #1d6b4f); }
body.dark-mode #bcPopup a.bc-chat { color: var(--ok, #5fd0a0); }
#bcPopup .bc-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 8px 0; }
#bcPopup .bc-par { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ---- «Más opciones» (PR 8) ---- */
.bcp-par { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bcp-par input[type=number] { width: 96px; }
.bcp-chips-sel { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bcp-sel, .bcp-sec { border: 1px solid var(--line2, #d3dbd7); background: var(--panel, #fff); color: var(--tx, #15221c); border-radius: 8px; padding: 4px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.bcp-sel.bcp-on { background: var(--g9, #0f3d2e); border-color: var(--g9, #0f3d2e); color: #fff; }
.bcp-sec[disabled] { opacity: .5; cursor: not-allowed; }
.bcp-subir { align-self: flex-start; display: inline-block; }
.bcp-imps { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bcp-imp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bcp-imp input, .bcp-imp select { width: 150px; }
.bcp-x { border: 0; background: none; color: var(--tx3, #6f8077); font-size: 18px; line-height: 1; cursor: pointer; }
.bcp-tramos { display: flex; flex-direction: column; gap: 6px; }
.bcp-tramo { display: flex; align-items: center; gap: 10px; }
.bcp-tramo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx2, #51635a); }
.bcp-tramo input { width: 150px; }
#bcPopup .bc-dup { margin-left: 6px; font-size: 13px; color: var(--tx3, #6f8077); border: 0; background: none; padding: 0; text-decoration: none; cursor: pointer; }
#bcPopup .bc-dup:hover { color: var(--g7, #1d6b4f); text-decoration: underline; }

/* ---- PR 9: abrir en el editor y otra versión ---- */
#bcPopup .bc-editor { margin-left: 4px; display: inline-flex; align-items: center; border: 1px solid var(--line, #e3e8e5); border-radius: 999px; padding: 2px 10px; background: var(--panel2, #f8faf9); color: var(--g7, #1d6b4f); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
#bcPopup .bc-editor + .bc-x { margin-left: 8px; }
.bc-btn-sec { background: transparent; opacity: .9; }
#bcPopup .bc-modal header .bc-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bcPopup a.bc-chat, #bcPopup .bc-editor { flex: none; white-space: nowrap; }
#bcPopup .bc-modal header { position: relative; padding-right: 48px; }
#bcPopup .bc-modal header .bc-x { position: absolute; top: 10px; right: 14px; margin: 0; }

/* encabezado del boceto: sin foto no se reserva el cuadro (igual que en los chips) */
.bc-modal header .pf-mini:not(:has(img)) { display: none; }
.bc-modal header .pf { gap: 0; }
/* ---- encabezado del pop-up en UNA fila: etapa · Abrir el chat · Abrir en el editor (a la derecha, antes de la ×); el título debajo ---- */
#bcPopup .bc-modal header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#bcPopup .bc-modal header .bc-n { flex: 1 1 auto; }
#bcPopup .bc-modal header h3 { order: 5; flex: 1 0 100%; margin: 0; }
#bcPopup .bc-editor { margin-left: 0; }
#bcPopup .bc-modal header .bc-n { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dark-mode #bcPopup .bc-editor { color: var(--ok, #5fd0a0); }

/* ---- stock corto en la línea (al cargar el producto) ---- */
.bcp-stock { flex: 1 0 100%; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--line, #e3e8e5); border-left: 3px solid var(--amb, #c98200); border-radius: 10px; background: var(--panel2, #f8faf9); color: var(--tx, #15221c); font-size: 13px; }
.bcp-stock-t b { font-weight: 650; }
.bcp-stock-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.bcp-stock-colores { display: flex; flex-wrap: wrap; gap: 6px; }
.bcp-stock-min { flex: 1 0 100%; font-size: 13px; color: var(--tx3, #6f8077); }
.bcp-stock-min::before { content: "▲ "; color: var(--amb, #c98200); }
/* Desglose de la impresión por pieza (caja 🔒) */
.bcp-piezas { margin: 4px 0 6px; } .bcp-piezas caption { text-align: left; font-weight: 700; padding: 2px 0; }
.bcp-piezas .bcp-suma th, .bcp-piezas .bcp-suma td { border-top: 1px solid currentColor; font-weight: 700; }

/* «Preguntar al cliente» (formulario con link / encuesta): vista previa editable */
.bc-pq { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 12px; }
.bc-pq-caja { background: #fff; color: #111827; border-radius: 12px; max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; padding: 16px; }
.bc-pq-caja h3 { margin: 0 0 8px; font-size: 18px; } .bc-pq-caja h3 small { font-weight: 400; color: #6b7280; margin-left: 6px; }
.bc-pq-lbl { display: block; font-size: 13px; font-weight: 700; margin: 8px 0 4px; }
.bc-pq-texto { width: 100%; font: inherit; padding: 8px; border: 1px solid #d1d5db; border-radius: 8px; }
.bc-pq-donde, .bc-pq-aviso { font-size: 13px; color: #374151; margin: 6px 0; } .bc-pq-aviso { background: #fef3c7; padding: 6px 8px; border-radius: 8px; }
.bc-pq-lista { padding-left: 18px; margin: 8px 0; } .bc-pq-lista li { margin-bottom: 8px; }
.bc-pq-ops { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .bc-pq-op { font-size: 13px; background: #f3f4f6; border-radius: 12px; padding: 2px 8px; }
.bc-pq-nota { color: #92400e; } .bc-pq-ok { color: #15803d; } .bc-pq-sin { color: #b91c1c; }
.bc-pq-avisos { font-size: 13px; color: #92400e; padding-left: 18px; } .bc-pq-acc { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* «Sin stock: alternativas para el cliente» */
.bc-alt-caja { max-width: 760px; }
.bc-alt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 8px 0; }
.bc-alt-card { display: flex; gap: 8px; align-items: flex-start; border: 2px solid #e5e7eb; border-radius: 10px; padding: 8px; cursor: pointer; background: #fff; }
.bc-alt-card.bc-alt-sel { border-color: #16a34a; background: #f0fdf4; }
.bc-alt-card.bc-alt-corto { border-color: #f59e0b; }
.bc-alt-card img, .bc-alt-foto { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; background: #f9fafb; flex: none; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.bc-alt-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bc-alt-t small { color: #4b5563; }
.bc-alt-t a { color: inherit; text-decoration: underline; }
.bc-alt-stock { font-weight: 700; color: #166534 !important; } .bc-alt-viejo { color: #b45309 !important; } .bc-alt-adv { color: #b91c1c !important; } .bc-alt-sinweb { font-weight: 400; color: #9ca3af !important; }
.bc-alt-bz { flex-direction: column; cursor: default; border-style: dashed; } .bc-alt-bz input { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; }
.bc-ico-batuta { vertical-align: -4px; width: 20px; height: 20px; }

/* «Que lo haga Batuta» (dónde va el logo) y «¿por qué acá?» */
.bc-batuta-zona, .boceto-batuta-zona { display: inline-flex; align-items: center; gap: 4px; }
.boceto-batuta-zona { border: 1px solid #d1d5db; background: #fff; border-radius: 8px; padding: 4px 10px; cursor: pointer; font: inherit; }
.bc-porque, .boceto-porque-det { display: inline-block; font-size: 13px; color: #4b5563; } .bc-porque summary, .boceto-porque-det summary { cursor: pointer; text-decoration: underline dotted; }

/* Pop-up de Batuta, primer paso: sin stock EN la línea (sin salir del flujo) */
.bc-sinstock { margin: 6px 0; } .bc-espera { display: flex; gap: 6px; align-items: center; padding: 4px 0; } .bc-espera img { flex: none; }
.bc-espera-aplicada { color: #166534; } .bc-espera-sin_stock_elegida, .bc-espera-ninguna { color: #92400e; }
.bcp-batuta { display: inline-flex; align-items: center; gap: 4px; } .bc-preguntar-inline { margin-left: 6px; }
/* «Preguntar al cliente» editable por pregunta (texto, opciones, productos de BZ, quitar) */
.bc-pq-preg { width: 100%; font: inherit; font-weight: 700; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; }
.bc-pq-op-ed { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px 0 0; } .bc-pq-op-bz { background: #e0f2fe; }
.bc-pq-op-in { font: inherit; font-size: 13px; border: 0; background: transparent; padding: 2px 6px; min-width: 60px; width: auto; field-sizing: content; max-width: 260px; }
.bc-pq-x { border: 0; background: transparent; color: #6b7280; cursor: pointer; font-size: 13px; padding: 0 2px; } .bc-pq-x:hover { color: #b91c1c; }
.bc-pq-edacc { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 13px; } .bc-pq-edacc small { color: #6b7280; }
.bc-pq-quitar { color: #b91c1c; } .bc-pq-quitada { color: #6b7280; }
.bc-pq-foco { outline: 2px solid #16a34a; border-radius: 8px; padding: 6px; }
.bc-alt-prev { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; max-height: 55vh; overflow: auto; }
.bc-alt-msg { background: #dcf8c6; border-radius: 10px; padding: 8px 10px; max-width: 420px; } .bc-alt-msg img { width: 100%; max-height: 200px; object-fit: contain; border-radius: 6px; background: #fff; }
.bc-alt-msg pre { white-space: pre-wrap; word-break: break-word; font: inherit; margin: 4px 0 0; }