/* Modos Pro Suite CSS para DaleColor-android */

:root {
  --bg-dark-pro: #090d16;
  --bg-card-pro: rgba(15, 23, 42, 0.85);
  --border-pro: rgba(255, 255, 255, 0.12);
  --accent-vitral: #38bdf8;
  --accent-bordado: #f43f5e;
  --accent-piedra: #a855f7;
  --accent-gold: #fbbf24;
}

/* ---- Biblioteca de Vitrales ---- */
.pro-biblioteca-vacia {
  text-align: center;
  padding: 32px 16px;
  color: var(--t-texto-sec);
  font-size: 13px;
  line-height: 1.6;
}

.pro-biblioteca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.pro-biblioteca-carta {
  position: relative;
  background: var(--t-tarjeta-bg);
  border: 1px solid var(--t-tarjeta-borde);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.pro-biblioteca-carta-img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--t-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pro-biblioteca-carta-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pro-biblioteca-carta-info {
  padding: 8px 10px;
}

.pro-biblioteca-carta-nombre {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-biblioteca-carta-fecha {
  font-size: 10px;
  color: var(--t-texto-sec);
  margin-top: 2px;
}

.pro-biblioteca-carta-borrar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Toast minimo propio de este modulo ---- */
.pro-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: #1e293b;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  max-width: 85vw;
  text-align: center;
}

.pro-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.pro-toast.error {
  background: #7f1d1d;
}

/* Pro Header Navigation Switcher -- flex-wrap para que en mobile las acciones
   bajen a una segunda fila en vez de recortarse (el bug original: "Limpiar"
   quedaba cortado fuera de la pantalla en 390px de ancho). */
.pro-suite-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--t-tarjeta-bg);
  color: var(--t-texto);
  padding: 10px 16px;
  border-bottom: 1px solid var(--t-tarjeta-borde);
  position: sticky;
  top: 0;
  z-index: 100;
}

.pro-header-textos {
  /* Nombre arriba, subtitulo abajo -- ver comentario en el HTML (modos_pro.js)
     de por que se dejo de usar space-between lado a lado. */
  display: flex;
  flex-direction: column;
  min-width: 0; /* deja que .pro-header-subtitulo trunque con ellipsis en vez de desbordar */
  flex: 1 1 auto;
}

.pro-header-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-pro-volver {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--t-tarjeta-bg);
  color: var(--t-texto);
  border: 1px solid var(--t-tarjeta-borde);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  margin-right: 2px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px var(--t-sombra);
}

.pro-header-icon {
  font-size: 18px;
}

.pro-header-nombre {
  /* "el editor es clave" -- pedido en vivo de agrandar y jerarquizar el
     nombre real; antes 14px competia con el subtitulo por el mismo peso
     visual. */
  font-weight: 900;
  font-size: 19px;
  line-height: 1.15;
}

.pro-header-subtitulo {
  font-size: 11px;
  color: var(--t-texto-sec);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.btn-pro-secundario {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--t-tarjeta-bg);
  color: var(--t-texto);
  border: 1px solid var(--t-tarjeta-borde);
  border-radius: 20px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px var(--t-sombra);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-pro-secundario:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 1px 3px var(--t-sombra);
}

.btn-pro-secundario.activo {
  background: var(--acento);
  color: #fff;
  border-color: var(--acento);
  box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--acento) 60%, transparent);
}

/* "Seguir editando" desde Vitrina -- unica salida hacia el editor completo,
   se destaca en vez de mezclarse con Compartir/Pantalla completa. */
.btn-pro-editar-destacado {
  background: linear-gradient(45deg, var(--acento), #d97706);
  color: #fff;
  border-color: transparent;
}

.btn-fs-editar {
  background: linear-gradient(45deg, var(--acento, #FF6B35), #d97706);
}

.btn-pro-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--t-tarjeta-bg);
  color: var(--t-texto);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 20px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px var(--t-sombra);
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.btn-pro-toggle:active {
  transform: translateY(1px) scale(0.97);
}

.btn-pro-toggle.activo {
  background: linear-gradient(45deg, #38bdf8, #0891b2);
  color: #fff;
  border-color: #38bdf8;
  box-shadow: 0 3px 12px -2px rgba(56, 189, 248, 0.55);
}

/* Panel UNICO y SIEMPRE visible con todos los botones del estudio --
   mismo contenedor/estilo para Vitral/Bordado/Sticker/Pin (pedido en
   vivo: "el diseño debe ser igual en todas"). Antes estaba repartido en 3
   lugares distintos: la cabecera (con botones -- pedido explicito: "no
   deben haber botones en la cabecera del titulo"), un panel flotante que
   tapaba el dibujo, y un aro de deshacer/rehacer flotando encima del
   lienzo (que ademas colisionaba visualmente con el panel flotante).
   Fila 1 = acciones (deshacer/rehacer/limpiar, 3D, guardar...), fila 2 =
   herramientas de pintura especificas de la tecnica. */
.pro-toolbar-unificada {
  background: var(--t-tarjeta-bg);
  border: 1px solid var(--t-tarjeta-borde);
  border-radius: 16px;
  box-shadow: var(--t-sombra);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* .pro-workspace tiene align-items:center (para el layout de escritorio en
     fila) -- sin este width:100% explicito (mismo patron que ya usa
     .pro-canvas-card), la toolbar se encoge al ancho minimo de su contenido
     en vez de ocupar la pantalla, dejando la grilla de iconos con muy pocas
     columnas y un aspecto roto/disperso (reportado en vivo con captura). */
  width: 100%;
  /* Flota igual que .pro-controls-card (el panel de colores): asi, al
     expandirse, crece por ENCIMA del lienzo en vez de empujarlo hacia abajo
     -- pedido en vivo: "al expandir el panel superior, debe desplegar SOBRE
     el editor... el editor nunca se mueve". #proToolbarEspaciador (arriba en
     el HTML) reserva en el flujo normal el alto colapsado, para que el
     lienzo de abajo arranque siempre en el mismo lugar sin importar si la
     toolbar esta expandida o no. z-index por debajo del panel de colores
     (60) pero por encima del lienzo (10).

     BUG REAL encontrado y corregido: con `position:absolute` esto solo
     queda fijo respecto a .pro-workspace (su ancestro posicionado), NO
     respecto al viewport real -- el contenedor de todo el Pro Studio
     (#modalProSubStudio > div, overflow-y:auto) SI hace scroll para que el
     panel de colores (mas abajo en el flujo) sea alcanzable, y como esta
     barra viaja con ese scroll, elegir cualquier color la saca por completo
     de la pantalla (confirmado en vivo: top pasa de 0 a -483px) dejando el
     boton "Guardar" inalcanzable -- justo lo opuesto de "el editor nunca se
     mueve". `position:fixed` la ancla al viewport de verdad (ningun
     ancestro tiene transform/filter que reescriba ese contenedor, ver
     modalProSubStudio en modos_pro.js), inmune a cuanto se desplace el
     scroll interno. */
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 56;
}
.pro-toolbar-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* ---- Fila de acciones reordenable: manteniendo presionado un icono se
   puede mover a otra posicion -- pedido en vivo: "todos los botones pueden
   moverse dentro del panel para reorganizarlos... organizalo en grilla de 1
   o 2 espacios (boton 3d)". Grilla de celdas fijas de 40px (el tamaño de
   .pro-tool-icon-btn) para que el boton "3D" (mas ancho, texto+icono) pueda
   ocupar 2 celdas sin descuadrar al resto. Los separadores visuales no
   tienen lugar en una grilla libremente reordenable -- se ocultan aca. ---- */
.pro-toolbar-fila-reordenable {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  grid-auto-rows: 40px;
  gap: 8px;
  justify-content: start;
}
.pro-toolbar-fila-reordenable .btn-modo-sol {
  grid-column: span 2;
  height: 40px;
}
.pro-toolbar-fila-reordenable .pro-herramientas-separador {
  display: none;
}
.pro-toolbar-fila-reordenable > * {
  touch-action: none; /* el long-press+arrastre lo maneja JS, sin esto el navegador roba el gesto como scroll */
}
.pro-tool-arrastrando {
  opacity: 0.6;
  transform: scale(1.12);
  z-index: 80;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: none !important;
}
.pro-tool-objetivo-drop {
  outline: 2px dashed var(--acento);
  outline-offset: 2px;
  border-radius: 50%;
}
.pro-toolbar-fila .btn-pro-toggle {
  /* Ahora que estos toggles son solo-icono (sin texto -- "los botones no
     deben tener texto, arruinar el panel"), se achican a un circulo fijo
     como el resto de la toolbar en vez de una pildora de ancho variable. */
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
}

/* Colapsar/expandir la toolbar con un gesto -- pedido en vivo: "cuando
   esta colapsado, solo tendra 1 fila de iconos disponibles". max-height
   anima el alto real (las filas se re-acomodan solas, a diferencia de un
   transform que dejaria hueco vacio). JS mide el alto real de la primera
   fila y lo aplica como limite al colapsar -- ver initProStudioExclusivo. */
.pro-toolbar-filas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  /* max-height animado es una propiedad de layout (no la puede componer la
     GPU sola como transform/opacity) -- contain:layout le dice al navegador
     que lo que cambia ADENTRO de este elemento no puede afectar el layout
     de afuera, asi el recalculo en cada frame queda acotado a esta caja en
     vez de propagarse a toda la pagina. Pedido en vivo: "las transiciones
     demoran... debe ser muy suave, para maxima experiencia de usuario". */
  contain: layout;
}
.pro-toolbar-toggle {
  align-self: center;
  width: 100%;
  height: 16px;
  margin: -4px 0 -6px;
  border: none;
  background: transparent;
  color: var(--t-texto-sec);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  touch-action: none; /* el gesto (toque/arrastre) lo maneja JS -- sin esto el navegador se roba el swipe vertical como scroll */
}
.pro-toolbar-toggle-chevron {
  transition: transform 0.3s ease;
  display: inline-block;
}
.pro-toolbar-unificada.colapsada .pro-toolbar-toggle-chevron {
  transform: rotate(180deg);
}
.pro-herramientas-separador {
  width: 1px;
  align-self: stretch;
  min-height: 22px;
  background: var(--t-tarjeta-borde);
  margin: 0 2px;
}
.pro-herramientas-select,
.pro-herramientas-slider {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--t-texto-sec);
  white-space: nowrap;
}
.pro-herramientas-select select {
  padding: 5px 6px;
  border-radius: 8px;
  background: var(--t-tarjeta-bg);
  color: var(--t-texto);
  border: 1px solid var(--t-tarjeta-borde);
  font-size: 11px;
  font-weight: 700;
}
.pro-herramientas-slider {
  min-width: 110px;
}
.pro-herramientas-slider input[type="range"] {
  width: 90px;
}
.pro-herramientas-slider b {
  color: var(--t-texto);
}

