/* === MocchiStream - Estilos Premium === */
:root {
  --bg-deep: #03050a;
  --bg-card: #0b0e14;
  --glass-bg: rgba(11, 14, 20, 0.75);
  --glass-border: rgba(255, 255, 255, 0.06);
  --neon-cyan: #00d4ff;
  --neon-blue: #2b6ef0;
  --neon-purple: #8b5cf6;
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --shadow-neon: 0 0 15px rgba(0, 212, 255, 0.3);
  --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: radial-gradient(ellipse at top, #0a0f1a 0%, #03050a 70%);
  color: var(--text-primary);
  min-height: 100vh;
}

/* Scrollbar neón */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon-cyan), var(--neon-blue));
  border-radius: 4px;
}

/* Glassmorfismo */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  transition: var(--transition-smooth);
}
.glass:hover { border-color: rgba(255, 255, 255, 0.12); }

/* Tarjetas verticales (9:16) */
.poster-card {
  position: relative;
  width: 160px; /* base */
  flex-shrink: 0;
  scroll-snap-align: start;
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  background: #0f131c;
}
.poster-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 30px -10px rgba(0, 212, 255, 0.25);
}
.poster-card img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}
.poster-card .hover-play {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.poster-card:hover .hover-play { opacity: 1; }
.poster-card .title-overlay {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 1rem 0.8rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  font-weight: 600;
  font-size: 0.9rem;
}

/* Scroll horizontal con snap */
.scroll-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0 1rem;
  scrollbar-width: thin;
}

/* Botones neón */
.btn-neon {
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));
  border: none;
  color: white;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}
.btn-neon:hover {
  box-shadow: 0 6px 25px rgba(0, 212, 255, 0.5);
  transform: translateY(-2px);
}

/* Animaciones */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.animate-scale-in {
  animation: scaleIn 0.4s ease forwards;
}

/* Reproductor pantalla completa */
.fullscreen-player {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.3s ease;
}
.player-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
}
.player-iframe-container {
  flex: 1;
  background: #000;
}

/* Admin específico */
.admin-glass-card {
  background: rgba(15, 20, 30, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 1.5rem;
  padding: 1.5rem;
}
.input-glass {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.75rem;
  color: white;
  padding: 0.7rem 1rem;
  transition: border-color 0.2s;
}
.input-glass:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0,212,255,0.2);
}

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, #1a1f2e 25%, #252b3a 50%, #1a1f2e 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 1rem;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}