@layer vsg-universal {
:root {
  --font-ui: 'Inter', 'Segoe UI', sans-serif;
  --space-2xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.4rem);
  --space-xs: clamp(0.45rem, 0.35rem + 0.3vw, 0.65rem);
  --space-sm: clamp(0.7rem, 0.55rem + 0.4vw, 0.95rem);
  --space-md: clamp(0.95rem, 0.75rem + 0.6vw, 1.3rem);
  --space-lg: clamp(1.3rem, 1rem + 0.9vw, 1.9rem);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-soft: 0 8px 24px rgba(2, 6, 23, 0.25);
  --shadow-card: 0 10px 30px rgba(2, 6, 23, 0.34);
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --surface-1: rgba(15, 23, 42, 0.72);
  --surface-2: rgba(30, 41, 59, 0.72);
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-ui);
}

.content-container {
  max-width: min(1800px, calc(100vw - var(--sidebar-width)));
  padding-inline: clamp(12px, 1.2vw, 26px);
}

.content-wrapper {
  width: 100%;
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.card,
.universal-top-container,
.modal-content,
.data-table,
.sidebar {
  border-radius: var(--radius-md);
}

.card,
.universal-top-container,
.modal-content {
  box-shadow: var(--shadow-soft);
}

.nav-btn,
.btn-primary,
.btn-outline,
.universal-tab-btn {
  transition: transform var(--motion-fast) var(--ease-out),
              background-color var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}

.nav-btn:hover,
.btn-primary:hover,
.btn-outline:hover,
.universal-tab-btn:hover {
  transform: translate3d(0, -1px, 0);
}

.nav-btn:active,
.btn-primary:active,
.btn-outline:active,
.universal-tab-btn:active {
  transform: translate3d(0, 0, 0) scale(0.99);
}

.nav-btn:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.form-control:focus-visible,
.universal-tab-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.main-nav,
.admin-menu,
#guestControls,
#userControls {
  gap: var(--space-xs);
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  
}

.modal {
  contain: layout paint;
}

.modal .modal-content {
  background: linear-gradient(165deg, var(--surface-1), var(--surface-2));
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.blizzard-render {
  animation: float-character-gpu 4.6s var(--ease-out) infinite;
  filter: none;
  transform: translateZ(0);
  will-change: transform;
}

@keyframes float-character-gpu {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-duration: 1ms;
    scroll-behavior: auto;
  }
}

@media (max-width: 1100px) {
  .content-container {
    width: 100%;
    max-width: 100vw;
    margin-left: 0;
    padding-inline: clamp(10px, 2vw, 18px);
  }

  .sidebar {
    box-shadow: 0 14px 36px rgba(2, 6, 23, 0.4);
  }
}

@media (max-width: 768px) {
  .content-wrapper {
    gap: var(--space-sm);
  }

  .card,
  .universal-top-container,
  .modal .modal-content {
    border-radius: var(--radius-sm);
  }
}
/* Inline migration helpers */
.u-row-gap-8 { display:flex; gap:8px; }
.u-center { align-items:center; }
.mobile-brand-logo { height:30px; filter: drop-shadow(0 0 5px rgba(56,189,248,0.5)); }
/* .mobile-header ahora tiene dos líneas de texto (kicker "Desde 2021" +
   nombre completo) sobre el video de fondo — un poco más chico que antes
   para que ambas líneas entren cómodas en la barra fija. */
