* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

label,
button,
input,
.scene,
.window-hitbox,
.btn-label,
.btn-fader,
.swatch,
.hue-step,
.shutter {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none;
}

/* ══════════════════════════════════════════════════════════════════
   PARÁMETROS GLOBALES CONFIGURABLES (DESIGN TOKENS & PATTERN SCALES)
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* ── 1. Geometría 3D Parametrizada ── */
  --size: 135px;               /* Tamaño del cubo voxel */
  --room-w: 860px;             /* Ancho de la habitación */
  --room-h: 760px;             /* Alto de la habitación (Techo elevado) */
  --room-d: 740px;             /* Profundidad de la habitación */
  --win-w: 380px;              /* Ancho de la ventana */
  --win-h: 300px;              /* Alto de la ventana */
  --win-top: 105px;            /* Margen superior de la ventana (ajuste fino en altura) */
  --beam-w: 440px;             /* Ancho del haz volumétrico */
  --beam-h: 520px;             /* Alto del haz volumétrico */
  --beam-top: 18%;             /* Posición superior del haz de luz */
  --cube-top: 60%;             /* Altura central del cubo */
  --perspective: 950px;        /* Perspectiva de cámara */
  --persp-origin-y: 46%;       /* Altura del punto de fuga */

  /* ── 2. Colores Activos por Defecto ── */
  --color: #e63946;            /* Color base del cubo y ambiente */
  --pattern-color: rgba(255, 255, 255, 0.45); /* Color de líneas de la trama */

  /* ── 3. Parámetros Base de Texturas (Pattern.css) ── */
  --tex-grid-line: 1.5px;
  --tex-grid-size: 20px;

  --tex-stripes-angle: 45deg;
  --tex-stripes-line: 2px;
  --tex-stripes-gap: 12px;

  --tex-checks-size: 24px;
  --tex-zigzag-size: 20px;
  --tex-carbon-size: 16px;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #030407;
  color: #f1f3f9;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  user-select: none;
}

/* ── HUD RADIAL CONTROL SURFACE (MASTERPROMPT SPEC) ── */
:root {
  --hud-width: min(565px, 92vw);
  --hud-bg: radial-gradient(ellipse 135% 115% at 50% 12%, rgba(22, 25, 38, 0.94) 0%, rgba(9, 10, 16, 0.98) 100%);
  --hud-border: 1.5px solid rgba(255, 255, 255, 0.14);
  --hud-radius: 75px 75px 125px 125px / 50px 50px 125px 125px;
  --hud-blur: 24px;
  --hud-shadow: 0 25px 65px rgba(0, 0, 0, 0.9), inset 0 1.5px 2px rgba(255, 255, 255, 0.22), inset 0 -3px 14px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 255, 255, 0.05);
}

.header-controls.radial-widget {
  position: fixed;
  left: 50%;
  top: calc(var(--cube-top, 60%) + 160px);
  transform: translateX(-50%) translateY(32px) scale(0.92);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;

  /* CHASSIS AERODINÁMICO COMPACTO DE CONSOLA FUTURISTA */
  width: var(--hud-width);
  background: var(--hud-bg);
  border: var(--hud-border);
  border-radius: var(--hud-radius);
  box-shadow: var(--hud-shadow);
  backdrop-filter: blur(var(--hud-blur));
  -webkit-backdrop-filter: blur(var(--hud-blur));
  padding: 15px 16px 17px;
  box-sizing: border-box;
}

/* Highlight especular superior de la consola */
.header-controls.radial-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 45%);
  pointer-events: none;
}

/* Emergencia del widget al hacer clic en el cubo (#paint-room:checked) */
#paint-room:checked ~ .header-controls.radial-widget {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Superficie interior continua y compacta (sin espacios muertos) */
.hud-surface {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  position: relative;
}

/* Alas laterales integradas para COLOR A y COLOR B (Curvadas hacia el centro) */
.hud-wing {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: transparent;
  border: none;
  box-shadow: none;
  width: 110px;
  flex-shrink: 0;
  position: relative;
}

.wing-left {
  align-items: flex-start;
  margin-right: -25px;
}

.wing-right {
  align-items: flex-end;
  margin-left: -25px;
}

.wing-left .wing-label {
  align-self: flex-start;
  margin-left: 10px;
  margin-bottom: 2px;
}

.wing-right .wing-label {
  align-self: flex-end;
  margin-right: 10px;
  margin-bottom: 2px;
}

.wing-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #cbd5e1;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  padding: 0 4px;
}