/* Boton "Modos" del visor (Lampara/Cuadro/Pared/Neon) -- color propio bien
   distinto del resto (cian de .btn-pro-toggle, verde/naranja de
   .btn-modo-sol) a proposito: en pantallas angostas queda pegado junto a
   "Opciones" y "Luna", dos botones circulares icon-only casi identicos --
   reportado en vivo como "el menu no existe" porque a simple vista los
   tres se veian iguales y ninguno se distinguia como el que abre el menu. */
.btn-modos-visor {
  background: linear-gradient(45deg, #a855f7, #7c3aed) !important;
  color: #fff !important;
  border-color: #a855f7 !important;
  box-shadow: 0 3px 12px -2px rgba(168, 85, 247, 0.6) !important;
}

/* En pantallas angostas se esconde el texto largo de los botones del header
   (queda solo el icono + una palabra corta) para que nunca se corten. */
@media (max-width: 480px) {
  .btn-txt-larga { display: none; }
  .pro-header-subtitulo { max-width: 120px; font-size: 11px; }
  .btn-pro-secundario, .btn-pro-toggle, .btn-modo-sol, .btn-pro-volver {
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 14px;
    flex-shrink: 0;
  }
}

/* ---- Barra de acceso rapido al tamano del pincel (solo visible con
   Pincel Activo encendido) -- vive DENTRO de .pro-canvas-card (ver JS,
   reparentado para que este disponible tambien en pantalla completa). ---- */
.pro-brush-size-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--t-tarjeta-bg);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--t-texto);
}

.pro-brush-size-bar input[type="range"] {
  flex: 1;
  accent-color: var(--acento, #38bdf8);
  cursor: pointer;
}

.pro-brush-size-bar span:last-child {
  min-width: 40px;
  text-align: right;
  color: var(--t-texto-sec);
}

/* ---- Boton "engranaje" que abre/cierra el panel de opciones del Modo 3D --
   flotante, en la esquina de la tarjeta, disponible en editor normal,
   pantalla completa y Vitrina (mismo canvasCard en los tres casos). ---- */
/* ---- Pantalla de carga de Vitrina: tapa el flash "editor plano -> 3D ->
   pantalla completa" mientras el auto-lanzamiento hace su secuencia -- se
   revela recien cuando todo esta listo (ver initProStudioExclusivo). ---- */
.pro-vitrina-cargando {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #090d16;
}
.pro-vitrina-cargando-caja {
  width: 200px;
  height: 200px;
  border-radius: 18px;
}
.pro-vitrina-cargando-texto {
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
}

/* ---- Panel de opciones del Modo 3D: marco, control de luz, cielo, brillos
   -- el boton que lo abre vive en el HEADER ("⚙️ Opciones", junto a Modo
   3D/Luna -- ver btnProOpciones3D), no flotando sobre la imagen. El panel
   en si, al abrirse, OCULTA el lienzo y ocupa su lugar (ver JS,
   canvasWrap.style.display) -- nunca queda superpuesto sobre el diseño.
   Antes era un overlay (position:absolute) encima de toda la tarjeta
   -- se leia como si tapara el diseño, y ademas arrastrar el dedo para
   mover la luz quedaba confuso con el panel tapando parte del vidrio.
   Vive DENTRO de canvasCard (no en document.body) para seguir disponible en
   pantalla completa -- ahi .pro-canvas-card:fullscreen tiene overflow-y:auto
   (ver mas abajo) para que, si el panel + la imagen no entran juntos en un
   telefono, se pueda hacer scroll en vez de solaparse. */
.pro-sol-opciones-bar {
  display: none;
  width: 100%;
  margin-top: 12px;
  justify-content: center;
}

.pro-sol-opciones-bar.pro-sol-opciones-abierta {
  display: flex;
}

.pro-sol-opciones-modal {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #101624;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

.pro-sol-opciones-cabecera {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(120deg, #1e293b, #0f172a);
}

.pro-sol-opciones-cabecera .btn-cerrar-paleta {
  color: #fff;
  opacity: 0.85;
}

.pro-sol-opciones-cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* ---- Menu de modos del visor (🎭) -- antes vivia EN EL FLUJO normal de
   canvasCard ("reemplaza el lienzo"), pero canvasCard en pantalla completa
   tiene su propia altura acotada con overflow propio -- con una lista larga
   (Vidrio/Raspar/Romper/Caleidoscopio/Lampara/Aplique/Cuadro/Neon) la caja
   se pasaba de esa altura y la cola quedaba recortada por el contenedor
   ANTES de llegar al overflow-y:auto de .pro-modos-lista, sin scroll
   posible (reportado en vivo: "debe verse en la pantalla con scroll").
   Se pasa a overlay de viewport completo -- mismo patron ya usado y
   probado en .pro-modos-menu-adhoc (Sticker/Pin) un poco mas abajo, que
   nunca tuvo este problema por estar ya en position:absolute/inset:0. */
.pro-modos-menu {
  display: none;
  position: fixed;
  inset: 0;
  /* Vive en <body>, hermano de .modal-selector-tecnica (todo el editor),
     que ya usa z-index:9999 -- con 200 quedaba DEBAJO de ese wrapper (que
     ademas tiene su propio fondo semitransparente + backdrop-filter:blur),
     asi que se veia el menu desenfocado y oscurecido "a traves" del fondo
     del editor, mezclado con la toolbar (nitida, encima) -- eso era el
     "atropellado". Tiene que superar 9999 de verdad. */
  z-index: 10050;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.55);
}
.pro-modos-menu.pro-modos-menu-abierto {
  display: flex;
}
.pro-modos-menu-caja {
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--t-tarjeta-bg);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.pro-modos-menu-cabecera {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 800;
  color: var(--t-texto);
  background: var(--t-bg);
  border-bottom: 1px solid var(--t-tarjeta-borde);
}
.pro-modos-menu-cabecera .btn-cerrar-paleta { color: var(--t-texto); opacity: 0.85; }
.pro-modos-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.pro-modo-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-bg);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.pro-modo-card:active { transform: scale(0.98); }
.pro-modo-card.activo {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 16%, var(--t-bg));
}
.pro-modo-card-icono {
  font-size: 26px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--t-tarjeta-bg);
}
.pro-modo-card-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pro-modo-card-nombre {
  font-size: 14px;
  font-weight: 800;
  color: var(--t-texto);
}
.pro-modo-card-desc {
  font-size: 11.5px;
  color: var(--t-texto-sec);
  line-height: 1.35;
}

