/* ═══════════════════════════════════════════════════════════════
   CUADROS SILS — Wall Builder
   Tipografía: SOLO Thoren Sans, la de la tienda. Aquí no se usa Crista.
═══════════════════════════════════════════════════════════════ */

:root {
  --sw-white:   var(--sils-blanco, #FFFFFF);
  --sw-black:   var(--sils-principal, #000000);
  --sw-fg:      var(--sils-principal, #000000);
  --sw-bg:      var(--sils-gris-claro, #F8F8F8);
  --sw-accent:  var(--sils-gris-claro, #F8F8F8);
  --sw-border:  var(--sils-fondo-imagenes, #EEEEEE);
  --sw-muted:   var(--sils-secundario, #6B6B6B);
  --sw-text:    var(--sils-principal, #000000);
  /* Una sola familia en todo el creador, la del texto de la tienda. Crista se queda
     para la tienda: aquí no se usa nunca. */
  --sw-font:    var(--sils-fuente-thoren, "Thoren Sans"), system-ui, sans-serif;
  --sw-serif:   var(--sils-fuente-thoren, "Thoren Sans"), system-ui, sans-serif;
  --sw-sidebar: 320px;
  --sw-topbar:  56px;
  --sw-radius:  9999px;

  /* Los colores de la herramienta también aquí (no solo en body.sw-pared-manda), para
     que valgan en cualquier sitio de la página. Desde el 30-sep-2026, la paleta del
     sistema (Bricks, --sils-*) con su valor de respaldo; antes, el kit de Elementor. */
  --ctp-negro:   var(--sils-principal,       #000000);
  --ctp-texto:   var(--sils-texto,           #2C2C2C);
  --ctp-gris:    var(--sils-secundario,      #6B6B6B);
  /* El gris de la referencia de la tarjeta del listado: el secundario al 75 % con blanco. */
  --ctp-gris-ref: color-mix(in srgb, var(--ctp-gris) 75%, var(--ctp-blanco));
  --ctp-borde:   var(--sils-enfasis,         #D5D3C6);
  --ctp-linea:   var(--sils-fondo-imagenes,  #EEEEEE);
  --ctp-verde:   var(--sils-verde-confianza,  #3E5F46);   /* el check de confianza, como en la ficha */
  --ctp-apoyo:   var(--sils-gris-claro,      #F8F8F8);
  --ctp-blanco:  var(--sils-blanco,          #FFFFFF);

  /* ── Las letras: los tamaños del sistema (--sils-txt-*) donde los tiene; pesos,
     espaciados y los tamaños que no tiene, con los valores del antiguo kit, que son
     los de siempre. Cada papel, un estilo:
       peq  «Texto pequeño»    lo corriente: datos, notas, enlaces, avisos
       dat  «Dato menor»       un dato junto a un nombre («Total aprox:»)
       enf  «Énfasis»          nombres, medidas, pestañas
       bot  «Botón»            los botones de acción (en mayúsculas)
       eti  «NUEVO Mini titulo» etiquetas en mayúsculas (AMBIENTE, HUECO 1 DE 9)
       tag  «Tags listing»     etiquetas en mayúsculas con más peso, contadores
       ind  «Indicativo»       mayúsculas de 14
       gra  «Texto Grande»     titulares de cartel y totales
       tit  «Títulos L»        titulares; los más grandes, proporcionales a este
     Los colores de contenido (las muestras de color de pared, el paspartú, la pared
     lisa) no son de interfaz y se quedan como están. ── */
  --ctp-t-peq-s:  13px;
  --ctp-t-peq-w:  300;
  --ctp-t-peq-ls: 1px;
  --ctp-t-dat-s:  var(--sils-txt-3xs, 12px);
  --ctp-t-enf-s:  var(--sils-txt-xs, 15px);
  --ctp-t-enf-w:  400;
  --ctp-t-enf-ls: 1px;
  --ctp-t-bot-s:  var(--sils-txt-2xs, 14px);
  --ctp-t-bot-w:  500;
  --ctp-t-bot-tt: uppercase;
  --ctp-t-eti-s:  var(--sils-txt-3xs, 12px);
  --ctp-t-eti-w:  300;
  --ctp-t-eti-tt: uppercase;
  --ctp-t-eti-ls: 1.6px;
  --ctp-t-tag-s:  var(--sils-txt-3xs, 12px);
  --ctp-t-tag-w:  400;
  --ctp-t-tag-tt: uppercase;
  --ctp-t-tag-ls: .25px;
  --ctp-t-ind-s:  var(--sils-txt-2xs, 14px);
  --ctp-t-ind-w:  400;
  --ctp-t-ind-tt: uppercase;
  --ctp-t-ind-ls: 1px;
  --ctp-t-gra-s:  17px;
  --ctp-t-gra-w:  normal;
  --ctp-t-gra-ls: 1px;
  --ctp-t-tit-s:  25px;
  --ctp-t-tit-w:  400;
  --ctp-t-tit-tt: uppercase;
  --ctp-t-tit-ls: .5px;
}
/* En el móvil, como hacía el kit: botones de 12, texto grande de 19 y títulos de 20. */
@media (max-width: 767px) {
  :root {
    --ctp-t-bot-s: var(--sils-txt-3xs, 12px);
    --ctp-t-gra-s: 19px;
    --ctp-t-tit-s: var(--sils-txt-l, 20px);
  }
}

/* ── Reset ─────────────────────────────────────────────────── */
html.sw-page body {
  background: var(--sw-white);
  color: var(--sw-text);
  font-family: var(--sw-font);
  -webkit-font-smoothing: antialiased;
}

/* Elementor conflict guard: neutralise global button overrides from theme/Elementor */
html.sw-page #sw-app button,
html.sw-page .sw-modal button {
  font-family: var(--sw-font) !important;
  box-shadow: none !important;
}
/* El radio lo pone el sistema: 4 px placas y botones, 2 px miniaturas, 12 px arriba
   en las hojas del móvil. Antes la regla de arriba forzaba esquina recta con
   !important a todos los botones y ninguno podía tener los 4 px (salían unos a 0 y
   otros a 4). Aquí va por defecto y con poco peso: cualquier componente lo cambia
   con su clase (las celdas de la tarjeta, la lupa redonda, las miniaturas). */
#sw-app button,
.sw-modal button { border-radius: var(--ctp-radio, 4px); }
/* ── App shell ─────────────────────────────────────────────── */
#sw-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* iOS Safari: address bar dinámica */
  width: 100%; /* no 100vw: al revisar, el panel lateral lo estrecha */
  overflow: hidden;
  /* Las placas se colocan respecto a la aplicación, no a la ventana: así, al revisar,
     las de la derecha se apartan con ella y no quedan debajo del panel. */
  position: relative;
}

/* ════════════════════════════════════════════════════════════
   CONTENT
════════════════════════════════════════════════════════════ */
#sw-content {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ── Filters (step 3) ─────────────────────────────────────── */
/* #sw-filters removed — filters now live inside #sw-art-modal-filters */

/* ── Wall color cards (integradas en el panel de fondos) ──── */
/* La tarjeta "Elige tu color" es un <label> con input[type=color] */
.sw-wc-picker-card { cursor: pointer; }
#sw-wall-color-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  border: none;
}
/* Fondo rueda de colores para la tarjeta del colorpicker */
.sw-wc-picker-card {
  background: conic-gradient(from 0deg, #e05252, #e09852, #d4c84a, #5dcc5d, #4ab8d4, #5252cc, #cc52cc, #e05252) !important;
}

/* ── Panel (scrollable content) ───────────────────────────── */
.sw-loading {
  padding: 40px 20px;
  font-family: var(--sw-font);
  font-size: var(--ctp-t-eti-s);
  color: var(--sw-muted);
  text-align: center;
  letter-spacing: var(--ctp-t-eti-ls) ;
  text-transform: var(--ctp-t-eti-tt);
}

/* ════════════════════════════════════════════════════════════
   CANVAS
════════════════════════════════════════════════════════════ */
#sw-canvas {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  padding: 0;
  background: var(--sw-bg);
}

#pictureWall {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

/* EL PLANO DE LA PARED.
   Mide 300 × 183 unidades, una por centímetro. El motor le pone la transformación
   (translate + scale) y la variable --sw-s con la escala, para que lo que NO debe
   escalar (rótulos, botones, bordes) se divida por ella. El tamaño real lo fija el
   motor en línea; estos valores son solo el punto de partida. */
#pictureWall #zoomElement,
#zoomElement,
#zoomElement.outer {
  background: none !important;   /* la hoja heredada le ponía #eee y tapaba la pared */
  width: 300px;
  height: 183px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  transform-origin: 0 0;
  will-change: transform;
}
#sw-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  transition: filter 220ms ease, box-shadow 450ms ease;
  z-index: 0;
}
/* Ambientes por capas (2.18). Encima de los cuadros: la luz de la pared, multiplicando
   (oscurece pared y cuadros por igual, con cualquier marco), y el primer plano, que los
   tapa. Por debajo de la barra de cada cuadro (15) y del señalado (16): eso se ve siempre.
   No cogen el ratón: se sigue tocando y arrastrando lo que haya detrás. */
.ctp-capa {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 380ms ease;
  z-index: 5;
}
#ctp-capa-luz { mix-blend-mode: multiply; }
#ctp-capa-delante { z-index: 6; }
/* Un hueco vacío no es un cuadro: es parte de los mandos. Va por encima de la luz y del
   primer plano (debajo, la luz lo igualaba al tono de la pared y no se veía hasta elegirlo).
   Mientras se prueba una obra en él vuelve abajo, para que la prueba se vea como quedará. */
.vw_size_items:not(:has(.chosenArticle)):not(:has(.ctp-prueba)) { z-index: 7; }
.ctp-capa.ctp-capa--puesta { opacity: 1; }
.ctp-capa.ctp-capa--sin-fundido { transition: none; }
/* La sombra del cuadro cae al lado contrario de la luz del ambiente. */
#zoomElement.ctp-luz-izq .chosenArticle .sw-art-marco,
#zoomElement.ctp-luz-izq .ctp-prueba .sw-art-marco {
  filter: drop-shadow(calc(1px * var(--sw-inv, .3)) calc(1px * var(--sw-inv, .3)) calc(2px * var(--sw-inv, .3)) color-mix(in srgb, var(--ctp-negro) 16%, transparent))
          drop-shadow(calc(6px * var(--sw-inv, .3)) calc(6px * var(--sw-inv, .3)) calc(16px * var(--sw-inv, .3)) color-mix(in srgb, var(--ctp-negro) 12%, transparent)) !important;
}
#zoomElement.ctp-luz-der .chosenArticle .sw-art-marco,
#zoomElement.ctp-luz-der .ctp-prueba .sw-art-marco {
  filter: drop-shadow(calc(-1px * var(--sw-inv, .3)) calc(1px * var(--sw-inv, .3)) calc(2px * var(--sw-inv, .3)) color-mix(in srgb, var(--ctp-negro) 16%, transparent))
          drop-shadow(calc(-6px * var(--sw-inv, .3)) calc(6px * var(--sw-inv, .3)) calc(16px * var(--sw-inv, .3)) color-mix(in srgb, var(--ctp-negro) 12%, transparent)) !important;
}
#zoomElement > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Welcome overlay */
#welcome {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ctp-negro) 50%, transparent);
  z-index: 10;
  opacity: 1;
  transition: opacity 600ms ease;
  animation: swFadeIn 600ms ease both;
}
@keyframes swFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.startPanel {
  text-align: center;
  max-width: 480px;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: none !important;
}
/* ════════════════════════════════════════════════════════════
   COMPOSITION SLOTS
════════════════════════════════════════════════════════════ */
#draggableContainer,
.articlesContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
}

.vw_size_items {
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  display: block;
  box-sizing: border-box;  /* el hueco lleva su alto en centímetros, sin trucos */
  outline: none;
  font-family: var(--sw-font);
  font-size: calc(var(--ctp-t-eti-s) * var(--sw-inv, 1)); /* el rótulo no se escala con la pared */
  font-weight: var(--ctp-t-eti-w);
  color: var(--sw-muted);
  text-transform: var(--ctp-t-eti-tt);
  letter-spacing: var(--ctp-t-eti-ls);
  transition: background 200ms ease, box-shadow 200ms ease, outline-color 200ms ease, opacity 200ms ease;
}
/* Con obra dentro no se recorta: el marco sobresale de la obra y proyecta sombra. */
.vw_size_items:has(.chosenArticle) { overflow: visible; }
.vw_size_items .inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  /* La hoja heredada de la plantilla antigua le pone un tamaño fijo a «.inner»
     (21,6 px). Dentro del plano eso se multiplica por el zoom de la pared y el
     rótulo sale gigante. Aquí se obliga a heredar del hueco, que sí lleva el
     tamaño corregido por la escala. */
  font-size: inherit !important;
  line-height: 1.2;
}
/* El rótulo: su medida, o su número si el hueco es pequeño en pantalla. Se
   compone a 11 px y el motor lo escala entero (swAjustarRotulos). */
.vw_size_items .sw-hueco-rotulo {
  font-size: var(--ctp-t-eti-s) !important;
  font-family: var(--sw-font);
  font-weight: var(--ctp-t-eti-w);
  letter-spacing: var(--ctp-t-eti-ls) ;
  color: var(--sw-muted);
  text-transform: var(--ctp-t-eti-tt);
  white-space: nowrap;
  opacity: 0.9;
}
.vw_size_items:has(.chosenArticle) .sw-hueco-rotulo { display: none; }

/* ── Estados del hueco (sistema, «02 Hueco en la pared») ─────────────────────
   Todo lo que tiene grosor se mide en píxeles de pantalla: se multiplica por la
   inversa de la escala (--sw-inv) para verse igual con cualquier zoom. */
/* Vacío: blanco al 45 % con filo blanco. */
.vw_size_items:not(:has(.chosenArticle)) {
  background: color-mix(in srgb, var(--ctp-blanco) 45%, transparent) !important;
  box-shadow: inset 0 0 0 calc(1px * var(--sw-inv, 1)) color-mix(in srgb, var(--ctp-blanco) 95%, transparent);
}
.vw_size_items:not(:has(.chosenArticle)):hover { background: color-mix(in srgb, var(--ctp-blanco) 62%, transparent) !important; }
/* Vacío activo: blanco al 90 % y anillo negro de 2 px; la tarjeta está abierta para él. */
.vw_size_items.vw_size_selected:not(:has(.chosenArticle)) {
  background: color-mix(in srgb, var(--ctp-blanco) 90%, transparent) !important;
  box-shadow: 0 0 0 calc(1.5px * var(--sw-inv, 1)) var(--ctp-negro, #000);
}
/* Lleno: la obra con su marco y su sombra (los dibuja el motor de marcos). */
.vw_size_items:has(.chosenArticle) { background: transparent !important; box-shadow: none; }
/* Lleno activo: anillo negro continuo por fuera del marco, con un poco de aire. */
.vw_size_items.vw_size_selected:has(.chosenArticle)::before {
  /* Con sombra y no con «outline»: el contorno se redondearía a 1 px antes de
     ampliar la pared (ver el borde de la prueba). */
  content: ''; position: absolute; pointer-events: none;
  inset: calc(-4px * var(--sw-inv, 1));
  box-shadow: 0 0 0 calc(1px * var(--sw-inv, 1)) var(--ctp-negro, #000);
}
/* Con un hueco activo el resto de la pared no se apaga: el anillo basta. */
.vw_size_selected,
.vw_size_items.vw_size_selected { transform: none !important; }

.chosenArticle {
  position: absolute;
  inset: 0;
  background-size: cover !important;
  background-position: center !important;
  animation: swPlaceIn 300ms ease both;
}
@keyframes swPlaceIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.chosenArticle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Capa donde el motor de Sils Addons pinta el marco.
   El motor le impone position:relative y una presentación en 3D pensada para la
   ficha de producto (giro de 25° y sombra lateral grande). En la pared la obra va
   de frente y colgada, así que aquí se anula el giro y se deja una sombra corta
   hacia abajo, en proporción al tamaño del marco. */
/* El canto de lienzo es cosa de los marcos flotantes (Original y Vanguard). El motor
   lo añade cuando no está en una ficha de obra gráfica, que es nuestro caso aquí; en
   la pared, con marcos Q4attro, sobra. */
.chosenArticle .mf-canto-obra,
.ctp-prueba .mf-canto-obra,
.chosenArticle .legacy-canto-marco,
.ctp-prueba .legacy-canto-marco {
  display: none !important;
}

/* ── EL MARCO, DE FRENTE (en las colgadas y en la que se prueba) ───────────
   El motor dibuja el marco para verse GIRADO 25° en la ficha de producto: sus
   cuatro lados van descolocados a propósito (arriba sobresale 9 px, a la derecha
   12,5, abajo 7,5, a la izquierda 4,5) y esos desajustes los tapan las «paredes
   interiores» y el canto, que son la perspectiva de la caja.
   En la pared la obra va de frente, así que en plano eso se veía como un contorno
   descuadrado y flojo. Aquí el marco se cuadra: los cuatro lados abrazan la obra y
   las piezas de perspectiva se apagan. Minimal ya viene cuadrado de serie. */
.chosenArticle .mq-frame,
.ctp-prueba .mq-frame {
  top:    calc(-1 * var(--mq-grosor));
  left:   calc(-1 * var(--mq-grosor));
  right:  calc(-1 * var(--mq-grosor));
  bottom: calc(-1 * var(--mq-grosor));
}
.chosenArticle .ma-frame,
.ctp-prueba .ma-frame {
  top:    calc(-1 * var(--ma-grosor));
  left:   calc(-1 * var(--ma-grosor));
  right:  calc(-1 * var(--ma-grosor));
  bottom: calc(-1 * var(--ma-grosor));
}
.chosenArticle .mq-pared-int--sup,
.ctp-prueba .mq-pared-int--sup,
.chosenArticle .mq-pared-int--der,
.ctp-prueba .mq-pared-int--der,
.chosenArticle .mq-pared-int--inf,
.ctp-prueba .mq-pared-int--inf,
.chosenArticle .mq-canto-marco,
.ctp-prueba .mq-canto-marco,
.chosenArticle .ma-pared-int--sup,
.ctp-prueba .ma-pared-int--sup,
.chosenArticle .ma-pared-int--der,
.ctp-prueba .ma-pared-int--der,
.chosenArticle .ma-pared-int--inf,
.ctp-prueba .ma-pared-int--inf,
.chosenArticle .ma-canto-marco,
.ctp-prueba .ma-canto-marco,
.chosenArticle .mg-canto-marco,
.ctp-prueba .mg-canto-marco,
.chosenArticle .mf-canto-marco,
.ctp-prueba .mf-canto-marco {
  display: none !important;
}

/* El marco va DENTRO del hueco.
   Las composiciones están medidas con el marco incluido: el hueco es la pieza entera
   (obra + marco), no solo la obra. El motor dibuja el marco por fuera de su elemento,
   así que la capa se encoge el grosor del marco por cada lado; el borde de fuera del
   marco cae entonces justo en el borde del hueco y las piezas ya no se pisan.
   Se usa el grosor de Q4attro (--mq-grosor), que es el acabado con el que se monta la
   pared. Si algún día entra Minimal o Artic, hay que mirar --mg-grosor y --ma-grosor. */
.chosenArticle .sw-art-marco,
.ctp-prueba .sw-art-marco {
  display: block !important;
  width:  calc(100% - 2 * var(--mq-grosor, 0px));
  height: calc(100% - 2 * var(--mq-grosor, 0px));
  margin: var(--mq-grosor, 0px);
  transform: none !important;
  /* La sombra del sistema, en píxeles de pantalla: corta y suave. */
  filter: drop-shadow(0 calc(1px * var(--sw-inv, .3)) calc(2px * var(--sw-inv, .3)) color-mix(in srgb, var(--ctp-negro) 16%, transparent))
          drop-shadow(0 calc(6px * var(--sw-inv, .3)) calc(16px * var(--sw-inv, .3)) color-mix(in srgb, var(--ctp-negro) 12%, transparent)) !important;
}

/* ── MARCOS FLOTANTES (Original y Vanguard) EN LA PARED (2.26.1) ───────────
   El motor los calibra para la ficha: marco y ranura del mismo ancho (3 + 3), ranura
   negra al 55 % y cada lado oscurecido para dar volumen con la obra girada. Al tamaño
   de la pared eso son 2-3 px de marco y otros tantos de negro: se veía una raya oscura
   y el color no se apreciaba (el blanco, nada). Aquí el frontal se ensancha y la
   ranura se afina, sumando lo mismo que Q4attro (4,5), así que el marco sigue cayendo
   justo en el borde del hueco; la ranura queda en gris suave y los lados casi limpios. */
.chosenArticle .sw-art-marco,
.ctp-prueba .sw-art-marco {
  --mf-grosor: calc(var(--sils-marco-escala, 1) * 3.4px);
  --mf-gap: calc(var(--sils-marco-escala, 1) * 1.1px);
}
.chosenArticle .mf-rebaje,
.ctp-prueba .mf-rebaje {
  background: color-mix(in srgb, var(--ctp-negro) 28%, transparent) !important;
  box-shadow: none !important;
}
.chosenArticle .mf-lado--top, .chosenArticle .mf-lado--bottom,
.ctp-prueba .mf-lado--top, .ctp-prueba .mf-lado--bottom {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--ctp-blanco) 12%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--ctp-negro) 6%, transparent) 100%),
    var(--mf-textura-h, none) !important;
}
.chosenArticle .mf-lado--left, .chosenArticle .mf-lado--right,
.ctp-prueba .mf-lado--left, .ctp-prueba .mf-lado--right {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--ctp-blanco) 12%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--ctp-negro) 6%, transparent) 100%),
    var(--mf-textura-v, none) !important;
}

/* Barra de acciones del hueco: solo iconos, abajo, holgados y de línea fina */
.sw-art-controls {
  position: absolute;
  bottom: calc(8px * var(--sw-inv, 1));
  left: 50%;
  /* Va dentro del plano, que está escalado: se divide por la escala para que los
     botones midan lo mismo en pantalla sea cual sea el zoom de la pared. */
  transform: translateX(-50%) scale(var(--sw-inv, 1));
  transform-origin: bottom center;
  z-index: 15;
  display: none;
  align-items: center;
  gap: 2px;
  background: color-mix(in srgb, var(--ctp-negro) 66%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--ctp-blanco) 12%, transparent);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ctp-negro) 28%, transparent);
}
.vw_size_items:hover .sw-art-controls,
.vw_size_selected .sw-art-controls { display: flex; }

/* En táctil no hay «pasar por encima»: la barra se queda puesta. */
@media (hover: none) {
  .vw_size_items:has(.chosenArticle) .sw-art-controls { display: flex; }
}

#sw-app .sw-art-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
  padding: 0;
  color: color-mix(in srgb, var(--ctp-blanco) 88%, transparent);
  flex-shrink: 0;
}
#sw-app .sw-art-btn svg { width: 15px; height: 15px; }
#sw-app .sw-art-btn:hover {
  background: color-mix(in srgb, var(--ctp-blanco) 18%, transparent) !important;
  color: var(--ctp-blanco);
}
#sw-app .sw-art-btn--clear:hover {
  background: color-mix(in srgb, var(--ctp-negro) 85%, transparent) !important;
  color: var(--ctp-blanco);
}

/* Huecos pequeños: la barra se encoge para no comerse la obra. */
@media (max-width: 900px) {
  #sw-app .sw-art-btn { width: 26px; height: 26px; }
  #sw-app .sw-art-btn svg { width: 14px; height: 14px; }
}

.sw-art-btn svg { display: block; }

/* Artwork image — always absolutely centered so transforms work correctly */
.chosenArticle .sw-art-img,
.ctp-prueba .sw-art-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  transition: transform 280ms ease, width 280ms ease, height 280ms ease;
  animation: none;
}

/* ════════════════════════════════════════════════════════════
   STEP 1 — Backgrounds picker (AJAX response)
════════════════════════════════════════════════════════════ */
.pickerListContainer { min-height: 100%; }
.backgroundList      { margin: 0; padding: 0; list-style: none; height: auto !important; overflow-y: visible !important; }

.listing.backgroundList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.sw-bg-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--sw-bg);
  aspect-ratio: 4 / 3;
  border: none;
  border-radius: 0;
  margin: 1px;
  transition: opacity 150ms ease;
}
.sw-bg-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

/* Custom photo upload card */
.sw-bg-upload-card {
  background: var(--sw-white) !important;
  border: 1px dashed var(--sw-border) !important;
  background-size: cover !important;
  background-position: center !important;
}
.sw-bg-upload-card:hover { opacity: 1 !important; border-color: var(--sw-black) !important; }
/* Hide color swatches */
.sw-bg-card .colorList { display: none; }

/* Name label overlay */
.sw-bg-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px var(--sils-esp-2xs, 8px) var(--sils-esp-2xs, 8px);
  background: linear-gradient(transparent, color-mix(in srgb, var(--ctp-negro) 60%, transparent));
  font-family: var(--sw-font);
  font-size: var(--ctp-t-tag-s);
  font-weight: var(--ctp-t-bot-w);
  letter-spacing: var(--ctp-t-tag-ls) ;
  text-transform: var(--ctp-t-tag-tt);
  color: var(--ctp-blanco);
  text-align: left;
  pointer-events: none;
}

/* Checkmark badge */
.sw-bg-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sw-black);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.sw-bg-badge svg { display: block; }

/* Color swatches row */
.dataList.colorList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--sils-esp-2xs, 8px) 10px;
  background: var(--sw-white);
  border-bottom: 1px solid var(--sw-border);
}
.colorList .item  { padding: 0 !important; margin: 0 !important; }
.colorList .color {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: transform 150ms ease, outline-color 150ms ease;
  border: 1.5px solid color-mix(in srgb, var(--ctp-negro) 8%, transparent) !important;
}
.colorList .color:hover     { transform: scale(1.25); outline-color: var(--sw-black); }

/* ════════════════════════════════════════════════════════════
   STEP 2 — Composition picker (AJAX response)
════════════════════════════════════════════════════════════ */
.sw-comp-list { padding: 0; }
.sw-comp-item {
  display: flex;
  align-items: center;
  gap: var(--sils-esp-xs, 12px);
  padding: 10px 14px;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--sw-border);
  border-radius: 0;
  margin: 0;
  transition: background 150ms ease;
  background: var(--sw-white);
}

.sw-comp-preview {
  width: 80px;
  height: 56px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--sw-accent);
  position: relative;
}
.sw-comp-preview svg { display: block; width: 100%; height: 100%; }