/* Contenedor de la Pista Curvada */
.hue-strip-container {
  position: relative;
  width: 122px;
  height: 75px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.wing-left .hue-strip-container {
  transform: translate(10px, 12px);
}

.wing-right .hue-strip-container {
  transform: translate(-10px, 12px);
}

/* ── PISTA CURVADA COLOR A (Ala Izquierda) ── */
.wing-left .hue-spectrum-track {
  position: relative;
  width: 122px;
  height: 75px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Posiciones exactas y equitativas de los puntos en el arco izquierdo */
.wing-left .hue-step { position: absolute; }
.wing-left .hue-step:nth-child(1)  { left: 6px;   top: 3px; }
.wing-left .hue-step:nth-child(2)  { left: 9px;   top: 12px; }
.wing-left .hue-step:nth-child(3)  { left: 14px;  top: 20px; }
.wing-left .hue-step:nth-child(4)  { left: 20px;  top: 28px; }
.wing-left .hue-step:nth-child(5)  { left: 28px;  top: 36px; }
.wing-left .hue-step:nth-child(6)  { left: 37px;  top: 43px; }
.wing-left .hue-step:nth-child(7)  { left: 47px;  top: 48px; }
.wing-left .hue-step:nth-child(8)  { left: 58px;  top: 52px; }
.wing-left .hue-step:nth-child(9)  { left: 69px;  top: 55px; }
.wing-left .hue-step:nth-child(10) { left: 80px;  top: 56px; }
.wing-left .hue-step:nth-child(11) { left: 91px;  top: 56px; }
.wing-left .hue-step:nth-child(12) { left: 102px; top: 54px; }
.wing-left .hue-step:nth-child(13) { left: 113px; top: 50px; }

.wing-left .hue-neutrals {
  position: absolute;
  left: 124px;
  top: 45px;
  border-left: none;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 5;
}

/* ── PISTA CURVADA COLOR B (Ala Derecha) ── */
.wing-right .hue-spectrum-track {
  position: relative;
  width: 122px;
  height: 75px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Posiciones exactas y equitativas de los puntos en el arco derecho */
.wing-right .hue-step { position: absolute; }
.wing-right .hue-step:nth-child(1)  { right: 6px;   top: 3px; }
.wing-right .hue-step:nth-child(2)  { right: 9px;   top: 12px; }
.wing-right .hue-step:nth-child(3)  { right: 14px;  top: 20px; }
.wing-right .hue-step:nth-child(4)  { right: 20px;  top: 28px; }
.wing-right .hue-step:nth-child(5)  { right: 28px;  top: 36px; }
.wing-right .hue-step:nth-child(6)  { right: 37px;  top: 43px; }
.wing-right .hue-step:nth-child(7)  { right: 47px;  top: 48px; }
.wing-right .hue-step:nth-child(8)  { right: 58px;  top: 52px; }
.wing-right .hue-step:nth-child(9)  { right: 69px;  top: 55px; }
.wing-right .hue-step:nth-child(10) { right: 80px;  top: 56px; }
.wing-right .hue-step:nth-child(11) { right: 91px;  top: 56px; }
.wing-right .hue-step:nth-child(12) { right: 102px; top: 54px; }
.wing-right .hue-step:nth-child(13) { right: 113px; top: 50px; }

.wing-right .hue-neutrals {
  position: absolute;
  right: 124px;
  top: 45px;
  border-left: none;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 5;
}

/* Puntos de Colores / Beads Brillantes */
.hue-step {
  width: 11.5px;
  height: 11.5px;
  border-radius: 50%;
  background: var(--h-col);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.hue-step::after,
.swatch-sm::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
}

.hue-step:hover {
  transform: scale(1.35);
  z-index: 5;
  border-color: #ffffff;
  box-shadow: 0 0 10px var(--h-col);
}

.hue-neutrals {
  display: flex;
  align-items: center;
  gap: 3px;
}

.swatch-sm {
  width: 11.5px;
  height: 11.5px;
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: inline-block;
  position: relative;
}

.swatch-sm:hover {
  transform: scale(1.3);
  border-color: #ffffff;
}

/* Columna Central de Controles */
.hud-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  width: 360px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.hud-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.hud-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #717d96;
  min-width: 56px;
  text-align: right;
  user-select: none;
}

.options-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Botones individuales (Píldoras limpias) */
.btn-label {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.btn-label:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px) scale(1.02);
}

.btn-label:active {
  transform: scale(0.98);
}

.btn-fader {
  padding: 2.5px 8px;
  font-size: 9.5px;
}

/* Ocultar inputs nativos */
input[type="radio"],
input[type="checkbox"] {
  display: none;
}

/* Paleta de colores circulares y Barra de Matiz */
.swatch-group {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(14, 16, 24, 0.94);
  padding: 3px 7px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ── ESTADOS ACTIVOS DE OPCIONES (PÍLDORAS NEÓN GLOW) ── */

/* 1. TEXTURAS (Azul Neón) */
#t-plain:checked ~ .header-controls label[for="t-plain"],
#t-grid:checked ~ .header-controls label[for="t-grid"],
#t-stripes:checked ~ .header-controls label[for="t-stripes"],
#t-checks:checked ~ .header-controls label[for="t-checks"],
#t-zigzag:checked ~ .header-controls label[for="t-zigzag"],
#t-carbon:checked ~ .header-controls label[for="t-carbon"] {
  background: #3b82f6;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.25);
}

/* 2. ESCALA (Índigo / Violeta Neón) */
#s-scale-xs:checked ~ .header-controls label[for="s-scale-xs"],
#s-scale-sm:checked ~ .header-controls label[for="s-scale-sm"],
#s-scale-md:checked ~ .header-controls label[for="s-scale-md"],
#s-scale-lg:checked ~ .header-controls label[for="s-scale-lg"] {
  background: #6366f1;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.25);
}

/* 3. FILTROS SVG (Rojo / Rosa Neón) */
#f-normal:checked ~ .header-controls label[for="f-normal"],
#f-glitch:checked ~ .header-controls label[for="f-glitch"],
#f-liquid:checked ~ .header-controls label[for="f-liquid"],
#f-melt:checked ~ .header-controls label[for="f-melt"] {
  background: #f43f5e;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.25);
}

/* 4. EFECTO / INTENSIDAD (Magenta Neón) */
#s-int-low:checked ~ .header-controls label[for="s-int-low"],
#s-int-med:checked ~ .header-controls label[for="s-int-med"],
#s-int-high:checked ~ .header-controls label[for="s-int-high"],
#s-int-chaos:checked ~ .header-controls label[for="s-int-chaos"] {
  background: #d946ef;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(217, 70, 239, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.25);
}

/* 5. COLOR A: HUE SPECTRUM COLOR PICKER */
#c-h0:checked ~ .header-controls label[for="c-h0"],
#c-h25:checked ~ .header-controls label[for="c-h25"],
#c-h45:checked ~ .header-controls label[for="c-h45"],
#c-h60:checked ~ .header-controls label[for="c-h60"],
#c-h90:checked ~ .header-controls label[for="c-h90"],
#c-h140:checked ~ .header-controls label[for="c-h140"],
#c-h175:checked ~ .header-controls label[for="c-h175"],
#c-h200:checked ~ .header-controls label[for="c-h200"],
#c-h225:checked ~ .header-controls label[for="c-h225"],
#c-h255:checked ~ .header-controls label[for="c-h255"],
#c-h285:checked ~ .header-controls label[for="c-h285"],
#c-h315:checked ~ .header-controls label[for="c-h315"],
#c-h340:checked ~ .header-controls label[for="c-h340"] {
  background: var(--h-col);
  transform: scale(1.6);
  box-shadow: 0 0 0 2.5px #ffffff, 0 0 10px rgba(255, 255, 255, 0.9);
  z-index: 10;
}

#c-dark:checked ~ .header-controls label[for="c-dark"],
#c-white:checked ~ .header-controls label[for="c-white"] {
  border-color: #ffffff;
  transform: scale(1.4);
  box-shadow: 0 0 8px currentColor;
}

