/* ===================================================
   Configurador visual de piscinas — capa de previsualización (2.5D + 3D
   opcional bajo demanda). Cargado de forma aditiva tras configurador.css.
   No redefine clases del wizard 2D existente; solo añade el panel visual
   dentro de la barra lateral (.configurator__summary), reutilizando los
   tokens del design system (--sp-*, --c-*, --radius-*, --shadow-*, --font-*).
   Adaptado del prototipo "Fase 1" para vivir sobre fondo oscuro (barra
   lateral sticky), en vez de como sección independiente de página completa.
=================================================== */

/* Vive fuera de la tarjeta blanca, directamente sobre el fondo oscuro de la
   barra lateral -- mismo patrón de color que el resto de textos secundarios
   ahí (.configurator__summary-empty, .configurator__summary-price-note). */
.cfgv-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .72rem;
  color: rgba(255,255,255,.55);
  margin: 0 0 var(--sp-5);
  line-height: 1.4;
}
.cfgv-disclaimer i { flex-shrink: 0; font-size: 1rem; margin-top: .1rem; }

.cfgv-preview {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

/* Vista 2.5D: perspectiva CSS sobre el SVG en planta (sin motor 3D, sin
   dependencias nuevas). Sensación de profundidad tipo maqueta vista desde
   arriba, visible por defecto en todos los dispositivos. */
.cfgv-preview__stage {
  perspective: 1100px;
  padding: var(--sp-2) 0 var(--sp-3);
}
.cfgv-preview svg {
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
  border-radius: var(--radius-md);
  transform: rotateX(38deg) scale(1.02);
  transform-origin: 50% 85%;
  filter: drop-shadow(0 14px 12px rgba(6, 44, 92, 0.18));
}
.cfgv-preview svg rect,
.cfgv-preview svg circle,
.cfgv-preview svg g {
  transition: fill .25s ease, opacity .25s ease, width .25s ease, height .25s ease, x .25s ease, y .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cfgv-preview svg { transition: none; }
}

/* ===================================================
   Visor 3D premium -- overlay a pantalla completa (Three.js), cargado solo
   bajo demanda al pulsar "Ver en 3D". Vive fuera de la rejilla de 340px de
   la barra lateral (ver calculadora-piscinas.html, hermano de <form>) para
   poder ocupar prácticamente toda la ventana en vez de quedar encerrado en
   una miniatura de tarjeta.
=================================================== */
.cfgv-3d-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.cfgv-3d-modal[hidden] { display: none; }
.cfgv-3d-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 21, 32, 0.72);
  backdrop-filter: blur(2px);
}
.cfgv-3d-modal__panel {
  position: relative;
  z-index: 1;
  width: min(96vw, 1400px);
  height: min(88vh, 900px);
  background: #eaf1f8;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 30px 80px rgba(0,0,0,.4));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cfgv-3d-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--c-line, #e3e9f0);
  flex-shrink: 0;
}
.cfgv-3d-modal__title {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  color: var(--c-ink, #0b1520);
}
.cfgv-3d-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f3f1ea;
  color: var(--c-ink, #0b1520);
  font-size: 1.15rem;
  cursor: pointer;
  flex-shrink: 0;
}
.cfgv-3d-modal__close:hover { background: var(--v3-accent, var(--c-primary)); color: #fff; }

.cfgv-3d-modal__stage {
  flex: 1;
  min-height: 0;
  line-height: 0;
  position: relative;
}
.cfgv-3d-modal__stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none; /* deja que OrbitControls gestione el gesto táctil */
}
.cfgv-3d-modal__hint {
  display: flex;
  align-items: center;
  gap: .35rem;
  justify-content: center;
  font-size: .72rem;
  color: var(--c-ink-2, #5b6b7a);
  background: #fff;
  padding: .45rem;
  margin: 0;
  border-top: 1px solid var(--c-line, #e3e9f0);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .cfgv-3d-modal { padding: 0; }
  .cfgv-3d-modal__panel {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
}

.cfgv-preview__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.cfgv-preview__caption {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--c-ink-2);
  line-height: 1.4;
}
.cfgv-3d-toggle {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--v3-accent, var(--c-primary));
  background: #f3f1ea;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: .4rem .9rem;
  cursor: pointer;
  white-space: nowrap;
}
.cfgv-3d-toggle:hover { border-color: var(--v3-accent, var(--c-primary)); }
.cfgv-3d-toggle:disabled { opacity: .6; cursor: wait; }

@media (max-width: 991px) {
  .cfgv-preview svg { max-height: 260px; }
}

/* Panel "Equipamiento instalado" -- clorador salino / bomba de calor no se
   representan como objeto 3D junto al vaso (categoría técnica sin
   ubicación real definida en el catálogo), pero su selección debe tener
   una consecuencia clara e inequívoca en la interfaz. Vive junto al aviso
   de la vista previa, mismo tratamiento tonal que el resto de textos
   secundarios de la barra lateral oscura. */
.cfgv-equip-panel {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md, 10px);
  padding: .8rem .9rem;
  margin: 0 0 var(--sp-5);
}
.cfgv-equip-panel h4 {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  margin: 0 0 .5rem;
}
.cfgv-equip-panel ul {
  list-style: none;
  margin: 0 0 .4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.cfgv-equip-panel li {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: rgba(255,255,255,.9);
}
.cfgv-equip-panel li i { color: #6fd08c; font-size: 1rem; }
.cfgv-equip-panel__note {
  font-size: .68rem;
  color: rgba(255,255,255,.5);
  margin: 0;
  line-height: 1.4;
}