/* ==========================================================================
   PANDEMONIUM BOX · Solo Leveling HUD System
   pdm-sl-system.css · v1.0
   --------------------------------------------------------------------------
   Componentes layout "SYSTEM": paneles numerados 01/02/03, HUD frames con
   esquinas marcadas, barras de progreso glow, stat blocks, hero frame.
   Paleta estricta Pandemonium: violet #7C3AED · cyan #22d3ee · gold #fbbf24
   sobre obsidian #070318. Cero JS requerido. Mobile-first 375/768/1280.
   Carga DESPUES de pdm-tokens.css (usa --pdm-* con fallbacks seguros).
   ========================================================================== */

:root {
  /* ---- Bridge tokens · referencian paleta canonica --pdm-* ---- */
  --sl-violet: var(--pdm-violet, #7c3aed);
  --sl-violet-dim: var(--pdm-violet-dim, #5b21b6);
  --sl-cyan: var(--pdm-cyan, #22d3ee);
  --sl-cyan-dim: var(--pdm-cyan-dim, #0891b2);
  --sl-gold: var(--pdm-gold, #fbbf24);
  --sl-obsidian: var(--pdm-bg-0, #070318);
  --sl-text: var(--pdm-text-primary, #e5e7eb);
  --sl-text-muted: var(--pdm-text-muted, #a78bfa);

  /* ---- Superficies HUD ---- */
  --sl-panel-bg: rgba(13, 7, 38, 0.6);
  --sl-panel-border: rgba(124, 58, 237, 0.35);
  --sl-panel-border-strong: rgba(124, 58, 237, 0.65);

  /* ---- Glows ---- */
  --sl-glow-violet: 0 0 18px rgba(124, 58, 237, 0.45), 0 0 42px rgba(124, 58, 237, 0.18);
  --sl-glow-cyan: 0 0 14px rgba(34, 211, 238, 0.5), 0 0 36px rgba(34, 211, 238, 0.22);
  --sl-glow-gold: 0 0 16px rgba(251, 191, 36, 0.45), 0 0 38px rgba(251, 191, 36, 0.2);

  /* ---- Geometria esquinas (corner brackets) ---- */
  --sl-corner-len: 18px;        /* largo del brazo de la L */
  --sl-corner-w: 2px;           /* grosor del trazo */
  --sl-corner-color: var(--sl-cyan);

  /* ---- Tipografia display ---- */
  --sl-font-display: var(--pdm-font-sans, 'Segoe UI', system-ui, sans-serif);
  --sl-font-mono: var(--pdm-font-mono, 'Cascadia Code', Consolas, monospace);

  /* ---- Ritmo ---- */
  --sl-radius: var(--pdm-radius-md, 12px);
  --sl-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   .sl-panel · Panel HUD con esquinas marcadas
   Borde violeta translucido + corner brackets en L (diagonal TL + BR)
   Uso: <section class="sl-panel"><span class="sl-panel-num">01</span>...</section>
   ========================================================================== */

.sl-panel {
  position: relative;
  isolation: isolate;
  background: var(--sl-panel-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--sl-panel-border);
  border-radius: var(--sl-radius);
  padding: clamp(20px, 4vw, 32px);
  overflow: hidden;
  transition: border-color 240ms var(--sl-ease), box-shadow 240ms var(--sl-ease);
}

/* Corner bracket superior-izquierda */
.sl-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: var(--sl-corner-len);
  height: var(--sl-corner-len);
  border-top: var(--sl-corner-w) solid var(--sl-corner-color);
  border-left: var(--sl-corner-w) solid var(--sl-corner-color);
  border-top-left-radius: var(--sl-radius);
  pointer-events: none;
  z-index: 2;
}

/* Corner bracket inferior-derecha */
.sl-panel::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: var(--sl-corner-len);
  height: var(--sl-corner-len);
  border-bottom: var(--sl-corner-w) solid var(--sl-corner-color);
  border-right: var(--sl-corner-w) solid var(--sl-corner-color);
  border-bottom-right-radius: var(--sl-radius);
  pointer-events: none;
  z-index: 2;
}

.sl-panel:hover,
.sl-panel:focus-within {
  border-color: var(--sl-panel-border-strong);
  box-shadow: var(--sl-glow-violet);
}

/* Modificadores de acento por marca interna */
.sl-panel--cyan { --sl-corner-color: var(--sl-cyan); }
.sl-panel--violet { --sl-corner-color: var(--sl-violet); }
.sl-panel--gold {
  --sl-corner-color: var(--sl-gold);
  border-color: rgba(251, 191, 36, 0.35);
}
.sl-panel--gold:hover,
.sl-panel--gold:focus-within {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: var(--sl-glow-gold);
}

/* ==========================================================================
   .sl-panel-num · Numero de seccion "01" / "02" / "03"
   Gigante, translucido, esquina superior derecha del panel
   ========================================================================== */

.sl-panel-num {
  position: absolute;
  top: 0;
  right: clamp(8px, 2vw, 20px);
  font-family: var(--sl-font-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sl-gold);
  opacity: 0.15;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 0;
}

/* Variante esquina izquierda */
.sl-panel-num--left {
  right: auto;
  left: clamp(8px, 2vw, 20px);
}

/* Contenido del panel siempre por encima del numero */
.sl-panel > :not(.sl-panel-num) {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   .sl-header · Titulo de seccion con linea glow lateral cyan
   Uso: <h2 class="sl-header">CONDICION DE ENTRADA</h2>
   ========================================================================== */

.sl-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sl-font-display);
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sl-text);
  margin-bottom: clamp(16px, 3vw, 24px);
}

.sl-header::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1.25em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sl-cyan) 0%, var(--sl-violet) 100%);
  box-shadow: var(--sl-glow-cyan);
}

/* Linea de fuga opcional hacia la derecha */
.sl-header--rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-left: 6px;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.45) 0%, transparent 100%);
}

