/* =================================================================
   ESTILOS DE LA PANTALLA DE CARGA - LASERCRAFT 3D
================================================================== */
:root {
    --loader-color-orange: #FF6600;
    --loader-color-petrol-blue: #005f73;
    --loader-color-off-white: #EAEBEF; 
    --loader-color-progress-bar: var(--loader-color-orange);
    --loader-transition-speed-fast: 0.5s;
    --loader-transition-speed-slow: 0.8s;
}
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--loader-color-off-white); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity var(--loader-transition-speed-slow) ease-in-out, visibility var(--loader-transition-speed-slow); }
#loader-wrapper.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.scene-container { perspective: 1200px; }
.printer-container { position: relative; display: flex; flex-direction: column; align-items: center; width: 90vw; max-width: 700px; transform-style: preserve-3d; transform: rotateX(15deg); }
#text-container { position: relative; }
#printed-text { text-align: center; font-size: clamp(1.8rem, 9vw, 4rem); font-weight: 700; white-space: nowrap; font-family: 'Segoe UI', 'Roboto', system-ui, sans-serif; }
#extruder-nozzle { position: absolute; width: 24px; height: 22px; top: 0; left: 0; z-index: 20; will-change: transform; transform: translateY(-150px); transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s ease-in; background: linear-gradient(to right, #888, #666, #888); border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
#extruder-nozzle::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 20px; height: 25px; border: 1px solid #777; border-bottom: none; border-radius: 4px 4px 0 0; background-image: linear-gradient(to right, #ccc, #aaa, #ccc), repeating-linear-gradient(to bottom, #999, #999 3px, #777 3px, #777 4px); }
#extruder-nozzle::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #b8860b; }
#printed-text .char { display: inline-block; position: relative; opacity: 0; clip-path: inset(var(--fill-percentage, 100%) 0 0 0); transition: opacity 0.1s linear; }
#printed-text .char-orange { color: var(--loader-color-orange); }
#printed-text .char-blue { color: var(--loader-color-petrol-blue); }
#printed-text.word-printed .char { opacity: 1 !important; animation: final-glow 1.5s ease-in-out forwards; }
@keyframes final-glow { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 25px currentColor, 0 0 10px currentColor; } }
#particle-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.particle { position: absolute; width: 5px; height: 5px; border-radius: 50%; background-color: var(--particle-color, var(--loader-color-orange)); box-shadow: 0 0 8px var(--particle-color, var(--loader-color-orange)); animation: particle-fade 0.4s ease-out forwards; }
@keyframes particle-fade { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: translateY(20px) scale(0.3); } }
.loading-ui { width: 90%; max-width: 700px; margin-top: 30px; transform: rotateX(-15deg); font-family: 'Segoe UI', 'Roboto', system-ui, sans-serif; }
#progress-bar-container { width: 100%; height: 8px; background-color: #ccc; border-radius: 4px; overflow: hidden; margin-bottom: 15px; }
#progress-bar { width: 0%; height: 100%; background-color: var(--loader-color-progress-bar); border-radius: 4px; transition: width 0.2s linear; }
.loading-feedback { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; font-weight: 500; }
#loading-message { color: #555; font-style: italic; }
#loading-percentage { font-variant-numeric: tabular-nums; font-weight: 600; }
#main-content { display: none; }

/* 
 * ===================================================================
 * SOLUCIÓN PARA BLOQUEAR SCROLL DURANTE LA PANTALLA DE CARGA
 * ===================================================================
 */
body:has(#loader-wrapper:not(.hidden)) {
    overflow: hidden;
}