/* ==========================================================================
   VSHELL — shell estilo Vercel (rediseño): barra lateral + barra superior
   --------------------------------------------------------------------------
   Lo activa cada pagina con $GLOBALS['rig_vshell'] = true y body.vshell.
   nav.php envuelve su navbar + subnav en <aside class="vshell-side"> sin
   cambiar su HTML: aqui se "aplanan" con display:contents y se recolocan en
   columna con `order`. Asi el JS existente (buscador, modo/season,
   notificaciones, menu de usuario) sigue funcionando igual.
   ========================================================================== */
:root { --vshell-w: 248px; }

body.vshell { padding-left: var(--vshell-w); }

/* ── Barra lateral ─────────────────────────────────────────────────────── */
.vshell-side {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: var(--vshell-w);
    z-index: var(--z-navbar, 100);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-7) var(--sp-5) 0;
    background: var(--bg-dark);
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
    scrollbar-width: thin;
}
/* "Aplanar" los contenedores de nav.php: sus hijos pasan a ser filas de la barra */
.vshell-side .navbar,
.vshell-side .nav-container,
.vshell-side .game-subnav,
.vshell-side .game-subnav-container { display: contents; }

/* Orden de arriba abajo */
.vshell-side .logo                 { order: 1; }
.vshell-side .game-subnav-group    { order: 2; }
.vshell-side .vshell-player        { order: 3; }
.vshell-side .game-subnav-filters  { order: 4; }
.vshell-side .game-subnav-links    { order: 5; }
.vshell-side .nav-links            { order: 6; }
.vshell-side .nav-right-group      { order: 7; margin-top: auto; }

/* Logo */
.vshell-side .logo { display: flex; align-items: center; height: 40px; margin-bottom: var(--sp-3); padding: 0 var(--sp-4); font-size: var(--fs-xl); white-space: nowrap; }

/* Buscador */
.vshell-side .game-subnav-group,
.vshell-side .subnav-search-wrap { width: 100%; }
.vshell-side .subnav-search-form { position: relative; isolation: isolate; width: 100%; height: 36px; padding: 0 var(--sp-4) 0 9px; gap: var(--sp-4); }
/* En la barra ya estamos en Valorant: sin su logo, la lupa queda en la columna de iconos */
.vshell-side .subnav-val-logo { display: none; }
.vshell-side .subnav-search-icon-svg { width: 16px; height: 16px; flex: none; }
.vshell-side .subnav-search-input { width: 100%; min-width: 0; }
.vshell-side .subnav-dropdown { left: 0; right: 0; min-width: 0; width: auto; }