.sw-comp-info { flex: 1; min-width: 0; }
.sw-comp-name {
  font-family: var(--sw-font);
  font-size: var(--ctp-t-peq-s);
  font-weight: var(--ctp-t-bot-w);
  color: var(--sw-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; letter-spacing: var(--ctp-t-peq-ls); }
.sw-comp-meta {
  font-family: var(--sw-font);
  font-size: var(--ctp-t-peq-s);
  color: var(--sw-muted);
  margin-top: 2px; letter-spacing: var(--ctp-t-peq-ls); }

.sw-comp-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--sw-black);
}

/* ════════════════════════════════════════════════════════════
   STEP 3 — Paintings grid (AJAX response)
════════════════════════════════════════════════════════════ */
#sw-app .articleList { padding: 0; }
#sw-app .articleList > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
#sw-app .articleList .item,
#sw-app .articleList .item.medium-half,
#sw-app .articleList .item.large-third,
#sw-app .articleList .item.small-full {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--sw-border) !important;
  border-radius: 0;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 150ms ease;
  box-shadow: none !important;
  flex: none !important;
}
#sw-app .articleList .item:hover { border-color: color-mix(in srgb, var(--ctp-negro) 30%, transparent) !important; }
#sw-app .articleList .item.is-selected {
  border: 1px solid var(--sw-black) !important;
  box-shadow: 0 0 0 1px var(--sw-black) !important;
}
#sw-app .articleList .item .inner { padding: 0; width: 100%; }
#sw-app .articleList .item .image {
  overflow: hidden;
  line-height: 0;
  background: var(--sw-bg);
  width: 100%;
}
#sw-app .articleList .item .image .imgInner { width: 100%; line-height: 0; }
#sw-app .articleList .item .image img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}
#sw-app .articleList .item .price { padding: var(--sils-esp-2xs, 8px); }
#sw-app .articleList .item .price > span {
  display: block;
  font-family: var(--sw-font);
  font-size: var(--ctp-t-tag-s);
  font-weight: var(--ctp-t-bot-w);
  text-transform: var(--ctp-t-tag-tt);
  letter-spacing: var(--ctp-t-tag-ls) ;
  color: var(--sw-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ════════════════════════════════════════════════════════════
   MOBILE
════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* (La maquetación móvil de la pared va en «MÓVIL», al final: la de aquí era la
     de la barra lateral antigua y dejaba la pared abajo con media pantalla vacía.) */

  /* ── Welcome overlay ──────────────────────────────────────── */
  .startPanel { padding: 28px 20px; gap: var(--sils-esp-xs, 12px); }
  /* ── Toast ────────────────────────────────────────────────── */
  #sw-toast {
    max-width: calc(100vw - 32px);
    white-space: normal;
    text-align: left;
  }

  /* ── Modal Mis diseños: una columna ───────────────────────── */
}

/* ════════════════════════════════════════════════════════════
   LANDSCAPE MOBILE
   max-height: 480px → teléfono en horizontal (320–430px alto).
   Los estilos portrait (max-width: 767px) ya aplican para móviles
   pequeños en landscape (steps horizontales, tipografía compacta).
   Solo sobreescribimos el contenedor: sidebar lateral 220px + canvas.
════════════════════════════════════════════════════════════ */
@media (max-height: 480px) {

  /* ── Content: sidebar izquierda + canvas derecha ─────────── */
  #sw-content {
    flex-direction: row !important;
    height: 100dvh;
    overflow: hidden;
  }

  /* ── Canvas: ocupa el resto, altura completa ─────────────── */
  #sw-canvas {
    flex: 1 !important;
    height: 100dvh !important;
    padding: 0;
  }

  }

/* ════════════════════════════════════════════════════════════
   ROTATE OVERLAY
   Se activa en móvil portrait: aspect-ratio < 1 (más alto que ancho)
   y anchura ≤ 767px. En landscape desaparece solo.
════════════════════════════════════════════════════════════ */
@keyframes sw-rotate-anim {
  0%, 30%  { transform: rotate(0deg); }
  60%, 90% { transform: rotate(90deg); }
  100%     { transform: rotate(0deg); }
}
/* ════════════════════════════════════════════════════════════
   ARTWORK MODAL (step 3 — seleccionar cuadro)
════════════════════════════════════════════════════════════ */

/* ── Body (scrollable artwork grid) ─────────────────────── */
/* ════════════════════════════════════════════════════════════
   STEP 3 SIDEBAR — Resumen de slots
════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   BACKGROUND UPLOAD ACTION SHEET
════════════════════════════════════════════════════════════ */
#sw-bg-upload-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9600;
  align-items: flex-end;
  justify-content: center;
}
#sw-bg-upload-sheet.is-open { display: flex; }

#sw-bg-upload-sheet-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ctp-negro) 45%, transparent);
}

#sw-bg-upload-sheet-box {
  position: relative;
  background: var(--sw-white);
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--sw-border);
  border-top: 2px solid var(--sw-black);
  border-bottom: none;
  margin: 0 var(--sils-esp-s, 16px);
  overflow: hidden;
}
.sw-bg-sheet-btn,
#sw-bg-sheet-cancel {
  display: flex;
  align-items: center;
  gap: var(--sils-esp-xs, 12px);
  width: 100%;
  padding: 15px 20px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--sw-border);
  font-family: var(--sw-font);
  font-size: var(--ctp-t-bot-s);
  font-weight: var(--ctp-t-bot-w);
  color: var(--sw-fg);
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease;
  box-sizing: border-box; letter-spacing: normal; text-transform: var(--ctp-t-bot-tt); }
.sw-bg-sheet-btn:hover,
#sw-bg-sheet-cancel:hover { background: var(--sw-bg); }
#sw-bg-sheet-cancel {
  color: var(--sw-muted);
  font-size: var(--ctp-t-bot-s);
  font-weight: var(--ctp-t-bot-w);
  letter-spacing: normal ;
  text-transform: var(--ctp-t-bot-tt);
  justify-content: center;
  border-bottom: none;
}

/* ════════════════════════════════════════════════════════════
   MODALS (Guardar / Compartir / Error)
════════════════════════════════════════════════════════════ */
.sw-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  align-items: center;
  justify-content: center;
}
.sw-modal.is-open { display: flex; }

.sw-modal-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ctp-negro) 45%, transparent);
  cursor: pointer;
}

.sw-modal-box {
  position: relative;
  background: var(--sw-white);
  border: 1px solid var(--sw-border);
  border-radius: var(--ctp-radio, 4px);
  padding: 32px;
  width: 100%;
  max-width: 400px;
  margin: var(--sils-esp-s, 16px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sw-modal-box--cart {
  align-items: center;
  text-align: center;
  gap: 18px;
}

@keyframes sw-spin {
  to { transform: rotate(360deg); }
}
.sw-cart-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--sw-border);
  border-top-color: var(--sw-black);
  border-radius: 50%;
  animation: sw-spin 0.75s linear infinite;
}

.sw-modal .sw-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: var(--sils-esp-3xs, 4px);
  color: var(--sw-muted) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sw-modal .sw-modal-close:hover { color: var(--sw-fg) !important; }

.sw-modal .sw-modal-title {
  font-family: var(--sw-font);
  font-size: var(--ctp-t-ind-s);
  font-weight: var(--ctp-t-bot-w);
  letter-spacing: var(--ctp-t-ind-ls) ;
  text-transform: var(--ctp-t-ind-tt);
  margin: 0;
  color: var(--sw-fg) !important;
}

.sw-modal .sw-modal-label {
  font-size: var(--ctp-t-tag-s);
  font-weight: var(--ctp-t-bot-w);
  letter-spacing: var(--ctp-t-tag-ls) ;
  text-transform: var(--ctp-t-tag-tt);
  color: var(--sw-muted);
}

.sw-modal .sw-modal-input {
  width: 100%;
  border: 1px solid var(--sw-border) !important;
  border-radius: var(--ctp-radio, 4px);
  padding: 9px var(--sils-esp-xs, 12px);
  font-family: var(--sw-font);
  font-size: var(--ctp-t-peq-s);
  color: var(--sw-fg) !important;
  background: var(--sw-white) !important;
  box-sizing: border-box;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 150ms; letter-spacing: var(--ctp-t-peq-ls); }
.sw-modal .sw-modal-input:focus {
  border-color: var(--sw-fg) !important;
  box-shadow: none !important;
  outline: none !important;
}
.sw-modal .sw-modal-input[readonly] { color: var(--sw-muted) !important; cursor: default; }

.sw-modal .sw-modal-btn-primary {
  background: var(--sw-fg) !important;
  color: var(--sw-white) !important;
  border: none !important;
  border-radius: var(--ctp-radio, 4px);
  padding: 10px 20px;
  font-family: var(--sw-font);
  font-size: var(--ctp-t-bot-s);
  font-weight: var(--ctp-t-bot-w);
  letter-spacing: normal ;
  text-transform: var(--ctp-t-bot-tt);
  cursor: pointer;
  transition: background 150ms;
  box-shadow: none !important;
}
.sw-modal .sw-modal-btn-primary:hover {
  background: var(--ctp-texto) !important;
  color: var(--sw-white) !important;
}

.sw-modal .sw-modal-btn-secondary {
  background: none !important;
  color: var(--sw-fg) !important;
  border: 1px solid var(--sw-border) !important;
  border-radius: var(--ctp-radio, 4px);
  padding: 9px var(--sils-esp-s, 16px);
  font-family: var(--sw-font);
  font-size: var(--ctp-t-bot-s);
  font-weight: var(--ctp-t-bot-w);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms, background 150ms;
  box-shadow: none !important; letter-spacing: normal; text-transform: var(--ctp-t-bot-tt); }
.sw-modal .sw-modal-btn-secondary:hover {
  background: var(--sw-accent) !important;
  border-color: var(--sw-fg) !important;
  color: var(--sw-fg) !important;
}

.sw-modal .sw-modal-msg {
  font-size: var(--ctp-t-peq-s);
  color: var(--sw-muted);
  margin: 0;
  line-height: 1.55; letter-spacing: var(--ctp-t-peq-ls); }

.sw-modal .sw-modal-login-actions {
  display: flex;
  gap: 10px;
}
.sw-modal .sw-modal-login-actions .sw-modal-btn-primary,
.sw-modal .sw-modal-login-actions .sw-modal-btn-secondary {
  flex: 1;
  text-align: center !important;
  text-decoration: none !important;
  display: block;
  box-sizing: border-box;
}


/* El aviso (sistema, «Avisos»): placa negra, texto blanco, 13 px. Confirmación
   4 s; con acción 6 s o hasta tocarla; error en gris oscuro, se queda hasta que se
   toca. Entra bajando un poco. */
#sw-toast {
  position: fixed;
  /* En la fila de las placas, en medio: nunca encima de la tarjeta abierta. */
  top: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--ctp-negro, #000);
  color: var(--ctp-blanco, #fff);
  font-family: var(--ctp-sans, var(--sw-font));
  font-size: var(--ctp-t-peq-s);
  font-weight: var(--ctp-t-peq-w);
  line-height: 1.4;
  padding: var(--sils-esp-xs, 12px) var(--sils-esp-s, 16px);
  border-radius: var(--sils-radio, 4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ctp-negro) 18%, transparent);
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease, transform 300ms cubic-bezier(.2,.7,.2,1);
  z-index: 9999;
  max-width: calc(100vw - 32px); letter-spacing: var(--ctp-t-peq-ls); }
#sw-toast.sw-toast--error { background: var(--ctp-texto, #2C2C2C); pointer-events: auto; cursor: pointer; }
#sw-toast-icon { display: none; }
#sw-toast.sw-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Share icons */
.sw-modal .sw-share-btns {
  display: flex;
  gap: 10px;
}
.sw-modal .sw-share-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--sw-border) !important;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sw-fg) !important;
  background: none !important;
  transition: background 150ms, border-color 150ms;
}
.sw-modal .sw-share-icon:hover {
  background: var(--sw-accent) !important;
  border-color: var(--sw-fg) !important;
  color: var(--sw-fg) !important;
}
.sw-modal .sw-share-icon a {
  color: inherit !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

/* Share image preview */
.sw-modal .shareImage {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid var(--sw-border);
  border-radius: 0;
  background: var(--sw-bg);
}
.sw-modal .shareImage img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Share link row */
.sw-modal .sw-share-link-row {
  display: flex;
  gap: var(--sils-esp-2xs, 8px);
  align-items: center;
}

/* (Las reglas del carrito lateral para el antiguo paquete «Composición personalizada»
   —.sw-bundle-*— se han quitado: la pared entra al carrito por Sils Addons, que pinta
   sus filas y carga sus estilos con el carrito.) */

/* ══════════════════════════════════════════════════════════════════════════
   FASE 2a · LA PARED MANDA
   La pared ocupa la pantalla y la interfaz va encima, en placas. Los colores y
   la letra son los del sistema (--sils-*): SOLO Thoren Sans. Crista no se usa aquí.
   ══════════════════════════════════════════════════════════════════════════ */
body.sw-pared-manda {
  --ctp-negro:   var(--sils-principal,   #000000);
  --ctp-texto:   var(--sils-texto,      #2C2C2C);
  --ctp-gris:    var(--sils-secundario, #6B6B6B);
  --ctp-arena:   var(--sils-marron-claro,   #BCAEA4);
  --ctp-borde:   var(--sils-enfasis,    #D5D3C6);
  --ctp-linea:   var(--sils-fondo-imagenes,   #EEEEEE);
  --ctp-apoyo:   var(--sils-gris-claro,   #F8F8F8);
  --ctp-blanco:  var(--sils-blanco,   #FFFFFF);
  /* SOLO Thoren Sans. Crista no entra en el creador de paredes. */
  --ctp-sans:    var(--sils-fuente-thoren, "Thoren Sans"), system-ui, sans-serif;
  --ctp-serif:   var(--ctp-sans);
  --ctp-radio:   4px;
  --ctp-margen:  24px;
}

/* Fuera la carcasa de pasos: la pared es la pantalla. Se ocultan, no se borran:
   partes del editor todavía escriben en ellas y se rehacen en 2b y 2c. */
body.sw-pared-manda #welcome { display: none !important; }

body.sw-pared-manda #sw-content { inset: 0; }
body.sw-pared-manda #sw-canvas  { width: 100%; }

/* ── Placas ─────────────────────────────────────────────────────────────── */
#sw-placas { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
#sw-placas .sw-placas__zona { position: absolute; display: flex; gap: var(--sils-esp-2xs, 8px); pointer-events: auto; }
.sw-placas__zona--ai { top: var(--ctp-margen); left: var(--ctp-margen); }
.sw-placas__zona--ad { top: var(--ctp-margen); right: var(--ctp-margen); }
.sw-placas__zona--bi { bottom: var(--ctp-margen); left: var(--ctp-margen); }
.sw-placas__zona--bd { bottom: var(--ctp-margen); right: var(--ctp-margen); }

#sw-app .sw-placa {
  background: var(--ctp-blanco);
  border: 0;
  border-radius: var(--ctp-radio);
  box-shadow: none;
  font-family: var(--ctp-sans);
  color: var(--ctp-texto);
  display: flex;
  align-items: center;
}

#sw-app .sw-placa--marca {
  background: var(--ctp-negro);
  color: var(--ctp-blanco);
  padding: 11px 14px;
  gap: var(--sils-esp-xs, 12px);
}
.sw-placa__logo { height: 16px; width: auto; display: block; color: var(--ctp-blanco); }
/* La escuadra del logotipo es un <polygon> sin color propio: salía negra, invisible sobre
   la placa negra. Va con el color del texto, como las letras. */
.sw-placa__logo polygon { fill: currentColor; }
.sw-placa--marca .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sw-placa__sep { width: 1px; height: 14px; background: var(--ctp-gris); display: block; }

.sw-placa__et {
  font-family: var(--ctp-sans);
  font-size: var(--ctp-t-eti-s); font-weight: var(--ctp-t-peq-w);
  letter-spacing: var(--ctp-t-eti-ls) ; text-transform: var(--ctp-t-eti-tt);
  color: var(--ctp-gris);
}
.sw-placa__et--claro { color: var(--ctp-blanco); }

#sw-app .sw-placa--accion {
  padding: 11px 14px;
  /* Son botones: el estilo «Botón», como «Revisar pared» a su lado. */
  font-size: var(--ctp-t-bot-s); font-weight: var(--ctp-t-bot-w); text-transform: var(--ctp-t-bot-tt);
  cursor: pointer;
  transition: color 160ms ease; letter-spacing: normal; }
#sw-app .sw-placa--accion:hover { color: var(--ctp-negro); }
#sw-app .sw-placa--accion[disabled] { color: var(--ctp-borde); cursor: default; }

#sw-app .sw-placa--resumen { padding: 6px 6px 6px var(--sils-esp-s, 16px); gap: var(--sils-esp-s, 16px); }
.sw-placa__obras { font-size: var(--ctp-t-peq-s); color: var(--ctp-gris); white-space: nowrap; letter-spacing: var(--ctp-t-peq-ls); }
.sw-placa__total { font-size: var(--ctp-t-enf-s); font-weight: var(--ctp-t-bot-w); white-space: nowrap; letter-spacing: var(--ctp-t-enf-ls); }

#sw-app .sw-btn-primario {
  background: var(--ctp-negro) !important;
  color: var(--ctp-blanco) !important;
  border: 0 !important;
  border-radius: var(--ctp-radio);
  font-family: var(--ctp-sans);
  font-size: var(--ctp-t-bot-s); font-weight: var(--ctp-t-bot-w);
  padding: 10px var(--sils-esp-s, 16px);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 160ms ease; letter-spacing: normal; text-transform: var(--ctp-t-bot-tt); }
#sw-app .sw-btn-primario:hover { opacity: .88; }
#sw-app .sw-btn-primario[disabled] { background: var(--ctp-borde) !important; color: var(--ctp-texto) !important; cursor: default; }

/* La placa de ajustes lleva dos líneas por celda (rótulo y valor), así que su
   alto lo pone el contenido. Antes quedaba fijada en 38 px y el valor se salía
   por debajo: mucho aire arriba y nada abajo. */
#sw-app .sw-placa--ajustes {
  padding: 0;
  min-height: 0 !important;
  align-items: stretch;
}
/* El alto de la tarjeta lo pone siempre el guion, que lo anima al abrir y al
   cerrar y lo suelta al terminar. Aquí no se impone nada: cualquier
   «height: auto !important» le gana al valor que se está animando y la tarjeta
   pega un salto justo al cerrarse. */
#sw-app .sw-celda {
  background: none !important;
  border: 0 !important;
  border-left: 1px solid var(--ctp-linea) !important;
  padding: var(--sils-esp-xs, 12px) 22px;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.25;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  cursor: pointer; font-family: var(--ctp-sans);
  transition: background 160ms ease;
}
#sw-app .sw-celda:first-child { border-left: 0 !important; }
#sw-app .sw-celda:hover { background: var(--ctp-apoyo) !important; }
.sw-celda__v { font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-bot-w); color: var(--ctp-texto); letter-spacing: var(--ctp-t-peq-ls); }

.sw-aviso-huecos {
  background: color-mix(in srgb, var(--ctp-negro) 78%, transparent); color: var(--ctp-blanco);
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s);
  padding: 10px 14px; border-radius: var(--ctp-radio); letter-spacing: var(--ctp-t-peq-ls); }

/* Placa de entrada: ocupa el ancho, en lugar de las de abajo. */
#sw-app .sw-btn-enlace {
  background: none !important; border: 0 !important; padding: 0;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-enf-s); color: var(--ctp-gris);
  text-decoration: underline; cursor: pointer; letter-spacing: var(--ctp-t-enf-ls); }
#sw-app .sw-btn-enlace:hover { color: var(--ctp-negro); }

/* ── Lo que va dentro de la hoja: siempre una tira horizontal ───────────────
   Las listas heredadas de la barra lateral venían en columna (ambientes en
   rejilla de dos, disposiciones en fila vertical). Aquí se rehacen como el
   carrusel del diseño: se pasa el dedo o la rueda de lado. */
#sw-hoja-cuerpo .pickerListContainer,
#sw-hoja-cuerpo .full-height { height: auto !important; }

#sw-hoja-cuerpo .backgroundList,
#sw-hoja-cuerpo .sw-comp-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: 14px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 18px 24px 20px !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  /* Sin esto el navegador ajusta la primera tarjeta al borde y se come el
     margen izquierdo de la tira. */
  scroll-padding: 0 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#sw-hoja-cuerpo .backgroundList::-webkit-scrollbar,
#sw-hoja-cuerpo .sw-comp-list::-webkit-scrollbar { height: 4px; }
#sw-hoja-cuerpo .backgroundList::-webkit-scrollbar-thumb,
#sw-hoja-cuerpo .sw-comp-list::-webkit-scrollbar-thumb {
  background: var(--ctp-borde); border-radius: 2px;
}
/* ── Tarjeta de ambiente ───────────────────────────────────────────────── */
#sw-hoja-cuerpo .sw-bg-card:not(.sw-wc-card) {
  flex: 0 0 auto !important;
  width: 152px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  /* La hoja antigua monta la tarjeta con la foto de fondo y el rótulo y los
     colores encima. Aquí se apila de arriba abajo: foto, nombre, colores. */
  display: block !important;
  position: relative;
  overflow: visible !important;
  aspect-ratio: auto !important;
  opacity: 1 !important;
  outline: none !important;
  scroll-snap-align: start;
  cursor: pointer;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#sw-hoja-cuerpo .sw-bg-card img {
  /* En la barra lateral la foto iba en posición absoluta rellenando la tarjeta.
     Aquí vuelve al flujo para que debajo quepan el nombre y los colores. */
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block;
  width: 152px !important; height: 100px !important;
  object-fit: cover;
  border-radius: var(--ctp-radio);
  cursor: pointer;
  transition: box-shadow 160ms ease;
}
#sw-hoja-cuerpo .sw-bg-label {
  position: static !important;
  inset: auto !important;
  width: auto !important; height: auto !important;
  background: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin-top: var(--sils-esp-2xs, 8px);
  font-family: var(--ctp-sans);
  font-size: var(--ctp-t-eti-s); font-weight: var(--ctp-t-peq-w);
  letter-spacing: var(--ctp-t-eti-ls) ; text-transform: var(--ctp-t-eti-tt);
  color: var(--ctp-gris);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sw-hoja-cuerpo .sw-bg-badge {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ctp-negro);
  display: none; align-items: center; justify-content: center;
}

/* Los colores de pared de cada ambiente, en fila bajo la foto. */
#sw-hoja-cuerpo .sw-bg-card .dataList.colorList {
  display: block !important;
  position: static !important;
  width: auto !important; height: auto !important;
  margin-top: var(--sils-esp-2xs, 8px); padding: 0 !important;
  background: none !important; border: 0 !important;
  opacity: 1 !important; visibility: visible !important;
}
#sw-hoja-cuerpo #colorSliderElement,
#sw-hoja-cuerpo .colorList #colorSliderElement {
  display: flex !important; flex-wrap: wrap; gap: 6px;
  width: auto !important; height: auto !important;
  transform: none !important;
}
#sw-hoja-cuerpo .colorList .item {
  width: auto !important; height: auto !important;
  margin: 0 !important; padding: 0 !important;
  flex: 0 0 auto !important;
}
#sw-hoja-cuerpo .colorList .color {
  width: 18px !important; height: 18px !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ctp-negro) 12%, transparent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#sw-hoja-cuerpo .colorList .color:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ctp-negro) 12%, transparent), 0 0 0 2px var(--ctp-negro); }
#sw-hoja-cuerpo .colorList .color.is-selected { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ctp-negro) 12%, transparent), 0 0 0 2px var(--ctp-blanco), 0 0 0 3.5px var(--ctp-negro); }
#sw-hoja-cuerpo .colorList .fa-check { font-size: var(--ctp-t-peq-s); color: var(--ctp-blanco); letter-spacing: var(--ctp-t-peq-ls); }

/* Subir tu propia foto: primera tarjeta de la tira. */
#sw-hoja-cuerpo .sw-bg-upload-card {
  flex: 0 0 auto; width: 152px; cursor: pointer;
  scroll-snap-align: start;
}
#sw-hoja-cuerpo .sw-bg-upload-card .sw-bg-upload-caja {
  width: 152px; height: 100px;
  border: 1px dashed var(--ctp-borde);
  border-radius: var(--ctp-radio);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--ctp-gris);
  transition: border-color 160ms ease, color 160ms ease;
}
#sw-hoja-cuerpo .sw-bg-upload-card:hover .sw-bg-upload-caja {
  border-color: var(--ctp-negro); color: var(--ctp-negro);
}
#sw-hoja-cuerpo .sw-bg-upload-card .sw-bg-label { margin-top: var(--sils-esp-2xs, 8px); }

/* ── Tarjeta de disposición ────────────────────────────────────────────── */
#sw-hoja-cuerpo .sw-comp-item {
  flex: 0 0 auto !important;
  width: 138px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  cursor: pointer;
  scroll-snap-align: start;
  display: block !important;
}
#sw-hoja-cuerpo .sw-comp-preview {
  width: 138px; height: 92px;
  margin: 0 0 var(--sils-esp-2xs, 8px) !important;
  background: var(--ctp-apoyo);
  border-radius: var(--ctp-radio);
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  transition: box-shadow 160ms ease;
}
#sw-hoja-cuerpo .sw-comp-preview svg { width: 100%; height: 100%; display: block; }
#sw-hoja-cuerpo .sw-comp-name {
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-bot-w);
  color: var(--ctp-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: var(--ctp-t-peq-ls); }
#sw-hoja-cuerpo .sw-comp-meta {
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w);
  color: var(--ctp-gris); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: var(--ctp-t-peq-ls); }


/* ── El globo de atención al cliente no puede tapar el botón ─────────────────
   El widget de chat vive pegado abajo a la derecha, justo encima del botón de
   «Colocar obra» de la bandeja y del de «Listo» de las hojas. Mientras haya algo
   abierto abajo, el globo sube. */
body.sw-pared-manda #csHub,
body.sw-pared-manda .cs-hub { transition: bottom 300ms ease; }
/* ═══════════════════════════════════════════════════════════════════════════
   LA HOJA DE AMBIENTE
   Rótulo y explicación a la izquierda, la tira en medio y «Listo» a la derecha,
   como en el boceto.
   ═══════════════════════════════════════════════════════════════════════════ */
.ctp-hoja-amb {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 18px 24px 20px;
}
.ctp-hoja-amb__texto { flex: 0 0 210px; padding-top: 2px; }
.ctp-et {
  display: block;
  font-family: var(--ctp-sans);
  font-size: var(--ctp-t-eti-s); font-weight: var(--ctp-t-peq-w);
  letter-spacing: var(--ctp-t-eti-ls) ; text-transform: var(--ctp-t-eti-tt);
  color: var(--ctp-gris);
}
.ctp-hoja-amb__texto p {
  margin: var(--sils-esp-2xs, 8px) 0 0;
  font-size: var(--ctp-t-peq-s); line-height: 1.45; color: var(--ctp-gris); letter-spacing: var(--ctp-t-peq-ls); }