/* ---- Visor 3D integrado de Sticker/Pin (activarVisorAdhoc/
   desactivarVisorAdhoc en modos_pro.js) -- overlay absoluto DENTRO del
   contenedor del engine (mismo criterio que .capa-lampara-activa de
   Bordado), nunca en document.body. El menu "Modo del visor" propio
   reusa .pro-modos-menu-caja/.pro-modo-card (definidos arriba para
   Vitral, son genericos) pero como overlay centrado sobre el visor en vez
   de reemplazar un lienzo en flujo normal -- por eso tiene su propio
   selector de apertura en lugar de .pro-modos-menu/.pro-modos-menu-abierto. */
.pro-modos-menu-adhoc {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 30;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.55);
}
.pro-modos-menu-adhoc.pro-modos-menu-abierto {
  display: flex;
}

/* Fondo de superficie elegido en "Modo del visor" (mochila/chaqueta/gorra/
   corcho, cuaderno/libro/carpeta/laptop) -- vive DETRAS del canvas WebGL
   (que se pinta encima, transparente salvo la pieza), con margen para que
   se note como una tarjeta propia, no un fondo a sangre. Reusa las mismas
   clases .visor-objeto-* de coleccionables.css (window.dcDecoracionSuperficie). */
.pro-visor-adhoc-fondo {
  position: absolute;
  inset: 9%;
  z-index: 0;
}

/* ---- Capas de interaccion de Raspar/Romper Cristales -- canvas propio
   encima del vidrio ya iluminado (no reemplazan el shader, se agregan
   arriba de engine.wrapEl). ---- */
.pro-capa-interaccion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: pointer;
  border-radius: inherit;
}

@keyframes proParticulaPolvo {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) translateY(-16px) scale(0.9); opacity: 0; }
}
.pro-particula-polvo {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #d8cdb8, #8a7c5e 70%);
  pointer-events: none;
  z-index: 60;
  animation: proParticulaPolvo 0.65s ease-out forwards;
}

@keyframes proGolpeMaterial {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0.9; box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; box-shadow: 0 0 0 14px rgba(255,255,255,0); }
}
.pro-golpe-material {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  pointer-events: none;
  z-index: 60;
  animation: proGolpeMaterial 0.35s ease-out forwards;
}

/* ---- Capa de reemplazo total (Caleidoscopio, Lampara) -- a diferencia de
   .pro-capa-interaccion, estos modos generan una vista propia completa y
   deben tapar el vidrio iluminado, no superponerse a el. ---- */
.pro-capa-reemplazo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  border-radius: inherit;
  background: #05060a;
  z-index: 40;
  overflow: hidden;
}
.pro-capa-reemplazo:active {
  cursor: grabbing;
}
.pro-lampara-contenedor canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.pro-caleido-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* En flujo normal DEBAJO de #proCanvasWrap (hijo de canvasCard, sin
   order:-1 -- el header SI lo tiene, asi que cae primero) -- no flota
   encima de la ilustracion (reportado: "los botones del menu deben estar
   abajo de la tarjeta, NO SOBRE la tarjeta"). Mismo lenguaje visual que
   .pro-fullscreen-controles (vidrio oscuro + acento de marca). */
.pro-caleido-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  flex-shrink: 0;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,16,14,0.9), rgba(12,10,9,0.85));
  backdrop-filter: blur(8px);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--acento, #FF6B35), transparent) 1;
}
.pro-caleido-btn,
.pro-caleido-seg {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,8,14,0.72);
  backdrop-filter: blur(6px);
  color: #cbd0dc;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pro-caleido-seg {
  padding: 7px 10px;
  min-width: 30px;
  text-align: center;
}
.pro-caleido-segmentos {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(10,8,14,0.5);
}
.pro-caleido-btn.activo,
.pro-caleido-seg.activo {
  border-color: rgba(255,176,102,0.65);
  color: #ffd9ad;
  background: rgba(58,36,12,0.75);
  box-shadow: 0 0 14px rgba(255,176,102,0.25);
}
/* En flujo normal debajo de #proCanvasWrap, igual criterio que
   .pro-caleido-controles -- ver ese comentario. */
/* Pantalla completa simulada del Bastidor 3D -- CSS puro, no depende de
   la Fullscreen API nativa del navegador (confirmado en este proyecto que
   falla en silencio en varios WebViews Android/Capacitor, ver
   btnProFullscreen). El contenedor del canvas WebGL y el panel de
   controles se mueven directo bajo <body> (evita cualquier ancestro con
   transform/overflow que pudiera romper position:fixed) y quedan cada uno
   fijo al viewport por su cuenta. */