/* Bloque del jugador */
.vshell-player { margin: var(--sp-5) 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.vshell-who {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center;
    padding: var(--sp-3) 2px; border-radius: var(--radius-sm);   /* avatar alineado con la columna de iconos */
}
.vshell-who-ava { width: 32px; height: 32px; border-radius: var(--radius-circle); object-fit: cover; background: var(--bg-input); }
.vshell-who-txt { min-width: 0; }
.vshell-who-txt b { display: block; font-size: var(--fs-md); color: var(--text-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vshell-who-txt small { display: flex; align-items: center; gap: 3px; font-size: var(--fs-xs); color: var(--text-gray); white-space: nowrap; overflow: hidden; }
.vshell-who-rank { width: 14px; height: 14px; object-fit: contain; }
.vshell-who-flag { width: 18px; height: auto; border-radius: 2px; }
.vshell-bio { font-size: var(--fs-xs); color: var(--text-gray); padding: 0 var(--sp-2); line-height: var(--lh-snug); }

/* Enlaces (pestañas del perfil + Valorant + general) */
.vshell-tabs { display: flex; flex-direction: column; gap: 1px; }
.vshell-link,
.vshell-side .game-subnav-links a,
.vshell-side .nav-links a {
    position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--sp-4);
    height: 34px; padding: 0 var(--sp-4); border-radius: 6px;
    color: var(--text-gray); text-decoration: none;
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    text-transform: none; letter-spacing: 0;
    transition: color var(--t-fast), background var(--t-fast);
}
.vshell-link:hover,
.vshell-side .game-subnav-links a:hover,
.vshell-side .nav-links a:hover { color: var(--text-white); background: rgba(255,255,255,.04); }
.vshell-link.is-on,
.vshell-side .game-subnav-links a.active,
.vshell-side .nav-links a.active { color: var(--text-white); background: rgba(255,255,255,.07); }
.vshell-side .game-subnav-links a.active::after { display: none; }
/* Acento de marca en el elemento activo: barrita a la izquierda + icono */
.vshell-link.is-on,
.vshell-side .game-subnav-links a.active,
.vshell-side .nav-links a.active { box-shadow: inset 2px 0 0 var(--brand-accent); }
.vshell-link.is-on .ic { color: var(--brand-accent); opacity: 1; }
.vshell-link .ic { width: 16px; height: 16px; opacity: .85; }
.vshell-link:focus-visible,
.vshell-side .game-subnav-links a:focus-visible,
.vshell-side .nav-links a:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }

.vshell-side .game-subnav-links,
.vshell-side .nav-links { display: flex; flex-direction: column; gap: 1px; overflow: visible; white-space: normal; }
.vshell-side .game-subnav-links::before,
.vshell-side .nav-links::before,
.vshell-side .game-subnav-filters::before {
    display: block; padding: var(--sp-7) var(--sp-4) var(--sp-2);
    font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-medium);
}
.vshell-side .game-subnav-links::before { content: "Valorant"; }
.vshell-side .nav-links::before { content: "RelaxInGame"; }
/* En la barra ya estamos en Valorant: sobra el enlace de juego y su separador */
.vshell-side .nav-game-link,
.vshell-side .nav-separator { display: none !important; }

/* Filtros de modo y season: vshell-topbar.php los mueve a la barra superior
   (a la izquierda del sync). Mismos <select>, mismo JS. */
.vshell-top .game-subnav-filters { margin-left: auto; gap: var(--sp-2); }
.vshell-top .game-subnav-filters > script { display: none; }
.vshell-top .game-subnav-filters + .vshell-sync { margin-left: 0; }
/* Campana de notificaciones en la barra superior (la mueve vshell-topbar.php) */
.vshell-top .nav-notif-wrap { margin-left: auto; }
.vshell-top .nav-notif-wrap ~ .game-subnav-filters,
.vshell-top .nav-notif-wrap ~ .vshell-sync { margin-left: 0; }
.vshell-top .nav-notif-btn { width: 32px; height: 32px; border-radius: 6px; color: var(--text-gray); }
.vshell-top .nav-notif-btn:hover { color: var(--text-white); background: rgba(255,255,255,.06); }
.vshell-top .nav-notif-dropdown { top: calc(100% + 10px); bottom: auto; right: 0; left: auto; }
.vshell-top .game-subnav-filters .cselect-trigger {
    min-width: 0; height: 30px; padding: 0 var(--sp-4); gap: var(--sp-2);
    background: none; border: 1px solid var(--border-subtle); font-size: var(--fs-sm);
}
.vshell-top .game-subnav-filters .cselect-trigger:hover { border-color: var(--border-hover); }
.vshell-top .game-subnav-filters .cselect.open .cselect-trigger { background: rgba(255,255,255,.06); }
.vshell-top .game-subnav-filters .cselect.active .cselect-trigger { background: none; border-color: var(--brand-accent); color: var(--text-white); }
.vshell-top .game-subnav-filters .cselect-menu { top: calc(100% + 6px); left: auto; right: 0; }

