/* =============================================================================
   Panel lateral "Tu cotización" (panel.js) — todas las páginas.
   Tokens del tema (wooden-panel.css): fuentes, tintas, líneas. Sin radios.
   ============================================================================= */
.wpp { font-family: var(--wp-font-ui, 'Figtree', sans-serif); color: var(--wp-ink-primary, #141414); }

/* Pestaña fija al costado derecho */
.wpp-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 995;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 44px; padding: 16px 0 14px;
  background: var(--wp-cta, #1B1908); color: #fff;
  border: 0; border-right: 0; cursor: pointer;
  box-shadow: -2px 0 12px rgba(20, 20, 20, .18);
  transition: width .2s, background-color .2s;
}
.wpp-tab:hover { width: 50px; background: var(--wp-cta-hover, #626A28); }
.wpp-tab-txt { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.wpp-badge {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: #fff; color: var(--wp-ink-primary, #141414);
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 768px) {
  .wpp-tab { top: auto; bottom: 22px; left: 16px; right: auto; transform: none; width: auto; flex-direction: row; gap: 8px; padding: 12px 16px; box-shadow: 0 4px 16px rgba(20, 20, 20, .22); }
  .wpp-tab:hover { width: auto; }
  .wpp-tab-txt { writing-mode: horizontal-tb; transform: none; letter-spacing: .08em; }
  .wpp-tab svg { display: none; }
  .wpc-calc-abierta .wpp-tab { display: none; }   /* en la calculadora, su propia barra ya lleva "Pedir cotización" */
  .wpp-toast { bottom: 92px; }
}

/* Velo + panel */
.wpp-velo { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 20, 20, .35); opacity: 0; transition: opacity .25s; }
.wpp-velo--abierto { opacity: 1; }
.wpp-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001;
  width: min(460px, 100vw);
  display: flex; flex-direction: column;
  background: var(--wp-bg-primary, #F4EFE8);
  box-shadow: -8px 0 30px rgba(20, 20, 20, .2);
  transform: translateX(100%); transition: transform .25s var(--wp-ease, ease);
}
.wpp-panel--abierto { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .wpp-panel, .wpp-velo { transition: none; } }
.wpp-bloqueo { overflow: hidden; }

.wpp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--wp-line, #E5E3DE); background: #fff; }
.wpp-eyebrow { margin: 0 0 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp-ink-secondary, #5F5C55); }
.wpp-titulo { margin: 0; font-family: var(--wp-font-display, 'DM Sans', sans-serif); font-size: 1.35rem; font-weight: 600; line-height: 1.15; }
.wpp-cerrar { flex: none; width: 36px; height: 36px; border: 1px solid var(--wp-line, #E5E3DE); background: #fff; font-size: 22px; line-height: 1; cursor: pointer; color: var(--wp-ink-primary, #141414); }
.wpp-cerrar:hover { background: var(--wp-bg-primary, #F4EFE8); }
.wpp-cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px 24px; -webkit-overflow-scrolling: touch; }
.wpp-pie { flex: none; padding: 14px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--wp-line, #E5E3DE); background: #fff; display: flex; flex-direction: column; gap: 10px; }

/* Textos */
.wpp-sec { margin: 18px 0 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp-ink-secondary, #5F5C55); }
.wpp-sec:first-child { margin-top: 0; }
.wpp-nota { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--wp-ink-secondary, #5F5C55); }
.wpp-nota strong { color: var(--wp-ink-primary, #141414); }
.wpp-vacio { margin: 0; padding: 22px 16px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--wp-ink-secondary, #5F5C55); border: 1px dashed var(--wp-line, #E5E3DE); background: #fff; }
.wpp-legal { margin: 0; font-size: 12px; color: var(--wp-ink-secondary, #5F5C55); text-align: center; }
.wpp-alerta { margin: 12px 0 0; padding: 10px 12px; background: #FBEFEC; color: #8A3B2E; font-size: 13px; }
.wpp-ajuste { padding: 10px 12px; background: #fff; border-left: 3px solid var(--wp-olivo, #807A60); margin: 0 0 12px; }
.wpp-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--wp-ink-primary, #141414); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wpp-link--btn { display: inline-block; margin: 10px 0 0; }
.wpp-link small { font-weight: 400; color: var(--wp-ink-secondary, #5F5C55); }

/* Lista */
.wpp-lista { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--wp-line, #E5E3DE); }
.wpp-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--wp-line, #E5E3DE); }
.wpp-item:last-child { border-bottom: 0; }
.wpp-item--mini { padding: 9px 12px; align-items: center; }
.wpp-chip { position: relative; flex: none; width: 48px; height: 48px; overflow: hidden; background: var(--wpp-hex, #E6DFD2); }
.wpp-item--mini .wpp-chip { width: 34px; height: 34px; }
.wpp-chip-felt, .wpp-chip-wood { position: absolute; inset: 0; background-size: cover; background-position: center; }
.wpp-chip-wood { -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 9px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 9px); }
.wpp-item-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.3; }
.wpp-item-txt strong { font-weight: 600; }
.wpp-item-sub, .wpp-item-n { font-size: 12.5px; color: var(--wp-ink-secondary, #5F5C55); }
.wpp-quitar { flex: none; width: 28px; height: 28px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--wp-ink-secondary, #5F5C55); cursor: pointer; }
.wpp-quitar:hover { color: #8A3B2E; }
.wpp-step { display: inline-flex; align-items: center; gap: 0; margin-top: 4px; flex-wrap: wrap; }
.wpp-step-et { font-size: 12.5px; color: var(--wp-ink-secondary, #5F5C55); margin: 0 8px 0 0; min-width: 62px; }
.wpp-step input { width: 52px; height: 30px; border: 1px solid var(--wp-line, #E5E3DE); border-left: 0; border-right: 0; text-align: center; font: inherit; font-size: 14px; -moz-appearance: textfield; }
.wpp-step input::-webkit-outer-spin-button, .wpp-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wpp-step button { width: 30px; height: 30px; border: 1px solid var(--wp-line, #E5E3DE); background: #fff; font-size: 16px; cursor: pointer; color: var(--wp-ink-primary, #141414); }
.wpp-step button:hover { background: var(--wp-bg-primary, #F4EFE8); }
.wpp-step .wpp-step-et + button + input + button + .wpp-step-et { margin-left: 8px; }

/* Botones de producto */
.wpp-prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wpp-prod { font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.2; padding: 12px 8px; text-align: center; background: #fff; color: var(--wp-ink-primary, #141414); border: 1px solid var(--wp-ink-primary, #141414); cursor: pointer; transition: background-color .2s, color .2s; }
.wpp-prod:hover, .wpp-prod:focus-visible { background: var(--wp-ink-primary, #141414); color: #fff; outline: none; }

/* Alta de producto: muestras */
.wpp-sws { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wpp-sws--ench { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wpp-sw { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; }
.wpp-sw-chip { display: block; width: 100%; aspect-ratio: 1 / 1; background-size: cover; background-position: center; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--wp-line, #E5E3DE); }
.wpp-sws--ench .wpp-sw-chip { aspect-ratio: 1 / 1.6; }
.wpp-sw--on .wpp-sw-chip { border-color: var(--wp-ink-primary, #141414); box-shadow: 0 0 0 1px var(--wp-ink-primary, #141414); }
.wpp-sw-nombre { font-size: 11px; color: var(--wp-ink-secondary, #5F5C55); text-align: center; line-height: 1.2; }
.wpp-sw--on .wpp-sw-nombre { color: var(--wp-ink-primary, #141414); font-weight: 600; }

/* Formulario */
.wpp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.wpp-campo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.wpp-campo > span { color: var(--wp-ink-secondary, #5F5C55); }
.wpp-campo small { color: var(--wp-ink-secondary, #5F5C55); font-weight: 400; }
.wpp-campo--full { grid-column: 1 / -1; }
.wpp-campo input, .wpp-campo select, .wpp-campo textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--wp-line, #E5E3DE); background: #fff; font: inherit; font-size: 15px; color: var(--wp-ink-primary, #141414); }
.wpp-campo textarea { min-height: 76px; resize: vertical; }
.wpp-campo input:focus, .wpp-campo select:focus, .wpp-campo textarea:focus { outline: 2px solid var(--wp-olivo, #807A60); outline-offset: 1px; }
.wpp-invalido { border-color: #8A3B2E !important; }
.wpp-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.wpp-check input { margin: 3px 0 0; accent-color: var(--wp-ink-primary, #141414); flex: none; }
.wpp-check small { color: var(--wp-ink-secondary, #5F5C55); }
.wpp-consent { font-size: 12px; color: var(--wp-ink-secondary, #5F5C55); }
.wpp-consent a { color: inherit; }
.wpp-adj-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.wpp-adj-lista li { display: flex; align-items: center; gap: 8px; }
.wpp-adj-lista small { color: var(--wp-ink-secondary, #5F5C55); }

/* CTA */
.wpp-cta { display: block; width: 100%; box-sizing: border-box; padding: 15px 18px; text-align: center; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em; background: var(--wp-cta, #1B1908); color: #fff; border: 1px solid var(--wp-cta, #1B1908); cursor: pointer; text-decoration: none; transition: background-color .2s; }
.wpp-cta:hover { background: var(--wp-cta-hover, #626A28); border-color: var(--wp-cta-hover, #626A28); color: #fff; }
.wpp-cta[disabled] { opacity: .6; cursor: default; }

/* Listo */
.wpp-listo { text-align: center; padding: 16px 0; }
.wpp-listo-icono { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--wp-olivo, #807A60); color: #fff; font-size: 28px; line-height: 56px; }
.wpp-listo h3 { margin: 0 0 8px; font-family: var(--wp-font-display, 'DM Sans', sans-serif); font-size: 1.3rem; }
.wpp-listo h3 small { font-size: .7em; color: var(--wp-ink-secondary, #5F5C55); font-weight: 400; }
.wpp-listo p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.wpp-listo .wpp-cta { margin-top: 10px; }

/* Aviso breve al agregar */
.wpp-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); z-index: 1002; padding: 12px 18px; background: var(--wp-ink-primary, #141414); color: #fff; font-size: 14px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: calc(100vw - 32px); }
.wpp-toast--on { opacity: 1; transform: translate(-50%, 0); }

/* Ficha: dos botones (agregar / cotizar con medidas) */
.wp-pdp__ctas .wp-btn + .wp-btn { margin-top: 8px; }