/* =====================================================================
   VERSIÓN 2 — «POKÉMON NEXUS» (rediseño, oct-2026)
   Solo la carga layouts/main_v2.php (<html data-version="2">), así que
   nada de aquí toca la versión 1. Va DESPUÉS de main.css: redefine los
   mismos tokens que usan todas las vistas (--bg-card, --text-main...), y
   así las páginas que aún no tienen diseño propio ya salen con la paleta
   nueva. Contrastes AA medidos con script (texto/fondo y chips).
   ===================================================================== */

/* Métricas de respaldo (mismo truco que la versión 1: sin CLS al cargar la fuente) */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Liberation Sans'); ascent-override: 90.49%; descent-override: 22.53%; line-gap-override: 0%; size-adjust: 107.06%; }
@font-face { font-family: 'Outfit Fallback'; src: local('Arial'), local('Liberation Sans'); ascent-override: 100.26%; descent-override: 26.07%; line-gap-override: 0%; size-adjust: 99.74%; }

/* Tipografía propia de la versión 2 para títulos: Chakra Petch (angulosa, de
   «consola»), autoalojada; solo el subconjunto latin (incluye á é í ó ú ñ ü ¿ ¡).
   font-display: optional, como el resto de la web: sin saltos al cargar. */
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: optional; src: url('/assets/webfonts/chakra-petch-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700 900; font-display: optional; src: url('/assets/webfonts/chakra-petch-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Fallback'; src: local('Arial'), local('Liberation Sans'); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }

/* ---------- Tokens: CLARO ---------- */
:root[data-version="2"] {
    --font-primary: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
    --font-secondary: 'Chakra Petch', 'Chakra Fallback', system-ui, sans-serif;
    --font-display: 'Chakra Petch', 'Chakra Fallback', system-ui, sans-serif;

    --bg-body: #eef2f8;
    --bg-body-outer: none;
    --bg-outer-fallback: #eef2f8;
    --dot-color: transparent;
    --hero-fade-rgb: 238, 242, 248;
    --bg-card: #ffffff;
    --bg-card-hover: #f4f7fb;
    --bg-input: #f5f7fb;
    --border-color: #d5deea;
    --text-main: #0c1626;
    --text-muted: #4a5970;
    --text-inverse: #ffffff;
    --primary: #1565d8;          /* azul de acción: texto blanco 5,4 */
    --primary-hover: #1257bb;
    --primary-glow: rgba(21, 101, 216, .2);
    --primary-text: #1259c3;     /* azul como texto: 6,5 sobre blanco */
    --accent: #ffd52a;           /* amarillo Nexus (botones principales) */
    --accent-text: #8a6500;      /* amarillo oscuro legible sobre claro: 5,3 */
    --accent-blue: #1565d8;
    --brand-deep: #e5b800;
    --on-brand: #1a1300;         /* texto sobre el amarillo: 13 */
    --link: #1259c3;
    --ok-text: #166534;
    --warn-text: #b45309;
    --text-soft: color-mix(in srgb, var(--text-muted) 62%, var(--text-main));
    --shadow-sm: 0 2px 8px rgba(9, 20, 40, .06);
    --shadow-md: 0 8px 22px rgba(9, 20, 40, .09);
    --shadow-lg: 0 16px 36px rgba(9, 20, 40, .14);
    --transition-fast: .18s ease;
    --transition-normal: .28s ease;

    --type-planta: #4ade80; --type-fuego: #f87171; --type-agua: #60a5fa;
    --type-electrico: #facc15; --type-veneno: #c084fc; --type-psiquico: #f472b6;
    --type-fantasma: #a78bfa; --type-normal: #9ca3af; --type-volador: #a5f3fc;
    --type-roca: #d97706; --type-tierra: #b45309; --type-lucha: #e11d48;
    --type-bicho: #84cc16; --type-siniestro: #4b5563; --type-hielo: #67e8f9;
    --type-dragon: #5e61f1; --type-acero: #94a3b8; --type-hada: #f9a8d4;
    --type-ink: #1c1a17;
    --type-planta-ink: #1c1a17; --type-fuego-ink: #1c1a17; --type-agua-ink: #1c1a17;
    --type-electrico-ink: #1c1a17; --type-veneno-ink: #1c1a17; --type-psiquico-ink: #1c1a17;
    --type-fantasma-ink: #1c1a17; --type-normal-ink: #1c1a17; --type-volador-ink: #1c1a17;
    --type-roca-ink: #1c1a17; --type-bicho-ink: #1c1a17; --type-hielo-ink: #1c1a17;
    --type-acero-ink: #1c1a17; --type-hada-ink: #1c1a17;
    --type-tierra-ink: #ffffff; --type-lucha-ink: #ffffff; --type-siniestro-ink: #ffffff; --type-dragon-ink: #ffffff;

    /* Propios de la versión 2 */
    --v2-cabecera: #ffffff;
    --v2-cabecera-borde: #dce4ef;
    --v2-superficie: #ffffff;
    --v2-tarjeta: #f6f8fc;
    --v2-tarjeta-hover: #eef3fa;
    --v2-amarillo: #ffd52a;
    --v2-amarillo-2: #f4be19;
    --v2-azul: #1565d8;
    --v2-cian: #0e8fa0;
    --v2-texto-2: #34445c;
    --v2-texto-3: #56657d;
    --v2-activo: #8a6500;        /* entrada activa del menú */
    --v2-radio: 14px;
    --v2-radio-s: 10px;
    --header-h: 62px;
    color-scheme: light;
}

/* ---------- Tokens: OSCURO (el del boceto) ---------- */
:root[data-version="2"][data-theme="dark"] {
    --bg-body: #050b14;
    --bg-outer-fallback: #050b14;
    --hero-fade-rgb: 5, 11, 20;
    --bg-card: #0f1b2d;
    --bg-card-hover: #142238;
    --bg-input: #0a1423;
    --border-color: #22344d;
    --text-main: #f5f7fc;
    --text-muted: #93a1b6;       /* 6,5 sobre tarjeta */
    --primary: #1565d8;
    --primary-hover: #1a72ec;
    --primary-glow: rgba(22, 141, 255, .25);
    --primary-text: #ffd52a;     /* en oscuro, la acción como texto es el amarillo: 11,9 */
    --accent-text: #ffd52a;
    --accent-blue: #168dff;
    --brand-deep: #d9a800;
    --on-brand: #141005;
    --link: #ffd52a;
    --ok-text: #4ade80;
    --warn-text: #fbbf24;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, .55);

    --v2-cabecera: #07101e;
    --v2-cabecera-borde: #142238;
    --v2-superficie: #0a1423;
    --v2-tarjeta: #101d30;
    --v2-tarjeta-hover: #142238;
    --v2-azul: #168dff;
    --v2-cian: #26d7e9;
    --v2-texto-2: #b4c1d4;
    --v2-texto-3: #93a1b6;
    --v2-activo: #ffd52a;
    color-scheme: dark;
}
:root[data-version="2"][data-theme="dark"] select option,
:root[data-version="2"][data-theme="dark"] select optgroup { background-color: #0f1b2d; color: #f5f7fc; }

/* ---------- Base ---------- */
[data-version="2"] body {
    background: var(--bg-body);
    background-image: none;
    font-family: var(--font-primary);
    color: var(--text-main);
    padding-bottom: 0;
}
[data-version="2"] .site-wrapper {
    max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
    background: var(--bg-body);
}
[data-version="2"] .container { max-width: 1536px; padding: 0 30px; }
/* Aire bajo la cabecera para TODAS las vistas (muchas de la versión 1 empiezan
   pegadas arriba); la portada lo anula porque su hero va a sangre. */
[data-version="2"] main.container.v2-main { padding-top: 22px; padding-bottom: 48px; }
[data-version="2"] main.container.v2-main > .v2-home { margin-top: -22px; }
[data-version="2"] h1, [data-version="2"] h2, [data-version="2"] .section-title { font-family: var(--font-display); }
[data-version="2"] :focus-visible { outline: 2px solid var(--v2-amarillo); outline-offset: 2px; }
.v2-saltar { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: var(--v2-amarillo); color: #141005; padding: 8px 14px; border-radius: 8px; font-weight: 800; }
.v2-saltar:focus { left: 12px; }

/* Botón principal del sitio: amarillo Nexus, texto oscuro, sin el corte de carta */
[data-version="2"] .btn-primary {
    background: var(--v2-amarillo); color: #141005; border-radius: var(--v2-radio-s);
    box-shadow: none; font-family: var(--font-display); font-weight: 800;
}
[data-version="2"] .btn-primary:hover { background: var(--v2-amarillo-2); transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(255, 213, 42, .55); }
[data-version="2"] .btn-primary::after { display: none; }
[data-version="2"] .card { border-radius: var(--v2-radio); }

/* ---------- Cabecera ---------- */
.v2-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--v2-cabecera);
    border-bottom: 1px solid var(--v2-cabecera-borde);
    transition: box-shadow var(--transition-normal);
}
.v2-header.bajado { box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .55); }
.v2-bar {
    max-width: 1536px; margin: 0 auto; height: var(--header-h);
    padding: 0 30px; display: flex; align-items: center; gap: 22px;
}
.v2-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: 0 0 auto; }
.v2-logo img { width: 40px; height: 40px; object-fit: contain; }
.v2-logo-txt { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 19px; line-height: .98; letter-spacing: -.01em; }
.v2-logo-txt span:first-child { color: var(--text-main); }
.v2-logo-txt span:last-child { color: var(--accent-text); }
[data-theme="dark"] .v2-logo-txt span:last-child { color: var(--v2-amarillo); }