.ctp-hoja-amb__tira { flex: 1 1 auto; min-width: 0; }
.ctp-hoja-amb__tira .backgroundList { padding: 0 !important; }
.ctp-hoja-amb__pie { flex: 0 0 auto; padding-top: 32px; }

/* Las paredes de color liso: la tarjeta ES la muestra, con el nombre debajo.
   El color viene en el atributo style, así que aquí no se toca el fondo. */
#sw-hoja-cuerpo .sw-wc-card {
  flex: 0 0 auto !important;
  width: 152px !important;
  height: 100px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 0 26px 0 !important;
  padding: 0 !important;
  position: relative;
  display: block !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: var(--ctp-radio) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ctp-negro) 8%, transparent);
  opacity: 1 !important;
  cursor: pointer;
}
#sw-hoja-cuerpo .sw-wc-card:hover,
#sw-hoja-cuerpo .sw-wc-card.is-selected { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ctp-negro) 8%, transparent), 0 0 0 2px var(--ctp-negro); }
#sw-hoja-cuerpo .sw-wc-card .sw-bg-label {
  position: absolute !important;
  top: calc(100% + 8px); left: 0; right: auto; bottom: auto;
  margin: 0 !important;
  white-space: nowrap;
}
#sw-hoja-cuerpo .sw-wc-picker-card {
  background: conic-gradient(from 210deg, #C9B99A, #A8B99C, #8FA3B1, #C0C0C0, #E8DFCF, #C9B99A) !important;
}
#sw-hoja-cuerpo .sw-wc-picker-card input[type="color"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0; background: none; cursor: pointer;
  opacity: 0;
}

/* El passepartout: cuando la obra no tiene la proporción del hueco se mete entera
   y lo que sobra se ve como el cartón blanco del cuadro, no como un recorte. */
.vw_size_items.ctp-con-paspartu .chosenArticle,
.vw_size_items.ctp-con-paspartu .sils-marco__obra { background: #FCFCFA !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA BANDEJA · CABECERA Y COLUMNA DEL MARCO (según el boceto)
   ═══════════════════════════════════════════════════════════════════════════ */
#sw-app .ctp-pest {
  background: none !important; border: 0 !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-enf-s); font-weight: var(--ctp-t-enf-w);
  color: var(--ctp-gris); cursor: pointer;
  padding: 18px 0; white-space: nowrap;
  box-shadow: none; letter-spacing: var(--ctp-t-enf-ls); }
#sw-app .ctp-pest:hover { color: var(--ctp-negro); }
#sw-app .ctp-pest.is-activa {
  color: var(--ctp-negro); font-weight: var(--ctp-t-bot-w);
  box-shadow: inset 0 -1px 0 var(--ctp-negro);
}
.ctp-pest__n { color: var(--ctp-gris); font-weight: var(--ctp-t-enf-w); }

/* ── La obra que se está probando, sobre la pared ───────────────────────────
   Va dentro del plano, así que las medidas son centímetros: lo que la hace
   visible en pantalla es el zoom de la pared. El rótulo, en cambio, hereda el
   tamaño ya corregido del hueco. */
.vw_size_items .ctp-prueba { position: absolute; inset: 0; pointer-events: none; }
.ctp-prueba.ctp-con-paspartu .sw-art-marco,
.ctp-prueba.ctp-con-paspartu .sils-marco__obra { background: #FCFCFA; }
.vw_size_items.ctp-probando { box-shadow: none !important; outline: none !important; }
/* El borde discontinuo de la prueba. No es un «outline»: dentro de la pared, que va
   ampliada, el navegador redondea cualquier contorno por debajo de 1 px a 1 px ANTES
   de ampliar, y salía de casi 4 px. Se dibuja con fondos (que no se redondean): trazos
   de 4 px, huecos de 3 y 1 px de grueso, en píxeles de pantalla, 4 px por fuera. */
.vw_size_items.ctp-probando .ctp-prueba::after {
  --g: calc(1px * var(--sw-inv, .3));
  --d: calc(4px * var(--sw-inv, .3));
  --e: calc(7px * var(--sw-inv, .3));
  content: ''; position: absolute; pointer-events: none;
  inset: calc(-4px * var(--sw-inv, .3));
  background:
    repeating-linear-gradient(90deg,  var(--ctp-negro) 0 var(--d), transparent var(--d) var(--e)) left top    / 100% var(--g) no-repeat,
    repeating-linear-gradient(90deg,  var(--ctp-negro) 0 var(--d), transparent var(--d) var(--e)) left bottom / 100% var(--g) no-repeat,
    repeating-linear-gradient(180deg, var(--ctp-negro) 0 var(--d), transparent var(--d) var(--e)) left top    / var(--g) 100% no-repeat,
    repeating-linear-gradient(180deg, var(--ctp-negro) 0 var(--d), transparent var(--d) var(--e)) right top   / var(--g) 100% no-repeat;
}
.ctp-prueba__et {
  position: absolute; top: 100%; left: 0;
  margin-top: 0.5px;
  display: inline-block;
  background: var(--ctp-blanco);
  color: var(--ctp-texto);
  font-family: var(--ctp-sans);
  font-size: inherit;
  line-height: 1.4;
  padding: 0.25em 0.5em;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TU PARED, LISTA
   Un panel lateral, no una pantalla nueva. Entra desde la derecha y EMPUJA: la
   aplicación entera se estrecha y la pared, reencuadrada en cada fotograma,
   queda completa y centrada en lo que queda. Mientras se revisa, la pared se ve
   limpia, sin rótulos, anillos ni cruces, como una lámina.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --ctp-rev-ancho: 480px; --ctp-curva: cubic-bezier(.2,.7,.2,1); } /* la curva y los 450 ms son los de SW_ANIM, el motor de la pared */

#sw-app { transition: width 450ms var(--ctp-curva); }
/* Alrededor de la lámina, un fondo neutro en vez de la nada. */
#pictureWall { transition: background-color 450ms ease; }
body.ctp-revisando #pictureWall { background-color: var(--ctp-apoyo); }
/* La sombra va dentro del plano, que está escalado: se mide en píxeles de pantalla. */
body.ctp-revisando #sw-bg-layer {
  box-shadow: 0 calc(1px * var(--sw-inv, .3)) calc(2px * var(--sw-inv, .3)) color-mix(in srgb, var(--ctp-negro) 8%, transparent),
              0 calc(18px * var(--sw-inv, .3)) calc(40px * var(--sw-inv, .3)) color-mix(in srgb, var(--ctp-negro) 14%, transparent);
}
body.ctp-revisando #sw-app { width: calc(100% - var(--ctp-rev-ancho)); }

#ctp-revisar {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--ctp-rev-ancho);
  z-index: 70;
  transform: translateX(100%);
  transition: transform 450ms var(--ctp-curva), box-shadow 450ms ease;
  font-family: var(--ctp-sans);
}
#ctp-revisar.is-open {
  transform: translateX(0);
  box-shadow: -18px 0 40px color-mix(in srgb, var(--ctp-negro) 10%, transparent);
}
#ctp-revisar[hidden] { display: none; }

.ctp-rev__col {
  height: 100%;
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 22px 28px 26px;
  background: var(--ctp-blanco);
  border-left: 1px solid var(--ctp-linea);
}
/* El contenido del panel entra un instante después que el panel: se lee como
   que la cuenta se «asienta», no como que todo aparece a la vez. */
.ctp-rev__col > * { opacity: 0; transform: translateX(12px); transition: opacity 320ms ease, transform 420ms var(--ctp-curva); }
#ctp-revisar.is-open .ctp-rev__col > * { opacity: 1; transform: none; transition-delay: 160ms; }

#sw-app #ctp-revisar .ctp-rev__acciones button {
  background: none !important; border: 0 !important; box-shadow: none !important;
  height: auto !important; min-height: 0 !important; padding: 0 !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); color: var(--ctp-gris) !important;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; letter-spacing: var(--ctp-t-peq-ls); }
#sw-app #ctp-revisar .ctp-rev__acciones button:hover { color: var(--ctp-negro) !important; }
.ctp-rev__cerrar { width: 32px; height: 32px; justify-content: center; }

/* El nombre grande va en la tipografía del sitio, nunca en la otra. */
#ctp-rev-lista { display: block; }
.ctp-rev__fila {
  display: flex !important; align-items: center; gap: 14px;
  width: 100%; padding: var(--sils-esp-xs, 12px) 0;
  border-bottom: 1px solid var(--ctp-linea);
  text-align: left;
}
.ctp-rev__fila--vacia .ctp-rev__nombre { color: var(--ctp-gris); }
.ctp-rev__mini {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: flex; align-items: flex-end; justify-content: center;
}
/* Entera, con su formato, apoyada abajo. */
.ctp-rev__mini img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; outline: 1px solid var(--ctp-negro); outline-offset: -1px; }
.ctp-rev__mini--vacia { width: 28px; height: 40px; margin: 0 6px; box-shadow: inset 0 0 0 1px var(--ctp-borde); }
.ctp-rev__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ctp-rev__nombre {
  font-size: var(--ctp-t-ind-s); font-weight: var(--ctp-t-bot-w); text-transform: var(--ctp-t-ind-tt);
  color: var(--ctp-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; letter-spacing: var(--ctp-t-ind-ls); }
.ctp-rev__precio { font-size: var(--ctp-t-peq-s); color: var(--ctp-texto); white-space: nowrap; letter-spacing: var(--ctp-t-peq-ls); }
.ctp-rev__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0 20px;
  font-size: var(--ctp-t-gra-s); font-weight: var(--ctp-t-bot-w); color: var(--ctp-negro); letter-spacing: var(--ctp-t-gra-ls); }
#sw-app #ctp-revisar .ctp-rev__cta {
  display: flex !important; align-items: center; justify-content: center;
  width: 100%; height: auto !important; min-height: 0 !important;
  padding: var(--sils-esp-s, 16px) 20px !important; line-height: 1.2 !important;
  background: var(--ctp-negro) !important; color: var(--ctp-blanco) !important;
  border: 0 !important; border-radius: var(--ctp-radio) !important; box-shadow: none !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-bot-s); font-weight: var(--ctp-t-bot-w);
  letter-spacing: normal ; text-transform: var(--ctp-t-bot-tt); cursor: pointer;
  transition: background 160ms ease;
}
#sw-app #ctp-revisar .ctp-rev__cta:hover { background: var(--ctp-texto) !important; }
#sw-app #ctp-revisar .ctp-rev__cta[disabled] { background: var(--ctp-borde) !important; color: var(--ctp-texto) !important; cursor: default; }
.ctp-rev__notas { list-style: none; margin: var(--sils-esp-s, 16px) 0 0; padding: 0; }
.ctp-rev__notas li { font-size: var(--ctp-t-peq-s); color: var(--ctp-gris); padding-left: 18px; position: relative; line-height: 1.9; letter-spacing: var(--ctp-t-peq-ls); }
.ctp-rev__notas li::before { content: '✓'; position: absolute; left: 0; }
.ctp-rev__acciones { display: flex; flex-wrap: wrap; gap: var(--sils-esp-2xs, 8px) 18px; margin-top: auto; padding-top: 24px; }
#sw-app #ctp-revisar .ctp-rev__acciones button { text-decoration: underline; text-underline-offset: 3px; }
.ctp-rev__pie { margin: 14px 0 0; font-size: var(--ctp-t-peq-s); line-height: 1.5; color: var(--ctp-gris); letter-spacing: var(--ctp-t-peq-ls); }

/* Revisar es la misma pantalla con el foco en la composición. La pared, limpia: fuera
   rótulos, cruces, anillos y avisos, y no se toca (desde aquí no se cambian obras). */
body.ctp-revisando .sw-hueco-rotulo,
body.ctp-revisando .sw-hueco-mas,
body.ctp-revisando .sw-art-controls,
body.ctp-revisando .ctp-pista,
body.ctp-revisando .sw-aviso-huecos {
  opacity: 0; pointer-events: none;
  transition: opacity 240ms ease;
}
body.ctp-revisando .vw_size_items:not(:has(.chosenArticle)) { opacity: .35; transition: opacity 240ms ease; }
body.ctp-revisando #draggableContainer { pointer-events: none; }
/* Las placas se quedan donde estaban, atenuadas: siguen ahí y se pueden usar (al
   pasar por encima recuperan el tono), pero el protagonismo es de la pared. */
.sw-placas__zona--ai, .sw-placas__zona--ad, .sw-placas__zona--bi { transition: opacity 280ms ease; }
body.ctp-revisando .sw-placas__zona--ai,
body.ctp-revisando .sw-placas__zona--ad,
body.ctp-revisando .sw-placas__zona--bi { opacity: .45; }
body.ctp-revisando .sw-placas__zona--ai:hover,
body.ctp-revisando .sw-placas__zona--ad:hover,
body.ctp-revisando .sw-placas__zona--bi:hover { opacity: 1; }
/* «Revisar pared» se convierte en «Seguir cambiando», en su sitio, y pasa a
   secundario: la acción principal ahora es la del panel. */
#sw-app #sw-p-revisar { transition: background 200ms ease, color 200ms ease, border-color 200ms ease; gap: 6px; }
#sw-app #sw-p-revisar.es-volver {
  background: var(--ctp-blanco) !important; color: var(--ctp-negro) !important;
  box-shadow: inset 0 0 0 1px var(--ctp-borde) !important;
}
#sw-app #sw-p-revisar.es-volver:hover { box-shadow: inset 0 0 0 1px var(--ctp-negro) !important; }


/* El rótulo «Probando» cuelga por debajo del hueco: el hueco no puede recortarlo. */
.vw_size_items.ctp-probando { overflow: visible !important; }
/* Las muestras de color, con su medida propia (la regla de las fotos no les vale). */
#sw-hoja-cuerpo .backgroundList .sw-bg-card.sw-wc-card {
  flex: 0 0 auto !important;
  width: 152px !important;
  height: 100px !important;
  min-height: 100px !important;
  max-height: 100px !important;
  aspect-ratio: auto !important;
  margin: 0 0 26px 0 !important;
  padding: 0 !important;
  display: block !important;
  position: relative;
  overflow: visible !important;
  border: 0 !important;
  border-radius: var(--ctp-radio) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ctp-negro) 8%, transparent);
  opacity: 1 !important;
  cursor: pointer;
}
#sw-hoja-cuerpo .backgroundList .sw-bg-card.sw-wc-card .sw-bg-label {
  position: absolute !important;
  top: calc(100% + 8px) !important; left: 0 !important;
  right: auto !important; bottom: auto !important;
  margin: 0 !important; padding: 0 !important;
  background: none !important;
  color: var(--ctp-gris) !important;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL ALTO DE LOS BOTONES LO PONE SU CONTENIDO
   La plantilla de la tienda le clava 38 px de alto a todo lo que sea <button>.
   Con 10 px de aire arriba y abajo, a la caja de contenido le quedan 18, y la
   línea de texto mide 21: como las líneas empiezan arriba y crecen hacia abajo,
   el texto se sale por debajo y queda bajo. De ahí «mucho espacio arriba y nada
   abajo». No era el padding: era el alto fijo. Aquí manda el contenido.
   ═══════════════════════════════════════════════════════════════════════════ */
#sw-app .sw-btn-primario,
#sw-app .sw-btn-secundario,
#sw-app .sw-placa--accion,
#sw-app .sw-btn-enlace,
#sw-app .ctp-pest,
#sw-app .ctp-listo,
#sw-app .ctp-rev__cta,
#sw-app #ctp-revisar button {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box;
}
/* Y, ya que el texto va en mayúsculas, se centra de verdad en vez de fiarlo al
   interlineado: así da igual la tipografía que acabe cargando. */
#sw-app .sw-btn-primario,
#sw-app .sw-btn-secundario,
#sw-app .ctp-rev__cta,
#sw-app .ctp-listo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1.15 !important;
}
#sw-app .ctp-rev__cta { display: flex !important; width: 100%; }

/* La celda de ajustes: el aire era igual arriba y abajo, pero no lo parecía.
   La línea del valor (17,5 px para una letra de 14) deja abajo un hueco muerto
   que no existe arriba, donde la etiqueta va en mayúsculas y pegada. Se aprieta
   el interlineado y se compensa el resto con el relleno. */
#sw-app .sw-celda { padding: var(--sils-esp-xs, 12px) 22px 10px !important; }
#sw-app .sw-celda .sw-placa__et,
#sw-app .sw-celda .sw-celda__v { line-height: 1.05 !important; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA TARJETA QUE CRECE
   No abre un cajón: se abre ella misma, hacia arriba y hacia la derecha desde su
   esquina de abajo a la izquierda. Las tres celdas se quedan arriba haciendo de
   pestañas y el contenido aparece dentro.
   ═══════════════════════════════════════════════════════════════════════════ */
#sw-app #ctp-panel {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--ctp-radio);
  background: var(--ctp-blanco);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ctp-negro) 4%, transparent);
  transition: width 450ms cubic-bezier(.2,.7,.2,1),
              box-shadow 450ms ease;
  will-change: width;
}
#sw-app #ctp-panel.is-open {
  box-shadow: 0 -10px 30px color-mix(in srgb, var(--ctp-negro) 8%, transparent), 0 2px 6px color-mix(in srgb, var(--ctp-negro) 6%, transparent);
}
.ctp-panel__cab {
  display: flex; align-items: stretch;
  flex: 0 0 auto;
}
#ctp-panel.is-open .ctp-panel__cab { border-bottom: 1px solid var(--ctp-linea); }
.ctp-panel__cuerpo {
  height: 0;
  overflow: hidden;
  transition: height 450ms cubic-bezier(.2,.7,.2,1);
}
#sw-app .ctp-panel__cerrar {
  margin-left: auto;
  background: none !important; border: 0 !important;
  color: var(--ctp-gris); cursor: pointer;
  display: flex; align-items: center;
  padding: 0 18px !important;
  height: auto !important;
}
#sw-app .ctp-panel__cerrar:hover { color: var(--ctp-negro); }

/* La celda activa se marca, y el galón dice que eso se abre. */
#sw-app .sw-celda { position: relative; }
.sw-celda__ico {
  position: absolute; top: 12px; right: 10px;
  color: var(--ctp-borde);
  transform: rotate(180deg);
  transition: transform 300ms ease, color 200ms ease;
}
#sw-app .sw-celda:hover .sw-celda__ico { color: var(--ctp-gris); }
#sw-app .sw-celda.is-activa { background: var(--ctp-apoyo) !important; }
#sw-app .sw-celda.is-activa .sw-celda__ico { transform: rotate(0deg); color: var(--ctp-negro); }
#sw-app .sw-celda.is-activa .sw-celda__v { color: var(--ctp-negro); }
/* La celda por la que toca empezar, señalada sin gritar. */
#sw-app .sw-celda.ctp-siguiente .sw-celda__v { color: var(--ctp-negro); }
#sw-app .sw-celda.ctp-siguiente::after {
  content: ''; position: absolute; left: 22px; bottom: 6px;
  width: 16px; height: 1.5px; background: var(--ctp-negro);
  animation: ctpLatido 2.4s ease-in-out infinite;
}
@keyframes ctpLatido { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* La línea que dice qué toca ahora. */
.ctp-pista {
  margin: 10px 0 0;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s);
  color: var(--ctp-blanco);
  background: color-mix(in srgb, var(--ctp-negro) 55%, transparent);
  padding: 7px var(--sils-esp-xs, 12px);
  border-radius: var(--ctp-radio);
  align-self: flex-start;
  opacity: 0; transform: translateY(4px);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none; letter-spacing: var(--ctp-t-peq-ls); }
.ctp-pista.is-open { opacity: 1; transform: translateY(0); }
.ctp-pista[hidden] { display: none; }
.sw-placas__zona--bi { flex-direction: column; align-items: flex-start; }

/* El hueco vacío enseña que se puede tocar. Va dentro del plano, así que el
   tamaño lo hereda del hueco, ya corregido por el zoom de la pared. */
.vw_size_items .inner { flex-direction: column; gap: 0.5em; }
/* La cruz del hueco vacío. Como los rótulos, se dibuja a su tamaño de pantalla
   (24 px) y se escala entera con la inversa de la escala de la pared: dibujada a
   3 px y ampliada, el trazo fino se perdía y salía «⊥». Va centrada un poco por
   encima de la mitad, con la medida debajo. */
.vw_size_items .sw-hueco-mas {
  position: absolute; left: 50%; top: 50%; margin: 0 !important;
  display: block; width: 24px; height: 24px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ctp-negro) 10%, transparent);
  background-image:
    linear-gradient(var(--ctp-texto), var(--ctp-texto)),
    linear-gradient(var(--ctp-texto), var(--ctp-texto)),
    linear-gradient(color-mix(in srgb, var(--ctp-blanco) 88%, transparent), color-mix(in srgb, var(--ctp-blanco) 88%, transparent));
  background-size: 10px 1.25px, 1.25px 10px, 100% 100%;
  background-position: center, center, center;
  background-repeat: no-repeat;
  transform-origin: center;
  transform: translate(-50%, -50%) translateY(calc(-8px * var(--sw-inv, 1))) scale(var(--sw-inv, 1));
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.vw_size_items:hover .sw-hueco-mas {
  transform: translate(-50%, -50%) translateY(calc(-8px * var(--sw-inv, 1))) scale(calc(var(--sw-inv, 1) * 1.12));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ctp-negro) 18%, transparent);
}
.vw_size_items:has(.chosenArticle) .sw-hueco-mas,
.vw_size_items.ctp-probando .sw-hueco-mas { display: none; }

/* El aspa solo existe con la tarjeta abierta: «display:flex» le ganaba al
   atributo «hidden» y se veía siempre. */
#sw-app .ctp-panel__cerrar[hidden] { display: none !important; }
/* La pista va encima de la tarjeta. */
.ctp-pista { margin: 0 0 10px !important; }

/* La pista es una etiqueta oscura sobre la pared: tiene que leerse sobre
   cualquier foto, así que el color va impuesto. */
#sw-app .ctp-pista,
#sw-placas .ctp-pista {
  background: color-mix(in srgb, var(--ctp-negro) 72%, transparent) !important;
  color: var(--ctp-blanco) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: var(--ctp-t-enf-w);
  letter-spacing: .2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA TARJETA ABIERTA: ALTA Y ESTRECHA, CON LISTA VERTICAL
   Ya no es una tira que se arrastra de lado. La tarjeta se abre a lo alto —hasta
   debajo de la fila de arriba— y a un ancho fijo —hasta donde acaba «Mis
   paredes»—, y lo que no cabe se desplaza hacia abajo, como en el panel de antes.
   El tamaño abierto no depende del contenido: así no hay saltos cuando llegan los
   ambientes ni al cerrar.
   ═══════════════════════════════════════════════════════════════════════════ */
#sw-app #ctp-panel {
  transition: width 450ms cubic-bezier(.2,.7,.2,1),
              height 450ms cubic-bezier(.2,.7,.2,1),
              box-shadow 450ms ease;
  will-change: width, height;
}
#sw-app #ctp-panel .ctp-panel__cuerpo {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: none;
  opacity: 0;
  transition: opacity 260ms ease 140ms;
}
#sw-app #ctp-panel.is-open .ctp-panel__cuerpo { opacity: 1; }
#sw-app #ctp-panel:not(.is-open) .ctp-panel__cuerpo { pointer-events: none; }
#sw-hoja-cuerpo::-webkit-scrollbar { width: 4px; }
#sw-hoja-cuerpo::-webkit-scrollbar-thumb { background: var(--ctp-borde); border-radius: 2px; }

/* ── Ambientes: rejilla de dos, como en el panel de siempre ───────────────── */
#sw-hoja-cuerpo .backgroundList {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--sils-esp-s, 16px) var(--sils-esp-xs, 12px) !important;
  overflow: visible !important;
  padding: 0 !important;
  scroll-snap-type: none !important;
}
#sw-hoja-cuerpo .sw-bg-card:not(.sw-wc-card),
#sw-hoja-cuerpo .sw-bg-upload-card,
#sw-hoja-cuerpo .backgroundList .sw-bg-card.sw-wc-card {
  width: auto !important;
  margin: 0 !important;
}
#sw-hoja-cuerpo .sw-bg-card img,
#sw-hoja-cuerpo .sw-bg-upload-card .sw-bg-upload-caja {
  width: 100% !important;
  height: 84px !important;
}
#sw-hoja-cuerpo .backgroundList .sw-bg-card.sw-wc-card {
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  margin-bottom: 22px !important;
}
#sw-hoja-cuerpo .sw-wc-picker-card input[type="color"] { width: 100%; height: 84px; }

/* ── Disposiciones: una debajo de otra, con su miniatura a la izquierda ───── */
#sw-hoja-cuerpo .sw-comp-list {
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
  scroll-snap-type: none !important;
}
#sw-hoja-cuerpo .sw-comp-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: var(--sils-esp-xs, 12px);
  width: auto !important;
  margin: 0 !important;
  padding: 10px 2px !important;
  border-bottom: 1px solid var(--ctp-linea);
  scroll-snap-align: none;
}
#sw-hoja-cuerpo .sw-comp-item:last-child { border-bottom: 0; }
#sw-hoja-cuerpo .sw-comp-preview {
  flex: 0 0 68px;
  width: 68px !important; height: 48px !important;
  margin: 0 !important;
  padding: 6px;
}
#sw-hoja-cuerpo .sw-comp-info { flex: 1 1 auto; min-width: 0; }
/* El nombre y, a su derecha, «Total aprox: 158×100 cm» (2.21.1). Si no caben juntos (la
   tarjeta estrecha del móvil), el total baja a la línea siguiente. */
.sw-comp-cab {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  column-gap: 8px; min-width: 0; }
.sw-comp-cab .sw-comp-name { flex: 0 1 auto; min-width: 0; }
.sw-comp-cab .sw-comp-total,
#sw-hoja-cuerpo .sw-comp-cab .sw-comp-total {
  flex: 0 0 auto; margin-top: 0; overflow: visible;
  font-size: var(--ctp-t-dat-s); color: var(--ctp-gris-ref); }
/* En el móvil la tarjeta es estrecha: el total, siempre debajo del nombre, igual en todas. */
@media (max-width: 760px) {
  .sw-comp-cab .sw-comp-total,
  #sw-hoja-cuerpo .sw-comp-cab .sw-comp-total { flex-basis: 100%; margin-top: 2px; }
}
#sw-hoja-cuerpo .sw-comp-check { flex: 0 0 auto; color: var(--ctp-negro); }

/* ── La hoja de ambiente, en vertical ─────────────────────────────────────── */
.ctp-hoja-amb {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: var(--sils-esp-s, 16px) 18px 18px !important;
}
.ctp-hoja-amb__texto { flex: 0 0 auto !important; padding: 0 !important; }
.ctp-hoja-amb__texto p { margin: 0 !important; }
.ctp-hoja-amb__pie { padding: 0 !important; }
#sw-app .ctp-hoja-amb__pie .ctp-listo { width: 100%; }

