:root {
  --bg: #120f17;
  --bg-card: #1c1725;
  --bg-card-2: #241d31;
  --borde: #35283f;
  --texto: #ece6f5;
  --texto-tenue: #a8a0b8;
  --acento: #e0a93a;
  --acento-2: #8a4fff;
  --verde: #4fd38a;
  --rojo: #ef5f6b;
  --radio: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: radial-gradient(circle at top, #1a1424 0%, var(--bg) 60%);
  color: var(--texto);
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--borde);
  background: rgba(18, 15, 23, 0.9);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marca {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.marca-logo { color: var(--acento); font-size: 20px; }
.marca small { color: var(--texto-tenue); font-weight: 400; margin-left: 6px; font-size: 13px; }

.nav { display: flex; gap: 10px; align-items: center; }
.nav.oculto { display: none; }
.nav a, .nav button {
  background: none;
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 8px 14px;
  border-radius: var(--radio);
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
}
.nav a.activo, .nav button:hover { border-color: var(--acento); color: var(--acento); }

.app { max-width: 920px; margin: 0 auto; padding: 32px 20px 80px; }

.footer { text-align: center; color: var(--texto-tenue); font-size: 12px; padding: 20px; }

.tarjeta {
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px;
  margin-bottom: 18px;
}

.tarjeta h2 { margin-top: 0; }

.login-caja { max-width: 380px; margin: 60px auto; text-align: center; }
.login-caja h1 { font-size: 22px; margin-bottom: 4px; }
.login-caja p { color: var(--texto-tenue); margin-top: 0; margin-bottom: 24px; }

label { display: block; font-size: 13px; color: var(--texto-tenue); margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=url], textarea {
  width: 100%;
  background: var(--bg-card-2);
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 10px 12px;
  border-radius: var(--radio);
  font-size: 14px;
  font-family: inherit;
}
textarea { min-height: 110px; resize: vertical; }

button.boton {
  background: var(--acento);
  color: #1a140a;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radio);
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  margin-top: 16px;
}
button.boton:hover { filter: brightness(1.08); }
button.boton.secundario { background: var(--bg-card-2); color: var(--texto); border: 1px solid var(--borde); }
button.boton.peligro { background: var(--rojo); color: #2a0b0e; }
button.boton:disabled { opacity: 0.5; cursor: default; }

.error { color: var(--rojo); font-size: 13px; margin-top: 10px; min-height: 16px; }
.ok { color: var(--verde); font-size: 13px; margin-top: 10px; }

.lista-fichas { display: flex; flex-direction: column; gap: 10px; }
.fila-ficha {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 16px;
  cursor: pointer;
  text-decoration: none;
  color: var(--texto);
}
.fila-ficha:hover { border-color: var(--acento); }
.fila-ficha img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: #000; }
.fila-ficha .info { flex: 1; min-width: 0; }
.fila-ficha .info .titulo { font-weight: 600; }
.fila-ficha .info .sub { color: var(--texto-tenue); font-size: 13px; }

.pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.pill-pendiente { background: #3a3550; color: #c7bfe0; }
.pill-en_redaccion { background: #4a3620; color: var(--acento); }
.pill-enviada { background: #233b55; color: #7fb6e8; }
.pill-aprobada { background: #1c3d2c; color: var(--verde); }
.pill-rechazada { background: #3d1d22; color: var(--rojo); }

.ficha-cabecera { display: flex; gap: 20px; align-items: flex-start; }
.ficha-cabecera img { width: 140px; height: 140px; border-radius: var(--radio); object-fit: cover; background: #000; }
.ficha-cabecera .datos h2 { margin: 0 0 4px; }
.ficha-cabecera .datos .artistas { color: var(--texto-tenue); margin-bottom: 8px; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-top: 10px; font-size: 13px; }
.meta-grid div span { display: block; color: var(--texto-tenue); font-size: 11px; text-transform: uppercase; }

.pistas-tabla { width: 100%; border-collapse: collapse; margin-top: 10px; }
.pistas-tabla td, .pistas-tabla th { padding: 8px 6px; border-bottom: 1px solid var(--borde); font-size: 14px; text-align: left; }
.pistas-tabla th { color: var(--texto-tenue); font-size: 12px; text-transform: uppercase; }

.estrellas { display: flex; gap: 2px; cursor: pointer; }
.estrellas .estrella { font-size: 18px; color: #4a4356; }
.estrellas .estrella.llena { color: var(--acento); }

.comentario-admin {
  background: #3d1d22;
  border: 1px solid var(--rojo);
  color: #ffd4d8;
  padding: 10px 14px;
  border-radius: var(--radio);
  margin-bottom: 16px;
  font-size: 14px;
}

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar select { background: var(--bg-card-2); color: var(--texto); border: 1px solid var(--borde); padding: 8px 10px; border-radius: var(--radio); }

.cargando { text-align: center; color: var(--texto-tenue); padding: 40px; }