/* =======================================================
   YYGGEEKS ART® | TACTILE ENGINE & GLOBAL STYLES (V50)
   ======================================================= */

/* GLOBALS & UTILS */
body { font-family: 'Inter', sans-serif; background-color: #02040A; color: #F1F5F9; overflow-x: hidden; user-select: none; -webkit-user-select: none; }
.serif { font-family: 'Playfair Display', serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
.gold-gradient { background: linear-gradient(135deg, #E6C27A 0%, #FFEAB8 50%, #CFA551 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.glass-panel { background: rgba(10, 15, 25, 0.85); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.4s ease; overflow: visible !important; }
.glass-panel:hover { border-color: rgba(230,194,122,0.3); box-shadow: 0 15px 35px rgba(0,0,0,0.5), 0 0 20px rgba(230,194,122,0.1); }

/* PLACER TÁCTIL (TACTILE FEEDBACK) */
.btn-tactile { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.btn-tactile:hover { transform: scale(1.02); }
.btn-tactile:active { transform: scale(0.96); }

.btn-yyggeeks { background: linear-gradient(135deg, #E6C27A 0%, #CFA551 100%); position: relative; overflow: hidden; box-shadow: 0 10px 40px -10px rgba(230,194,122,0.8); }
.tech-input { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); color: #FFF; transition: all 0.3s; font-size: 13px; }
.tech-input:focus { outline: none; border-color: #E6C27A; box-shadow: 0 0 15px rgba(230,194,122,0.2); }
.blur-modal { backdrop-filter: blur(25px); z-index: 9999; }

/* ROUTER VIEWS */
#app-root { min-height: 80vh; transition: opacity 0.3s ease; }
.fade-out { opacity: 0; }
.fade-in { opacity: 1; }
.view-section { display: none; opacity: 0; transition: opacity 0.4s ease; }
.view-section.active { display: block; opacity: 1; animation: fadeIn 0.4s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* TACTILE PILLS UI */
.pill { padding: 0.6rem 1.2rem; border-radius: 0.5rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: bold; font-family: monospace; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.4); color: #94a3b8; transition: all 0.2s; white-space: nowrap; flex-shrink: 0; cursor: pointer; }
.pill:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.pill-limit.active { border-color: #E6C27A; background: rgba(230,194,122,0.1); color: #E6C27A; box-shadow: 0 0 15px rgba(230,194,122,0.2); }
.pill-arch.active { border-color: #38BDF8; background: rgba(56,189,248,0.1); color: #38BDF8; box-shadow: 0 0 15px rgba(56,189,248,0.2); }
.pill-ritmo.active { border-color: #A855F7; background: rgba(168,85,247,0.1); color: #A855F7; box-shadow: 0 0 15px rgba(168,85,247,0.2); }
.pill-ctx.active { border-color: #10B981; background: rgba(16,185,129,0.1); color: #10B981; box-shadow: 0 0 15px rgba(16,185,129,0.2); }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* MAPA NEURONAL DEVOPS */
.neural-node { width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1rem; z-index: 10; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.node-green { background: #02040A; border: 2px solid #10B981; color: #10B981; box-shadow: 0 0 15px rgba(16,185,129,0.3); }
.node-yellow { background: #02040A; border: 2px solid #F59E0B; color: #F59E0B; box-shadow: 0 0 15px rgba(245,158,11,0.3); animation: pulseYellow 2s infinite; }
.node-red { background: #02040A; border: 2px solid #EF4444; color: #EF4444; box-shadow: 0 0 15px rgba(239,68,68,0.5); animation: pulseRed 1s infinite; }
.node-purple { background: #02040A; border: 2px solid #A855F7; color: #A855F7; box-shadow: 0 0 20px rgba(168,85,247,0.6); animation: pulsePurple 1s infinite; }
.node-pending { background: #02040A; border: 2px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.3); }
.bridge-line { flex-grow: 1; height: 3px; background: rgba(255,255,255,0.1); position: relative; z-index: 1; margin: 0 -5px; min-width: 15px; transition: all 0.5s ease; }
.bridge-active { background: #10B981; box-shadow: 0 0 8px #10B981; }
.bridge-error { background: #EF4444; box-shadow: 0 0 8px #EF4444; animation: pulseRed 1s infinite; }

@keyframes pulseRed { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); } 70% { box-shadow: 0 0 0 15px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
@keyframes pulseYellow { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,0.6); } 70% { box-shadow: 0 0 0 15px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }
@keyframes pulsePurple { 0% { box-shadow: 0 0 0 0 rgba(168,85,247,0.8); } 70% { box-shadow: 0 0 0 20px rgba(168,85,247,0); } 100% { box-shadow: 0 0 0 0 rgba(168,85,247,0); } }

/* KANBAN Y EISENHOWER */
.eisenhower-quadrant { border: 1px solid rgba(255,255,255,0.1); border-radius: 1rem; padding: 1rem; background: rgba(0,0,0,0.4); transition: all 0.3s; }
.task-item { transition: all 0.5s ease; }
.task-item.completed span.task-text { text-decoration: line-through; opacity: 0.4; }
.habit-checkbox { appearance: none; width: 1.2rem; height: 1.2rem; border: 2px solid rgba(255,255,255,0.3); border-radius: 0.25rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; shrink-0; }
.habit-checkbox:checked { background-color: #10B981; border-color: #10B981; }
.habit-checkbox:checked::after { content: "✓"; color: #000; font-size: 0.8rem; font-weight: bold; }
.progress-bar-container { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #38BDF8, #10B981); transition: width 0.5s ease-out; }

/* ARTE RESUMEN (BARRAS DE PROGRESO ANIMADAS) */
.resumen-bar-container { width: 100%; height: 8px; background: rgba(255,255,255,0.05); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 5px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); }
.resumen-bar-fill { height: 100%; transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 999px; }

/* LÍNEA DE TIEMPO DEL CLIENTE */
.timeline-line::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.1); }
.timeline-point { position: relative; padding-left: 40px; margin-bottom: 1.5rem; transition: all 0.3s ease; }
.timeline-dot { position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; font-size: 10px; font-weight: bold; color: black; box-shadow: 0 0 10px rgba(0,0,0,0.5); }

/* SPACESHIP WAITING ROOM (UI INMERSIVA) */
.spaceship-modal { background: radial-gradient(circle at 50% 50%, #050b14 0%, #000000 100%); perspective: 1000px; }
.starfield { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0,0,0,0)), radial-gradient(2px 2px at 40px 70px, #ffffff, rgba(0,0,0,0)), radial-gradient(2px 2px at 50px 160px, #ffffff, rgba(0,0,0,0)); background-repeat: repeat; background-size: 200px 200px; animation: starfieldZoom 10s linear infinite; opacity: 0.3; z-index: 0; pointer-events: none; }
@keyframes starfieldZoom { 0% { transform: translateZ(-500px) scale(1); opacity: 0; } 50% { opacity: 0.5; } 100% { transform: translateZ(500px) scale(2); opacity: 0; } }
.hud-panel { background: rgba(10, 15, 25, 0.7); border: 1px solid rgba(56, 189, 248, 0.3); box-shadow: 0 0 40px rgba(56, 189, 248, 0.1), inset 0 0 20px rgba(0,0,0,0.8); backdrop-filter: blur(15px); border-radius: 1.5rem; position: relative; z-index: 10; }
.hud-circle { width: 150px; height: 150px; border-radius: 50%; border: 2px dashed rgba(56, 189, 248, 0.5); animation: spin 10s linear infinite; display: flex; align-items: center; justify-content: center; position: relative; }
.hud-circle::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 2px solid rgba(230, 194, 122, 0.5); border-left-color: transparent; animation: spinReverse 5s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spinReverse { 100% { transform: rotate(-360deg); } }

/* BOVEDA TV (NETFLIX STYLE) */
.boveda-hero { background: linear-gradient(0deg, #02040A 0%, rgba(2,4,10,0) 100%); }
.netflix-card { min-width: 250px; aspect-ratio: 16/9; border-radius: 0.75rem; overflow: hidden; position: relative; cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.1); }
.netflix-card:hover { transform: scale(1.05); z-index: 10; border-color: #E6C27A; box-shadow: 0 10px 30px rgba(230,194,122,0.3); }
.netflix-card img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; opacity: 0.7; }
.netflix-card:hover img { opacity: 1; transform: scale(1.1); }
.netflix-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; opacity: 0; transition: all 0.3s; }
.netflix-card:hover .netflix-overlay { opacity: 1; }

/* BUILDER & CINEMA */
.timeline-card { border-left: 2px solid #E6C27A; position: relative; transition: all 0.3s; overflow: visible !important; }
.timeline-card::before { content: ''; position: absolute; left: -6px; top: 20px; width: 10px; height: 10px; border-radius: 50%; background: #E6C27A; box-shadow: 0 0 10px #E6C27A; }
.local-dropzone { border: 1px dashed rgba(255,255,255,0.2); transition: all 0.3s; }
.local-dropzone:hover { border-color: #E6C27A; background: rgba(230,194,122,0.05); }
.cinema-screen { box-shadow: 0 0 40px rgba(230,194,122,0.1), inset 0 0 20px rgba(0,0,0,0.8); }
.render-thumb { border: 2px solid transparent; opacity: 0.5; transition: all 0.3s; cursor: pointer; }
.render-thumb:hover { opacity: 0.8; border-color: rgba(230,194,122,0.5); }
.render-thumb.active { opacity: 1; border-color: #E6C27A; box-shadow: 0 0 20px rgba(230,194,122,0.4); transform: scale(1.05); }

/* CONTROLES DE FORMULARIO E INPUTS */
.legal-check { appearance: none; background-color: #000; margin: 0; font: inherit; color: currentColor; width: 1.15em; height: 1.15em; border: 1px solid rgba(255,255,255,0.3); border-radius: 0.15em; display: grid; place-content: center; cursor: pointer; transition: all 0.2s; }
.legal-check::before { content: ""; width: 0.65em; height: 0.65em; transform: scale(0); box-shadow: inset 1em 1em #E6C27A; transform-origin: center; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transition: 120ms transform ease-in-out; }
.legal-check:checked { border-color: #E6C27A; }
.legal-check:checked::before { transform: scale(1); }
.mic-active { animation: pulseMic 1.5s infinite; color: #ef4444; border-color: #ef4444; background: rgba(239, 68, 68, 0.1); }

/* Z-INDEX ABSOLUTE ENSURANCES PARA MODALES GLOBALES */
#modal-opex { z-index: 6000 !important; }
#modal-security-auth { z-index: 7000 !important; }
#modal-spaceship { z-index: 8000 !important; }
#errorModal { z-index: 9000 !important; }
#toast { z-index: 9999 !important; }

/* AI Floating Bot */
.ai-assistant-btn { box-shadow: 0 0 20px rgba(230,194,122,0.4); animation: floatOrb 4s ease-in-out infinite; z-index: 9000; }
@keyframes floatOrb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); box-shadow: 0 0 30px rgba(230,194,122,0.6); } }
#chat-ia-modal { backdrop-filter: blur(15px); z-index: 9001; }