/* Cuenta y notificaciones abajo; los desplegables se abren hacia arriba */
.vshell-side .nav-right-group {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-5) 0 var(--sp-1); margin-top: auto; border-top: 1px solid var(--border-subtle);
    /* siempre visible abajo aunque la barra tenga scroll */
    position: sticky; bottom: 0; z-index: 3;   /* encima de los enlaces (son posicionados y van despues en el HTML) */
    margin: auto calc(-1 * var(--sp-5)) 0; padding: var(--sp-5) var(--sp-5) var(--sp-5);
    background: var(--bg-dark);
}
.vshell-side .nav-user-wrap { flex: 1; min-width: 0; }
.vshell-side .nav-user-btn { width: 100%; justify-content: flex-start; padding: 6px var(--sp-5) 6px 7px; gap: var(--sp-4); }
/* Sin sesión: Log in directo (sin menú). El icono va en el circulo del avatar */
.vshell-side .vshell-login { text-decoration: none; }
.vshell-side .vshell-login-ic { display: inline-grid; place-items: center; background: rgba(0,0,0,.22); color: var(--text-white); }
.vshell-side .nav-notif-dropdown,
.vshell-side .nav-user-dropdown { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
/* El menu de la cuenta ocupa el ancho del boton: si es mas ancho (min-width de nav.css)
   se sale por la izquierda y la barra (overflow) lo recorta. */
.vshell-side .nav-user-wrap .nav-user-dropdown { left: 0; right: 0; min-width: 0; }
.vshell-side .nav-user-wrap::after { min-width: 0; }
/* Puente invisible entre el boton y el menu: en la barra lateral el menu se abre
   HACIA ARRIBA, asi que el puente va encima del boton (no debajo) y cubre el hueco
   de 8px; asi el raton no "sale" del menu al subir hacia el. */
.vshell-side .nav-user-wrap::after { top: auto; bottom: 100%; left: 0; right: 0; width: auto; height: 12px; }

/* ── Barra superior (dentro del contenido) ─────────────────────────────── */
.vshell-top {
    position: sticky; top: 0; z-index: var(--z-subnav, 90);
    height: 52px; display: flex; align-items: center; gap: var(--sp-5);
    padding: 0 var(--sp-9);
    background: color-mix(in srgb, var(--bg-dark) 92%, transparent);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-sm); color: var(--text-gray);
}
.vshell-crumb { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; max-width: calc(50% - min(210px, 17%) - 56px); }
.vshell-crumb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vshell-crumb b { color: var(--text-white); font-weight: var(--fw-semibold); }
.vshell-crumb a { color: var(--text-gray); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--t-fast); }
.vshell-crumb a:hover { color: var(--text-white); }
.vshell-crumb-sep { color: var(--text-muted); }
.vshell-crumb-root, .vshell-crumb b, .vshell-crumb-sep { flex: none; }   /* solo se recorta el nombre del jugador */

/* Buscador en el centro de la barra superior (lo mueve vshell-topbar.php) */
.vshell-top .vshell-search {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: min(420px, 34%); margin: 0;
}
.vshell-top .vshell-search .subnav-search-wrap,
.vshell-top .vshell-search .subnav-search-form { width: 100%; }
.vshell-top .vshell-search .subnav-search-form { height: 32px; padding: 0 var(--sp-4); gap: var(--sp-3); background: rgba(255,255,255,.03); border-color: var(--border-subtle); border-radius: 6px; }
.vshell-top .vshell-search .subnav-search-form:focus-within { border-color: var(--border-hover); }
.vshell-top .vshell-search .subnav-val-logo { display: none; }
.vshell-top .vshell-search .subnav-search-icon-svg { width: 14px; height: 14px; flex: none; }
.vshell-top .vshell-search .subnav-search-input,
.vshell-top .vshell-search .subnav-search-input:focus { width: 100%; min-width: 0; font-size: var(--fs-sm); }
.vshell-top .vshell-search .subnav-dropdown { left: 0; right: 0; min-width: 0; width: auto; }
@media (max-width: 1280px) { .vshell-top .vshell-search { width: min(320px, 28%); } .vshell-crumb { max-width: calc(50% - min(160px, 14%) - 56px); } }
.vshell-head h1::after { content: ""; display: block; width: 32px; height: 3px; margin-top: var(--sp-3); border-radius: 2px; background: var(--brand-accent); }
.vshell-sync { margin-left: auto; }
.vshell-burger {
    display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; margin-left: calc(-1 * var(--sp-3));
    background: none; border: 0; border-radius: 6px; color: var(--text-gray); cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
}
.vshell-burger:hover { color: var(--text-white); background: rgba(255,255,255,.06); }
.vshell-burger:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }
.vshell-burger .ic { width: 18px; height: 18px; }