/* El resto de contenidos de la tarjeta, con el mismo aire. */
#sw-hoja-cuerpo > .sw-comp-list,
#sw-hoja-cuerpo > .full-height { padding: var(--sils-esp-s, 16px) 18px 18px !important; }
#sw-hoja-cuerpo .sw-loading { padding: 20px 18px; color: var(--ctp-gris); }

/* Con la tarjeta alta, «Listo» se queda pegado abajo: si no, hay que bajar toda
   la lista para encontrarlo. */
.ctp-hoja-amb__pie {
  position: sticky; bottom: 0;
  margin: 0 -18px -18px;
  padding: var(--sils-esp-xs, 12px) 18px var(--sils-esp-s, 16px) !important;
  background: var(--ctp-blanco);
  box-shadow: 0 -8px 12px -8px color-mix(in srgb, var(--ctp-negro) 10%, transparent);
}

/* ── Pestañas: el contenido se queda montado y solo se enseña o se esconde ──── */
.ctp-tab[hidden] { display: none !important; }
.ctp-tab { padding: var(--sils-esp-s, 16px) 18px 18px; }
#sw-hoja-cuerpo > .sw-comp-list,
#sw-hoja-cuerpo > .full-height { padding: 0 !important; }

/* Las fotos de ambiente, en su formato (1024:625) en vez de recortadas. */
#sw-hoja-cuerpo .sw-bg-card img,
#sw-hoja-cuerpo .sw-bg-upload-card .sw-bg-upload-caja {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1024 / 625;
}
#sw-hoja-cuerpo .backgroundList .sw-bg-card.sw-wc-card {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1024 / 625;
  margin-bottom: 22px !important;
}
#sw-hoja-cuerpo .sw-wc-picker-card input[type="color"] { height: 100%; }

/* Las disposiciones, también en rejilla de dos y con la misma tarjeta. */
#sw-hoja-cuerpo .sw-comp-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--sils-esp-s, 16px) var(--sils-esp-xs, 12px) !important;
}
#sw-hoja-cuerpo .sw-comp-item {
  display: block !important;
  position: relative;
  padding: 0 !important;
  border-bottom: 0 !important;
}
#sw-hoja-cuerpo .sw-comp-preview {
  flex: none;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1024 / 625;
  margin: 0 0 var(--sils-esp-2xs, 8px) !important;
  padding: 10px;
}
#sw-hoja-cuerpo .sw-comp-info { margin: 0; }
#sw-hoja-cuerpo .sw-comp-check {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ctp-negro); color: var(--ctp-blanco);
  display: none; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAS OBRAS, DENTRO DE LA TARJETA
   El selector se mudó a la pestaña «Obras»: mismo sitio, misma apertura y mismo
   ancho que ambiente y disposición. El marco se elige aquí, abajo, junto al botón.
   ═══════════════════════════════════════════════════════════════════════════ */
.ctp-tab[data-tab="obras"] { padding: 0 !important; display: flex; flex-direction: column; min-height: 100%; }
/* ── Ajustes de la pestaña de obras dentro de la tarjeta ──────────────────── */
/* Con las obras, el desplazamiento va por dentro de la rejilla. */
#sw-hoja-cuerpo.ctp-sin-scroll { overflow: hidden !important; }
#sw-hoja-cuerpo.ctp-sin-scroll > .ctp-tab { height: 100%; min-height: 0; }

/* Un solo desplazamiento: el de la rejilla. La lista heredada traía el suyo
   propio con alto fijo y quedaban dos barras, una dentro de otra. */
body.sw-pared-manda #articleScrollerr {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* El lienzo sale ya con el color de una pared lisa, antes de que el guion ponga
   la foto del ambiente: así el primer pintado no es un rectángulo en blanco. */
body.sw-pared-manda #sw-bg-layer { background-color: #DEDAD3; }

/* El hueco no lleva borde. Venía de la hoja heredada («#pictureWall .item»), y como
   se dibuja DENTRO del plano —que va muy ampliado— ese píxel se convertía en tres o
   cuatro en pantalla y parecía un marco. */
#pictureWall .item { border: 0; }

/* ── Muestras de color y «Tu foto», a limpio ────────────────────────────────
   Las muestras se quedaban en alto cero: una regla anterior les ponía
   «aspect-ratio: auto !important» y la proporción nueva no podía ganarle.
   Y la tarjeta de subir foto traía su propio borde discontinuo heredado, más el
   de la caja de dentro, más otro al pasar por encima: tres líneas para una cosa. */
#sw-hoja-cuerpo .backgroundList .sw-bg-card.sw-wc-card {
  aspect-ratio: 1024 / 625 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
#sw-hoja-cuerpo .sw-wc-picker-card {
  position: relative;
  aspect-ratio: 1024 / 625 !important;
}
#sw-hoja-cuerpo .sw-wc-picker-card input[type="color"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

#sw-hoja-cuerpo .sw-bg-upload-card,
#sw-hoja-cuerpo .sw-bg-upload-card:hover {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
#sw-hoja-cuerpo .sw-bg-upload-card .sw-bg-upload-caja {
  border: 1px dashed var(--ctp-borde);
  border-radius: var(--ctp-radio);
  background: none;
}
#sw-hoja-cuerpo .sw-bg-upload-card:hover .sw-bg-upload-caja {
  border-color: var(--ctp-negro);
  color: var(--ctp-negro);
}

/* ── El pie con «Listo», igual en todas las pestañas ────────────────────────── */
.ctp-pie {
  position: sticky; bottom: 0;
  margin: var(--sils-esp-s, 16px) -18px -18px;
  padding: var(--sils-esp-xs, 12px) 18px var(--sils-esp-s, 16px);
  background: var(--ctp-blanco);
  box-shadow: 0 -8px 12px -8px color-mix(in srgb, var(--ctp-negro) 10%, transparent);
}
#sw-app .ctp-pie .ctp-listo { width: 100%; }
/* En disposiciones el contenido viene impreso sin relleno lateral. */
.ctp-tab[data-tab="disposicion"] > .ctp-pie { margin: var(--sils-esp-s, 16px) 0 0; padding: var(--sils-esp-xs, 12px) 0 0; }

/* ── Cuánta pared se ve en tu foto ──────────────────────────────────────────── */
.ctp-tu-ancho {
  border: 1px solid var(--ctp-negro);
  border-radius: var(--ctp-radio);
  padding: 14px;
  margin-bottom: var(--sils-esp-3xs, 4px);
}
.ctp-tu-ancho label {
  display: block;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-bot-w);
  color: var(--ctp-texto); margin-bottom: 10px; letter-spacing: var(--ctp-t-peq-ls); }
.ctp-tu-ancho__fila { display: flex; align-items: center; gap: var(--sils-esp-2xs, 8px); }
#sw-app .ctp-tu-ancho input[type="number"] {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-enf-s);
  padding: 9px 10px;
  border: 1px solid var(--ctp-borde) !important;
  border-radius: var(--ctp-radio);
  background: var(--ctp-blanco);
  height: auto !important; letter-spacing: var(--ctp-t-enf-ls); }
.ctp-tu-ancho__u { font-size: var(--ctp-t-peq-s); color: var(--ctp-gris); letter-spacing: var(--ctp-t-peq-ls); }
#sw-app .ctp-tu-ancho .sw-btn-primario { flex: 0 0 auto; }
.ctp-tu-ancho__nota {
  margin: 10px 0 0;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); line-height: 1.45;
  color: var(--ctp-gris); letter-spacing: var(--ctp-t-peq-ls); }

/* ── Familias de disposiciones ──────────────────────────────────────────────── */
.ctp-familias {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 14px;
}
#sw-app .ctp-fam {
  background: none !important;
  border: 1px solid var(--ctp-borde) !important;
  border-radius: var(--ctp-radio) !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w);
  color: var(--ctp-texto) !important;
  padding: 6px 11px !important;
  height: auto !important; min-height: 0 !important;
  line-height: 1.2 !important;
  text-transform: none !important; letter-spacing: var(--ctp-t-peq-ls) !important;
  cursor: pointer; white-space: nowrap;
  box-shadow: none !important;
}
#sw-app .ctp-fam:hover { border-color: var(--ctp-negro) !important; }
#sw-app .ctp-fam.is-activa {
  background: var(--ctp-negro) !important;
  border-color: var(--ctp-negro) !important;
  color: var(--ctp-blanco) !important;
}
/* El listado vive dentro de la pestaña, que ya pone el relleno. */
.ctp-tab[data-tab="disposicion"] { padding: var(--sils-esp-s, 16px) 18px 18px !important; }

/* Lo que el filtro deja fuera. */
#sw-hoja-cuerpo .sw-comp-item.ctp-oculto { display: none !important; }

/* ── El cartel de la propuesta ──────────────────────────────────────────────
   «Tus 5 obras, ya en la pared»: ocupa el ancho, abajo, con las tres salidas a
   la derecha. Es lo primero que se ve al entrar con obras guardadas. */
/* Flota sobre los selectores, en su misma columna: no es una barra a todo lo
   ancho. Aquella venía de la pantalla de bienvenida, que ya no existe. */
#sw-app .sw-placa--propuesta {
  position: static;
  display: flex; flex-direction: column; gap: 14px;
  width: min(420px, calc(100vw - 2 * var(--ctp-margen)));
  margin: 0 0 10px;
  padding: var(--sils-esp-s, 16px) 18px;
  background: var(--ctp-blanco);
  border-radius: var(--ctp-radio);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ctp-negro) 12%, transparent), 0 2px 6px color-mix(in srgb, var(--ctp-negro) 6%, transparent);
  pointer-events: auto;
}
.ctp-propuesta__txt { min-width: 0; }
.ctp-propuesta__txt h2 {
  margin: 0 0 var(--sils-esp-3xs, 4px);
  font-family: var(--ctp-sans);
  font-size: var(--ctp-t-gra-s); font-weight: var(--ctp-t-bot-w); line-height: 1.2;
  color: var(--ctp-negro); letter-spacing: var(--ctp-t-gra-ls); }
.ctp-propuesta__txt p {
  margin: 0;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); line-height: 1.45; color: var(--ctp-gris); letter-spacing: var(--ctp-t-peq-ls); }
/* Los dos botones en una fila y el enlace debajo, a propósito: en 420 px los tres
   no caben y envolvían de cualquier manera. */
.ctp-propuesta__acciones {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex-wrap: wrap;
}
#sw-app .ctp-propuesta__acciones .sw-btn-enlace {
  flex: 1 0 100%; order: 2;
  text-align: left; font-size: var(--ctp-t-peq-s); margin-top: 2px; letter-spacing: var(--ctp-t-peq-ls); }
#sw-app .ctp-propuesta__acciones .sw-btn-secundario,
#sw-app .ctp-propuesta__acciones .sw-btn-primario { font-size: var(--ctp-t-bot-s); padding: 9px 14px; font-weight: var(--ctp-t-bot-w); letter-spacing: normal; text-transform: var(--ctp-t-bot-tt); }
#sw-app .sw-btn-secundario {
  background: none !important;
  border: 1px solid var(--ctp-borde) !important;
  border-radius: var(--ctp-radio);
  color: var(--ctp-texto) !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-bot-s); font-weight: var(--ctp-t-bot-w);
  padding: 10px var(--sils-esp-s, 16px); cursor: pointer; white-space: nowrap; letter-spacing: normal; text-transform: var(--ctp-t-bot-tt); }
#sw-app .sw-btn-secundario:hover { border-color: var(--ctp-negro) !important; }



/* ── Estado vacío de la bandeja ─────────────────────────────────────────────── */
.ctp-vacio { padding: 24px var(--sils-esp-3xs, 4px); text-align: left; }
.ctp-vacio__t {
  margin: 0 0 6px;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-enf-s); font-weight: var(--ctp-t-bot-w); color: var(--ctp-texto); letter-spacing: var(--ctp-t-enf-ls); }
.ctp-vacio__d {
  margin: 0 0 14px;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); line-height: 1.45; color: var(--ctp-gris); letter-spacing: var(--ctp-t-peq-ls); }

/* ═══════════════════════════════════════════════════════════════════════════
   MONTANDO LA PARED
   Nada aparece de golpe. Mientras se pide la disposición y los marcos, se dice
   que está pasando y los huecos laten; el cartel entra con desvanecido.
   ═══════════════════════════════════════════════════════════════════════════ */
/* El aviso «Montando tu pared…». OJO: su clase no puede ser «ctp-montando», que es la
   que lleva el <body> mientras se monta. Con el mismo nombre, el cuerpo entero heredaba
   estos estilos (absoluto, al 50 %, invisible y desplazado) y la página parpadeaba y
   entraba deslizándose desde la derecha en cada carga con obras guardadas. */
.ctp-aviso-montando {
  position: absolute; left: 50%; top: var(--ctp-margen);
  transform: translate(-50%, -8px);
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 11px var(--sils-esp-s, 16px);
  border-radius: var(--ctp-radio);
  background: color-mix(in srgb, var(--ctp-negro) 78%, transparent); color: var(--ctp-blanco);
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ctp-negro) 20%, transparent);
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none; letter-spacing: var(--ctp-t-peq-ls); }
.ctp-aviso-montando.es-visible { opacity: 1; transform: translate(-50%, 0); }
.ctp-girador {
  width: 12px; height: 12px; flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--ctp-blanco); border-top-color: transparent;
  animation: ctpGira .7s linear infinite;
}
.ctp-girador--oscuro { border-color: currentColor; border-top-color: transparent; }
@keyframes ctpGira { to { transform: rotate(360deg); } }

/* Los huecos laten mientras se llenan: el boceto pide pulso, no giradores. */
body.ctp-montando .vw_size_items:not(:has(.chosenArticle)) {
  animation: ctpLate 1.4s ease-in-out infinite;
}
@keyframes ctpLate { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
body.ctp-montando .sw-hueco-mas,
body.ctp-montando .sw-hueco-rotulo { opacity: 0; transition: opacity 200ms ease; }

/* El cartel de la propuesta entra desde abajo. */
#sw-app .sw-placa--propuesta {
  opacity: 0; transform: translateY(10px);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.7,.2,1);
}
#sw-app .sw-placa--propuesta.is-open { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════
   EL NAVEGADOR DE OBRAS
   Marcado propio, sin herencias. Cabecera en dos niveles (el hueco; de dónde
   salen las obras y las herramientas); buscador y filtros que se despliegan en
   su sitio; rejilla de obras con la forma del hueco; y, en la obra que se prueba,
   sus marcos sobre la parte de abajo de la imagen.
   ═══════════════════════════════════════════════════════════════════════════ */
.ctp-tab[data-tab="obras"] { padding: 0 !important; height: 100%; min-height: 0; }
.ctp-nav {
  --ctp-prop: 1;
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  font-family: var(--ctp-sans);
}

/* ── Cabecera, nivel 1: el hueco que se está llenando ────────────────────── */
.ctp-nav__cab {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--ctp-linea);
}
.ctp-nav__fila { display: flex; align-items: center; gap: var(--sils-esp-xs, 12px); padding: 0 var(--sils-esp-s, 16px); min-width: 0; }
.ctp-nav__fila--hueco { padding-top: 14px; padding-bottom: var(--sils-esp-2xs, 8px); }
.ctp-nav__forma {
  height: 22px; min-width: 9px; flex: 0 0 auto; display: block;
  border: 1.5px solid var(--ctp-negro); border-radius: 1px;
}
.ctp-nav__titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctp-nav__pos {
  font-size: var(--ctp-t-eti-s); font-weight: var(--ctp-t-peq-w); letter-spacing: var(--ctp-t-eti-ls) ; line-height: 1;
  text-transform: var(--ctp-t-eti-tt); color: var(--ctp-gris); white-space: nowrap;
}
.ctp-nav__medida { font-size: var(--ctp-t-enf-s); font-weight: var(--ctp-t-bot-w); line-height: 1.2; color: var(--ctp-negro); white-space: nowrap; letter-spacing: var(--ctp-t-enf-ls); }
.ctp-nav__saltos { display: flex; gap: var(--sils-esp-3xs, 4px); flex: 0 0 auto; margin-left: var(--sils-esp-3xs, 4px); }
#sw-app .ctp-nav__paso {
  width: 30px; height: 30px !important; min-width: 0; min-height: 0 !important; padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  background: var(--ctp-blanco) !important; border: 1px solid var(--ctp-borde) !important;
  border-radius: var(--ctp-radio); color: var(--ctp-texto) !important; cursor: pointer;
  transition: border-color 200ms ease;
}
#sw-app .ctp-nav__paso:hover { border-color: var(--ctp-negro) !important; }
#sw-app .ctp-nav__quitar {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: none !important; border: 0 !important; box-shadow: none !important;
  height: auto !important; min-height: 0 !important; padding: var(--sils-esp-3xs, 4px) 0 !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); color: var(--ctp-gris) !important; cursor: pointer;
  animation: ctpTabEntra 200ms ease both; transition: color 200ms ease; letter-spacing: var(--ctp-t-peq-ls); }
#sw-app .ctp-nav__quitar:hover { color: var(--ctp-negro) !important; }
#sw-app .ctp-nav__quitar[hidden] { display: none; }

/* ── Cabecera, nivel 2: de dónde salen las obras, y las herramientas ──────── */
.ctp-nav__fila--fuentes { align-items: stretch; gap: var(--sils-esp-s, 16px); }
.ctp-nav__pestanas {
  display: flex; align-items: stretch; gap: 22px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.ctp-nav__pestanas::-webkit-scrollbar { display: none; }
#sw-app .ctp-nav .ctp-pest {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 0 var(--sils-esp-xs, 12px) !important; height: auto !important; min-height: 0 !important;
  font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w); color: var(--ctp-gris); box-shadow: none !important;
  transition: color 200ms ease; letter-spacing: var(--ctp-t-peq-ls); }
#sw-app .ctp-nav .ctp-pest:hover { color: var(--ctp-negro); }
#sw-app .ctp-nav .ctp-pest.is-activa { color: var(--ctp-negro); font-weight: var(--ctp-t-bot-w); }
/* El subrayado de la activa se dibuja de dentro afuera, no aparece de golpe. */
.ctp-nav .ctp-pest::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--ctp-negro); transform: scaleX(0);
  transition: transform 280ms var(--ctp-curva, ease);
}
.ctp-nav .ctp-pest.is-activa::after { transform: scaleX(1); }
.ctp-nav .ctp-pest__n {
  font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w); line-height: 16px; min-width: 16px; padding: 0 6px;
  border-radius: 8px; background: var(--ctp-apoyo); color: var(--ctp-gris); text-align: center; letter-spacing: var(--ctp-t-peq-ls); }
.ctp-nav .ctp-pest.is-activa .ctp-pest__n { background: var(--ctp-linea); color: var(--ctp-texto); }
.ctp-nav__acciones { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#sw-app .ctp-nav__herr {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px !important; min-height: 0 !important; padding: 0 10px !important;
  background: var(--ctp-blanco) !important; border: 1px solid var(--ctp-borde) !important;
  border-radius: var(--ctp-radio); color: var(--ctp-texto) !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease; letter-spacing: var(--ctp-t-peq-ls); }
#sw-app .ctp-nav__herr:hover { border-color: var(--ctp-negro) !important; }
#sw-app .ctp-nav__herr.is-activa { background: var(--ctp-negro) !important; border-color: var(--ctp-negro) !important; color: var(--ctp-blanco) !important; }
.ctp-nav__herr-n {
  min-width: 16px; height: 16px; padding: 0 var(--sils-esp-3xs, 4px); border-radius: 8px;
  background: var(--ctp-negro); color: var(--ctp-blanco);
  font-size: var(--ctp-t-peq-s); line-height: 16px; text-align: center; letter-spacing: var(--ctp-t-peq-ls); }
.ctp-nav__herr.is-activa .ctp-nav__herr-n { background: var(--ctp-blanco); color: var(--ctp-negro); }
.ctp-nav__herr-n[hidden] { display: none; }

/* ── Buscar y filtrar: se despliegan y empujan la rejilla ─────────────────── */
.ctp-nav__plegable {
  flex: 0 0 auto;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 340ms var(--ctp-curva, ease);
}
.ctp-nav__plegable.is-abierto { grid-template-rows: 1fr; }
.ctp-nav__plegable > .ctp-nav__panel {
  min-height: 0; overflow: hidden; visibility: hidden;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 180ms ease, transform 340ms var(--ctp-curva, ease), visibility 0s linear 340ms;
}
.ctp-nav__plegable.is-abierto > .ctp-nav__panel {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 240ms ease 80ms, transform 340ms var(--ctp-curva, ease), visibility 0s;
}
.ctp-nav__panel-in { padding: var(--sils-esp-xs, 12px) var(--sils-esp-s, 16px) 14px; border-bottom: 1px solid var(--ctp-linea); background: var(--ctp-apoyo); }
#sw-app .ctp-nav__campo {
  width: 100%; height: auto !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-enf-s);
  padding: 10px var(--sils-esp-xs, 12px);
  border: 1px solid var(--ctp-borde) !important;
  border-radius: var(--ctp-radio);
  background: var(--ctp-blanco); letter-spacing: var(--ctp-t-enf-ls); }
.ctp-nav__grupo { margin-bottom: var(--sils-esp-xs, 12px); }
.ctp-nav__grupo .ctp-et { margin-bottom: 7px; }
.ctp-nav__chips { display: flex; flex-wrap: wrap; gap: 6px; }
#sw-app .ctp-chip {
  background: var(--ctp-blanco) !important;
  border: 1px solid var(--ctp-borde) !important;
  border-radius: var(--ctp-radio) !important;
  color: var(--ctp-texto) !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w);
  padding: 6px 10px !important; height: auto !important; min-height: 0 !important;
  line-height: 1.2 !important; text-transform: none !important; letter-spacing: var(--ctp-t-peq-ls) !important;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
#sw-app .ctp-chip:hover { border-color: var(--ctp-negro) !important; }
#sw-app .ctp-chip.is-activa {
  background: var(--ctp-negro) !important; border-color: var(--ctp-negro) !important;
  color: var(--ctp-blanco) !important;
}
.ctp-chip__n { font-size: var(--ctp-t-peq-s); opacity: .55; letter-spacing: var(--ctp-t-peq-ls); }

/* ── La rejilla ──────────────────────────────────────────────────────────── */
.ctp-nav__rejilla {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  display: grid;
  /* 5 por fila en la tarjeta ancha (unos 150 px cada obra): se ven más obras y a un
     tamaño más comedido que las 4 de antes; con 6, las apaisadas quedaban pequeñas.
     En pantallas estrechas, 4. */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px var(--sils-esp-xs, 12px);
  align-content: start;
  /* Cada obra con su formato; en cada fila, todas apoyadas abajo (como en la tienda). */
  align-items: end;
  padding: var(--sils-esp-s, 16px);
  scrollbar-width: thin;
}
.ctp-nav__rejilla::-webkit-scrollbar { width: 4px; }
.ctp-nav__rejilla::-webkit-scrollbar-thumb { background: var(--ctp-borde); border-radius: 2px; }

/* ── La tarjeta de obra ──────────────────────────────────────────────────────
   El mismo lenguaje que las tarjetas de ambiente y de disposición: encima, filo
   negro; elegida (en prueba), filo negro y check negro arriba a la derecha. */
/* Como la tarjeta del listado (8-oct-2026): 8 px de la foto al texto y las líneas juntas,
   a 18 px de interlineado. Antes, 10 px arriba y 25 entre el nombre y el precio. */
.ctp-obra { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.ctp-obra__media {
  position: relative; border-radius: 2px;
  outline: 1.5px solid transparent; outline-offset: 2px;
  transition: outline-color 200ms ease;
}
.ctp-obra__media:hover,
.ctp-obra.es-probando .ctp-obra__media { outline-color: var(--ctp-negro); }
.ctp-obra.es-probando .ctp-check { opacity: 1; transform: none; }
#sw-app .ctp-obra__foto {
  position: relative; display: block; width: 100%;
  /* La forma de la obra, no la del hueco: la pone la tarjeta (proporción de la foto). */
  aspect-ratio: 1;
  padding: 0 !important; border: 0 !important; height: auto !important;
  background: var(--ctp-apoyo) !important;
  border-radius: 2px; overflow: hidden; cursor: pointer;
}
.ctp-obra__foto img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; }
.ctp-obra__marca {
  position: absolute; left: 6px; bottom: 6px;
  background: color-mix(in srgb, var(--ctp-blanco) 92%, transparent); color: var(--ctp-texto);
  font-size: var(--ctp-t-peq-s); padding: 3px 7px; border-radius: 2px;
  transition: opacity 200ms ease; letter-spacing: var(--ctp-t-peq-ls); }
/* En prueba, abajo van los marcos: el distintivo se aparta. */
.ctp-obra.es-probando .ctp-obra__marca { opacity: 0; }
#sw-app .ctp-obra__lupa {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  width: 26px; height: 26px !important; min-height: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 50%;
  background: color-mix(in srgb, var(--ctp-blanco) 92%, transparent) !important; color: var(--ctp-texto) !important;
  display: flex; align-items: center; justify-content: center; cursor: zoom-in;
  opacity: 0; transform: scale(.9);
  transition: opacity 180ms ease, transform 180ms ease;
}
#sw-app .ctp-obra__media:hover .ctp-obra__lupa,
#sw-app .ctp-obra__lupa:focus-visible { opacity: 1; transform: none; }
.ctp-obra__nombre {
  font-size: var(--ctp-t-tag-s); font-weight: var(--ctp-t-bot-w); text-transform: var(--ctp-t-tag-tt); letter-spacing: var(--ctp-t-tag-ls) ;
  color: var(--ctp-texto); margin-top: var(--sils-esp-2xs, 8px); line-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El precio, en el gris de la referencia de la tarjeta del listado (secundario al 75 %). */
.ctp-obra__precio { font-size: var(--ctp-t-peq-s); line-height: 18px; color: var(--ctp-gris-ref); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: var(--ctp-t-peq-ls); }
/* La línea de precio ocupa siempre lo mismo (aunque esté vacía): así, en cada fila,
   las fotos quedan apoyadas a la misma altura. */
.ctp-obra__precio:empty::before { content: '\00a0'; }
.ctp-obra.es-probando .ctp-obra__precio { color: var(--ctp-texto); }

/* Placas mientras cargan: pulso, sin girador. */
.ctp-placa {
  display: block; width: 100%; aspect-ratio: var(--ctp-prop, 1);
  background: var(--ctp-linea); border-radius: 2px;
  animation: ctpPulso 1.4s ease-in-out infinite;
}
@keyframes ctpPulso { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

#sw-app .ctp-nav__mas {
  grid-column: 1 / -1; justify-self: center;
  background: none !important; border: 1px solid var(--ctp-borde) !important;
  border-radius: var(--ctp-radio); color: var(--ctp-texto) !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); padding: 10px 18px !important;
  height: auto !important; cursor: pointer; margin-top: var(--sils-esp-3xs, 4px); letter-spacing: var(--ctp-t-peq-ls); }