/* ==========================================================================
   .sl-bar · Barra de progreso con glow animado
   Uso: <div class="sl-bar" role="progressbar" aria-valuenow="62"
          aria-valuemin="0" aria-valuemax="100">
          <span class="sl-bar__fill" style="--sl-bar-value:62%"></span>
        </div>
   ========================================================================== */

.sl-bar {
  position: relative;
  width: 100%;
  height: 10px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 999px;
  overflow: hidden;
}

.sl-bar__fill {
  display: block;
  height: 100%;
  width: var(--sl-bar-value, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sl-violet) 0%, var(--sl-cyan) 100%);
  background-size: 200% 100%;
  box-shadow: var(--sl-glow-cyan);
  animation: sl-bar-sheen 2.8s linear infinite;
  transition: width 480ms var(--sl-ease);
}

@keyframes sl-bar-sheen {
  0% { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}

/* Variante fina (skill tracker) y variante gold (premium) */
.sl-bar--thin { height: 6px; }
.sl-bar--gold .sl-bar__fill {
  background: linear-gradient(90deg, var(--sl-violet) 0%, var(--sl-gold) 100%);
  background-size: 200% 100%;
  box-shadow: var(--sl-glow-gold);
}

/* ==========================================================================
   .sl-stat · Stat block estilo ficha de cazador
   Uso: <div class="sl-stat">
          <span class="sl-stat__label">Cazadores</span>
          <span class="sl-stat__value">1.000</span>
        </div>
   ========================================================================== */

.sl-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sl-stat__label {
  font-family: var(--sl-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sl-text-muted);
}

.sl-stat__value {
  font-family: var(--sl-font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--sl-gold);
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.35);
}

.sl-stat__value--cyan {
  color: var(--sl-cyan);
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
}

/* ==========================================================================
   .sl-frame-hero · Marco hero con corner brackets en las 4 esquinas
   Brackets con pulso de glow sutil. Aplicar al contenedor del hero focal.
   ========================================================================== */

.sl-frame-hero {
  position: relative;
  isolation: isolate;
}