/* Escritorio: barra lateral retractil. Plegada (body.vshell-collapsed) queda
   como un carril de iconos centrados; al pasar el raton (o con el foco dentro)
   se expande por encima del contenido sin moverlo. Se recuerda en localStorage.
   R = carril sin hover. */
:root { --vshell-rail: 60px; }
.vshell-side .vshell-ic { width: 16px; height: 16px; flex: none; opacity: .85; }
@media (min-width: 1001px) {
    body.vshell { transition: padding-left var(--t-normal) var(--ease-out); }
    body.vshell.vshell-collapsed { padding-left: var(--vshell-rail); }
    body.vshell-collapsed .vshell-side {
        width: var(--vshell-rail); overflow-x: hidden;
        transition: width var(--t-normal) var(--ease-out), box-shadow var(--t-normal);
    }
    body.vshell-collapsed .vshell-side:hover,
    body.vshell-collapsed .vshell-side:focus-within {
        width: var(--vshell-w); box-shadow: var(--shadow-xl);
        transition-delay: 80ms;   /* evita abrirla al cruzarla con el raton */
    }

    /* ── Carril ───────────────────────────────────────────────────────────
       Misma geometria que desplegada (mismas alturas y la misma columna de
       iconos, centrada en el carril): al expandir nada salta, solo aparece
       el texto. Aqui solo se oculta texto y se cambia el resaltado. */
    body.vshell-collapsed .vshell-side > :not(script) { min-width: calc(var(--vshell-w) - 2 * var(--sp-5)); }
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) { scrollbar-width: none; }
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within)::-webkit-scrollbar { display: none; }

    /* Logo → "RiG" (Ri blanco + G de marca, como Relax/InGame), centrado en el carril */
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) .logo { font-size: 0; padding-left: 4px; }
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) .logo::before { content: "Ri"; font-size: var(--fs-lg); color: var(--text-white); }
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) .logo::after  { content: "G";  font-size: var(--fs-lg); color: var(--brand-accent); }

    /* Texto fuera (se conserva su sitio) */
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) :is(
        .subnav-search-input, .vshell-who-txt, .vshell-who-flag, .vshell-bio
    ) { opacity: 0; }
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) :is(.vshell-link, .game-subnav-links a, .nav-links a) { color: transparent; background: none; box-shadow: none; }
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) :is(.vshell-link .ic, .vshell-ic) { color: var(--text-gray); }

    /* Buscador y seleccionado: cuadrado de 36px alrededor del icono */
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) .subnav-search-form { background: none; border-color: transparent; }
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) .subnav-search-form::before,
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) :is(.vshell-link.is-on, .game-subnav-links a.active, .nav-links a.active)::before {
        content: ""; position: absolute; left: 0; top: 50%; width: 36px; height: 36px; transform: translateY(-50%);
        border-radius: 6px; pointer-events: none; z-index: -1;
    }
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) .subnav-search-form::before { left: -1px; border: 1px solid var(--border-subtle); }
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) :is(.vshell-link.is-on, .game-subnav-links a.active, .nav-links a.active)::before { background: rgba(255,255,255,.08); }
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) :is(.vshell-link.is-on .ic, a.active .vshell-ic) { color: var(--brand-accent); opacity: 1; }

    /* Usuario: solo su avatar, en la columna de iconos */
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) .nav-user-btn { background: none; color: transparent; box-shadow: none; }
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) .nav-user-avatar-sm { color: var(--text-white); }
    /* Sin sesión: el icono de Log in (en su circulo de color) se ve en el carril */
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) .vshell-login-ic { background: var(--brand-accent); }

    /* Titulos de grupo → linea corta centrada en el carril (misma altura que el titulo) */
    body.vshell-collapsed .vshell-side:not(:hover):not(:focus-within) :is(.game-subnav-links, .nav-links)::before {
        color: transparent;
        background: linear-gradient(var(--border-subtle), var(--border-subtle)) 6px 70% / 24px 1px no-repeat;
    }
}
body.vshell-noanim, body.vshell-noanim .vshell-side { transition: none !important; }