.pro-bastidor-esquina-controles {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 20;
}
.pro-bastidor-esquina-controles .btn-pro-volver {
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.pro-bastidor-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 99998 !important;
}
.pro-bastidor-controles-fullscreen {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 99999 !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

.pro-lampara-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  flex-shrink: 0;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,16,14,0.9), rgba(12,10,9,0.85));
  backdrop-filter: blur(8px);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--acento, #FF6B35), transparent) 1;
}
.pro-lampara-btn-auto,
.pro-lampara-btn-luz,
.pro-lampara-forma {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,8,14,0.72);
  backdrop-filter: blur(6px);
  color: #cbd0dc;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pro-lampara-formas {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(10,8,14,0.5);
}
.pro-lampara-colores {
  display: flex;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(10,8,14,0.5);
}
.pro-lampara-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  background: var(--color-swatch, #8fb4ff);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pro-lampara-color.activo {
  border-color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 8px var(--color-swatch, #8fb4ff);
}
.pro-lampara-btn-auto.activo,
.pro-lampara-btn-luz.activo,
.pro-lampara-forma.activo {
  border-color: rgba(255,176,102,0.65);
  color: #ffd9ad;
  background: rgba(58,36,12,0.75);
  box-shadow: 0 0 14px rgba(255,176,102,0.25);
}
/* Panel de opciones del Bastidor 3D (material/forma/tela/fondo) -- nunca
   habia tenido estilo propio (clases .btn-forma/.btn-material/.btn-shaper/
   .btn-tela/.btn-fondo sin ninguna regla CSS, se veian como botones de
   navegador sin estilizar). Mismo lenguaje visual que .pro-lampara-forma
   de arriba, para que todos los paneles de controles 3D del estudio se
   sientan parte de la misma familia. */
.pro-selector-forma {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.btn-forma {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,8,14,0.72);
  backdrop-filter: blur(6px);
  color: #cbd0dc;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn-forma:active {
  transform: scale(0.96);
}
.btn-forma.activo {
  border-color: rgba(255,176,102,0.65);
  color: #ffd9ad;
  background: rgba(58,36,12,0.75);
  box-shadow: 0 0 14px rgba(255,176,102,0.25);
}
.btn-forma .forma-icono {
  flex-shrink: 0;
}

/* Panel de opciones del Bordado 3D: cajon lateral fijo a la pantalla, con
   el mismo lenguaje visual CLARO que el resto de la app (tarjetas crema,
   texto marron, ver --t-tarjeta-bg/--t-texto en index.html) en vez del
   tema oscuro que usan Lampara/Pared -- pedido en vivo: "el panel de
   opciones es oscuro en vez del template" + "debe colapsar desde el
   lateral (configurable izq o derecho) para desplegar ordenadamente todas
   las opciones, con el visor a mas grande". Solo afecta a
   .pro-bordado-controles (Bordado), no toca .pro-lampara-* que siguen
   usando el tema oscuro original en los demas visores 3D.
   position:fixed + vivir en document.body (ver JS) en vez de dentro de
   .pro-canvas-card: asi el cajon no reserva espacio en el flujo normal, el
   visor 3D queda mas grande siempre, y el cajon se desliza por ENCIMA sin
   empujar nada. */
.pro-bordado-controles {
  position: fixed;
  top: 14px;
  bottom: 14px;
  width: min(400px, 88vw);
  max-width: 400px;
  box-sizing: border-box;
  z-index: 99996;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px;
  background: var(--t-tarjeta-bg);
  border: 1px solid var(--t-tarjeta-borde);
  border-image: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  backdrop-filter: none;
  overflow-y: auto;
  transition: transform 0.28s ease;
}
.pro-bordado-controles.lado-izquierda {
  left: 14px;
  right: auto;
  transform: translateX(-120%);
}
.pro-bordado-controles.lado-derecha {
  right: 14px;
  left: auto;
  transform: translateX(120%);
}
.pro-bordado-controles.abierto {
  transform: translateX(0);
}
.pro-bordado-controles .opciones-scroll {
  overflow-y: auto;
  gap: 18px !important;
}
/* Secciones con estilo premium -- pedido en vivo: "organiza las opciones
   con estilo premium pro". Cada grupo (Vista/Apariencia/Iluminacion)
   queda en su propia tarjeta chica con encabezado, en vez de una lista
   plana larga de filas sueltas. */
.pro-bordado-drawer-seccion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: var(--t-bg);
  border: 1px solid var(--t-tarjeta-borde);
}
.pro-bordado-drawer-seccion-titulo {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-texto-sec);
}
.pro-bordado-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--t-tarjeta-borde);
}
.pro-bordado-drawer-titulo {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-texto);
}
.pro-bordado-drawer-header-botones {
  display: flex;
  gap: 6px;
}
.pro-bordado-drawer-header-botones button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-bg);
  color: var(--t-texto);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pro-bordado-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, 0.4);
  z-index: 99995;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.pro-bordado-drawer-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}
.pro-bordado-controles .btn-forma {
  /* --t-bg-suave nunca se define en ningun lado del proyecto -- el fallback
     (#fff) quedaba siempre fijo en blanco puro sin importar el tema activo,
     mientras el texto SI seguia el tema (var(--t-texto)). En temas donde
     --t-texto resuelve claro (ej. el tema oscuro personalizado) esto daba
     texto casi blanco sobre fondo blanco, invisible -- reportado en vivo.
     --t-tarjeta-bg SI esta pareado con --t-texto en cada tema (son la
     pareja fondo-de-tarjeta/texto que ya usa el resto de la app), asi que
     el contraste queda garantizado sea cual sea el tema. */
  background: var(--t-tarjeta-bg);
  color: var(--t-texto);
  border: 1px solid var(--t-tarjeta-borde);
}
.pro-bordado-controles .btn-forma.activo {
  border-color: var(--acento);
  color: #fff;
  background: var(--acento);
  box-shadow: 0 2px 10px var(--t-sombra);
}
.pro-bordado-controles .pro-sol-opciones-fila {
  color: var(--t-texto);
}
.pro-bordado-controles input[type="range"] {
  accent-color: var(--acento);
}

/* Swatch "Transparente" del fondo de diseño -- ver FONDOS_PRODUCTO en JS.
   Un tablero de ajedrez chico, el simbolo universal de "sin fondo" en
   editores de imagen, en vez de un color plano (que no puede representar
   "transparente"). */
.forma-icono-transparente {
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  background-color: #fff;
}

.pro-lampara-cargando {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d8b98a;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 0 24px;
}

.pro-sol-opciones-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
}

.pro-sol-swatches {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.pro-sol-swatches button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 420px) {
  .pro-sol-opciones-fila { font-size: 11px; }
  .pro-sol-swatches button { width: 28px; height: 28px; }
}

/* Marcos de color (dorado/azul/rosa/esmeralda): circulos de color puro, sin
   icono -- se distinguen a simple vista de los marcos-material (cuadrados
   con emoji arriba). */
.pro-marco-color {
  border-radius: 50%;
}

.pro-sol-swatches button.activo {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 30%, rgba(255,255,255,0.06));
  box-shadow: 0 0 0 1px var(--acento);
}