/* Mapeo de Colores --color a la sala y cubo */
#c-h0:checked ~ .viewport { --color: #ef4444; }
#c-h25:checked ~ .viewport { --color: #f97316; }
#c-h45:checked ~ .viewport { --color: #f59e0b; }
#c-h60:checked ~ .viewport { --color: #eab308; }
#c-h90:checked ~ .viewport { --color: #84cc16; }
#c-h140:checked ~ .viewport { --color: #10b981; }
#c-h175:checked ~ .viewport { --color: #14b8a6; }
#c-h200:checked ~ .viewport { --color: #06b6d4; }
#c-h225:checked ~ .viewport { --color: #0ea5e9; }
#c-h255:checked ~ .viewport { --color: #3b82f6; }
#c-h285:checked ~ .viewport { --color: #8b5cf6; }
#c-h315:checked ~ .viewport { --color: #d946ef; }
#c-h340:checked ~ .viewport { --color: #ec4899; }
#c-dark:checked ~ .viewport { --color: #1e293b; }
#c-white:checked ~ .viewport { --color: #f8fafc; }

/* ── ESTADOS ACTIVOS DEL HUE SPECTRUM PARA TRAMA (--pattern-color) ── */
#p-h0:checked ~ .header-controls label[for="p-h0"],
#p-h25:checked ~ .header-controls label[for="p-h25"],
#p-h45:checked ~ .header-controls label[for="p-h45"],
#p-h60:checked ~ .header-controls label[for="p-h60"],
#p-h90:checked ~ .header-controls label[for="p-h90"],
#p-h140:checked ~ .header-controls label[for="p-h140"],
#p-h175:checked ~ .header-controls label[for="p-h175"],
#p-h200:checked ~ .header-controls label[for="p-h200"],
#p-h225:checked ~ .header-controls label[for="p-h225"],
#p-h255:checked ~ .header-controls label[for="p-h255"],
#p-h285:checked ~ .header-controls label[for="p-h285"],
#p-h315:checked ~ .header-controls label[for="p-h315"],
#p-h340:checked ~ .header-controls label[for="p-h340"] {
  background: var(--h-col);
  transform: scale(1.6);
  box-shadow: 0 0 0 2.5px #ffffff, 0 0 10px rgba(255, 255, 255, 0.9);
  z-index: 10;
}

#p-black:checked ~ .header-controls label[for="p-black"],
#p-white:checked ~ .header-controls label[for="p-white"] {
  border-color: #ffffff;
  transform: scale(1.4);
  box-shadow: 0 0 8px currentColor;
}

/* Mapeo de Colores de Trama --pattern-color */
#p-h0:checked ~ .viewport { --pattern-color: rgba(239, 68, 68, 0.75); }
#p-h25:checked ~ .viewport { --pattern-color: rgba(249, 115, 22, 0.75); }
#p-h45:checked ~ .viewport { --pattern-color: rgba(245, 158, 11, 0.75); }
#p-h60:checked ~ .viewport { --pattern-color: rgba(234, 179, 8, 0.75); }
#p-h90:checked ~ .viewport { --pattern-color: rgba(132, 204, 22, 0.75); }
#p-h140:checked ~ .viewport { --pattern-color: rgba(16, 185, 129, 0.75); }
#p-h175:checked ~ .viewport { --pattern-color: rgba(20, 184, 166, 0.75); }
#p-h200:checked ~ .viewport { --pattern-color: rgba(6, 182, 212, 0.75); }
#p-h225:checked ~ .viewport { --pattern-color: rgba(14, 165, 233, 0.75); }
#p-h255:checked ~ .viewport { --pattern-color: rgba(59, 130, 246, 0.75); }
#p-h285:checked ~ .viewport { --pattern-color: rgba(139, 92, 246, 0.75); }
#p-h315:checked ~ .viewport { --pattern-color: rgba(217, 70, 239, 0.75); }
#p-h340:checked ~ .viewport { --pattern-color: rgba(236, 72, 153, 0.75); }
#p-black:checked ~ .viewport { --pattern-color: rgba(0, 0, 0, 0.6); }
#p-white:checked ~ .viewport { --pattern-color: rgba(255, 255, 255, 0.6); }

/* ══════════════════════════════════════════════════════════════════
   FADER 1: MULTIPLICADOR DE ESCALA DE TEXTURA (0.5x, 1x, 1.8x, 3x)
   ══════════════════════════════════════════════════════════════════ */
#s-scale-xs:checked ~ .viewport { --mult: 0.5; }
#s-scale-sm:checked ~ .viewport { --mult: 1; }
#s-scale-md:checked ~ .viewport { --mult: 1.8; }
#s-scale-lg:checked ~ .viewport { --mult: 3; }

/* ── DEFINICIÓN DE LA TEXTURA ACTIVA Y ESCALADO DINÁMICO ── */
#t-plain:checked ~ .viewport {
  --active-pat-img: none;
  --active-pat-size: auto;
  --active-pat-pos: 0 0;
}

#t-grid:checked ~ .viewport {
  --active-pat-img: 
    linear-gradient(currentColor calc(var(--tex-grid-line) * var(--mult, 1)), transparent calc(var(--tex-grid-line) * var(--mult, 1))), 
    linear-gradient(to right, currentColor calc(var(--tex-grid-line) * var(--mult, 1)), transparent calc(var(--tex-grid-line) * var(--mult, 1)));
  --active-pat-size: calc(var(--tex-grid-size) * var(--mult, 1)) calc(var(--tex-grid-size) * var(--mult, 1));
  --active-pat-pos: 0 0;
}

#t-stripes:checked ~ .viewport {
  --active-pat-img: repeating-linear-gradient(
    var(--tex-stripes-angle), 
    currentColor, 
    currentColor calc(var(--tex-stripes-line) * var(--mult, 1)), 
    transparent calc(var(--tex-stripes-line) * var(--mult, 1)), 
    transparent calc(var(--tex-stripes-gap) * var(--mult, 1))
  );
  --active-pat-size: auto;
  --active-pat-pos: 0 0;
}

#t-checks:checked ~ .viewport {
  --active-pat-img: 
    linear-gradient(45deg, currentColor 25%, transparent 25%),
    linear-gradient(-45deg, currentColor 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, currentColor 75%),
    linear-gradient(-45deg, transparent 75%, currentColor 75%);
  --active-pat-size: calc(var(--tex-checks-size) * var(--mult, 1)) calc(var(--tex-checks-size) * var(--mult, 1));
  --active-pat-pos: 
    0 0, 
    0 calc(var(--tex-checks-size) * var(--mult, 1) / 2), 
    calc(var(--tex-checks-size) * var(--mult, 1) / 2) calc(var(--tex-checks-size) * var(--mult, 1) / -2), 
    calc(var(--tex-checks-size) * var(--mult, 1) / -2) 0px;
}

