:root {
  --color-bg: #121212;
  --color-dark: #1e1e1e;
  --color-primary: #e50914;
  --color-accent: #f5c518;
  --color-light: #f5f5f5;
  --color-muted: #9ca3af;
  --radius: 12px;
  --transition: 0.3s ease-in-out;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: var(--color-bg);
  color: var(--color-light);
  margin: 0;
  padding-top: 70px;
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
}

a {
  text-decoration: none;
  transition: var(--transition);
}
a:hover {
  opacity: 0.8;
}

.navbar {
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(6px);
}
.navbar-brand {
  font-size: 1.5rem;
  color: var(--color-accent) !important;
}
.nav-link {
  font-weight: 500;
  color: var(--color-light) !important;
}
.nav-link.active,
.nav-link:hover {
  color: var(--color-primary) !important;
}
form .btn {
  border-radius: var(--radius);
}

header {
  position: relative;
}
header::after {
  content: "";
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.6);
}
header .container {
  position: relative;
  z-index: 2;
}
header h1 {
  font-size: 4rem;
  color: var(--color-accent);
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

section {
  scroll-margin-top: 80px;
}

#add-movie .card {
  border-radius: var(--radius);
  border: 2px solid var(--color-accent);
  background-color: var(--color-dark);
  color: var(--color-light);
  padding: 20px;
}
#add-movie label {
  color: var(--color-accent);
  font-weight: bold;
}
#add-movie input,
#add-movie textarea,
#add-movie select {
  border-radius: var(--radius);
  border: 1px solid var(--color-muted);
  background: #1a1a1a;
  color: var(--color-light);
}
#add-movie input:focus,
#add-movie textarea:focus,
#add-movie select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 5px var(--color-accent);
}
#add-movie button {
  border-radius: var(--radius);
  background: var(--color-primary);
  border: none;
  color: var(--color-light);
}
#add-movie button:hover {
  background: #b20710;
}

#movie-list table {
  background-color: var(--color-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
#movie-list th {
  background-color: var(--color-primary);
  color: white;
}
#movie-list td {
  vertical-align: middle;
}

.movie-card {
  transition: transform 0.3s, box-shadow 0.3s;
  border: none;
  border-radius: var(--radius);
  background: var(--color-dark);
}
.movie-card img {
  border-radius: var(--radius) var(--radius) 0 0;
}
.movie-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}
.movie-card .card-title {
  color: var(--color-accent);
}
.card-text {
  color: white;
}

#perfil img {
  border: 3px solid var(--color-primary);
}
#perfil .badge {
  font-size: 0.9rem;
  padding: 0.5em 0.75em;
  border-radius: var(--radius);
}

#ayuda form {
  background: var(--color-dark);
  padding: 20px;
  border-radius: var(--radius);
}
#ayuda .btn-outline-dark {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
#ayuda .btn-outline-dark:hover {
  background: var(--color-accent);
  color: black;
}

footer {
  background: var(--color-dark);
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  color: var(--color-muted);
}
footer p {
  margin: 0;
}