.mobile-brand-text { display:block; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:.3px; font-size:.74rem; line-height:1.15; white-space:nowrap; }
.mobile-fb-link { background:#1877F2; color:#fff; text-decoration:none; padding:4px 8px; border-radius:6px; font-size:.7rem; font-weight:600; display:flex; align-items:center; gap:4px; }
.modal-z-5000{z-index:5000;}
.modal-z-9999{z-index:9999;}
.modal-z-4000{z-index:4000;}
.video-modal-content { max-width:1000px; width:90vw; background:#000; border:1px solid var(--primary-color); }
.video-modal-header { background:#111; border-bottom:1px solid #333; }
.video-modal-title { margin:0; color:var(--text-primary); font-size:1.1rem; }
.video-modal-body { padding:0; display:flex; justify-content:center; align-items:center; background:#000; min-height:400px; }
.video-player-container { width:100%; height:60vh; max-height:700px; display:flex; justify-content:center; }
/* Large inline migration block: auth templates */
.login-layout-shell { display:flex; width:900px; max-width:100%; min-height:550px; background:transparent;  box-shadow:0 10px 40px rgba(0,0,0,0.7); overflow:hidden; border:1px solid rgba(255,255,255,0.1); }
.login-visual-shell { flex:1; background:transparent; display:flex; align-items:center; justify-content:center; padding:20px; border-right:1px solid rgba(255,255,255,0.05); }
.warlock-img-shell { width:auto; height:auto; max-width:100%; max-height:500px; object-fit:none; filter:drop-shadow(0 0 15px rgba(56,189,248,0.1)); }
.login-form-shell { flex:1.3; padding:40px; display:flex; flex-direction:column; justify-content:center; background:transparent; min-height:480px; }
.login-tab-row { display:flex; width:100%; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:25px; }
.login-tab-btn { flex:1; border:none; border-radius:0; padding:12px; font-size:1rem; font-weight:700; background:transparent; }
.login-tab-btn-active { border-bottom:2px solid var(--primary-color); color:var(--primary-color); }
.login-tab-btn-muted { color:var(--text-muted); }
.w-100 { width:100%; }
.form-gap-20 { margin-bottom:20px; }
.label-soft-sm { color:var(--text-muted); font-size:.8rem; }
.form-control-dark-md { background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.1); padding:12px; font-size:1rem; }
.btn-auth-main { margin-top:10px; width:100%; padding:14px; font-size:1rem; letter-spacing:1px; box-sizing:border-box; }
.btn-auth-discord { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; width:100%; background:#5865F2; border-color:#4752C4; color:#fff; text-decoration:none; padding:14px; font-weight:600; font-size:1rem; letter-spacing:1px; box-sizing:border-box; }
.discord-icon-white { width:22px; filter:brightness(0) invert(1); }
.auth-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.no-mb { margin-bottom:0; }

/* Auto-migrated inline styles */
.inl-1 { display:none; }
.inl-2 { display:none; }
.inl-3 { display:none; }
.inl-4 { display:none; }
.inl-5 { display:none; }
.inl-6 { display:none; }
.inl-7 { text-align: center; margin: 20px 0; display: flex; align-items: center; gap: 10px; }
.inl-8 { flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.inl-9 { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; }
.inl-10 { flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.inl-11 { margin-top: 20px; text-align: center; }
.inl-12 { color:var(--text-muted); text-decoration:underline; }
.inl-13 { font-size:0.75rem; }
.inl-14 { font-size:0.75rem; }
.inl-15 { grid-column: span 2; margin-bottom:0; }
.inl-16 { font-size:0.75rem; }
.inl-17 { background: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.1); }
.inl-18 { grid-column: span 2; margin-bottom:0; }
.inl-19 { font-size:0.75rem; }
.inl-20 { background: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.1); }
.inl-21 { margin-bottom:0; }
.inl-22 { font-size:0.75rem; }
.inl-23 { background: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.1); }
.inl-24 { margin-bottom:0; }
.inl-25 { font-size:0.75rem; }
.inl-26 { background: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.1); }
.inl-27 { background: rgba(0,0,0,0.4); padding: 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05); text-align: center; margin-top: 15px; }
.inl-28 { display:flex; align-items:center; justify-content:center; gap:10px; }
.inl-29 { width:20px; height:20px; cursor:pointer; }
.inl-30 { font-size:0.8rem; color:var(--text-muted); }
.inl-31 { margin-top: 15px; width: 100%; background: #10b981; border-color: #059669; padding: 14px; font-size: 1rem; letter-spacing: 1px; box-sizing: border-box; }
.inl-32 { text-align: center; margin: 15px 0; display: flex; align-items: center; gap: 10px; }
.inl-33 { flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.inl-34 { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; }
.inl-35 { flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.inl-36 { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; width: 100%; background: #5865F2; border-color: #4752C4; color: #fff; text-decoration: none; padding: 14px; font-weight: 600; font-size: 1rem; letter-spacing: 1px; box-sizing: border-box; }
.inl-37 { width: 22px; filter: brightness(0) invert(1); }
.inl-38 { width: 850px; max-width: 100%; margin: 0 auto; }
.inl-39 { display:flex; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 20px; }
.inl-40 { flex:1; border:none; border-bottom: 2px solid var(--primary-color); border-radius:0; color:var(--primary-color); padding: 10px; font-size: 0.95rem; font-weight: 700; background:transparent; }
.inl-41 { flex:1; border:none; border-radius:0; color:var(--text-muted); padding: 10px; font-size: 0.95rem; font-weight: 700; background:transparent; }
.inl-42 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 15px; align-items: start; }
.inl-43 { display: flex; flex-direction: column; gap: 15px; }
.inl-44 { background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(129, 140, 248, 0.1)); background-size: cover; background-position: center; border-radius: 12px; padding: 20px; border: 1px solid rgba(56, 189, 248, 0.2); position: relative; transition: background-image .3s ease; }
.acc-subtitle { margin: -6px 0 16px; color: var(--text-muted); font-size: 0.85rem; line-height: 1.4; }
.acc-connections-hint { margin: -6px 0 12px; color: var(--text-muted); font-size: 0.78rem; line-height: 1.35; }

/* ---- Rediseño "Mi Cuenta": hero banner + fila de tarjetas ---- */
.acc-hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: 22px 26px;
    border-radius: 18px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(129, 140, 248, 0.12));
    background-size: cover;
    background-position: center;
    overflow: hidden;
    min-height: 140px;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    transition: background-image .3s ease;
}
.acc-role-pill {
    position: absolute;
    top: 14px;
    right: 16px;
    background: var(--primary-color);
    color: #000;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.4);
}
.acc-hero-main { display: flex; align-items: center; gap: 20px; width: 100%; flex-wrap: wrap; }
.acc-avatar-block { display: flex; align-items: center; gap: 14px; }
.acc-avatar-label { cursor: pointer; display: inline-block; }
.acc-avatar-img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-color); box-shadow: 0 6px 18px rgba(0,0,0,0.55); }
.acc-avatar-input { display: none; }
.acc-bnet-render-wrap { display: none; }
.acc-bnet-render { height: 120px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.acc-identity-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acc-name-row { display: flex; align-items: center; gap: 8px; }
.acc-name { margin: 0; color: #fff; font-size: 1.6rem; font-weight: 800; text-transform: capitalize; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.acc-name-input { display: none; width: 180px; text-align: left; font-size: 1.1rem; padding: 6px 10px; }
.acc-name-edit-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 0; }
.acc-name-save-btn { display: none; background: #10b981; border: none; color: #000; padding: 5px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.acc-game-data { font-size: 1rem; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.65); }
.acc-bnet-alters { font-size: 0.75rem; color: var(--text-muted); background: rgba(0,0,0,0.55); border-radius: 6px; padding: 3px 8px; display: none; width: fit-content; }

.acc-cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 16px; align-items: start; }
.acc-card { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 16px; }
.acc-card-title { margin: 0 0 12px; color: #fff; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
.acc-stats-grid { display: none; grid-template-columns: 1fr 1fr; gap: 10px; }
.acc-stat-box { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 12px; border-radius: 10px; text-align: center; }
.acc-stat-label { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; }
.acc-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--primary-color); }
.acc-stat-value-green { color: #34d399; }
.acc-token-icon { width: 18px; vertical-align: middle; margin-top: -3px; }

.acc-conn-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; background: rgba(88, 101, 242, 0.05); border: 1px solid rgba(88, 101, 242, 0.2); padding: 10px 12px; border-radius: 10px; }
.acc-conn-row:last-child { margin-bottom: 0; }
.acc-conn-info { display: flex; align-items: center; gap: 10px; }
.acc-conn-icon { width: 26px; filter: drop-shadow(0 0 5px rgba(88, 101, 242, 0.4)); }
.acc-conn-icon-bnet { filter: invert(1) drop-shadow(0 0 5px rgba(0, 174, 255, 0.4)); }
.acc-conn-name { color: #fff; font-weight: 700; font-size: 0.88rem; }
.acc-conn-status { color: var(--text-muted); font-size: 0.74rem; }
.acc-conn-btn { padding: 5px 10px; border-radius: 7px; text-decoration: none; font-size: 0.74rem; font-weight: 700; }
.acc-conn-btn-discord { border-color: #5865F2; color: #5865F2; }
.acc-conn-btn-bnet { border-color: #00aeff; color: #00aeff; }
.acc-card-sim:empty { display: none; padding: 0; border: none; background: none; }

@media (max-width: 600px) {
    .acc-hero-main { flex-direction: column; align-items: flex-start; }
    .acc-name { font-size: 1.3rem; }
}
.inl-45 { position: absolute; top: 15px; right: 15px; }
.inl-46 { background: var(--primary-color); color: #000; font-size: 0.7rem; font-weight: 800; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; box-shadow: 0 2px 10px rgba(56, 189, 248, 0.4); }
.inl-47 { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 15px; min-height: 140px; }
.inl-48 { text-align: center; }
.inl-49 { cursor: pointer; display: inline-block; }
.inl-50 { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-color); box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.inl-51 { display: none; }
.inl-52 { display:none; }
.inl-53 { height: 140px; }
.inl-54 { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.inl-55 { margin: 0; color: #fff; font-size: 1.3rem; text-transform: capitalize; text-shadow: 0 2px 8px rgba(0,0,0,.65); }
.inl-56 { display:none; width:150px; text-align:center; font-size:1rem; padding: 5px; }
.inl-57 { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1rem; padding: 0; }
.inl-58 { display:none; background:#10b981; border:none; color:#000; padding:4px 8px; border-radius:4px; font-size:0.8rem; cursor:pointer; }
.inl-59 { text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 4px; background: rgba(0,0,0,0.6); border-radius: 4px; display: none; }
.inl-60 { background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.05); padding:15px; border-radius:12px; }
.inl-61 { font-size:1.1rem; font-weight:bold; color:#fff; text-align: center; margin-bottom: 15px; }
.inl-62 { display:none; grid-template-columns: 1fr 1fr; gap: 10px; }
.inl-63 { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 10px; border-radius: 8px; text-align: center; }
.inl-64 { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; font-weight: 600; }
.inl-65 { font-size: 1.4rem; font-weight: bold; color: var(--primary-color); }
.inl-66 { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 10px; border-radius: 8px; text-align: center; }
.inl-67 { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; font-weight: 600; }
.inl-68 { font-size: 1.4rem; font-weight: bold; color: #34d399; }
.inl-69 { width: 18px; vertical-align: middle; margin-top: -3px; }
.inl-70 { display: flex; flex-direction: column; gap: 15px; }
.inl-71 { background: rgba(0,0,0,0.3); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); }
.inl-72 { margin-top:0; margin-bottom:15px; color:#fff; font-size:1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
.inl-73 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; background: rgba(88, 101, 242, 0.05); border: 1px solid rgba(88, 101, 242, 0.2); padding: 10px 12px; border-radius: 8px; }
.inl-74 { display: flex; align-items: center; gap: 10px; }
.inl-75 { width: 28px; filter: drop-shadow(0 0 5px rgba(88, 101, 242, 0.4)); }
.inl-76 { color: #fff; font-weight: bold; font-size: 0.9rem; }
.inl-77 { color: var(--text-muted); font-size: 0.75rem; }
.inl-78 { border-color: #5865F2; color: #5865F2; padding: 4px 10px; border-radius: 6px; text-decoration: none; font-size: 0.75rem; font-weight: 600; }
.inl-79 { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 174, 255, 0.05); border: 1px solid rgba(0, 174, 255, 0.2); padding: 10px 12px; border-radius: 8px; }
.inl-80 { display: flex; align-items: center; gap: 10px; }
.inl-81 { width: 28px; filter: invert(1) drop-shadow(0 0 5px rgba(0, 174, 255, 0.4)); }
.inl-82 { color: #fff; font-weight: bold; font-size: 0.9rem; }
.inl-83 { color: var(--text-muted); font-size: 0.75rem; }
.inl-84 { border-color: #00aeff; color: #00aeff; padding: 4px 10px; border-radius: 6px; text-decoration: none; font-size: 0.75rem; font-weight: 600; }
.inl-85 { display:none; max-height: 400px; overflow-y: auto; padding-right: 5px; }
.inl-86 { text-align:center; padding: 30px; color:var(--text-muted); }
.inl-87 { display: flex; gap: 15px; margin-top: 20px; justify-content: flex-end; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.05); }
.inl-88 { border-color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.inl-89 { width: 400px; text-align:center; padding: 20px; }
.inl-90 { width:80px; height:80px; margin-bottom: 25px; }
.inl-91 { color:#fff; margin-top:0; }
.inl-92 { color:var(--text-muted); margin-bottom:30px; font-size:0.95rem; }
.inl-93 { background: rgba(255,255,255,0.05); border-radius: 10px; padding: 5px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 15px; }
.inl-94 { width: 0%; height: 10px; background: var(--primary-color); border-radius: 8px; transition: width 0.3s ease; }
.inl-95 { color: var(--primary-hover); font-weight: 700; font-size: 1.1rem; font-family: monospace; }
.inl-96 { z-index: 4500; }
.inl-97 { height: 35px; margin-right: 15px; }
.inl-98 { margin:0; color:var(--text-primary); }
.inl-99 { z-index: 4500; }
.inl-100 { max-width: 950px; width: 95%; min-height: 650px; display: flex; flex-direction: column; }
.inl-101 { height: 35px; margin-right: 15px; }
.inl-102 { margin:0; color:var(--text-primary); }
.inl-103 { padding: 25px; flex: 1; display: flex; flex-direction: column; }
.inl-104 { display:none; }
.inl-105 { display:none; }
}