.v2-nav { flex: 1 1 auto; min-width: 0; height: 100%; }
.v2-nav > ul { list-style: none; display: flex; align-items: stretch; gap: 4px; height: 100%; margin: 0; padding: 0; }
.v2-nav-item { position: relative; display: flex; }
.v2-nav-link {
    position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
    font-size: 14px; font-weight: 600; color: var(--text-main); text-decoration: none; white-space: nowrap;
}
.v2-caret { font-size: 9px; opacity: .8; transition: transform var(--transition-fast); }
.v2-nav-link:hover { color: var(--v2-activo); }
.v2-nav-link.activo { color: var(--v2-activo); }
.v2-nav-link.activo::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px;
    background: var(--v2-amarillo); border-radius: 3px 3px 0 0;
}

/* Desplegables: hover o foco dentro (teclado); en táctil, .abierto */
.v2-dd {
    position: absolute; top: calc(100% - 2px); left: -8px; z-index: 120;
    min-width: 330px; padding: 10px;
    background: var(--v2-superficie); border: 1px solid var(--border-color); border-radius: var(--v2-radio);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.v2-nav-item.v2-tiene:hover > .v2-dd,
.v2-nav-item.v2-tiene:focus-within > .v2-dd,
.v2-nav-item.abierto > .v2-dd { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.v2-nav-item.cerrado > .v2-dd { opacity: 0 !important; visibility: hidden !important; }
.v2-nav-item.v2-tiene:hover .v2-caret, .v2-nav-item.abierto .v2-caret { transform: rotate(180deg); }
.v2-dd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v2-dd > ul > li > a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--v2-radio-s); text-decoration: none; color: var(--text-main); }
.v2-dd > ul > li > a:hover, .v2-dd > ul > li > a:focus-visible { background: var(--v2-tarjeta-hover); }
.v2-dd-ico { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--v2-azul) 16%, transparent); color: var(--v2-azul); font-size: 14px; }
.v2-dd-txt { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; line-height: 1.25; }
.v2-dd-txt small { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
.v2-dd-vivo { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px; border-radius: var(--v2-radio-s); text-decoration: none; color: var(--text-main); background: var(--v2-tarjeta); border: 1px solid var(--border-color); font-size: 13.5px; font-weight: 700; }
.v2-dd-vivo span { display: flex; flex-direction: column; flex: 1 1 auto; }
.v2-dd-vivo small { font-weight: 500; color: var(--text-muted); font-size: 12px; }
.v2-dd-vivo > i { color: var(--v2-activo); }
.v2-dd-vivo img { object-fit: contain; }
.v2-dd-vivo:hover { border-color: var(--v2-amarillo); }
/* Videojuegos: desplegable ancho por bloques */
.v2-dd-cols { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 6px 14px; min-width: min(980px, calc(100vw - 60px)); padding: 16px 18px; left: 50%; transform: translate(-50%, 6px); }
.v2-nav-item.v2-tiene:hover > .v2-dd-cols, .v2-nav-item.v2-tiene:focus-within > .v2-dd-cols, .v2-nav-item.abierto > .v2-dd-cols { transform: translate(-50%, 0); }
.v2-dd-cab { display: block; font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--v2-activo); text-decoration: none; padding: 4px 8px 8px; }
.v2-dd-col ul a { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-main); text-decoration: none; }
.v2-dd-col ul a i { width: 16px; text-align: center; color: var(--v2-azul); font-size: 12.5px; }
.v2-dd-col ul a:hover, .v2-dd-col ul a:focus-visible { background: var(--v2-tarjeta-hover); }

/* Buscador */
.v2-buscador { position: relative; flex: 0 1 370px; min-width: 200px; }
.v2-buscador i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 15px; pointer-events: none; }
.v2-buscador input {
    width: 100%; height: 40px; padding: 0 14px 0 42px;
    background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--v2-radio-s);
    color: var(--text-main); font: 500 13.5px var(--font-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.v2-buscador input::placeholder { color: var(--text-muted); }
.v2-buscador input:focus { outline: none; border-color: var(--v2-azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-azul) 25%, transparent); }
.v2-buscador input::-webkit-search-cancel-button { filter: grayscale(1); }

