/* ============================================================
   StreamVault RETRO — Tema VHS / Arcade 80s / Club de Video
   Fuentes pixeladas, neón, scanlines CRT, estética Betamax
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Share+Tech+Mono&display=swap');

/* ── VARIABLES RETRO ─────────────────────────────────────── */
:root {
  --neon-pink:    #ff2d78;
  --neon-cyan:    #00fff7;
  --neon-yellow:  #ffe600;
  --neon-green:   #39ff14;
  --neon-purple:  #bf00ff;
  --neon-orange:  #ff6b00;

  --bg-dark:      #060608;
  --bg-card:      #0d0d14;
  --bg-card-hover:#141420;
  --bg-nav:       rgba(4,4,8,.97);

  --red:          var(--neon-pink);
  --red-hover:    #ff5599;
  --gold:         var(--neon-yellow);

  --text-primary: #d0d0e8;
  --text-muted:   #6060a0;
  --text-white:   #eeeeff;

  --border:       #1a1a3a;

  --glow-pink:   0 0 8px var(--neon-pink),  0 0 20px rgba(255,45,120,.4);
  --glow-cyan:   0 0 8px var(--neon-cyan),  0 0 20px rgba(0,255,247,.35);
  --glow-yellow: 0 0 8px var(--neon-yellow),0 0 18px rgba(255,230,0,.35);
  --glow-green:  0 0 8px var(--neon-green), 0 0 18px rgba(57,255,20,.3);

  --font-pixel:  'Press Start 2P', monospace;
  --font-vt323:  'VT323', monospace;
  --font-mono:   'Share Tech Mono', monospace;
  --font-main:   'Share Tech Mono', monospace;
  --font-display:'Press Start 2P', monospace;

  --radius:    0px;
  --radius-lg: 2px;
  --transition:all .15s ease;
  --shadow:    0 4px 40px rgba(0,0,0,.9);
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}

/* ── BODY + CRT ──────────────────────────────────────────── */
body {
  font-family: var(--font-mono);
  background: var(--bg-dark);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
/* Scanlines globales */
body::before {
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,transparent 0px,transparent 2px,rgba(0,0,0,.18) 2px,rgba(0,0,0,.18) 4px
  );
}
/* Viñeta CRT */
body::after {
  content:'';position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.65) 100%);
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;font-family:inherit}
input,select,textarea{font-family:inherit}
ul{list-style:none}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#06060e;border:1px solid #1a1a3a}
::-webkit-scrollbar-thumb{background:var(--neon-cyan);box-shadow:var(--glow-cyan)}

/* ── ANIMACIONES ─────────────────────────────────────────── */
@keyframes blink     {0%,49%,100%{opacity:1}50%,99%{opacity:0}}
@keyframes flicker   {0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}20%,24%,55%{opacity:.4}}
@keyframes neonPulse {0%,100%{text-shadow:var(--glow-cyan)}50%{text-shadow:0 0 4px var(--neon-cyan),0 0 8px rgba(0,255,247,.2)}}
@keyframes scanMove  {0%{top:-10%}100%{top:110%}}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes slideIn   {from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut  {from{transform:translateX(0);opacity:1}to{transform:translateX(110%);opacity:0}}

/* ── TICKER MARQUEE ──────────────────────────────────────── */
.retro-ticker {
  position:fixed;top:58px;left:0;right:0;z-index:999;
  background:var(--neon-pink);overflow:hidden;height:22px;
  display:flex;align-items:center;
}
.retro-ticker-inner {
  display:flex;white-space:nowrap;
  animation:marqueeScroll 35s linear infinite;
  font-family:var(--font-pixel);font-size:.45rem;color:#000;letter-spacing:1px;
}
.retro-ticker-inner span{padding:0 2.5rem}
.retro-ticker-inner span::before{content:'★ '}

/* ── NAVBAR ──────────────────────────────────────────────── */
#navbar {
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;gap:1.5rem;
  padding:.6rem 3%;
  background:var(--bg-dark);
  border-bottom:2px solid var(--neon-cyan);
  box-shadow:0 2px 20px rgba(0,255,247,.25),inset 0 -1px 0 rgba(0,255,247,.1);
  transition:background .3s;
  height:58px;
}
#navbar.scrolled{
  background:var(--bg-nav);
  box-shadow:0 2px 30px rgba(0,255,247,.3),inset 0 -1px 0 var(--neon-cyan);
}
.nav-logo{
  font-family:var(--font-pixel);font-size:.85rem;
  color:var(--neon-cyan);letter-spacing:1px;
  flex-shrink:0;text-shadow:var(--glow-cyan);
  animation:neonPulse 3s ease-in-out infinite;
  display:flex;align-items:center;gap:.5rem;
}
.nav-logo span{color:var(--neon-pink);text-shadow:var(--glow-pink)}
.nav-logo img{max-height:36px;max-width:150px;object-fit:contain}