#sw-app .ctp-nav__mas:hover { border-color: var(--ctp-negro) !important; }
.ctp-nav__rejilla .ctp-vacio { grid-column: 1 / -1; }

/* ── Los marcos: una tira sobre la parte de abajo de la obra en prueba ─────── */
@keyframes ctpMarcosSube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ctp-marco__liso {
  width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; display: block;
  border-radius: 2px; background: var(--ctp-apoyo);
  box-shadow: inset 0 0 0 1px var(--ctp-linea);
  transition: box-shadow 180ms ease;
}
/* ── El pie: el marco de la pared y un solo botón ─────────────────────────── */
.ctp-nav__pie {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sils-esp-s, 16px);
  padding: var(--sils-esp-xs, 12px) var(--sils-esp-s, 16px);
  border-top: 1px solid var(--ctp-linea);
  background: var(--ctp-blanco);
  animation: ctpSube 300ms cubic-bezier(.2,.7,.2,1);
}
@keyframes ctpSube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ctp-nav__pie[hidden] { display: none !important; }
#sw-app .ctp-nav__colocar { flex: 0 0 auto; margin-left: auto; }

/* ── La lupa ─────────────────────────────────────────────────────────────── */
.ctp-lupa {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  background: color-mix(in srgb, var(--ctp-negro) 72%, transparent);
  opacity: 0; transition: opacity 260ms ease;
  cursor: zoom-out;
}
.ctp-lupa.es-visible { opacity: 1; }
.ctp-lupa img {
  max-width: 100%; max-height: 100%;
  display: block;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ctp-negro) 40%, transparent);
  transform: scale(.97); transition: transform 300ms cubic-bezier(.2,.7,.2,1);
}
.ctp-lupa.es-visible img { transform: scale(1); }
/* La X de la lupa. Va fuera de #sw-app (colgada del body): blindada contra los estilos
   de botón del tema, con su foco igual que su estado normal. */
.ctp-lupa .ctp-lupa__cerrar,
.ctp-lupa .ctp-lupa__cerrar:focus {
  position: absolute; top: 20px; right: 20px; z-index: 1;
  width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border: 0 !important; border-radius: 50% !important;
  background: var(--ctp-blanco) !important; color: var(--ctp-texto) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ctp-negro) 25%, transparent);
  text-transform: none; letter-spacing: normal; line-height: 1;
  cursor: pointer; outline: none; transition: background-color 160ms ease;
}
.ctp-lupa .ctp-lupa__cerrar:hover { background: var(--ctp-apoyo) !important; color: var(--ctp-texto) !important; }
.ctp-lupa .ctp-lupa__cerrar:focus-visible { outline: 2px solid var(--ctp-blanco); outline-offset: 3px; }

/* ── Estados del botón, como manda el sistema ────────────────────────────── */
#sw-app .sw-btn-primario:active,
#sw-app .sw-btn-primario.es-pulsado { background: var(--ctp-texto) !important; }
#sw-app .sw-btn-primario:hover { background: var(--ctp-texto) !important; opacity: 1; }
#sw-app .sw-btn-primario.es-cargando { opacity: .8; pointer-events: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   LA PARED CAMBIA DE DISPOSICIÓN
   Nada desaparece de golpe: los huecos viejos se desvanecen, los nuevos entran
   uno tras otro y las obras viajan de su sitio al nuevo. La tarjeta elegida late
   mientras se prepara.
   ═══════════════════════════════════════════════════════════════════════════ */
#draggableContainer .vw_size_items.ctp-llega {
  animation: ctpHuecoLlega 360ms var(--ctp-curva, ease) both;
}
@keyframes ctpHuecoLlega {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}
/* El hueco que espera a una obra que viaja no enseña su fondo blanco hasta que
   llega: se vería un recuadro vacío en el destino. */
#draggableContainer .vw_size_items.ctp-espera {
  background: transparent !important;
  box-shadow: none;
}
/* La obra que viaja no se «cuelga» otra vez: ya estaba en la pared. */
.chosenArticle.ctp-viaja { animation: none; }
#draggableContainer .vw_size_items.ctp-desliza {
  transition: left 450ms var(--ctp-curva, ease), top 450ms var(--ctp-curva, ease),
              background 200ms ease, box-shadow 200ms ease;
}

.ctp-fantasma { pointer-events: none; transition: opacity 280ms ease; }
.ctp-fantasma.ctp-se-va { opacity: 0; }
.ctp-fantasma__obra { position: absolute; inset: 0; }
.ctp-fantasma__obra img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sw-comp-item.es-cargando { animation: ctpPulso 1.1s ease-in-out infinite; }

/* El aviso con acción se puede pulsar; el resto deja pasar el ratón. */
#sw-toast.sw-toast--accion.sw-toast--visible { pointer-events: auto; }
#sw-toast #sw-toast-accion {
  background: none !important; border: 0 !important; box-shadow: none !important;
  height: auto !important; min-height: 0 !important; padding: 0 0 0 14px !important; margin-left: var(--sils-esp-3xs, 4px);
  border-left: 1px solid color-mix(in srgb, var(--ctp-blanco) 25%, transparent) !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-bot-w); letter-spacing: var(--ctp-t-peq-ls) ;
  color: var(--ctp-blanco) !important; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
#sw-toast #sw-toast-accion[hidden] { display: none; }

/* Descolgar: la obra se va hacia la pared, sin desaparecer de golpe. */
.ctp-fantasma__obra.ctp-se-descuelga { animation: ctpDescuelga 240ms ease forwards; pointer-events: none; }
@keyframes ctpDescuelga {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(.96); }
}

/* Cambio de pestaña dentro de la tarjeta: fundido en dos tiempos. */
#sw-hoja-cuerpo .ctp-tab.ctp-tab--sale { opacity: 0; transition: opacity 100ms ease; }
#sw-hoja-cuerpo .ctp-tab.ctp-tab--entra { animation: ctpTabEntra 240ms var(--ctp-curva, ease) both; }
@keyframes ctpTabEntra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── La rejilla se mueve con cuidado ─────────────────────────────────────── */
/* Las obras entran escalonadas; cada foto aparece cuando ha llegado. */
.ctp-obra.ctp-obra--entra { animation: ctpObraEntra 300ms var(--ctp-curva, ease) both; }
@keyframes ctpObraEntra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ctp-obra__foto img { opacity: 0; transition: opacity 260ms ease; }
.ctp-obra__foto img.is-cargada { opacity: 1; }
/* Buscando con obras ya en pantalla: se atenúan y laten, y no se pueden tocar. */
.ctp-nav__rejilla.es-buscando { pointer-events: none; }
.ctp-nav__rejilla.es-buscando .ctp-obra { animation: ctpBusca 1.2s ease-in-out infinite; }
@keyframes ctpBusca { 0%, 100% { opacity: .35; } 50% { opacity: .6; } }
.ctp-nav__rejilla .ctp-vacio { animation: ctpTabEntra 240ms var(--ctp-curva, ease) both; }
#sw-app .ctp-nav__mas.es-cargando { display: inline-flex; align-items: center; gap: var(--sils-esp-2xs, 8px); cursor: default; color: var(--ctp-gris) !important; }
/* Filtrar disposiciones: la lista se va en un instante y vuelve escalonada. */
.ctp-refresca-sale { opacity: 0; transition: opacity 110ms ease; }
.ctp-entra { animation: ctpObraEntra 280ms var(--ctp-curva, ease) both; }
/* Hueco de marco mientras llegan: la misma caja, latiendo. */

/* ── El aviso de cookies, en su sitio ────────────────────────────────────────
   Abajo tapaba la tarjeta y el botón «Colocar». En la herramienta va arriba a la
   derecha, bajo la placa del total, que es sitio de avisos y no de controles. */
@media (min-width: 761px) {
  body.sw-pared-manda .cmplz-cookiebanner.cmplz-bottom-right,
  body.sw-pared-manda .cmplz-cookiebanner.cmplz-bottom-left,
  body.sw-pared-manda .cmplz-cookiebanner.cmplz-bottom {
    top: 88px !important; bottom: auto !important;
    right: var(--ctp-margen, 24px) !important; left: auto !important;
    /* Complianz fija el ancho con su variable: las columnas del aviso salen de ella. */
    --cmplz_banner_width: 380px;
    width: auto !important; max-width: calc(100vw - 2 * var(--ctp-margen, 24px)) !important;
    transform: none !important;
  }
}

/* Disposición: cuántas de tus obras caben. Subrayado si no caben todas. */

/* Obra sin imagen: la placa de apoyo con su filo y el texto, no un hueco roto. */
.ctp-obra__rota { display: none; }
.ctp-obra.es-rota .ctp-obra__foto { background: var(--ctp-apoyo) !important; box-shadow: inset 0 0 0 1px var(--ctp-linea); }
.ctp-obra.es-rota .ctp-obra__foto img { display: none; }
.ctp-obra.es-rota .ctp-obra__rota {
  display: flex; position: absolute; inset: 0; align-items: center; justify-content: center;
  font-size: var(--ctp-t-peq-s); color: var(--ctp-gris); letter-spacing: var(--ctp-t-peq-ls); }
/* Botón principal cargando: negro con girador, como en el sistema. */
#sw-app .ctp-nav__colocar.es-cargando { background: var(--ctp-negro) !important; color: var(--ctp-blanco) !important; display: inline-flex; align-items: center; gap: var(--sils-esp-2xs, 8px); }
#sw-app .ctp-nav__colocar.es-cargando .ctp-girador { border-color: var(--ctp-gris); border-top-color: var(--ctp-blanco); }

/* ── Modales: entran y salen, nunca de golpe ─────────────────────────────── */
.sw-modal.is-open .sw-modal-overlay { animation: ctpVeloEntra 220ms ease both; }
.sw-modal.is-open .sw-modal-box     { animation: ctpCajaEntra 300ms var(--ctp-curva, ease) both; }
.sw-modal.is-closing .sw-modal-overlay { animation: ctpVeloSale 200ms ease both; }
.sw-modal.is-closing .sw-modal-box     { animation: ctpCajaSale 200ms ease both; }
@keyframes ctpVeloEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes ctpVeloSale  { from { opacity: 1; } to { opacity: 0; } }
@keyframes ctpCajaEntra { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ctpCajaSale  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }
#sw-app .sw-placa--accion.es-cargando { display: inline-flex; align-items: center; gap: var(--sils-esp-2xs, 8px); color: var(--ctp-gris) !important; cursor: default; }


/* ═══════════════════════════════════════════════════════════════════════════
   MÓVIL (vertical, hasta 760 px) — sistema, «06 Reglas del móvil vertical»
   Nada flota encima de la pared: todo va en orden, de arriba abajo.
     · arriba, una barra con la marca;
     · la pared, a todo el ancho, con el alto que calcula el motor (470 mirando,
       330 con una hoja abierta, 300 eligiendo obra) y que cambia con transición;
     · debajo, la tarjeta a todo el ancho: sus tres placas y la tira «Huecos», o
       la hoja abierta, que empuja la pared hacia arriba sin taparla nunca;
     · abajo del todo, el resumen y un solo botón principal.
   En horizontal se sirve la maquetación de escritorio tal cual.
   ═══════════════════════════════════════════════════════════════════════════ */
.ctp-huecos { display: none; }

@media (max-width: 760px) {
  body.sw-pared-manda { --ctp-margen: 16px; --ctp-barra: 56px; --ctp-pie: 72px; }

  /* La barra de arriba: la marca. Guardar y compartir están en el resumen. */
  #sw-placas::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--ctp-barra);
    background: var(--ctp-blanco); box-shadow: 0 1px 0 var(--ctp-linea); pointer-events: none;
  }
  #sw-placas .sw-placas__zona--ai { top: 10px; left: 16px; right: 16px; }
  #sw-app .sw-placa--marca { padding: 9px var(--sils-esp-xs, 12px); }
  #sw-app .sw-placa--accion { display: none; }

  /* La pared: debajo de la barra, a todo el ancho. */
  body.sw-pared-manda #sw-content { display: block; height: auto; }
  body.sw-pared-manda #sw-canvas  { display: block; height: auto; flex: none; padding-top: var(--ctp-barra); }
  body.sw-pared-manda #pictureWall { height: 470px; transition: height 450ms var(--ctp-curva); }

  /* Debajo de la pared, la tarjeta, a todo el ancho y hasta el resumen. */
  #sw-placas .sw-placas__zona--bi {
    top: calc(var(--ctp-barra) + var(--ctp-pared-alto, 470px));
    bottom: var(--ctp-pie); left: 0; right: 0;
    flex-direction: column; gap: 0;
    transition: top 450ms var(--ctp-curva), bottom 450ms var(--ctp-curva);
  }
  body.ctp-hoja-abierta #sw-placas .sw-placas__zona--bi { bottom: 0; }
  #sw-app #ctp-panel {
    width: 100% !important; height: auto !important; flex: 1 1 auto; min-height: 0;
    border-radius: 12px 12px 0 0; box-shadow: 0 -1px 0 var(--ctp-linea);
    display: flex; flex-direction: column;
  }
  #sw-app .ctp-panel__cab { flex: 0 0 auto; }
  #sw-app .sw-celda { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 10px var(--sils-esp-xs, 12px); overflow: hidden; }
  #sw-app .sw-celda .sw-celda__v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; letter-spacing: var(--ctp-t-tag-ls); }
  #sw-app .ctp-panel__cerrar { flex: 0 0 48px; }
  #sw-app #ctp-panel .ctp-panel__cuerpo { flex: 1 1 auto; min-height: 0; }
  .ctp-pista, .sw-placas__zona--bd { display: none !important; }

  /* La tira «Huecos»: botones de 52 × 60 como mínimo, con la forma del hueco. */
  .ctp-huecos { display: block; padding: var(--sils-esp-xs, 12px) var(--sils-esp-s, 16px) 14px; border-top: 1px solid var(--ctp-linea); }
  .ctp-huecos[hidden], #ctp-panel.is-open .ctp-huecos { display: none; }
  .ctp-huecos__cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
  .ctp-huecos__pista { font-size: var(--ctp-t-peq-s); color: var(--ctp-gris); letter-spacing: var(--ctp-t-peq-ls); }

  /* La propuesta, en su sitio del orden: entre la pared y la tarjeta. */
  #sw-app .sw-placa--propuesta { width: auto !important; margin: 0 0 var(--sils-esp-2xs, 8px); border-radius: 8px; }

  /* Abajo, el resumen y el único botón principal, a todo el ancho. */
  #sw-placas .sw-placas__zona--ad {
    top: auto; bottom: 0; left: 0; right: 0;
    transition: transform 450ms var(--ctp-curva);
  }
  body.ctp-hoja-abierta #sw-placas .sw-placas__zona--ad { transform: translateY(100%); }
  #sw-app .sw-placa--resumen {
    width: 100%; height: var(--ctp-pie); border-radius: 0; padding: var(--sils-esp-xs, 12px) var(--sils-esp-s, 16px);
    box-shadow: 0 -1px 0 var(--ctp-linea); gap: var(--sils-esp-xs, 12px);
  }
  #sw-app #sw-p-revisar { flex: 1 1 auto; min-height: 48px; }

  /* El navegador de obras, en dos filas de cabecera y dos columnas. */
  /* Cabecera: en el nivel 2 las herramientas se quedan en icono. */
  #sw-app .ctp-nav__herr { padding: 0 var(--sils-esp-2xs, 8px) !important; }
  .ctp-nav__herr-t { display: none; }
  #sw-app .ctp-nav__quitar span { display: none; }
  /* Pie: la casilla del marco arriba, el botón a todo el ancho. */
  .ctp-nav__pie { flex-direction: column; align-items: stretch; gap: 10px; }
  .ctp-nav__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sils-esp-s, 16px) var(--sils-esp-xs, 12px); padding: var(--sils-esp-xs, 12px) var(--sils-esp-s, 16px); }
  #sw-app .ctp-nav__colocar { flex: 0 0 auto; align-self: stretch; margin-left: 0; min-height: 48px; }

  /* Revisar: la pared entera arriba, a todo el ancho; la cuenta sube desde abajo. */
  :root { --ctp-rev-ancho: 100%; }
  body.ctp-revisando #sw-app { width: 100%; }
  #ctp-revisar {
    top: calc(var(--ctp-barra) + var(--ctp-pared-alto, 240px)); width: 100%;
    transform: translateY(100%);
    border-radius: 12px 12px 0 0; overflow: hidden;
  }
  #ctp-revisar.is-open { transform: none; box-shadow: 0 -12px 32px color-mix(in srgb, var(--ctp-negro) 12%, transparent); }
  .ctp-rev__col { padding: var(--sils-esp-s, 16px) var(--sils-esp-s, 16px) 20px; border-left: 0; }
  }


/* ═══════════════════════════════════════════════════════════════════════════
   TARJETAS: UN SOLO LENGUAJE DE ESTADO
   Ambiente, disposición y obra se comportan igual. Encima: filo negro. Elegida:
   filo negro y check negro arriba a la derecha. El filo va separado 2 px de la
   imagen (sistema, tarjeta de obra «Probando») y todo cambia con transición.
   ═══════════════════════════════════════════════════════════════════════════ */
.ctp-check,
#sw-hoja-cuerpo .sw-bg-badge,
#sw-hoja-cuerpo .sw-comp-check {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ctp-negro); color: var(--ctp-blanco);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6);
  transition: opacity 200ms ease, transform 240ms var(--ctp-curva, ease);
  pointer-events: none;
}
#sw-hoja-cuerpo .sw-bg-card.is-selected .sw-bg-badge,
#sw-hoja-cuerpo .sw-comp-item.is-selected .sw-comp-check,
.ctp-obra.es-probando .ctp-check { opacity: 1; transform: none; }
#sw-hoja-cuerpo .sw-comp-check svg { width: 10px; height: 10px; stroke-width: 3; }

#sw-hoja-cuerpo .sw-bg-card img,
#sw-hoja-cuerpo .sw-comp-preview {
  box-shadow: none;
  outline: 1.5px solid transparent; outline-offset: 2px;
  transition: outline-color 200ms ease;
}
#sw-hoja-cuerpo .sw-bg-card:hover img,
#sw-hoja-cuerpo .sw-bg-card.is-selected img,
#sw-hoja-cuerpo .sw-comp-item:hover .sw-comp-preview,
#sw-hoja-cuerpo .sw-comp-item.is-selected .sw-comp-preview { outline-color: var(--ctp-negro); }

/* «Quitar filtros» solo cuando hay alguno puesto. */
#sw-app .ctp-nav__limpiar[hidden] { display: none !important; }
@media (max-width: 760px) { #sw-toast { top: 64px; } }

/* Los rótulos sobre la pared van fuera del flujo y se escalan enteros (ver
   swAjustarRotulos): la medida, bajo la cruz; «Probando», bajo el hueco. */
.vw_size_items .sw-hueco-rotulo {
  position: absolute; left: 50%; top: 50%;
  transform-origin: top center;
  line-height: 1.2;
}
.ctp-prueba__et { transform-origin: top left; }


/* ── Eligiendo obra: el resto de la pared, un poco apagado ──────────────────
   Se trabaja en un hueco; los demás se atenúan (sin desaparecer) para que se vea
   dónde está la atención. Todo con transición. */
#draggableContainer .vw_size_items { transition: background 200ms ease, box-shadow 200ms ease, outline-color 200ms ease, opacity 260ms ease; }
body.ctp-eligiendo #draggableContainer .vw_size_items:not(.vw_size_selected) { opacity: .5; }
body.ctp-eligiendo #sw-bg-layer { filter: brightness(.94); }

/* ── La línea de resultado de buscar y filtrar ────────────────────────────── */
.ctp-nav__resultado {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sils-esp-2xs, 8px);
  padding: 10px var(--sils-esp-s, 16px); border-bottom: 1px solid var(--ctp-linea);
}
.ctp-nav__resultado-n { font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-bot-w); color: var(--ctp-negro); margin-right: var(--sils-esp-3xs, 4px); letter-spacing: var(--ctp-t-peq-ls); }
.ctp-nav__resultado-n.es-buscando { color: var(--ctp-gris); animation: ctpPulso 1.2s ease-in-out infinite; }
.ctp-nav__elegidos { display: contents; }
#sw-app .ctp-elegido {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px !important; min-height: 0 !important; padding: 0 var(--sils-esp-2xs, 8px) 0 10px !important;
  background: var(--ctp-apoyo) !important; border: 1px solid var(--ctp-linea) !important;
  border-radius: 13px; color: var(--ctp-texto) !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); cursor: pointer;
  transition: border-color 200ms ease; letter-spacing: var(--ctp-t-peq-ls); }
#sw-app .ctp-elegido:hover { border-color: var(--ctp-negro) !important; }
#sw-app .ctp-nav__limpiar-todo { margin-left: auto; font-size: var(--ctp-t-peq-s); letter-spacing: var(--ctp-t-peq-ls); }

/* ── Tu pared, lista: a medias ────────────────────────────────────────────── */
#sw-app #ctp-revisar .ctp-rev__cta[hidden],
#sw-app #ctp-revisar .ctp-rev__asi[hidden] { display: none !important; }
#sw-app #ctp-revisar .ctp-rev__asi {
  display: flex; align-items: center; justify-content: center; width: 100%;
  margin-top: 10px; padding: 14px 20px !important; height: auto !important; min-height: 0 !important;
  background: var(--ctp-blanco) !important; color: var(--ctp-negro) !important;
  border: 1px solid var(--ctp-negro) !important; border-radius: var(--ctp-radio) !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-bot-s); font-weight: var(--ctp-t-bot-w);
  letter-spacing: normal ; text-transform: var(--ctp-t-bot-tt); cursor: pointer;
  transition: background 200ms ease;
}
#sw-app #ctp-revisar .ctp-rev__asi:hover { background: var(--ctp-apoyo) !important; }
/* ── Tu foto, como un ambiente más ─────────────────────────────────────────── */
#sw-hoja-cuerpo .sw-bg-upload-card { position: relative; }
#sw-hoja-cuerpo .sw-bg-upload-card.tiene-foto .sw-bg-upload-caja {
  border: 0; background-size: cover; background-position: center;
  outline: 1.5px solid transparent; outline-offset: 2px;
  transition: outline-color 200ms ease;
}
#sw-hoja-cuerpo .sw-bg-upload-card.tiene-foto .sw-bg-upload-caja svg { display: none; }
#sw-hoja-cuerpo .sw-bg-upload-card.tiene-foto:hover .sw-bg-upload-caja,
#sw-hoja-cuerpo .sw-bg-upload-card.tiene-foto.is-selected .sw-bg-upload-caja { outline-color: var(--ctp-negro); }
#sw-hoja-cuerpo .sw-bg-upload-card.is-selected .sw-bg-badge { opacity: 1; transform: none; }
#sw-hoja-cuerpo .sw-bg-upload-card .sw-bg-label { display: inline-block; }
/* «Cambiar · Eliminar» van debajo del nombre, donde los ambientes llevan sus colores. */
#sw-app .ctp-tu-foto__acciones { display: flex; gap: 14px; margin-top: 10px; white-space: nowrap; }
#sw-app .ctp-tu-foto__cambiar {
  margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; height: auto !important; min-height: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); letter-spacing: var(--ctp-t-peq-ls) ;
  color: var(--ctp-texto) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
/* Las filas de huecos vacíos son botones: a todo el ancho, como las demás. */
#sw-app #ctp-revisar .ctp-rev__fila--vacia { width: 100% !important; }

/* Un filtro que aquí no daría ninguna obra: apagado, sin poder elegirse. */
#sw-app .ctp-chip.es-vacio { opacity: .4; cursor: default; }
#sw-app .ctp-chip.es-vacio:hover { border-color: var(--ctp-borde) !important; }
#sw-app .ctp-chip { transition: border-color 200ms ease, background 200ms ease, color 200ms ease, opacity 200ms ease; }

/* Las celdas de la tarjeta son trozos de una placa: sin radio propio (la placa ya lo
   tiene y recorta). */
#sw-app .sw-celda, #sw-app .ctp-panel__cerrar { border-radius: 0; }
#sw-app .ctp-rev__mini { border-radius: 2px; }   /* miniatura: 2 px, como todas */
/* Con una obra en prueba, la medida del hueco no asoma por debajo. */
.vw_size_items.ctp-probando .sw-hueco-rotulo { display: none; }

/* ── El arranque (ver swParedLista) ─────────────────────────────────────────
   Hasta que la pared está encuadrada y con su foto, no se enseña: debajo se ve el
   color de pared, el mismo del primer fotograma. Luego aparece de una vez. */
#sw-canvas, #pictureWall { background-color: #DEDAD3; }
#zoomElement { opacity: 0; }
body.ctp-pared-lista #zoomElement { opacity: 1; }
/* La foto nueva entra por encima de la anterior (fundido cruzado), con sus lados. */
.sw-bg-nueva {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center center;
}
.sw-bg-nueva__foto {
  position: absolute; inset: 0;
  background-size: cover; background-position: center center;
}
/* Los lados de la foto: cuando se reduce para que quepa la composición, sigue la
   foto (su borde alargado o, si lo corta un mueble, la mitad de ese lado reflejada y
   difuminada). Van dentro del plano, debajo de la foto, y se mueven con ella. Al
   revisar, la foto es una lámina y no llevan lados. */
