/* Caja de compra de la ficha al estilo Pekata (28/10/2026, Iván: «que no pegue saltos
   cuando va eligiendo o entra en un producto»). La pinta index.php con su tamaño final y
   js/compra.js solo cambia números: todo lo que puede cambiar tiene alto fijo o reservado.
   Solo aplica con body.compra (ficha con precio del servidor). */

/* Lo que la caja sustituye: precio «desde», tabla de tramos, resumen repetido y segundo
   botón de añadir. Siguen en la página para app.js; no se ven. */
body.compra .calc-v2__result-head,
body.compra #price-start,
body.compra #price-with-tax,
body.compra #calc-source,
body.compra #calc-nudge,
body.compra #calc-info-body,
body.compra #price-tiers,
body.compra .modal__quick-cta,
body.compra .product-order-summary > .order-selection,
body.compra .product-order-summary > .sello-resenas,
body.compra #calc-entrega,
body.compra #calc-acciones,
body.compra #calc-buy-note,
body.compra #calc-trustrow,
body.compra #calc-qty-row,
body.compra .calc-v2__tune > .calc-v2__tune-hint { display: none !important; }

/* Hueco de las miniaturas desde el primer momento (llegan con la API). */
body.compra #m-thumbs:empty { min-height: 56px; }

/* ── Caja ── */
body.compra #calc-result {
  display: block;
  padding: 20px 20px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg-soft);
}
.compra__eti {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.compra__eti span { margin-left: 4px; letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--ink); }

