:root {
    --neon-purple: #b300fe;
    --neon-electric: #8a2be2;
    --bg-dark: #050508;
    --panel-bg: rgba(10, 10, 15, 0.95);
    --text-light: #ffffff;
}

body {
    margin: 0; padding: 0; background-color: var(--bg-dark); color: var(--text-light);
    font-family: 'Avapore Regular', 'Cinzel', sans-serif; height: 100vh; overflow: hidden;
}

.logo-text {
    font-family: 'Cinzel', serif; font-size: 32px; margin: 0;
    color: var(--text-light); text-shadow: 0 0 15px var(--neon-purple), 0 0 30px var(--neon-electric);
}

/* --- HOME --- */
.home-view {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    height: 100vh; padding: 0 40px;
    background-image: linear-gradient(to bottom, rgba(5, 5, 8, 0.8), rgba(5, 5, 8, 0.95)), url('../img/bg-home.jpg');
    background-size: cover; background-position: center;
}

.home-cards { display: flex; gap: 30px; margin-top: 80px; margin-bottom: 40px; width: 100%; max-width: 1200px; }
.home-card { flex: 1; height: 350px; background: rgba(10,10,15,0.8); border: 2px solid rgba(179,0,254,0.3); border-radius: 12px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; overflow: hidden; }
.home-card h3 { font-family: 'Cinzel', serif; font-size: 32px; z-index: 2; pointer-events: none; }
.home-card::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background-size: cover; opacity: 0.4; z-index: 1; }
#card-tv::before { background-image: url('../img/tv-bg.jpg'); }
#card-movies::before { background-image: url('../img/movies-bg.jpg'); }
#card-series::before { background-image: url('../img/series-bg.jpg'); }

/* --- APP LAYOUT --- */
.app-layout { display: flex; height: 100vh; width: 100vw; }
.categories-sidebar { width: 300px; background: var(--panel-bg); border-right: 1px solid rgba(179, 0, 254, 0.3); display: flex; flex-direction: column; }
.content-area { flex: 1; display: flex; flex-direction: column; background: radial-gradient(circle at top, #111 0%, var(--bg-dark) 100%); }

/* --- COMPONENTES --- */
.dashboard-btn { background: rgba(179, 0, 254, 0.2); color: #fff; border: 1px solid var(--neon-purple); padding: 10px 20px; border-radius: 4px; cursor: pointer; }
.item-card { background: rgba(10, 10, 15, 0.6); border: 1px solid rgba(179, 0, 254, 0.2); border-radius: 6px; padding: 8px; cursor: pointer; }

/* --- LOGIN ARCADE --- */
.login-page { background: url('../img/bg-login.jpg'); background-size: cover; display: flex; justify-content: center; align-items: center; height: 100vh; }
.login-box { padding: 40px; background: rgba(10, 10, 15, 0.9); border: 2px solid var(--neon-purple); border-radius: 10px; box-shadow: 0 0 30px var(--neon-purple); }
.login-input { width: 100%; padding: 12px; margin: 10px 0; background: #111; border: 1px solid var(--neon-purple); color: white; border-radius: 4px; box-sizing: border-box; }

/* --- ADAPTACIÓN MÓVIL (ÚNICO BLOQUE RESPONSIVE) --- */
@media (max-width: 768px) {
    .app-layout { flex-direction: column; }
    
    /* Ocultar contenido por defecto en móvil */
    .content-area { display: none !important; width: 100% !important; height: 100vh; overflow-y: auto; }
    .categories-sidebar { width: 100% !important; height: 100vh; display: flex; }
    
    /* Clase de cambio de vista (activada por JS) */
    .show-content .content-area { display: flex !important; position: fixed; top: 0; left: 0; z-index: 100; }
    .show-content .categories-sidebar { display: none !important; }
    
    /* Ajustes visuales */
    .content-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .home-cards { flex-direction: column; margin-top: 20px; gap: 15px; }
    .home-card { height: 120px; }
    .search-box input { width: 100% !important; }
    
    .btn-mobile-back { display: block; background: #222; color: var(--neon-purple); padding: 15px; border: 1px solid var(--neon-purple); width: 100%; }
}
.btn-mobile-back { display: none; }