/* ═══════════════════════════════════════════════════════════════════════════
   XUPERMUSIC — Tema Netflix (negro + rojo)
   Se carga después del CSS existente para sobrescribir colores.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --nf-red: #e50914;
  --nf-red-h: #f6121d;
  --nf-bg: #0b0b0b;
  --nf-bg2: #161616;
  --nf-fg: #fff;
  --nf-muted: #b3b3b3;
}

body {
  background-color: var(--nf-bg) !important;
  color: var(--nf-fg) !important;
}

/* ── Navbar ────────────────────────────────────────────────────────────── */
header, .navbar, nav, [role="navigation"] {
  background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(11,11,11,.8)) !important;
  border-bottom: 1px solid rgba(229,9,20,.2) !important;
}

header a, .navbar a, nav a {
  color: var(--nf-muted) !important;
  transition: color .2s;
}

header a:hover, .navbar a:hover, nav a:hover,
header button:hover, .navbar button:hover {
  color: var(--nf-red) !important;
}

.logo, .brand {
  color: var(--nf-fg) !important;
}

/* ── Hero / Banner ────────────────────────────────────────────────────── */
.hero, .banner, .jumbotron, [class*="hero"], [class*="banner"] {
  background: linear-gradient(135deg, rgba(20,20,20,.95), rgba(10,10,10,.98)) !important;
  border: none !important;
  color: var(--nf-fg) !important;
}

.hero h1, .banner h1, .hero h2, .banner h2 {
  color: var(--nf-fg) !important;
  font-weight: 700 !important;
}

.hero p, .banner p {
  color: var(--nf-muted) !important;
}

/* ── Botones ───────────────────────────────────────────────────────────– */
.btn-primary, button.btn-primary, [class*="btn-primary"],
.btn, button {
  background: linear-gradient(110deg, var(--nf-red), #ff1f1f) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.btn-primary:hover, button.btn-primary:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-2px) !important;
}

.btn-secondary, .btn-outline-secondary {
  background: rgba(229,9,20,.1) !important;
  border: 1px solid rgba(229,9,20,.3) !important;
  color: var(--nf-muted) !important;
}

.btn-secondary:hover {
  background: rgba(229,9,20,.2) !important;
  color: var(--nf-fg) !important;
}

/* ── Cards / Posters ───────────────────────────────────────────────────– */
.card, [class*="card"], .poster, .item-card {
  background: var(--nf-bg2) !important;
  border: 1px solid rgba(229,9,20,.15) !important;
  border-radius: 6px !important;
  color: var(--nf-fg) !important;
}

.card:hover, [class*="card"]:hover, .poster:hover {
  border-color: rgba(229,9,20,.4) !important;
  box-shadow: 0 12px 30px rgba(229,9,20,.2) !important;
  transform: translateY(-4px) !important;
}

.card-title, .card h5, .card h4 {
  color: var(--nf-fg) !important;
  font-weight: 700 !important;
}

.card-text, .card p {
  color: var(--nf-muted) !important;
}

/* ── Inputs / Forms ────────────────────────────────────────────────────– */
input, textarea, select, .form-control {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(229,9,20,.2) !important;
  color: var(--nf-fg) !important;
  border-radius: 4px !important;
}

input:focus, textarea:focus, select:focus, .form-control:focus {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(229,9,20,.5) !important;
  box-shadow: 0 0 0 3px rgba(229,9,20,.1) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--nf-muted) !important;
}

/* ── Links ────────────────────────────────────────────────────────────– */
a {
  color: var(--nf-red) !important;
  text-decoration: none;
}

a:hover {
  color: #ff6666 !important;
  text-decoration: underline;
}

/* ── Tablas ───────────────────────────────────────────────────────────– */
table, .table {
  background: var(--nf-bg2) !important;
  border-color: rgba(229,9,20,.15) !important;
}

thead, .table-dark thead {
  background: rgba(0,0,0,.5) !important;
  border-bottom: 1px solid rgba(229,9,20,.2) !important;
}

th {
  color: var(--nf-fg) !important;
  font-weight: 700 !important;
}

td {
  color: var(--nf-muted) !important;
}

tr:hover {
  background: rgba(229,9,20,.05) !important;
}

/* ── Alerts / Badges ───────────────────────────────────────────────────– */
.alert, .badge, [role="alert"] {
  background: rgba(229,9,20,.12) !important;
  border: 1px solid rgba(229,9,20,.3) !important;
  color: #ff8888 !important;
}

.badge-primary {
  background: var(--nf-red) !important;
  color: #fff !important;
}

/* ── Modal / Dropdown ──────────────────────────────────────────────────– */
.modal-content, .dropdown-menu {
  background: var(--nf-bg2) !important;
  border: 1px solid rgba(229,9,20,.2) !important;
}

.modal-header, .dropdown-header {
  background: rgba(0,0,0,.5) !important;
  border-bottom: 1px solid rgba(229,9,20,.2) !important;
}

.modal-title {
  color: var(--nf-fg) !important;
}

.dropdown-item {
  color: var(--nf-muted) !important;
}

.dropdown-item:hover {
  background: rgba(229,9,20,.15) !important;
  color: var(--nf-fg) !important;
}

/* ── Scrollbar ────────────────────────────────────────────────────────– */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--nf-bg);
}

::-webkit-scrollbar-thumb {
  background: rgba(229,9,20,.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(229,9,20,.6);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}