.nav-links{display:flex;gap:.75rem}
.nav-links a{
  font-family:var(--font-pixel);font-size:.45rem;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;
  padding:.35rem .55rem;border:1px solid transparent;
  transition:var(--transition);position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;
  height:2px;background:var(--neon-cyan);transform:scaleX(0);transition:transform .2s;
}
.nav-links a:hover,.nav-links a.active{
  color:var(--neon-cyan);text-shadow:var(--glow-cyan);
  border-color:rgba(0,255,247,.2);
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}

.nav-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}

.nav-credits{
  display:flex;align-items:center;gap:.4rem;
  background:rgba(255,230,0,.07);
  border:1px solid rgba(255,230,0,.3);
  padding:.3rem .6rem;
  font-family:var(--font-pixel);font-size:.42rem;
  color:var(--neon-yellow);text-shadow:var(--glow-yellow);letter-spacing:.5px;
}

.nav-user{position:relative}
.nav-user-btn{
  display:flex;align-items:center;gap:.5rem;
  background:rgba(0,255,247,.05);
  border:1px solid rgba(0,255,247,.25);
  padding:.3rem .65rem;cursor:pointer;transition:var(--transition);
}
.nav-user-btn:hover{
  background:rgba(0,255,247,.1);border-color:var(--neon-cyan);
  box-shadow:var(--glow-cyan);
}
.nav-user-initials{
  width:24px;height:24px;background:var(--neon-pink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-pixel);font-size:.45rem;color:#000;flex-shrink:0;
}
.nav-user-name{
  font-family:var(--font-pixel);font-size:.42rem;color:var(--neon-cyan);
  max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.5px;
}
.nav-user-chevron{font-size:.5rem;color:rgba(0,255,247,.45);transition:transform .2s}
.nav-user:hover .nav-user-chevron{transform:rotate(180deg)}

