/* ================================
   Tema: Nocturne (tétrico / miedoso) — BRILLO moderado + LATIDO
   Archivo: styles/themes/nocturne.css
   ================================ */

:root {
  --bg: #06080f;
  --surface: #0a0f1a;
  --surface-2: #0c1220;
  --text: #f7f9ff;       /* blanco suavizado */
  --muted: #e3eaff;      /* subtítulo claro sin deslumbrar */
  --primary: #8aa2ff;
  --accent: #e056f3;
  --ring: #35e6ff;
  --danger: #ff5a7d;
}

body {
  background: radial-gradient(1200px 500px at 50% 120%, #0b1324 0%, var(--bg) 60%) fixed;
  color: var(--text);
  position: relative;
}
body::before {
  content: ""; pointer-events: none; position: fixed; inset: 0;
  background-image:
    radial-gradient(transparent 0 1px, rgba(255,255,255,.02) 1px),
    radial-gradient(transparent 0 1px, rgba(0,0,0,.05) 1px);
  background-size: 3px 3px, 5px 5px;
  mix-blend-mode: overlay; opacity: .35; z-index: 1;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(1200px 600px at 50% 120%, transparent 0 60%, rgba(0,0,0,.55) 100%);
  z-index: 1; /* viñeta por debajo del header (z=3) */
}

/* Cabecera por encima del viñeteado */
/* Cabecera sticky por encima del viñeteado */
.app-header {
  position: sticky;          /* <- sticky */
  top: 0;                    /* pegado arriba */
  z-index: 50;               /* por encima de body::after (z=1) y del contenido */
  background: linear-gradient(180deg, rgba(3,6,12,.78), rgba(7,10,18,.32));
  border-bottom: 1px solid rgba(124,139,161,.15);
  backdrop-filter: blur(6px);
}


/* ====== ENCABEZADO: brillo moderado + LATIDO ====== */
.app-header .brand .app-title {
  color: var(--text) !important;
  letter-spacing: .012em;
  line-height: 1.12;
  text-shadow:
    0 2px 8px rgba(138,162,255,.35),
    0 0 20px rgba(224,86,243,.22),
    0 0 28px rgba(53,230,255,.22),
    0 0 6px rgba(255,90,125,.18);
  filter: drop-shadow(0 2px 4px rgba(255,255,255,.16));
  animation: title-pulse 6s ease-in-out infinite both;
}
.app-header .brand .app-tagline {
  color: var(--muted) !important;
  font-weight: 800;
  text-shadow:
    0 1px 5px rgba(138,162,255,.28),
    0 0 14px rgba(53,230,255,.18);
  filter: drop-shadow(0 1px 3px rgba(255,255,255,.12));
  animation: tagline-pulse 6s ease-in-out infinite both;
  animation-delay: .75s;
}

/* Aislar efectos del header */
.app-header .brand { isolation: isolate; }

/* Animaciones de latido (modestas) */
@keyframes title-pulse {
  0%, 100% {
    text-shadow:
      0 2px 8px rgba(138,162,255,.30),
      0 0 18px rgba(224,86,243,.18),
      0 0 24px rgba(53,230,255,.18),
      0 0 4px rgba(255,90,125,.14);
    transform: translateZ(0);
  }
  8% {
    text-shadow:
      0 3px 12px rgba(138,162,255,.55),
      0 0 26px rgba(224,86,243,.30),
      0 0 36px rgba(53,230,255,.28),
      0 0 8px rgba(255,90,125,.24);
    transform: translateZ(0);
  }
  16% {
    text-shadow:
      0 2px 9px rgba(138,162,255,.40),
      0 0 20px rgba(224,86,243,.22),
      0 0 28px rgba(53,230,255,.22),
      0 0 6px rgba(255,90,125,.18);
  }
}
@keyframes tagline-pulse {
  0%, 100% {
    text-shadow:
      0 1px 4px rgba(138,162,255,.22),
      0 0 10px rgba(53,230,255,.14);
  }
  10% {
    text-shadow:
      0 1px 7px rgba(138,162,255,.38),
      0 0 14px rgba(53,230,255,.22);
  }
  18% {
    text-shadow:
      0 1px 5px rgba(138,162,255,.28),
      0 0 12px rgba(53,230,255,.18);
  }
}

/* Respeto a usuarios con menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .app-header .brand .app-title,
  .app-header .brand .app-tagline {
    animation: none !important;
  }
}

/* Contenedor general */
.container { position: relative; z-index: 2; }

/* HERO con ciudad y niebla */
.hero {
  position: relative;
  height: clamp(260px, 42vh, 420px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(180,195,220,.22);
  background:
    linear-gradient(180deg, rgba(3,7,18,.0) 0%, rgba(3,7,18,.35) 70%, rgba(3,7,18,.6) 100%),
    url("../../assets/img/ui/city-silhouette.png") center 80% / cover no-repeat,
    radial-gradient(800px 300px at 50% 120%, #0c172c 0%, #070b12 60%);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* Niebla */
.hero::before,
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 20% 80%, rgba(200,220,255,.08), transparent 60%),
    radial-gradient(70% 70% at 80% 90%, rgba(200,220,255,.06), transparent 65%);
  filter: blur(8px); animation: fog-move 36s linear infinite;
}
.hero::after { animation-duration: 54s; opacity: .75; mix-blend-mode: screen; }
@keyframes fog-move {
  0% { transform: translate3d(-2%, 0, 0) scale(1.02); }
  50% { transform: translate3d(2%, -1%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, 0, 0) scale(1.02); }
}

/* Overlay y badge */
.hero-overlay { position: absolute; inset: 0; display: grid; place-items: end start; padding: 1rem; }
.hero-badge {
  background: rgba(10,16,30,.55);
  border: 1px solid rgba(180,195,220,.25);
  color: #d6e0ff;
  padding: .4rem .6rem; border-radius: 10px;
  backdrop-filter: blur(6px); font-weight: 800; letter-spacing: .02em;
}

/* Panel */
.panel {
  margin-top: -68px;
  background: linear-gradient(180deg, rgba(10,16,30,.88), rgba(10,16,30,.78));
  border: 1px solid rgba(180,195,220,.22);
  border-radius: 18px; padding: 1rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* Select + descripción */
.select-row {
  display: grid; grid-template-columns: 1fr minmax(220px, 280px);
  gap: 1rem; align-items: end;
}
@media (max-width: 768px) { .select-row { grid-template-columns: 1fr; } }

/* Ocultar SIEMPRE: label "Buscar perfil…" */
.select-large label {
  display: none !important;
}

.select-large select {
  font-size: 1rem;
  padding: .8rem 2.25rem .8rem .9rem;
  border-radius: 12px;
  background-color: #0f172a; color: var(--text);
  border: 1px solid rgba(180,195,220,.35);
  box-shadow: 0 0 0 2px rgba(53,230,255,.05) inset;
}
.select-large select:focus {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(53,230,255,.25),
    0 0 0 4px rgba(224,86,243,.18);
}

.desc-box {
  background: linear-gradient(180deg, rgba(12,19,34,.9), rgba(10,16,28,.85));
  border: 1px solid rgba(180,195,220,.22);
  border-radius: 14px; padding: .75rem .9rem;
  color: #eef3ff; min-height: 64px;
  text-shadow: 0 1px 3px rgba(138,162,255,.16);
}

/* ===== Etiquetas encima de cada barra =====
   - Mostramos .attr-name de nuevo
   - Las barras pasan a ocupar todo el ancho
   - Texto pequeño y tenue
*/
.attr-bars { display: grid; gap: .5rem; }
.attr-row {
  display: grid;
  grid-template-columns: 1fr;           /* una sola columna */
  gap: .25rem;                          /* espacio entre etiqueta y barra */
}
.attr-row .attr-name {
  display: block !important;            /* asegurar que se ve */
  font-size: .8rem;                     /* pequeño */
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .01em;
  color: #a9b8d8;                       /* tenue y legible */
  text-shadow: 0 1px 2px rgba(8,12,20,.45);
  margin: 0; padding: 0;
}

/* Barras */
.attr-meter {
  height: 8px;
  border-radius: 999px;
  background: #070b12;
  border: 1px solid rgba(180,195,220,.25);
  overflow: hidden;
}
.attr-meter > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #35e6ff, #8aa2ff);
}

/* Botones */
.btn { background: #0f172a; border: 1px solid #2b3a54; color: var(--text); }
.btn:hover { filter: brightness(1.06); }
.btn-primary {
  background: linear-gradient(180deg, #354a85, #243564);
  border-color: #445aa3; box-shadow: 0 6px 20px rgba(53,230,255,.15);
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-secondary { background: #0a1020; }