.sw-bg-lados { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sw-bg-lado {
  position: absolute; top: 0; bottom: 0; width: 100%;
  background-size: 100% 100%; background-repeat: no-repeat;
  transition: opacity 450ms ease;
}
/* Entran 1 cm por debajo de la foto: si no, en el corte asoma una línea del lienzo.
   Arriba y abajo cubren también las esquinas (de -100 % a 200 % del ancho). */
.sw-bg-lado--izq { right: calc(100% - 1px); }
.sw-bg-lado--der { left: calc(100% - 1px); }
.sw-bg-lado--arriba,
.sw-bg-lado--abajo { left: -100%; width: 300%; height: 60%; }
.sw-bg-lado--arriba { top: auto; bottom: calc(100% - 1px); }
.sw-bg-lado--abajo { bottom: auto; top: calc(100% - 1px); }
body.ctp-revisando .sw-bg-lado { opacity: 0; }
body.ctp-eligiendo .sw-bg-lados { filter: brightness(.94); }
/* Mientras se montan las obras, los avisos de «faltan huecos» o «elige cómo colgar»
   no tienen sentido (en un momento estarán colgadas): no asoman. */
body.ctp-montando .sw-aviso-huecos,
body.ctp-montando .ctp-pista { opacity: 0 !important; transition: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   TUS LISTAS, EN EL NAVEGADOR DE OBRAS
   Las mismas listas que en la tienda. Una ficha por lista (como los filtros) y,
   en cada tarjeta, el marcador para guardar o el aspa para quitar de la lista.
   ═══════════════════════════════════════════════════════════════════════════ */
.ctp-nav__listas { padding: var(--sils-esp-xs, 12px) var(--sils-esp-s, 16px) var(--sils-esp-xs, 12px); border-bottom: 1px solid var(--ctp-linea); background: var(--ctp-apoyo); }
.ctp-nav__listas-acciones { display: flex; flex-wrap: wrap; gap: 6px var(--sils-esp-s, 16px); margin-top: 10px; }
.ctp-nav__listas-acciones[hidden] { display: none; }
#sw-app .ctp-nav__listas-acciones .sw-btn-enlace { font-size: var(--ctp-t-peq-s); letter-spacing: var(--ctp-t-peq-ls); }
#sw-app .ctp-nav__listas-acciones .sw-btn-enlace.es-cargando { opacity: .5; pointer-events: none; }
#sw-app .ctp-lista {
  background: var(--ctp-blanco) !important;
  border: 1px solid var(--ctp-borde) !important;
  border-radius: var(--ctp-radio) !important;
  color: var(--ctp-texto) !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w);
  padding: 6px 10px !important; height: auto !important; min-height: 0 !important;
  line-height: 1.2 !important; text-transform: none !important; letter-spacing: var(--ctp-t-peq-ls) !important;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
#sw-app .ctp-lista:hover { border-color: var(--ctp-negro) !important; }
#sw-app .ctp-lista.is-activa {
  background: var(--ctp-negro) !important; border-color: var(--ctp-negro) !important;
  color: var(--ctp-blanco) !important;
}

/* El botón de listas de la tarjeta: junto a la lupa, arriba a la izquierda. Se
   ve al pasar por encima; guardada, se queda a la vista y relleno. */
#sw-app .ctp-obra__lista {
  position: absolute; top: 6px; left: 38px; z-index: 2;
  width: 26px; height: 26px !important; min-height: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 50%;
  background: color-mix(in srgb, var(--ctp-blanco) 92%, transparent) !important; color: var(--ctp-texto) !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transform: scale(.9);
  transition: opacity 180ms ease, transform 180ms ease;
}
#sw-app .ctp-obra__lista svg path { transition: fill 200ms ease; }
#sw-app .ctp-obra__lista.es-guardada svg path { fill: currentColor; }
#sw-app .ctp-obra__media:hover .ctp-obra__lista,
#sw-app .ctp-obra__lista.es-guardada,
#sw-app .ctp-obra__lista:focus-visible { opacity: 1; transform: none; }
#sw-app .ctp-obra__lista.es-cargando { opacity: .5; pointer-events: none; }
/* En táctil no hay «pasar por encima»: lupa y marcador, siempre a la vista. */
@media (hover: none) {
  #sw-app .ctp-obra__lupa,
  #sw-app .ctp-obra__lista { opacity: 1; transform: none; }
}

/* «Por colgar» (lo de tu pared que espera hueco) va delante y con otro trazo. */
.ctp-tab[data-tab="obras"] > .ctp-vacio--obras { padding: 24px 20px; animation: ctpTabEntra 240ms var(--ctp-curva, ease) both; }

/* ── Obras que no se pueden elegir en este hueco (de otra colección, o que no se
   hacen en esta medida): se ven, apagadas, sin reaccionar. ─────────────────── */
.ctp-obra.es-inactiva .ctp-obra__foto { cursor: default; }
.ctp-obra.es-inactiva .ctp-obra__foto img.is-cargada { opacity: .4; filter: grayscale(.6); }
.ctp-obra.es-inactiva .ctp-obra__media:hover { outline-color: transparent; }
.ctp-obra.es-inactiva .ctp-obra__nombre,
.ctp-obra.es-inactiva .ctp-obra__precio { color: var(--ctp-gris); }


/* ═══════════════════════════════════════════════════════════════════════════
   TODO EL CATÁLOGO (2.15)
   «Colección» (la primera pestaña), «Marcos» (la última), la configuración de
   cada obra en el pie de «Obras», mover la composición, la guía y los enlaces a
   la web. Filas a sangre con líneas finas y esquinas rectas, como el resto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lo que no es de la colección de la pared no se ve. */
#sw-hoja-cuerpo .ctp-fuera-de-linea { display: none !important; }
#sw-app .ctp-fam[hidden] { display: none !important; }

/* ── Volver a la web ─────────────────────────────────────────────────────── */
#sw-app a.sw-placa--marca { text-decoration: none; transition: opacity 160ms ease; }
#sw-app a.sw-placa--marca:hover { opacity: .85; }
#sw-app .sw-placa--salir {
  text-decoration: none; gap: 6px; white-space: nowrap;
  color: var(--ctp-texto);
}
#sw-app .sw-placa--salir:hover { color: var(--ctp-negro); }
#sw-app .sw-salir--movil { display: none; }
#sw-app .sw-placa--ayuda { gap: 6px; }

/* ── La pestaña «Colección» (7-oct-2026) ─────────────────────────────────────
   Una franja por colección, de arriba abajo y a sangre, al estilo de las cajitas del
   buscador (Sils · Menús, «rejilla fileteada»): líneas finas entre franjas, sin
   esquinas, gris muy claro al señalar; el logotipo a la izquierda, el nombre en
   mayúsculas con su descripción y la marca de elegida a la derecha. Los acabados
   (Obra Gráfica) van en cajas dentro de su franja, siempre a la vista. Los logotipos
   no crecen al señalar. Las líneas son bordes: la regla general de botones de la
   herramienta quita las sombras. */
.ctp-tab[data-tab="coleccion"] { padding: 0 18px 18px !important; }
.ctp-tab[data-tab="coleccion"] > .ctp-pie,
.ctp-tab[data-tab="marcos"] > .ctp-pie { margin: var(--sils-esp-s, 16px) -18px -18px; }
.ctp-cajas { display: flex; flex-direction: column; margin: 0 -18px; }
#sw-app .ctp-caja {
  position: relative; display: block; width: 100%;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  border-bottom: 1px solid var(--ctp-linea) !important;
  color: var(--ctp-negro) !important; text-align: left;
  transition: background-color 150ms ease;
  animation: ctpCajaEntraCol 260ms ease-out backwards;
}
#sw-app .ctp-caja:nth-child(2) { animation-delay: 40ms; }
#sw-app .ctp-caja:nth-child(3) { animation-delay: 80ms; }
@keyframes ctpCajaEntraCol { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* La fila: la franja sin acabados es ella misma el botón; con acabados, su cabecera. */
#sw-app button.ctp-caja,
#sw-app .ctp-caja__cab {
  position: relative;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 24px;
  width: 100%; min-height: 104px; height: auto !important; padding: 18px 56px 18px 24px !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  color: var(--ctp-negro) !important; text-align: left; cursor: pointer;
}
#sw-app button.ctp-caja { border-bottom: 1px solid var(--ctp-linea) !important; }
#sw-app button.ctp-caja:hover,
#sw-app .ctp-caja--grupo:has(.ctp-caja__cab:hover),
#sw-app .ctp-caja.is-activa { background: var(--ctp-apoyo) !important; }
.ctp-caja__logo { display: flex; align-items: center; justify-content: flex-start; flex: 0 0 148px; width: 148px; height: 48px; }
.ctp-caja__logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ctp-caja__txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ctp-caja__nombre {
  line-height: 1.25; color: var(--ctp-negro);
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-ind-w);
  letter-spacing: var(--ctp-t-ind-ls); text-transform: var(--ctp-t-ind-tt);
}
.ctp-caja__desc {
  line-height: 1.45; color: var(--ctp-gris);
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w);
  letter-spacing: var(--ctp-t-peq-ls); text-transform: none;
}
.ctp-caja .ctp-check { top: calc(50% - 10px); right: 24px; }
.ctp-caja.is-activa > .ctp-check,
.ctp-caja.is-activa > .ctp-caja__cab > .ctp-check { opacity: 1; transform: none; }
/* Los acabados: tres cajas en fila dentro de la franja, con líneas finas. La elegida,
   con el borde negro. */
.ctp-subcajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 24px 20px; }
#sw-app .ctp-subcaja {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sils-esp-2xs, 8px);
  min-height: 0; height: auto !important; padding: var(--sils-esp-xs, 12px) var(--sils-esp-2xs, 8px) 10px !important; margin-left: -1px;
  background: var(--ctp-blanco) !important; border: 1px solid var(--ctp-linea) !important; border-radius: 0 !important;
  color: var(--ctp-texto) !important; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
#sw-app .ctp-subcaja:first-child { margin-left: 0; }
#sw-app .ctp-subcaja:hover { background: var(--ctp-apoyo) !important; }
#sw-app .ctp-subcaja.is-activa { z-index: 1; border-color: var(--ctp-negro) !important; color: var(--ctp-negro) !important; }
.ctp-subcaja__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 28px; }
.ctp-subcaja__logo img { display: block; max-width: min(100%, 110px); max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ctp-subcaja__nombre {
  font-size: var(--ctp-t-eti-s); font-weight: var(--ctp-t-ind-w);
  letter-spacing: var(--ctp-t-eti-ls); text-transform: var(--ctp-t-eti-tt);
}
@media (max-width: 760px) {
  #sw-app button.ctp-caja, #sw-app .ctp-caja__cab { gap: var(--sils-esp-s, 16px); padding: var(--sils-esp-s, 16px) 48px var(--sils-esp-s, 16px) var(--sils-esp-s, 16px) !important; }
  .ctp-caja__logo { flex-basis: 104px; width: 104px; height: 40px; }
  .ctp-caja .ctp-check { right: 16px; }
  .ctp-subcajas { padding: 0 var(--sils-esp-s, 16px) var(--sils-esp-s, 16px); }
}

/* ── La pestaña «Marcos» ───────────────────────────────────────────────── */
.ctp-tab[data-tab="marcos"] { padding: 6px 18px 18px !important; }
.ctp-mp__grupo { padding: var(--sils-esp-xs, 12px) 0 var(--sils-esp-s, 16px); border-bottom: 1px solid var(--ctp-linea); }
.ctp-mp__grupo .ctp-et { margin-bottom: 10px; }
.ctp-mp__rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  border-top: 1px solid var(--ctp-linea); border-left: 1px solid var(--ctp-linea);
}
#sw-app .ctp-mp__op {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sils-esp-3xs, 4px);
  background: var(--ctp-blanco) !important; border: 0 !important;
  border-right: 1px solid var(--ctp-linea) !important; border-bottom: 1px solid var(--ctp-linea) !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: var(--sils-esp-xs, 12px) !important; height: auto !important; min-height: 0 !important;
  font-family: var(--ctp-sans); text-align: left; text-transform: none !important; letter-spacing: normal !important;
  color: var(--ctp-texto) !important; cursor: pointer; transition: background 160ms ease;
}
#sw-app .ctp-mp__op:hover { background: var(--ctp-apoyo) !important; }
#sw-app .ctp-mp__op.is-activa { background: var(--ctp-apoyo) !important; box-shadow: inset 0 0 0 1.5px var(--ctp-negro) !important; }
.ctp-mp__op .ctp-check { top: 8px; right: 8px; }
.ctp-mp__op.is-activa .ctp-check { opacity: 1; transform: none; }
.ctp-mp__muestra { width: 56px; height: 56px; display: block; margin-bottom: var(--sils-esp-3xs, 4px); }
.ctp-mp__muestra img, .ctp-mp__muestra .ctp-marco__liso {
  width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ctp-apoyo);
  box-shadow: inset 0 0 0 1px var(--ctp-linea);
}
.ctp-mp__nombre { font-size: var(--ctp-t-enf-s); font-weight: var(--ctp-t-bot-w); color: var(--ctp-negro); letter-spacing: var(--ctp-t-enf-ls); }
.ctp-mp__precio { font-size: var(--ctp-t-peq-s); color: var(--ctp-gris); letter-spacing: var(--ctp-t-peq-ls); }
.ctp-mp__nota { margin: var(--sils-esp-xs, 12px) 0 0; font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); color: var(--ctp-gris); letter-spacing: var(--ctp-t-peq-ls); }

/* ── Cada obra: las filas del pie de «Obras» ───────────────────────────── */
#sw-app .ctp-nav__pie { flex-direction: column; align-items: stretch; gap: 0; padding: 0 var(--sils-esp-s, 16px) var(--sils-esp-xs, 12px); }
.ctp-nav__pie-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--sils-esp-s, 16px); padding-top: var(--sils-esp-xs, 12px); }
.ctp-config[hidden] { display: none !important; }
.ctp-config { display: flex; flex-direction: column; }
.ctp-config__fila {
  display: grid; grid-template-columns: 132px auto 1fr; align-items: center; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--ctp-linea);
  animation: ctpSube 260ms cubic-bezier(.2,.7,.2,1);
}
.ctp-config__fila .ctp-et { line-height: 1.3; }
.ctp-config__ops { display: flex; flex-wrap: wrap; gap: 6px; }
/* Las opciones de formato: con la forma de los filtros, pero no son filtros. */
#sw-app .ctp-opcion {
  background: var(--ctp-blanco) !important;
  border: 1px solid var(--ctp-borde) !important;
  border-radius: var(--ctp-radio) !important;
  color: var(--ctp-texto) !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w);
  padding: 6px 10px !important; height: auto !important; min-height: 0 !important;
  line-height: 1.2 !important; text-transform: none !important; letter-spacing: var(--ctp-t-peq-ls) !important;
  cursor: pointer; box-shadow: none !important;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
#sw-app .ctp-opcion:hover { border-color: var(--ctp-negro) !important; }
#sw-app .ctp-opcion.is-activa { background: var(--ctp-negro) !important; border-color: var(--ctp-negro) !important; color: var(--ctp-blanco) !important; }
.ctp-config__v { font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); color: var(--ctp-gris); letter-spacing: var(--ctp-t-peq-ls); line-height: 1.35; }
.ctp-config__fila--texto { grid-template-columns: 132px 1fr; }
#sw-app .ctp-config__abrir { font-size: var(--ctp-t-peq-s); letter-spacing: var(--ctp-t-peq-ls); justify-self: start; }
#sw-app .ctp-config__abrir[hidden], #sw-app .ctp-config__texto[hidden] { display: none !important; }
#sw-app .ctp-config__texto {
  width: 100%; min-height: 44px; resize: vertical;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); letter-spacing: var(--ctp-t-peq-ls); line-height: 1.4;
  color: var(--ctp-texto); background: var(--ctp-blanco);
  border: 1px solid var(--ctp-borde) !important; border-radius: var(--ctp-radio);
  padding: var(--sils-esp-2xs, 8px) 10px; height: auto !important;
}
#sw-app .ctp-config__texto:focus { border-color: var(--ctp-negro) !important; outline: none; }

/* ── Mover la composición ──────────────────────────────────────────────── */
#draggableContainer .vw_size_items { touch-action: none; }
body.ctp-moviendo, body.ctp-moviendo * { cursor: grabbing !important; user-select: none; }
body.ctp-moviendo #draggableContainer .vw_size_items { transition: none !important; }
.ctp-tab[data-tab="disposicion"] > .ctp-pie { display: flex; gap: var(--sils-esp-2xs, 8px); }
#sw-app .ctp-centrar { flex: 0 0 auto; }
#sw-app .ctp-centrar[hidden] { display: none !important; }

/* ── La guía ───────────────────────────────────────────────────────────── */
.ctp-guia { position: fixed; inset: 0; z-index: 95; opacity: 0; transition: opacity 240ms ease; }
.ctp-guia.es-visible { opacity: 1; }
.ctp-guia__foco {
  position: fixed; border-radius: var(--ctp-radio);
  box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--ctp-negro) 58%, transparent);
  transition: left 320ms var(--ctp-curva, ease), top 320ms var(--ctp-curva, ease),
              width 320ms var(--ctp-curva, ease), height 320ms var(--ctp-curva, ease);
  pointer-events: none;
}
.ctp-guia__burbuja {
  position: fixed; width: min(300px, calc(100vw - 24px));
  background: var(--ctp-blanco); border-radius: var(--ctp-radio);
  padding: var(--sils-esp-s, 16px) 18px 14px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ctp-negro) 18%, transparent);
  font-family: var(--ctp-sans);
  transition: left 320ms var(--ctp-curva, ease), top 320ms var(--ctp-curva, ease);
}
.ctp-guia__burbuja::before {
  content: ''; position: absolute; top: -6px; left: var(--ctp-guia-flecha, 50%);
  width: 12px; height: 12px; margin-left: -6px; background: var(--ctp-blanco); transform: rotate(45deg);
}
.ctp-guia__burbuja.es-arriba::before { top: auto; bottom: -6px; }
.ctp-guia__n { display: block; font-size: var(--ctp-t-eti-s); text-transform: var(--ctp-t-eti-tt); letter-spacing: var(--ctp-t-eti-ls); color: var(--ctp-gris); margin-bottom: 6px; }
.ctp-guia__t { margin: 0 0 var(--sils-esp-3xs, 4px); font-size: var(--ctp-t-gra-s); font-weight: var(--ctp-t-bot-w); color: var(--ctp-negro); letter-spacing: var(--ctp-t-gra-ls); line-height: 1.2; }
.ctp-guia__d { margin: 0 0 14px; font-size: var(--ctp-t-peq-s); line-height: 1.45; color: var(--ctp-texto); letter-spacing: var(--ctp-t-peq-ls); }
.ctp-guia__acciones { display: flex; align-items: center; justify-content: space-between; gap: var(--sils-esp-xs, 12px); }
#sw-app .ctp-guia__acciones .sw-btn-enlace { font-size: var(--ctp-t-peq-s); letter-spacing: var(--ctp-t-peq-ls); }
#sw-app .ctp-guia__acciones .sw-btn-primario { min-height: 40px; }

@media (max-width: 760px) {
  #sw-app .sw-salir--escritorio { display: none; }
  #sw-app .sw-salir--movil { display: flex; padding: 9px var(--sils-esp-xs, 12px); }
  #sw-app .sw-placa--ayuda { display: flex; margin-left: auto; padding: 9px 11px; }
  .ctp-mp__rejilla { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .ctp-config__fila { grid-template-columns: 1fr; gap: var(--sils-esp-2xs, 8px); padding: 10px 0; }
  .ctp-config__fila--texto { grid-template-columns: 1fr; }
  .ctp-nav__pie-fila { flex-direction: column; align-items: stretch; gap: 10px; }
}
/* Cinco celdas: el valor en una línea (la tarjeta abierta se ensancha lo que haga falta). */
#sw-app .sw-celda .sw-celda__v, #sw-app .sw-celda .sw-placa__et { white-space: nowrap; }
/* Revisando, la columna estrecha la aplicación: «Volver a la web» se retira para no
   montarse en las placas de la izquierda. */
body.ctp-revisando #sw-app .sw-salir--escritorio { display: none; }
/* Escritorio estrecho: «Ayuda» y «Volver a la web» se quedan en icono y el resumen sin
   el recuento (lo dice la celda «Obras»). */
@media (min-width: 761px) and (max-width: 1260px) {
  #sw-app .sw-salir--escritorio { font-size: 0; gap: 0; padding: 11px 14px; }
  #sw-app .sw-salir--escritorio svg { width: 15px; height: 15px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  #sw-app .sw-placa__obras { display: none; }
}
/* El pie de las hojas por encima de lo que se desplaza (las marcas de elegido). */
#sw-hoja-cuerpo .ctp-tab > .ctp-pie { z-index: 5; }
@media (max-width: 760px) {
  /* Cinco celdas: cada una a su ancho, y la fila se desplaza de lado (el aspa, fija). */
  #sw-app .ctp-panel__cab { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  #sw-app .ctp-panel__cab::-webkit-scrollbar { display: none; }
  #sw-app .sw-celda { flex: 0 0 auto; min-width: 0; padding: 10px 14px !important; }
  #sw-app .sw-celda .sw-celda__v { max-width: 132px; }
  #sw-app .ctp-panel__cerrar { position: sticky; right: 0; background: var(--ctp-blanco) !important; box-shadow: -8px 0 8px -8px color-mix(in srgb, var(--ctp-negro) 18%, transparent); }
  #sw-app .sw-salir--movil { padding: 9px 11px; }
  #sw-app .sw-placa--ayuda { margin-left: auto; }
}
@media (max-width: 760px) { #sw-app .sw-celda { padding-right: 26px !important; } }
/* La foto de una obra no se arrastra sola ni se selecciona: se arrastra la composición. */
#draggableContainer img, #draggableContainer .chosenArticle {
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARCOS, PASPARTÚ Y SOPORTE: EL MISMO SELECTOR QUE AMBIENTES Y DISPOSICIONES
   Radio suave (4 px); encima y elegida, filo negro fino separado 2 px; elegida,
   además, el check negro arriba a la derecha. Vale para la hoja «Marcos», la tira
   de marcos de la obra en prueba y las filas de paspartú o soporte.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Las muestras pequeñas. */
.ctp-check.ctp-check--mini {
  top: -6px; right: -6px; width: 14px; height: 14px;
  box-shadow: 0 0 0 1.5px var(--ctp-blanco);
}
/* Con el filo por fuera, las muestras necesitan algo más de aire entre ellas. */
.ctp-config__ops { gap: 10px; }
/* La hoja «Marcos»: tarjetas como las de ambiente, sin celdas de tabla. */
.ctp-mp__rejilla,
.ctp-mp__rejilla--extra {
  border: 0;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 18px 14px;
}
#sw-app .ctp-mp__op,
#sw-app .ctp-mp__op:hover,
#sw-app .ctp-mp__op.is-activa {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; gap: 3px;
}
.ctp-mp__muestra {
  position: relative; width: 100%; height: auto; aspect-ratio: 1; margin-bottom: var(--sils-esp-2xs, 8px);
}
.ctp-mp__muestra img, .ctp-mp__muestra .ctp-marco__liso {
  border-radius: var(--ctp-radio);
  box-shadow: inset 0 0 0 1px var(--ctp-linea);
  outline: 1.5px solid transparent; outline-offset: 2px;
  transition: outline-color 200ms ease;
}
#sw-app .ctp-mp__op:hover .ctp-mp__muestra img, #sw-app .ctp-mp__op:hover .ctp-mp__muestra .ctp-marco__liso,
#sw-app .ctp-mp__op.is-activa .ctp-mp__muestra img, #sw-app .ctp-mp__op.is-activa .ctp-mp__muestra .ctp-marco__liso { outline-color: var(--ctp-negro); }
.ctp-mp__muestra .ctp-check { top: 6px; right: 6px; }
.ctp-mp__op.is-activa .ctp-check { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .ctp-mp__rejilla, .ctp-mp__rejilla--extra { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sils-esp-s, 16px) var(--sils-esp-xs, 12px); }
}
/* En la tira de la obra las muestras son pequeñas (hasta seis marcos): el check, menor. */
.ctp-obra__media .ctp-check--mini { width: 12px; height: 12px; top: -5px; right: -5px; }
.ctp-obra__media .ctp-check--mini svg { width: 7px; height: 7px; }

/* ── Opciones de la obra: en el escritorio, filas; en el móvil, una línea que se
   despliega (si no, las filas se comían la rejilla de obras). ─────────────── */
#sw-app .ctp-config__resumen { display: none; }
@media (max-width: 760px) {
  #sw-app .ctp-config__resumen {
    display: flex; align-items: center; gap: var(--sils-esp-xs, 12px); width: 100%;
    background: none !important; border: 0 !important; border-bottom: 1px solid var(--ctp-linea) !important;
    border-radius: 0 !important; box-shadow: none !important;
    padding: var(--sils-esp-xs, 12px) 0 !important; height: auto !important; min-height: 44px !important;
    font-family: var(--ctp-sans); text-align: left; text-transform: none !important; letter-spacing: normal !important;
    color: var(--ctp-texto) !important; cursor: pointer;
  }
  .ctp-config__resumen .ctp-et { flex: 0 0 auto; }
  .ctp-config__resumen-v {
    flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: var(--ctp-t-peq-s); color: var(--ctp-texto); letter-spacing: var(--ctp-t-peq-ls);
  }
  .ctp-config__resumen svg { flex: 0 0 auto; color: var(--ctp-gris); transition: transform 300ms ease; }
  .ctp-config.is-abierta .ctp-config__resumen svg { transform: rotate(180deg); }
  .ctp-config__filas { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ctp-curva, ease); }
  .ctp-config__filas-in { min-height: 0; overflow: hidden; }
  .ctp-config.is-abierta .ctp-config__filas { grid-template-rows: 1fr; }
  /* Las filas desplegadas, compactas: el nombre a la izquierda y las muestras al lado.
     Con aire arriba para el check de las muestras. */
  .ctp-config__filas-in > .ctp-config__fila,
  .ctp-config__filas-in > .ctp-config__fila--texto { grid-template-columns: 92px 1fr; gap: 6px var(--sils-esp-xs, 12px); padding: var(--sils-esp-xs, 12px) 0 10px; animation: none; }
  .ctp-config__filas .ctp-config__v { display: none; }
  .ctp-config__filas .ctp-config__fila--texto .ctp-config__texto,
  .ctp-config__filas .ctp-config__fila--texto .ctp-config__abrir { grid-column: 2; }
  #sw-app .ctp-config__ops--texto .ctp-opcion { padding: 6px var(--sils-esp-2xs, 8px) !important; }
}
@media (max-width: 760px) {
  /* La personalización tiene un nombre largo: encima, y el enlace o el texto debajo. */
  .ctp-config__filas-in > .ctp-config__fila--texto { grid-template-columns: 1fr; }
  .ctp-config__filas .ctp-config__fila--texto .ctp-config__texto,
  .ctp-config__filas .ctp-config__fila--texto .ctp-config__abrir { grid-column: 1; }
}
@media (max-width: 760px) {
  /* Opciones abiertas: fuera la rejilla, las pestañas de obras y los plegables; lo que
     quede (opciones y botón) se desplaza si no cabe. */
  .ctp-nav.ctp-nav--opciones { overflow-y: auto; }
  .ctp-nav.ctp-nav--opciones .ctp-nav__rejilla,
  .ctp-nav.ctp-nav--opciones .ctp-nav__plegable,
  .ctp-nav.ctp-nav--opciones .ctp-nav__fila--fuentes { display: none !important; }
  .ctp-nav.ctp-nav--opciones .ctp-nav__pie { flex: 0 0 auto; }
}

/* ── Vídeo tutorial (1-oct-2026) ─────────────────────────────────────────────
   Enlace en cada bocadillo de la guía y ventana con el vídeo encima de todo.
   Los botones llevan alto, fondo y borde fijados: la hoja de la tienda pisa cualquier <button>. */