#t-zigzag:checked ~ .viewport {
  --active-pat-img: 
    linear-gradient(135deg, currentColor 25%, transparent 25%),
    linear-gradient(225deg, currentColor 25%, transparent 25%),
    linear-gradient(315deg, currentColor 25%, transparent 25%),
    linear-gradient(45deg, currentColor 25%, transparent 25%);
  --active-pat-size: calc(var(--tex-zigzag-size) * var(--mult, 1)) calc(var(--tex-zigzag-size) * var(--mult, 1));
  --active-pat-pos: 
    calc(var(--tex-zigzag-size) * var(--mult, 1) / -2) 0, 
    calc(var(--tex-zigzag-size) * var(--mult, 1) / -2) 0, 
    0 0, 
    0 0;
}

#t-carbon:checked ~ .viewport {
  --active-pat-img: 
    radial-gradient(rgba(0, 0, 0, 0.45) 15%, transparent 16%),
    radial-gradient(rgba(0, 0, 0, 0.45) 15%, transparent 16%),
    radial-gradient(currentColor 15%, transparent 20%),
    radial-gradient(currentColor 15%, transparent 20%);
  --active-pat-size: calc(var(--tex-carbon-size) * var(--mult, 1)) calc(var(--tex-carbon-size) * var(--mult, 1));
  --active-pat-pos: 
    0 0, 
    calc(var(--tex-carbon-size) * var(--mult, 1) / 2) calc(var(--tex-carbon-size) * var(--mult, 1) / 2), 
    0 1px, 
    calc(var(--tex-carbon-size) * var(--mult, 1) / 2) calc((var(--tex-carbon-size) * var(--mult, 1) / 2) + 1px);
}

/* Aplicación del material al Cubo */
.viewport .part > div {
  color: var(--pattern-color);
  background-image: var(--active-pat-img);
  background-size: var(--active-pat-size);
  background-position: var(--active-pat-pos);
  transition: box-shadow 0.85s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, color 0.4s ease;
}

/* ══════════════════════════════════════════════════════════════════
   FADER 2: INTENSIDAD DE DISTORSIÓN SVG (Sutil, Normal, Intenso, Caos)
   Orden exacto del DOM: #f-* ~ #s-int-* ~ .viewport
   ══════════════════════════════════════════════════════════════════ */

/* Normal (Sin filtro) */
#f-normal:checked ~ .viewport .scene,
#f-normal:checked ~ .viewport .wall-surface { filter: none; }

/* 1. Glitch */
#f-glitch:checked ~ .viewport .scene,
#f-glitch:checked ~ .viewport .wall-surface { filter: url(#filter-glitch-med); }

#f-glitch:checked ~ #s-int-low:checked ~ .viewport .scene,
#f-glitch:checked ~ #s-int-low:checked ~ .viewport .wall-surface { filter: url(#filter-glitch-low); }

#f-glitch:checked ~ #s-int-med:checked ~ .viewport .scene,
#f-glitch:checked ~ #s-int-med:checked ~ .viewport .wall-surface { filter: url(#filter-glitch-med); }

#f-glitch:checked ~ #s-int-high:checked ~ .viewport .scene,
#f-glitch:checked ~ #s-int-high:checked ~ .viewport .wall-surface { filter: url(#filter-glitch-high); }

#f-glitch:checked ~ #s-int-chaos:checked ~ .viewport .scene,
#f-glitch:checked ~ #s-int-chaos:checked ~ .viewport .wall-surface { filter: url(#filter-glitch-chaos); }

/* 2. Líquido */
#f-liquid:checked ~ .viewport .scene,
#f-liquid:checked ~ .viewport .wall-surface { filter: url(#filter-liquid-med); }

#f-liquid:checked ~ #s-int-low:checked ~ .viewport .scene,
#f-liquid:checked ~ #s-int-low:checked ~ .viewport .wall-surface { filter: url(#filter-liquid-low); }

#f-liquid:checked ~ #s-int-med:checked ~ .viewport .scene,
#f-liquid:checked ~ #s-int-med:checked ~ .viewport .wall-surface { filter: url(#filter-liquid-med); }

#f-liquid:checked ~ #s-int-high:checked ~ .viewport .scene,
#f-liquid:checked ~ #s-int-high:checked ~ .viewport .wall-surface { filter: url(#filter-liquid-high); }

#f-liquid:checked ~ #s-int-chaos:checked ~ .viewport .scene,
#f-liquid:checked ~ #s-int-chaos:checked ~ .viewport .wall-surface { filter: url(#filter-liquid-chaos); }

/* 3. Warp / Melt */
#f-melt:checked ~ .viewport .scene,
#f-melt:checked ~ .viewport .wall-surface { filter: url(#filter-melt-med); }

#f-melt:checked ~ #s-int-low:checked ~ .viewport .scene,
#f-melt:checked ~ #s-int-low:checked ~ .viewport .wall-surface { filter: url(#filter-melt-low); }

#f-melt:checked ~ #s-int-med:checked ~ .viewport .scene,
#f-melt:checked ~ #s-int-med:checked ~ .viewport .wall-surface { filter: url(#filter-melt-med); }

#f-melt:checked ~ #s-int-high:checked ~ .viewport .scene,
#f-melt:checked ~ #s-int-high:checked ~ .viewport .wall-surface { filter: url(#filter-melt-high); }

#f-melt:checked ~ #s-int-chaos:checked ~ .viewport .scene,
#f-melt:checked ~ #s-int-chaos:checked ~ .viewport .wall-surface { filter: url(#filter-melt-chaos); }


/* ══════════════════════════════════════════════════════════════════
   3D ENVIRONMENT: HABITACIÓN (ROOM), VENTANA Y PINTADO COMPLETO
   ══════════════════════════════════════════════════════════════════ */