/* ── Cabecera de pagina ────────────────────────────────────────────────── */
.vshell-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-9);
    padding: var(--sp-9) var(--sp-9) var(--sp-7);
}
.vshell-head.has-banner {
    padding-top: 96px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-dark) 40%, transparent), var(--bg-dark)), var(--vshell-banner) center / cover no-repeat;
}
.vshell-head h1 { font-size: 1.75rem; font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1.15; }
.vshell-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-gray); }
.vshell-facts b { color: var(--text-white); font-weight: var(--fw-semibold); }
.vshell-chart { flex: 0 1 460px; min-width: 280px; }   /* se encoge si los datos de la izquierda necesitan sitio */

/* Vitrina de logros en la cabecera (los que el jugador elige en Achievements, máx. 4) */
.vshell-showcase { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); }
/* Solo el icono; el nombre sale en un tooltip al pasar el raton (o al enfocar) */
.vshell-pin {
    position: relative; flex: none;
    display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px;
    color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 16%, rgba(20,20,22,.6));
    border: 1px solid color-mix(in srgb, var(--brand-accent) 32%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    text-decoration: none; transition: transform var(--t-fast), border-color var(--t-fast);
}
.vshell-pin:hover, .vshell-pin:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand-accent) 60%, transparent); outline: none; }
.vshell-pin::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
    width: max-content; max-width: 220px; padding: 6px 10px; border-radius: 8px;
    background: var(--bg-tooltip, #0d0f14); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 30px -12px rgba(0,0,0,.85);
    font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--text-white); white-space: nowrap;
    opacity: 0; pointer-events: none; z-index: 50; transition: opacity .14s, transform .14s;
}
.vshell-pin:hover::after, .vshell-pin:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.vshell-pin-more {
    display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-md);
    border: 1px dashed rgba(255,255,255,.16); font-size: var(--fs-xs); color: var(--text-gray); text-decoration: none;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.vshell-pin-more b { font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-white); }
.vshell-pin-more:hover { color: var(--text-white); border-color: rgba(255,255,255,.35); }

/* ── Contenido ─────────────────────────────────────────────────────────── */
.vshell .perfil-container { max-width: none; padding: var(--sp-5) var(--sp-9) 80px; }
/* Los tooltips de ayuda (.sec-help) no deben ensanchar la pagina en movil */
.vshell .perfil-container { overflow-x: clip; }

/* ── Paneles (todas las paginas del perfil) ─────────────────────────────
   Filas de paneles con borde fino y cabecera separada por una linea; sin
   fondo de color. .res-sec = panel; su primer hijo = cabecera. */
.vshell { --pnl-gap: var(--sp-6); --pnl-bg: #161616; }   /* 14px entre paneles; fondo de tarjeta = el de Account (settings.css .st-card) */
.vshell .perfil-container { display: flex; flex-direction: column; gap: var(--pnl-gap); }
.vs-row   { display: grid; gap: var(--pnl-gap); align-items: start; }
/* Columna principal + lateral: 2/3 – 1/3 en todo el perfil (estandar 8+4 de 12) */
.vs-main  { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
/* Dos paneles lado a lado dentro de una columna (p. ej. Agents | Maps en la grande) */
.vs-pair  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pnl-gap); align-items: start; }
.vs-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vs-stack { display: flex; flex-direction: column; gap: var(--pnl-gap); min-width: 0; }