/* Tramos: seis casillas iguales, siempre en su sitio */
.compra__tramos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.compra__tramo {
  position: relative;
  height: 58px;
  padding: 0 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.compra__tramo strong { font-size: 16px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.compra__tramo span { font-size: 12px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.compra__tramo:hover:not(:disabled) { border-color: var(--ink); }
.compra__tramo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compra__tramo.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.compra__tramo.is-on span { color: rgba(255, 255, 255, .72); }
.compra__tramo:disabled { opacity: .45; cursor: not-allowed; }
/* Camión en los tramos con envío gratis, como Pekata */
.compra__tramo.con-envio::after {
  content: ''; position: absolute; top: 5px; right: 6px; width: 15px; height: 11px;
  background: currentColor; opacity: .5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M1 2h13v11H1zM14 6h5l4 4v3h-9z'/%3E%3Ccircle cx='6' cy='15' r='2' fill='white'/%3E%3Ccircle cx='18' cy='15' r='2' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M1 2h13v11H1zM14 6h5l4 4v3h-9z'/%3E%3Ccircle cx='6' cy='15' r='2' fill='white'/%3E%3Ccircle cx='18' cy='15' r='2' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Otra cantidad: el número se escribe dentro de la misma casilla */
.compra__tramo--otra { cursor: text; }
.compra__otra-txt { font-size: 13px; font-weight: 600; line-height: 1.15; text-align: center; }
.compra__tramo--otra input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0 6px; border: 0; border-radius: 10px; background: transparent;
  font: 700 16px var(--font); color: inherit; text-align: center; font-variant-numeric: tabular-nums;
  opacity: 0; -moz-appearance: textfield; appearance: textfield;
}
.compra__tramo--otra input::-webkit-inner-spin-button,
.compra__tramo--otra input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.compra__tramo--otra input::placeholder { color: currentColor; opacity: .5; font-weight: 500; }
.compra__tramo--otra input:focus { outline: none; }
.compra__tramo--otra:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--bg-elev); color: var(--ink); }
.compra__tramo--otra:focus-within input,
.compra__tramo--otra.is-on input { opacity: 1; }
.compra__tramo--otra:focus-within .compra__otra-txt,
.compra__tramo--otra.is-on .compra__otra-txt { visibility: hidden; }

/* Precio por unidad y total */
.compra__precio {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  min-height: 76px;
  margin: 18px 0 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}
/* styles.css lleva [hidden] { display: none !important }: aquí se gana con !important. app.js
   oculta precio y botones un instante al arrancar; en la caja se quedan puestos. */
body.compra .compra__precio[hidden] { display: flex !important; }
.compra__unidad, .compra__total { margin: 0; display: flex; flex-direction: column; }
.compra__unidad strong { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compra__unidad > span { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.compra__total { align-items: flex-end; text-align: right; }
.compra__total > span:first-child { font-size: 13px; color: var(--ink-soft); }
.compra__total strong { font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compra__iva { font-size: 12px; color: var(--ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Qué incluye, envío y entrega: alto fijo por línea */
.compra__lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.compra__li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.compra__li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 17px; height: 17px;
  background: var(--ink-soft);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.compra__li--incluye { min-height: calc(1.45em * 2); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.compra__li--envio { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M1 5h14v11H1zM15 9h5l3 3.5V16h-8z'/%3E%3Ccircle cx='6' cy='18' r='2' fill='white'/%3E%3Ccircle cx='18' cy='18' r='2' fill='white'/%3E%3C/svg%3E"); }
.compra__li--entrega { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.compra__li--envio, .compra__li--entrega { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compra__li--entrega .entrega__nota { display: none; }
.compra__cambiar {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.compra__cambiar:hover { color: var(--ink-soft); }
body.compra #calc-stock-aviso { margin: -6px 0 14px; }

/* Color: una fila que nunca cambia de alto (si hay muchos, se desliza) */
.compra__color { min-height: 76px; margin: 0 0 16px; }
body.compra #m-colors-section { display: block; margin: 0; padding: 0; border: 0; background: none; }
body.compra #m-colors-section[hidden] { display: block !important; visibility: hidden; }
body.compra #m-colors-section .colors-strip__label,
body.compra #m-colors-note { display: none; }
body.compra #m-colors.swatches-compact,
body.compra .compra__muestras-ssr {
  display: flex; flex-wrap: nowrap; gap: 10px;
  margin: 0 -4px; padding: 4px; overflow-x: auto; scrollbar-width: none;
}
body.compra #m-colors.swatches-compact::-webkit-scrollbar,
body.compra .compra__muestras-ssr::-webkit-scrollbar { display: none; }
body.compra #m-colors .swatch-compact,
body.compra .compra__muestras-ssr .swatch-compact {
  flex: 0 0 36px; width: 36px; min-width: 36px; padding: 0; cursor: pointer;
}
body.compra #m-colors .swatch-compact[data-more] { display: inline-flex; }
body.compra #m-colors .swatch-compact__square,
body.compra .compra__muestras-ssr .swatch-compact__square {
  width: 36px; height: 36px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(11, 12, 15, .12);
}
body.compra #m-colors .swatch-compact.is-selected .swatch-compact__square {
  box-shadow: inset 0 0 0 1px rgba(11, 12, 15, .12), 0 0 0 2px var(--bg-soft), 0 0 0 4px var(--ink);
}
body.compra #m-colors .swatch-compact__code { display: none; }
body.compra #m-colors .swatch__stock { display: none; }
body.compra #m-colors .swatch__stock--out { display: block; position: absolute; inset: 0; border-radius: 50%; font-size: 0; background: linear-gradient(135deg, transparent 47%, rgba(11,12,15,.55) 47%, rgba(11,12,15,.55) 53%, transparent 53%); }
body.compra #m-colors .m-colors-more { display: none; }

/* Botones: alto fijo, nunca desaparecen (se apagan) */
body.compra #calc-quick,
body.compra #calc-quick[hidden] { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 0; }
body.compra #quick-buy,
body.compra #quick-buy[hidden] {
  display: flex !important; align-items: center; justify-content: center;
  height: 54px; min-height: 0; padding: 0 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 15px;
}
body.compra #quick-montaje,
body.compra #quick-montaje[hidden] { display: inline-flex !important; height: 54px; min-height: 0; padding: 0 22px; white-space: nowrap; }
body.compra #calc-quick .calc-quick__pdf,
body.compra #calc-quick .acciones__garantia { grid-column: 1 / -1; }
body.compra #calc-quick .calc-quick__pdf[hidden] { display: inline-flex !important; }
body.compra #calc-quick .acciones__garantia { margin: 0; font-size: 12.5px; color: var(--ink-soft); }

/* ── Panel de zona y técnica (como el configurador de Pekata: encima, sin mover la ficha) ── */
body.compra .calc-v2__tune {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1300;
  width: min(560px, 100%); margin: 0; padding: 0 22px;
  display: flex; flex-direction: column;
  background: var(--bg); box-shadow: var(--shadow-lg);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(104%); visibility: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s;
}
body.compra.compra-panel .calc-v2__tune { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.compra-velo {
  position: fixed; inset: 0; z-index: 1299;
  background: rgba(11, 12, 15, .38); opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
body.compra-panel .compra-velo { opacity: 1; pointer-events: auto; }
.compra-panel__cab {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 -22px 6px; padding: 18px 22px 14px;
  background: var(--bg); border-bottom: 1px solid var(--line-strong);
  font-size: 18px;
}
.compra-panel__cerrar {
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: var(--bg-soft); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer;
}
.compra-panel__cerrar:hover { background: var(--line-strong); }
.compra-panel__pie {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: auto -22px 0; padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line-strong);
}
.compra-panel__total strong { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.compra-panel__total small { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
body.compra .compra-panel__listo { width: auto; min-width: 120px; height: 48px; padding: 0 28px; justify-content: center; }

/* ── Móvil ── */
@media (max-width: 640px) {
  body.compra #calc-result { padding: 16px 14px 14px; }
  .compra__tramos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compra__tramo { height: 54px; }
  .compra__unidad strong { font-size: 32px; }
  .compra__total strong { font-size: 22px; }
  .compra__li--incluye { min-height: calc(1.45em * 3); }
  body.compra #calc-quick,
  body.compra #calc-quick[hidden] { grid-template-columns: 1fr; }
  body.compra #quick-montaje { width: 100%; justify-content: center; }
  body.compra .calc-v2__tune {
    top: auto; width: 100%; height: 90vh; height: 90dvh; border-radius: 16px 16px 0 0;
    transform: translateY(104%);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.compra .calc-v2__tune, .compra-velo { transition: none; }
}

/* Qué incluye: app.js lo oculta un instante al recalcular; el texto se queda. */
body.compra #price-incluye[hidden] { display: inline !important; }

/* Debajo de la caja: lo que llega después entra fundido, sin empujar nada de arriba. Las
   herramientas de compartir y comparar se quedan fuera, como en Pekata. */
body.compra .product-order-summary > .order-share-tools,
body.compra #calc-mas { display: none !important; }
@keyframes compra-entra { from { opacity: 0; } to { opacity: 1; } }
body.compra #product-choice,
body.compra #product-combina,
body.compra #tech-compare { animation: compra-entra .35s ease both; }

/* Mientras app.js coloca la ficha marca «selección pendiente» y styles.css oculta precio,
   total y botones (Kirpal: 11 ms sin caja a los 300 ms). En la caja se quedan puestos con el
   precio del servidor; el botón de añadir sigue apagado hasta que la ficha está lista. */
body.compra #calc-block[data-selection-pending] #calc-open { display: flex !important; }
body.compra #calc-block[data-selection-pending] #calc-quick { display: grid !important; }
body.compra #calc-block[data-selection-pending] #price-incluye { display: inline !important; }
body.compra #calc-block[data-selection-pending] #btn-propuesta { display: inline-flex !important; }

/* El panel vive dentro de la ficha, que es un plano propio (z-index 1) por debajo de la
   cabecera (65) y del WhatsApp (90): con el panel abierto la ficha sube por encima. */
body.compra-panel-arriba #modal-product .modal__card { z-index: 1400; }
/* app.js añade los pasos al final del panel: la cabecera y el pie se colocan por orden. */
.compra-panel__cab { order: -1; }
.compra-panel__pie { order: 99; }
/* styles.css quita el relleno del bloque de pasos en la ficha: aquí manda el del panel. */
body.compra #calc-block .calc-v2__tune { padding: 0 22px; }

/* Precio y total en negro (styles.css los pinta en gris dentro de la calculadora). */
body.compra #calc-result .compra__unidad strong,
body.compra #calc-result .compra__total strong,
body.compra #calc-result #price-unit,
body.compra #calc-result #price-total { color: var(--ink); }
/* Botón de añadir: el texto cabe; si no, se corta por el final, nunca por los lados. */
body.compra #quick-buy { display: block !important; line-height: 54px; text-align: center; }
/* Miniaturas: el hueco cuenta el relleno que lleva la galería en móvil. */
body.compra #m-thumbs:empty { box-sizing: content-box; }
@media (max-width: 640px) {
  .compra__li--entrega { white-space: normal; min-height: calc(1.45em * 2); }
}

/* La caja se adapta a su propio ancho, no al de la pantalla: entre 641 y 1.100 px la columna
   de la ficha es estrecha y seis tramos en fila se pisaban con el camión (28/10/2026). */
body.compra #calc-result { container-type: inline-size; }
@container (max-width: 520px) {
  .compra__tramos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.compra #calc-quick,
  body.compra #calc-quick[hidden] { grid-template-columns: 1fr; }
  body.compra #quick-montaje { width: 100%; justify-content: center; }
  .compra__li--incluye { min-height: calc(1.45em * 3); }
  .compra__li--entrega { white-space: normal; min-height: calc(1.45em * 2); }
}

/* ── Acabados con su precio, como Pekata (28/10/2026) ──
   Cada zona lleva su hueco de precio (+€/ud o Incluida), «Sin personalizar» con lo que
   resta, y la técnica de la zona en lista. Los huecos tienen alto fijo desde que nacen. */
body:not(.compra) .acab-sin, body:not(.compra) .acab-tec { display: none !important; }
body.compra #calc-area-info { display: none; }
body.compra .area-thumb__delta {
  display: block; min-height: 1.4em; margin-top: 4px;
  font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.compra .area-thumb.is-active .area-thumb__delta { color: #0a7a4b; }
.acab-sin, .acab-tec__op {
  width: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 12px;
  margin: 0; padding: 14px 16px; text-align: left;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-elev);
  font: inherit; color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.acab-sin { margin: 12px 0 0; }
.acab-sin:hover, .acab-tec__op:hover:not(:disabled) { border-color: var(--ink); }
.acab-sin.is-on, .acab-tec__op.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.acab-tec__op:disabled { opacity: .5; cursor: not-allowed; }
.acab-tec__radio {
  width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--ink-mute); background: var(--bg-elev);
}
.is-on > .acab-tec__radio { border: 5px solid var(--ink); }
.acab-tec__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acab-tec__nom { font-size: 15px; font-weight: 600; line-height: 1.35; }
.acab-tec__reco {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--bg-soft);
  font-size: 12px; font-style: normal; font-weight: 500; color: var(--ink-soft); vertical-align: 1px;
}
.acab-sin__sub, .acab-tec__det { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
/* La línea de detalle de la elegida reserva dos renglones: la fecha llega después. */
.acab-tec__det { min-height: calc(1.45em * 2); }
.acab-tec__precio {
  min-width: 112px; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.acab-tec__precio.is-incluida { color: #0a7a4b; }
.acab-tec { margin-top: 22px; }
.acab-tec[hidden] { display: none; }
.acab-tec__tit {
  margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute);
}
.acab-tec__tit span { letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--ink); }
.acab-tec__lista { display: grid; gap: 8px; }
.acab-tec__nota { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 640px) {
  .acab-sin, .acab-tec__op { padding: 12px 12px; gap: 10px; }
  .acab-tec__precio { min-width: 96px; font-size: 13px; }
}
/* En el panel ya está «Listo» abajo: el botón de pasar de paso sobra. */
body.compra .calc-v2__tune .paso__siguiente { display: none; }
/* «Precio por técnica» en la franja de abajo, a todo el ancho (28/10/2026). */
.product-about__tcomp { grid-column: 1 / -1; margin: 0; }
body.compra #tech-compare { animation: none; }
/* «Combina bien con» llega a los 0,7 s dentro del resumen: los logos de clientes van antes
   y lo que entra tarde queda al final, sin empujar nada a la vista (CLS 0,005, 28/10/2026). */
body.compra #calc-block > .calc__trust { order: 0; }
body.compra #calc-block > .product-order-summary { order: 7; }
@media (min-width: 901px) {
  body.compra #modal-product #calc-block > .calc__trust { grid-row: 2; }
  body.compra #modal-product #calc-block > .product-order-summary { grid-row: 3; }
}
/* Miniaturas en una sola fila que se desliza: con 6 fotos saltaban a dos filas en móvil y la
   caja bajaba 64 px al llegar (Kirpal a 375 px, CLS 0,017, 28/10/2026). */
body.compra #m-thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.compra #m-thumbs::-webkit-scrollbar { display: none; }
body.compra #m-thumbs > * { flex: 0 0 auto; }