@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Space+Grotesk:wght@400;700;900&display=swap');

/* Variables */
:root { --bg-dark: #050505; --bg-panel: rgba(10, 15, 10, 0.85); --neon-green: #00ff41; --dark-green: #003b00; --text-main: #e0e0e0; --text-muted: #888; --alert-red: #ff3333; --nav-height: 70px; }

/* Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg-dark); color: var(--text-main); font-family: 'Space Grotesk', sans-serif; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; }
h1, h2, h3, .code-font { font-family: 'Fira Code', monospace; }

/* Canvas Background */
#matrix-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.15; pointer-events: none; }

/* Nav PC */
.desktop-nav { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height); background: rgba(5, 5, 5, 0.9); border-bottom: 1px solid var(--dark-green); backdrop-filter: blur(10px); z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 0 3rem; }
.nav-logo { color: #fff; font-size: 2rem; font-weight: 900; letter-spacing: -2px; text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); cursor: pointer; text-decoration: none; }
.nav-links { display: flex; gap: 20px; }
.nav-btn { background: transparent; color: var(--text-muted); border: 1px solid transparent; padding: 0.5rem 1rem; font-family: 'Fira Code', monospace; font-size: 0.9rem; cursor: pointer; border-radius: 8px; transition: all 0.3s; }
.nav-btn:hover { color: var(--neon-green); background: rgba(0, 255, 65, 0.05); }
.nav-btn.active { color: var(--neon-green); border-bottom: 2px solid var(--neon-green); border-radius: 0; background: transparent; }

/* Nav Móvil */
.mobile-header { display: none; position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height); background: rgba(5, 5, 5, 0.95); border-bottom: 1px solid var(--dark-green); backdrop-filter: blur(10px); z-index: 100; align-items: center; padding: 0 1.5rem; }
.menu-toggle-btn { background: transparent; border: none; color: #fff; font-size: 2rem; font-weight: 900; letter-spacing: -2px; cursor: pointer; text-shadow: 0 0 10px rgba(0, 255, 65, 0.5); font-family: 'Space Grotesk', sans-serif; }
.mobile-sidebar { position: fixed; top: 0; left: -100%; width: 280px; height: 100vh; background: rgba(5, 5, 5, 0.98); border-right: 1px solid var(--neon-green); z-index: 200; transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; padding: 2rem 1rem; box-shadow: 10px 0 30px rgba(0,0,0,0.8); }
.mobile-sidebar.open { left: 0; }
.close-sidebar { align-self: flex-end; background: transparent; border: none; color: var(--alert-red); font-size: 2rem; cursor: pointer; margin-bottom: 2rem; }

/* Layout */
.main-content { flex: 1; position: relative; z-index: 10; padding: calc(var(--nav-height) + 2rem) 2rem 2rem 2rem; max-width: 1000px; margin: 0 auto; width: 100%; }
.view-section { display: none; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; }
.view-section.active { display: block; opacity: 1; transform: translateY(0); }
.landing-view.active { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 200px); text-align: center; }