.pro-sol-invertir-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.pro-sol-invertir-btn.activo {
  border-color: var(--acento);
  color: #fff;
  background: linear-gradient(45deg, var(--acento), #d97706);
}

.pro-sol-intensidad-fila input[type="range"] {
  flex: 1;
  accent-color: var(--acento, #38bdf8);
  cursor: pointer;
}

.pro-sol-intensidad-fila span:last-child {
  min-width: 38px;
  text-align: right;
  color: #cbd5e1;
  font-weight: 700;
}

.pro-badge {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(244, 63, 94, 0.2));
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pro-nav-tabs {
  display: flex;
  background: rgba(15, 23, 42, 0.8);
  padding: 4px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  gap: 4px;
}

.pro-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pro-tab-btn.active-vitral {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
}

.pro-tab-btn.active-bordado {
  background: rgba(244, 63, 94, 0.2);
  color: #f43f5e;
  border-color: rgba(244, 63, 94, 0.4);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.15);
}

.pro-tab-btn.active-piedra {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
}

.pro-tab-btn.active-clasico {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
}

/* Canvas & Workspaces */
.pro-workspace {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative; /* ancla al panel de colores, que ahora flota encima como bottom-sheet */
}

@media (min-width: 900px) {
  .pro-workspace {
    flex-direction: row;
    align-items: flex-start;
  }
}

.pro-canvas-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  /* Recortado de 16px -- pedido en vivo: "el editor no usa todo el ancho y
     alto". El area de dibujo es cuadrada (aspect-ratio:1) asi que el ANCHO
     disponible es lo que termina limitando cuanto puede crecer tambien en
     alto -- menos padding acolchando la tarjeta = cuadrado mas grande. */
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  /* Crece para ocupar TODO el espacio vertical libre entre la toolbar (que
     ahora flota arriba, ver #proToolbarEspaciador) y el peek del panel de
     colores (ver #proColoresEspaciador, mas abajo) -- pedido en vivo:
     "aprovecha de expandir todos los editores, debe usar todo el espacio
     disponible, entre panel superior, y panel inferior, y los costados". */
  flex: 1 1 auto;
  min-height: 0;
}

/* Panel de colores como bottom-sheet -- flota SOBRE el lienzo (que nunca
   se mueve), arrastrable desde el agarre para revelar mas colores sin
   perder ni un pixel del dibujo. Pedido en vivo: "un simple gesto arriba
   o abajo... suave y relajante". La posicion (colapsado/expandido) la
   calcula JS en base al alto real del contenido -- ver initProStudioExclusivo. */
.pro-controls-card {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}
.pro-sheet-grip-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  margin: -8px 0 4px;
  cursor: grab;
  touch-action: none;
}
.pro-sheet-grip {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: var(--t-tarjeta-borde);
  transition: background 0.15s ease, width 0.15s ease, box-shadow 0.15s ease;
}
.pro-sheet-grip-wrap:hover .pro-sheet-grip,
.pro-sheet-grip-wrap.activo .pro-sheet-grip {
  background: var(--acento);
  width: 60px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--acento) 15%, transparent);
}

.pro-controls-card {
  width: 100%;
  max-width: 380px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(12px);
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobile/tablet (todo el rango donde pro-workspace todavia apila en
   columna, ver @media min-width:900px arriba): la imagen NUNCA se mueve ni
   scrollea -- queda siempre disponible para pintar -- y los botes de
   pintura scrollean en su PROPIA region, independiente, por debajo.
   Probamos primero con position:sticky (quedaba "pegada" recien al llegar
   arriba, y en el WebView real de Android reportaron que igual se movia --
   sticky tiene fama de comportamiento inconsistente en WebViews viejos,
   sobre todo combinado con backdrop-filter y un ancestro overflow-y:auto).
   Este approach es mas robusto: #proStudioContainer pasa a ser un flex
   vertical de altura fija (100% del modal), el header y la tarjeta de la
   imagen ocupan su alto natural (flex-shrink:0, JAMAS scrollean), y
   pro-controls-card es la UNICA region con scroll propio -- la imagen
   fisicamente no puede moverse porque no participa de ningun scroll. */
#proStudioContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (max-width: 899px) {
  .pro-suite-header { 
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }
  .pro-header-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .pro-workspace {
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px;
    gap: 6px;
    overflow: hidden;
  }
  .pro-canvas-card {
    flex-shrink: 0;
    padding: 8px;
    border-radius: 18px;
  }
  .pro-controls-card {
    max-width: 100%;
    padding: 10px 10px 14px;
    border-radius: 18px 18px 0 0;
  }
}

/* ---- Modo 3D es un VISOR, no una herramienta de pintura -- mientras esta
   activo, la paleta y TODOS los botones de pintura quedan visualmente
   apagados y sin interaccion, para que quede claro que tocar un color o
   una herramienta ahi no hace nada (antes quedaban clicables sin ningun
   efecto, confuso). Una sola lista, compartida por Vitral (Modo 3D),
   Bordado (Bastidor 3D) y Sticker/Pin (visor adhoc) -- los 3 togglean la
   MISMA clase modo-3d-activo en containerEl, asi que este dimming (no
   display:none, no cambia layout/alto de la toolbar) queda identico en
   los 4 editores sin que cada uno tenga que reimplementarlo. ---- */
.modo-3d-activo .pro-controls-card {
  opacity: 0.4;
  filter: grayscale(0.5);
  pointer-events: none;
}

.modo-3d-activo #btnProBrush,
.modo-3d-activo #btnProContinuo,
.modo-3d-activo #btnProGotero,
.modo-3d-activo #btnProUndo,
.modo-3d-activo #btnProRedo,
.modo-3d-activo #btnProClear,
.modo-3d-activo #btnStitchCruz,
.modo-3d-activo #btnStitchRelleno,
.modo-3d-activo #btnStitchCadeneta,
.modo-3d-activo #btnStitchZigzag,
.modo-3d-activo #btnStitchPespunte,
.modo-3d-activo #btnStitchEspiga,
.modo-3d-activo #btnBordadoContinuo,
.modo-3d-activo #btnBordadoBote,
.modo-3d-activo #btnBordadoBorrador,
.modo-3d-activo #btnBordadoSoloBordado,
.modo-3d-activo #proToolbarControlesBordado {
  opacity: 0.4;
  filter: grayscale(0.5);
  pointer-events: none;
}

/* ---- Mini visor del lapiz: herramienta + color activos, de un vistazo ---- */
.pro-mini-lapiz {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 20px;
  background: var(--t-bg);
  border: 1px solid var(--t-tarjeta-borde);
  font-size: 13px;
}

.pro-mini-lapiz-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.3);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), inset 0 -1px 2px rgba(0,0,0,0.25);
}

/* ---- Selector rapido de color: swatches chicos y densos, sin la
   decoracion de "bote de pintura" (tapa/brillo/gota) -- siempre visibles
   arriba de las pestañas Vidrios/Degradados/Materiales, sin scrollear ni
   cambiar de pestaña. Reportado como necesario porque el sistema de tarros
   grandes solo se sentia lento para elegir un color rapido en mobile. ---- */
.pro-selector-rapido {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pro-selector-rapido-fila {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pro-selector-rapido-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--t-texto-sec);
  width: 46px;
}

.pro-selector-rapido-swatches {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pro-swatch-rapido {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--t-tarjeta-bg);
  box-shadow: 0 0 0 1px var(--t-tarjeta-borde), inset 0 1px 2px rgba(255,255,255,0.35), inset 0 -1px 2px rgba(0,0,0,0.2);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.1s ease;
}

.pro-swatch-rapido:active {
  transform: scale(0.88);
}

