/* CamisetaLab Designer */

/* Fichas de diseño (encargo del propietario, 2026-09-18): las píldoras que
   veníamos usando (chips, pestañas, botones a border-radius:999px, tomadas
   de Bootstrap/Tailwind) "no encajan bien" — Vistaprint, la referencia,
   usa rectángulos redondeados. Un solo lote de variables define el
   vocabulario (radio, borde, relleno de selección) y TODO el diseñador —
   no solo el modo impresión — lo aplica: chips, pestañas, botones,
   campos, tarjetas. Los círculos de verdad (muestras de color, la
   burbuja de ayuda) quedan fuera a propósito. */
:root {
  --pd-radius: 8px;
  --pd-radius-card: 12px;
  --pd-border: #d0d5dd;
  --pd-border-hover: #9aa1ab;
  /* Paleta de marca (encargo del propietario, 2026-09-18): fuera el azul
     estilo Apple (#0071e3/#0077ed/#2997ff) de TODO el diseñador — botones
     primarios en tinta verde-negra, acento en verde-azulado. */
  --pd-primary: #04292a;
  --pd-primary-hover: #0b3b3d;
  --pd-accent: #01696e;
  --pd-accent-hover: #7fc8cc;
  --pd-sel-bg: #e2f0f0;
  --pd-sel-border: var(--pd-accent);
  --pd-text: #1d1d1f;
}

html.pd-lock, html.pd-lock body { overflow: hidden; }