.v2-acciones { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.v2-icono {
    position: relative; width: 40px; height: 40px; display: grid; place-items: center;
    background: none; border: 0; border-radius: 10px; cursor: pointer;
    color: var(--text-main); font-size: 18px;
}
.v2-icono:hover { background: var(--v2-tarjeta-hover); }
.v2-punto { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; border: 2px solid var(--v2-cabecera); }
.v2-punto[hidden] { display: none; }
.v2-avatar { width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 2px solid var(--v2-amarillo); background: var(--v2-tarjeta); cursor: pointer; overflow: hidden; margin-left: 4px; }
.v2-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-entrar { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; margin-left: 4px; border-radius: var(--v2-radio-s); background: var(--v2-amarillo); color: #141005; font: 800 14px var(--font-display); text-decoration: none; }
.v2-entrar:hover { background: var(--v2-amarillo-2); }
.v2-solo-movil { display: none; }

.v2-menu-wrap { position: relative; }
.v2-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 130; width: 340px; padding: 12px;
    background: var(--v2-superficie); border: 1px solid var(--border-color); border-radius: var(--v2-radio);
    box-shadow: var(--shadow-lg);
}
.v2-panel[hidden] { display: none; }
.v2-panel-tit { margin: 2px 4px 10px; font: 800 13px var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.v2-panel-vacio { margin: 8px 4px; color: var(--text-muted); font-size: 13.5px; }
.v2-novedades { display: grid; gap: 4px; }
.v2-novedad { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: var(--v2-radio-s); text-decoration: none; color: var(--text-main); }
.v2-novedad:hover { background: var(--v2-tarjeta-hover); }
.v2-novedad img { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.v2-novedad b { display: block; font-size: 13px; line-height: 1.3; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-novedad small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.v2-panel-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.v2-panel-pie a { color: var(--v2-activo); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.v2-panel-pie button { background: none; border: 1px solid var(--border-color); color: var(--text-main); border-radius: 8px; padding: 6px 10px; font: 600 12.5px var(--font-primary); cursor: pointer; }
.v2-panel-pie button[hidden] { display: none; }
.v2-panel-usuario { width: 250px; }
.v2-panel-usuario a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text-main); text-decoration: none; font-size: 14px; font-weight: 600; }
.v2-panel-usuario a i { width: 16px; text-align: center; color: var(--text-muted); }
.v2-panel-usuario a:hover { background: var(--v2-tarjeta-hover); }

/* ---------- Pie ---------- */
.v2-pie { margin-top: 40px; background: var(--v2-cabecera); border-top: 1px solid var(--v2-cabecera-borde); padding: 44px 0 30px; color: var(--text-muted); }
.v2-pie-rejilla { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.v2-pie-marca p { margin: 14px 0 16px; font-size: 14px; line-height: 1.65; max-width: 46ch; color: var(--v2-texto-2); }
.v2-redes { display: flex; flex-wrap: wrap; gap: 6px; }
.v2-redes a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: var(--v2-texto-2); background: var(--v2-tarjeta); border: 1px solid var(--border-color); transition: background var(--transition-fast), color var(--transition-fast); }
.v2-redes svg { width: 16px; height: 16px; fill: currentColor; }
.v2-redes a:hover, .v2-redes a:focus-visible { background: var(--marca); color: #fff; border-color: var(--marca); }
.v2-pie-tit { margin: 4px 0 12px; font: 800 13px var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--text-main); }
.v2-pie-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v2-pie-col a { color: var(--v2-texto-2); text-decoration: none; font-size: 14px; }
.v2-pie-col a:hover { color: var(--v2-activo); }
.v2-pie-prefs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; margin: 34px 0 22px; padding: 18px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.v2-pie-prefs .lang-switcher { margin: 0; }
.v2-pref { display: inline-flex; align-items: center; gap: 6px; }
.v2-pref-tit { font-size: 13px; font-weight: 700; color: var(--text-muted); margin-right: 4px; }
.v2-pref-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--v2-tarjeta); color: var(--text-main); font: 600 13px var(--font-primary); cursor: pointer; text-decoration: none; }
.v2-pref-btn.activo { background: var(--v2-amarillo); color: #141005; border-color: var(--v2-amarillo); }
.v2-visitas { text-align: center; font-size: 13.5px; color: var(--v2-texto-2); margin: 0 0 18px; }
.v2-visitas i { color: #ef4444; }
.v2-visitas strong { color: var(--text-main); font-variant-numeric: tabular-nums; }
.v2-pie-legal { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.v2-pie-legal p { margin: 0 0 8px; }
.v2-pie-legal strong { color: var(--v2-texto-2); }
.v2-copy { text-align: center; margin-top: 16px !important; }
.v2-copy span { color: #ef4444; }

/* Barra inferior y hoja del móvil (estructura de main.css, colores Nexus) */
[data-version="2"] .tabbar { background: var(--v2-cabecera); border-top: 1px solid var(--v2-cabecera-borde); }
[data-version="2"] .tabbar a.on, [data-version="2"] .tabbar a:hover { color: var(--v2-activo); }
[data-version="2"] .tabbar-hoja { background: var(--v2-superficie); border-color: var(--border-color); }
[data-version="2"] .tabbar-hoja h4 { color: var(--v2-activo); font-family: var(--font-display); }
[data-version="2"] .tabbar-hoja a { color: var(--text-main); }
[data-version="2"] .tabbar-hoja a i { color: var(--v2-azul); }
.v2-hoja-suelto { font-weight: 800; }

/* =====================================================================
   PORTADA (Views/v2/home.php) — fiel al boceto a 1536 px
   ===================================================================== */
.v2-home { display: grid; gap: 14px; padding-top: 0; }

/* Hero a sangre */
.v2-hero {
    position: relative; margin: 0 calc(50% - 50vw); overflow: hidden; isolation: isolate;
    background:
        radial-gradient(120% 90% at 78% 30%, rgba(76, 52, 160, .55), transparent 60%),
        radial-gradient(60% 70% at 15% 100%, rgba(22, 141, 255, .18), transparent 70%),
        linear-gradient(180deg, #0b1230 0%, #070d1f 100%);
    border-bottom: 1px solid #142238;
}
.v2-hero::before { /* estrellas */
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 40%, #cfe1ff, transparent),
        radial-gradient(1.5px 1.5px at 46% 12%, #fff, transparent), radial-gradient(1px 1px at 8% 70%, #fff, transparent),
        radial-gradient(1px 1px at 36% 82%, #cfe1ff, transparent), radial-gradient(1px 1px at 22% 58%, #fff, transparent);
}
.v2-hero-in { position: relative; max-width: 1536px; margin: 0 auto; min-height: 392px; padding: 40px 30px 48px 55px; display: flex; align-items: center; }
.v2-hero-arte {
    position: absolute; z-index: 0; top: 0; bottom: 0; left: 39.3%; width: 40.5%;
    background: url('/assets/uploads/v2/hero-nexus.webp?v=1') center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 92%, transparent 100%);
}
.v2-hero-txt { position: relative; z-index: 1; max-width: 600px; color: #f5f7fc; padding-top: 6px; }
.v2-kicker { display: inline-block; padding: 5px 10px; border-radius: 6px; background: #3b1d8f; color: #f1eaff; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.v2-hero h1 { margin: 12px 0 12px; font: 900 clamp(38px, 3.7vw, 57px)/1.0 var(--font-display); letter-spacing: -.025em; color: #fff; }
.v2-hero h1 span { display: block; color: #ffd52a; }
.v2-hero p { margin: 0 0 20px; font-size: 16px; line-height: 1.45; color: #d6deea; max-width: 590px; }
.v2-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.v2-btn { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 22px; border-radius: 10px; font: 800 16px var(--font-display); text-decoration: none; transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); }
.v2-btn-amarillo { background: #ffd52a; color: #141005; box-shadow: 0 10px 26px -12px rgba(255, 213, 42, .8); }
.v2-btn-amarillo:hover { background: #f4be19; transform: translateY(-1px); }
/* Pokéball de línea en el color del texto del botón */
.v2-btn-amarillo .v2-bola { position: relative; flex: 0 0 auto; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 2.5px solid #141005; background: linear-gradient(#141005, #141005) center / 100% 2.5px no-repeat; }
.v2-btn-amarillo .v2-bola::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; box-sizing: border-box; transform: translate(-50%, -50%); border-radius: 50%; background: #ffd52a; border: 2.5px solid #141005; }
.v2-btn-oscuro { background: rgba(10, 20, 35, .72); color: #f5f7fc; border: 1px solid #33496a; }
.v2-btn-oscuro:hover { background: rgba(20, 34, 56, .9); }

/* Tarjeta destacada (carrusel de noticias reales) */
.v2-destacado {
    position: absolute; z-index: 2; right: 31px; top: 28px; bottom: 30px; width: 285px;
    background: rgba(9, 17, 31, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid #2a3b55; border-radius: 14px; overflow: hidden; color: #f5f7fc;
}
.v2-dest-slide { position: absolute; inset: 0; padding: 18px 18px 64px; display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.v2-dest-slide.activa { opacity: 1; visibility: visible; transition-delay: 0s; }
.v2-dest-fondo { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: .22; }
.v2-dest-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,17,31,.2) 0%, rgba(9,17,31,.95) 70%); }
.v2-dest-etq { align-self: flex-start; padding: 4px 8px; border-radius: 5px; background: #ffd52a; color: #141005; font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.v2-dest-cat { flex-shrink: 0; margin: 16px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #d6deea; }
.v2-dest-tit { flex-shrink: 0; margin: 0 0 10px; font: 800 20px/1.18 var(--font-display); color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v2-dest-txt { flex-shrink: 0; margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #c9d3e2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-dest-mas { flex-shrink: 0; margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 26px; border: 1.5px solid #ffd52a; border-radius: 9px; color: #ffd52a; font: 800 14px var(--font-display); text-decoration: none; }
.v2-dest-mas:hover { background: #ffd52a; color: #141005; }
.v2-dest-ctrl { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.v2-dest-ctrl button.flecha { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: #f5f7fc; cursor: pointer; font-size: 15px; }
.v2-dest-ctrl button.flecha:hover { background: rgba(255,255,255,.08); }
.v2-dest-puntos { display: flex; gap: 7px; }
.v2-dest-puntos button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: #5c6c84; cursor: pointer; transition: width .2s ease, background .2s ease; }
.v2-dest-puntos button[aria-selected="true"] { width: 16px; background: #f5f7fc; }

/* Accesos rápidos */
.v2-accesos { margin-top: 18px !important; display: grid; grid-template-columns: minmax(0, 226fr) minmax(0, 226fr) minmax(0, 278fr) minmax(0, 220fr) minmax(0, 222fr) minmax(0, 236fr); gap: 12px; margin-top: 0; }
.v2-acceso > span:not(.v2-acceso-ico) { min-width: 0; }
.v2-acceso {
    display: flex; align-items: center; gap: 11px; min-height: 90px; padding: 12px 14px 12px 14px;
    background: var(--v2-superficie); border: 1px solid var(--border-color); border-radius: 12px;
    text-decoration: none; color: var(--text-main);
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
[data-theme="dark"] .v2-acceso { background: #0d192b; border-color: #1e2e45; }
.v2-acceso:hover { border-color: var(--v2-amarillo); transform: translateY(-2px); }
.v2-acceso-ico { flex: 0 0 52px; width: 52px; height: 64px; display: grid; place-items: center; font-size: 34px; }
.v2-acceso-ico img { width: 56px; height: 56px; object-fit: contain; }
.v2-acceso-ico img.v2-zoom { transform: scale(1.45); transform-origin: 50% 38%; }
.v2-acceso b { display: block; font: 600 16px/1.2 var(--font-display); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-acceso small { display: block; font-size: 12px; color: var(--v2-texto-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-acceso > i { margin-left: auto; padding-left: 6px; color: var(--text-main); font-size: 15px; opacity: .85; }

/* Paneles (noticias, Pokémon del día, herramientas, comunidad) */
.v2-panel-bloque { background: var(--v2-superficie); border: 1px solid var(--border-color); border-radius: var(--v2-radio); padding: 16px 18px 18px; }
[data-theme="dark"] .v2-panel-bloque { background: #0a1423; border-color: #1a2a40; }
.v2-bloque-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.v2-bloque-cab h2 { margin: 0; font: 800 22px var(--font-display); letter-spacing: -.01em; color: var(--text-main); }
.v2-bloque-ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; font-size: 15px; }
.v2-bloque-ico.azul { background: #1565d8; color: #fff; }
.v2-bloque-ico.amarillo { color: var(--v2-activo); font-size: 22px; }
.v2-bloque-ico.cian { color: var(--v2-cian); font-size: 21px; }
.v2-ver { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--font-display); color: var(--v2-activo); text-decoration: none; white-space: nowrap; }
.v2-ver:hover { gap: 11px; }
.v2-ver-solo { margin-left: auto; color: var(--text-main); font-size: 16px; text-decoration: none; }

.v2-fila-noticias { display: grid; grid-template-columns: minmax(0, 72fr) minmax(0, 28fr); gap: 14px; }
.v2-noticias-rejilla { display: grid; grid-template-columns: minmax(0, 1.29fr) minmax(0, 1fr); gap: 14px; }
.v2-noticia-grande { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--text-main); background: var(--v2-tarjeta); border: 1px solid var(--border-color); transition: border-color var(--transition-fast); }
[data-theme="dark"] .v2-noticia-grande { background: #0f1b2d; border-color: #1e2e45; }
.v2-noticia-grande:hover { border-color: var(--v2-amarillo); }
.v2-ng-img { position: relative; aspect-ratio: 564 / 192; overflow: hidden; background: #0b1426; }
.v2-ng-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-cat { display: inline-block; padding: 4px 8px; border-radius: 5px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #1565d8; }
.v2-ng-img .v2-cat { position: absolute; top: 14px; left: 16px; }
.v2-cat.cat-videojuegos { background: #6d28d9; }
.v2-cat.cat-moviles { background: #1565d8; }
.v2-cat.cat-tcg { background: #f59e0b; color: #1a1300; }
.v2-cat.cat-competitivo { background: #c62839; }
.v2-cat.cat-eventos { background: #26d7e9; color: #04232a; }
.v2-cat.cat-anime { background: #be3a7c; }
.v2-cat.cat-general { background: #22c55e; color: #06210f; }
.v2-ng-cuerpo { padding: 12px 18px 12px; display: flex; flex-direction: column; flex: 1 1 auto; }
.v2-ng-cuerpo h3 { margin: 0 0 6px; font: 800 20px/1.2 var(--font-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -.01em; }
.v2-ng-cuerpo p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--v2-texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-meta { margin-top: auto; display: flex; gap: 22px; font-size: 12.5px; color: var(--v2-texto-3); }
.v2-meta i { margin-right: 6px; }
.v2-noticias-lista { display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; }
.v2-noticia-fila { display: flex; gap: 14px; padding: 6px; border-radius: 12px; text-decoration: none; color: var(--text-main); background: var(--v2-tarjeta); border: 1px solid var(--border-color); transition: border-color var(--transition-fast); min-height: 0; }
[data-theme="dark"] .v2-noticia-fila { background: #0f1b2d; border-color: #1e2e45; }
.v2-noticia-fila:hover { border-color: var(--v2-amarillo); }
.v2-nf-img { flex: 0 0 140px; border-radius: 8px; overflow: hidden; background: #0b1426; }
.v2-nf-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-nf-txt { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 4px 6px 4px 0; }
.v2-nf-txt .v2-cat { align-self: flex-start; font-size: 10px; padding: 3px 7px; }
.v2-nf-txt b { font: 700 14.5px/1.3 var(--font-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-nf-txt small { font-size: 12px; color: var(--v2-texto-3); }

/* Pokémon del día */
.v2-pdd { position: relative; display: flex; align-items: center; gap: 12px; min-height: 252px; height: calc(100% - 42px); padding: 22px 20px; border-radius: 12px; background: var(--v2-tarjeta); border: 1px solid var(--border-color); overflow: hidden; }
[data-theme="dark"] .v2-pdd { background: #0f1b2d; border-color: #1e2e45; }
.v2-pdd::before { content: ""; position: absolute; left: -40px; top: 50%; width: 230px; height: 230px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--v2-azul) 18%, transparent), transparent 70%); }
.v2-pdd::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; border: 22px solid color-mix(in srgb, var(--text-main) 4%, transparent); }
.v2-pdd-img { position: relative; z-index: 1; flex: 0 0 42%; display: grid; place-items: center; }
.v2-pdd-img img { width: 100%; max-width: 170px; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.v2-pdd-txt { position: relative; z-index: 1; min-width: 0; }
.v2-pdd-num { font-size: 12.5px; font-weight: 700; color: var(--v2-texto-3); }
.v2-pdd-txt h3 { margin: 2px 0 8px; font: 800 20px var(--font-display); }
.v2-pdd-tipos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.v2-pdd-tipos .type-badge { margin: 0; font-size: 12px; padding: 3px 14px; border-radius: 999px; }
.v2-pdd-txt p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--v2-texto-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.v2-btn-borde { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 20px; border: 1.5px solid var(--v2-activo); border-radius: 9px; color: var(--v2-activo); font: 800 14px var(--font-display); text-decoration: none; }
.v2-btn-borde:hover { background: var(--v2-amarillo); border-color: var(--v2-amarillo); color: #141005; }

/* Herramientas y comunidad */
.v2-fila-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v2-teselas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v2-tesela { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text-main); background: var(--v2-tarjeta); border: 1px solid var(--border-color); transition: border-color var(--transition-fast), transform var(--transition-fast); }
[data-theme="dark"] .v2-tesela { background: #0f1b2d; border-color: #1e2e45; }
.v2-tesela:hover { border-color: var(--v2-amarillo); transform: translateY(-2px); }
.v2-tesela > i { flex: 0 0 36px; font-size: 27px; text-align: center; }
.v2-tesela b { display: block; font: 600 14px/1.3 var(--font-display); }
.v2-tesela small { display: block; font-size: 11.5px; color: var(--v2-texto-3); margin-top: 2px; }
.ico-amarillo { color: #f4be19; } .ico-cian { color: var(--v2-cian); } .ico-verde { color: #22c55e; } .ico-rojo { color: #ef4444; }
.ico-morado { color: #8b5cf6; } .ico-azul { color: var(--v2-azul); }

/* Más contenido (bajo el pliegue) */
.v2-sec { margin-top: 26px; }
.v2-sec-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.v2-sec-cab h2 { margin: 0; font: 800 22px var(--font-display); }
.v2-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.v2-tarjetas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-tarjetas-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.v2-tarjeta { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--text-main); background: var(--v2-superficie); border: 1px solid var(--border-color); transition: border-color var(--transition-fast), transform var(--transition-fast); }
[data-theme="dark"] .v2-tarjeta { background: #0f1b2d; border-color: #1e2e45; }
.v2-tarjeta:hover { border-color: var(--v2-amarillo); transform: translateY(-2px); }
.v2-tarjeta-img { aspect-ratio: 16 / 9; background: #0b1426; overflow: hidden; }
.v2-tarjeta-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-tarjeta-txt { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.v2-tarjeta-txt .v2-cat { align-self: flex-start; font-size: 10px; }
.v2-tarjeta-txt b { font: 700 15.5px/1.3 var(--font-display); }
.v2-tarjeta-txt p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--v2-texto-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v2-tarjeta-txt small { margin-top: auto; font-size: 12px; color: var(--v2-texto-3); }
.v2-dos-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.v2-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.v2-lista li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.v2-lista li:last-child { border-bottom: 0; }
.v2-lista img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.v2-lista a { color: var(--text-main); text-decoration: none; font-weight: 700; font-size: 14px; }
.v2-lista a:hover { color: var(--v2-activo); }
.v2-lista small { display: block; color: var(--v2-texto-3); font-size: 12px; }
.v2-cartas { display: grid; gap: 10px; }
.v2-carta { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; text-decoration: none; color: var(--text-main); background: var(--v2-tarjeta); border: 1px solid var(--border-color); }
.v2-carta:hover { border-color: var(--v2-amarillo); }
.v2-carta img { width: 56px; height: 78px; object-fit: contain; }
.v2-carta b { display: block; font-size: 14px; }
.v2-carta small { display: block; font-size: 12px; color: var(--v2-texto-3); }
.v2-widgets { display: grid; gap: 22px; }   /* ya no se usa en la portada (ver .nx-paneles) */
.v2-widget { break-inside: avoid; margin-bottom: 22px; }
.v2-widget:empty { display: none; }
.v2-widget > :first-child { margin-top: 0; }
.home-pinturillo.v2-sec { display: flex; }

/* Títulos de sección heredados de la versión 1 (widgets): estilo Nexus, sin la
   raya con Pokéball de debajo. */
[data-version="2"] .section-title { font: 800 22px/1.2 var(--font-display); letter-spacing: -.01em; margin: 0 0 14px; }
[data-version="2"] .section-title::before, [data-version="2"] .section-title::after { display: none; }

/* ---------- Adaptación ---------- */
@media (max-width: 1360px) {
    .v2-bar { gap: 14px; padding: 0 20px; }
    .v2-nav-link { padding: 0 9px; font-size: 13.5px; }
    .v2-buscador { flex-basis: 260px; }
    .v2-accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
    .v2-nav { display: none; }
    .v2-solo-movil { display: grid; }
    .v2-bar { justify-content: space-between; }
    .v2-buscador { flex: 1 1 auto; max-width: 420px; }
    .v2-accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .v2-fila-noticias { grid-template-columns: 1fr; }
    .v2-fila-dos { grid-template-columns: 1fr; }
    .v2-dos-col { grid-template-columns: 1fr; }
    .v2-widgets { column-count: 2; }
    .v2-tarjetas-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .v2-pie-rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
    .v2-hero-in { min-height: 0; flex-direction: column; align-items: stretch; padding: 26px 20px 0; }
    .v2-hero-arte { position: relative; left: auto; width: auto; height: 240px; margin: 18px -20px 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%); mask-image: linear-gradient(180deg, transparent 0, #000 18%); }
    .v2-destacado { position: relative; right: auto; top: auto; bottom: auto; width: auto; height: 310px; margin: 24px 0 22px; }
    .v2-dest-tit { -webkit-line-clamp: 2; }
    .v2-noticias-rejilla { grid-template-columns: 1fr; }
    .v2-noticias-lista { grid-template-rows: none; }
    .v2-nf-img { flex-basis: 120px; height: 80px; }
}
@media (max-width: 760px) {
    [data-version="2"] .container { padding: 0 16px; }
    .v2-bar { padding: 0 12px; gap: 8px; }
    .v2-logo-txt { font-size: 16px; }
    .v2-logo img { width: 34px; height: 34px; }
    .v2-buscador { display: none; position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); max-width: none; }
    .v2-header.buscando .v2-buscador { display: block; }
    .v2-header.buscando .v2-buscador input { box-shadow: var(--shadow-lg); }
    .v2-acciones { gap: 2px; }
    .v2-entrar span { display: none; }
    #v2Hamburguesa { display: none; }   /* en móvil ya está «Menú» en la barra inferior */
    .v2-hero h1 { font-size: clamp(32px, 9vw, 44px); }
    .v2-hero p { font-size: 15.5px; }
    .v2-btn { height: 48px; font-size: 15px; }
    .v2-hero-btns { flex-direction: column; gap: 10px; }
    .v2-hero-btns .v2-btn { justify-content: center; }
    .v2-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .v2-acceso { min-height: 76px; gap: 10px; padding: 10px; }
    .v2-acceso-ico { flex-basis: 44px; width: 44px; height: 44px; font-size: 26px; }
    .v2-acceso-ico img { width: 44px; height: 44px; }
    .v2-acceso b { font-size: 15px; }
    .v2-acceso > i { display: none; }
    .v2-teselas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2-widgets { column-count: 1; }
    .v2-tarjetas-3, .v2-tarjetas-6 { grid-template-columns: minmax(0, 1fr); }
    .v2-pdd { flex-direction: column; text-align: center; }
    .v2-pdd-tipos { justify-content: center; }
    .v2-pie-rejilla { grid-template-columns: 1fr; gap: 26px; }
    .v2-panel { position: fixed; left: 12px; right: 12px; top: calc(var(--header-h) + 8px); width: auto; }
    .v2-ng-cuerpo h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .v2-dd, .v2-dest-slide, .v2-acceso, .v2-tesela, .v2-tarjeta, .v2-btn { transition: none; }
}

/* =====================================================================
   PÁGINAS INTERIORES (fase 1): piezas comunes
   ===================================================================== */
.v2-pagina { padding-top: 0; }
.v2-pag-cab { margin-bottom: 22px; }
.v2-pag-cab h1 { margin: 6px 0 8px; font: 800 clamp(28px, 3.2vw, 40px)/1.1 var(--font-display); letter-spacing: -.02em; }
.v2-pag-cab p { margin: 0; max-width: 72ch; font-size: 15.5px; line-height: 1.55; color: var(--v2-texto-2); }
.v2-pag-cab p strong { color: var(--text-main); }
.v2-migas { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--v2-texto-3); }
.v2-migas a { color: var(--v2-texto-3); text-decoration: none; }
.v2-migas a:hover { color: var(--v2-activo); }
.v2-migas i { font-size: 9px; opacity: .7; }
.v2-migas [aria-current] { color: var(--text-main); font-weight: 600; }
.v2-vacio { padding: 40px; text-align: center; color: var(--v2-texto-3); border: 1px dashed var(--border-color); border-radius: var(--v2-radio); }

/* Barra lateral y sus cajas */
.v2-lateral { display: grid; gap: 16px; align-content: start; min-width: 0; }
.v2-caja { padding: 16px 18px; border-radius: var(--v2-radio); background: var(--v2-superficie); border: 1px solid var(--border-color); }
[data-theme="dark"] .v2-caja { background: #0f1b2d; border-color: #1e2e45; }
.v2-caja-tit { margin: 0 0 12px; font: 800 16px var(--font-display); display: flex; align-items: center; gap: 9px; }
.v2-caja-tit i { color: var(--v2-activo); }
.v2-caja p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--v2-texto-2); }
.v2-caja-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.v2-caja-btns .v2-btn-borde { padding: 8px 14px; font-size: 13.5px; background: none; cursor: pointer; }
.v2-caja .v2-ver { margin: 12px 0 0; }
.v2-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.v2-ranking a { display: flex; gap: 12px; align-items: flex-start; padding: 8px; margin: 0 -8px; border-radius: 9px; text-decoration: none; color: var(--text-main); }
.v2-ranking a:hover { background: var(--v2-tarjeta-hover); }
.v2-ranking-n { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font: 800 14px var(--font-display); background: var(--v2-amarillo); color: #141005; }
.v2-ranking li:nth-child(n+4) .v2-ranking-n { background: var(--v2-tarjeta); color: var(--text-main); border: 1px solid var(--border-color); }
.v2-ranking b, .v2-mini-noticias b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 14px/1.3 var(--font-display); }
.v2-ranking small, .v2-mini-noticias small, .v2-enlaces small { display: block; margin-top: 3px; font-size: 12px; color: var(--v2-texto-3); }
.v2-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v2-enlaces li { line-height: 1.35; }
.v2-enlaces a { color: var(--text-main); text-decoration: none; font: 700 14px/1.35 var(--font-display); }
.v2-enlaces a:hover { color: var(--v2-activo); }
.v2-mini-noticias { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.v2-mini-noticias a { display: flex; gap: 12px; align-items: center; padding: 7px; margin: 0 -7px; border-radius: 9px; text-decoration: none; color: var(--text-main); }
.v2-mini-noticias a:hover { background: var(--v2-tarjeta-hover); }
.v2-mini-img { flex: 0 0 84px; height: 56px; border-radius: 7px; overflow: hidden; background: #0b1426; }
.v2-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Paginación */
.v2-paginas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 26px 0 8px; }
.v2-pag-nums { display: flex; gap: 6px; align-items: center; margin: 0 auto; }
.v2-pag-nums a, .v2-pag-flecha { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 10px; text-decoration: none; font: 700 14px var(--font-display); color: var(--text-main); background: var(--v2-superficie); border: 1px solid var(--border-color); }
[data-theme="dark"] .v2-pag-nums a, [data-theme="dark"] .v2-pag-flecha { background: #0f1b2d; border-color: #1e2e45; }
.v2-pag-nums a:hover, .v2-pag-flecha:hover { border-color: var(--v2-amarillo); }
.v2-pag-nums a.activa { background: var(--v2-amarillo); border-color: var(--v2-amarillo); color: #141005; }
.v2-pag-hueco { color: var(--v2-texto-3); }

/* ---------- Noticias: listado ---------- */
.v2-lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-bottom: 26px; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--text-main); background: var(--v2-superficie); border: 1px solid var(--border-color); transition: border-color var(--transition-fast); }
[data-theme="dark"] .v2-lead { background: #0f1b2d; border-color: #1e2e45; }
.v2-lead:hover { border-color: var(--v2-amarillo); }
.v2-lead-img { position: relative; aspect-ratio: 16 / 9; background: #0b1426; overflow: hidden; }
.v2-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.v2-lead:hover .v2-lead-img img { transform: scale(1.03); }
.v2-lead-txt { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 28px 32px; min-width: 0; }
.v2-lead-etq { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.v2-ultima { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--v2-activo); }
.v2-lead h2 { margin: 0; font: 800 clamp(22px, 2.3vw, 32px)/1.15 var(--font-display); letter-spacing: -.015em; }
.v2-lead p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--v2-texto-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v2-autor { display: flex; align-items: center; gap: 10px; }
.v2-autor img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--v2-amarillo); }
.v2-autor b { display: block; font-size: 14px; }
.v2-autor small { display: block; font-size: 12.5px; color: var(--v2-texto-3); }
.v2-lead-btn { align-self: flex-start; margin-top: 4px; height: 46px; padding: 0 22px; font-size: 15px; }
.v2-noticias-cuerpo { grid-template-columns: minmax(0, 1fr) 330px; }
.v2-tarjetas-noticias .v2-tarjeta-txt p { -webkit-line-clamp: 2; }

/* ---------- Noticias: artículo ---------- */
.v2-art { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; max-width: 1280px; margin: 0 auto; padding-top: 0; }
.v2-art-lateral { position: sticky; top: calc(var(--header-h, 72px) + 16px); }
[data-version="2"] .v2-art-main .article, [data-version="2"] .v2-art-main .article-more { max-width: none; padding: 0; margin: 0; }
[data-version="2"] .article .news-breadcrumb { font-size: 13px; }
[data-version="2"] .article .art-head { margin-top: 10px; }
[data-version="2"] .art-head .news-category-badge { background: var(--v2-amarillo); color: #141005; }
[data-version="2"] .article .art-title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -.02em; }
[data-version="2"] .art-standfirst { color: var(--v2-texto-2); }
[data-version="2"] .art-byline, [data-version="2"] .art-meta { justify-content: flex-start; }
[data-version="2"] .art-meta { color: var(--v2-texto-3); }
[data-version="2"] .art-cover img, [data-version="2"] .art-cover .news-banner { border-radius: 16px; }
[data-version="2"] .article .news-body h2::before { background: var(--v2-amarillo); }
[data-version="2"] .article .news-body h2 { scroll-margin-top: calc(var(--header-h, 72px) + 16px); }
[data-version="2"] .article .news-body blockquote { border-left-color: var(--v2-amarillo); background: var(--v2-tarjeta); border-radius: 0 12px 12px 0; padding: 14px 18px; }
[data-version="2"] .article .news-body img { border-radius: 12px; }
[data-version="2"] .tts-player, [data-version="2"] .art-authorcard { border-radius: var(--v2-radio); background: var(--v2-superficie); border: 1px solid var(--border-color); }
[data-theme="dark"] .tts-player, [data-theme="dark"] .art-authorcard { background: #0f1b2d; border-color: #1e2e45; }
[data-version="2"] .tts-btn { background: var(--v2-amarillo); color: #141005; }
[data-version="2"] .reading-progress { background: var(--v2-amarillo); }
.v2-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: ind; max-height: 40vh; overflow: auto; }
.v2-indice li { counter-increment: ind; }
.v2-indice a { display: flex; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; line-height: 1.35; color: var(--v2-texto-2); text-decoration: none; border-left: 3px solid transparent; }
.v2-indice a::before { content: counter(ind); flex: 0 0 auto; font-weight: 800; color: var(--v2-texto-3); }
.v2-indice a:hover { background: var(--v2-tarjeta-hover); color: var(--text-main); }
.v2-indice a.activo { color: var(--text-main); font-weight: 700; border-left-color: var(--v2-amarillo); background: var(--v2-tarjeta-hover); }

/* Piezas de la versión 1 que siguen dentro de vistas compartidas («Seguir
   leyendo», buscador...): mismo aspecto que las de la versión 2. */
[data-version="2"] .news-card { border-radius: 12px; background: var(--v2-superficie); border: 1px solid var(--border-color); box-shadow: none; }
[data-theme="dark"] .news-card { background: #0f1b2d; border-color: #1e2e45; }
[data-version="2"] .news-card:hover { border-color: var(--v2-amarillo); }
[data-version="2"] .news-category-badge { background: var(--v2-azul); color: #fff; border-radius: 5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }


/* ---------- Guías ---------- */
.v2-pag-cab-img { position: relative; padding: 26px 30px 30px; border-radius: 16px; overflow: hidden; background: #07101e; color: #f5f7fc; isolation: isolate; }
.v2-pag-cab-img::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--v2-cab-img) center / cover no-repeat; }
.v2-pag-cab-img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 11, 20, .94) 0%, rgba(5, 11, 20, .78) 55%, rgba(5, 11, 20, .35) 100%); }
.v2-pag-cab-img p { color: #c9d3e2; }
.v2-pag-cab-img .v2-migas, .v2-pag-cab-img .v2-migas a { color: #b4c1d4; }
.v2-pag-cab-img .v2-migas [aria-current] { color: #fff; }
.v2-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.v2-chips a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none; font: 700 14px var(--font-display); color: var(--text-main); background: var(--v2-superficie); border: 1px solid var(--border-color); }
[data-theme="dark"] .v2-chips a { background: #0f1b2d; border-color: #1e2e45; }
.v2-chips a:hover { border-color: var(--v2-amarillo); }
.v2-chips a.activo { background: var(--v2-amarillo); border-color: var(--v2-amarillo); color: #141005; }
.v2-cat.cat-guia { background: #f59e0b; color: #1a1300; }
.v2-tarjetas-guias { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
[data-version="2"] .v2-art-main .guide-page { max-width: none; padding: 0; margin: 0; }
[data-version="2"] .guide-page .breadcrumbs { margin-top: 0; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
[data-version="2"] .guide-page .breadcrumbs a { white-space: nowrap; }
[data-version="2"] .guide-page .breadcrumbs i { font-size: 9px; opacity: .7; }
[data-version="2"] .guide-page .breadcrumbs > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-version="2"] .guide-detail-title { font: 800 clamp(28px, 3.4vw, 44px)/1.12 var(--font-display); letter-spacing: -.02em; }
[data-version="2"] .guide-detail-header { text-align: left; }
[data-version="2"] .guide-detail-header .news-meta { justify-content: flex-start; }
[data-version="2"] .guide-page .toc-box { border-radius: var(--v2-radio); background: var(--v2-superficie); border: 1px solid var(--border-color); }
[data-theme="dark"] .guide-page .toc-box { background: #0f1b2d; border-color: #1e2e45; }
[data-version="2"] .guide-body h2 { scroll-margin-top: calc(var(--header-h, 72px) + 16px); }


/* ---------- Pokédex ---------- */
.v2-dex-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.v2-dex-atajos { display: flex; gap: 8px; flex-wrap: wrap; }
.v2-dex-atajos a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 10px; text-decoration: none; font: 700 14px var(--font-display); color: var(--text-main); background: var(--v2-superficie); border: 1px solid var(--border-color); }
[data-theme="dark"] .v2-dex-atajos a { background: #0f1b2d; border-color: #1e2e45; }
.v2-dex-atajos a:hover { border-color: var(--v2-amarillo); }
[data-version="2"] .pokedex-filters .filter-group { min-width: 0; }
[data-version="2"] .pokedex-filters .filter-group input, [data-version="2"] .pokedex-filters .filter-group select { width: 100%; min-width: 0; box-sizing: border-box; }
[data-version="2"] .pokedex-filters { border-radius: var(--v2-radio); background: var(--v2-superficie); border: 1px solid var(--border-color); box-shadow: none; }
[data-theme="dark"] .pokedex-filters { background: #0f1b2d; border-color: #1e2e45; }
[data-version="2"] .pokemon-card { border-radius: var(--v2-radio); background: var(--v2-superficie); border: 1px solid var(--border-color); box-shadow: none; }
[data-theme="dark"] .pokemon-card { background: #0f1b2d; border-color: #1e2e45; }
[data-version="2"] .pokemon-card:hover { border-color: var(--v2-amarillo); }
[data-version="2"] .pk-cry-spk { color: var(--v2-activo); }
[data-version="2"] .pk-cry-spk:hover, [data-version="2"] .pk-cry-spk.playing { background: var(--v2-amarillo); color: #141005; }
[data-version="2"] .pkx-hero { border-radius: 18px; }
[data-version="2"] .pkx-card { border-radius: var(--v2-radio); }
.v2-ficha { max-width: 1080px; margin: 0 auto; }
.v2-ficha .artworks-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px 24px; border-radius: var(--v2-radio); }
.v2-ficha .artworks-card > .artworks-card-head { grid-column: 1 / -1; margin-bottom: 0; }
.v2-ficha .artworks-card > .artg-group { margin-top: 0; }
.v2-ficha .card { border-radius: var(--v2-radio); }


/* ---------- Pokémon GO ---------- */
[data-version="2"] .pg-hero { margin-top: 0; border-radius: 16px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--v2-azul) 16%, var(--v2-superficie)) 0%, var(--v2-superficie) 60%); box-shadow: none; }
[data-theme="dark"] .pg-hero { background: radial-gradient(120% 140% at 0% 0%, #12305a 0%, #0f1b2d 60%); border-color: #1e2e45; }
[data-version="2"] .pg-ball { opacity: .16; }
[data-version="2"] .pg-tabs { border-radius: 12px; background: var(--v2-superficie); }
[data-theme="dark"] .pg-tabs { background: #0f1b2d; border-color: #1e2e45; }
[data-version="2"] .pg-tab { border-radius: 9px; }
[data-version="2"] .pg-tab:hover { background: var(--v2-tarjeta-hover); }
[data-version="2"] .pg-tab.is-active { background: var(--v2-amarillo); color: #141005; box-shadow: none; }


/* ---------- TCG ---------- */
[data-version="2"] .v2-tcg .pokedex-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-version="2"] .tcg-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
[data-version="2"] .tcg-grid > .card { border-radius: var(--v2-radio); background: var(--v2-superficie); border: 1px solid var(--border-color); box-shadow: none; }
[data-theme="dark"] .tcg-grid > .card { background: #0f1b2d; border-color: #1e2e45; }
[data-version="2"] .tcg-grid > .card:hover { border-color: var(--v2-amarillo); }
[data-version="2"] .tcg-shop-block { margin-top: 30px; border-radius: var(--v2-radio); }


/* ---------- Fase 2: cabeceras con foto de Videojuegos y Foro ----------
   Mismo formato que .v2-pag-cab-img: texto a la izquierda sobre un degradado. */
[data-version="2"] .games-banner, [data-version="2"] .forum-banner { margin: 0 0 22px; padding: 30px 32px; border-radius: 16px; box-shadow: none; background-position: center right; }
[data-version="2"] .games-banner .banner-overlay, [data-version="2"] .forum-banner .banner-overlay { background: linear-gradient(90deg, rgba(5, 11, 20, .94) 0%, rgba(5, 11, 20, .78) 55%, rgba(5, 11, 20, .3) 100%); }
[data-version="2"] .games-banner .banner-content, [data-version="2"] .forum-banner .banner-content { text-align: left; margin: 0; max-width: 680px; }
[data-version="2"] .games-banner .banner-title, [data-version="2"] .forum-banner .banner-title { font: 800 clamp(28px, 3.2vw, 40px)/1.1 var(--font-display); letter-spacing: -.02em; text-shadow: none; margin-bottom: 10px; }
[data-version="2"] .wallpapers-container { padding-top: 0; }
[data-version="2"] .wallpapers-header { margin-bottom: 22px; padding: 30px 32px; border-radius: 16px; box-shadow: none; background-position: center right; }
[data-version="2"] .wallpapers-header .header-overlay { background: linear-gradient(90deg, rgba(5, 11, 20, .94) 0%, rgba(5, 11, 20, .78) 55%, rgba(5, 11, 20, .3) 100%); }
[data-version="2"] .wallpapers-header .header-content { text-align: left; margin: 0; max-width: 680px; }
[data-version="2"] .wallpapers-header .main-title { font: 800 clamp(28px, 3.2vw, 40px)/1.1 var(--font-display); letter-spacing: -.02em; text-shadow: none; margin-bottom: 10px; }
[data-version="2"] .wallpapers-header .subtitle { margin: 0; max-width: 62ch; color: #c9d3e2; text-shadow: none; font-size: 15.5px; }
[data-version="2"] .games-banner .banner-subtitle, [data-version="2"] .forum-banner .banner-subtitle { margin: 0; max-width: 62ch; color: #c9d3e2; text-shadow: none; font-size: 15.5px; }


/* «Online ahora» (solo staff): en la versión 1 flota sobre el fondo lateral;
   aquí el contenido va a todo el ancho y lo tapaba. Abajo a la derecha,
   encima del botón del chat (a la izquierda tapaba el menú del panel). */
[data-version="2"] .staff-online { top: auto; bottom: 76px; right: 16px; width: auto; padding: 7px 13px 7px 11px; border-radius: 14px; }
[data-version="2"] .staff-online:not(:hover):not(:focus-visible) .so-paises,
[data-version="2"] .staff-online:not(:hover):not(:focus-visible) .so-zona { display: none !important; }
[data-version="2"] .staff-online:hover, [data-version="2"] .staff-online:focus-visible { width: 208px; padding: 11px 13px 11px 12px; }

@media (max-width: 1180px) {
    .v2-art { grid-template-columns: minmax(0, 1fr); }
    .v2-art-lateral { position: static; }
    .v2-art-lateral .v2-indice { display: none; }
    .v2-noticias-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .v2-tarjetas-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .v2-lead { grid-template-columns: 1fr; }
    .v2-lead-txt { padding: 20px; }
}
@media (max-width: 760px) {
    [data-version="2"] main.container.v2-main { padding-top: 14px; }
    [data-version="2"] .staff-online { bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 12px); left: 12px; right: auto; }
    [data-version="2"] main.container.v2-main > .v2-home { margin-top: -14px; }
    .v2-pag-cab-img { padding: 20px 18px 22px; }
    .v2-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 18px; padding: 0 16px; scrollbar-width: none; }
    .v2-chips a { flex: 0 0 auto; }
    [data-version="2"] .pg-hero { padding: 20px 18px; }
    [data-version="2"] .games-banner, [data-version="2"] .forum-banner, [data-version="2"] .wallpapers-header { padding: 22px 18px; }
    [data-version="2"] .pg-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    [data-version="2"] .pg-tab { flex: 0 0 auto; }
    [data-version="2"] .pokedex-filters { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px; }
    [data-version="2"] .pokedex-filters .filter-group:first-child { grid-column: 1 / -1; }
    [data-version="2"] .pokedex-grid, [data-version="2"] .tcg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    [data-version="2"] .v2-tcg .pokedex-filters { grid-template-columns: 1fr 1fr; }
    [data-version="2"] .pokemon-card img { width: 96px; height: 96px; }
    .v2-dex-atajos { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
    .v2-dex-atajos a { flex: 0 0 auto; }
    .v2-tarjetas-noticias { grid-template-columns: minmax(0, 1fr); }
    .v2-paginas .v2-pag-flecha { flex: 1 1 auto; }
    .v2-pag-nums { order: -1; width: 100%; justify-content: center; }
}

/* Contraste (fase 4, axe-core) */
[data-version="2"] .btn-primary[style*="text-muted"] { color: var(--bg-card); }   /* «Entrar para publicar» del foro */
[data-version="2"] .cc-cuenta b { color: var(--ok-text); }

/* ---------- Campana con cuenta: contador, pestañas y avisos ---------- */
.v2-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.v2-contador { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; background: #ef4444; color: #fff; font: 800 10.5px/1 var(--font-primary); border: 2px solid var(--v2-cabecera); }
.v2-contador[hidden] { display: none; }
.v2-panel-avisos { width: 370px; }
.v2-avisos-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 10px; background: var(--v2-tarjeta); }
.v2-avisos-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font: 700 13.5px var(--font-display); cursor: pointer; }
.v2-avisos-tabs button[aria-selected="true"] { background: var(--v2-superficie); color: var(--text-main); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.v2-avisos-tabs span { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; display: inline-grid; place-items: center; border-radius: 999px; background: #ef4444; color: #fff; font: 800 10.5px var(--font-primary); }
.v2-avisos-tabs span[hidden] { display: none; }
.v2-avisos-lista { display: grid; gap: 2px; max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.v2-aviso { position: relative; display: flex; gap: 11px; align-items: flex-start; padding: 9px 10px; border-radius: var(--v2-radio-s); text-decoration: none; color: var(--text-main); }
a.v2-aviso:hover { background: var(--v2-tarjeta-hover); }
.v2-aviso.nueva { background: color-mix(in srgb, var(--v2-amarillo) 12%, transparent); }
.v2-aviso.nueva::after { content: ""; position: absolute; top: 15px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
.v2-aviso-ico { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 14px; background: var(--v2-tarjeta); color: var(--v2-activo); }
.v2-aviso-foro .v2-aviso-ico { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #3b82f6; }
.v2-aviso-comentario .v2-aviso-ico { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #8b5cf6; }
.v2-aviso-caduca .v2-aviso-ico { background: color-mix(in srgb, #f97316 16%, transparent); color: #f97316; }
.v2-aviso-logro .v2-aviso-ico { background: var(--v2-amarillo); color: #141005; }
.v2-aviso-anuncio .v2-aviso-ico { background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; }
.v2-aviso-txt { min-width: 0; flex: 1 1 auto; padding-right: 12px; }
.v2-aviso-txt b { display: block; font-size: 13.5px; line-height: 1.3; font-weight: 700; }
.v2-aviso-txt b em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--v2-activo); }
.v2-aviso-txt small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-aviso-txt time { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }
.v2-avisos-lista .v2-panel-vacio { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.v2-avisos-lista .v2-panel-vacio i { margin-top: 3px; }
/* Página /notificaciones */
.v2-avisos-pag { max-width: 760px; margin: 0 auto; padding: 28px 0 48px; }
.v2-avisos-cab h1 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font: 800 30px var(--font-display); }
.v2-avisos-cab h1 i { color: var(--v2-activo); }
.v2-avisos-cab p { margin: 0 0 20px; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.v2-avisos-lista--pag { max-height: none; overflow: visible; gap: 6px; }
.v2-avisos-lista--pag .v2-aviso { padding: 14px 16px; border: 1px solid var(--border-color); background: var(--v2-superficie); }
.v2-avisos-lista--pag .v2-aviso.nueva { background: color-mix(in srgb, var(--v2-amarillo) 10%, var(--v2-superficie)); }
.v2-avisos-lista--pag .v2-aviso-txt b { font-size: 15px; }
.v2-avisos-lista--pag .v2-aviso-txt small { font-size: 13.5px; -webkit-line-clamp: 3; }
.v2-avisos-vacio { padding: 22px; border-radius: var(--v2-radio); background: var(--v2-tarjeta); }
/* Menciones @usuario (comentarios y foro) */
a.mencion { padding: 0 3px; border-radius: 4px; font-weight: 700; text-decoration: none !important; color: var(--v2-activo) !important; background: color-mix(in srgb, var(--v2-amarillo) 14%, transparent); }
a.mencion:hover { background: color-mix(in srgb, var(--v2-amarillo) 28%, transparent); }
.v2-aviso-respuesta .v2-aviso-ico { background: color-mix(in srgb, #14b8a6 16%, transparent); color: #14b8a6; }
.v2-aviso-mencion .v2-aviso-ico { background: color-mix(in srgb, #ec4899 16%, transparent); color: #ec4899; }
/* Predicción de @menciones (menciones.js) */
.mencion-lista { position: absolute; z-index: 400; margin: 0; padding: 5px; list-style: none; border-radius: 12px; background: var(--v2-superficie); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; }
.mencion-lista[hidden] { display: none; }
.mencion-lista li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; cursor: pointer; color: var(--text-main); font: 700 14px var(--font-primary); }
.mencion-lista li[aria-selected="true"], .mencion-lista li:hover { background: color-mix(in srgb, var(--v2-amarillo) 18%, transparent); }
.mencion-lista img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--v2-tarjeta); flex: 0 0 26px; }
.mencion-lista span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mencion-lista small { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; background: var(--v2-tarjeta); color: var(--v2-texto-2); }
.v2-aviso-amistad .v2-aviso-ico { background: color-mix(in srgb, #22c55e 16%, transparent); color: #22c55e; }
.v2-aviso-muro .v2-aviso-ico { background: color-mix(in srgb, #0ea5e9 16%, transparent); color: #0ea5e9; }

/* El reset global deja los <dialog> sin el margin:auto del navegador y se
   pegan arriba a la izquierda. Los modales van siempre centrados. */
dialog:modal { margin: auto; max-height: calc(100dvh - 32px); }