/* Estilos del lienzo SVG (se incrustan también en el PNG exportado). */
.lienzo { width: 100%; height: auto; display: block; touch-action: none; user-select: none; --led: #8fd3ff; --grab: #d8232a; }
.lienzo .acrilico { display: none; }
.lienzo .hit { fill: transparent; stroke: none; cursor: grab; pointer-events: all; }
.lienzo .hit.sel { stroke: #1d7bff; stroke-width: 40; stroke-dasharray: 90 60; fill: rgba(29,123,255,0.06); }
.lienzo .hit-texto { fill: transparent; stroke: none; cursor: pointer; pointer-events: all; }
.lienzo .texto.sel .hit-texto { stroke: #1d7bff; stroke-width: 25; stroke-dasharray: 70 50; }
.lienzo .foto-vacia { fill: #f2efe9; stroke: #cfc8bc; stroke-width: 20; stroke-dasharray: 80 60; }
.lienzo .foto-vacia-txt { fill: #8a8378; font-family: Arial, sans-serif; }
.lienzo .grabado-txt { fill: #d8232a; }
.lienzo .calendario text { fill: #d8232a; }
.lienzo .cal-marcado { fill: #ffffff; }
.lienzo .spotify.ejemplo rect { opacity: .45; }
.lienzo .plantilla [fill="#FEFEFE"], .lienzo .plantilla [fill="#FFFFFF"], .lienzo .plantilla [fill="white"] { fill: #ffffff; }

/* ---------- modo encendida: el acrílico sobre la base LED ---------- */
.lienzo.modo-luz .foto-vacia { fill: rgba(11,15,24,0.82); stroke: rgba(255,255,255,0.35); }
.lienzo.modo-luz .foto-vacia-txt { fill: rgba(255,255,255,0.6); }
.lienzo.modo-luz .acrilico { display: block; }
.lienzo.modo-luz .acrilico-forma, .lienzo.modo-luz .acrilico-rect { fill: rgba(255,255,255,0.07); stroke: rgba(255,255,255,0.55); stroke-width: 25; }
.lienzo.modo-luz .plantilla [stroke="#ED3237"], .lienzo.modo-luz .plantilla [stroke="#FF0000"],
.lienzo.modo-luz .plantilla [stroke="#ED1C24"] { stroke: var(--led); }
.lienzo.modo-luz .plantilla [fill="#ED3237"], .lienzo.modo-luz .plantilla [fill="#FF0000"],
.lienzo.modo-luz .plantilla [fill="#ED1C24"] { fill: var(--led); }
.lienzo.modo-luz .plantilla [fill="#FEFEFE"], .lienzo.modo-luz .plantilla [fill="#FFFFFF"], .lienzo.modo-luz .plantilla [fill="white"] { fill: none; filter: none; }

.lienzo.modo-luz .plantilla [fill="#373435"], .lienzo.modo-luz .plantilla [fill="#000000"],
.lienzo.modo-luz .plantilla [fill="#2B2A29"] { fill: var(--led); }
.lienzo.modo-luz .plantilla { filter: drop-shadow(0 0 18px var(--led)); }
.lienzo.modo-luz .grabado-txt, .lienzo.modo-luz .calendario text { fill: var(--led); }
.lienzo.modo-luz .capa-textos, .lienzo.modo-luz .capa-calendario, .lienzo.modo-luz .capa-spotify { filter: drop-shadow(0 0 18px var(--led)); }
.lienzo.modo-luz .cal-marcado { fill: #0b0f18; }
.lienzo.modo-luz .spotify rect { fill: var(--led); }
.lienzo.modo-luz .foto image:not(.foto-fondo) { filter: brightness(1.08) saturate(1.05); }

/* encendida: cualquier color de grabado (rojos, grises, negros) se ve del color del LED; el blanco es acrílico sin grabar */
.lienzo.modo-luz .plantilla *[fill]:not([fill="none"]):not(.es-blanco) { fill: var(--led); }
.lienzo.modo-luz .plantilla *[stroke]:not([stroke="none"]):not(.trazo-blanco) { stroke: var(--led); }
.lienzo.modo-luz .plantilla .es-blanco { fill: none !important; }
.lienzo.modo-luz .plantilla .trazo-blanco { stroke: none !important; }


/* texto con trazo (iniciales del modelo 14) */
.lienzo .grabado-txt.con-trazo { stroke: #d8232a; paint-order: stroke fill; }
.lienzo.modo-luz .grabado-txt.con-trazo { stroke: var(--led); }
/* corte dinámico (modelo 14): borde exterior de la unión de piezas */
.lienzo .corte-borde { pointer-events: none; }
.lienzo.modo-luz .acrilico-union { opacity: .07; }
.lienzo.modo-luz .acrilico-union * { fill: #fff; stroke: #fff; }

/* manecillas: piezas físicas sobre el acrílico, con sombra suave */
.lienzo .capa-reloj { pointer-events: none; filter: drop-shadow(0 0 60px rgba(0,0,0,.6)); }

/* texto solo contorno: relleno blanco (acrílico sin grabar); encendido, transparente */
.lienzo .grabado-txt.sin-relleno { fill: #ffffff; }
.lienzo.modo-luz .grabado-txt.sin-relleno { fill: none; }

/* iniciales solo contorno: el trazo completo (2,8 mm) va por encima, como el contorno de Corel */
.lienzo .grabado-txt.con-trazo.sin-relleno { paint-order: normal; }