.pro-swatch-personalizado {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: repeating-conic-gradient(#cbd5e1 0% 25%, #94a3b8 0% 50%) 50% / 10px 10px;
  position: relative;
  overflow: hidden;
}

.pro-swatch-personalizado input[type="color"] {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}

/* Fabric Cloth Grids */
.bg-aida-cloth {
  background-color: #1e293b;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 16px 16px;
}

.bg-linen-cloth {
  background-color: #1c1917;
  background-image: 
    radial-gradient(rgba(217, 119, 6, 0.12) 15%, transparent 16%),
    radial-gradient(rgba(217, 119, 6, 0.12) 15%, transparent 16%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

/* Shimmer Animation */
@keyframes shimmerPro {
  0% { transform: scale(0.95) rotate(0deg); opacity: 0.8; }
  50% { transform: scale(1.1) rotate(180deg); opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9)); }
  100% { transform: scale(0.95) rotate(360deg); opacity: 0.8; }
}

.animate-shimmer-pro {
  animation: shimmerPro 2.5s infinite linear;
}

/* ============================================================
   Vitral Pro -- tarros de pintura, salpicon de pincel, borde con
   brillo del color activo, y el efecto "Reflejo de Sol" (3D +
   acelerometro).
   ============================================================ */

/* Tarjeta del canvas: brilla suavemente con el color activo cuando el
   modo Vitral esta cargado (--color-activo lo actualiza el JS). */
.pro-canvas-card.vitral-glow {
  --color-activo: #38bdf8;
  transition: box-shadow 0.4s ease, transform 0.15s ease-out;
  box-shadow: var(--t-sombra), 0 0 0 1px color-mix(in srgb, var(--color-activo) 40%, transparent),
    0 0 26px -4px color-mix(in srgb, var(--color-activo) 55%, transparent);
}

/* ---- Tarros de pintura (paleta) ---- */
.paleta-tarros {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* ---- Pestañas de la paleta (Vidrios / Degradados / Materiales) ---- */
.pro-color-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--t-tarjeta-borde);
  padding-bottom: 10px;
}

/* ---- Scroll propio de TODO el contenido del panel de colores (recientes,
   rapido, pestañas, grilla, opciones avanzadas) -- pedido en vivo: "el
   panel de colores debe tener scroll... todo el panel inferior debe tener
   scroll, TODO se mueve, no solo los colores". El limite de alto SOLO se
   aplica en reposo (clase .colapsado, la pone JS) -- "expande el panel
   inferior completo, expandido debe verse completo, colapsado con scroll".
   Con el limite puesto SIEMPRE, la tarjeta entera quedaba mas baja que la
   pantalla y "expandido" no llegaba al fondo (reportado en vivo con
   captura: quedaba colgado a mitad de pantalla). Scrollbar fina y con los
   colores del template (no la barra gris generica del navegador). ---- */
.pro-palette-scroll {
  padding-right: 4px;
  margin-right: -4px;
  scrollbar-width: thin;
  scrollbar-color: var(--acento) transparent;
}
.pro-palette-scroll.colapsado {
  max-height: 65vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pro-palette-scroll::-webkit-scrollbar {
  width: 6px;
}
.pro-palette-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.pro-palette-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--acento) 70%, transparent);
  border-radius: 10px;
}
.pro-palette-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--acento);
}

.pro-color-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--t-bg);
  color: var(--t-texto-sec);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.pro-color-tab.activo {
  border-color: var(--acento);
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 12%, var(--t-bg));
}

/* ---- Celda "+ Nuevo" al final de cada pestaña: crea y guarda un bote
   propio (localStorage) -- vidrio/material llevan 1 selector, degradado 2. ---- */
.tarro-agregar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  border: 2px dashed var(--t-tarjeta-borde);
  border-radius: 12px;
  background: var(--t-bg);
}

.tarro-agregar-inputs {
  display: flex;
  gap: 4px;
}

.tarro-agregar input[type="color"] {
  width: 26px;
  height: 22px;
  border: none;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  background: none;
}

.tarro-agregar-btn {
  font-size: 10px;
  font-weight: 800;
  color: var(--acento);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
}

/* ---- Modal de personalizacion de color (reemplaza el picker nativo suelto
   por un panel propio, con preview y -- para degradados -- el tipo de
   efecto). ---- */
.pro-color-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 10, 0.55);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pro-color-modal {
  width: 100%;
  max-width: 320px;
  background: var(--t-tarjeta-bg);
  border: 1px solid var(--t-tarjeta-borde);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.pro-color-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  color: var(--t-texto);
  margin-bottom: 10px;
}

.pro-color-modal-header button {
  background: none;
  border: none;
  color: var(--t-texto-sec);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
}

.pro-color-modal-preview {
  width: 100%;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--t-tarjeta-borde);
  margin-bottom: 14px;
}

.pro-color-modal-fila {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.pro-color-modal-campo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--t-texto-sec);
}

.pro-color-modal-campo input[type="color"] {
  width: 100%;
  height: 40px;
  border: 1px solid var(--t-tarjeta-borde);
  border-radius: 8px;
  padding: 2px;
  cursor: pointer;
  background: var(--t-bg);
}

.pro-color-modal-tipos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--t-texto-sec);
  margin-bottom: 14px;
}

.pro-color-modal-tipos-botones {
  display: flex;
  gap: 6px;
}

.pro-color-modal-tipos-botones button {
  flex: 1;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-bg);
  color: var(--t-texto);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.pro-color-modal-tipos-botones button.activo {
  border-color: var(--acento);
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 12%, var(--t-bg));
}

.pro-color-modal-listo {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: none;
  background: var(--acento);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

/* ---- Paleta de Hilos de Bordado: "carrete" (bobina de hilo), sin nombre
   visible debajo (pedido en vivo: "quita los nombres" -- queda solo como
   title/tooltip), con boton de personalizar y badge que distingue
   degradado/especial. ---- */
.carrete-bordado {
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding-top: 4px;
}
.carrete-bordado-bobina {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid transparent;
  background-color: #f5f2e8;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.25), inset 2px 2px 4px rgba(255, 255, 255, 0.5), 0 2px 5px rgba(0, 0, 0, 0.15);
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
/* Brillo tipo "cuenta" -- un arco de luz chico arriba-izquierda, para que
   se lea como una bolita/perla y no un circulo de color plano. */
.carrete-bordado-bobina::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 20%;
  width: 34%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(1.5px);
  pointer-events: none;
}
.carrete-bordado.activo-hilo .carrete-bordado-bobina {
  border-color: var(--acento);
  transform: scale(1.14);
  box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.25), inset 2px 2px 4px rgba(255, 255, 255, 0.5), 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent), 0 4px 10px rgba(0, 0, 0, 0.25);
}
/* Marca de "elegido" clara a simple vista en una grilla densa -- antes solo
   se distinguia por un borde+escala sutiles, facil de pasar por alto. */
.carrete-bordado.activo-hilo .carrete-bordado-bobina::after {
  content: '✓';
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.carrete-bordado-agujero {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
}
.carrete-bordado-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  font-size: 12px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.carrete-bordado-editar {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-tarjeta-bg);
  font-size: 9px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
  padding: 0;
}
.carrete-bordado:hover .carrete-bordado-editar,
.carrete-bordado:active .carrete-bordado-editar {
  opacity: 1;
}

/* ---- Skin "bote acrilico" para Pin: mismo slot de 48x48 que la bobina de
   hilo, pero como lata de pintura -- pedido en vivo: "pines botes
   acrilicos", para que no comparta el diseño de hilo de Bordado que hoy
   clona sin distinguirse. ---- */