.viewport {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: var(--perspective, 950px);
  perspective-origin: 50% var(--persp-origin-y, 46%);
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

.viewport-cube {
  z-index: 300;
}

.room-world {
  width: var(--room-w);
  height: var(--room-h);
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(40px);
  pointer-events: none;
}

.room {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateY(var(--room-shift-y, 0px));
  pointer-events: none;
}

/* Capa interna de textura para toda la habitación */
.wall-surface {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  color: var(--pattern-color);
  background-color: color-mix(in srgb, var(--color) 24%, #080911);
  background-image: var(--active-pat-img);
  background-size: var(--active-pat-size);
  background-position: var(--active-pat-pos);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.75), 0 0 35px color-mix(in srgb, var(--color) 35%, transparent);
  transition: opacity 0.5s ease, filter 0.3s ease, background-color 0.4s ease, color 0.4s ease, box-shadow 0.5s ease;
  z-index: 0;
}

/* ── COMPORTAMIENTO DE PINTADO DE LA HABITACIÓN (SIN JS) ── */
/* 1. Ventana CERRADA + Widget OCULTO -> Paredes PINTADAS automáticamente */
#window-toggle:not(:checked) ~ #paint-room:not(:checked) ~ .viewport .wall-surface,
#paint-room:not(:checked) ~ #window-toggle:not(:checked) ~ .viewport .wall-surface {
  opacity: 1;
}

/* 2. Ventana ABIERTA o Widget DESPLEGADO -> Paredes DESPINTADAS */
#window-toggle:checked ~ .viewport .wall-surface,
#paint-room:checked ~ .viewport .wall-surface {
  opacity: 0;
}

/* 1. Suelo de la Habitación */
.room-floor {
  position: absolute;
  width: var(--room-w);
  height: var(--room-d);
  left: 0;
  top: calc((var(--room-h) - var(--room-d)) / 2);
  background-color: #080911;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: rotateX(90deg) translateZ(calc(var(--room-h) * -0.5));
  transform-style: preserve-3d;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.95);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
  pointer-events: none;
}

/* 2. Techo de la Habitación */
.room-ceiling {
  position: absolute;
  width: var(--room-w);
  height: var(--room-d);
  left: 0;
  top: calc((var(--room-h) - var(--room-d)) / 2);
  background-color: #07080f;
  transform: rotateX(-90deg) translateZ(calc(var(--room-h) * -0.5));
  transform-style: preserve-3d;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.98);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
  pointer-events: none;
}

/* 3. Paredes Laterales */
.room-wall {
  position: absolute;
  width: var(--room-d);
  height: var(--room-h);
  top: 0;
  left: calc((var(--room-w) - var(--room-d)) / 2);
  background-color: #0a0b16;
  transform-style: preserve-3d;
  box-shadow: inset 0 0 130px rgba(0, 0, 0, 0.9);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
  pointer-events: none;
}

.room-wall-left {
  transform: rotateY(90deg) translateZ(calc(var(--room-w) * -0.5));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
}

.room-wall-right {
  transform: rotateY(-90deg) translateZ(calc(var(--room-w) * -0.5));
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
}

/* 4. Pared de Fondo */
.room-wall-back {
  position: absolute;
  width: var(--room-w);
  height: var(--room-h);
  left: 0;
  top: 0;
  background-color: #0c0d18;
  transform: translateZ(calc(var(--room-d) * -0.5));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transform-style: preserve-3d;
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.95);
  transition: background-color 0.4s ease;
  pointer-events: none;
}

/* ── TEXTURA DE MADERA ORGÁNICA (Pattern CSS + SVG Displacement Ajustado) ── */
.wood-texture {
  background: #3e2415;
  background-image: repeating-linear-gradient(
    90deg,
    #2c180c 0px,
    #4a2914 2px,
    #381e0e 5px,
    #58331a 8px,
    #2b160a 12px,
    #422512 16px,
    #532e17 20px
  );
  filter: url(#filter-wood);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.65);
}

/* ── HITBOX INTERACTIVO DE VENTANA (Accesible en primer plano) ── */
.window-hitbox {
  position: absolute;
  width: var(--win-w, 380px);
  height: var(--win-h, 300px);
  top: var(--win-hitbox-top, var(--win-top, 64px));
  left: 50%;
  transform: translateX(-50%) translateZ(calc(var(--room-d) * -0.46));
  z-index: 99;
  cursor: pointer;
  pointer-events: auto;
  display: block;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(255, 255, 255, 0.15);
}


/* ── VENTANA 3D SIN MARCO INVASIVO Y CON SELLADO DE LUZ HERMÉTICO ── */
.window-container {
  width: var(--win-w, 380px);
  height: var(--win-h, 300px);
  margin-top: var(--win-top, 64px);
  position: relative;
  border-radius: 0;
  transform-style: preserve-3d;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85);
  border: none;
  z-index: 10;
  background: #090a12;
}

.window-viewport {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  background: #06070c;
  transform-style: preserve-3d;
  transition: opacity 0.6s ease;
}

/* ── PAISAJE EXTERIOR DIURNO (Cielo azul, Sol radiante, nubes y montañas) ── */
.outdoor-scenery {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #38bdf8;
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cuando la ventana se abre, se muestra el paisaje y la luz */
#window-toggle:checked ~ .viewport .outdoor-scenery {
  opacity: 1;
}

.sky-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #0284c7 0%,
    #38bdf8 35%,
    #7dd3fc 60%,
    #bae6fd 80%,
    #fef08a 95%,
    #fde68a 100%
  );
}

.sun-glare {
  position: absolute;
  top: 25px;
  right: 50px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 30%, #fef08a 65%, #f59e0b 100%);
  box-shadow: 
    0 0 35px #fde047,
    0 0 75px #fb923c,
    0 0 130px rgba(254, 240, 138, 0.6);
}

.sun-glare::after {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(254, 240, 138, 0.2) 45%, transparent 70%);
}

.cloud {
  position: absolute;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.85);
  filter: blur(4px);
}

.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}

.cloud-1 {
  width: 140px;
  height: 38px;
  top: 45px;
  left: -20px;
  animation: drift-cloud 35s linear infinite;
}
.cloud-1::before { width: 50px; height: 50px; top: -22px; left: 24px; }
.cloud-1::after { width: 65px; height: 65px; top: -32px; left: 55px; }

.cloud-2 {
  width: 110px;
  height: 30px;
  top: 95px;
  left: 140px;
  opacity: 0.75;
  animation: drift-cloud 48s linear infinite 5s;
}
.cloud-2::before { width: 40px; height: 40px; top: -18px; left: 20px; }
.cloud-2::after { width: 48px; height: 48px; top: -24px; left: 45px; }

