@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --bg-backrooms: #d8d2a7; 
    --carpet-brown: #5c5443;
    --fluor-light: #f4f6f0;
    --text-dark: #1f1e1a;
    --accent-creepy: #8a0f0f; 
    --border-harsh: #8a8569;
    --terminal-green: #33ff00; 
}

* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; font-family: 'Courier New', Courier, monospace; background-color: var(--bg-backrooms); color: var(--text-dark); overflow-x: hidden; position: relative; }

/* ==========================================
   PANTALLA DE ARRANQUE (BOOT SCREEN)
   ========================================== */
#boot-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #050505; color: var(--terminal-green); font-family: 'Space Mono', monospace; z-index: 10000; display: flex; flex-direction: column; padding: 40px; transition: opacity 0.8s ease, visibility 0.8s ease; }
#boot-screen.hidden { opacity: 0; visibility: hidden; }
#boot-screen::after { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none; }
.boot-line { margin: 5px 0; font-size: 1.1rem; text-shadow: 0 0 5px var(--terminal-green); }
.cursor-blink { display: inline-block; width: 10px; height: 1.2rem; background-color: var(--terminal-green); animation: blink 1s step-end infinite; vertical-align: bottom; margin-left: 5px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

#login-container { margin-top: 30px; display: none; flex-direction: column; align-items: flex-start; z-index: 10; }
#login-btn { background: var(--terminal-green); color: #000; font-family: 'Space Mono', monospace; font-size: 1.2rem; font-weight: 700; border: none; padding: 10px 20px; cursor: pointer; margin-top: 20px; box-shadow: 0 0 10px var(--terminal-green); transition: all 0.2s; }
#login-btn:hover { background: #fff; color: #000; box-shadow: 0 0 20px #fff; }

/* ==========================================
   EFECTOS LIMINALES BACKROOMS
   ========================================== */
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(0,0,0,0.04) 38px, rgba(0,0,0,0.04) 40px); z-index: -2; pointer-events: none; }
.vignette-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%); pointer-events: none; z-index: 9997; }
.noise-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9998; background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.08"/%3E%3C/svg%3E'); }
.flicker { animation: flickerLight 5s infinite; }
@keyframes flickerLight { 0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1; } 20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.4; } }

/* --- NAVEGACIÓN Y ENCABEZADO --- */
header { text-align: center; padding: 100px 20px 40px; position: relative; z-index: 10; border-bottom: 2px dashed var(--border-harsh); margin-bottom: 0;}
h1 { font-family: 'Space Mono', monospace; font-size: 4rem; font-weight: 700; margin: 0; color: var(--text-dark); letter-spacing: -2px; text-transform: uppercase; }
.subtitle { font-size: 1rem; font-weight: 700; color: var(--carpet-brown); margin-top: 12px; letter-spacing: 1px; text-transform: uppercase; background-color: rgba(255,255,255,0.4); display: inline-block; padding: 5px 15px;}