.carrete-bordado-bobina.bobina-bote {
  border-radius: 6px 6px 10px 10px;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.bote-tapa {
  position: absolute;
  top: -3px;
  left: 20%;
  width: 60%;
  height: 7px;
  background: linear-gradient(180deg, #e2e8f0, #94a3b8 60%, #64748b);
  border-radius: 3px 3px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: none;
}
.bote-cuerpo {
  position: relative;
  width: 84%;
  height: 34px;
  margin-bottom: 2px;
  border-radius: 3px 3px 7px 7px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset -3px -5px 8px rgba(0, 0, 0, 0.35), inset 3px 3px 5px rgba(255, 255, 255, 0.35);
  overflow: visible;
}
.bote-brillo {
  position: absolute;
  top: 3px;
  left: 14%;
  width: 20%;
  height: 55%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}
.bote-gota {
  position: absolute;
  bottom: -5px;
  right: 4px;
  width: 8px;
  height: 10px;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* ---- Skin "lapiz de color" para Sticker -- pedido en vivo: "sticker
   lapices". Punta de grafito + madera + cuerpo de color con una banda clara
   tipo etiqueta. ---- */
.carrete-bordado-bobina.bobina-lapiz {
  border-radius: 4px;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
  padding-top: 2px;
}
.lapiz-punta {
  /* border-top dibuja un triangulo que APUNTA HACIA ABAJO -- para que la
     punta del lapiz apunte hacia arriba (como corresponde, sentado sobre la
     madera) el borde con color tiene que ser el de ABAJO, no el de arriba.
     Reportado en vivo con captura: "la punta esta al reves". */
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 9px solid #4a3423;
}
.lapiz-madera {
  width: 14px;
  height: 5px;
  background: #e8c99b;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
}
.lapiz-cuerpo {
  position: relative;
  width: 18px;
  height: 30px;
  border-radius: 2px 2px 3px 3px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset -3px 0 5px rgba(0, 0, 0, 0.3), inset 2px 0 4px rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.lapiz-banda {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  height: 5px;
  background: rgba(255, 255, 255, 0.55);
}

.carrete-bordado-agregar {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 4px;
}
.carrete-bordado-agregar-icono {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px dashed var(--t-tarjeta-borde);
  color: var(--t-texto-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

/* ---- Constructor de degradado (modal de personalizacion, grupo
   "degradados") ---- */
.pro-degradado-subtitulo {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--t-texto-sec);
  text-transform: uppercase;
  margin: 10px 0 6px;
}
.pro-degradado-colores-actuales,
.pro-degradado-paleta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.pro-degradado-chip {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--t-tarjeta-borde);
  cursor: pointer;
  padding: 0;
}
.pro-degradado-paleta-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--t-tarjeta-borde);
  cursor: pointer;
  padding: 0;
}
.pro-degradado-orientacion-rapida {
  display: flex;
  gap: 6px;
  margin: 8px 0 12px;
}
.pro-degradado-orientacion-rapida button {
  flex: 1;
  padding: 6px 4px;
  border-radius: 8px;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-bg);
  color: var(--t-texto);
  font-size: 14px;
  cursor: pointer;
}

.tarro-pintura {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding-top: 6px;
  transition: transform 0.15s ease;
}

.tarro-pintura:hover {
  transform: translateY(-2px);
}

.tarro-pintura:active {
  transform: translateY(1px) scale(0.96);
}

.tarro-tapa {
  width: 60%;
  height: 8px;
  background: linear-gradient(180deg, #e2e8f0, #94a3b8 60%, #64748b);
  border-radius: 3px 3px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-bottom: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.tarro-cuerpo {
  position: relative;
  width: 100%;
  height: 40px;
  border-radius: 4px 4px 8px 8px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset -4px -6px 10px rgba(0, 0, 0, 0.35), inset 3px 4px 6px rgba(255, 255, 255, 0.35);
  overflow: visible;
}

.tarro-brillo {
  position: absolute;
  top: 4px;
  left: 12%;
  width: 22%;
  height: 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.tarro-gota {
  position: absolute;
  bottom: -6px;
  right: 8px;
  width: 10px;
  height: 12px;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.3);
}

.tarro-pintura.activo .tarro-cuerpo {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--acento, #38bdf8), inset -4px -6px 10px rgba(0, 0, 0, 0.35), inset 3px 4px 6px rgba(255, 255, 255, 0.35);
}

.tarro-pintura.activo .tarro-tapa {
  border-color: var(--acento, #38bdf8);
}

/* ---- Tarros de degradado premium (dos tonos, insignia ✨) ---- */
.tarro-degradado .tarro-tapa {
  background: linear-gradient(180deg, #fde68a, #d97706 60%, #92400e);
}

.tarro-premium-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  font-size: 11px;
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.9));
  animation: shimmerPro 2.5s infinite linear;
}

/* ---- Materiales opacos (muro/madera/cemento): sin brillo tipo gema, la
   tapa queda mate para que se note a simple vista que no son vidrio. ---- */
.tarro-opaco-badge {
  /* Antes era el emoji "🧱" -- en varios WebView de Android ese glifo no
     existe en la fuente del sistema y se veia como un cuadrito roto (tofu),
     reportado en vivo con captura. Se reemplaza por un icono dibujado en CSS
     (ladrillos), que no depende de que fuente/emoji tenga el dispositivo. */
  position: absolute;
  top: -6px;
  right: -4px;
  width: 14px;
  height: 11px;
  border-radius: 3px;
  background:
    linear-gradient(#00000000 45%, #00000030 45% 55%, #00000000 55%),
    repeating-linear-gradient(90deg, #a8785030 0 6px, #00000030 6px 7px);
  background-color: #c99a6b;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.tarro-opaco .tarro-tapa {
  background: linear-gradient(180deg, #9c9488, #6b6255 60%, #4a4339);
}

.tarro-opaco .tarro-cuerpo {
  box-shadow: inset -3px -4px 8px rgba(0, 0, 0, 0.25), inset 2px 3px 4px rgba(255, 255, 255, 0.15);
}

/* ---- Personalizar color de cada bote (input color nativo, disparado por
   una insignia de pincel en la esquina) ---- */
.tarro-editar-color {
  position: absolute;
  top: -6px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 2;
  padding: 0;
  line-height: 1;
}

/* ---- Panel de Opciones Pro (sensibilidad de relleno, intensidad) ---- */
.pro-panel-avanzado {
  margin-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  padding-top: 12px;
}

.pro-panel-avanzado summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  color: var(--t-texto);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pro-panel-avanzado summary::-webkit-details-marker { display: none; }

.pro-panel-avanzado summary::after {
  content: '▾';
  margin-left: auto;
  transition: transform 0.2s ease;
  color: var(--t-texto-sec);
}

.pro-panel-avanzado[open] summary::after {
  transform: rotate(180deg);
}

.pro-panel-contenido {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

.pro-slider-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--t-texto-sec);
}

.pro-slider-label b {
  color: var(--acento);
  font-weight: 800;
}

.pro-slider-label input[type="range"] {
  width: 100%;
  accent-color: var(--acento, #38bdf8);
  cursor: pointer;
}

/* ---- Pantalla completa: agranda SOLO la tarjeta de la imagen (no la
   cabecera ni la paleta), con sus propios controles flotantes encima.
   Fondo oscuro FIJO (no var(--t-bg), el tema claro/oscuro global de la app)
   -- el estudio de vitral es siempre oscuro (ver #090d16 del wrapper del
   modal, rgba(15,23,42,..) de las tarjetas), independiente del tema que el
   usuario haya elegido para el resto de Dale Color. Con var(--t-bg) el
   fondo se volvia beige claro en el tema "papel" (el de por defecto) apenas
   se entraba a pantalla completa -- se veia roto/inconsistente (reportado:
   "se ve mal"). ---- */
.pro-canvas-card:fullscreen,
.pro-canvas-card:-webkit-full-screen {
  background: #090d16;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Con el panel de opciones abierto (ver .pro-sol-opciones-activas) la
     imagen + el panel pueden no entrar juntos en la altura de un telefono
     -- auto deja hacer scroll en vez de solaparse o recortarse. */
  overflow-y: auto;
}

/* Con el panel de opciones abierto: alinear arriba en vez de centrar -- si
   se centra Y el contenido no entra en pantalla, la parte de arriba queda
   inalcanzable con scroll (el problema clasico de centrar contenido que
   desborda). Solo aplica mientras el panel esta realmente abierto -- la
   imagen sola sigue centrada como siempre. */
.pro-canvas-card.pro-sol-opciones-activas:fullscreen,
.pro-canvas-card.pro-sol-opciones-activas:-webkit-full-screen {
  justify-content: flex-start;
}

.pro-canvas-card.pro-canvas-fullscreen #proCanvasWrap {
  max-width: 100%;
  /* flex:1 (no max-height:100%) para que la imagen tome lo que le queda
     DESPUES de restarle el alto de la barra superior de controles -- con
     max-height:100% competia por el 100% completo de canvasCard y quedaba
     tapada/recortada por la barra en vez de acomodarse debajo de ella. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Barra de controles de pantalla completa: EN FLUJO NORMAL arriba de la
   imagen (order:-1 la fuerza primera dentro del flex-column de canvasCard,
   sin importar en que orden se agrego al DOM), con fondo propio -- no flota
   encima de la ilustracion (reportado: "el boton de configuracion debe
   estar fuera"). La imagen queda SIEMPRE debajo, nunca tapada.
   Vidrio oscuro (glassmorphism, mismo lenguaje que el resto del visor 3D)
   con un acento de marca sutil (linea inferior + resplandor), NO un bloque
   solido naranja -- un rectangulo naranja plano encima de un vitral se leia
   duro/generico, no como parte de un panel "pro" (reportado: "se ve muy
   mal"). El naranja de marca sigue presente, pero como detalle, no como
   fondo completo. */
.pro-fullscreen-controles {
  display: none;
  order: -1;
  width: 100%;
  flex-shrink: 0;
  padding: 12px 16px;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(20, 16, 14, 0.92), rgba(12, 10, 9, 0.88));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--acento, #FF6B35), #C94B2D, transparent) 1;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  z-index: 50;
}

.pro-fullscreen-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--acento, #FF6B35);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-fs-flotante {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  flex-shrink: 0;
}

/* Estado activo: blanco solido -- pop claro contra el vidrio oscuro de la
   barra, sin confundirse con el acento naranja del borde inferior. */
.btn-fs-flotante.activo {
  background: #fff;
  border-color: #fff;
  color: #C94B2D;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.btn-fs-sol.activo {
  background: #fff;
  color: #d97706;
}

/* ---- Salpicon de pincel al tocar ---- */
.pincelada-splash {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--color-splash, #38bdf8);
  pointer-events: none;
  z-index: 20;
  animation: pinceladaSplash 0.55s ease-out forwards;
}

@keyframes pinceladaSplash {
  0% { transform: scale(0.3); opacity: 0.9; box-shadow: 0 0 0 0 var(--color-splash, #38bdf8); }
  100% { transform: scale(1); opacity: 0; box-shadow: 0 0 0 22px transparent; }
}

/* ---- Boton "Reflejo de Sol" ---- */
.btn-modo-sol {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(45deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 12px -2px rgba(245, 158, 11, 0.55);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-modo-sol:active {
  transform: translateY(1px) scale(0.97);
}

.btn-modo-sol.activo {
  background: linear-gradient(45deg, #10b981, #059669);
  box-shadow: 0 3px 12px -2px rgba(16, 185, 129, 0.55);
}

.sol-icono {
  display: inline-block;
  animation: none;
}

.btn-modo-sol.activo .sol-icono {
  animation: girarSol 3s linear infinite;
}

@keyframes girarSol {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Un vitral real con sol de frente NO se ve "lavado" -- cada pieza de vidrio
   mantiene su propio color saturado, mas intenso si acaso, nunca palido.
   Lo que cambia es: un destello puntual donde pega la luz, rayos que
   abanican desde ahi, y un resplandor calido que se escapa hacia afuera del
   marco (como la luz que se derrama de una ventana real). Por eso el brillo
   de la tarjeta es sutil y el resplandor de afuera es el que hace el
   trabajo pesado de "esto tiene luz atras". */
.pro-canvas-card.sol-activo {
  filter: saturate(1.15) brightness(1.03);
  /* SIN transition en transform: el acelerometro dispara deviceorientation
     muchas veces por segundo, y una transicion ahi hace que la inclinacion
     vaya siempre "persiguiendo" al valor real con delay -- se siente lenta/
     gomosa en vez de responder al toque. La respuesta 1:1 se ve mas solida. */
  transition: filter 0.3s ease, box-shadow 0.4s ease;
  box-shadow: var(--t-sombra), 0 0 60px 4px rgba(255, 200, 90, 0.35), 0 0 130px 20px rgba(255, 170, 60, 0.2);
}

/* ---- Modo Luna: mismo mecanismo que Sol (destello/fresnel del shader,
   solo cambia el preset de color a un tono frio via PRESET_LUNA), pero el
   filtro/resplandor de la tarjeta se atenua y vira a plateado/azul en vez
   del calido dorado del sol -- ambiente nocturno real, no solo un cambio de
   color de luz. ---- */
.pro-canvas-card.sol-activo.modo-luna {
  filter: saturate(1.05) brightness(0.92);
  box-shadow: var(--t-sombra), 0 0 60px 4px rgba(120, 150, 255, 0.32), 0 0 140px 24px rgba(70, 90, 200, 0.22);
}

/* ---- Capa de chispas del efecto "Reflejo de Sol" ---- (el destello, los
   rayos y el brillo de vidrio ya NO son divs con mix-blend-mode -- se
   dibujan con Canvas2D en dibujarSol()/modos_pro.js, porque mix-blend-mode
   contra el canal alfa real de la ilustracion se renderizaba distinto segun
   el navegador y terminaba viendose como un lavado solido de color). */
.capa-sparkles-3d {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: transform 0.08s ease-out;
}

.chispa-3d {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0) 70%);
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.8);
  animation: chispaBrillo 2.4s ease-in-out infinite;
}

@keyframes chispaBrillo {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* "Destellos": mas grandes, con cruz de lente (2 barras finas cruzadas via
   box-shadow multiple), tipo reflejo de camara -- mas dramaticos que las
   chispas, menos cantidad. */
.destello-3d {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 14px 4px rgba(255, 255, 255, 0.9),
    0 0 28px 10px rgba(255, 220, 150, 0.35),
    -9px 0 0 -3px rgba(255, 255, 255, 0.55),
    9px 0 0 -3px rgba(255, 255, 255, 0.55),
    0 -9px 0 -3px rgba(255, 255, 255, 0.55),
    0 9px 0 -3px rgba(255, 255, 255, 0.55);
  animation: destelloBrillo 3.2s ease-in-out infinite;
}

@keyframes destelloBrillo {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.4) rotate(25deg); }
}

/* "Polvo de luz": muchas motas chiquitas, tenues, parpadeo rapido y sutil --
   como polvo flotando en un rayo de sol, no puntos de brillo individuales. */
.polvo-3d {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.5);
  animation: polvoBrillo 1.6s ease-in-out infinite;
}

@keyframes polvoBrillo {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.85; }
}