.cloud-3 {
  width: 90px;
  height: 25px;
  top: 130px;
  left: 20px;
  opacity: 0.6;
  animation: drift-cloud 40s linear infinite 12s;
}
.cloud-3::before { width: 32px; height: 32px; top: -14px; left: 16px; }
.cloud-3::after { width: 38px; height: 38px; top: -18px; left: 35px; }

@keyframes drift-cloud {
  0% { transform: translateX(-150px); }
  100% { transform: translateX(450px); }
}

.mountains-far {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, #60a5fa 0%, #93c5fd 80%, #fed7aa 100%);
  clip-path: polygon(
    0% 100%,
    0% 65%,
    14% 42%,
    28% 58%,
    44% 34%,
    58% 52%,
    72% 38%,
    86% 62%,
    100% 45%,
    100% 100%
  );
  opacity: 0.7;
}

.mountains-mid {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  height: 85px;
  background: linear-gradient(180deg, #2563eb 0%, #3b82f6 75%, #93c5fd 100%);
  clip-path: polygon(
    0% 100%,
    0% 75%,
    18% 48%,
    35% 68%,
    52% 44%,
    70% 60%,
    88% 40%,
    100% 65%,
    100% 100%
  );
  opacity: 0.85;
}

.hills-foreground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(180deg, #10b981 0%, #047857 70%, #064e3b 100%);
  clip-path: polygon(
    0% 100%,
    0% 60%,
    22% 35%,
    45% 55%,
    68% 28%,
    88% 48%,
    100% 32%,
    100% 100%
  );
}

.glass-pane {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%, rgba(255, 255, 255, 0.04) 100%);
  pointer-events: none;
  z-index: 5;
}

.window-mullions {
  position: absolute;
  inset: 0;
  border: none;
  background: transparent;
  pointer-events: none;
  z-index: 6;
}
.window-mullions::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 4px;
  margin-left: -2px;
  background: #2a180e;
}
.window-mullions::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  margin-top: -2px;
  background: #2a180e;
}

/* ── POSTIGOS 3D DE MADERA CON SELLADO DE BORDE Y BISAGRAS ── */
.shutter {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  cursor: pointer;
  display: block;
}

.shutter-left { left: 0; transform-origin: left center; }
.shutter-right { right: 0; transform-origin: right center; }

.hinge {
  position: absolute;
  width: 6px;
  height: 24px;
  background: #11141d;
  border: 1px solid #334155;
  border-radius: 2px;
  z-index: 20;
  box-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

.shutter-left .hinge { left: -3px; }
.shutter-right .hinge { right: -3px; }
.hinge-top { top: 25px; }
.hinge-bottom { bottom: 25px; }

.shutter-panel {
  width: 100%;
  height: 100%;
  border: 4px solid #231209;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: filter 0.4s ease, box-shadow 0.6s ease;
}

.shutter-inset {
  width: 82%;
  height: 86%;
  background: #2b170c;
  border: 2px solid #1c0e07;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 8px 12px;
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.8);
}

.shutter-slat {
  width: 100%;
  height: 16px;
  background: #462713;
  border-radius: 2px;
  border-bottom: 2px solid #1a0d07;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.shutter-handle {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 32px;
  margin-top: -16px;
  background: #0f121a;
  border-radius: 3px;
  border: 1px solid #475569;
  box-shadow: 0 2px 6px rgba(0,0,0,0.9);
}

.handle-left { right: 12px; }
.handle-right { left: 12px; }

.window-sill {
  position: absolute;
  bottom: -16px;
  left: -18px;
  right: -18px;
  height: 18px;
  border-radius: 3px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.85);
  border: 2px solid #1c0e07;
  z-index: 15;
  cursor: pointer;
  display: block;
}

/* Borde superior simétrico de madera */
.window-header {
  bottom: auto;
  top: -16px;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.7);
}

#window-toggle:checked ~ .viewport .window-header {
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.7), 0 0 25px rgba(254, 240, 138, 0.4);
  transition: box-shadow 0.75s ease-out 0.22s;
}

/* ── COMPORTAMIENTO DE LUZ / SOMBRA AL ABRIR Y CERRAR LA VENTANA ── */
#window-toggle:checked ~ .viewport .shutter-left { transform: rotateY(-118deg); }
#window-toggle:checked ~ .viewport .shutter-right { transform: rotateY(118deg); }

/* Haz de luz volumétrico con laterales difuminados y sin cortes */
.volumetric-beam {
  position: absolute;
  width: calc(var(--win-w) * 1.7);
  height: calc(var(--room-h) * 0.96);
  left: 50%;
  top: var(--win-top, 64px);
  transform-origin: 50% 0%;
  transform: translateX(-50%) translateZ(calc(var(--room-d) * -0.48)) rotateX(44deg);
  background: radial-gradient(
    ellipse 75% 85% at 50% 0%, 
    rgba(255, 255, 245, 0.48) 0%, 
    rgba(254, 240, 138, 0.3) 25%, 
    rgba(251, 191, 36, 0.15) 50%, 
    rgba(56, 189, 248, 0.04) 72%, 
    transparent 88%
  );
  -webkit-mask-image: radial-gradient(ellipse 80% 85% at 50% 0%, black 25%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 85% at 50% 0%, black 25%, transparent 85%);
  filter: blur(28px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

#window-toggle:checked ~ .viewport .volumetric-beam {
  opacity: 1;
  transition: opacity 0.75s ease-out 0.22s;
}

/* Rebote de luz solar en el suelo orgánico y difuso (sin cortes) */
.floor-window-light {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: 
    /* Núcleo brillante suave de sol directo */
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(255, 255, 235, 0.50) 0%, rgba(254, 240, 138, 0.30) 30%, rgba(251, 191, 36, 0.22) 55%, transparent 75%),
    /* Difusión expansiva suave en todo el piso */
    radial-gradient(ellipse 85% 75% at 50% 40%, rgba(254, 240, 138, 0.35) 0%, rgba(251, 191, 36, 0.15) 50%, transparent 80%);
  filter: blur(24px);
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

#window-toggle:checked ~ .viewport .floor-window-light {
  opacity: 1;
  transition: opacity 0.75s ease-out 0.22s;
}