/* Textos */
.huge-title { font-size: 5rem; font-weight: 900; color: #fff; letter-spacing: -3px; margin-bottom: 1rem; text-shadow: 0px 0px 20px rgba(0, 255, 65, 0.4); }
.huge-title span { color: var(--neon-green); }
.landing-subtitle { font-size: 1.2rem; color: var(--text-muted); max-width: 600px; font-family: 'Fira Code', monospace; }
.section-title { font-size: 2.5rem; color: var(--neon-green); margin-bottom: 1rem; border-bottom: 2px solid var(--dark-green); padding-bottom: 10px; display: inline-block; }

/* UI Tutoriales */
.tutorial-card { background: var(--bg-panel); border: 1px solid var(--dark-green); border-radius: 10px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px;}
.card-header h3 { color: #fff; display: flex; align-items: center; gap: 10px;}
.card-header h3::before { content: '>'; color: var(--neon-green); }
.tutorial-info { background: rgba(0, 59, 0, 0.2); border-left: 3px solid var(--neon-green); padding: 15px; margin-bottom: 20px; font-size: 0.95rem; color: #ccc; }
.interactive-area { background: #000; border: 1px dashed var(--neon-green); padding: 1.5rem; border-radius: 5px; margin-top: 1rem; overflow-x: hidden; }

/* Controles */
.reset-btn { background: transparent; color: var(--neon-green); border: 1px solid var(--neon-green); padding: 8px 15px; font-family: 'Fira Code', monospace; font-size: 0.8rem; border-radius: 6px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 5px; }
.reset-btn:hover { background: rgba(0, 255, 65, 0.1); box-shadow: 0 0 15px rgba(0, 255, 204, 0.3); }
select, button.action-btn, input[type="checkbox"] { font-family: 'Fira Code', monospace; padding: 10px; margin: 5px 0; background: #111; color: var(--neon-green); border: 1px solid var(--dark-green); border-radius: 5px; }
button.action-btn { cursor: pointer; transition: background 0.3s; }
button.action-btn:hover { background: var(--dark-green); }

/* Notificaciones */
.result-box { margin-top: 15px; padding: 10px; font-family: 'Fira Code', monospace; min-height: 40px; display: none;}
.result-box.visible { display: block; }
.success { color: var(--neon-green); border-left: 3px solid var(--neon-green); padding-left: 10px; background: rgba(0,255,65,0.05);}
.error { color: var(--alert-red); border-left: 3px solid var(--alert-red); padding-left: 10px; background: rgba(255,51,51,0.05);}
#custom-toast { position: fixed; bottom: 30px; right: 30px; background: var(--bg-panel); border: 1px solid var(--neon-green); color: var(--neon-green); padding: 15px 25px; border-radius: 8px; font-family: 'Fira Code', monospace; font-size: 0.9rem; box-shadow: 0 0 20px rgba(0, 255, 65, 0.2); transform: translateX(150%); transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 1000; }
#custom-toast.show { transform: translateX(0); }

/* Detalles módulos */
#hdd-data { word-break: break-all; color: #555; letter-spacing: 2px; margin-bottom: 10px; line-height: 1.5;}
.checkbox-group label { display: block; margin-bottom: 15px; cursor: pointer; color: #aaa;}
.checkbox-group input { margin-right: 10px; accent-color: var(--neon-green); transform: scale(1.2);}

/* DLP PC */
.dlp-desktop { display: flex; align-items: center; background: #0a0a0a; padding: 20px; border-radius: 8px; margin-top: 20px;}
.dlp-packet-h { width: 40px; height: 30px; background: var(--alert-red); display: inline-block; transition: transform 0.8s ease-in-out; margin-left: 10px; border-radius: 4px; position: relative; z-index: 2;}
.dlp-firewall-h { width: 5px; height: 60px; background: var(--dark-green); display: inline-block; margin-left: 150px; transition: background 0.3s; position: relative; z-index: 1;}
.dlp-firewall-h.active { background: var(--neon-green); box-shadow: 0 0 15px var(--neon-green); }

/* DLP Móvil */
.dlp-mobile { display: none; flex-direction: column; align-items: center; background: #0a0a0a; padding: 20px; border-radius: 8px; margin-top: 20px; height: 250px; justify-content: space-between;}
.dlp-packet-v { width: 30px; height: 40px; background: var(--alert-red); border-radius: 4px; transition: transform 0.8s ease-in-out; position: relative; z-index: 2; margin: 0 auto;}
.dlp-firewall-v { height: 5px; width: 80px; background: var(--dark-green); transition: background 0.3s; position: relative; z-index: 1; margin-top: 60px;}
.dlp-firewall-v.active { background: var(--neon-green); box-shadow: 0 0 15px var(--neon-green); }

/* Footer */
footer { background: rgba(5, 5, 5, 0.9); border-top: 1px solid var(--dark-green); padding: 1.5rem; text-align: center; position: relative; z-index: 10; margin-top: auto; }
footer p { color: var(--text-muted); font-size: 0.9rem; font-family: 'Fira Code', monospace; }
footer span { color: var(--neon-green); }

/* Responsive */
@media (max-width: 768px) {
    .desktop-nav { display: none; } 
    .mobile-header { display: flex; } 
    .huge-title { font-size: 3rem; }
    .section-title { font-size: 1.8rem; }
    .card-header { flex-direction: column; align-items: flex-start; }
    .reset-btn { align-self: flex-end; margin-top: 10px; }
    button.action-btn { width: 100%; padding: 15px; margin-bottom: 10px;}
    .dlp-desktop { display: none; }
    .dlp-mobile { display: flex; }
}
/* Estilos para la teoría inyectada desde JSON */
.teoria-intro { margin-bottom: 15px; color: #aaa; line-height: 1.6; font-size: 1.05rem; }
.teoria-lista { margin-bottom: 25px; padding-left: 20px; color: #ccc; }
.teoria-lista li { margin-bottom: 10px; list-style-type: square; }
.teoria-lista li::marker { color: var(--neon-green); }