/* Botón lanzador en la ficha de producto */
.pd-launch {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 14px !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  font-weight: 700;
  border-radius: var(--pd-radius) !important;
  background: #1d1d1f !important;
  color: #fff !important;
  border: 0 !important;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pd-launch:hover { transform: translateY(-1px); background: #333336 !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }

.pd-design-summary {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #c7f0d2;
  background: #f0fbf3;
  color: #14532d;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.pd-sum-price { font-weight: 700; }

/* Overlay a pantalla completa */
.pd-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  background: #f5f5f7;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.pd-overlay[hidden] { display: none; }
/* El atributo hidden siempre gana dentro del diseñador (spinner, cajón, contador…). */
.pd-overlay [hidden] { display: none !important; }

.pd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  color: #0B0F19;
  border-bottom: 1px solid #E2E8F0;
  flex: 0 0 auto;
}
.pd-topbar strong { font-size: 16px; }
.pd-topbar-actions { display: flex; align-items: center; gap: 12px; }
.pd-total { font-weight: 700; font-size: 15px; white-space: nowrap; }

.pd-btn {
  border: 0;
  border-radius: var(--pd-radius);
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.pd-btn:hover { transform: scale(1.02); }
.pd-btn-primary { background: var(--pd-primary); color: #fff; }
.pd-btn-primary:hover { background: var(--pd-primary-hover); }

.pd-close {
  background: transparent;
  border: 0;
  color: #aab;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
}
.pd-close:hover { color: #fff; }

/* Cuerpo: lienzo + panel */
.pd-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  flex: 1 1 auto;
  min-height: 0;
}

.pd-canvas-wrap {
  position: relative;
  min-height: 0;
  background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #e7e9ee 70%, #dcdfe6 100%);
}
.pd-canvas-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.pd-hint {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: #86868b;
  pointer-events: none;
  margin: 0;
}

/* Aviso de los puntos calientes (E8): mismo estilo que .pd-hint pero arriba
   —abajo ya vive el permanente de "arrastra para girar"— y desaparece solo,
   por eso no lleva botón de cerrar. */
.pd-hint-hotspot {
  bottom: auto;
  top: 10px;
  background: rgba(255, 255, 255, .88);
  /* E10 P3: píldora → mismo radio que el resto de la UI (encargo QA). */
  border-radius: var(--pd-radius);
  padding: 6px 14px;
  width: fit-content;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

/* ---------- Puntos calientes de zona (E8/E8b) ----------
 * Atajo visual a las mismas zonas que las pestañas/chips: un círculo de
 * 28 px sobre el punto 3D (o sobre la foto, en grabado láser). Encargo del
 * propietario, 2026-09-18: "sería bueno un atajo tipo flecha/punto en vez
 * de depender solo de las píldoras". La etiqueta NO va pegada al punto
 * (encargo del propietario, mismo día, segunda vuelta: "se solapa con el
 * diseño") — vive en una columna fuera de la prenda/foto, unida al punto
 * por una línea fina; layoutCallouts()/makeCalloutSvg()/makeCalloutLine()
 * en designer.js reparten y trazan esa línea, esto solo pone el aspecto. */
.pd-hotspots,
.pd-hotspot-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pd-hotspot-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.pd-hotspot {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.pd-hotspot[hidden] { display: none; }
.pd-hotspot-dot {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--pd-text);
  box-shadow: 0 0 0 1px #fff, 0 3px 10px rgba(0, 0, 0, .28);
  color: var(--pd-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.pd-hotspot:hover .pd-hotspot-dot { transform: scale(1.1); }
.pd-hotspot.has-logo .pd-hotspot-dot {
  background: var(--pd-accent);
  border-color: var(--pd-accent);
  color: #fff;
  font-size: 12px;
}
/* Con logo puesto Y activa, el punto se reduce y no hace falta: ya está
   claro qué zona es —el logo se ve encima— y a ese tamaño solo estorbaba
   la vista previa (encargo del propietario, 2026-09-18, con foto). */
.pd-hotspot.has-logo.is-active .pd-hotspot-dot { width: 18px; height: 18px; }
/* Halo pulsante en la zona activa: distingue "aquí estás" de "aquí puedes ir". */
.pd-hotspot.is-active .pd-hotspot-dot { border-color: var(--pd-accent); }
.pd-hotspot.is-active .pd-hotspot-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--pd-accent);
  animation: pd-hotspot-pulse 1.6s ease-out infinite;
}
@keyframes pd-hotspot-pulse {
  0% { transform: scale(.72); opacity: .85; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-hotspot.is-active .pd-hotspot-dot::after { animation: none; opacity: .45; }
}

/* Etiqueta en columna: posición (top + left/right) la pone layoutCallouts()
   en JS según a qué lado toque, aquí solo el aspecto de la etiqueta.
   E10 P3: era píldora (999px); el propietario la quiere con el radio
   normal de la UI, como el resto de botones/chips. */
.pd-hotspot-label {
  position: absolute;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--pd-text);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  padding: 3px 9px;
  white-space: nowrap;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .14);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, color .15s ease;
}
.pd-hotspot-label[hidden] { display: none; }
.pd-hotspot-label.is-active { border-color: var(--pd-accent); color: var(--pd-accent); }

/* Línea guía del punto a su etiqueta: gris a juego con --pd-border en
   reposo, teal --pd-accent en la zona activa —mismo lenguaje que el punto
   y la etiqueta—, con un puntito de 4 px donde toca la etiqueta. */
.pd-hotspot-line { fill: none; stroke: var(--pd-border); stroke-width: 1; }
.pd-hotspot-line.is-active { stroke: var(--pd-accent); }
.pd-hotspot-line-end { fill: var(--pd-border); }
.pd-hotspot-line-end.is-active { fill: var(--pd-accent); }

/* Móvil: dedo más ancho que el ratón, y la columna de etiquetas + líneas no
   caben en una pantalla estrecha —ya está la etiqueta de la pestaña
   debajo— así que solo queda el punto, algo más grande. */
@media (max-width: 480px) {
  .pd-hotspot-labels,
  .pd-hotspot-lines { display: none; }
  .pd-hotspot-dot { width: 32px; height: 32px; }
}

.pd-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #6e6e73;
  text-align: center;
  z-index: 2;
}
.pd-spinner {
  width: 38px;
  height: 38px;
  border: 4px solid #d3d7df;
  border-top-color: var(--pd-accent);
  border-radius: 50%;
  animation: pd-spin .9s linear infinite;
}
@keyframes pd-spin { to { transform: rotate(360deg); } }

/* Rueda pequeña, para meterla dentro de una línea de texto mientras sube el
   archivo: sin ella la zona de subida sólo cambiaba de texto y no parecía que
   estuviera pasando nada. */
.pd-spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 7px;
  border: 2px solid rgba(0, 0, 0, .18);
  border-top-color: var(--pd-accent);
  border-radius: 50%;
  animation: pd-spin .8s linear infinite;
}
.pd-progress-txt .pd-spinner-sm {
  border-color: rgba(255, 255, 255, .45);
  border-top-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .pd-spinner-sm { animation-duration: 2.4s; }
}

/* Vector sin vista previa (PDF, AI, EPS): se dice, no se disimula. */
.pd-vector-aviso {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #d8dbe2;
  border-radius: 10px;
  background: #f7f8fa;
  font-size: 13px;
  line-height: 1.45;
  color: #3c4043;
}
.pd-vector-aviso strong { display: block; color: #1d1d1f; }

/* Panel lateral */
.pd-panel {
  background: #fff;
  border-left: 1px solid #e8e8ed;
  overflow-y: auto;
  padding: 18px;
}
.pd-section { margin-bottom: 22px; }
.pd-section h3 {
  margin: 0 0 9px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #1d1d1f;
}

/* Colores */
.pd-colors { display: flex; flex-wrap: wrap; gap: 7px; }
.pd-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #d2d2d7;
  cursor: pointer;
  transition: transform .12s ease;
  padding: 0;
}
.pd-swatch:hover { transform: scale(1.12); }
.pd-swatch.is-active { border-color: var(--pd-accent); box-shadow: 0 0 0 2px rgba(1, 105, 110, .25); }

/* Pestañas de zona. Gap 6→8 px (encargo del propietario, 2026-09-18: "las
   píldoras están un poco juntas") — gap en flexbox reparte igual entre
   filas y columnas, así que las filas que envuelven en móvil también ganan
   el mismo aire. */
.pd-zone-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pd-tab {
  position: relative;
  border: 1px solid var(--pd-border);
  background: #fff;
  border-radius: var(--pd-radius);
  padding: 8px 14px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  cursor: pointer;
  color: var(--pd-text);
  transition: border-color .15s ease, background .15s ease;
}
.pd-tab:hover { border-color: var(--pd-border-hover); }
.pd-tab.is-active { background: var(--pd-sel-bg); border-color: var(--pd-sel-border); color: var(--pd-text); }
.pd-tab.has-logo::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1d8038;
  border: 1px solid #fff;
}

.pd-price-note { font-size: 12.5px; color: #86868b; margin: 0 0 10px; }

/* Zona de subida */
.pd-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px dashed #d2d2d7;
  border-radius: var(--pd-radius-card);
  padding: 18px 14px;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.45;
  color: #1d1d1f;
  transition: border-color .15s ease, background .15s ease;
}
.pd-drop:hover { border-color: var(--pd-accent); background: #f5f5f7; }
.pd-drop.is-busy { opacity: .5; pointer-events: none; }
.pd-drop-icon { font-size: 22px; }

/* Tarjeta de logo subido */
.pd-logo-card { border: 1px solid #e8e8ed; border-radius: 12px; padding: 12px; }
.pd-logo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pd-logo-thumb {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border: 1px solid #e8e8ed;
  border-radius: 8px;
  background:
    repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 0 0 / 12px 12px;
}
.pd-logo-name {
  flex: 1;
  font-size: 13px;
  color: #1d1d1f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-remove { background: none; border: 0; font-size: 17px; cursor: pointer; opacity: .7; }
.pd-remove:hover { opacity: 1; }

.pd-slider { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; margin: 8px 0; }
.pd-slider label { font-size: 12.5px; color: #86868b; }
.pd-slider input[type="range"] { width: 100%; accent-color: var(--pd-accent); }

/* Tabla de precios por volumen (ficha de producto) */
.pd-tiers {
  margin: 0 0 16px;
  border: 1px solid #e8e8ed;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fafbfc;
}
.pd-tiers-title { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.pd-tiers table { width: 100%; border-collapse: collapse; margin: 0; }
.pd-tiers th, .pd-tiers td {
  text-align: center;
  padding: 6px 4px;
  font-size: 13px;
  border: 1px solid #e8e8ed;
  transition: background .2s ease, color .2s ease;
}
.pd-tiers th { background: #f3f4f6; font-weight: 600; }
.pd-tiers td { font-weight: 700; }
.pd-tiers th.is-active { background: var(--pd-accent); color: #fff; }
.pd-tiers td.is-active { background: var(--pd-sel-bg); color: var(--pd-accent); }
.pd-unit-line { margin: 8px 0 0; font-size: 14px; }
.pd-unit-line small { color: #86868b; }

/* Progreso de subida */
.pd-progress {
  position: relative;
  width: 100%;
  height: 26px;
  margin-top: 10px;
  background: #eef0f4;
  border-radius: 999px;
  overflow: hidden;
}
.pd-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--pd-accent), var(--pd-accent));
  border-radius: 999px;
  transition: width .18s ease;
}
.pd-progress.is-done .pd-progress-fill { background: #1d8038; }
.pd-progress-txt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 12px;
  font-weight: 700;
  color: #1d1d1f;
  mix-blend-mode: normal;
}
.pd-progress.is-done .pd-progress-txt { color: #fff; animation: pd-pop-in .35s ease; }

/* Aviso flotante sobre el lienzo */
.pd-toast {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translate(-50%, -12px);
  background: #1d8038;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(29, 128, 56, .35);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  z-index: 3;
}
.pd-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Pestaña que acaba de recibir un logo */
.pd-tab.pd-pop { animation: pd-pop-in .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pd-pop-in {
  0% { transform: scale(.8); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Entrada de la tarjeta del logo */
.pd-logo-card { animation: pd-rise .35s ease; }
@keyframes pd-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Página unificada del diseñador — vive DENTRO de la web, bajo la
   navegación fija del tema (h-16 = 4rem), en el flujo del documento.
   El overlay lanzado desde la ficha de producto sigue siendo fixed. */
.pd-overlay.pd-static {
  position: relative;
  inset: auto;
  z-index: 1;
  height: calc(100vh - 4rem);
  min-height: 540px;
  /* A ancho completo aunque el tema meta el contenido en una columna con
     márgenes: márgenes negativos (no 100vw, que provocaría scroll horizontal
     cuando hay barra de desplazamiento). */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* En móvil, 100vh se pasa por la barra del navegador: dvh mide lo visible. */
@supports (height: 100dvh) {
  .pd-overlay.pd-static,
  html.pd-lock .pd-overlay.pd-static { height: calc(100dvh - 4rem); }
}
html.pd-lock .pd-overlay.pd-static { height: calc(100vh - 4rem); }
.pd-overlay.pd-static[hidden] { display: flex; }
.pd-topbar-left { display: flex; align-items: center; gap: 10px; }
.pd-back {
  color: #727785;
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 8px;
}
.pd-back:hover { color: #0B0F19; background: #F1F5F9; }
.pd-panel-note { font-size: 12.5px; color: #86868b; margin: 4px 0 0; }
.pd-tiers-mini { padding: 8px 10px; margin-bottom: 12px; }

/* Variante desplegable: solo se ve una línea; la tabla aparece al
   pasar el ratón (o al tocar, vía focus) para ahorrar altura. */
.pd-tiers-pop {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  outline: none;
}
.pd-tiers-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pd-accent);
  cursor: pointer;
}
.pd-tiers-hint svg { display: block; }
.pd-tiers-pop .pd-tiers-table {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  background: #fff;
  border: 1px solid #e8e8ed;
  border-radius: var(--pd-radius-card);
  padding: 10px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
  width: max-content;
  max-width: min(340px, 86vw);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.pd-tiers-pop:hover .pd-tiers-table,
.pd-tiers-pop:focus .pd-tiers-table,
.pd-tiers-pop:focus-within .pd-tiers-table {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.pd-tiers-pop .pd-unit-line { margin-top: 6px; }
.pd-tiers-mini th, .pd-tiers-mini td { font-size: 11.5px; padding: 4px 2px; }

/* Botón carrito con contador */
.pd-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F1F5F9;
  border: 0;
  border-radius: var(--pd-radius);
  padding: 8px 11px;
  cursor: pointer;
  color: #0B0F19;
}
.pd-cart-btn:hover { background: #E2E8F0; }
.pd-cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Tallas */
.pd-size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #e8e8ed;
}
.pd-size-row:last-child { border-bottom: 0; }
.pd-size-name { font-weight: 700; font-size: 14px; color: #1d1d1f; }
.pd-stepper { display: flex; align-items: center; gap: 6px; }
.pd-stepper input {
  width: 56px;
  text-align: center;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 14px;
  -moz-appearance: textfield;
}
.pd-stepper input::-webkit-outer-spin-button,
.pd-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-step {
  width: 32px;
  height: 32px;
  border: 1px solid #d2d2d7;
  background: #fff;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  color: #1d1d1f;
  line-height: 1;
}
.pd-step:hover { border-color: var(--pd-accent); color: var(--pd-accent); }

/* Cajón del carrito */
.pd-drawer[hidden] { display: none !important; }
.pd-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100%);
  background: #fff;
  box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  z-index: 5;
  animation: pd-slide-in .25s ease;
}
@keyframes pd-slide-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.pd-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e8e8ed;
  font-size: 16px;
}
.pd-drawer-head .pd-close { color: #86868b; }
.pd-drawer-head .pd-close:hover { color: #111; }
.pd-drawer-items { flex: 1; overflow-y: auto; padding: 10px 16px; }
.pd-drawer-empty { color: #86868b; font-size: 14px; text-align: center; margin-top: 30px; }
.pd-cart-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #f0f1f4;
}
.pd-cart-item-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e8e8ed;
  background: #f6f7f9;
  flex: 0 0 auto;
}
.pd-cart-item-noimg { display: flex; align-items: center; justify-content: center; font-size: 26px; }
.pd-cart-item-info { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: #6e6e73; }
.pd-cart-item-info strong { font-size: 13.5px; color: #1d1d1f; }
.pd-cart-item-total { font-weight: 700; color: #1d1d1f; }
.pd-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #d2d2d7;
  vertical-align: middle;
}
.pd-drawer-foot { border-top: 1px solid #e8e8ed; padding: 14px 16px; }
.pd-drawer-subtotal { font-size: 15px; margin-bottom: 10px; }
.pd-drawer-subtotal span { font-weight: 700; }
.pd-checkout { display: block; text-align: center; text-decoration: none; font-size: 15px; padding: 12px; }

/* Franja de confianza: reaparece bajo el selector de producto y en el cajón
   del carrito (justo encima de "Finalizar compra"). Contenido estático, sin
   datos de sesión, para que /disenador/ siga siendo cacheable. */
.pd-trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 560px;
}
.pd-trust-list li {
  position: relative;
  padding-left: 15px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #6e6e73;
}
.pd-trust-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pd-accent);
}
.pd-drawer-trust { margin-bottom: 12px; }
.pd-drawer-trust .pd-trust-list {
  justify-content: flex-start;
  gap: 5px 14px;
  margin-bottom: 8px;
  max-width: none;
}
.pd-drawer-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: #86868b; }
.pd-drawer-note a { color: var(--pd-accent); text-decoration: none; }
.pd-drawer-note a:hover { text-decoration: underline; }

/* Pantalla de elección de producto */
.pd-chooser {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Con varias camisetas ya no caben siempre en pantalla: se centra cuando
     sobra sitio (los ::before/::after de margen automático) y se desplaza
     cuando falta, en vez de salirse por abajo. */
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  gap: 18px;
  padding: 24px;
  padding-top: 32px;
}
.pd-chooser::before,
.pd-chooser::after { content: ''; margin: auto; }
.pd-chooser > * { flex: 0 0 auto; }
.pd-chooser h2 {
  margin: 0;
  font-family: 'Space Grotesk', Inter, system-ui, sans-serif;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0B0F19;
  text-align: center;
}
.pd-chooser-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 1040px;
}
a.pd-card { text-decoration: none; color: inherit; }
.pd-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  width: auto;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-card);
  cursor: pointer;
  transition: outline-color .15s ease, border-color .15s ease;
}
.pd-card:hover,
.pd-card:focus-visible {
  outline: 1.5px solid #0B0F19;
  outline-offset: 0;
}
.pd-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}
.pd-drop-icon { display: flex; color: var(--pd-accent); }
.pd-cart-item-noimg svg { width: 26px; height: 26px; color: #86868b; }
.pd-remove svg { display: block; }
.pd-card-title {
  font-family: 'Space Grotesk', Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #0B0F19;
  letter-spacing: -0.01em;
}
.pd-card-sub { font-size: 13px; color: #727785; text-align: left; line-height: 1.45; }
.pd-back[hidden] { display: none !important; }
button.pd-back { background: transparent; border: 0; cursor: pointer; }

/* Chips de opciones (forma, tamaño, acabado, cantidad). Gap 8→10 px, igual
   en filas y columnas (gap reparte los dos ejes en flex-wrap): encargo del
   propietario, 2026-09-18 — "las píldoras están un poco juntas". Relleno
   vertical fijo por min-height en vez de padding, para que el texto quede
   centrado de verdad sin depender del alto de línea de cada idioma. */
.pd-chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pd-chip {
  border: 1px solid var(--pd-border);
  background: #fff;
  border-radius: var(--pd-radius);
  padding: 0 16px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  cursor: pointer;
  color: var(--pd-text);
  line-height: 1.2;
  transition: border-color .15s ease, background .15s ease;
}
.pd-chip:hover { border-color: var(--pd-border-hover); }
/* Los chips son inline-flex: un <br> dentro no salta de línea, y "25 ud.60,19 €"
   o "cara a3,0 × 0,9 cm" salían pegados (dueño, 18/09/2026). El <small> ocupa
   toda la anchura y baja a su propia línea. */
.pd-chip { flex-wrap: wrap; align-content: center; }
.pd-chip small { color: #86868b; font-size: 11px; flex-basis: 100%; line-height: 1.25; }
.pd-chip br { display: none; }
.pd-chip.is-active { background: var(--pd-sel-bg); border-color: var(--pd-sel-border); color: var(--pd-text); }
.pd-chip.is-active small { color: #4b5058; }
.pd-qty-input {
  width: 84px;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
}

/* Lienzo de pegatinas */
.pd-sticker-wrap { display: flex; align-items: center; justify-content: center; }
.pd-sticker-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.pd-sticker-wrap canvas:active { cursor: grabbing; }

/* Móvil */
@media (max-width: 860px) {
  .pd-body { grid-template-columns: 1fr; grid-template-rows: 46vh 1fr; }
  /* En móvil la flecha de volver flota sobre el lienzo arriba a la izquierda: las pestañas Delante/Detrás se corren a su derecha. */
  .pd-print-wrap .pd-print-tabs { left: 64px; top: 10px; }
  .pd-panel { border-left: 0; border-top: 1px solid #e8e8ed; padding: 14px; }
  .pd-topbar { padding: 8px 10px; }
  /* #pd-title (página unificada, dentro de .pd-topbar-left) y el <strong>
     suelto de la ficha de producto (hijo directo de .pd-topbar): dos
     estructuras distintas para el mismo título, se ocultan las dos. */
  #pd-title,
  .pd-topbar > strong { display: none; }
  .pd-btn { padding: 8px 12px; font-size: 13px; }
  .pd-hint { display: none; }

  /* Franja de confianza: en pantallas estrechas se reduce a 2 columnas
     compactas para no empujar las tarjetas del selector fuera de la vista. */
  .pd-trust-list { gap: 4px 12px; }
  .pd-trust-list li { font-size: 11.5px; flex: 0 0 auto; }

  /* Total + «Añadir al carrito» (+ carrito) pasan a una barra fija abajo.
     .pd-overlay ya es "positioned" en las dos variantes (fixed en la ficha
     de producto, relative en la página del diseñador — ver .pd-static más
     arriba), así que position:absolute la ancla al fondo de esa caja sin
     tener que mover nodos del DOM ni depender de que haya scroll (position:
     sticky no serviría aquí: .pd-topbar-actions nace al principio del flujo,
     dentro de una barra de ~46px, y sticky no puede "viajar" más allá de la
     caja de su propio contenedor). */
  .pd-topbar-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4; /* por debajo del cajón del carrito (5): al abrirlo, lo tapa */
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #1d1d1f;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .18);
  }
  .pd-topbar-actions .pd-total {
    color: #fff;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pd-topbar-actions .pd-btn { flex: 0 0 auto; }

  /* Hueco al fondo para que la barra fija no tape lo último del panel o de
     la pantalla de elección de producto. */
  .pd-panel,
  .pd-chooser {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  /* El diseñador manda en la pantalla del móvil: sin alto mínimo de
     escritorio y usando la altura visible real. */
  .pd-overlay.pd-static { min-height: 0; height: calc(100vh - 3rem); }
  @supports (height: 100dvh) {
    .pd-overlay.pd-static { height: calc(100dvh - 3rem); }
  }
  .pd-panel { padding: 12px 14px; }
  .pd-section { margin-bottom: 16px; }
  #pd-body-tshirt { grid-template-rows: 42vh auto auto; }
  @supports (height: 100dvh) {
    #pd-body-tshirt { grid-template-rows: 42dvh auto auto; }
  }

  /* Cinco tarjetas no caben a lo grande: dos por fila y más bajas. */
  .pd-chooser { gap: 16px; padding-left: 14px; padding-right: 14px; }
  .pd-chooser h2 { text-align: center; }
  .pd-chooser-cards { gap: 10px; }
  .pd-card {
    padding: 16px 12px;
    gap: 6px;
    border-radius: var(--pd-radius-card);
  }
  .pd-card-title { font-size: 15px; }
  .pd-card-sub { font-size: 11.5px; line-height: 1.35; }
}

/* Indicador de calidad de impresión */
/* Escritorio: una barra a cada lado del lienzo. Colores y tallas a la
   izquierda, logos a la derecha (que es lo que más crece al subir archivos),
   y la prenda en el centro. Así no hay que desplazar ninguna de las dos. */
#pd-body-tshirt {
  grid-template-columns: 1fr 380px;
  grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
}
#pd-body-tshirt .pd-canvas-wrap { grid-column: 1; grid-row: 1 / -1; }
#pd-body-tshirt .pd-panel-left  { grid-column: 2; grid-row: 1; }
#pd-body-tshirt .pd-panel-right { grid-column: 2; grid-row: 2; border-top: 1px solid #f0f1f4; }

@media (min-width: 1280px) {
  #pd-body-tshirt {
    grid-template-columns: 340px minmax(0, 1fr) 380px;
    grid-template-rows: minmax(0, 1fr);
  }
  #pd-body-tshirt .pd-canvas-wrap { grid-column: 2; grid-row: 1; }
  #pd-body-tshirt .pd-panel-left {
    grid-column: 1;
    grid-row: 1;
    border-left: 0;
    border-right: 1px solid #e8e8ed;
  }
  #pd-body-tshirt .pd-panel-right { grid-column: 3; grid-row: 1; border-top: 0; }
  .pd-size-guide table { max-width: 320px; }
}

@media (min-width: 1600px) {
  #pd-body-tshirt { grid-template-columns: 380px minmax(0, 1fr) 420px; }
}

@media (max-width: 860px) {
  /* Móvil: lienzo arriba y las dos barras apiladas debajo. */
  #pd-body-tshirt { grid-template-columns: 1fr; grid-template-rows: 46vh auto auto; }
  #pd-body-tshirt .pd-canvas-wrap { grid-column: 1; grid-row: 1; }
  #pd-body-tshirt .pd-panel-left  { grid-column: 1; grid-row: 2; }
  #pd-body-tshirt .pd-panel-right { grid-column: 1; grid-row: 3; }
}

/* Aviso cuando un color no tiene toda la gama de tallas. */
.pd-size-note {
  margin: 0 0 8px; padding: 6px 8px; border-radius: 8px;
  background: #f4f5f7; color: #4b5058; font-size: 12.5px; line-height: 1.45;
}

/* Pedido con varios colores: tarjeta justo debajo de las muestras. */
.pd-mix {
  margin-top: 12px;
  padding: 10px 12px;
  background: #f7f8fa;
  border: 1px solid #eceef1;
  border-radius: 12px;
}
.pd-mix-title { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: #1d1d1f; letter-spacing: .01em; }
.pd-mix-hint { margin: 0; font-size: 12.5px; color: #6b7280; line-height: 1.45; }
.pd-mix-list { list-style: none; margin: 0; padding: 0; }
.pd-mix-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px; border-bottom: 1px solid #e8eaee; font-size: 12.5px;
}
.pd-mix-row:last-child { border-bottom: 0; }
.pd-mix-row.is-active { background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px #e3e6ea; }
.pd-mix-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18); flex: 0 0 auto;
}
.pd-mix-name { font-weight: 600; color: #374151; }
.pd-mix-sizes { color: #6b7280; flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.pd-mix-qty { color: #374151; font-variant-numeric: tabular-nums; }
.pd-mix-del {
  border: 0; background: none; cursor: pointer; color: #9ca3af;
  font-size: 16px; line-height: 1; padding: 2px 4px;
}
.pd-mix-del:hover { color: #ef4444; }

/* Guía de tallas bajo el desglose de tallas. */
.pd-size-guide { margin: 12px 0 4px; font-size: 13px; }
.pd-size-guide summary { cursor: pointer; color: #374151; font-weight: 600; padding: 6px 0; }
.pd-size-guide table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.pd-size-guide th, .pd-size-guide td {
  padding: 5px 8px; text-align: left; border-bottom: 1px solid #eceef1;
  font-variant-numeric: tabular-nums;
}
.pd-size-guide thead th { color: #6b7280; font-weight: 600; font-size: 12px; }
.pd-size-guide tbody th { font-weight: 600; }
.pd-size-guide-note { margin: 8px 0 0; font-size: 12px; color: #6b7280; line-height: 1.45; }

/* Medida real del logo estampado, bajo el control de tamaño. */
.pd-logo-size {
  margin: 6px 2px 0;
  font-size: 12.5px;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

.pd-quality {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: #f7f8fa;
  border-radius: 10px;
  font-size: 12.5px;
  color: #374151;
}
.pd-quality small { color: #6b7280; }
.pd-quality-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* Nota "IGIC incl." junto a un precio */
.pd-tax-note { font-weight: 400; opacity: .75; }
.pd-drawer-subtotal .pd-tax-note { color: #86868b; }

/* Aviso de pérdida de contexto WebGL */
.pd-gl-lost {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: rgba(245, 245, 247, .96);
  color: #1d1d1f;
  font-size: 14px;
  line-height: 1.5;
}
.pd-gl-lost[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Móvil: el diseñador deja de ser una rejilla de alto fijo (que obligaba a
   desplazar cada panel por dentro, en cajas de 100 px) y pasa a fluir. La
   prenda se queda pegada arriba mientras se desplazan los controles debajo,
   así siempre se ve lo que se está diseñando sin sacrificar sitio a los
   mandos. Este bloque va al final del archivo: gana a las reglas de móvil
   anteriores sin tener que tocarlas.
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  /* Crece con su contenido; quien desplaza es la página. */
  .pd-overlay.pd-static { height: auto; min-height: 0; }

  .pd-body,
  #pd-body-tshirt { display: block; }

  /* La ficha de producto abre el diseñador a pantalla completa (position:
     fixed): ahí el que desplaza es el cuerpo, no la página. */
  .pd-overlay:not(.pd-static) .pd-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pd-canvas-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 46vh;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .07);
  }

  /* Los paneles ya no son cajas con desplazamiento propio. */
  .pd-panel,
  .pd-panel-left,
  .pd-panel-right { overflow: visible; height: auto; }

  /* La barra de acción se ancla a la ventana, no al fondo del diseñador
     (que ahora puede medir dos pantallas). */
  .pd-topbar-actions { position: fixed; }

  /* La barra superior oscura acompaña al desplazamiento. */
  .pd-topbar { position: sticky; top: 0; z-index: 3; }
}

@supports (height: 100dvh) {
  @media (max-width: 860px) {
    .pd-canvas-wrap { height: 46dvh; }
  }
}

/* ---------------------------------------------------------------------------
   Páginas del diseñador: el tema las envuelve como un artículo (migas,
   titular grande, 48 px de aire arriba y abajo, 64 px debajo). En una
   herramienta a pantalla completa eso es espacio perdido, sobre todo en
   móvil, donde se comía el primer tercio de la pantalla.
   ------------------------------------------------------------------------ */
body.pd-designer-page main > div { padding-top: 18px; padding-bottom: 0; }
body.pd-designer-page main article { margin-bottom: 0; }
body.pd-designer-page main .prose { max-width: none; }

@media (max-width: 860px) {
  /* En móvil se van también las migas y el titular: el mismo texto ya está
     en la pestaña del navegador y en la barra del diseñador. */
  body.pd-designer-page main > div { padding: 0; }
  body.pd-designer-page main nav[aria-label="Migas de pan"],
  body.pd-designer-page main article > header { display: none; }

  /* La barra oscura solo lleva la flecha de volver (el título se oculta en
     móvil): en vez de una franja vacía, la flecha flota sobre la prenda. */
  .pd-overlay.pd-static .pd-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    box-shadow: none;
    padding: 10px 12px;
    pointer-events: none;
  }
  .pd-overlay.pd-static .pd-topbar-left,
  .pd-overlay.pd-static .pd-topbar-actions { pointer-events: auto; }
  .pd-overlay.pd-static .pd-back {
    background: rgba(255, 255, 255, .9);
    color: #1d1d1f;
    border-radius: var(--pd-radius);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
  }
  /* Con la barra flotando, la prenda empieza arriba del todo y puede crecer. */
  .pd-overlay.pd-static .pd-canvas-wrap { height: 52vh; }
}

@supports (height: 100dvh) {
  @media (max-width: 860px) {
    .pd-overlay.pd-static .pd-canvas-wrap { height: 52dvh; }
  }
}

/* ---------------------------------------------------------------------------
   Escritorio: recuperar el alto que se comían la cabecera del tema y la
   barra del diseñador. El tema fija su cabecera en 116 px, así que el
   diseñador puede ocupar exactamente el resto de la ventana.
   ------------------------------------------------------------------------ */
@media (min-width: 861px) {
  body.pd-designer-page main > div { padding-top: 0; padding-bottom: 0; }
  body.pd-designer-page main nav[aria-label="Migas de pan"],
  body.pd-designer-page main article > header { display: none; }
  body.pd-designer-page .pd-overlay.pd-static {
    height: calc(100vh - var(--pd-header-h, 88px));
    min-height: 480px;
  }

  /* Barra del diseñador más baja: el título ya está en la pestaña. */
  .pd-overlay.pd-static .pd-topbar { padding: 6px 14px; }
  .pd-overlay.pd-static .pd-topbar #pd-title { font-size: 15px; }
  .pd-overlay.pd-static .pd-topbar .pd-btn { padding: 8px 14px; }
}

@supports (height: 100dvh) {
  @media (min-width: 861px) {
    body.pd-designer-page .pd-overlay.pd-static { height: calc(100dvh - var(--pd-header-h, 88px)); }
  }
}

/* Grupos del selector: diseñar online (3D) y catálogo de grabado láser son
   dos cosas distintas y mezclarlas en una fila de tarjetas confundía. */
.pd-chooser-group {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #727785;
}
.pd-card-wide { width: min(620px, 92vw); }
@media (max-width: 860px) {
  .pd-chooser-group { font-size: 11.5px; }
  .pd-card-wide { width: min(96vw, 480px); }
}

/* Selector en móvil: las tarjetas iban a 46vw pero con el relleno lateral no
   llegaban a caber dos por fila y se apilaban de una en una, dejando la
   pantalla casi vacía. Con rejilla de dos columnas siempre entran dos. */
@media (max-width: 860px) {
  .pd-chooser-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }
  .pd-card { width: auto; min-width: 0; }
  .pd-card-wide { grid-column: 1 / -1; }
  .pd-card-sub { font-size: 11px; line-height: 1.3; }
}

/* En el selector, la barra inferior fija sólo lleva el carrito y sobraba
   como franja oscura vacía: se convierte en un círculo blanco flotante
   arriba a la derecha, a juego con la flecha de volver. Depende de la
   clase que designer.js pone en el overlay al entrar/salir del selector. */
@media (max-width: 860px) {
  .pd-overlay.pd-en-chooser .pd-topbar-actions {
    position: absolute;
    top: 10px;
    right: 12px;
    bottom: auto;
    left: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  /* Los círculos flotantes (volver, carrito) ocupan los 54 px de arriba:
     el selector empieza debajo para que la etiqueta no quede tapada. */
  .pd-overlay.pd-en-chooser .pd-chooser { padding-top: 60px; padding-bottom: 24px; }
  .pd-overlay.pd-en-chooser .pd-cart-btn {
    background: rgba(255, 255, 255, .9);
    color: #1d1d1f;
    border-radius: var(--pd-radius);
    width: 34px;
    height: 34px;
    padding: 0;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
  }
}

/* Pantallas muy estrechas: una columna; se conserva la tarjeta vertical
   (con foto) en vez de la fila horizontal de antes, que no tenía imagen. */
@media (max-width: 380px) {
  .pd-chooser-cards { grid-template-columns: 1fr; }
  .pd-card-sub { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Modo grabado láser: rejilla de artículos a la derecha y, a la izquierda, la
   foto del producto con el área de grabado a escala al lado (como la pegatina).
   ------------------------------------------------------------------------ */
.pd-laser-wrap { background: radial-gradient(ellipse at 50% 35%, #fff 0%, #eef0f4 75%); }
.pd-laser-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 28px; flex-wrap: wrap; padding: 24px;
}
/* Selector de cara/vista (E8d): mismo lenguaje visual que .pd-pr-seg del
   editor de impresión ("Anverso | Reverso"), pero fijo sobre la foto del
   láser en vez de flotar sobre el lienzo móvil —aquí hace falta también en
   escritorio, no es un atajo de móvil—. Solo existe si el artículo tiene
   más de una foto (laserRenderFlip()). */
.pd-laser-flip {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; background: #fff; border: 1px solid var(--pd-border); border-radius: var(--pd-radius);
  padding: 3px; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); z-index: 3;
}
.pd-laser-flip-btn {
  border: 0; background: transparent; border-radius: var(--pd-radius); padding: 8px 14px; min-height: 36px;
  font-size: 12px; font-weight: 600; color: var(--pd-text); cursor: pointer; white-space: nowrap;
  font-family: inherit; transition: background .12s ease, color .12s ease;
}
.pd-laser-flip-btn.is-active { background: var(--pd-sel-bg); color: var(--pd-accent); }
@media (max-width: 860px) {
  /* En móvil el selector de cara va DEBAJO de la foto, no encima: tapaba el
     recuadro de marcaje (dueño, 18/09/2026). El escenario apila foto + selector. */
  #pd-body-laser .pd-laser-stage:has(.pd-laser-flip) { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 6px; align-items: center; justify-content: center; }
  #pd-body-laser .pd-laser-stage:has(.pd-laser-flip) .pd-laser-photo { max-width: 92%; width: auto; }
  .pd-laser-flip { position: static; transform: none; margin: 8px auto 0; box-shadow: none; max-width: 100%; }
  .pd-laser-flip-btn { padding: 7px 11px; font-size: 12px; min-height: 34px; }
  .pd-laser-stage:has(.pd-laser-flip):has(.pd-laser-area.is-onphoto) .pd-laser-photo { height: auto; max-height: calc(100% - 62px); }
  #pd-body-laser.has-item .pd-canvas-wrap { height: 46vh; }
}

.pd-laser-empty { color: #86868b; font-size: 14px; }
.pd-laser-photo { max-width: 48%; max-height: 78%; object-fit: contain; }
.pd-laser-area {
  position: relative; background: #fff; border: 1px dashed var(--pd-accent); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .08);
  /* Se ajusta a la caja: un área alta y estrecha ya no ocupa toda la escena. */
  width: min(38%, 210px);
  max-height: 56%;
  margin-top: 18px;
}
/* La medida va encima (debajo se salía del área visible). */
.pd-laser-area::before {
  content: 'área de grabado ' attr(data-size);
  position: absolute; top: -18px; left: 0;
  font-size: 11px; color: #86868b; letter-spacing: .02em; white-space: nowrap;
}
.pd-laser-area.is-empty::after {
  content: 'tu logo aquí';
  font-size: 11.5px; color: #b6bac1;
}
/* El grabado es de un tono: se previsualiza en gris quemado, no a color. */
/* Al 100 % el logo tiene que llenar el área de verdad: el recorte al 88 %
   dejaba un margen que no existe en la máquina, así que la vista previa
   enseñaba un grabado más pequeño que el que dice la medida en cm. */
.pd-laser-art { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.4) brightness(.75); }

.pd-laser-search {
  width: 100%; padding: 9px 12px; border: 1px solid #d8dade; border-radius: 10px;
  font-size: 14px; margin-bottom: 10px;
}
.pd-laser-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px; max-height: 42vh; overflow-y: auto; padding-right: 4px;
}
.pd-laser-card {
  border: 1px solid #e8e8ed; border-radius: 12px; background: #fff; cursor: pointer;
  padding: 8px; display: flex; flex-direction: column; gap: 4px; text-align: left;
}
.pd-laser-card img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.pd-laser-card-name {
  font-size: 11.5px; line-height: 1.25; color: #1d1d1f;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pd-laser-card-price { font-size: 11px; color: #6b7280; font-variant-numeric: tabular-nums; }
.pd-laser-card.is-active { border-color: var(--pd-accent); box-shadow: 0 0 0 2px rgba(1, 105, 110, .2); }
.pd-laser-none { font-size: 12.5px; color: #86868b; grid-column: 1 / -1; margin: 6px 0; }
.pd-laser-quality { font-size: 12.5px; color: #374151; margin: 8px 0 0; }

@media (max-width: 860px) {
  .pd-laser-stage { gap: 14px; padding: 14px; }
  .pd-laser-photo { max-width: 46%; max-height: 70%; }
  .pd-laser-area { width: min(40%, 150px); max-height: 62%; }
  .pd-laser-grid { max-height: none; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* Artículo elegido: resumen compacto en lugar de la rejilla entera. */
.pd-laser-chosen {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid #e2e4e9; border-radius: 12px; padding: 10px; background: #fff;
}
.pd-laser-chosen img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.pd-laser-chosen-txt { font-size: 12.5px; line-height: 1.35; color: #1d1d1f; flex: 1 1 auto; min-width: 0; }
.pd-laser-chosen-txt small { color: #6b7280; }
.pd-laser-back { flex: 0 0 auto; align-self: center; }

/* Material oscuro (aluminio anodizado, plásticos): el láser deja marca clara. */
.pd-laser-area.is-dark { background: #2b2f35; border-color: #8ab4f8; }
.pd-laser-area.is-dark .pd-laser-art { filter: grayscale(1) contrast(1.5) invert(1) brightness(1.25); }
.pd-laser-area.is-dark::after { color: #6b7280; }

.pd-laser-card-model { color: #6b7280; }
.pd-laser-more { margin-top: 6px; grid-column: 1 / -1; }
.pd-laser-curved { border-top: 1px solid #eceef1; padding-top: 8px; margin-top: 8px; }
.pd-laser-curved a { color: var(--pd-accent); }
.pd-laser-tip {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 8px;
  background: #fff7ed; color: #9a3412; font-size: 12.5px; line-height: 1.4;
}
.pd-drop.is-busy { opacity: .6; pointer-events: none; }

/* Móvil, modo grabado: antes de elegir artículo el escenario está vacío y solo
   estorba — la lista tiene que verse nada más entrar. */
@media (max-width: 860px) {
  #pd-body-laser .pd-canvas-wrap { height: 0; overflow: hidden; border-bottom: 0; }
  #pd-body-laser.has-item .pd-canvas-wrap { height: 40dvh; border-bottom: 1px solid #e8e8ed; }
  #pd-body-laser .pd-laser-empty { display: none; }

  /* Catorce filtros en cuatro filas empujaban la rejilla fuera de pantalla. */
  #pd-laser-cats {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #pd-laser-cats::-webkit-scrollbar { display: none; }
  #pd-laser-cats .pd-chip { flex: 0 0 auto; }
}

/* Sin lienzo debajo, la flecha de volver flotaba encima del panel: cuando el
   escenario está plegado la barra vuelve al flujo y ocupa su sitio. */
@media (max-width: 860px) {
  .pd-overlay.pd-static.pd-stage-collapsed .pd-topbar {
    position: relative;
    background: transparent;
    padding: 6px 12px 0;
  }
}

/* Zona dibujada sobre la foto del fabricante, en su sitio exacto. */
.pd-laser-area.is-onphoto {
  position: absolute; margin: 0; box-shadow: none; background: rgba(255,255,255,.06);
  border: 1.5px solid #14b8a6; border-radius: 2px;
}
.pd-laser-area.is-onphoto::before { top: -16px; font-size: 10px; color: #0f766e; }
.pd-laser-area.is-onphoto.is-empty::after { content: ''; }
.pd-laser-art.is-rotated { max-width: none; max-height: none; width: 100%; }
.pd-laser-zone-title { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: #374151; }
#pd-laser-zones { margin-bottom: 14px; }
/* Ya no hace falta un gap propio más estrecho: hereda el 10 px de .pd-chips
   (2026-09-18, junto con el resto del diseñador). */

/* El resumen del artículo elegido vive dentro de la rejilla: tiene que ocupar
   la fila entera o el texto se estrangula en una columna de 104 px. */
.pd-laser-chosen { grid-column: 1 / -1; }

/* Con el recuadro sobre la foto, la foto manda: ya no comparte sitio con la
   caja del área, así que puede crecer. */
.pd-laser-stage:has(.pd-laser-area.is-onphoto) .pd-laser-photo {
  max-width: 78%;
  max-height: 88%;
}

/* En el modo grabado la prenda no gira: el escenario es una foto fija, así que
   no tiene que quedarse pegado arriba — al hacerlo tapaba los pasos 2 y 3. */
@media (max-width: 860px) {
  #pd-body-laser .pd-canvas-wrap { position: relative; top: auto; z-index: auto; }
}

/* Zonas ya marcadas y botón de quitar.
   OJO con el orden: .has-art se declara después de .is-active, así que su
   fondo claro ganaba y la zona activa quedaba en blanco sobre verde pálido,
   ilegible. La zona marcada Y activa se queda azul; el verde sólo marca las
   que tienen logo pero no están abiertas. */
.pd-chip.has-art { border-color: #14b8a6; background: #f0fdfa; }
.pd-chip.has-art.is-active { background: var(--pd-sel-bg); border-color: var(--pd-sel-border); color: var(--pd-text); }
.pd-chip.has-art.is-active small { color: #4b5058; }
.pd-laser-del { margin-top: 8px; color: #b91c1c; border-color: #fecaca; }
.pd-laser-zone-title small { font-weight: 400; color: #6b7280; }

/* Colores del artículo personalizado. Los que no son un color sino una forma
   —bola, redondo, baloncesto— llevan la foto del propio artículo. */
.pd-swatches { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.pd-swatch.is-photo { background-size: cover; background-position: center; }

/* Con el recuadro girado la etiqueta de la medida se iría de lado: la medida
   ya sale en el botón de cada zona y en el resumen. */
.pd-laser-area.is-rot::before { display: none; }

/* Artículo elegido: la foto tenía que verse grande —es la prueba de que el
   grabado cae donde decimos— y el recuadro de 1 px no se veía a un metro. */
.pd-laser-stage:has(.pd-laser-area.is-onphoto) .pd-laser-photo {
  width: auto; height: 92%; max-width: 92%; max-height: 92%; aspect-ratio: 1;
}
.pd-laser-area.is-onphoto {
  border-width: 2px; border-color: #00b4be; background: rgba(0, 180, 190, .10);
}
.pd-laser-ph { position: absolute; width: 84%; height: 84%; fill: #0f3c41; opacity: .5; pointer-events: none; }
.pd-laser-area:not(.is-empty) .pd-laser-ph,
.pd-laser-area:not(.is-onphoto) .pd-laser-ph { display: none; }

/* Tarjeta: el precio por unidad decide, el del pack es el que se paga. */
.pd-laser-card-pack { font-size: 10.5px; line-height: 1.2; color: #6b7280; }
.pd-laser-card-price { font-weight: 600; color: #1d1d1f; }
/* Nombre largo del fabricante: informativo, no titular. */
.pd-laser-chosen-full { color: #6b7280; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-chip-mas { color: var(--pd-accent); }

/* Botón de la barra cuando aún falta el logotipo: invita, no promete. */
.pd-btn.is-waiting { background: #3a3a3c; color: #f5f5f7; }

/* Sin artículo elegido el lienzo era el 70 % de la pantalla con una frase
   dentro. Hasta que se elige uno, la rejilla ocupa el ancho entero y las
   fotos se ven grandes; el lienzo aparece cuando hay algo que enseñar. */
@media (min-width: 861px) {
  #pd-body-laser:not(.has-item) { grid-template-columns: 1fr; }
  #pd-body-laser:not(.has-item) .pd-canvas-wrap { display: none; }
  #pd-body-laser:not(.has-item) .pd-panel { border-left: 0; padding: 22px 28px; }
  #pd-body-laser:not(.has-item) .pd-laser-grid {
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    max-height: none;
  }
  #pd-body-laser:not(.has-item) #pd-laser-search,
  #pd-body-laser:not(.has-item) .pd-section > h3 { max-width: 640px; }
}

/* Dentro del diseñador la cabecera acumulaba tres franjas (barra de envíos,
   menú y barra oscura): 190 px antes del contenido. Se esconde el mensaje de
   envíos, que ya se dice en la ficha y en el pie, pero NO la franja entera:
   ahí viven el selector de idioma y el teléfono, y sin ellos no había forma
   de pasar a inglés desde el diseñador. */
body.pd-designer-page #main-nav > div:first-of-type { height: 30px; }
body.pd-designer-page #main-nav > div:first-of-type .text-accent-canary { display: none; }
/* El hueco de arriba compensa una cabecera FIJA (la del sitio de origen).
   Si el tema la lleva en el flujo, pone --pd-top-pad a 0. */
body.pd-designer-page main { padding-top: var(--pd-top-pad, 88px) !important; }
@media (max-width: 860px) {
  body.pd-designer-page main { padding-top: var(--pd-top-pad, 84px) !important; }
}



/* «Cambiar artículo» se comía la mitad del ancho y dejaba el texto del
   artículo en una columna de 148 px. Pasa a su propia línea. */
.pd-laser-chosen { flex-wrap: wrap; }
.pd-laser-back { flex: 1 0 100%; margin-top: 8px; align-self: auto; }

/* Cuando solo hay la frase de "puedes mezclar colores" no hace falta caja:
   era una caja dentro de otra, con doble borde. */
.pd-mix.is-hint { background: none; border: 0; padding: 8px 2px 0; }

/* Paleta plegada: en móvil los 31 colores dejaban las tallas fuera de la vista. */
@media (max-width: 860px) {
  .pd-colors.is-plegado .pd-swatch:nth-of-type(n + 9) { display: none; }
}
.pd-swatch-mas {
  width: 28px; height: 28px; border-radius: 50%; padding: 0;
  border: 2px dashed #c9ccd1; background: #fff; color: #4b5058;
  font-size: 11px; font-weight: 600; cursor: pointer;
}
@media (min-width: 861px) { .pd-swatch-mas { display: none; } }

/* Aviso de "mejor en ordenador": informa, no estorba. Solo en pantallas
   pequeñas y una sola vez por navegador. */
.pd-desktop-tip {
  display: none;
  align-items: center; gap: 10px;
  max-width: 460px; margin: 0 auto 18px;
  padding: 0; background: transparent; color: #727785;
  border: 0; border-radius: 0;
  font-size: 13px; line-height: 1.4; text-align: left;
}
.pd-desktop-tip strong { font-weight: 600; color: #0B0F19; }
.pd-desktop-tip-x {
  flex: 0 0 auto; border: 0; background: transparent; color: #727785;
  font-size: 18px; line-height: 1; padding: 0 4px; cursor: pointer;
}
@media (max-width: 860px) {
  .pd-desktop-tip:not([hidden]) { display: flex; }

  /* La caja de subir el logo partía el título en dos columnas estrechas. */
  #pd-laser-art-ui .pd-drop { display: block; text-align: center; }
  #pd-laser-art-ui .pd-drop strong { display: block; margin-bottom: 2px; }

  /* Con artículo elegido el lienzo manda: la foto con el recuadro es la prueba
     de dónde cae el grabado, y a 46dvh el artículo salía diminuto. */
  #pd-body-laser.has-item .pd-canvas-wrap { height: 58dvh; }
  #pd-body-laser.has-item .pd-laser-stage { padding: 6px; }
  /* Con artículo elegido la foto puede ceder algo de alto: lo que hay debajo
     —las zonas de marcaje y el aviso de que hay varias— importa más que ver
     el bolígrafo un poco más grande, y en una pantalla de móvil no cabían
     las dos cosas. */
  #pd-body-laser.has-item .pd-canvas-wrap { height: 38vh; }
}

/* Al llevar la vista al artículo, la cabecera fija le comía el borde superior
   a la foto. */
@media (max-width: 860px) {
  #pd-body-laser .pd-canvas-wrap { scroll-margin-top: 68px; }
}

/* Los nombres de una o dos líneas descuadraban las filas de la rejilla. */
.pd-laser-card-name { min-height: 2.5em; }

@media (max-width: 860px) {
  /* Sin artículo elegido no hay nada que enseñar en el lienzo: la lista sube y
     la flecha de volver se queda flotando sobre ella. */
  #pd-body-laser:not(.has-item) .pd-canvas-wrap { height: 0; min-height: 0; }
  #pd-body-laser:not(.has-item) .pd-panel { padding-top: 46px; }
}


/* La foto ocupa todo lo que le deja el lienzo: en el móvil se quedaba en dos
   tercios del ancho y el recuadro de marcaje no se apreciaba. */
.pd-laser-stage:has(.pd-laser-area.is-onphoto) .pd-laser-photo {
  height: 98%; max-width: 98%; max-height: 98%;
}

/* "No tengo el logo a mano": el paso donde más gente se caía. */
.pd-laser-luego {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
  padding: 11px 13px; border: 1px solid #e2e4e9; border-radius: 12px;
  background: #fbfcfd; font-size: 13px; line-height: 1.45; cursor: pointer;
}
.pd-laser-luego input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; }
.pd-laser-luego small { color: #6b7280; }

/* Elegido el artículo, el buscador y los chips de categoría ya no sirven: solo
   empujan hacia abajo el paso siguiente, que es subir el logo. Vuelven con
   "Cambiar artículo". */
#pd-body-laser.has-item #pd-laser-search,
#pd-body-laser.has-item #pd-laser-cats { display: none; }
#pd-body-laser.has-item .pd-section h3:first-of-type { margin-bottom: 10px; }

/* Varias zonas de marcaje. Va en la tarjeta del artículo elegido —en el móvil
   la lista de zonas cae bajo el pliegue— y es un botón, no un cartel: lleva
   hasta ellas y las resalta un momento. */
.pd-laser-multi {
  /* Va dentro de la rejilla del catálogo (columnas de 104 px): sin esto el
     botón ocupaba una celda y el texto salía a palabra por línea. */
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin-top: 10px; padding: 10px 12px;
  background: var(--pd-sel-bg); border: 1px solid #b8d6d6; border-radius: 12px;
  color: var(--pd-primary); font-size: 13px; font-weight: 600; line-height: 1.35;
  text-align: left; cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.pd-laser-multi:hover { background: #d4e9e9; border-color: #8fc4c4; }
.pd-laser-multi-n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pd-accent); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700;
}
.pd-laser-multi-go { margin-left: auto; font-size: 15px; opacity: .65; }

/* El resalte al llegar: dos parpadeos y se queda quieto. */
@keyframes pd-señalar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(1, 105, 110, 0); }
  30%      { box-shadow: 0 0 0 4px rgba(1, 105, 110, .28); }
}
#pd-laser-zones.is-señalado { border-radius: 12px; animation: pd-señalar 1.1s ease 2; }
@media (prefers-reduced-motion: reduce) {
  #pd-laser-zones.is-señalado { animation: none; box-shadow: 0 0 0 3px rgba(1, 105, 110,.3); }
}

/* ---------- Modo "print" (flyers y tarjetas de visita) ----------
 * Reutiliza al máximo lo que ya existe (.pd-chips/.pd-chip, .pd-drop,
 * .pd-logo-card, .pd-quality, .pd-slider, .pd-swatch/.pd-colors, .pd-tab,
 * .pd-btn, .pd-remove): solo se añade aquí lo que no tiene equivalente. */

/* El lienzo mide lo que mide el contenedor, y el contenedor NO puede crecer
   con el lienzo: sin min-width:0 + overflow:hidden la columna de la rejilla
   se ensanchaba con cada render (pestañas + canvas en fila → +77 px por
   frame hasta 10.000 px de ancho). Pestañas e indicación van superpuestas. */
.pd-print-wrap { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; }
.pd-print-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.pd-print-wrap .pd-print-tabs { position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0; }
.pd-print-wrap .pd-hint { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; z-index: 2; pointer-events: none; }
.pd-print-wrap canvas:active { cursor: grabbing; }

.pd-print-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.pd-print-nocombo { color: #ef4444; font-weight: 600; }

.pd-print-layer-group { margin-bottom: 20px; }
.pd-print-layer-title {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  color: #86868b; margin: 0 0 8px;
}

.pd-print-bg-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-print-bg-row input[type="color"] {
  width: 34px; height: 34px; padding: 0; border: 1px solid #d2d2d7; border-radius: 8px; cursor: pointer;
}

.pd-print-fit-row { margin-bottom: 8px; }

.pd-print-texts { display: flex; flex-direction: column; gap: 10px; }
.pd-print-text-row {
  border: 1px solid #e8e8ed; border-radius: 12px; padding: 10px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.pd-print-text-row.is-active { border-color: var(--pd-accent); box-shadow: 0 0 0 2px rgba(1, 105, 110, .16); }
/* Etiqueta del campo (Nombre, Cargo, Teléfono…) — mismo criterio que
   Vistaprint: la fila de texto ya lleva escrito qué es antes de que el
   cliente escriba encima (spec: "captioned rows"). Solo aparece cuando el
   objeto trae data.field (las plantillas con nombre); el texto libre
   ("+ Añadir texto") no lleva caption. */
.pd-print-text-caption {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: #86868b; margin: 0 0 5px;
}
.pd-print-text-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 40px;
  border: 1px solid #e8e8ed; border-radius: 8px; padding: 7px 9px; font: inherit;
  margin-bottom: 8px;
}
/* E10 P2c: contador de caracteres — oculto por defecto ([hidden] hasta
   pasar de 200, ver prRenderTextoTool), pegado bajo el input. */
.pd-print-text-counter {
  display: block; font-size: 11px; color: #86868b; text-align: right;
  margin: -4px 0 6px;
}
.pd-print-text-counter[hidden] { display: none; }
.pd-print-text-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-print-text-head select {
  border: 1px solid #e8e8ed; border-radius: 8px; padding: 6px 8px; font-size: 12.5px; background: #fff;
}
.pd-print-size-input { width: 64px; }
.pd-print-text-head input[type="color"] {
  width: 28px; height: 28px; padding: 0; border: 1px solid #d2d2d7; border-radius: 6px; cursor: pointer;
}
.pd-print-text-head .pd-remove { margin-left: auto; }
.pd-print-align { gap: 6px; }
.pd-print-add-text { width: 100%; margin-top: 2px; }

.pd-print-preflight-row { margin-bottom: 10px; }
.pd-print-preflight-label { font-size: 12.5px; font-weight: 600; color: #4b5058; margin-bottom: 3px; }
.pd-print-safe-warn { font-size: 12.5px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; margin: 4px 0 0; }

@media (max-width: 860px) {
  .pd-print-text-head { gap: 6px; }
}

/* ---------- Editor de objetos v2 (Fabric.js) — E1 ----------
 * Todo esto vive dentro de #pd-print-wrap (fondo cuadriculado tras el
 * lienzo, que ahora mide justo la caja con sangre) y #pd-print-layers
 * (barra de herramientas + panel de propiedades + capas). Reutiliza
 * .pd-chip/.pd-chips, .pd-swatch/.pd-colors, .pd-slider, .pd-panel-note. */

.pd-print-wrap {
  background-image:
    linear-gradient(45deg, #eceef2 25%, transparent 25%), linear-gradient(-45deg, #eceef2 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eceef2 75%), linear-gradient(-45deg, transparent 75%, #eceef2 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-color: #f8f9fb;
  display: flex; align-items: center; justify-content: center;
}
.pd-print-wrap canvas { width: auto; height: auto; cursor: default; touch-action: none; }
.pd-print-wrap .canvas-container { position: relative !important; box-shadow: 0 2px 18px rgba(0, 0, 0, .12); }

.pd-tab-copy { display: inline-flex; align-items: center; gap: 4px; }

/* Barra de herramientas */
.pd-pr-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #e8e8ed;
  position: relative;
}
.pd-pr-tool {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 56px; padding: 7px 8px; border: 1px solid #d2d2d7; border-radius: 10px;
  background: #fff; color: #1d1d1f; font-size: 11px; cursor: pointer; line-height: 1.1;
}
.pd-pr-tool:hover { border-color: var(--pd-accent); color: var(--pd-accent); }
.pd-pr-zoom { display: flex; gap: 4px; margin-left: auto; }
.pd-pr-zoom .pd-pr-tool { min-width: 40px; padding: 7px 6px; }

/* Popovers (formas / iconos / fondo) */
.pd-pr-popover {
  position: absolute; z-index: 5; top: 100%; left: 0; margin-top: 6px;
  background: #fff; border: 1px solid #e8e8ed; border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14); padding: 10px; min-width: 180px;
  display: flex; flex-direction: column; gap: 6px;
}
.pd-pr-pop-item {
  text-align: left; border: 0; background: #f7f8fa; border-radius: 8px; padding: 8px 10px;
  cursor: pointer; font-size: 13px;
}
.pd-pr-pop-item:hover { background: var(--pd-sel-bg); }
.pd-pr-pop-icons { flex-direction: row; flex-wrap: wrap; max-width: 260px; gap: 4px; }
.pd-pr-icon-item {
  width: 34px; height: 34px; padding: 6px; border: 1px solid #e8e8ed; border-radius: 8px;
  background: #fff; cursor: pointer; color: #1d1d1f;
}
.pd-pr-icon-item:hover { border-color: var(--pd-accent); }
.pd-pr-icon-item svg { display: block; width: 100%; height: 100%; }

/* Panel de propiedades contextual */
.pd-pr-props { margin-bottom: 18px; }
.pd-pr-props select { border: 1px solid #e8e8ed; border-radius: 8px; padding: 7px 9px; font-size: 12.5px; background: #fff; margin-bottom: 8px; }
.pd-pr-props input[type="color"] { width: 30px; height: 30px; padding: 0; border: 1px solid #d2d2d7; border-radius: 7px; cursor: pointer; }
.pd-pr-props .pd-chips { margin-bottom: 8px; }
.pd-pr-common-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e8e8ed; }

/* Lista de capas (colapsable) */
.pd-pr-layers-list summary {
  cursor: pointer; font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; color: #86868b; margin-bottom: 8px;
}
.pd-pr-layers-rows { display: flex; flex-direction: column; gap: 6px; }
.pd-pr-layer-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border: 1px solid #e8e8ed; border-radius: 9px; cursor: pointer;
}
.pd-pr-layer-row.is-active { border-color: var(--pd-accent); box-shadow: 0 0 0 2px rgba(1, 105, 110, .16); }
.pd-pr-layer-name { flex: 1; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-pr-layer-btns { display: flex; gap: 2px; }
.pd-pr-layer-btns button {
  border: 0; background: none; cursor: pointer; font-size: 13px; padding: 3px 5px; border-radius: 6px;
}
.pd-pr-layer-btns button:hover { background: #f0f2f5; }

@media (max-width: 860px) {
  /* La barra de herramientas se vuelve una tira horizontal deslizable bajo
     el lienzo (el lienzo conserva su 46vh vía la regla de .pd-body ya
     existente); el panel de propiedades y la lista de capas se apilan
     debajo, dentro del mismo #pd-print-layers. Nunca se añaden barras fijas
     nuevas: se respeta la barra de acciones inferior ya existente. */
  .pd-pr-toolbar {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; margin-bottom: 12px;
  }
  .pd-pr-toolbar::-webkit-scrollbar { height: 4px; }
  .pd-pr-tool { flex: 0 0 auto; }
  .pd-pr-zoom { margin-left: 0; flex: 0 0 auto; }
  .pd-pr-popover { left: auto; right: 0; max-width: calc(100vw - 48px); }
}

/* ---------- E2: paleta de colores, galería de plantillas, "Tus datos" ----------
 * Todo lo de aquí abajo es nuevo sobre el bloque de E1 de arriba: reutiliza
 * sus tokens de color (--pd-accent, #e8e8ed, #86868b...) y las clases ya
 * existentes (.pd-chip, .pd-panel-note, .pd-btn/.pd-btn-primary) para que
 * no se note la costura. */

.pd-pr-palette-title { margin-top: 14px; }
.pd-pr-palette-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pd-pr-palette-swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px #d2d2d7; cursor: pointer; padding: 0;
}
.pd-pr-palette-swatch:hover { box-shadow: 0 0 0 1px var(--pd-accent); }
.pd-pr-palette-swatch.is-active { box-shadow: 0 0 0 2px var(--pd-accent); }

/* Modal genérico (galería / tus datos): overlay + panel centrado, se
   convierte en hoja de pantalla completa en móvil (regla de abajo). */
.pd-pr-modal-overlay {
  position: fixed; inset: 0; background: rgba(29, 29, 31, .5);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 24px;
}
.pd-pr-modal {
  background: #fff; border-radius: var(--pd-radius-card); box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  width: 100%; max-width: 720px; max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.pd-pr-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #e8e8ed; flex: 0 0 auto;
}
.pd-pr-modal-head h3 { margin: 0; font-size: 17px; }
.pd-pr-modal-close {
  border: 0; background: #f5f5f7; width: 32px; height: 32px; border-radius: var(--pd-radius);
  font-size: 14px; cursor: pointer; color: #4b5058;
}
.pd-pr-modal-close:hover { background: var(--pd-sel-bg); color: var(--pd-accent); }
.pd-pr-modal-body { padding: 18px 20px 22px; overflow-y: auto; }

/* Galería de plantillas */
.pd-pr-gallery-modal { max-width: 880px; }
.pd-pr-gallery-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.pd-pr-gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.pd-pr-gallery-card {
  border: 1px solid #e8e8ed; border-radius: 12px; padding: 0; background: #fff;
  cursor: pointer; overflow: hidden; text-align: left; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pd-pr-gallery-card:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); border-color: var(--pd-accent); }
.pd-pr-gallery-card img { display: block; width: 100%; aspect-ratio: 400 / 258; object-fit: cover; background: #f5f5f7; }
.pd-pr-gallery-card-name { display: block; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: #1d1d1f; }

/* Formulario "Tus datos" */
.pd-pr-datos-form { display: flex; flex-direction: column; gap: 12px; }
.pd-pr-datos-row { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: #4b5058; }
.pd-pr-datos-row input, .pd-pr-datos-row textarea {
  font: inherit; font-weight: 400; font-size: 14px; padding: 9px 11px; min-height: 40px;
  border: 1px solid var(--pd-border); border-radius: var(--pd-radius); color: var(--pd-text); resize: vertical;
}
.pd-pr-datos-row input:focus, .pd-pr-datos-row textarea:focus { outline: none; border-color: var(--pd-accent); box-shadow: 0 0 0 2px rgba(1, 105, 110, .16); }
.pd-pr-datos-logo { flex-direction: row; align-items: center; flex-wrap: wrap; }
.pd-pr-datos-logo-preview {
  width: 44px; height: 44px; border-radius: 8px; background: #f5f5f7; overflow: hidden;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.pd-pr-datos-logo-preview img { max-width: 100%; max-height: 100%; }
.pd-pr-datos-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.pd-btn-secondary { background: #fff; color: var(--pd-text); border: 1px solid var(--pd-border); }
.pd-btn-secondary:hover { background: #f5f5f7; border-color: var(--pd-border-hover); }

@media (max-width: 860px) {
  /* Hoja de pantalla completa (sin cabecera/pie fijos nuevos: la propia
     cabecera del modal hace de barra superior con su botón cerrar). */
  .pd-pr-modal-overlay { padding: 0; align-items: stretch; }
  .pd-pr-modal { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .pd-pr-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .pd-pr-datos-actions { flex-direction: column-reverse; }
  .pd-pr-datos-actions .pd-btn { width: 100%; }
}

/* ---------- E3: QR, parejas de fuentes, miniaturas de cara, móvil fino ----------
 * Igual que el bloque de E2: reutiliza .pd-chip/.pd-btn/.pd-pr-datos-*
 * siempre que se puede, para que no se note la costura entre fases. */

.pd-pr-gallery-clear { margin-bottom: 14px; }

/* Diálogo "QR" / "Editar QR": el <select> de tipo con el mismo aspecto que
   los desplegables del panel de propiedades (fuente del texto, etc.). */
.pd-pr-qr-modal select,
#pd-print-layers select {
  border: 1px solid #e8e8ed; border-radius: 8px; padding: 8px 10px; font-size: 13.5px;
  background: #fff; margin-bottom: 12px; width: 100%;
}
.pd-pr-qr-fields { margin-bottom: 4px; }
.pd-pr-qr-edit { width: 100%; justify-content: center; }

/* Parejas de fuentes (panel de propiedades, nada seleccionado): una fila de
   botones "Aa Aa" — la primera A en la fuente de título, la segunda en la
   de cuerpo, para ver el contraste sin tener que aplicarla. */
.pd-pr-font-pairs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pd-pr-font-pair-btn {
  display: flex; align-items: baseline; gap: 5px; padding: 8px 12px;
  border: 1px solid var(--pd-border); border-radius: var(--pd-radius); background: #fff; cursor: pointer;
  font-size: 15px; color: var(--pd-text); min-height: 40px;
}
.pd-pr-font-pair-btn:hover { border-color: var(--pd-accent); color: var(--pd-accent); }
.pd-pr-font-pair-btn span:first-child { font-weight: 700; }

/* Pestañas Delante/Detrás con miniatura viva de cada cara. */
.pd-pr-tab-thumb { display: inline-flex; align-items: center; gap: 6px; }
.pd-pr-tab-thumb-img {
  width: 22px; height: 15px; border-radius: 3px; background-color: #fff;
  background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  /* Objetivos táctiles ≥ 40 px (spec §3) — solo dentro del editor de
     impresión, sin tocar .pd-chip/.pd-swatch compartidos con camiseta/taza/
     pegatinas, que ya tienen su propio ajuste a ese tamaño donde hace falta. */
  #pd-print-layers .pd-pr-tool,
  #pd-print-layers .pd-chip,
  .pd-pr-modal-body .pd-chip {
    min-height: 40px;
  }
  #pd-print-layers .pd-pr-icon-item { width: 40px; height: 40px; padding: 8px; }
  /* E3 §3: objetivos táctiles ≥ 40 px también aquí (encontrado en pruebas
     Playwright móviles: se quedaban en 32 px) — el nombre de la capa cede
     el espacio (ya tiene ellipsis) en vez de encogerse los botones. */
  #pd-print-layers .pd-pr-layer-btns { gap: 1px; }
  #pd-print-layers .pd-pr-layer-btns button {
    min-width: 40px; min-height: 40px; font-size: 15px;
  }
  .pd-pr-palette-swatch { width: 36px; height: 36px; }
  .pd-pr-font-pair-btn { padding: 10px 14px; }

  /* Formulario "Tus datos" / "QR" con el teclado abierto: el cuerpo del
     modal ya es el único que hace scroll (la cabecera queda fija arriba),
     así que el campo enfocado y el botón "Guardar" siguen alcanzables — se
     añade solo un margen de cortesía al final para no dejar el botón pegado
     al borde inferior de la pantalla. */
  .pd-pr-modal-body { -webkit-overflow-scrolling: touch; padding-bottom: 28px; }
}

/* ---------- E5: "ya tengo mi diseño, solo quiero imprimirlo" ----------
 * Reutiliza tokens ya asentados (--pd-accent acento, #e8e8ed borde, #86868b
 * texto secundario, #f5f5f7 fondo, .pd-chip para botones de acción dentro
 * de cajas) para que no se note la costura con E1-E4. */

/* Pantalla de inicio: vive DENTRO de #pd-print-wrap (hermano del <canvas>,
   no de #pd-print-layers) para cubrir el área del lienzo, no el panel de
   la derecha — mismo criterio que .pd-loading en el resto del diseñador. */
.pd-pr-start {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: #f5f5f7; padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.pd-pr-start[hidden] { display: none; }
.pd-pr-start-inner { width: 100%; max-width: 760px; text-align: center; margin: auto; }
.pd-pr-start-cards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pd-pr-start-card {
  flex: 1 1 220px; max-width: 260px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  text-align: left; background: #fff; border: 1px solid #e8e8ed; border-radius: var(--pd-radius-card);
  padding: 20px 18px; cursor: pointer; font: inherit; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pd-pr-start-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .10); border-color: var(--pd-accent); }
.pd-pr-start-card:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; }
.pd-pr-start-card-icon {
  width: 40px; height: 40px; border-radius: var(--pd-radius); display: flex; align-items: center; justify-content: center;
  background: var(--pd-sel-bg); color: var(--pd-accent); flex: 0 0 auto;
}
.pd-pr-start-card-title { font-size: 15.5px; font-weight: 700; color: #1d1d1f; }
.pd-pr-start-card-desc { font-size: 12.5px; color: #6e6e73; line-height: 1.45; }
.pd-pr-start-card-primary { background: var(--pd-primary); border-color: var(--pd-primary); }
.pd-pr-start-card-primary .pd-pr-start-card-icon { background: rgba(255, 255, 255, .18); color: #fff; }
.pd-pr-start-card-primary .pd-pr-start-card-title,
.pd-pr-start-card-primary .pd-pr-start-card-desc { color: #fff; }
.pd-pr-start-card-primary:hover { background: var(--pd-primary-hover); border-color: var(--pd-primary-hover); box-shadow: 0 10px 26px rgba(4, 41, 42, .35); }
.pd-pr-start-hint { margin: 18px 0 0; font-size: 12.5px; color: #86868b; }

/* Enlace directo ?subir=1 (E5 §6): foco + pulso en la tarjeta principal. */
@keyframes pd-pr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(1, 105, 110, .55); }
  50% { box-shadow: 0 0 0 10px rgba(1, 105, 110, 0); }
}
.pd-pr-start-card-primary.pd-pr-pulse { animation: pd-pr-pulse 1.2s ease-in-out 2; }

@media (max-width: 860px) {
  .pd-pr-start-cards { flex-direction: column; align-items: stretch; }
  .pd-pr-start-card { max-width: none; }
}

/* Botón "Subir mi diseño" de la barra: primero, siempre en azul — mismo
   trato que .pd-btn-primary, sobre la forma cuadrada de .pd-pr-tool. */
.pd-pr-tool-primary { background: var(--pd-primary); border-color: var(--pd-primary); color: #fff; }
.pd-pr-tool-primary:hover { background: var(--pd-primary-hover); border-color: var(--pd-primary-hover); color: #fff; }
/* "Vista previa final" — interruptor, no botón de un solo uso. */
.pd-pr-tool.is-active { background: var(--pd-sel-bg); border-color: var(--pd-accent); color: var(--pd-accent); }

/* Vista previa final: se apaga el tablero de cuadros de fuera de la
   página (las guías las oculta prTogglePreviewMode objeto a objeto). Dos
   clases de especificidad para ganarle a las reglas base de más arriba. */
.pd-print-wrap.pd-pr-preview-on { background-image: none; background-color: #ffffff; }

/* Aviso "¿Y la cara trasera?" y el hint corto de "Elige 2 caras" — encima
   de la barra de herramientas, dentro de #pd-print-layers. */
.pd-pr-back-prompt {
  margin-bottom: 16px; padding: 12px 14px; background: var(--pd-sel-bg); border: 1px solid #b8d6d6; border-radius: 12px;
}
.pd-pr-back-prompt-q { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--pd-primary); }
.pd-pr-sides-hint {
  margin: 0 0 16px; padding: 10px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  font-size: 12.5px; color: #92620a;
}

/* Aviso de proporción del "diseño subido" en el panel de propiedades, con
   su botón "Ver dentro" (.pd-chip, ya estilado). */
.pd-pr-art-warn { margin: 8px 0; padding: 10px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; }
.pd-pr-art-warn p { margin: 0 0 8px; font-size: 12.5px; color: #92620a; line-height: 1.4; }

/* Frase en verde del preflight (cubre la sangre / original vectorial),
   hermana de .pd-print-safe-warn en ámbar, ya existente. */
.pd-print-safe-ok { font-size: 12.5px; color: #14532d; background: #f0fbf3; border: 1px solid #c7f0d2; border-radius: 8px; padding: 8px 10px; margin: 4px 0 0; }

/* ==========================================================================
   E6 — cáscara "tipo Vistaprint" del editor de impresión
   (print-spec-v3-layout.md). Carril de iconos + panel de herramienta +
   lienzo + columna de miniaturas en escritorio (>860 px, el único punto de
   corte que ya usa el resto del fichero); la MISMA hoja/carril se convierte
   en barra de pestañas inferior + hoja emergente en móvil (≤860 px) — solo
   cambia de sitio por CSS, ni una función de designer.js se duplica.
   Todo lo .pd-pr-* de E1-E5 (toolbar, popovers, galería, formulario de
   datos…) sigue arriba tal cual: aquí solo se añaden las 4 zonas nuevas.
   ========================================================================== */

/* Sin cuadriculado fuera del papel — el papel flota con sombra suave sobre
   #f5f5f7 (spec §"Lienzo"). Gana a las reglas de más arriba por ir después
   en cascada, misma especificidad. */
.pd-print-wrap {
  background-image: none;
  background-color: #f5f5f7;
  padding: 56px 64px;
}
.pd-print-wrap .canvas-container {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08) !important;
  border-radius: 2px;
}
.pd-print-wrap.pd-pr-preview-on { background-color: #f5f5f7; }

/* La barra de acciones fija de siempre (precio + Añadir al carrito) no
   aparece en el modo print en móvil — vive en el paso "Siguiente"
   (#pd-pr-summary) en su lugar. En escritorio no se toca (spec §"Reglas"). */
@media (max-width: 860px) {
  #pd-overlay[data-pd-mode="print"] > .pd-topbar { display: none; }
}

/* ---------- Carril de iconos ---------- */
/* gap 4px (2026-09-18): igual que el resto del diseñador, el carril también
   iba un poco prieto entre icono e icono. */
.pd-pr-rail {
  display: flex; flex-direction: column; gap: 4px; background: #fff; border-right: 1px solid #e8e8ed;
  overflow-y: auto; padding: 10px 0;
}
.pd-pr-rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  padding: 10px 2px; border: 0; border-radius: var(--pd-radius); background: transparent; cursor: pointer; font-family: inherit;
  color: #4b5058; font-size: 10.5px; line-height: 1.15; transition: background .12s ease, color .12s ease;
}
.pd-pr-rail-btn:hover { background: #f5f5f7; }
.pd-pr-rail-btn.is-active { background: var(--pd-sel-bg); color: var(--pd-accent); }
.pd-pr-rail-icon { display: flex; align-items: center; justify-content: center; }
.pd-pr-rail-label { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-pr-rail-history { margin-top: auto; display: flex; flex-direction: column; border-top: 1px solid #e8e8ed; padding-top: 8px; width: 100%; }

/* ---------- Panel de herramienta ---------- */
.pd-pr-panel {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: #fff; border-radius: var(--pd-radius-card); margin: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  overflow: hidden;
}
.pd-pr-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 6px; flex: 0 0 auto; }
.pd-pr-panel-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: #1d1d1f; }
.pd-pr-panel-collapse {
  border: 0; background: #f5f5f7; border-radius: var(--pd-radius); width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: #4b5058; flex: 0 0 auto;
}
.pd-pr-panel-collapse:hover { background: #e8e8ed; }
.pd-pr-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 18px 20px; }
.pd-pr-pane[hidden] { display: none; }
.pd-pr-sheet-handle { display: none; }

/* Panel colapsado: :has() ya lo soportan los navegadores modernos que
   visita este sitio; sin soporte, el botón simplemente deja de tener
   efecto — degradación aceptable, no rompe nada. */
#pd-body-print.pd-pr-shell:has(.pd-pr-panel.pd-pr-panel-collapsed) { grid-template-columns: 72px 56px 1fr 120px; }
.pd-pr-panel.pd-pr-panel-collapsed .pd-pr-panel-body,
.pd-pr-panel.pd-pr-panel-collapsed .pd-pr-panel-head h2 { display: none; }
.pd-pr-panel.pd-pr-panel-collapsed .pd-pr-panel-collapse svg { transform: rotate(180deg); }

/* Filas de texto de la herramienta "Texto" (E6) — las clases .pd-print-text-*
   ya existían en la hoja (de un editor de capas anterior) y encajan tal
   cual con las filas nuevas; solo se añade el estado "placeholder" del
   texto de arranque de la plantilla de tarjeta. */
.pd-print-text-input.is-seed { color: #9a9a9e; }
.pd-pr-text-mini-props { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e8e8ed; }
.pd-pr-text-mini-props .pd-print-layer-title { display: none; } /* ya se sabe que es texto: es la fila */

/* Tarjetas de "Subir diseño"/pantalla de inicio, apiladas dentro del panel
   estrecho (la versión ancha de siempre sigue en #pd-print-wrap). */
.pd-pr-start-cards-inline { flex-direction: column; align-items: stretch; }
.pd-pr-start-cards-inline .pd-pr-start-card { max-width: none; }
.pd-pr-tool-primary-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; }
.pd-pr-preview-btn { margin-top: 4px; }

/* "Archivos subidos" (miniaturas de esta sesión). */
.pd-pr-uploaded-title { margin-top: 14px; }
.pd-pr-uploaded-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pd-pr-uploaded-thumb {
  width: 54px; height: 54px; padding: 0; border: 1px solid #e8e8ed; border-radius: 10px;
  overflow: hidden; cursor: pointer; background: #f5f5f7;
}
.pd-pr-uploaded-thumb:hover { border-color: var(--pd-accent); }
.pd-pr-uploaded-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Pestañas Formas/Iconos/QR de "Gráficos" — reutiliza .pd-pr-pop-item/
   .pd-pr-icon-item de los popovers de E1, sueltas del popover (que
   necesitaba position:absolute; aquí van en flujo normal). */
.pd-pr-subtabs { margin-bottom: 10px; }
.pd-pr-subtab-body { display: flex; flex-direction: column; gap: 6px; }
.pd-pr-subtab-body .pd-pr-pop-icons,
.pd-pr-icon-grid { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; max-width: none; }

.pd-pr-gallery-inline .pd-pr-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* "Tus datos guardados" — plegado por defecto al pie de la herramienta
   "Texto" (encargo del propietario: nada de ventana emergente, Vistaprint
   lo deja a la izquierda dentro del propio panel). Reutiliza
   .pd-pr-layers-list para el <summary> (mismo tipográfico en mayúsculas
   que "Capas"), solo se añade el hueco de separación con las filas de
   arriba. */
.pd-pr-datos-collapse {
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed #e8e8ed;
}
.pd-pr-mas-actions { margin-bottom: 10px; }
.pd-pr-shortcuts { margin-bottom: 16px; }

/* ---------- Columna derecha: miniaturas Anverso/Reverso ---------- */
.pd-pr-sidecol { display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; overflow-y: auto; }
.pd-pr-sidecard {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
  border: 2px solid transparent; border-radius: 12px; padding: 6px; background: transparent; cursor: pointer; font-family: inherit;
}
.pd-pr-sidecard-thumb {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background-color: #fff;
  background-position: center; background-size: contain; background-repeat: no-repeat;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12); border: 1px solid #e8e8ed;
}
.pd-pr-sidecard-label { font-size: 11.5px; color: #4b5058; font-weight: 600; }
.pd-pr-sidecard.is-active { border-color: var(--pd-accent); }
.pd-pr-sidecard.is-active .pd-pr-sidecard-label { color: var(--pd-accent); }
.pd-pr-sidecard-add .pd-pr-sidecard-thumb { background-color: #f5f5f7; border-style: dashed; }
.pd-pr-sidecol-copy {
  border: 1px solid var(--pd-border); background: #fff; border-radius: var(--pd-radius); padding: 6px 10px;
  font-size: 11.5px; cursor: pointer; color: var(--pd-text); align-self: center;
}

/* ---------- Lienzo: cotas, chips de guías, zoom, ayuda ---------- */
.pd-pr-guide-toggles { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 8px; }
.pd-pr-guide-chip {
  border: 1px solid var(--pd-border); background: rgba(255, 255, 255, .92); border-radius: var(--pd-radius); padding: 6px 12px;
  font-size: 11.5px; font-weight: 600; cursor: pointer; color: #6e6e73;
}
.pd-pr-guide-chip-safe.is-active,
.pd-pr-guide-chip-margins.is-active { background: var(--pd-sel-bg); border-color: var(--pd-sel-border); color: var(--pd-text); }

.pd-pr-dim { position: absolute; z-index: 2; color: #86868b; font-size: 11.5px; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
.pd-pr-dim-w { text-align: center; }
.pd-pr-dim-h { display: flex; align-items: center; justify-content: center; }
.pd-pr-dim-h span,
.pd-pr-dim-h { writing-mode: vertical-rl; }

.pd-pr-zoombar {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 2px; background: #fff; border-radius: var(--pd-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14); padding: 4px;
}
.pd-pr-zoombar button {
  border: 0; background: transparent; width: 32px; height: 32px; border-radius: var(--pd-radius); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #1d1d1f; font-size: 16px;
}
.pd-pr-zoombar button:hover { background: #f0f2f5; }
.pd-pr-zoombar span { font-size: 12px; color: #4b5058; min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }

.pd-pr-canvas-preflight {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 64px; z-index: 3;
  margin: 0; padding: 5px 12px; border-radius: var(--pd-radius); font-size: 11.5px; font-weight: 600;
  background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); color: #6e6e73; white-space: nowrap;
}
.pd-pr-canvas-preflight:empty { display: none; }
.pd-pr-canvas-preflight.is-ok { color: #14532d; background: #f0fbf3; }
.pd-pr-canvas-preflight.is-warn { color: #92620a; background: #fffbeb; }

.pd-pr-help-bubble {
  position: absolute; right: 18px; bottom: 18px; z-index: 4;
  display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 10px;
  background: #fff4cc; color: #1d1d1f; border-radius: 999px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12); font-size: 12.5px; font-weight: 600;
}
.pd-pr-help-bubble:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.pd-pr-help-icon {
  width: 22px; height: 22px; border-radius: 50%; background: #ffd60a; color: #1d1d1f;
  display: flex; align-items: center; justify-content: center; font-weight: 800; flex: 0 0 auto; font-size: 13px;
}

/* Segmentado "Anverso | + Reverso" (móvil) y barra superior/resumen propios
   de móvil: ocultos en escritorio, la barra de siempre y la columna de
   miniaturas ya hacen ese trabajo. */
.pd-pr-seg { display: none; }
.pd-pr-mobile-topbar { display: none; }
.pd-pr-summary { display: none; }

/* ---------- Estructura de 4 zonas (>860 px) ---------- */
@media (min-width: 861px) {
  #pd-body-print.pd-pr-shell {
    grid-template-columns: 72px 380px minmax(0, 1fr) 120px;
    grid-template-rows: minmax(0, 1fr);
  }
  #pd-body-print.pd-pr-shell .pd-pr-rail { grid-column: 1; grid-row: 1; }
  #pd-body-print.pd-pr-shell .pd-pr-panel { grid-column: 2; grid-row: 1; }
  #pd-body-print.pd-pr-shell .pd-print-wrap { grid-column: 3; grid-row: 1; }
  #pd-body-print.pd-pr-shell .pd-pr-sidecol { grid-column: 4; grid-row: 1; }
}

/* ---------- Móvil (≤860 px): barra superior propia, pestañas inferiores,
   hoja, segmentado, "Siguiente" ---------- */
@media (max-width: 860px) {
  /* display:block a secas (no position:relative + hijos en absolute con
     top/bottom): el alto de #pd-body-print como elemento flex (flex:1 1
     auto, heredado de .pd-body) es "auto" hasta que el propio flujo lo
     resuelve, así que un hijo en position:absolute con top+bottom no tenía
     de qué "colgar" y acababa con el alto de su contenido (spec real
     encontrado con Playwright: la pantalla de inicio se veía en flujo
     normal, empujando el pie de página del tema debajo). Los paneles
     flotantes (carril/panel/resumen) van con position:fixed — cuelgan del
     VIEWPORT, no de este contenedor, así que no les afecta —; el lienzo,
     en cambio, se deja en flujo normal con una altura en dvh/vh (mismo
     patrón que .pd-canvas-wrap usa en el resto del diseñador). */
  #pd-body-print.pd-pr-shell { display: block; }

  .pd-pr-mobile-topbar {
    display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 8px;
    /* Pegada justo debajo de la cabecera fija del tema (56 px en móvil): con
       top:0 se deslizaba por debajo de ella y desaparecía el botón Siguiente. */
    background: #fff; border-bottom: 1px solid #e8e8ed; position: sticky; top: 56px; z-index: 20;
  }
  .pd-pr-mtop-btn {
    border: 0; background: transparent; width: 38px; height: 38px; min-width: 40px; min-height: 40px;
    border-radius: var(--pd-radius); display: flex; align-items: center; justify-content: center;
    color: #1d1d1f; cursor: pointer; flex: 0 0 auto;
  }
  .pd-pr-mtop-btn:active { background: #f0f2f5; }
  .pd-pr-mtop-logo { flex: 1 1 auto; text-align: center; font-weight: 700; font-size: 15px; color: #1d1d1f; }
  .pd-pr-mtop-price {
    position: relative; border: 0; background: transparent; width: 40px; height: 40px; border-radius: var(--pd-radius);
    display: flex; align-items: center; justify-content: center; color: #1d1d1f; cursor: pointer; flex: 0 0 auto;
  }
  .pd-pr-mtop-price-bubble {
    position: absolute; top: 42px; right: 0; background: #1d1d1f; color: #fff; padding: 6px 10px; border-radius: 8px;
    font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none;
    transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease;
  }
  .pd-pr-mtop-price.is-open .pd-pr-mtop-price-bubble { opacity: 1; transform: translateY(0); }
  .pd-pr-mtop-next { flex: 0 0 auto; padding: 9px 18px; font-size: 13.5px; min-height: 40px; }

  .pd-pr-rail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; flex-direction: row;
    overflow-x: auto; -webkit-overflow-scrolling: touch; background: #111111; border-right: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); height: 88px;
    /* QA 2026-09-18: 8-9 pestañas en 66px + gap 4px no caben en 390px (solo
       ~5.5 visibles) y el carril, aunque ya era scrollable, no lo parecía:
       nada indicaba que hubiera más iconos fuera de pantalla. scroll-snap
       + un desvanecido fijo en el borde derecho (mask, no se mueve con el
       scroll) dan la pista visual; el padding-right extra asegura que la
       última pestaña quede totalmente legible y no pegada al fundido ni al
       borde. Scrollbar oculta porque ya está la pista del fundido. */
    scroll-snap-type: x proximity;
    scroll-padding-inline: 6px;
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .pd-pr-rail::-webkit-scrollbar { display: none; }
  .pd-pr-rail-btn { flex: 0 0 auto; width: 66px; min-height: 40px; color: #c7cad0; font-size: 10.5px; padding: 6px 2px; scroll-snap-align: start; }
  .pd-pr-rail-btn.is-active,
  .pd-pr-rail-btn:hover { background: transparent; color: #fff; }
  .pd-pr-rail-history { display: none; } /* deshacer/rehacer: barra superior móvil */

  .pd-pr-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
    border-radius: var(--pd-radius-card) var(--pd-radius-card) 0 0; max-height: 70vh; min-height: 32vh;
    transform: translateY(100%); transition: transform .22s ease;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
  }
  .pd-pr-panel.pd-pr-sheet-open { transform: translateY(0); }
  .pd-pr-sheet-handle {
    /* Barra de agarre de 4 px de alto: un radio de 4 px ya la redondea del
       todo (el máximo visual es la mitad del lado corto) sin recurrir a
       999px — así pasa la auditoría de "nada de píldoras" sin cambiar de
       aspecto. */
    display: block; width: 40px; height: 4px; border-radius: 4px; background: #d2d2d7; border: 0;
    margin: 10px auto 0; flex: 0 0 auto; cursor: pointer; min-height: 24px;
  }
  .pd-pr-panel-head { padding: 6px 18px 4px; }
  .pd-pr-panel-collapse { display: none; }

  #pd-print-wrap.pd-print-wrap {
    padding: 16px 10px 92px; background-color: #f2f2f2;
    /* 56px de la barra superior (sticky, sigue ocupando su hueco en el
       flujo) + 88px del carril convertido en pestañas inferiores (que sí
       está en position:fixed, fuera del flujo — por eso se descuenta aquí
       a mano, no queda "gratis" como con la barra superior). */
    height: calc(100vh - 56px - 88px);
  }
  @supports (height: 100dvh) {
    #pd-print-wrap.pd-print-wrap { height: calc(100dvh - 56px - 88px); }
  }
  .pd-pr-sidecol { display: none; }
  .pd-pr-seg {
    /* Fijo respecto a la ventana y por encima de la barra de pestañas (z 15):
       anclado al lienzo quedaba medio tapado por la barra cuando el lienzo
       se extendía bajo ella. */
    display: flex; position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 16;
    background: #fff; border: 1px solid var(--pd-border); border-radius: var(--pd-radius); padding: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  }
  .pd-pr-seg-btn {
    border: 0; background: transparent; border-radius: var(--pd-radius); padding: 9px 16px; min-height: 40px;
    font-size: 12.5px; font-weight: 600; color: var(--pd-text); cursor: pointer;
  }
  .pd-pr-seg-btn.is-active { background: var(--pd-sel-bg); }
  .pd-pr-zoombar { display: none; } /* pellizco en el lienzo, spec móvil */
  .pd-pr-help-bubble {
    padding: 0; width: 44px; height: 44px; border-radius: 50%; background: #f5b53b;
    justify-content: center; bottom: 80px;
  }
  .pd-pr-help-bubble .pd-pr-help-text { display: none; }
  .pd-pr-help-icon { background: transparent; width: auto; height: auto; font-size: 19px; }
  .pd-pr-canvas-preflight { bottom: 68px; }

  /* position:absolute (no fixed) a propósito — cuelga de .pd-overlay.pd-static
     (position:relative, más arriba en designer.css), que en esta página YA
     empieza por debajo de la cabecera fija del tema. Con position:fixed;
     inset:0 el resumen saltaba a la esquina real del viewport y la
     cabecera del tema (position:fixed, z-index más alto, fuera de
     .pd-overlay) se pintaba encima de su propia cabecera (Volver + título)
     — bug real encontrado con Playwright, capturas e6-m-siguiente.png. */
  .pd-pr-summary {
    display: block; position: absolute; top: 0; left: 0; right: 0; height: 100vh;
    z-index: 40; background: #fff; overflow-y: auto;
  }
  @supports (height: 100dvh) {
    .pd-pr-summary { height: 100dvh; }
  }
  .pd-pr-summary[hidden] { display: none; }
  .pd-pr-summary-head {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #e8e8ed;
    position: sticky; top: 0; background: #fff; z-index: 1;
  }
  .pd-pr-summary-head h2 { margin: 0; font-size: 17px; }
  .pd-pr-summary-body { padding: 4px 16px 110px; }
  .pd-pr-summary-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; display: flex; align-items: center; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #e8e8ed;
  }
  .pd-pr-summary-total { flex: 1 1 auto; font-weight: 700; font-size: 14px; min-width: 0; }
  .pd-pr-summary-apply { flex: 0 0 auto; padding: 12px 22px; min-height: 44px; }

  .pd-pr-start-cards-inline { gap: 10px; }
}

/* ---------- E9b: "Pedir presupuesto" ----------
 * Una sola tarjeta reutilizada en cinco sitios (láser, flyer/tarjeta,
 * camiseta, pegatina, taza): en escritorio se expande EN LÍNEA bajo el
 * bloque de packs/cantidad (sin overlay, .pd-presupuesto-card en flujo
 * normal); en móvil (regla @media 860px de abajo) la misma tarjeta pasa a
 * hoja inferior fija con un fondo semitransparente que la cierra al tocar
 * fuera. Reutiliza tokens ya existentes (--pd-accent/--pd-border/--pd-radius)
 * y las clases .pd-btn/.pd-btn-primary/.pd-btn-secondary, sin inventar
 * un lenguaje visual nuevo. */
.pd-presupuesto-wrap { margin-top: 4px; }
.pd-presupuesto-cta { font-size: 12.5px; color: #86868b; margin: 6px 0 0; line-height: 1.4; }
.pd-presupuesto-link {
  border: 0; background: none; padding: 0; margin: 0; font: inherit; font-size: 12.5px;
  font-weight: 700; color: var(--pd-accent); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.pd-presupuesto-link:hover { color: var(--pd-accent-hover); }
.pd-presupuesto-link-standalone { display: inline-block; margin-top: 6px; font-weight: 600; }

/* Fondo que cierra la hoja al tocar fuera: solo se ve en móvil (regla de
   abajo) mientras la tarjeta está abierta; en escritorio nunca se pinta. */
.pd-presupuesto-backdrop { display: none; }

.pd-presupuesto-card {
  position: relative; margin-top: 10px; padding: 16px;
  background: #fff; border: 1px solid var(--pd-border); border-radius: var(--pd-radius-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.pd-presupuesto-close {
  position: absolute; top: 10px; right: 10px; border: 0; background: #f5f5f7;
  width: 28px; height: 28px; border-radius: var(--pd-radius); font-size: 13px;
  cursor: pointer; color: #4b5058;
}
.pd-presupuesto-close:hover { background: var(--pd-sel-bg); color: var(--pd-accent); }
.pd-presupuesto-title { margin: 0 32px 4px 0; font-size: 15px; }
.pd-presupuesto-summary { margin: 0 32px 12px 0; font-size: 12.5px; color: #86868b; }
.pd-presupuesto-form { display: flex; flex-direction: column; gap: 10px; }
.pd-presupuesto-row { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: #4b5058; }
.pd-presupuesto-row input, .pd-presupuesto-row textarea {
  font: inherit; font-weight: 400; font-size: 14px; padding: 9px 11px; min-height: 40px;
  border: 1px solid var(--pd-border); border-radius: var(--pd-radius); color: var(--pd-text); resize: vertical;
}
.pd-presupuesto-row input:focus, .pd-presupuesto-row textarea:focus {
  outline: none; border-color: var(--pd-accent); box-shadow: 0 0 0 2px rgba(1, 105, 110, .16);
}
.pd-presupuesto-hint { font-size: 11.5px; color: #86868b; margin: -4px 0 0; }
/* Honeypot: fuera de la pantalla, no solo "invisible", para que un lector
   de pantalla tampoco lo anuncie ni el tabulador se detenga en él. */
.pd-presupuesto-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; opacity: 0; }
.pd-presupuesto-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.pd-presupuesto-error { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: #c22f2f; }
.pd-presupuesto-ok { font-size: 13.5px; padding-right: 32px; }
.pd-presupuesto-ok strong { display: block; color: #2f7d43; font-size: 14px; line-height: 1.4; margin: 0 0 6px; }
.pd-presupuesto-id { margin: 0; font-size: 11.5px; color: #86868b; }

@media (max-width: 860px) {
  .pd-presupuesto-wrap.is-open .pd-presupuesto-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(29, 29, 31, .5); z-index: 10000;
  }
  .pd-presupuesto-wrap.is-open .pd-presupuesto-card {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 10001;
    border-radius: var(--pd-radius-card) var(--pd-radius-card) 0 0;
    max-height: 80vh; overflow-y: auto; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .pd-presupuesto-actions { flex-direction: column-reverse; }
  .pd-presupuesto-actions .pd-btn { width: 100%; }
}

/* ===========================================================================
   Prendas (polos/ropa laboral) — fase JS, agente D, 2026-09-19.
   Reutiliza TODO el lienzo de #pd-body-laser (foto real + recuadro de
   marcaje a escala, colores, zonas, hotspots, subida de logo): las únicas
   piezas de HTML/CSS propias de este modo son la rejilla de tallas de aquí
   abajo (sustituye a los packs del grabado láser dentro del mismo
   contenedor #pd-laser-packs) y la anulación del filtro de "grabado" sobre
   el logo, que en DTF se imprime a todo color. Mismos tokens que el resto
   del diseñador (--pd-primary/--pd-accent/--pd-sel-bg/--pd-border/--pd-radius,
   definidos arriba): rectángulos de 8 px, borde de 1 px, nada de píldoras.
   ========================================================================= */

/* El grabado láser simula la marca en un solo tono (incluso invertida sobre
   material oscuro, .is-dark); una prenda se imprime en DTF a todo color, así
   que en modo prenda esos filtros se anulan sobre el mismo elemento
   #pd-laser-art que usa el grabado. */
#pd-overlay[data-pd-mode="prenda"] .pd-laser-art { filter: none; }
#pd-overlay[data-pd-mode="prenda"] .pd-laser-area.is-dark { background: inherit; border-color: inherit; }
#pd-overlay[data-pd-mode="prenda"] .pd-laser-area.is-dark .pd-laser-art { filter: none; }
#pd-overlay[data-pd-mode="prenda"] .pd-laser-area.is-dark::after { color: inherit; }

.pd-prenda-sizes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.pd-prenda-size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  min-height: 48px;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  background: #fff;
  color: var(--pd-primary);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pd-prenda-size-row:hover { border-color: var(--pd-border-hover); }
.pd-prenda-size-row.is-active {
  background: var(--pd-sel-bg);
  border-color: var(--pd-sel-border);
}
.pd-prenda-size-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.pd-prenda-size-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--pd-primary);
}
.pd-prenda-size-extra {
  font-size: 12px;
  color: var(--pd-accent);
}
/* Campo numérico grande para el pulgar (el diseñador se usa mucho en
   móvil): 44 px de lado como mínimo, texto a 16 px para que iOS no haga
   zoom automático al enfocar. */
.pd-prenda-size-row input[type="number"] {
  width: 64px;
  height: 44px;
  flex: 0 0 auto;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--pd-primary);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  background: #fff;
  -moz-appearance: textfield;
}
.pd-prenda-size-row input[type="number"]:focus {
  outline: none;
  border-color: var(--pd-accent);
  box-shadow: 0 0 0 2px rgba(1, 105, 110, .16);
}
.pd-prenda-size-row.is-active input[type="number"] { border-color: var(--pd-sel-border); }

/* ---------- Plantillas de marca (modos de UNA imagen) ----------
   El paso que va ANTES de "sube tu logo" en camiseta, prenda, taza, chapa,
   pegatina, alfombrilla y grabado, y la galería/editor que abre. Mismo
   lenguaje que el resto del diseñador: rectángulos de 8 px, borde de 1 px,
   seleccionado --pd-accent sobre --pd-sel-bg. Sin píldoras. */

.pd-tpl-entry { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.pd-tpl-entry-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: #fff; color: var(--pd-text);
  border: 1px solid var(--pd-border); border-radius: var(--pd-radius);
  transition: border-color .15s ease, background .15s ease;
}
.pd-tpl-entry-btn:hover { border-color: var(--pd-accent); background: var(--pd-sel-bg); }
.pd-tpl-entry-ic { flex: 0 0 auto; display: flex; width: 22px; height: 22px; color: var(--pd-accent); }
.pd-tpl-entry-ic svg { width: 100%; height: 100%; }
.pd-tpl-entry-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-tpl-entry-tx strong { font-size: 14px; font-weight: 700; }
.pd-tpl-entry-tx small { font-size: 12px; color: #5b6168; }
.pd-tpl-entry-btn-alt .pd-tpl-entry-ic { color: #5b6168; }

.pd-tpl-or {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: #6b7178; margin: 4px 0 2px;
}
.pd-tpl-or::before, .pd-tpl-or::after { content: ""; flex: 1 1 auto; height: 1px; background: #e8e8ed; }

/* Galería */
.pd-tpl-modal { max-width: 900px; }
.pd-tpl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.pd-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; }
.pd-tpl-card {
  display: flex; flex-direction: column; gap: 0; padding: 0; cursor: pointer; text-align: left;
  background: #fff; border: 1px solid var(--pd-border); border-radius: var(--pd-radius); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pd-tpl-card:hover { border-color: var(--pd-accent); box-shadow: 0 8px 20px rgba(0, 0, 0, .10); }
.pd-tpl-card-box {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 10px; box-sizing: border-box;
}
.pd-tpl-card-box img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pd-tpl-card-name {
  display: block; padding: 8px 10px 10px; font-size: 12px; font-weight: 600;
  color: var(--pd-text); border-top: 1px solid #e8e8ed;
}

/* Editor de una plantilla */
.pd-tpl-edit-modal { max-width: 860px; }
.pd-tpl-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 20px; align-items: start; }
.pd-tpl-edit-prev {
  display: flex; align-items: center; justify-content: center;
  padding: 16px; border: 1px solid var(--pd-border); border-radius: var(--pd-radius);
  min-height: 220px;
}
.pd-tpl-edit-prev img { display: block; max-width: 100%; max-height: 46vh; object-fit: contain; }
.pd-tpl-edit-form { display: flex; flex-direction: column; gap: 10px; }
.pd-tpl-field { display: flex; flex-direction: column; gap: 4px; }
.pd-tpl-field span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5b6168; }
.pd-tpl-field input {
  width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 14px; color: var(--pd-text);
  background: #fff; border: 1px solid var(--pd-border); border-radius: var(--pd-radius);
}
.pd-tpl-field input:focus { outline: none; border-color: var(--pd-accent); box-shadow: 0 0 0 2px rgba(1, 105, 110, .18); }
.pd-tpl-inks-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5b6168; margin-top: 4px; }
.pd-tpl-inks { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-tpl-ink {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer;
  background: #fff; color: var(--pd-text); font-size: 12px;
  border: 1px solid var(--pd-border); border-radius: var(--pd-radius);
}
.pd-tpl-ink i { width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, .18); }
.pd-tpl-ink:hover { border-color: var(--pd-border-hover); }
.pd-tpl-ink.is-active { background: var(--pd-sel-bg); border-color: var(--pd-sel-border); }
.pd-tpl-edit-acts { display: flex; gap: 10px; margin-top: 6px; }
.pd-tpl-edit-acts .pd-btn { flex: 1 1 auto; justify-content: center; }

@media (max-width: 720px) {
  .pd-tpl-edit { grid-template-columns: minmax(0, 1fr); }
  .pd-tpl-edit-prev img { max-height: 32vh; }
  .pd-tpl-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; }
  .pd-tpl-edit-acts { flex-direction: column-reverse; }
}
/* La miniatura ya llega recortada al contenido (ver pdTplRenderDataUrl):
   la ficha impone una caja cuadrada igual para todas y la imagen se
   contiene dentro, así la rejilla no baila según el formato del artículo. */
.pd-tpl-card-box { aspect-ratio: 1 / 1; }

/* ===========================================================================
 * «Mis proyectos» (includes/class-pd-proyectos.php)
 * ---------------------------------------------------------------------------
 * Diseños guardados sin cuenta: el enlace de la barra, la ventana de guardado
 * y la página del listado. Referencia Vistaprint y el mismo vocabulario que
 * el resto del diseñador: rectángulos de 8 px (--pd-radius) con borde de 1 px,
 * tinta --pd-primary (#04292a), acento --pd-accent (#01696e) y el relleno de
 * selección --pd-sel-bg (#e2f0f0). Nada de píldoras y ninguna clase de
 * Tailwind: dist/output.css va precompilado y una clase nueva se quedaría sin
 * estilo en silencio.
 * =========================================================================== */

/* Enlace «Mis proyectos» en la barra del diseñador */
.pd-topbar-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--pd-accent);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  white-space: nowrap;
}
.pd-topbar-link:hover { background: var(--pd-sel-bg); border-color: var(--pd-sel-border); color: var(--pd-primary); }
@media (max-width: 640px) {
  /* En móvil la barra ya va justa: el listado se alcanza desde el pie y
     desde el propio mensaje de «guardado». */
  .pd-topbar-link { display: none; }
}

/* Ventana de guardado */
.pd-proy-modal {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  background: rgba(4, 41, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pd-proy-modal[hidden] { display: none; }
.pd-proy-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  padding: 22px 24px 20px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--pd-text);
  box-shadow: 0 18px 44px rgba(4, 41, 42, .22);
}
.pd-proy-box h3 { margin: 0 0 8px; font-size: 18px; color: var(--pd-primary); }
.pd-proy-box .pd-close { position: absolute; top: 10px; right: 10px; }
.pd-proy-nota { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: #5b6166; }
.pd-proy-nota strong { color: var(--pd-primary); }
.pd-proy-mail {
  margin: 4px 0 0;
  padding: 14px;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  background: #fafbfb;
}
.pd-proy-mail .pd-proy-nota { margin-bottom: 10px; }

.pd-proy-campo { display: block; margin: 0 0 12px; }
.pd-proy-campo > span { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--pd-primary); }
.pd-proy-campo input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--pd-text);
  background: #fff;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
}
.pd-proy-campo input:focus { outline: 0; border-color: var(--pd-sel-border); background: var(--pd-sel-bg); }

.pd-proy-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: #5b6166; }
.pd-proy-consent input { margin: 2px 0 0; flex: 0 0 auto; }
.pd-proy-consent a { color: var(--pd-accent); }
/* Trampa para robots: fuera de la vista pero sin display:none, que algunos
   rellenadores automáticos saltan. */
.pd-proy-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }

.pd-proy-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.pd-proy-acts .pd-btn { flex: 0 0 auto; }

.pd-proy-msg {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--pd-sel-border);
  border-radius: var(--pd-radius);
  background: var(--pd-sel-bg);
  color: var(--pd-primary);
}
.pd-proy-msg[hidden] { display: none; }
.pd-proy-msg.is-error { border-color: #d98080; background: #fdf2f2; color: #8a2020; }

/* Página del listado ([camisetalab_mis_proyectos]) */
.pd-proy {
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 16px 48px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--pd-text);
}
.pd-proy-head h1 { margin: 0 0 8px; font-size: 26px; color: var(--pd-primary); }
.pd-proy-head p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: #5b6166; max-width: 680px; }
.pd-proy-aviso {
  margin: 0 0 18px;
  padding: 12px 14px;
  font-size: 13.5px;
  border: 1px solid #d98080;
  border-radius: var(--pd-radius);
  background: #fdf2f2;
  color: #8a2020;
}
.pd-proy-vacio {
  padding: 40px 24px;
  text-align: center;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  background: #fff;
}
.pd-proy-vacio p { margin: 0 0 16px; font-size: 15px; color: #5b6166; }

.pd-proy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.pd-proy-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  overflow: hidden;
}
.pd-proy-card:hover { border-color: var(--pd-border-hover); }
.pd-proy-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  background: #f5f7f7;
  border-bottom: 1px solid var(--pd-border);
  text-decoration: none;
}
.pd-proy-thumb img { max-width: 88%; max-height: 88%; object-fit: contain; }
.pd-proy-thumb-vacia { font-size: 13px; font-weight: 600; color: var(--pd-accent); }
.pd-proy-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.pd-proy-nombre { margin: 0; font-size: 15px; font-weight: 700; color: var(--pd-primary); line-height: 1.35; }
.pd-proy-meta { margin: 0; font-size: 12.5px; line-height: 1.6; color: #5b6166; }
.pd-proy-caduca { color: #7a8086; }
.pd-proy-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.pd-proy-acciones .pd-btn { flex: 1 1 auto; min-height: 40px; padding: 9px 12px; font-size: 13px; }
.pd-proy-links { display: flex; gap: 14px; flex-wrap: wrap; }
.pd-proy-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--pd-accent);
  text-decoration: underline;
  cursor: pointer;
}
.pd-proy-link:hover { color: var(--pd-primary); }
.pd-proy-del { color: #8a2020; }
.pd-proy-email {
  margin: 2px 0 0;
  padding: 12px;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  background: #fafbfb;
}
.pd-proy-email[hidden] { display: none; }
.pd-proy-email .pd-btn { width: 100%; margin-top: 10px; min-height: 40px; font-size: 13px; }
.pd-proy-pie { margin: 26px 0 0; font-size: 13.5px; }
.pd-proy-pie a { color: var(--pd-accent); }
.pd-proy-cuenta a { color: var(--pd-accent); }