/* Sombra proyectada del cubo sobre el parche de luz */
.floor-cube-shadow {
  position: absolute;
  width: calc(var(--size) * 1.7);
  height: calc(var(--size) * 2.2);
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.5) 55%, transparent 75%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

#window-toggle:checked ~ .viewport .floor-cube-shadow {
  opacity: 1;
  transition: opacity 0.75s ease-out 0.22s;
}

#window-toggle:checked ~ .viewport .room-wall-back {
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.75), 0 0 80px rgba(254, 240, 138, 0.2);
  transition: box-shadow 0.75s ease-out 0.22s;
}

#window-toggle:checked ~ .viewport .window-sill {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.85), 0 0 30px rgba(254, 240, 138, 0.5);
  transition: box-shadow 0.75s ease-out 0.22s;
}

.floor-ambient-glow,
.ceiling-ambient-glow,
.wall-ambient-glow,
.back-wall-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.floor-ambient-glow {
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color, #e63946) 45%, transparent) 0%, transparent 65%);
  filter: blur(32px);
}

.ceiling-ambient-glow {
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color, #e63946) 35%, transparent) 0%, transparent 60%);
  filter: blur(36px);
}

.wall-ambient-glow {
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--color, #e63946) 35%, transparent) 0%, transparent 65%);
  filter: blur(34px);
}

.back-wall-glow {
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--color, #e63946) 55%, transparent) 0%, color-mix(in srgb, var(--color, #e63946) 20%, transparent) 40%, transparent 75%);
  filter: blur(36px);
}

#window-toggle:not(:checked) ~ .viewport .floor-ambient-glow,
#window-toggle:not(:checked) ~ .viewport .ceiling-ambient-glow,
#window-toggle:not(:checked) ~ .viewport .wall-ambient-glow,
#window-toggle:not(:checked) ~ .viewport .back-wall-glow {
  opacity: 1;
}

#window-toggle:not(:checked) ~ .viewport .shutter-panel {
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.7), 0 0 35px color-mix(in srgb, var(--color, #e63946) 35%, transparent);
}

/* ── LUZ INDIRECTA / REBOTE AMBIENTAL DIURNO EN PAREDES Y TECHO ── */
.ceiling-daylight,
.wall-daylight,
.back-wall-daylight {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.ceiling-daylight {
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(254, 240, 138, 0.16) 0%, rgba(56, 189, 248, 0.09) 45%, transparent 75%);
  filter: blur(32px);
}

.wall-daylight-left {
  background: 
    radial-gradient(ellipse 90% 75% at 100% 85%, rgba(254, 240, 138, 0.25) 0%, rgba(251, 191, 36, 0.12) 40%, transparent 72%),
    radial-gradient(ellipse 70% 55% at 100% 30%, rgba(56, 189, 248, 0.14) 0%, transparent 65%);
  filter: blur(28px);
}

.wall-daylight-right {
  background: 
    radial-gradient(ellipse 90% 75% at 0% 85%, rgba(254, 240, 138, 0.25) 0%, rgba(251, 191, 36, 0.12) 40%, transparent 72%),
    radial-gradient(ellipse 70% 55% at 0% 30%, rgba(56, 189, 248, 0.14) 0%, transparent 65%);
  filter: blur(28px);
}

.back-wall-daylight {
  background: radial-gradient(ellipse 75% 65% at 50% var(--win-top, 64px), rgba(254, 240, 138, 0.24) 0%, rgba(56, 189, 248, 0.08) 50%, transparent 75%);
  filter: blur(30px);
}

#window-toggle:checked ~ .viewport .ceiling-daylight,
#window-toggle:checked ~ .viewport .wall-daylight,
#window-toggle:checked ~ .viewport .back-wall-daylight {
  opacity: 1;
  transition: opacity 0.75s ease-out 0.22s;
}

/* ══════════════════════════════════════════════════════════════════
   CUBO 3D VOXEL CENTRADO E INTERACTIVO
   ══════════════════════════════════════════════════════════════════ */

