/* --------------------------------------------------------------------------
   VALORANT — layout de pagina con panel de detalle
   --------------------------------------------------------------------------
   Estaba duplicado dentro de un <style> en val-agents, val-maps y
   val-weapons: las mismas 12 reglas escritas tres veces. Aqui se cargan
   una sola vez y cada pagina solo redefine lo suyo (el ancho del panel
   cambia: 360px en agents/weapons, 380px en maps).
   -------------------------------------------------------------------------- */

.val-page { background: var(--bg-dark); min-height: 100vh; }

.val-main  { max-width: var(--page-max); margin: 0 auto; padding: var(--sp-11) var(--sp-9) 80px; }

.val-page-header { margin-bottom: 28px; }

.val-page-header h1 { font-size: var(--fs-4xl); font-weight: var(--fw-extrabold); color: var(--text-white); margin-bottom: var(--sp-2); }

.val-page-header h1 span { color: var(--brand-accent); }

.val-page-sub { font-size: var(--fs-sm); color: var(--text-muted); }

.val-placeholder {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 200px; color: var(--text-muted);
    font-size: var(--fs-md); gap: var(--sp-3);
}

.val-placeholder-icon { opacity: .4; display: inline-flex; }

.val-spinner-wrap { display: flex; align-items: center; justify-content: center; height: 200px; }

.val-spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--brand-accent);
    border-radius: var(--radius-circle);
    animation: spin .7s linear infinite;
}

.val-empty { text-align: center; padding: var(--sp-12) var(--sp-8); color: var(--text-muted); font-size: var(--fs-md); }