.main-nav { margin-top: 30px; }
.main-nav ul { list-style: none; padding: 0; margin: 0; display: inline-flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.main-nav a { text-decoration: none; color: var(--text-dark); font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; font-size: 0.95rem; padding: 5px 10px; border: 1px solid transparent; transition: all 0.2s; background: transparent; }
.main-nav a:hover, .main-nav a.active { border: 1px solid var(--text-dark); background: var(--text-dark); color: var(--bg-backrooms); }

/* --- BREADCRUMBS / MENÚ DE VOLVER --- */
.breadcrumb-container { margin-top: 0px; margin-bottom: 30px; font-family: 'Space Mono', monospace; font-size: 0.85rem; }
.breadcrumb-link { text-decoration: none; color: var(--carpet-brown); font-weight: bold; background: rgba(255,255,255,0.3); padding: 4px 10px; border: 1px dashed var(--border-harsh); display: inline-block; transition: all 0.2s; }
.breadcrumb-link:hover { color: var(--accent-creepy); border-color: var(--accent-creepy); background: #fff; }

/* --- FOOTER Y NAVEGACIÓN SECUNDARIA --- */
footer { text-align: center; background-color: var(--text-dark); color: var(--fluor-light); padding: 40px 20px; font-family: 'Space Mono', monospace; font-size: 0.8rem; border-top: 5px solid var(--accent-creepy); margin-top: 50px; position: relative; z-index: 10;}
.footer-nav { margin-bottom: 25px; border-bottom: 1px dashed var(--border-harsh); padding-bottom: 20px; }
.footer-nav ul { list-style: none; padding: 0; margin: 0; display: inline-flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.footer-nav a { color: var(--fluor-light); text-decoration: none; font-weight: bold; font-size: 0.85rem; transition: color 0.2s; }
.footer-nav a:hover, .footer-nav a.active { color: var(--terminal-green); text-decoration: underline; }

/* --- CONTENIDO GENERAL --- */
.container { max-width: 900px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 10; }

section { margin: 80px 0; }
section:first-of-type { margin-top: 0; } 

h2 { font-family: 'Space Mono', monospace; font-size: 2rem; font-weight: 700; border-bottom: 2px solid var(--text-dark); padding-bottom: 10px; margin-bottom: 40px; text-transform: uppercase; }

/* MAGIA: CENTRADO VERTICAL Y OCULTAMIENTO DE CONTENIDO */
section:first-of-type h2:first-of-type {
    margin-top: 15vh;    
    margin-bottom: 65vh; 
}

/* PUNTO DE ATERRIZAJE PARA EL TELETRANSPORTE */
section:first-of-type h2:first-of-type + * {
    scroll-margin-top: 15vh; 
}

.about-box, .editorial-group, .contact-wrapper { background: var(--fluor-light); border: 2px solid var(--text-dark); padding: 40px; box-shadow: 8px 8px 0px rgba(0,0,0,0.15); }
.about-text { font-size: 1.1rem; line-height: 1.6; color: var(--text-dark); font-weight: bold; }

.skills-interests-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.editorial-group h3 { font-family: 'Space Mono', monospace; font-size: 1.2rem; background: var(--text-dark); color: var(--fluor-light); padding: 5px 10px; margin-top: 0; display: inline-block;}
.editorial-list { list-style: square; padding-left: 20px; color: var(--text-dark); }
.editorial-list li { padding: 8px 0; font-weight: bold; border-bottom: 1px solid var(--border-harsh); }
.editorial-list li:hover { background-color: rgba(0,0,0,0.05); }

/* --- PROYECTOS --- */
.projects-grid { display: flex; flex-direction: column; gap: 40px; }
.project-card { background: var(--fluor-light); border: 2px solid var(--text-dark); display: flex; flex-direction: column; box-shadow: 8px 8px 0px rgba(0,0,0,0.15); transition: transform 0.2s, background 0.3s; cursor: pointer; }
.project-card:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0px rgba(0,0,0,0.2); }
.project-card.active { background: #e8e8e8; }
.project-header { padding: 25px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid transparent; transition: border 0.3s; }
.project-card.active .project-header { border-bottom: 2px dashed var(--border-harsh); }
.project-title { font-family: 'Space Mono', monospace; font-size: 1.3rem; color: var(--text-dark); text-decoration: none; font-weight: 700; margin: 0; text-transform: uppercase; }
.toggle-indicator { font-family: 'Space Mono', monospace; font-size: 0.9rem; font-weight: 700; color: var(--accent-creepy); padding: 5px 10px; border: 1px solid var(--accent-creepy); transition: all 0.3s; }
.project-card.active .toggle-indicator { background: var(--text-dark); color: var(--fluor-light); border-color: var(--text-dark); content: "[ - ] CERRAR"; }
.project-content { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; padding: 0 30px; }
.project-card.active .project-content { max-height: 1500px; opacity: 1; padding: 0 30px 30px 30px; margin-top: 20px; }
.project-author { font-size: 0.9rem; color: var(--carpet-brown); font-weight: bold; margin-bottom: 10px; }
.project-context { display: inline-block; background: var(--text-dark); color: var(--bg-backrooms); padding: 3px 8px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; }
.project-description { font-size: 0.95rem; line-height: 1.5; font-weight: bold; margin-bottom: 20px; }
.gallery-container { padding: 20px; background: rgba(0,0,0,0.05); overflow-x: auto; white-space: nowrap; border: 1px dashed var(--border-harsh); }
.gallery-track img { width: 250px; height: 250px; object-fit: cover; margin-right: 15px; border: 2px solid var(--text-dark); filter: grayscale(80%) sepia(30%) contrast(1.2); transition: filter 0.3s; }
.gallery-track img:hover { filter: grayscale(0%) sepia(0%); }

/* --- BLOQUES DE EJERCICIOS DE CÓDIGO --- */
.code-exercise-box { background: #111; color: var(--terminal-green); border: 2px solid var(--text-dark); padding: 25px; margin-bottom: 40px; font-family: 'Space Mono', monospace; box-shadow: 6px 6px 0px rgba(0,0,0,0.2); }
.code-exercise-box h3 { color: #fff; margin-top: 0; font-size: 1.2rem; border-bottom: 1px solid var(--terminal-green); padding-bottom: 8px; text-transform: uppercase; }
/* Soporte para códigos largos con scroll y formato pre */
.code-block { background: #000; padding: 15px; border: 1px dashed var(--terminal-green); overflow-x: auto; overflow-y: auto; max-height: 400px; font-size: 0.85rem; line-height: 1.4; color: var(--terminal-green); margin-top: 15px; }
.code-block pre { margin: 0; font-family: 'Courier New', Courier, monospace; white-space: pre-wrap; word-wrap: break-word; }

/* BOTONES Y CONTACTO */
.global-gallery-btn-container { text-align: center; margin: 50px 0; }
.btn-vintage { background-color: var(--text-dark); color: var(--fluor-light); font-family: 'Space Mono', monospace; font-size: 1.2rem; font-weight: 700; padding: 15px 30px; cursor: pointer; border: none; text-transform: uppercase; transition: background 0.2s; box-shadow: 5px 5px 0px rgba(0,0,0,0.3); display: inline-block; text-decoration: none;}
.btn-vintage:hover { background-color: var(--accent-creepy); transform: translate(-2px, -2px); box-shadow: 7px 7px 0px rgba(0,0,0,0.4); }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 15px; border: 2px solid var(--text-dark); background-color: rgba(0,0,0,0.03); color: var(--text-dark); font-family: 'Space Mono', monospace; font-size: 1rem; outline: none; transition: background 0.3s; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent-creepy); background-color: #fff; }
.social-links { text-align: center; margin-top: 40px; border-top: 2px dashed var(--border-harsh); padding-top: 20px; }
.social-links a { color: var(--text-dark); text-decoration: none; font-family: 'Space Mono', monospace; font-weight: bold; font-size: 1.1rem; margin: 0 15px; text-transform: uppercase; }
.social-links a:hover { color: var(--accent-creepy); text-decoration: underline; }

/* MODAL GLOBAL */
#global-gallery-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--bg-backrooms); z-index: 10000; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; overflow-y: auto; padding: 50px 20px; }
#global-gallery-modal.show { opacity: 1; visibility: visible; }
.modal-header { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; width: 100%; margin: 0 auto 40px auto; border-bottom: 3px solid var(--text-dark); padding-bottom: 20px;}
.modal-header h2 { margin: 0; border: none; padding:0; }
#close-modal { font-size: 2.5rem; color: var(--text-dark); cursor: pointer; font-weight: bold; }
#close-modal:hover { color: var(--accent-creepy); }
.modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; max-width: 1200px; width: 100%; margin: 0 auto; }
.modal-grid img { width: 100%; height: 350px; object-fit: cover; border: 2px solid var(--text-dark); filter: grayscale(100%); transition: filter 0.3s; }
.modal-grid img:hover { filter: grayscale(0%); }

/* LÍNEA DE TIEMPO */
.timeline { position: relative; margin: 40px 0 0 10px; padding-left: 30px; border-left: 2px dashed var(--text-dark); }
.timeline-item { position: relative; margin-bottom: 40px; }
.timeline-dot { position: absolute; left: -38px; top: 0; width: 14px; height: 14px; background-color: var(--fluor-light); border: 2px solid var(--text-dark); }
.timeline-item.active-status .timeline-dot { background-color: var(--accent-creepy); border-color: var(--accent-creepy); box-shadow: 0 0 10px var(--accent-creepy); animation: flickerLight 3s infinite; }
.timeline-content { background: var(--fluor-light); border: 2px solid var(--text-dark); padding: 20px 30px; box-shadow: 5px 5px 0px rgba(0,0,0,0.15); transition: transform 0.2s; }
.timeline-content:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0px rgba(0,0,0,0.2); }
.timeline-content h3 { margin-top: 0; font-size: 1.1rem; color: var(--text-dark); border-bottom: 1px dotted var(--border-harsh); padding-bottom: 10px; text-transform: uppercase; }
.timeline-item.active-status h3 { color: var(--accent-creepy); }
.timeline-list { list-style: none; padding-left: 0; margin-bottom: 0; }
.timeline-list li { position: relative; padding-left: 20px; margin-bottom: 10px; font-weight: bold; font-size: 0.95rem; color: var(--text-dark); }
.timeline-list li::before { content: '>'; position: absolute; left: 0; color: var(--accent-creepy); font-weight: bold; }

/* EASTER EGG */
.easter-egg-box { background: #050505; color: var(--terminal-green); padding: 20px; font-family: 'Space Mono', monospace; border: 2px dashed var(--text-dark); margin-top: 50px; cursor: crosshair; transition: background 0.3s; }
.easter-egg-box .reveal-text { opacity: 0; transition: opacity 0.1s; margin: 5px 0; font-size: 0.9rem;}
.easter-egg-box.triggered { background: #1a0505; }
.easter-egg-box.triggered .reveal-text.delay-1 { opacity: 1; transition-delay: 0.5s; }
.easter-egg-box.triggered .reveal-text.delay-2 { opacity: 1; transition-delay: 1.5s; }
.easter-egg-box.triggered .reveal-text.delay-3 { opacity: 1; transition-delay: 3s; color: #ff3333; animation: glitchText 0.1s infinite; font-weight: bold; font-size: 1.1rem; }

/* EFECTO PANTALLA ROJA */
#crash-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #3b0000; color: #ff3333; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 1.5rem; z-index: 10005; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.1s; text-align: center; }
#crash-screen.active { opacity: 1; visibility: visible; }
.crash-text { margin: 10px; animation: glitchText 0.1s infinite; text-shadow: 2px 2px 0px #000; letter-spacing: 2px;}

/* POPUP TERMINAL ROJA */
#red-terminal-popup { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(59, 0, 0, 0.95); z-index: 10006; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s; }
#red-terminal-popup.show { opacity: 1; visibility: visible; }
.red-terminal-box { border: 2px solid #ff3333; padding: 40px; background: #1a0000; box-shadow: 0 0 20px #ff3333; text-align: center; width: 90%; max-width: 600px; }
.red-terminal-box p { color: #ff3333; font-family: 'Space Mono', monospace; font-weight: bold; margin-bottom: 20px; font-size: 1.2rem; text-shadow: 2px 2px 0px #000; }
.red-terminal-input { width: 100%; background: transparent; border: 1px solid #ff3333; color: #ff3333; font-family: 'Space Mono', monospace; font-size: 1.5rem; padding: 15px; text-align: center; outline: none; text-transform: uppercase; }
.red-terminal-input:focus { box-shadow: 0 0 15px rgba(255, 51, 51, 0.5); }

/* EFECTO CARGA GLITCH */
.glitch-item { opacity: 0; visibility: hidden; }
.glitch-item.loaded { visibility: visible; animation: slowRetroLoad 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes slowRetroLoad { 0% { opacity: 0; transform: scaleY(0.1) skewX(20deg); filter: blur(5px) invert(1); } 15% { opacity: 0.8; transform: scaleY(1.2) skewX(-10deg); filter: blur(2px) hue-rotate(90deg); } 30% { opacity: 0.2; transform: translateX(15px); filter: contrast(300%); } 45% { opacity: 1; transform: translateX(-10px); filter: invert(0); } 60% { opacity: 0; transform: translateY(5px); filter: blur(3px); } 75% { opacity: 0.9; transform: skewX(5deg); filter: hue-rotate(180deg); } 90% { opacity: 0.5; transform: translateY(-2px); filter: none; } 100% { opacity: 1; transform: none; filter: none; } }

/* SECCIÓN EXPLORAR (INICIO) */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.explore-card { background: var(--fluor-light); border: 2px solid var(--text-dark); padding: 25px; box-shadow: 8px 8px 0px rgba(0,0,0,0.15); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: var(--text-dark); cursor: pointer; }
.explore-card:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0px rgba(0,0,0,0.2); border-color: var(--accent-creepy); }
.explore-card-label { font-size: 0.8rem; color: var(--accent-creepy); font-weight: bold; text-transform: uppercase; margin-bottom: 10px; display: block; }
.explore-card h3 { font-size: 1.3rem; margin: 0 0 15px 0; text-transform: uppercase; }
.explore-card p { font-size: 0.9rem; line-height: 1.5; margin-bottom: 20px; flex-grow: 1; }
.explore-card-link { font-weight: bold; text-transform: uppercase; color: var(--text-dark); display: inline-block; transition: color 0.2s; }
.explore-card:hover .explore-card-link { color: var(--accent-creepy); }
.explore-card.full-width { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 20px; }
@media (max-width: 768px) { .explore-card.full-width { flex-direction: column; align-items: flex-start; } }

/* MASCOTA VIRTUAL (CLIPPY) */
#assistant-container { position: fixed; bottom: -150px; right: 20px; z-index: 10010; display: flex; flex-direction: column; align-items: flex-end; transition: bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#assistant-container.show { bottom: 20px; }
.assistant-sprite { width: 90px; height: 90px; background-image: url("clippy/mascota virtual.png"); background-repeat: no-repeat; background-position: 0 0; mix-blend-mode: multiply; cursor: pointer; animation: chaoticSprite 0.7s steps(1) infinite, floatAssistant 4s ease-in-out infinite, corruptedSprite 2.5s infinite; transition: transform 0.2s; border: 1px dashed rgba(255,0,0,0); }
.assistant-sprite:hover { transform: scale(1.1); }
@keyframes chaoticSprite { 0% { background-position: 0px 0px; } 10% { background-position: -270px -90px; } 20% { background-position: -540px 0px; } 30% { background-position: -90px -180px; } 40% { background-position: -810px -90px; } 50% { background-position: -360px 0px; } 60% { background-position: -900px -180px; } 70% { background-position: -180px -90px; } 80% { background-position: -630px 0px; } 90% { background-position: -450px -180px; } 100% { background-position: 0px 0px; } }
@keyframes floatAssistant { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes corruptedSprite { 0%, 80% { filter: hue-rotate(0deg) contrast(1); transform: translateX(0) skew(0deg) scale(1); border-color: rgba(255,0,0,0); opacity: 1;} 82% { filter: hue-rotate(90deg) contrast(3) invert(0.5); transform: translateX(-15px) skew(25deg) scaleY(1.3); border-color: rgba(255,0,0,0.8); opacity: 0.8; } 84% { filter: hue-rotate(-180deg) contrast(4); transform: translateX(15px) skew(-25deg) scaleX(1.4); border-color: rgba(0,255,0,0.8); opacity: 0.5; } 86% { filter: hue-rotate(0deg) contrast(1); transform: translateX(0) skew(0deg) scale(1); border-color: rgba(255,0,0,0); opacity: 1;} 92% { filter: hue-rotate(45deg) contrast(2); transform: translate(5px, -5px) skew(15deg); border-color: rgba(0,0,255,0.8); opacity: 0.9; } 94% { filter: hue-rotate(0deg) contrast(1); transform: translateX(0) skew(0deg) scale(1); border-color: rgba(255,0,0,0); opacity: 1;} }

.assistant-bubble { position: relative; background-color: #ffffe1; border: 2px solid var(--text-dark); padding: 15px; border-radius: 8px; width: 250px; margin-bottom: 15px; box-shadow: 4px 4px 0px rgba(0,0,0,0.2); font-family: 'Space Mono', monospace; font-size: 0.85rem; color: var(--text-dark); opacity: 0; visibility: hidden; transform: scale(0.8) translateY(20px); transform-origin: bottom right; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.assistant-bubble::after { content: ''; position: absolute; bottom: -8px; right: 35px; width: 15px; height: 15px; background-color: #ffffe1; border-bottom: 2px solid var(--text-dark); border-right: 2px solid var(--text-dark); transform: rotate(45deg); }
.assistant-bubble.visible { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }
.assistant-options { margin-top: 15px; display: none; justify-content: space-between; }
.assistant-btn { background: var(--text-dark); color: var(--fluor-light); border: none; font-family: 'Space Mono', monospace; font-weight: bold; padding: 5px 15px; cursor: pointer; transition: background 0.2s; }
.assistant-btn:hover { background: var(--accent-creepy); }

/* REPRODUCTOR DE MÚSICA */
#music-player-container { position: fixed; bottom: 20px; left: 20px; z-index: 9999; display: flex; flex-direction: column; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; }
#music-player-container.show { opacity: 1; visibility: visible; }
.music-icon-wrapper { position: relative; }
#music-icon { width: 60px; cursor: pointer; filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.5)); transition: transform 0.2s; }
#music-icon:hover { transform: scale(1.1); }
#stop-music-btn { position: absolute; top: -5px; right: -5px; background: red; color: white; border: 2px solid black; font-family: 'Space Mono', monospace; font-weight: bold; font-size: 0.8rem; cursor: pointer; width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; box-shadow: 2px 2px 0px black; z-index: 10; }
#stop-music-btn:hover { background: darkred; transform: scale(1.1); }
#current-track-label { background: #000; color: var(--terminal-green); font-family: 'Space Mono', monospace; font-size: 0.7rem; padding: 4px 8px; margin-top: 10px; border: 1px solid var(--terminal-green); box-shadow: 2px 2px 0px rgba(0,0,0,0.5); text-transform: uppercase; }
#volume-slider { width: 100%; margin-top: 8px; cursor: pointer; accent-color: var(--terminal-green); }
.music-playing-anim { animation: musicBounce 1s infinite alternate; }
@keyframes musicBounce { 0% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg); } 50% { transform: scale(1.1) rotate(5deg); filter: hue-rotate(90deg); } 100% { transform: scale(1) rotate(-5deg); filter: hue-rotate(180deg); } }