.scene {
  width: calc(var(--size) * 3);
  height: calc(var(--size) * 3);
  position: absolute;
  top: var(--cube-top, 64%);
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: none;
  z-index: 1000;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.scene:hover {
  transform: translate3d(-50%, -50%, 0) scale(1.6);
}

.cube-rotate {
  width: var(--size);
  height: var(--size);
  position: relative;
  transform-style: preserve-3d;
  animation: girar-cubo 8s linear infinite;
  pointer-events: auto;
}

@keyframes girar-cubo {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  50% { transform: rotateX(180deg) rotateY(270deg) rotateZ(90deg); }
  100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

.part {
  --w: var(--size);
  --h: var(--size);
  --d: var(--size);
  --c: var(--color, #e63946);
  width: var(--w);
  height: var(--h);
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: center center calc(var(--d) / -2);
}

.part > div {
  transition: filter 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.6s ease;
}

.part .f {
  width: var(--w); height: var(--h);
  background-color: var(--c);
  position: absolute; transform: translateZ(calc(var(--d) / 2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.part .bk {
  width: var(--w); height: var(--h);
  background-color: color-mix(in srgb, var(--c), black 25%);
  position: absolute; transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.part .tp {
  width: var(--w); height: var(--d);
  background-color: color-mix(in srgb, var(--c), white 25%);
  position: absolute; transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.part .bt {
  width: var(--w); height: var(--d);
  background-color: color-mix(in srgb, var(--c), black 35%);
  position: absolute; transform: rotateX(-90deg) translateZ(calc(var(--h) / 2));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.part .lt {
  width: var(--d); height: var(--h);
  background-color: color-mix(in srgb, var(--c), white 12%);
  position: absolute; transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.part .rt {
  width: var(--d); height: var(--h);
  background-color: color-mix(in srgb, var(--c), black 15%);
  position: absolute; transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* ── COMPORTAMIENTO DE GLOW DEL CUBO SEGÚN ESTADO DE LA VENTANA ── */
/* 1. Ventana CERRADA: El cubo actúa como fuente de luz propia (glow) en la habitación a oscuras */
#window-toggle:not(:checked) ~ .viewport .part > div {
  box-shadow: 0 0 28px var(--color, #e63946), inset 0 0 20px rgba(255, 255, 255, 0.5);
}

#window-toggle:not(:checked) ~ #paint-room:checked ~ .viewport .part > div,
#paint-room:checked ~ #window-toggle:not(:checked) ~ .viewport .part > div {
  box-shadow: 0 0 35px var(--color), inset 0 0 25px rgba(255, 255, 255, 0.6);
}

/* 2. Ventana ABIERTA: Se desactiva el glow del cubo (la habitación se ilumina con la luz natural del sol) */
#window-toggle:checked ~ .viewport .part > div {
  box-shadow: none;
}

#window-toggle:checked ~ .viewport .part .f { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
#window-toggle:checked ~ .viewport .part .bk { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
#window-toggle:checked ~ .viewport .part .tp { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
#window-toggle:checked ~ .viewport .part .bt { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
#window-toggle:checked ~ .viewport .part .lt { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
#window-toggle:checked ~ .viewport .part .rt { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN (MOBILE & TABLET ADAPTATIONS)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    /* ── Geometría 3D Adaptada a Pantallas Verticales / Móviles ── */
    --size: 92px;                /* Tamaño del cubo proporcional */
    --room-w: min(92vw, 360px);  /* Ancho de la habitación cabe en pantalla */
    --room-h: 520px;             /* Alto de la habitación (Techo elevado) */
    --room-d: 380px;             /* Profundidad */
    --room-shift-y: -95px;       /* Habitación desplazada hacia arriba para que el techo inicie desde la parte superior */
    --win-w: 220px;              /* Ancho ventana */
    --win-h: 175px;              /* Alto ventana */
    --win-hitbox-top: 72px;      /* Mantiene la ubicación de la ventana */
    --win-top: calc(var(--win-hitbox-top) - var(--room-shift-y)); /* Compensa el desplazamiento de la habitación */
    --beam-w: 240px;             /* Ancho haz de luz */
    --beam-h: 360px;             /* Alto haz de luz */
    --beam-top: 14%;
    --cube-top: 62%;             /* Cubo levemente más abajo */
    --perspective: 680px;
    --persp-origin-y: 44%;       /* Enfoque de cámara en la zona superior */
  }

  /* ── Barra de Controles en la PARTE INFERIOR (Dock Mobile) ── */
  .header-controls.radial-widget {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 8px 4px max(10px, env(safe-area-inset-bottom)) 4px;
    gap: 4px;
    background: linear-gradient(0deg, rgba(3, 4, 7, 0.98) 0%, rgba(3, 4, 7, 0.92) 80%, rgba(3, 4, 7, 0.7) 95%, transparent 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px 16px 0 0;
    overflow-x: hidden;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
  }

  .header-controls.radial-widget::before {
    display: none;
  }

  .hud-surface {
    flex-direction: column;
    gap: 4px;
    width: 100%;
    align-items: center;
  }

  .hud-wing {
    transform: none !important;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
  }

  .wing-left,
  .wing-right {
    margin: 0 !important;
    align-items: center !important;
  }

  .hud-center {
    width: 100%;
    gap: 3px;
  }

  .hud-row {
    gap: 4px;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .row-texture {
    flex-direction: row;
    margin-top: 0;
  }

  .row-texture .hud-label {
    text-align: right;
    width: auto;
  }

  .hud-label {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #94a3b8;
    min-width: auto;
    text-align: center;
    padding: 2px 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .wing-label {
    text-shadow: none;
    align-self: center !important;
    margin: 0 !important;
  }

  .options-group {
    gap: 2px;
    flex-shrink: 0;
  }

  .btn-label {
    padding: 3px 6px;
    font-size: 10.5px;
    min-height: 24px;
    gap: 2px;
  }

  .btn-fader {
    padding: 2px 6px;
    font-size: 10px;
    min-height: 22px;
  }

  .hue-strip-container {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 2px 4px !important;
    gap: 3px !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    background: rgba(14, 16, 24, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 100px;
    transform: none !important;
    margin: 0 !important;
  }

  .wing-left .hue-strip-container,
  .wing-right .hue-strip-container {
    transform: none !important;
    margin: 0 !important;
  }

  .wing-left .hue-spectrum-track,
  .wing-right .hue-spectrum-track {
    position: static !important;
    width: auto !important;
    height: 14px !important;
    padding: 0 1px !important;
    background: linear-gradient(
      to right,
      #ef4444 0%,
      #f97316 8%,
      #f59e0b 16%,
      #eab308 24%,
      #84cc16 32%,
      #10b981 42%,
      #14b8a6 50%,
      #06b6d4 58%,
      #0ea5e9 66%,
      #3b82f6 75%,
      #8b5cf6 83%,
      #d946ef 91%,
      #ec4899 96%,
      #ef4444 100%
    ) !important;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
    display: flex !important;
    align-items: center;
    gap: 0 !important;
  }

  .wing-left .hue-spectrum-track::before,
  .wing-right .hue-spectrum-track::before {
    display: none;
  }

  .hue-step::after,
  .swatch-sm::after {
    display: none !important;
  }

  .wing-left .hue-step,
  .wing-right .hue-step {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    width: 8px !important;
    height: 11px !important;
    border-radius: 2px !important;
  }

  .wing-left .hue-neutrals,
  .wing-right .hue-neutrals {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center;
    gap: 2px !important;
    padding-left: 2px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
  }

  .swatch-sm {
    width: 10px !important;
    height: 10px !important;
  }

  /* ── Ajustes de la escena 3D en Mobile ── */
  .viewport {
    perspective: var(--perspective);
    perspective-origin: 50% var(--persp-origin-y);
    padding-bottom: 70px;
  }

  .room-world {
    transform: translateZ(0px);
  }
}

@media (max-width: 380px) {
  :root {
    --size: 80px;
    --room-w: 300px;
    --room-h: 420px;
    --room-d: 330px;
    --room-shift-y: -70px;
    --win-w: 190px;
    --win-h: 150px;
    --win-hitbox-top: 30px;
    --win-top: calc(var(--win-hitbox-top) - var(--room-shift-y));
    --beam-w: 200px;
    --beam-h: 300px;
    --cube-top: 52%;
  }

  .btn-label {
    padding: 2px 5px;
    font-size: 9.5px;
  }

  .swatch {
    width: 16px;
    height: 16px;
  }

  .hue-step {
    width: 7px;
    height: 10px;
  }

  .swatch-sm {
    width: 9px;
    height: 9px;
  }
}