#sw-app .ctp-guia__video {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 14px; padding: 10px 0 !important; height: auto !important; min-height: 0 !important;
  background: none !important; border: 0; border-top: 1px solid var(--ctp-linea); border-bottom: 1px solid var(--ctp-linea);
  border-radius: 0; box-shadow: none;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-bot-s); font-weight: var(--ctp-t-bot-w);
  text-transform: var(--ctp-t-bot-tt); letter-spacing: var(--ctp-t-peq-ls);
  color: var(--ctp-negro) !important; text-align: left; cursor: pointer;
}
#sw-app .ctp-guia__video:focus { background: none !important; color: var(--ctp-negro) !important; }
#sw-app .ctp-guia__video:focus-visible { outline: 2px solid var(--ctp-negro); outline-offset: 2px; }
.ctp-guia__play {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ctp-negro); color: var(--ctp-blanco);
  transition: transform 160ms ease;
}
.ctp-guia__play svg { margin-left: 2px; }
#sw-app .ctp-guia__video:hover .ctp-guia__play { transform: scale(1.08); }
.ctp-guia__dur { margin-left: auto; font-weight: var(--ctp-t-peq-w); color: var(--ctp-gris); text-transform: none; }

#sw-app .ctp-video { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--ctp-margen); }
#sw-app .ctp-video.is-open { display: flex; }
.ctp-video__velo {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--ctp-negro) 86%, transparent);
  opacity: 0; transition: opacity 240ms ease;
}
.ctp-video__caja {
  position: relative; width: min(1280px, 100%, calc((100vh - 2 * var(--ctp-margen) - 52px) * 16 / 9));
  opacity: 0; transform: translateY(10px); transition: opacity 240ms ease, transform 240ms ease;
}
.ctp-video.es-visible .ctp-video__velo { opacity: 1; }
.ctp-video.es-visible .ctp-video__caja { opacity: 1; transform: none; }
.ctp-video__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sils-esp-xs, 12px); margin-bottom: var(--sils-esp-2xs, 8px); }
.ctp-video__t {
  font-family: var(--ctp-sans); font-size: var(--ctp-t-eti-s); font-weight: var(--ctp-t-eti-w);
  text-transform: var(--ctp-t-eti-tt); letter-spacing: var(--ctp-t-eti-ls); color: var(--ctp-blanco);
}
#sw-app .ctp-video__cerrar {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px !important; min-height: 0 !important;
  padding: 0 !important; margin-right: -12px; background: none !important; border: 0; border-radius: var(--ctp-radio);
  color: var(--ctp-blanco) !important; cursor: pointer; box-shadow: none;
}
#sw-app .ctp-video__cerrar:focus { background: none !important; color: var(--ctp-blanco) !important; }
#sw-app .ctp-video__cerrar:focus-visible { outline: 2px solid var(--ctp-blanco); outline-offset: -4px; }
.ctp-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ctp-negro); }
@media (max-width: 760px) {
  #sw-app .ctp-video { padding: var(--sils-esp-xs, 12px); }
  .ctp-video__caja { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ctp-video__velo, .ctp-video__caja, .ctp-guia__play { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONERA EN ICONOS, «NUEVA PARED» Y «MIS PAREDES» (2.16, 7-oct-2026)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Iconos de Themify (línea fina), en placas cuadradas; el nombre sale al pasar por
   encima. El <i> lleva la fuente de los iconos: el botón la tiene forzada. */
#sw-app .sw-placa--icono { position: relative; width: 40px; padding: 0; justify-content: center; }
#sw-app .sw-placa--icono i,
#sw-app .sw-placa--nueva i { font-size: var(--sils-txt-xs, 15px); line-height: 1; display: block; }
#sw-app .sw-placa--icono .ctp-girador { margin: 0; }
#sw-app .sw-placa--icono::after,
#sw-app .sw-placa--nueva::after {
  content: attr(data-et);
  position: absolute; top: calc(100% + 6px); left: 50%; z-index: 5;
  padding: 5px var(--sils-esp-2xs, 8px); border-radius: var(--ctp-radio);
  background: var(--ctp-negro); color: var(--ctp-blanco);
  font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w); letter-spacing: var(--ctp-t-peq-ls); text-transform: none;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, -4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
#sw-app .sw-placa--nueva::after { display: none; }
@media (hover: hover) {
  #sw-app .sw-placa--icono:hover::after,
  #sw-app .sw-placa--icono:focus-visible::after,
  #sw-app .sw-placa--nueva:hover::after,
  #sw-app .sw-placa--nueva:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
}
#sw-app .sw-placa--icono.es-cargando::after { display: none; }

/* Toda la fila de arriba a la altura del bloque de la marca (logotipo y rótulo): 40 px
   en escritorio (7-oct-2026, a petición del usuario: a 44, y antes a 48 la derecha, se
   veía grande). El resumen lleva dentro «Revisar pared», que baja a 32 con 4 de aire.
   Con !important porque la regla general de botones fuerza «height: auto». */
@media (min-width: 761px) {
  #sw-placas .sw-placas__zona--ai > .sw-placa,
  #sw-placas .sw-placas__zona--ad > .sw-placa { height: 40px !important; min-height: 0 !important; box-sizing: border-box; }
  #sw-placas .sw-placas__zona--ai, #sw-placas .sw-placas__zona--ad { align-items: center; }
  #sw-app .sw-placa--icono { width: 40px; }
  #sw-app .sw-placa--resumen { padding: var(--sils-esp-3xs, 4px) var(--sils-esp-3xs, 4px) var(--sils-esp-3xs, 4px) var(--sils-esp-s, 16px); }
  #sw-placas #sw-p-revisar { height: 32px !important; min-height: 0 !important; padding: 0 14px !important; }
}

/* Escritorio estrecho: la marca sin el rótulo, como en el móvil. Con él, a 800 px la
   fila de la izquierda se metía debajo de la de la derecha («Compartir» bajo «Nueva
   pared»). */
@media (min-width: 761px) and (max-width: 960px) {
  #sw-app .sw-placa--marca .sw-placa__sep,
  #sw-app .sw-placa--marca .sw-placa__et { display: none; }
}

/* Los botones de la derecha con la letra del rótulo «Crea tu pared» de la marca
   (.sw-placa__et): «Mini título», 12 px, fina, 1,6 px entre letras, mayúsculas.
   Solo en escritorio: en el móvil «Revisar pared» es el botón grande de abajo. */
@media (min-width: 761px) {
  #sw-app .sw-placa--nueva,
  #sw-app #sw-p-revisar,
  #sw-app .sw-salir--escritorio {
    font-family: var(--ctp-sans);
    font-size: var(--ctp-t-eti-s); font-weight: var(--ctp-t-peq-w);
    letter-spacing: var(--ctp-t-eti-ls); text-transform: var(--ctp-t-eti-tt);
  }
}

/* Un botón principal apagado no cambia al pasar por encima: el oscurecido de :hover le
   ponía el fondo del color de su texto y «Mi pared» (sin obras) se quedaba en blanco. */
#sw-app .sw-btn-primario[disabled]:hover,
#sw-app .sw-btn-primario[disabled]:active { background: var(--ctp-borde) !important; color: var(--ctp-texto) !important; opacity: 1; }

/* «Nueva pared», arriba a la derecha: icono y texto. */
#sw-app .sw-placa--nueva { position: relative; gap: var(--sils-esp-2xs, 8px); }
#sw-app .sw-placa--nueva i { font-size: var(--sils-txt-3xs, 12px); }
#sw-app .sw-p-nueva--movil { display: none; }
@media (min-width: 761px) and (max-width: 1260px) {
  /* Solo con icono, cuadradas como las de la izquierda: 40 × 40. */
  #sw-app .sw-placa--nueva,
  #sw-app .sw-salir--escritorio { width: 40px; padding: 0 !important; justify-content: center; }
  #sw-app .sw-salir--escritorio { font-size: 0; }
  .sw-placa--nueva__t { display: none; }
  #sw-app .sw-placa--nueva::after { display: block; }
}

/* Móvil: la marca sin el rótulo y, a la derecha, nueva · guardar · compartir ·
   mis paredes · ayuda · volver. Lo decide el CSS desde el primer pintado. */
@media (max-width: 760px) {
  #sw-app .sw-placa--marca .sw-placa__sep,
  #sw-app .sw-placa--marca .sw-placa__et { display: none; }
  #sw-placas .sw-placas__zona--ai { gap: var(--sils-esp-3xs, 4px); }
  #sw-app .sw-placa--icono { display: flex; width: 34px; padding: 0; }
  #sw-app .sw-placa--icono::after { display: none; }
  #sw-app .sw-p-nueva--movil { display: flex; margin-left: auto; }
  #sw-app .sw-placa--ayuda { margin-left: 0; padding: 0; }
  #sw-app .sw-salir--movil { padding: 0; width: 34px; justify-content: center; }
  #sw-app .sw-placa--nueva { display: none; }
}

/* El aviso de cambios sin guardar: los dos botones, uno debajo del otro (en fila,
   «Guardar y empezar» se partía en dos líneas). */
#ctp-modal-cambios .sw-modal-login-actions { flex-direction: column; margin-top: var(--sils-esp-3xs, 4px); }

/* Guardar: los dos botones con el texto centrado, como los del aviso. */
#sw-modal-save .sw-modal-btn-primary,
#sw-modal-save .sw-modal-btn-secondary { text-align: center !important; justify-content: center; }
/* Con !important: la regla de los avisos (más abajo) pone display con !important y «Guardar
   como nueva» salía también al guardar una pared nueva (2.20.0). */
#sw-modal-save .sw-modal-btn-secondary[hidden] { display: none !important; }

/* La pared nueva: la de ahora se funde antes de volver a cargar la página. */
body.ctp-cambiando #sw-app { opacity: 0; transition: opacity 300ms ease; }

/* ── «Mis paredes»: panel lateral desde la izquierda ─────────────────────── */
#ctp-lado { position: fixed; inset: 0; z-index: 80; font-family: var(--ctp-sans); }
#ctp-lado[hidden] { display: none; }
.ctp-lado__velo {
  position: absolute; inset: 0; cursor: pointer;
  background: color-mix(in srgb, var(--ctp-negro) 28%, transparent);
  opacity: 0; transition: opacity 320ms ease;
}
#ctp-lado.is-open .ctp-lado__velo { opacity: 1; }
.ctp-lado__caja {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(380px, 88vw);
  display: flex; flex-direction: column;
  background: var(--ctp-blanco); border-right: 1px solid var(--ctp-linea);
  transform: translateX(-100%);
  transition: transform 450ms var(--ctp-curva), box-shadow 450ms ease;
}
#ctp-lado.is-open .ctp-lado__caja { transform: none; box-shadow: 18px 0 40px color-mix(in srgb, var(--ctp-negro) 10%, transparent); }
.ctp-lado__cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sils-esp-xs, 12px);
  padding: 20px 24px var(--sils-esp-s, 16px); border-bottom: 1px solid var(--ctp-linea);
}
.ctp-lado__t {
  margin: 0; color: var(--ctp-negro);
  font-size: var(--ctp-t-ind-s); font-weight: var(--ctp-t-bot-w);
  letter-spacing: var(--ctp-t-ind-ls); text-transform: var(--ctp-t-ind-tt);
}
#sw-app .ctp-lado__cerrar {
  width: 32px; height: 32px; min-height: 0 !important; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: none !important; border: 0 !important; color: var(--ctp-gris) !important;
  font-size: var(--sils-txt-2xs, 14px); cursor: pointer; transition: color 160ms ease;
}
#sw-app .ctp-lado__cerrar:hover { color: var(--ctp-negro) !important; }
.ctp-lado__cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 0 24px 24px; }

/* Una fila por pared, con líneas finas: la foto y, al lado, nombre, datos y acciones. */
.ctp-lado__lista { list-style: none; margin: 0; padding: 0; }
.ctp-lado__pared {
  display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start;
  margin: 0 -24px; padding: var(--sils-esp-s, 16px) 24px; border-bottom: 1px solid var(--ctp-linea);
  animation: ctpLadoEntra 360ms var(--ctp-curva) backwards;
  transition: opacity 200ms ease, transform 220ms var(--ctp-curva), background-color 500ms ease;
}
@keyframes ctpLadoEntra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.ctp-lado__pared.es-saliendo { opacity: 0; transform: translateX(-8px); }
.ctp-lado__pared.es-senalada { background-color: var(--ctp-apoyo); }
#sw-app .ctp-lado__foto {
  display: block; width: 112px; height: auto; min-height: 0 !important; aspect-ratio: 1024 / 625;
  padding: 0 !important; border: 0 !important; border-radius: 2px; overflow: hidden;
  background: var(--ctp-linea) !important; cursor: pointer;
}
#sw-app span.ctp-lado__foto { cursor: default; }
.ctp-lado__foto img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms ease; }
.ctp-lado__foto img.is-cargada { opacity: 1; }
.ctp-lado__info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ctp-lado__nombre {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ctp-negro);
  font-size: var(--ctp-t-enf-s); font-weight: var(--ctp-t-enf-w); letter-spacing: var(--ctp-t-enf-ls);
}
.ctp-lado__meta, .ctp-lado__nota {
  color: var(--ctp-gris);
  font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w); letter-spacing: var(--ctp-t-peq-ls);
}
.ctp-lado__marca {
  margin-top: 2px; padding: 2px 6px; border-radius: 2px;
  background: var(--ctp-negro); color: var(--ctp-blanco);
  font-size: var(--ctp-t-tag-s); font-weight: var(--ctp-t-tag-w); letter-spacing: var(--ctp-t-tag-ls); text-transform: var(--ctp-t-tag-tt);
}
.ctp-lado__acciones { display: flex; flex-wrap: wrap; gap: var(--sils-esp-3xs, 4px) 14px; margin-top: 6px; }
#sw-app .ctp-lado__accion {
  display: inline-flex; align-items: center; gap: 6px;
  height: auto; min-height: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; color: var(--ctp-texto) !important;
  font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w); letter-spacing: var(--ctp-t-peq-ls); text-transform: none;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 160ms ease;
}
#sw-app .ctp-lado__accion:hover { color: var(--ctp-negro) !important; }
#sw-app .ctp-lado__accion[data-confirmar="si"] { color: var(--ctp-negro) !important; font-weight: var(--ctp-t-bot-w); }
.ctp-lado__campo {
  width: 100%; box-sizing: border-box; padding: var(--sils-esp-3xs, 4px) 6px; border: 1px solid var(--ctp-borde); border-radius: 2px;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-enf-s); letter-spacing: var(--ctp-t-enf-ls); color: var(--ctp-negro);
}
/* Mientras llegan, las filas laten en su sitio. */
.ctp-lado__lista.es-cargando .ctp-lado__foto,
.ctp-lado__hueso { background: var(--ctp-linea) !important; animation: ctpLadoLate 1.2s ease-in-out infinite; }
.ctp-lado__hueso { display: block; width: 70%; height: 12px; margin-top: 5px; border-radius: 2px; }
.ctp-lado__hueso--corto { width: 40%; }
@keyframes ctpLadoLate { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.ctp-lado__vacio { padding: 40px 0 var(--sils-esp-2xs, 8px); text-align: center; animation: ctpLadoEntra 360ms var(--ctp-curva) backwards; }
.ctp-lado__vacio-t { margin: 0 0 6px; color: var(--ctp-negro); font-size: var(--ctp-t-enf-s); letter-spacing: var(--ctp-t-enf-ls); }
.ctp-lado__vacio-d { margin: 0 0 20px; color: var(--ctp-gris); font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w); letter-spacing: var(--ctp-t-peq-ls); }
.ctp-lado__entrar { display: flex; flex-direction: column; gap: var(--sils-esp-2xs, 8px); }
#sw-app .ctp-lado__entrar .ctp-lado__acceder { display: flex; align-items: center; justify-content: center; min-height: 44px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTACIÓN Y MARCOS POR OBRA (2.16.7, 7-oct-2026)
   ═══════════════════════════════════════════════════════════════════════════ */
/* «Vista aproximada», junto a la explicación de la adaptación elegida. */
.ctp-config__aprox { color: var(--ctp-gris); white-space: nowrap; }

/* «Marcos» más compacta, sin desplazarse (7-oct-2026): los cinco marcos en una fila y,
   arriba, «Aplicar a» con las mismas muestras (cuadrado de esquinas suaves, filo negro
   al señalar o elegir, la marca arriba a la derecha y el nombre debajo). */
.ctp-tab[data-tab="marcos"] .ctp-mp__grupo { padding: 10px 0 var(--sils-esp-xs, 12px); }
.ctp-tab[data-tab="marcos"] .ctp-mp__grupo .ctp-et { margin-bottom: var(--sils-esp-2xs, 8px); }
.ctp-mp__rejilla,
.ctp-mp__rejilla--extra { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sils-esp-xs, 12px) 10px; }
.ctp-tab[data-tab="marcos"] .ctp-mp__muestra { margin-bottom: 6px; }
.ctp-tab[data-tab="marcos"] .ctp-mp__nombre { font-size: var(--ctp-t-peq-s); letter-spacing: var(--ctp-t-peq-ls); line-height: 1.3; }
.ctp-tab[data-tab="marcos"] .ctp-mp__precio { font-size: var(--ctp-t-eti-s); line-height: 1.3; }
.ctp-tab[data-tab="marcos"] .ctp-check { width: 18px; height: 18px; top: 5px; right: 5px; }
.ctp-mp__para-fila { display: flex; flex-wrap: wrap; gap: 10px; }
#sw-app .ctp-mp__para { width: 60px; flex: 0 0 60px; }
/* Cuadradas aunque la obra sea vertical: la foto se recorta dentro, no estira la caja. */
.ctp-mp__para .ctp-mp__muestra { width: 60px; height: 60px; aspect-ratio: auto; }
.ctp-mp__para .ctp-mp__muestra img { width: 100%; height: 100%; object-fit: cover; }
.ctp-mp__para-todas {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: var(--ctp-radio); background: var(--ctp-apoyo); box-shadow: inset 0 0 0 1px var(--ctp-linea);
  outline: 1.5px solid transparent; outline-offset: 2px; transition: outline-color 200ms ease;
  font-size: var(--ctp-t-enf-s); font-weight: var(--ctp-t-bot-w); color: var(--ctp-negro); letter-spacing: var(--ctp-t-enf-ls);
}
#sw-app .ctp-mp__para:hover .ctp-mp__para-todas,
#sw-app .ctp-mp__para.is-activa .ctp-mp__para-todas { outline-color: var(--ctp-negro); }
@media (max-width: 760px) {
  .ctp-mp__rejilla, .ctp-mp__rejilla--extra { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px var(--sils-esp-2xs, 8px); }
  #sw-app .ctp-mp__para { width: 46px; flex-basis: 46px; }
  .ctp-mp__para .ctp-mp__muestra { width: 46px; height: 46px; }
  .ctp-mp__para-fila { gap: var(--sils-esp-2xs, 8px); }
  .ctp-tab[data-tab="marcos"] .ctp-mp__grupo { padding: var(--sils-esp-2xs, 8px) 0 10px; }
  .ctp-tab[data-tab="marcos"] .ctp-mp__muestra { margin-bottom: var(--sils-esp-3xs, 4px); }
  .ctp-tab[data-tab="marcos"] .ctp-mp__nombre { font-size: var(--ctp-t-eti-s); }
  .ctp-tab[data-tab="marcos"] .ctp-mp__precio { font-size: var(--sils-txt-4xs, 11px); letter-spacing: .4px; }
  .ctp-tab[data-tab="marcos"] .ctp-mp__nota { margin-top: var(--sils-esp-2xs, 8px); }
}
/* La obra elegida en «Aplicar a» se señala en la pared: un anillo que late dos veces. */
.vw_size_items.ctp-senalado::after {
  content: ''; position: absolute; pointer-events: none; z-index: 16;
  inset: calc(-6px * var(--sw-inv, 1));
  box-shadow: 0 0 0 calc(2px * var(--sw-inv, 1)) var(--ctp-negro, #000);
  animation: ctpSenala 800ms ease-in-out 2;
}
@keyframes ctpSenala { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* El globo de «Mis paredes»: como los de favoritos y carrito de la cabecera, en negro
   con el número en blanco y sin filo; dentro de su placa, para no tocar la de al lado.
   Entra creciendo. */
#sw-app #sw-p-misparedes { overflow: visible; }
.sw-placa__n {
  position: absolute; top: -7px; right: -5px; z-index: 2;
  min-width: 18px; height: 18px; padding: 0 var(--sils-esp-3xs, 4px); box-sizing: border-box;
  border-radius: 9px; background: var(--ctp-negro); color: var(--ctp-blanco);
  box-shadow: none;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-tag-s); font-weight: var(--ctp-t-tag-w);
  letter-spacing: 0; line-height: 18px; text-align: center; pointer-events: none;
  opacity: 0; transform: scale(.6);
  transition: opacity 200ms ease, transform 240ms var(--ctp-curva);
}
.sw-placa__n.es-visible { opacity: 1; transform: scale(1); }
/* Tapa la esquina de la placa; en el móvil los iconos van a 4 px y se queda más dentro. */
@media (max-width: 760px) { .sw-placa__n { top: -5px; right: -2px; } }

/* ── La barra de la obra colgada (2.16.13, 7-oct-2026) ──────────────────────
   Una sola línea abajo, como el resto de la herramienta: blanca, esquinas de 4 px,
   «Cambiar obra · Elegir marco · Quitar» con su icono Themify, separados por líneas
   finas. Antes era una píldora gris translúcida con dos iconos y, arriba, una etiqueta
   «Cambiar obra» al pasar por encima. Mide lo mismo en pantalla sea cual sea el zoom
   de la pared (escala inversa). En táctil sale solo en el hueco elegido, y en el móvil
   solo con los iconos. */
.sw-art-controls {
  gap: 0; padding: 0; white-space: nowrap; overflow: hidden;
  background: var(--ctp-blanco);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-radius: var(--ctp-radio);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ctp-negro) 16%, transparent);
}
#sw-app .sw-art-btn {
  width: auto; height: 32px; padding: 0 var(--sils-esp-xs, 12px) !important; gap: 7px; border-radius: 0;
  color: var(--ctp-texto);
  font-family: var(--ctp-sans); font-size: var(--ctp-t-eti-s); font-weight: var(--ctp-t-ind-w);
  letter-spacing: var(--ctp-t-eti-ls); text-transform: var(--ctp-t-eti-tt);
}
#sw-app .sw-art-btn + .sw-art-btn { border-left: 1px solid var(--ctp-linea) !important; }
#sw-app .sw-art-btn i { font-size: var(--sils-txt-2xs, 14px); line-height: 1; display: none; }
/* Con texto, sin icono; solo iconos cuando no cabe (abajo). */
#sw-app .vw_size_items.es-barra-compacta .sw-art-btn i { display: block; }
@media (max-width: 760px) { #sw-app .sw-art-btn i { display: block; } }
#sw-app .sw-art-btn:hover,
#sw-app .sw-art-btn--clear:hover { background: var(--ctp-apoyo) !important; color: var(--ctp-negro); }
@media (hover: none) {
  .vw_size_items:has(.chosenArticle) .sw-art-controls { display: none; }
  .vw_size_selected:has(.chosenArticle) .sw-art-controls { display: flex; }
}
@media (max-width: 900px) {
  #sw-app .sw-art-btn { width: auto; height: 30px; }
}
/* Hueco más estrecho que la barra con texto (lo mide swBarrasCompactas) y móvil: solo
   los iconos, con el nombre al pasar por encima. */
#sw-app .vw_size_items.es-barra-compacta .sw-art-btn { width: 36px; padding: 0 !important; justify-content: center; }
.vw_size_items.es-barra-compacta .sw-art-btn span { display: none; }
@media (max-width: 760px) {
  #sw-app .sw-art-btn { width: 36px; padding: 0 !important; justify-content: center; }
  #sw-app .sw-art-btn span { display: none; }
}

/* ── Coherencia (2.16.16, 7-oct-2026) ─────────────────────────────────────── */
/* El nombre de cada botón de la barra de la obra, con el mismo globo que los botones de
   arriba (negro, letra blanca, «Texto pequeño»), encima del botón. */
.sw-art-controls { overflow: visible; }
#sw-app .sw-art-btn { position: relative; }
#sw-app .sw-art-btn:first-child { border-radius: var(--ctp-radio) 0 0 var(--ctp-radio); }
#sw-app .sw-art-btn:last-child { border-radius: 0 var(--ctp-radio) var(--ctp-radio) 0; }
#sw-app .sw-art-btn[data-et]::after {
  content: attr(data-et);
  position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 5;
  padding: 5px var(--sils-esp-2xs, 8px); border-radius: var(--ctp-radio);
  background: var(--ctp-negro); color: var(--ctp-blanco);
  font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w); letter-spacing: var(--ctp-t-peq-ls); text-transform: none;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