.nav-dropdown{
  position:absolute;top:100%;right:0;
  background:#08080f;
  border:1px solid var(--neon-cyan);
  box-shadow:var(--glow-cyan),inset 0 0 20px rgba(0,255,247,.03);
  min-width:210px;padding:.4rem 0;display:none;
}
.nav-user:hover .nav-dropdown{display:block}
.nav-user::after{
  content:'';position:absolute;top:100%;left:0;right:0;
  height:6px;background:transparent;
}
.nav-dropdown a{
  display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;
  font-family:var(--font-pixel);font-size:.38rem;
  color:var(--text-primary);letter-spacing:.5px;transition:var(--transition);
}
.nav-dropdown a:hover{
  background:rgba(0,255,247,.08);color:var(--neon-cyan);
  text-shadow:var(--glow-cyan);padding-left:1.4rem;
}
.nav-dropdown hr{border-color:#1a1a3a;margin:.3rem 0}

.btn-login-nav{
  background:var(--neon-pink);color:#000;
  padding:.4rem .9rem;
  font-family:var(--font-pixel);font-size:.42rem;
  font-weight:700;letter-spacing:1px;border:none;
  box-shadow:var(--glow-pink);transition:var(--transition);
}
.btn-login-nav:hover{background:#fff;color:var(--neon-pink)}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{
  position:relative;height:90vh;min-height:500px;
  display:flex;align-items:flex-end;padding-bottom:4rem;
  overflow:hidden;
  margin-top:80px;
}
/* Línea de scan viajera */
.hero::before{
  content:'';position:absolute;left:0;right:0;top:-10%;
  height:8%;pointer-events:none;z-index:3;
  background:linear-gradient(
    to bottom,transparent,rgba(0,255,247,.04) 40%,rgba(0,255,247,.07) 50%,rgba(0,255,247,.04) 60%,transparent
  );
  animation:scanMove 7s linear infinite;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  filter:saturate(.5) brightness(.6) contrast(1.1) sepia(.2);
  transform:scale(1.02);transition:transform 8s ease,filter 1s ease;
}
.hero:hover .hero-bg{transform:scale(1);filter:saturate(.65) brightness(.65) contrast(1.1) sepia(.12)}
.hero-gradient{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(6,6,8,1) 0%,rgba(6,6,8,.65) 50%,transparent 85%),
    linear-gradient(to top,rgba(6,6,8,1) 0%,transparent 60%);
  z-index:1;
}
.hero-content{
  position:relative;z-index:4;
  padding:0 4%;max-width:640px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--neon-pink);color:#000;
  font-family:var(--font-pixel);font-size:.42rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  padding:.35rem .8rem;margin-bottom:1rem;
  box-shadow:var(--glow-pink);animation:flicker 5s infinite;
}
.hero-title{
  font-family:var(--font-pixel);
  font-size:clamp(.9rem,2.8vw,1.9rem);font-weight:700;line-height:1.4;
  color:var(--neon-cyan);text-shadow:var(--glow-cyan);
  margin-bottom:1rem;letter-spacing:2px;
}
.hero-meta{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.hero-meta span{font-family:var(--font-mono);font-size:.82rem;color:rgba(200,200,220,.8);display:flex;align-items:center;gap:.3rem}
.hero-meta .rating{color:var(--neon-yellow);text-shadow:var(--glow-yellow);font-weight:700}
.hero-desc{
  font-family:var(--font-mono);font-size:.88rem;line-height:1.65;
  color:rgba(180,180,210,.8);margin-bottom:1.5rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* ── BOTONES ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.72rem 1.5rem;
  font-family:var(--font-pixel);font-size:.45rem;letter-spacing:1px;
  text-transform:uppercase;transition:var(--transition);
  cursor:pointer;border:2px solid transparent;
}
.btn-play{background:var(--neon-cyan);color:#000;border-color:var(--neon-cyan);box-shadow:var(--glow-cyan)}
.btn-play:hover{background:#000;color:var(--neon-cyan)}
.btn-info{background:transparent;color:var(--neon-pink);border-color:var(--neon-pink);box-shadow:var(--glow-pink)}
.btn-info:hover{background:var(--neon-pink);color:#000}
.btn-red{background:var(--neon-pink);color:#000;border-color:var(--neon-pink);box-shadow:var(--glow-pink)}
.btn-red:hover{background:#000;color:var(--neon-pink)}
.btn-outline{background:transparent;color:var(--neon-cyan);border-color:var(--neon-cyan)}
.btn-outline:hover{background:var(--neon-cyan);color:#000;box-shadow:var(--glow-cyan)}
.btn-sm{padding:.45rem .9rem;font-size:.38rem}
.btn-xs{padding:.28rem .55rem;font-size:.34rem}
.btn-block{width:100%;justify-content:center}

/* ── SECCIONES ───────────────────────────────────────────── */
.content-sections{padding:2rem 0 4rem}
.content-section{margin-bottom:3rem;position:relative}
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4%;margin-bottom:1rem;
}
.section-title{
  font-family:var(--font-pixel);font-size:.6rem;
  color:var(--neon-yellow);text-shadow:var(--glow-yellow);
  letter-spacing:2px;text-transform:uppercase;
  padding-left:.85rem;border-left:3px solid var(--neon-yellow);
}
.section-title span{color:var(--neon-pink);text-shadow:var(--glow-pink)}
.section-see-all{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,45,120,.08);border:1px solid var(--neon-pink);
  color:var(--neon-pink);
  font-family:var(--font-pixel);font-size:.35rem;
  font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:.38rem .85rem;text-decoration:none;
  box-shadow:0 0 6px rgba(255,45,120,.2);transition:all .2s;
}
.section-see-all:hover{
  background:var(--neon-pink);color:#000;
  box-shadow:var(--glow-pink);transform:translateY(-1px);
}

/* ── CARRUSEL ────────────────────────────────────────────── */
.carousel-wrapper{position:relative;overflow:hidden;padding:0 4%}
.carousel-track{
  display:flex;gap:.4rem;
  overflow-x:hidden;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;will-change:scroll-position;
}
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  background:rgba(0,0,0,.88);border:1px solid var(--neon-cyan);
  color:var(--neon-cyan);width:40px;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;cursor:pointer;transition:var(--transition);
  opacity:0;text-shadow:var(--glow-cyan);
}
.carousel-wrapper:hover .carousel-btn{opacity:1}
.carousel-btn:hover{background:rgba(0,255,247,.15);box-shadow:inset 0 0 10px rgba(0,255,247,.1)}
.carousel-btn.prev{left:0}
.carousel-btn.next{right:0}

/* ── CARDS ───────────────────────────────────────────────── */
.content-card{
  flex:0 0 calc(20% - .32rem);min-width:150px;max-width:260px;
  cursor:pointer;transition:transform .25s,z-index 0s .25s;
  position:relative;border:1px solid #1a1a2e;
}
.content-card:hover{
  transform:scale(1.06);z-index:5;
  border-color:var(--neon-cyan);box-shadow:var(--glow-cyan);
  transition:transform .25s,z-index 0s;
}
.card-poster{
  aspect-ratio:2/3;position:relative;
  background:#0a0a14;overflow:hidden;
}
.card-poster::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom,transparent 0px,transparent 3px,rgba(0,0,0,.1) 3px,rgba(0,0,0,.1) 4px
  );
  pointer-events:none;z-index:1;
}
.card-poster img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.75) contrast(1.05);transition:filter .3s;
}
.content-card:hover .card-poster img{filter:saturate(1.1) contrast(1.1) brightness(1.05)}
.card-poster-placeholder{
  width:100%;height:100%;
  background:linear-gradient(135deg,#050510,#0a0a20,#050510);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;padding:1rem;text-align:center;border:1px solid #1a1a3a;
}
.card-poster-placeholder .movie-icon{font-size:2rem;opacity:.5;filter:drop-shadow(0 0 6px var(--neon-cyan))}
.card-poster-placeholder .movie-title-mini{
  font-family:var(--font-pixel);font-size:.35rem;
  color:var(--neon-cyan);opacity:.7;line-height:1.5;text-shadow:var(--glow-cyan);
}
.card-hover-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.4) 50%,transparent 100%);
  opacity:0;transition:opacity .25s;
  display:flex;flex-direction:column;justify-content:flex-end;padding:.7rem;z-index:2;
}
.content-card:hover .card-hover-overlay{opacity:1}
.card-overlay-title{
  font-family:var(--font-pixel);font-size:.38rem;font-weight:700;
  color:var(--neon-cyan);text-shadow:var(--glow-cyan);
  margin-bottom:.35rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-overlay-meta{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.7rem;color:rgba(200,255,200,.7);
}
.card-overlay-actions{display:flex;gap:.35rem;margin-top:.5rem}
.card-action-btn{
  width:28px;height:28px;
  background:rgba(0,0,0,.75);border:1px solid var(--neon-cyan);
  color:var(--neon-cyan);display:flex;align-items:center;justify-content:center;
  font-size:.7rem;cursor:pointer;transition:var(--transition);text-shadow:var(--glow-cyan);
}
.card-action-btn:hover{background:var(--neon-cyan);color:#000;box-shadow:var(--glow-cyan)}
.card-action-btn.play-btn{
  background:var(--neon-pink);color:#000;
  border-color:var(--neon-pink);box-shadow:var(--glow-pink);
}
.card-action-btn.play-btn:hover{background:#fff;box-shadow:0 0 12px #fff}

/* ── MODAL DETALLE ───────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.88);
  display:flex;align-items:flex-start;justify-content:center;
  padding:5rem 1rem 2rem;overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal-box{
  background:#07070f;border:1px solid var(--neon-cyan);
  box-shadow:var(--glow-cyan),inset 0 0 40px rgba(0,255,247,.03);
  max-width:860px;width:100%;position:relative;overflow:hidden;
  transform:translateY(20px);transition:transform .25s;
}
.modal-overlay.active .modal-box{transform:translateY(0)}
.modal-banner{position:relative;aspect-ratio:16/9;background:#050510;overflow:hidden}
.modal-banner img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.55) brightness(.65) sepia(.12);
}
.modal-banner::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,transparent 0px,transparent 3px,rgba(0,0,0,.1) 3px,rgba(0,0,0,.1) 4px
  );
}
.modal-banner-grad{
  position:absolute;bottom:0;left:0;right:0;height:55%;
  background:linear-gradient(to top,#07070f,transparent);z-index:2;
}
.modal-close{
  position:absolute;top:.7rem;right:.7rem;z-index:10;
  width:32px;height:32px;background:rgba(0,0,0,.8);
  border:1px solid var(--neon-pink);color:var(--neon-pink);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;cursor:pointer;transition:var(--transition);text-shadow:var(--glow-pink);
}
.modal-close:hover{background:var(--neon-pink);color:#000;box-shadow:var(--glow-pink)}
.modal-body{padding:1.25rem 1.75rem 2rem}
.modal-title{
  font-family:var(--font-pixel);font-size:.85rem;
  color:var(--neon-cyan);text-shadow:var(--glow-cyan);
  margin-bottom:.6rem;letter-spacing:2px;line-height:1.5;
}
.modal-meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem}
.modal-meta span{font-family:var(--font-mono);font-size:.82rem;color:rgba(200,200,220,.8)}
.modal-meta .tag{
  background:rgba(0,255,247,.07);border:1px solid rgba(0,255,247,.25);
  padding:.15rem .5rem;font-family:var(--font-pixel);font-size:.32rem;color:var(--neon-cyan);
}
.modal-desc{
  font-family:var(--font-mono);font-size:.88rem;line-height:1.7;
  color:rgba(190,190,220,.8);margin-bottom:1.5rem;
}
.modal-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-bottom:1.5rem}
.credits-info{
  background:rgba(255,230,0,.05);border:1px solid rgba(255,230,0,.2);
  padding:.75rem 1rem;display:flex;align-items:center;gap:.75rem;
}
.credits-info .icon{font-size:1.3rem}
.credits-info-text p{font-family:var(--font-mono);font-size:.78rem;color:rgba(200,200,180,.65)}
.credits-info-text strong{color:var(--neon-yellow);font-size:.9rem;text-shadow:var(--glow-yellow)}

/* ── REPRODUCTOR ─────────────────────────────────────────── */
.player-container{position:fixed;inset:0;z-index:9999;background:#000;display:none;flex-direction:column}
.player-container.active{display:flex}
.player-video-wrap{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
#mainVideo{width:100%;height:100%;object-fit:contain;background:#000}
.player-video-wrap::before{
  content:'';position:absolute;inset:0;z-index:10;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,transparent 0px,transparent 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 4px
  );
}
.player-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,transparent 20%,transparent 70%,rgba(0,0,0,.9) 100%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.player-container:hover .player-overlay,.player-container:hover .player-controls,.player-container:hover .player-top-bar{opacity:1}
.player-container:hover .player-controls,.player-container:hover .player-top-bar{pointer-events:all}
.player-top-bar{
  position:absolute;top:0;left:0;right:0;padding:1.25rem 2rem;
  display:flex;align-items:center;gap:1rem;
  opacity:0;pointer-events:none;transition:opacity .3s;z-index:20;
  background:linear-gradient(to bottom,rgba(0,0,0,.82),transparent);
}
.player-back-btn{
  background:none;color:var(--neon-cyan);
  font-family:var(--font-pixel);font-size:.45rem;
  display:flex;align-items:center;gap:.5rem;
  padding:.3rem;border:none;cursor:pointer;
  text-shadow:var(--glow-cyan);letter-spacing:1px;
}
.player-back-btn:hover{opacity:.7}
.player-video-title{font-family:var(--font-pixel);font-size:.5rem;color:var(--neon-yellow);text-shadow:var(--glow-yellow);letter-spacing:1px}
.player-controls{
  position:absolute;bottom:0;left:0;right:0;padding:.5rem 2rem 1.5rem;
  opacity:0;pointer-events:none;transition:opacity .3s;z-index:20;
  background:linear-gradient(to top,rgba(0,0,0,.88),transparent);
}
.player-progress-wrap{position:relative;height:4px;margin-bottom:.75rem;cursor:pointer}
.player-progress-bg{
  position:absolute;inset:0;top:50%;transform:translateY(-50%);
  height:3px;background:rgba(0,255,247,.2);transition:height .15s;
}
.player-progress-wrap:hover .player-progress-bg{height:5px}
.player-progress-fill{height:100%;background:var(--neon-pink);box-shadow:var(--glow-pink)}
.player-progress-buffered{position:absolute;top:0;left:0;height:100%;background:rgba(0,255,247,.2);pointer-events:none}
.player-thumb{
  position:absolute;top:50%;width:14px;height:14px;
  background:var(--neon-cyan);box-shadow:var(--glow-cyan);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .15s;
}
.player-progress-wrap:hover .player-thumb{opacity:1}
.player-bottom-row{display:flex;align-items:center;gap:.75rem}
.player-btn{
  background:none;color:var(--neon-cyan);border:none;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;
  padding:.3rem;cursor:pointer;transition:var(--transition);text-shadow:var(--glow-cyan);
}
.player-btn:hover{color:#fff;text-shadow:0 0 10px #fff}
.player-btn.large{font-size:1.5rem}
.player-time{
  font-family:var(--font-mono);font-size:.82rem;
  color:var(--neon-cyan);text-shadow:var(--glow-cyan);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.player-time .separator{color:rgba(0,255,247,.35);margin:0 .1rem}
.player-volume-wrap{display:flex;align-items:center;gap:.4rem}
.player-volume-slider{
  -webkit-appearance:none;appearance:none;
  width:70px;height:3px;background:rgba(0,255,247,.25);outline:none;cursor:pointer;
}
.player-volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;
  background:var(--neon-cyan);box-shadow:var(--glow-cyan);
}
.player-spacer{flex:1}
.player-quality{
  font-family:var(--font-pixel);font-size:.38rem;color:var(--neon-yellow);
  background:rgba(255,230,0,.08);border:1px solid rgba(255,230,0,.35);
  padding:.2rem .5rem;cursor:pointer;text-shadow:var(--glow-yellow);letter-spacing:1px;
}
.preview-warning{
  position:absolute;inset:0;z-index:30;background:rgba(0,0,0,.92);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem;
}
.preview-warning.active{display:flex}
.preview-warning h2{
  font-family:var(--font-pixel);font-size:.85rem;
  color:var(--neon-cyan);text-shadow:var(--glow-cyan);
  margin-bottom:.6rem;letter-spacing:2px;line-height:1.7;
  animation:flicker 4s infinite;
}
.preview-warning p{font-family:var(--font-mono);color:rgba(200,200,220,.8);margin-bottom:1.5rem;max-width:400px}
.preview-warning .credits-price{
  font-family:var(--font-pixel);font-size:1rem;
  color:var(--neon-yellow);text-shadow:var(--glow-yellow);font-weight:700;margin-bottom:1rem;
}
.preview-warning .btn-group{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}

/* ── AUTH ────────────────────────────────────────────────── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);position:relative}
.auth-bg{position:fixed;inset:0;z-index:-1;background:url('/streamvault/public/images/auth-bg.jpg') center/cover no-repeat;filter:brightness(.2) saturate(.3) sepia(.4)}
.auth-box{
  background:rgba(4,4,10,.94);border:1px solid var(--neon-cyan);
  box-shadow:var(--glow-cyan),inset 0 0 40px rgba(0,255,247,.03);
  padding:2.5rem;width:100%;max-width:440px;
}
.auth-logo{
  font-family:var(--font-pixel);font-size:.9rem;color:var(--neon-cyan);
  text-align:center;margin-bottom:2rem;letter-spacing:2px;
  text-shadow:var(--glow-cyan);animation:neonPulse 3s ease-in-out infinite;
}
.auth-title{
  font-family:var(--font-pixel);font-size:.65rem;font-weight:700;
  color:var(--neon-yellow);text-shadow:var(--glow-yellow);
  margin-bottom:1.5rem;letter-spacing:1px;
}
.form-group{margin-bottom:1rem}
.form-group label{
  display:block;font-family:var(--font-pixel);font-size:.37rem;
  color:var(--neon-cyan);margin-bottom:.4rem;letter-spacing:1px;text-shadow:var(--glow-cyan);
}
.form-control{
  width:100%;padding:.72rem 1rem;
  background:rgba(0,255,247,.04);border:1px solid rgba(0,255,247,.25);
  color:var(--text-primary);font-family:var(--font-mono);font-size:.9rem;transition:var(--transition);
}
.form-control:focus{
  outline:none;border-color:var(--neon-cyan);
  background:rgba(0,255,247,.07);box-shadow:0 0 8px rgba(0,255,247,.2);
}
.form-control::placeholder{color:rgba(100,100,150,.55)}
.form-error{font-family:var(--font-mono);font-size:.78rem;color:var(--neon-pink);margin-top:.25rem}
.auth-divider{
  display:flex;align-items:center;gap:.75rem;margin:1.2rem 0;
  font-family:var(--font-pixel);font-size:.35rem;color:rgba(100,100,150,.55);
}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(0,255,247,.12)}

/* ── CRÉDITOS ────────────────────────────────────────────── */
.credits-page{padding-top:80px;min-height:100vh}
.credits-hero{
  background:linear-gradient(135deg,#050510,#0a0518,#050510);
  border-bottom:1px solid rgba(255,230,0,.18);
  padding:3rem 4%;text-align:center;position:relative;overflow:hidden;
}
.credits-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(0,0,0,.1) 3px,rgba(0,0,0,.1) 4px);
}
.credits-balance{font-family:var(--font-pixel);font-size:.45rem;color:rgba(255,230,0,.55);margin-bottom:.5rem;letter-spacing:2px}
.credits-amount{
  font-family:var(--font-pixel);font-size:clamp(1.8rem,8vw,3.5rem);
  color:var(--neon-yellow);line-height:1;text-shadow:var(--glow-yellow);
  animation:neonPulse 2s ease-in-out infinite;
}
.credits-label{font-family:var(--font-mono);font-size:.85rem;color:rgba(255,230,0,.45);margin-top:.3rem}
.packages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;padding:3rem 4%}
.package-card{
  background:#07070f;border:1px solid #1a1a3a;
  padding:2rem 1.5rem;text-align:center;transition:var(--transition);position:relative;overflow:hidden;
}
.package-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(0,0,0,.07) 3px,rgba(0,0,0,.07) 4px);
}
.package-card:hover,.package-card.popular{border-color:var(--neon-yellow);box-shadow:var(--glow-yellow)}
.package-card.popular::before{
  content:'TOP PICK';
  position:absolute;top:12px;right:-22px;
  background:var(--neon-yellow);color:#000;
  font-family:var(--font-pixel);font-size:.35rem;
  padding:.2rem 2rem;transform:rotate(45deg);letter-spacing:1px;z-index:1;
}
.package-name{font-family:var(--font-pixel);font-size:.6rem;color:var(--neon-cyan);text-shadow:var(--glow-cyan);margin-bottom:.75rem;letter-spacing:1px}
.package-credits{font-family:var(--font-pixel);font-size:1.8rem;color:var(--neon-yellow);text-shadow:var(--glow-yellow);line-height:1}
.package-bonus{font-family:var(--font-mono);font-size:.8rem;color:var(--neon-green);text-shadow:var(--glow-green);margin-top:.2rem}
.package-price{font-family:var(--font-pixel);font-size:.85rem;color:#fff;margin:1rem 0}
.package-desc{font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);margin-bottom:1.5rem}

/* ── ADMIN ───────────────────────────────────────────────── */
.admin-layout{display:flex;min-height:100vh}
.admin-sidebar{
  width:260px;background:#05050d;flex-shrink:0;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(0,255,247,.18);
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.admin-sidebar-logo{
  padding:1.25rem;font-family:var(--font-pixel);font-size:.65rem;
  color:var(--neon-cyan);text-shadow:var(--glow-cyan);
  border-bottom:1px solid rgba(0,255,247,.18);letter-spacing:1px;
  animation:neonPulse 3s ease-in-out infinite;
}
.admin-sidebar-logo span{color:var(--text-muted);font-size:.5rem;display:block;font-family:var(--font-mono);margin-top:.2rem;animation:none;text-shadow:none}
.admin-nav{padding:.75rem 0}
.admin-nav-group{margin-bottom:1.25rem}
.admin-nav-label{
  padding:.3rem 1rem;font-family:var(--font-pixel);font-size:.35rem;
  text-transform:uppercase;letter-spacing:2px;color:rgba(0,255,247,.3);
}
.admin-nav a{
  display:flex;align-items:center;gap:.65rem;padding:.65rem 1.25rem;
  font-family:var(--font-mono);font-size:.82rem;color:rgba(200,200,230,.55);transition:var(--transition);
}
.admin-nav a:hover,.admin-nav a.active{
  background:rgba(0,255,247,.06);color:var(--neon-cyan);
  text-shadow:0 0 6px rgba(0,255,247,.35);border-left:2px solid var(--neon-cyan);
}
.admin-nav a .icon{width:18px;text-align:center;opacity:.7}
.admin-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.admin-topbar{
  background:#07070f;border-bottom:1px solid rgba(0,255,247,.12);
  padding:.85rem 2rem;display:flex;align-items:center;gap:1rem;
}
.admin-page-title{font-family:var(--font-pixel);font-size:.6rem;color:var(--neon-yellow);text-shadow:var(--glow-yellow);letter-spacing:1px}
.admin-topbar-right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.admin-content{padding:1.5rem;overflow-y:auto}
.admin-card{background:#07070f;border:1px solid #1a1a3a;padding:1.25rem}
.admin-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.admin-card-title{font-family:var(--font-pixel);font-size:.45rem;color:var(--neon-cyan);text-shadow:var(--glow-cyan);letter-spacing:1px}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{background:#07070f;border:1px solid #1a1a3a;padding:1.25rem;display:flex;align-items:flex-start;gap:1rem}
.stat-card-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;border:1px solid}
.stat-card-icon.red  {border-color:rgba(255,45,120,.35);box-shadow:0 0 8px rgba(255,45,120,.15)}
.stat-card-icon.gold {border-color:rgba(255,230,0,.35); box-shadow:0 0 8px rgba(255,230,0,.15)}
.stat-card-icon.green{border-color:rgba(57,255,20,.35); box-shadow:0 0 8px rgba(57,255,20,.15)}
.stat-card-icon.blue {border-color:rgba(0,255,247,.35); box-shadow:0 0 8px rgba(0,255,247,.15)}
.stat-card-value{font-family:var(--font-pixel);font-size:1.1rem;color:var(--neon-yellow);text-shadow:var(--glow-yellow);line-height:1}
.stat-card-label{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);margin-top:.3rem}
.data-table{width:100%;border-collapse:collapse}
.data-table th{
  padding:.65rem 1rem;text-align:left;
  font-family:var(--font-pixel);font-size:.32rem;text-transform:uppercase;letter-spacing:1px;
  color:var(--neon-cyan);border-bottom:1px solid rgba(0,255,247,.18);
}
.data-table td{
  padding:.72rem 1rem;font-family:var(--font-mono);font-size:.82rem;
  border-bottom:1px solid rgba(255,255,255,.04);color:var(--text-primary);vertical-align:middle;
}
.data-table tr:hover td{background:rgba(0,255,247,.03)}
.data-table .thumb{width:36px;height:50px;object-fit:cover;border:1px solid rgba(0,255,247,.18)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-row.cols-3{grid-template-columns:1fr 1fr 1fr}
.form-row.cols-1{grid-template-columns:1fr}
.admin-label{display:block;font-family:var(--font-pixel);font-size:.35rem;color:rgba(0,255,247,.65);margin-bottom:.4rem;letter-spacing:.5px}
.admin-input{
  width:100%;padding:.62rem .9rem;
  background:rgba(0,255,247,.04);border:1px solid #1a1a3a;
  color:var(--text-primary);font-family:var(--font-mono);font-size:.87rem;transition:var(--transition);
}
.admin-input:focus{outline:none;border-color:var(--neon-cyan);background:rgba(0,255,247,.07);box-shadow:0 0 8px rgba(0,255,247,.14)}
.admin-input option{background:#0a0a14}
.admin-textarea{resize:vertical;min-height:90px}
.toggle-wrap{display:flex;align-items:center;gap:.75rem}
.toggle-switch{position:relative;width:42px;height:22px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:#1a1a3a;cursor:pointer;transition:.25s}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--text-muted);transition:.25s}
.toggle-switch input:checked+.toggle-slider{background:rgba(0,255,247,.18);border:1px solid var(--neon-cyan);box-shadow:0 0 6px rgba(0,255,247,.25)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px);background:var(--neon-cyan);box-shadow:var(--glow-cyan)}
.toggle-label{font-family:var(--font-mono);font-size:.82rem;color:rgba(200,200,220,.65)}
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.16rem .52rem;font-family:var(--font-pixel);font-size:.3rem;font-weight:600;letter-spacing:.5px}
.badge-active  {background:rgba(57,255,20,.1);  color:var(--neon-green); border:1px solid rgba(57,255,20,.28)}
.badge-inactive{background:rgba(255,45,120,.1); color:var(--neon-pink);  border:1px solid rgba(255,45,120,.28)}
.badge-draft   {background:rgba(255,255,255,.05);color:#555;             border:1px solid #2a2a2a}
.badge-movie   {background:rgba(0,255,247,.07);  color:var(--neon-cyan); border:1px solid rgba(0,255,247,.22)}
.badge-series  {background:rgba(191,0,255,.07);  color:var(--neon-purple);border:1px solid rgba(191,0,255,.22)}
.pagination{display:flex;align-items:center;gap:.3rem;justify-content:center;margin-top:1.5rem}
.page-btn{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-pixel);font-size:.35rem;
  background:#07070f;color:var(--text-muted);border:1px solid #1a1a3a;cursor:pointer;transition:var(--transition);
}
.page-btn:hover,.page-btn.active{background:rgba(0,255,247,.09);border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 6px rgba(0,255,247,.18)}
.page-btn.disabled{opacity:.2;cursor:default;pointer-events:none}

/* ── TRANSACCIONES ───────────────────────────────────────── */
.transactions-table{width:100%;border-collapse:collapse}
.transactions-table th,.transactions-table td{padding:.72rem 1rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.04);font-size:.82rem}
.transactions-table th{font-family:var(--font-pixel);font-size:.32rem;color:var(--neon-cyan);border-bottom-color:rgba(0,255,247,.18)}
.amount-positive{color:var(--neon-green);text-shadow:var(--glow-green)}
.amount-negative{color:var(--neon-pink);text-shadow:var(--glow-pink)}
.type-badge{padding:.16rem .52rem;font-family:var(--font-pixel);font-size:.3rem;font-weight:600}
.type-purchase{background:rgba(57,255,20,.1); color:var(--neon-green); border:1px solid rgba(57,255,20,.28)}
.type-watch   {background:rgba(255,45,120,.1);color:var(--neon-pink);  border:1px solid rgba(255,45,120,.28)}
.type-rewatch {background:rgba(255,230,0,.1); color:var(--neon-yellow);border:1px solid rgba(255,230,0,.28)}
.type-bonus   {background:rgba(0,255,247,.07);color:var(--neon-cyan);  border:1px solid rgba(0,255,247,.22)}

/* ── TOAST ───────────────────────────────────────────────── */
#toast-container{position:fixed;top:85px;right:1.5rem;z-index:10000;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{
  background:#07070f;border:1px solid var(--neon-cyan);box-shadow:var(--glow-cyan);
  color:var(--neon-cyan);padding:.72rem 1.1rem;
  display:flex;align-items:center;gap:.6rem;min-width:250px;max-width:350px;
  font-family:var(--font-mono);font-size:.8rem;
  animation:slideIn .22s ease;pointer-events:all;
}
.toast.success{border-color:var(--neon-green);box-shadow:var(--glow-green);color:var(--neon-green)}
.toast.warning{border-color:var(--neon-yellow);box-shadow:var(--glow-yellow);color:var(--neon-yellow)}
.toast.info   {border-color:var(--neon-cyan);  box-shadow:var(--glow-cyan);  color:var(--neon-cyan)}
.toast-icon{font-size:.95rem;flex-shrink:0}
.toast-msg{font-size:.78rem}
.toast.removing{animation:slideOut .22s ease forwards}

/* ── PERFIL ──────────────────────────────────────────────── */
.profile-page{padding-top:80px;min-height:100vh}
.profile-header{
  background:linear-gradient(to bottom,#07070f,var(--bg-dark));
  border-bottom:1px solid rgba(0,255,247,.12);
  padding:2.5rem 4%;display:flex;align-items:center;gap:2rem;
}
.profile-avatar-large{
  width:70px;height:70px;background:var(--neon-pink);
  border:2px solid var(--neon-pink);box-shadow:var(--glow-pink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-pixel);font-size:1.4rem;color:#000;flex-shrink:0;
}
.profile-info h1{font-family:var(--font-pixel);font-size:.8rem;color:var(--neon-cyan);text-shadow:var(--glow-cyan);letter-spacing:1px;margin-bottom:.4rem}
.profile-info p{font-family:var(--font-mono);font-size:.82rem;color:var(--text-muted)}
.profile-tabs{display:flex;border-bottom:1px solid rgba(0,255,247,.12);padding:0 4%;gap:.2rem}
.profile-tab{
  padding:.85rem 1.3rem;font-family:var(--font-pixel);font-size:.38rem;
  color:var(--text-muted);background:none;border:none;
  border-bottom:2px solid transparent;transition:var(--transition);cursor:pointer;letter-spacing:1px;
}
.profile-tab.active{color:var(--neon-cyan);text-shadow:var(--glow-cyan);border-bottom-color:var(--neon-cyan)}
.profile-content{padding:2rem 4%}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1024px){.content-card{flex:0 0 calc(25% - .3rem)}}
@media(max-width:768px){
  #navbar{padding:.6rem 3%;gap:.75rem}
  .nav-links{display:none}
  .nav-right{margin-left:auto;display:flex!important;align-items:center;gap:.5rem;flex-shrink:0}
  #searchInput{display:none}
  .nav-credits{display:none}
  .nav-user-name,.nav-user-chevron{display:none}
  .hero{height:65vh;margin-top:80px}
  .hero-title{font-size:.75rem}
  .hero-desc{display:none}
  .content-card{flex:0 0 calc(33.33% - .27rem)}
  .admin-sidebar{display:none}
  .form-row{grid-template-columns:1fr}
  .player-controls{padding:.5rem 1rem 1rem}
}
@media(max-width:480px){
  .content-card{flex:0 0 calc(50% - .2rem)}
  .hero-actions{gap:.4rem}
  .btn{padding:.55rem .9rem;font-size:.38rem}
  .auth-box{padding:1.7rem 1.1rem}
  .packages-grid{grid-template-columns:1fr}
  .nav-logo{font-size:.65rem}
}