.sl-frame-hero::before,
.sl-frame-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-repeat: no-repeat;
  animation: sl-corner-breathe 3.6s var(--sl-ease) infinite;
}

/* 4 esquinas: cada pseudo pinta 4 trazos (2 esquinas en L) */
.sl-frame-hero::before {
  /* L superior-izquierda + L superior-derecha */
  background-image:
    linear-gradient(var(--sl-corner-color), var(--sl-corner-color)),
    linear-gradient(var(--sl-corner-color), var(--sl-corner-color)),
    linear-gradient(var(--sl-corner-color), var(--sl-corner-color)),
    linear-gradient(var(--sl-corner-color), var(--sl-corner-color));
  background-size:
    var(--sl-corner-len) var(--sl-corner-w),
    var(--sl-corner-w) var(--sl-corner-len),
    var(--sl-corner-len) var(--sl-corner-w),
    var(--sl-corner-w) var(--sl-corner-len);
  background-position:
    top left, top left,
    top right, top right;
}

.sl-frame-hero::after {
  /* L inferior-izquierda + L inferior-derecha */
  background-image:
    linear-gradient(var(--sl-corner-color), var(--sl-corner-color)),
    linear-gradient(var(--sl-corner-color), var(--sl-corner-color)),
    linear-gradient(var(--sl-corner-color), var(--sl-corner-color)),
    linear-gradient(var(--sl-corner-color), var(--sl-corner-color));
  background-size:
    var(--sl-corner-len) var(--sl-corner-w),
    var(--sl-corner-w) var(--sl-corner-len),
    var(--sl-corner-len) var(--sl-corner-w),
    var(--sl-corner-w) var(--sl-corner-len);
  background-position:
    bottom left, bottom left,
    bottom right, bottom right;
}

@keyframes sl-corner-breathe {
  0%, 100% {
    opacity: 0.85;
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.4));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.7));
  }
}

/* ==========================================================================
   .sl-glow-pulse · Pulso sutil para elementos vivos
   (countdown, contador de plazas, badge LIVE)
   ========================================================================== */

.sl-glow-pulse {
  animation: sl-glow-pulse 2.4s ease-in-out infinite;
}

@keyframes sl-glow-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(124, 58, 237, 0.3); }
  50% { box-shadow: 0 0 22px rgba(34, 211, 238, 0.45); }
}

.sl-glow-pulse--gold {
  animation-name: sl-glow-pulse-gold;
}

@keyframes sl-glow-pulse-gold {
  0%, 100% { box-shadow: 0 0 10px rgba(251, 191, 36, 0.25); }
  50% { box-shadow: 0 0 22px rgba(251, 191, 36, 0.5); }
}

/* ==========================================================================
   .sl-grid · Grid responsive de paneles (mobile-first)
   ========================================================================== */

.sl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(14px, 2.5vw, 24px);
}

/* ==========================================================================
   Utilidades complementarias
   ========================================================================== */

/* Fluidez de carga: secciones below-the-fold */
.sl-cv {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}

/* Accesibilidad: anillo de foco coherente con el HUD */
.sl-panel a:focus-visible,
.sl-panel button:focus-visible,
.sl-frame-hero a:focus-visible,
.sl-frame-hero button:focus-visible {
  outline: 2px solid var(--sl-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Reduced motion · cero animacion para quien lo pide
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sl-bar__fill,
  .sl-frame-hero::before,
  .sl-frame-hero::after,
  .sl-glow-pulse,
  .sl-glow-pulse--gold {
    animation: none !important;
  }
  .sl-bar__fill,
  .sl-panel {
    transition: none !important;
  }
}

/* ==========================================================================
   Breakpoints de refuerzo (mobile-first ya cubierto por clamp)
   ========================================================================== */

@media (min-width: 768px) {
  .sl-stat__value { font-size: 32px; }
  :root { --sl-corner-len: 22px; }
}

@media (min-width: 1280px) {
  :root { --sl-corner-len: 26px; }
}