/* Panel */
.vshell .perfil-container .res-sec,
.vshell .perfil-container > .res-sec {
    min-width: 0; margin: 0; background: var(--pnl-bg);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
    padding: 0 var(--sp-7) var(--sp-7) !important;
}
/* Cabecera del panel = primer hijo (los .perfil-*-header) */
.vshell .res-sec > :first-child {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
    min-height: 48px; margin: 0 calc(-1 * var(--sp-7)) var(--sp-7);
    padding: var(--sp-3) var(--sp-7); border-bottom: 1px solid var(--border-subtle);
}
.vshell .res-sec .section-label { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.vshell .res-sec .ver-mas-link { font-size: var(--fs-xs); color: var(--text-gray); }
.vshell .res-sec .ver-mas-link:hover { color: var(--text-white); }

@media (max-width: 1280px) { .vs-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vs-3 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 1200px) { .vs-pair { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .vs-main, .vs-3 { grid-template-columns: 1fr; } .vs-3 > :last-child { grid-column: auto; } }

/* Resto de cards dentro del contenido (Agents, Maps, Weapons, Compare): misma superficie que los
   paneles — borde fino, fondo de tarjeta (--pnl-bg) y sin sombra */
.vshell .perfil-container .card,
.vshell .perfil-container .sidebar-card { background: var(--pnl-bg); box-shadow: none; border-color: var(--border-subtle); }
/* Mismo hueco entre tarjetas en Agents, Maps, Weapons y Compare (lista + panel de detalle) */
.vshell .perfil-container :is(.agents-layout, .maps-layout, .weapons-layout, .cmp-main, .cmp-area) { gap: var(--pnl-gap); }

/* Widgets de la pizarra (Stats): mismo panel, sin relleno ni sombra */
.vshell .wg.card { background: none; box-shadow: none; border-color: var(--border-subtle); }
.vshell .wg-head { padding: 0 var(--sp-7); border-bottom-color: var(--border-subtle); }
.vshell .wg-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); text-transform: none; letter-spacing: 0; }
.vshell .dash-head { margin: 0 0 var(--sp-7); }
.vshell .dash-head .section-label { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.vshell .perfil-stats-header .section-label { text-transform: none; letter-spacing: 0; }

/* ── Paginas publicas de Valorant (home, lineups, leaderboard, ...) ────────
   Mismo contenedor y cabecera que el perfil. Cada pagina conserva su <main>
   (.home-main, .lb-main, ...); aqui solo se igualan ancho y margenes. */
.vshell :is(.home-main, .lb-main, .tourn-main, .val-main, .player-main, .lineups-main) {
    max-width: none; margin: 0; padding: var(--sp-9) var(--sp-9) 80px; overflow-x: clip;
}
.vshell main .card { background: none; box-shadow: none; border-color: var(--border-subtle); }
/* Cabecera de pagina (.val-page-header, components/ui-shared.css) = la del perfil */
.vshell .val-page-header { margin-bottom: var(--sp-9); }
.vshell .val-page-header h1 { font-size: 1.75rem; font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1.15; margin-bottom: var(--sp-2); }
.vshell .val-page-header h1 span { color: inherit; }
.vshell .val-page-header h1::after { content: ""; display: block; width: 32px; height: 3px; margin-top: var(--sp-3); border-radius: 2px; background: var(--brand-accent); }
.vshell .val-page-sub { font-size: var(--fs-sm); color: var(--text-gray); }

/* Pestañas con subrayado (estilo Vercel) para los segmentados de acento del
   contenido (roles en Agents, categorias en Weapons, regiones en Leaderboard...).
   El indicador deslizante de js/seg-tabs.js pasa a ser el subrayado. */
.vshell main .seg.seg--accent {
    background: none; border: 0; border-radius: 0; padding: 0; gap: var(--sp-7);
}
.vshell main .seg.seg--accent .seg-btn {
    padding: var(--sp-3) 0; margin-bottom: -1px; border-radius: 0;
    border-bottom: 2px solid transparent; background: none;
    color: var(--text-gray); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.vshell main .seg.seg--accent .seg-btn:hover { color: var(--text-white); }
.vshell main .seg.seg--accent .seg-btn.active { background: none; color: var(--text-white); border-bottom-color: var(--brand-accent); }
.vshell main .seg.seg--accent .seg-slider { background: none; border-radius: 0; border-bottom: 2px solid var(--brand-accent); }
.vshell main .seg.seg--accent.has-slider .seg-btn.active { border-bottom-color: transparent; }
/* Fila de filtros: las pestañas apoyadas en una linea a todo el ancho; buscador/botones a la derecha */
.vshell :is(.val-filters, .lb-controls, .tourn-filters) { align-items: flex-end; border-bottom: 1px solid var(--border-subtle); }
.vshell :is(.val-filters, .lb-controls, .tourn-filters) > :not(.seg) { margin-bottom: var(--sp-3); }
.vshell .tourn-filters > .cselect { margin-left: auto; }
.vshell :is(.val-filters, .lb-controls, .tourn-filters) .cselect-trigger { min-width: 150px; height: 32px; padding: 0 var(--sp-4); background: none; border: 1px solid var(--border-subtle); border-radius: 6px; font-size: var(--fs-sm); }
.vshell :is(.val-filters, .lb-controls, .tourn-filters) .cselect.active .cselect-trigger { background: none; border-color: var(--brand-accent); }
.vshell :is(.val-filters, .lb-controls, .tourn-filters) .cselect-menu { left: auto; right: 0; }
.vshell .val-search { background: none; border-color: var(--border-subtle); border-radius: 6px; height: 32px; }
.vshell .val-search:focus { border-color: var(--border-hover); }

/* ── Movil: la barra lateral pasa a ser un panel que se abre con el boton ── */
.vshell-scrim { position: fixed; inset: 0; z-index: calc(var(--z-navbar, 100) - 1); background: rgba(0,0,0,.55); }
@media (max-width: 1000px) {
    body.vshell { padding-left: 0; }
    .vshell-side { left: calc(-1 * var(--vshell-w) - 12px); transition: left var(--t-normal) var(--ease-out); box-shadow: none; }
    body.vshell-open .vshell-side { left: 0; box-shadow: var(--shadow-xl); }
    .vshell-top { padding: 0 var(--sp-7); }
    .vshell-top { gap: var(--sp-3); }
    /* En movil: fila 1 = boton + buscador + sync; fila 2 = filtros. La ruta se oculta. */
    .vshell-top { flex-wrap: wrap; height: auto; min-height: 52px; padding-top: var(--sp-3); padding-bottom: var(--sp-3); row-gap: var(--sp-3); }
    .vshell-crumb { display: none; }
    .vshell-top .vshell-search { position: static; transform: none; width: auto; flex: 1 1 0; }
    .vshell-top .game-subnav-filters { order: 5; flex-basis: 100%; margin-left: 0; }
    /* Los filtros pasan a la 2ª fila, pegados a la IZQUIERDA: su menú se abre
       hacia la derecha (en escritorio se abre a la izquierda porque van a la
       derecha de la barra). Si no, el menú se salía por el borde izquierdo. */
    .vshell-top .game-subnav-filters .cselect-menu { left: 0; right: auto; max-width: calc(100vw - 2 * var(--sp-7)); }
    .vshell-head { flex-direction: column; align-items: stretch; padding: var(--sp-8) var(--sp-7) var(--sp-5); }
    .vshell-chart { width: 100%; flex: none; min-width: 0; }
    .vshell .perfil-container { padding: var(--sp-5) var(--sp-7) 60px; }
    .vshell :is(.home-main, .lb-main, .tourn-main, .val-main, .player-main, .lineups-main) { padding: var(--sp-7) var(--sp-7) 60px; }
}
@media (min-width: 1001px) { .vshell-scrim { display: none; } }


/* ── Contador de sync en la barra superior: mismo alto y borde que los filtros ── */
.vshell-top .vshell-sync {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    height: 30px; padding: 0 10px; margin-left: 0;
    background: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
    color: var(--text-gray); font-size: var(--fs-sm); line-height: 1;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.vshell-top .vshell-sync:hover { color: var(--text-white); border-color: var(--border-hover); }
.vshell-top .vshell-sync .sync-ico { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: none; }
.vshell-top .vshell-sync .sync-ico svg { width: 13px; height: 13px; stroke: currentColor; }
.vshell-top .vshell-sync #syncCountdownTimer { min-width: 3.4ch; text-align: left; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
.vshell-top .vshell-sync.is-clickable { cursor: pointer; }
.vshell-top .vshell-sync.is-clickable:hover { background: rgba(255,255,255,.04); }
.vshell-top .vshell-sync.is-syncing { opacity: .8; cursor: default; }
.vshell-top .vshell-sync.is-syncing svg { animation: syncSpin .8s linear infinite; }
@keyframes syncSpin { to { transform: rotate(360deg); } }