@media (hover: hover) {
  #sw-app .sw-art-btn[data-et]:hover::after,
  #sw-app .sw-art-btn[data-et]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
}
@media (hover: none) { #sw-app .sw-art-btn[data-et]::after { display: none; } }

/* «Mi pared»: las líneas de confianza como en la ficha (Sils Addons, .sils-res__confianza):
   letra de 12 px en el texto suave y el check en verde confianza. */
.ctp-rev__notas { margin: var(--sils-esp-s, 16px) 0 0; }
.ctp-rev__notas li {
  padding: 3px 0 3px 20px; line-height: 1.4;
  font-size: var(--sils-txt-3xs, 12px); color: var(--sils-texto-suave, var(--ctp-gris)); letter-spacing: var(--ctp-t-peq-ls);
}
.ctp-rev__notas li::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin-top: -6.5px;
  background: var(--ctp-verde);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Migas numeradas (2.16.19, 8-oct-2026) ────────────────────────────────────
   Un número antes del nombre de cada pestaña, solo para que se lea el orden; el de
   la hoja abierta, en negro. No marca nada como hecho (eso fue la 2.16.18 y no se
   entendía): las pestañas se tocan en cualquier orden y cada hoja sigue con «Listo».
   Los márgenes negativos dejan la fila de la etiqueta a su alto de siempre. */
#sw-app .sw-celda__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin: -2px 7px -2px 0; vertical-align: 1px;
  border: 1px solid var(--ctp-borde); border-radius: 50%; box-sizing: border-box;
  font-size: var(--sils-txt-4xs, 11px); font-weight: var(--ctp-t-bot-w); letter-spacing: 0; line-height: 1;
  color: var(--ctp-gris);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
#sw-app .sw-celda.is-activa .sw-celda__n { background: var(--ctp-negro); border-color: var(--ctp-negro); color: var(--ctp-blanco); }
/* En el móvil la fila se desplaza de lado y el aspa va fija a la derecha: la pestaña
   que se abre se lleva a la vista sin quedar debajo del aspa. */
@media (max-width: 760px) { #sw-app .ctp-panel__cab { scroll-padding-inline: 0 56px; } }

/* ── Auditoría móvil (2.17.0, 8-oct-2026) ─────────────────────────────────────
   Repaso contra la ficha, el listado y el carrito lateral. Lo que vale también en
   escritorio va fuera del @media. */

/* Ambiente: un solo relleno lateral. La hoja ya trae el suyo y, con el de la
   pestaña, quedaban 36 px a cada lado frente a los 18 del resto. */
.ctp-tab[data-tab="ambiente"] { padding: 0 !important; }

/* El pie con «Listo», siempre al fondo de la hoja, aunque el contenido sea corto
   (en «Marcos» quedaba a media altura). */
#sw-hoja-cuerpo > .ctp-tab:not([data-tab="obras"]):not([hidden]) {
  display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box;
}
#sw-hoja-cuerpo > .ctp-tab:not([data-tab="obras"]) > .ctp-pie { margin-top: auto; }
.ctp-tab[data-tab="ambiente"] > .ctp-hoja-amb { flex: 1 0 auto; box-sizing: border-box; }
.ctp-hoja-amb__pie { margin-top: auto !important; }

/* Los avisos: el texto de los botones, centrado (en «Entendido» salía a la
   izquierda) y el secundario con el mismo borde que el resto de la herramienta. */
.sw-modal .sw-modal-btn-primary,
.sw-modal .sw-modal-btn-secondary {
  display: inline-flex !important; align-items: center; justify-content: center;
  text-align: center !important; box-sizing: border-box;
}
.sw-modal .sw-modal-dismiss { width: 100%; }
.sw-modal .sw-modal-btn-secondary { border-color: var(--ctp-borde) !important; }

/* «Probando · …» sobre la pared: con el espacio entre letras del rótulo de la medida
   (Thoren fina por debajo de 16 px nunca va a 0). Se compone a tamaño de pantalla, así
   que el espacio ya no sale roto al escalar. */
.ctp-prueba__et { letter-spacing: var(--ctp-t-peq-ls); }

@media (max-width: 760px) {
  /* Botones principales a 44 px, como «Finalizar compra» del carrito y el «Añadir» de
     la barra de la ficha (42). El móvil pedía 48, pero la regla general de botones
     («min-height: 0 !important») los dejaba en 34; en «Mi pared», en 30 y 32. */
  #sw-app .ctp-listo,
  #sw-app .ctp-nav__colocar,
  #sw-app #sw-p-revisar,
  #sw-app #ctp-revisar .ctp-rev__cta,
  #sw-app #ctp-revisar .ctp-rev__asi,
  #sw-app .ctp-lado__entrar .ctp-lado__acceder,
  .sw-modal .sw-modal-btn-primary,
  .sw-modal .sw-modal-btn-secondary,
  #sw-app .ctp-compartir__acciones .sw-btn-primario,
  #sw-app .ctp-compartir__acciones .sw-btn-secundario { min-height: 44px !important; }

  /* La barra de abajo, como la de la ficha: el precio arriba, «Portes no incluidos»
     debajo en pequeño y el botón a la derecha; línea fina arriba y la misma sombra suave.
     El recuento de obras se va (2.20.0): no caben los dos bajo el precio, y lo dicen la
     lista de huecos y la celda «Obras». «Mi pared» toma lo que queda. */
  body.sw-pared-manda { --ctp-pie: 64px; }
  #sw-app .sw-placa--resumen {
    display: grid; grid-template-columns: max-content auto minmax(0, 1fr); grid-template-rows: auto;
    column-gap: var(--sils-esp-s, 16px); align-content: center; align-items: center;
    padding: 10px var(--sils-esp-s, 16px) !important;
    border-top: 1px solid var(--ctp-linea);
    box-shadow: 0 -4px 12px color-mix(in srgb, var(--ctp-negro) 6%, transparent);
  }
  #sw-app .sw-placa--resumen .sw-placa__precio { grid-column: 1; grid-row: 1; gap: 3px; }
  #sw-app .sw-placa--resumen .sw-placa__total {
    font-size: var(--sils-txt-s, 16px); font-weight: var(--ctp-t-bot-w); line-height: 1.2;
  }
  #sw-app .sw-placa--resumen .sw-placa__obras { display: none; }
  #sw-app .sw-placa--resumen #sw-p-revisar {
    grid-column: 3; grid-row: 1; flex: none; width: 100%; min-width: 0; padding: 0 24px !important;
  }

  /* Zonas de toque. Lo que se ve casi no cambia; lo que responde al dedo llega a
     40–44 px (antes 26–36, y los enlaces de texto, 15). */
  #sw-app .sw-art-btn::before { content: ''; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
  #sw-app .ctp-nav__paso { width: 40px; height: 40px !important; }
  #sw-app .ctp-nav__herr { height: 40px !important; min-width: 40px; justify-content: center; }
  #sw-app .ctp-obra__lupa { width: 32px; height: 32px !important; top: 8px; left: 8px; }
  #sw-app .ctp-obra__lupa::before { content: ''; position: absolute; inset: -6px; }
  #sw-app .ctp-chip,
  #sw-app .ctp-fam { min-height: 36px !important; }
  #sw-app .sw-btn-enlace,
  .ctp-guia .sw-btn-enlace,
  #sw-app #ctp-revisar .ctp-rev__acciones button {
    padding-top: var(--sils-esp-xs, 12px) !important; padding-bottom: var(--sils-esp-xs, 12px) !important; margin-top: -12px; margin-bottom: -12px;
  }
  .sw-modal .sw-modal-close { width: 40px; height: 40px; top: 4px; right: 4px; padding: 0; }
  #sw-app .ctp-lado__cerrar { width: 40px; height: 40px; }

  /* El precio de cada marco, a 12 px (estaba en 11): el «Texto pequeño» más bajo del
     sistema que cabe en la casilla de 64 px. */
  .ctp-tab[data-tab="marcos"] .ctp-mp__precio { font-size: var(--ctp-t-eti-s); }

  /* Una sola papelera: la de la obra colgada. En el móvil la barra de la obra solo
     sale con esta hoja abierta, y la de la cabecera la repetía. */
  #sw-app .ctp-nav__quitar { display: none !important; }
}

/* Compartir sin guardar: los dos botones, uno debajo del otro, como en «Nueva pared»;
   mientras se prepara la imagen, el girador blanco dentro del botón negro. */
#ctp-modal-compartir .sw-modal-login-actions { flex-direction: column; margin-top: var(--sils-esp-3xs, 4px); }
.sw-modal .sw-modal-btn-primary .ctp-girador { margin-right: var(--sils-esp-2xs, 8px); border-color: color-mix(in srgb, var(--ctp-blanco) 35%, transparent); border-top-color: var(--ctp-blanco); }
.sw-modal .sw-modal-btn-primary[disabled] { cursor: default; }

/* ── La pared en lista bajo las pestañas (2.17.2, 8-oct-2026) ──────────────────
   En el móvil, con la tarjeta cerrada, el blanco que quedaba bajo la tira de huecos se
   llena con las filas de «Mi pared»: foto o hueco vacío, las líneas del carrito y el
   precio. Tocar una fila abre ese hueco. (Probada con ?ctp_lista=1 y aprobada.) */
@media (max-width: 760px) {
  #sw-app #ctp-panel:not(.is-open) .ctp-panel__cuerpo { flex: 0 1 0; }
  .ctp-huecos { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding-bottom: 0; }
  .ctp-huecos[hidden],
  #ctp-panel.is-open .ctp-huecos { display: none; }
  .ctp-huecos__cab { margin-bottom: 0; padding-bottom: var(--sils-esp-3xs, 4px); }
  .ctp-huecos__fila { display: block; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding-bottom: var(--sils-esp-2xs, 8px); }
  .ctp-lista-fila { position: relative; border-bottom: 1px solid var(--ctp-linea); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 160ms ease; }
  .ctp-lista-fila:active { background: var(--ctp-apoyo); }
  .ctp-lista-fila .ctp-rev__fila { border-bottom: 0; padding: var(--sils-esp-xs, 12px) 28px var(--sils-esp-xs, 12px) 0; }
  .ctp-lista-fila__ir { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: var(--sils-txt-3xs, 12px); color: var(--ctp-gris); }
}

/* ── Disposiciones por número de obras (2.17.3, 8-oct-2026) ──────────────────
   «Obras: 1 · 2 · 3…» bajo las familias, con las mismas etiquetas. Solo sale en las
   colecciones con composiciones de 4 obras o más. */
.ctp-num-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 14px; }
.ctp-num-fila[hidden] { display: none; }
.ctp-num-fila__et {
  margin-right: var(--sils-esp-3xs, 4px);
  font-size: var(--ctp-t-eti-s); font-weight: var(--ctp-t-eti-w); text-transform: var(--ctp-t-eti-tt);
  letter-spacing: var(--ctp-t-eti-ls); color: var(--ctp-gris);
}
#sw-app .ctp-num {
  min-width: 36px; justify-content: center; display: inline-flex; align-items: center;
  background: none !important; border: 1px solid var(--ctp-borde) !important; border-radius: var(--ctp-radio) !important;
  font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w);
  color: var(--ctp-texto) !important; padding: 6px 10px !important;
  height: auto !important; min-height: 0 !important; line-height: 1.2 !important;
  text-transform: none !important; letter-spacing: var(--ctp-t-peq-ls) !important;
  cursor: pointer; white-space: nowrap; box-shadow: none !important;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
#sw-app .ctp-num[hidden] { display: none !important; }
#sw-app .ctp-num:hover { border-color: var(--ctp-negro) !important; }
#sw-app .ctp-num.is-activa { background: var(--ctp-negro) !important; border-color: var(--ctp-negro) !important; color: var(--ctp-blanco) !important; }
/* En el móvil, el rótulo arriba y los números en una fila. Desde 2.22.0 (las composiciones
   de los esquemas Q4attro llegan a 10 y 12 obras: once números) se reparten el ancho, en
   lugar de pasar a una segunda línea. */
@media (max-width: 760px) {
  .ctp-num-fila { gap: var(--sils-esp-3xs, 4px); margin-top: -4px; }
  .ctp-num-fila__et { flex: 0 0 100%; margin: 0 0 2px; }
  #sw-app .ctp-num { flex: 1 1 0; min-height: 36px !important; min-width: 0; padding: 6px 0 !important; }
}

/* ── El carrito de la tienda (2.17.13, 8-oct-2026) ───────────────────────────────
   La bolsa de la cabecera de la web, dentro de la placa del precio, junto a «Mi pared»:
   abre el mismo carrito lateral (CheckoutWC) y lleva el mismo contador que la cabecera
   (el fragmento «span.cart-count» de la tienda; con «hide», sin número). */
#sw-app .sw-placa__carrito {
  position: relative; flex: 0 0 auto;
  width: 34px; height: 32px !important; min-height: 0 !important; padding: 0 !important; margin: 0 -8px 0 -4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: var(--ctp-radio);
  color: var(--ctp-texto) !important; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
#sw-app .sw-placa__carrito i { font-size: var(--sils-txt-xs, 15px); line-height: 1; display: block; }
#sw-app .sw-placa__carrito:hover { background: var(--ctp-apoyo) !important; color: var(--ctp-negro) !important; }
#sw-app .sw-placa__carrito .cart-count {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 var(--sils-esp-3xs, 4px); box-sizing: border-box;
  border-radius: 8px; background: var(--ctp-negro); color: var(--ctp-blanco);
  font-family: var(--ctp-sans); font-size: var(--sils-txt-4xs, 11px); font-weight: var(--ctp-t-tag-w);
  letter-spacing: 0; line-height: 16px; text-align: center; pointer-events: none;
  animation: ctpCuentaEntra 240ms var(--ctp-curva, ease) both;
}
#sw-app .sw-placa__carrito .cart-count.hide { display: none; }
@keyframes ctpCuentaEntra { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
/* El nombre al pasar por encima, como el resto de iconos. */
#sw-app .sw-placa__carrito::after {
  content: attr(data-et);
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 5;
  padding: 5px var(--sils-esp-2xs, 8px); border-radius: var(--ctp-radio);
  background: var(--ctp-negro); color: var(--ctp-blanco);
  font-size: var(--ctp-t-peq-s); font-weight: var(--ctp-t-peq-w); letter-spacing: var(--ctp-t-peq-ls); text-transform: none;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, -4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
@media (hover: hover) {
  #sw-app .sw-placa__carrito:hover::after,
  #sw-app .sw-placa__carrito:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
}
@media (hover: none), (max-width: 760px) { #sw-app .sw-placa__carrito::after { display: none; } }
/* En el móvil, en la barra de abajo, entre el precio y «Mi pared», a 44 de toque. */
@media (max-width: 760px) {
  #sw-app .sw-placa--resumen .sw-placa__carrito { grid-column: 2; grid-row: 1; width: 44px; height: 44px !important; margin: 0 -6px; }
  #sw-app .sw-placa__carrito i { font-size: var(--sils-txt-m, 18px); }
  #sw-app .sw-placa__carrito .cart-count { top: 4px; right: 3px; }
}

/* «En el carrito» en «Mi pared»: un punto pequeño y la leyenda, y el enlace al lateral. */
.ctp-rev__encarrito {
  display: flex; align-items: center; gap: var(--sils-esp-2xs, 8px); margin: var(--sils-esp-xs, 12px) 0 0;
  font-size: var(--ctp-t-peq-s); color: var(--ctp-texto); letter-spacing: var(--ctp-t-peq-ls);
  opacity: 0; transform: translateY(-3px); transition: opacity 240ms ease, transform 240ms ease;
}
.ctp-rev__encarrito[hidden] { display: none; }
.ctp-rev__encarrito.es-visible { opacity: 1; transform: none; }
.ctp-rev__punto { width: 6px; height: 6px; border-radius: 50%; background: var(--ctp-verde); flex: 0 0 auto; }
.ctp-rev__sep { color: var(--ctp-borde); }
#sw-app .ctp-rev__encarrito .sw-btn-enlace { font-size: inherit; letter-spacing: inherit; color: var(--ctp-texto); }

/* ── «Mi pared» con la forma del carrito lateral (2.17.14, 13-oct-2026) ─────────────
   Las medidas del carrito lateral de la tienda (CheckoutWC, medido el 13-oct): 480 de
   ancho; cabecera de 56 con el nombre a 16/300; el aviso a 12 con su barra de 2 px;
   las filas sobre el gris de apoyo, con 16 de margen y línea arriba, foto de 64, nombre
   a 16/400 y los datos «dato: valor» a 13 (etiqueta en gris, valor en el texto); el pie
   blanco con «Total» a 19/500 y el botón de 44 con letra de 15. */
#ctp-revisar { --ctp-rev-linea: color-mix(in srgb, var(--ctp-gris) 30%, var(--ctp-blanco)); }
#ctp-revisar .ctp-rev__col { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
#ctp-revisar .ctp-rev__cab {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 var(--sils-esp-s, 16px); background: var(--ctp-blanco);
}
#ctp-revisar .ctp-rev__cab-t {
  margin: 0; font-family: var(--ctp-sans); font-size: var(--sils-txt-s, 16px); font-weight: 300; line-height: 1.2;
  letter-spacing: var(--sils-ls-texto, 1.2px); text-transform: none; color: var(--ctp-texto);
}
#sw-app #ctp-revisar .ctp-rev__cerrar {
  width: 40px; height: 40px !important; margin-right: -10px; padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  background: none !important; border: 0 !important; color: var(--ctp-negro) !important; cursor: pointer;
}
#ctp-revisar .ctp-rev__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--ctp-apoyo); }

/* El aviso de los huecos: el texto y la barra de los huecos llenos. */
#ctp-revisar .ctp-rev__estado { padding: var(--sils-esp-xs, 12px) var(--sils-esp-s, 16px) 14px; }
#ctp-revisar .ctp-rev__estado-t { margin: 0; font-size: var(--sils-txt-3xs, 12px); font-weight: 300; line-height: 1.4; letter-spacing: .5px; color: var(--ctp-texto); }
#ctp-revisar .ctp-rev__progreso { margin-top: 10px; height: 2px; border-radius: 1px; background: var(--ctp-linea); overflow: hidden; }
#ctp-revisar .ctp-rev__progreso span { display: block; width: 0; height: 100%; border-radius: 1px; background: var(--ctp-verde); transition: width 450ms var(--ctp-curva); }

/* Las filas, como las líneas del carrito. */
#ctp-revisar .ctp-rev__fila { align-items: flex-start; gap: var(--sils-esp-s, 16px); padding: var(--sils-esp-s, 16px); border-bottom: 0; border-top: 1px solid var(--ctp-rev-linea); }
#ctp-revisar .ctp-rev__mini { width: 64px; height: 64px; align-items: flex-start; justify-content: center; border-radius: 0; }
/* Las fotos, sin filo, como en el carrito (también en la lista de la pared del móvil). */
#ctp-revisar .ctp-rev__mini img,
.ctp-lista-fila .ctp-rev__mini img { outline: 0; }
#ctp-revisar .ctp-rev__mini--vacia { margin: 0; box-shadow: inset 0 0 0 1px var(--ctp-borde); }
#ctp-revisar .ctp-rev__info { gap: 0; }
#ctp-revisar .ctp-rev__nombre {
  font-size: var(--sils-txt-s, 16px); font-weight: 400; line-height: 1.25; letter-spacing: var(--sils-ls-texto, 1.2px); text-transform: none;
  white-space: normal; color: var(--ctp-texto);
}
#ctp-revisar .ctp-rev__fila--vacia .ctp-rev__nombre { color: var(--ctp-gris); }
#ctp-revisar .ctp-rev__precio { align-self: center; font-size: var(--sils-txt-s, 16px); font-weight: 500; letter-spacing: var(--sils-ls-texto, 1.2px); color: var(--ctp-texto); }

/* Los datos de cada obra: «Medida: 90×90   Marco: Negro». Cada etiqueta, pegada a su valor
   (entre los dos no hay espacio por donde partir); la línea se parte entre un dato y el
   siguiente, o dentro de un valor largo. La etiqueta, nunca. */
.ctp-rev__datos {
  display: block; margin: var(--sils-esp-3xs, 4px) 0 0; padding: 0; line-height: 1.5; white-space: normal;
  font-family: var(--ctp-sans); font-size: var(--sils-txt-2xs, 14px); font-weight: 300; letter-spacing: 1px; color: var(--ctp-texto);
}
.ctp-rev__datos dt, .ctp-rev__datos dd { display: inline; margin: 0; padding: 0; font-weight: inherit; }
.ctp-rev__datos dt { margin-right: 3px; color: var(--ctp-gris); white-space: nowrap; }
.ctp-rev__datos dd { margin-right: var(--sils-esp-xs, 12px); white-space: normal; }
.ctp-rev__datos dd.ctp-rev__perso { display: block; margin: 2px 0 0; }

/* Lo de debajo de la lista: confianza, descargar y la nota de la escala. */
#ctp-revisar .ctp-rev__mas { padding: var(--sils-esp-s, 16px) var(--sils-esp-s, 16px) 20px; border-top: 1px solid var(--ctp-rev-linea); }
#ctp-revisar .ctp-rev__notas { margin: 0; }
#ctp-revisar .ctp-rev__acciones { margin-top: var(--sils-esp-xs, 12px); padding-top: 0; }

/* El pie, blanco, con el total y el botón, como el de «Finalizar compra». */
#ctp-revisar .ctp-rev__pie-caja { flex: 0 0 auto; padding: var(--sils-esp-s, 16px) var(--sils-esp-s, 16px) var(--sils-esp-xs, 12px); background: var(--ctp-blanco); }
#ctp-revisar .ctp-rev__total { padding: 0 0 var(--sils-esp-xs, 12px); font-size: var(--sils-txt-m, 19px); font-weight: 500; letter-spacing: .5px; color: var(--ctp-texto); }
#ctp-revisar .ctp-rev__total strong { font-weight: 500; }
#sw-app #ctp-revisar .ctp-rev__cta,
#sw-app #ctp-revisar .ctp-rev__asi {
  height: 44px !important; min-height: 44px !important; padding: 0 var(--sils-esp-s, 16px) !important; line-height: 1.2 !important;
  font-size: var(--sils-txt-xs, 15px); font-weight: 500; letter-spacing: .5px;
}
#sw-app #ctp-revisar .ctp-rev__asi { margin-top: var(--sils-esp-2xs, 8px); }
#ctp-revisar .ctp-rev__encarrito { margin: 10px 0 2px; }

/* La lista de la pared del móvil usa la misma fila, en pequeño: como las obras de una
   composición en el carrito (nombre a 13 y foto de 40). */
.ctp-lista-fila .ctp-rev__nombre { font-size: var(--sils-txt-2xs, 14px); font-weight: 400; letter-spacing: var(--sils-ls-texto, 1.2px); text-transform: none; }
.ctp-lista-fila .ctp-rev__precio { font-size: var(--sils-txt-2xs, 14px); font-weight: 400; letter-spacing: 1px; }
.ctp-lista-fila .ctp-rev__datos { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Con «Mi pared» abierta (480 de ancho, como el carrito) la barra de arriba se estrecha:
   «Nueva pared» se queda en su icono (con el nombre al pasar por encima) y el recuento de
   obras se va, que ya lo dice el panel. Si no, «Nueva pared» se montaba sobre los iconos. */
@media (min-width: 761px) {
  body.ctp-revisando #sw-app .sw-placa--nueva { width: 40px; padding: 0 !important; justify-content: center; }
  body.ctp-revisando #sw-app .sw-placa--nueva__t { display: none; }
  body.ctp-revisando #sw-app .sw-placa--nueva::after { display: block; }
  body.ctp-revisando #sw-app .sw-placa--resumen .sw-placa__obras { display: none; }
}
/* Y la marca sin el rótulo cuando lo que le queda a la pared es estrecho (como en el
   escritorio estrecho); más estrecho aún, el total también se va (está en el panel). */
@media (min-width: 761px) and (max-width: 1400px) {
  body.ctp-revisando #sw-app .sw-placa--marca .sw-placa__sep,
  body.ctp-revisando #sw-app .sw-placa--marca .sw-placa__et { display: none; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  body.ctp-revisando #sw-app .sw-placa--resumen .sw-placa__precio { display: none; }
  /* «Seguir cambiando» hace lo mismo que el aspa del panel (la regla general de botones
     pone su display con !important). */
  body.ctp-revisando #sw-app .sw-placa--resumen #sw-p-revisar { display: none !important; }
  body.ctp-revisando #sw-app .sw-placa--resumen { padding: var(--sils-esp-3xs, 4px) !important; }
}

/* La descarga y lo que se está viendo, en el aviso de arriba (13-oct-2026): «Pared
   completa.» con «Descargar imagen» a la derecha, debajo el ambiente, la escala y la
   disposición en gris, y la barra cerrando el bloque. */
#ctp-revisar .ctp-rev__estado-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sils-esp-xs, 12px); }
#ctp-revisar .ctp-rev__estado .ctp-rev__acciones { flex: 0 0 auto; margin: 0; padding: 0; }
#sw-app #ctp-revisar .ctp-rev__estado .ctp-rev__acciones button { font-size: var(--sils-txt-3xs, 12px); letter-spacing: .5px; color: var(--ctp-texto) !important; }
#ctp-revisar .ctp-rev__estado .ctp-rev__pie { margin: 2px 0 0; font-size: var(--sils-txt-3xs, 12px); line-height: 1.4; letter-spacing: .5px; color: var(--ctp-gris); }

/* La obra del hueco elegida (13-oct-2026): su marco en la primera fila de opciones, con
   «Cambiar» al lado (en el móvil también se ve: no es una nota). */
.ctp-config__marco { display: inline-flex; align-items: baseline; gap: 14px; grid-column: 2 / -1; }
.ctp-config__marco-v { font-family: var(--ctp-sans); font-size: var(--ctp-t-peq-s); color: var(--ctp-texto); letter-spacing: var(--ctp-t-peq-ls); }
#sw-app .ctp-config__cambiar-marco { font-size: var(--ctp-t-peq-s); letter-spacing: var(--ctp-t-peq-ls); color: var(--ctp-texto); }

/* ── Portes no incluidos (2.20.0, 19-oct-2026) ───────────────────────────────────────
   Los portes no van en el pedido. Bajo el precio de la placa y bajo el total de «Mi pared»,
   un botón pequeño que abre la ventana de los portes: la pone el tema (bricks-child,
   assets/portes.js, que atiende cualquier [data-sils-portes] del documento). Aquí, el aspecto
   del de la tienda (assets/portes.css): «Texto pequeño» en gris, subrayado fino y el icono «i»
   detrás, fuera del flujo para que el subrayado se quede en el texto; sin caja. Con el peso
   de la herramienta, blindado contra sus reglas de botones y las de la tienda (píldora, texto
   blanco, rosa al foco, alto fijo). */
#sw-app .sw-placa__precio { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; }
#sw-app .sw-placa__precio .sw-placa__total { line-height: 1.1; }
#sw-app .sils-portes,
#sw-app .sils-portes:hover,
#sw-app .sils-portes:focus,
#sw-app .sils-portes:active {
  position: relative;
  display: inline-block !important;
  width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important;
  margin: 0; padding: 0 1.45em 0 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  color: var(--ctp-gris) !important;
  font-family: var(--ctp-sans) !important; font-size: var(--ctp-t-eti-s); font-weight: var(--ctp-t-peq-w);
  line-height: 1.2; letter-spacing: var(--ctp-t-peq-ls); text-transform: none; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
  cursor: pointer; transition: color 160ms ease;
}
#sw-app .sils-portes:hover,
#sw-app .sils-portes:focus-visible { color: var(--ctp-texto) !important; }
#sw-app .sils-portes:focus:not(:focus-visible) { outline: none; }
#sw-app .sils-portes:focus-visible { outline: 1px solid var(--ctp-texto); outline-offset: 2px; }
#sw-app .sils-portes i { position: absolute; top: 50%; right: 0; font-size: 1.05em; line-height: 1; transform: translateY(-50%); }
/* Con el dedo, la zona de toque llega a 44 px sin mover nada. */
@media (hover: none), (max-width: 760px) {
  #sw-app .sils-portes::before { content: ''; position: absolute; inset: -14px -6px; }
}
/* En escritorio, la placa de arriba a la derecha no lo lleva (2.21.3, 20-oct-2026, petición
   del usuario: no encaja en esa caja); lo dice «Mi pared». En el móvil sigue bajo el precio de
   la barra de abajo, como en la ficha. */
@media (min-width: 761px) {
  #sw-app .sw-placa--resumen .sils-portes { display: none !important; }
}
/* En «Mi pared», bajo el total y a su derecha, debajo del importe. */
#ctp-revisar .ctp-rev__portes { display: flex; justify-content: flex-end; margin: -6px 0 var(--sils-esp-xs, 12px); }