@layer vsg-universal {
:root {
    --bg-color: #1a1a2e;
    --card-bg: rgba(255, 255, 255, 0.05);
    --primary-color: #38bdf8;
    --primary-hover: #7dd3fc;
    --accent-color: #818cf8;
    --text-primary: #ffffff;
    /* Ítem 27: #cbd5e1 sobre los fondos con degradé oscuro de las cards
       (rgba(10,14,34,.96) etc.) rendía ~4.2:1 -- por debajo de AA para texto
       normal en varias combinaciones reales del sitio. #b6c4da sube el
       contraste manteniendo el mismo tono frío. */
    --text-muted: #b6c4da;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-radius: 16px;
    --transition-speed: 0.3s;
    --sidebar-width: 11%;
    --focus-ring: 0 0 0 2px rgba(56, 189, 248, 0.45);
    --vsg-banner-height: 144px;
    --vsg-banner-max-width: 1400px;
    --type-page-title: clamp(1.5rem, 1.9vw, 1.85rem);
    --type-section-title: clamp(1.2rem, 1.45vw, 1.48rem);
    --type-card-title: clamp(0.98rem, 1.08vw, 1.12rem);
    --type-kicker: 0.67rem;
    --type-body: 0.9rem;

    /* Ítem 6: escala tipográfica única. El sitio mezclaba .72/.74/.76/.78/.8rem
       sin patrón -- estos 8 pasos cubren todo el rango real que ya existía,
       para que el código nuevo (y el que se vaya migrando) tenga de dónde
       elegir en vez de inventar un valor más. */
    --fs-2xs: 0.66rem;
    --fs-xs: 0.72rem;
    --fs-sm: 0.78rem;
    --fs-base: 0.85rem;
    --fs-md: 0.95rem;
    --fs-lg: 1.1rem;
    --fs-xl: 1.35rem;
    --fs-2xl: 1.8rem;

    /* Ítem 7: escala de espaciado de 4px. Mismo criterio -- no reemplaza
       cada margin/padding existente de golpe (altísimo riesgo de romper
       layouts finos ya ajustados a mano), pero es la base para todo
       componente nuevo y para ir migrando los compartidos. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Ítem 8: radios unificados. mg-top-container/account-top-container/
       cards/pills usaban 8/10/12/13/14/16/18px sin relación entre sí. */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Ítem 9: una sola escala de "elevación" en vez de que cada card declare
       su propio box-shadow con blur/opacidad distintos. */
    --shadow-1: 0 4px 12px rgba(0, 0, 0, .18);
    --shadow-2: 0 12px 28px rgba(0, 0, 0, .28);
    --shadow-3: 0 20px 48px rgba(0, 0, 0, .42);
}

/*
 * Los select nativos no pueden usar el padding vertical de los inputs cuando
 * una sección les fija una altura compacta. Eso reducía el área de texto a
 * pocos píxeles y cortaba la opción elegida. Esta base aplica a toda la web.
 */
select.form-control:not([multiple], [size]) {
    min-height: 38px !important;
    padding: 5px 38px 5px 12px !important;
    line-height: 1.3 !important;
    vertical-align: middle;
    background-position: right 13px center !important;
    background-size: 13px 13px;
}

select.form-control:not([multiple], [size]) option {
    line-height: 1.35;
}

@media (max-width: 992px) {
    select.form-control:not([multiple], [size]) {
        min-height: 48px !important;
    }
}

/* Perfil público de Guild: vista de página, nunca modal. Se mantiene aislada
   de Mi cuenta y del escritorio para que su composición móvil sea propia. */
.gp-page-shell {
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    gap: 16px;
    padding: 4px 0 28px;
}
.gp-page-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 14px 18px;
    border: 1px solid rgba(125, 211, 252, .18);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(7, 27, 52, .92), rgba(13, 20, 46, .94));
    box-shadow: 0 12px 30px rgba(1, 5, 18, .22);
}
.gp-page-brand, .gp-page-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gp-page-brand img { width: 38px; height: 38px; object-fit: cover; border-radius: 50%; flex: 0 0 auto; }
.gp-page-brand span { display: block; color: #38bdf8; font-size: .66rem; font-weight: 800; letter-spacing: .12em; }
.gp-page-brand h1 { margin: 2px 0 0; color: #f8fafc; font-size: clamp(1rem, 2vw, 1.32rem); line-height: 1.05; }
.gp-page-tier { color: #c4b5fd; font-size: .75rem; font-weight: 750; white-space: nowrap; }
.gp-page-back { width: auto; min-height: 34px; padding: 7px 12px; white-space: nowrap; }
.gp-page-loading, .gp-page-shell > .gp-empty { margin: 0; padding: 34px; border: 1px solid rgba(125, 211, 252, .14); border-radius: 16px; text-align: center; }
.gp-page-shell .gp-shell-v2 { width: 100%; height: auto; min-height: 0; }
.gp-page-shell .gp-tab-panel { flex: 0 0 auto; min-height: 0; overflow: visible; padding: 8px 2px 2px; }
.gp-page-shell .gp-characters { max-height: none; }
.gp-page-shell .gp-tabs {
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    border: 1px solid rgba(125, 211, 252, .16);
    border-radius: 12px;
    background: rgba(2, 8, 23, .68);
}
.gp-page-shell .gp-tab-btn { flex: 0 0 auto; border-radius: 8px; padding: 8px 13px; }
.gp-page-shell .gp-tab-btn.is-active { border-bottom-color: rgba(56, 189, 248, .25); }

@media (max-width: 760px) {
    .gp-page-shell { width: min(100% - 18px, 620px); gap: 10px; padding-bottom: 18px; }
    .gp-page-top { padding: 11px; border-radius: 14px; align-items: flex-start; flex-wrap: wrap; }
    .gp-page-brand { flex: 1 1 180px; }
    .gp-page-brand img { width: 32px; height: 32px; }
    .gp-page-brand span { font-size: .58rem; }
    .gp-page-brand h1 { font-size: 1.04rem; }
    .gp-page-actions { flex: 0 1 auto; gap: 7px; }
    .gp-page-tier { display: none; }
    .gp-page-back { min-height: 32px; padding: 6px 9px; font-size: .74rem; }
    .gp-page-shell .gp-shell-v2 { gap: 10px; }
    .gp-page-shell .gp-banner { min-height: 122px; border-radius: 14px; }
    .gp-page-shell .gp-hero { padding: 14px; }
    .gp-page-shell .gp-tabs { gap: 4px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .gp-page-shell .gp-tabs::-webkit-scrollbar { display: none; }
    .gp-page-shell .gp-tab-btn { flex: 0 0 auto; padding: 7px 10px; font-size: .73rem; }
    .gp-page-shell .gp-tab-panel { padding-top: 2px; }
}

/* Sistema de tema: una paleta cambia la composición completa, no sólo los
   acentos. Las variables se actualizan en tiempo real desde Perfil. */
@layer vsg-universal {
    html[data-vsg-palette] body {
        background: var(--bg-color) !important;
        color: var(--text-primary) !important;
        
    }
    html[data-vsg-palette] body::before {
        background: radial-gradient(circle at 17% 18%, var(--vsg-theme-wash) 0%, transparent 29%), radial-gradient(circle at 86% 74%, color-mix(in srgb, var(--accent-color) 20%, transparent) 0%, transparent 32%) !important;
        
    }
    html[data-vsg-palette] .sidebar,
    html[data-vsg-palette] .mobile-header {
        background: var(--vsg-theme-sidebar) !important;
        border-color: var(--vsg-theme-border) !important;
        box-shadow: 10px 0 34px color-mix(in srgb, var(--primary-color) 12%, rgba(0,0,0,.62)) !important;
    }
    html[data-vsg-palette] .nav-btn,
    html[data-vsg-palette] .account-tab,
    html[data-vsg-palette] .universal-tab-btn,
    html[data-vsg-palette] .btn-outline {
        background: color-mix(in srgb, var(--primary-color) 8%, #0b1224) !important;
        border-color: color-mix(in srgb, var(--primary-color) 28%, rgba(148,163,184,.28)) !important;
        color: var(--text-muted) !important;
    }
    html[data-vsg-palette] .nav-btn:hover,
    html[data-vsg-palette] .account-tab:hover,
    html[data-vsg-palette] .universal-tab-btn:hover,
    html[data-vsg-palette] .btn-outline:hover {
        background: var(--vsg-theme-hover) !important;
        border-color: var(--primary-hover) !important;
        color: var(--text-primary) !important;
    }
    html[data-vsg-palette] .nav-btn.active,
    html[data-vsg-palette] .account-tab.is-active,
    html[data-vsg-palette] .universal-tab-btn.active,
    html[data-vsg-palette] .universal-tab-btn.is-active,
    html[data-vsg-palette] .btn-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--vsg-theme-strong)) !important;
        border-color: var(--primary-hover) !important;
        color: var(--vsg-button-text, #fff) !important;
        text-shadow: var(--vsg-button-text-shadow, 0 1px 2px rgba(0,0,0,.36));
        box-shadow: 0 9px 24px var(--vsg-theme-wash) !important;
    }
    html[data-vsg-palette] .card,
    html[data-vsg-palette] [class~="acc-card"],
    html[data-vsg-palette] .modal-content,
    html[data-vsg-palette] .universal-top-container,
    html[data-vsg-palette] .store-item,
    html[data-vsg-palette] .data-table tr {
        background: var(--card-bg) !important;
        border-color: var(--vsg-theme-border) !important;
        box-shadow: 0 14px 34px color-mix(in srgb, var(--primary-color) 9%, rgba(0,0,0,.42)) !important;
    }
    html[data-vsg-palette] .modal-header,
    html[data-vsg-palette] .data-table th,
    html[data-vsg-palette] .section-header {
        background: color-mix(in srgb, var(--primary-color) 13%, #080e20) !important;
        border-color: var(--vsg-theme-border) !important;
    }
    html[data-vsg-palette] .form-control,
    html[data-vsg-palette] input:not([type="checkbox"], [type="radio"]),
    html[data-vsg-palette] textarea,
    html[data-vsg-palette] select {
        background-color: var(--vsg-theme-input) !important;
        border-color: color-mix(in srgb, var(--primary-color) 32%, rgba(148,163,184,.3)) !important;
        color: var(--text-primary) !important;
    }
    html[data-vsg-palette] .form-control::placeholder,
    html[data-vsg-palette] input::placeholder,
    html[data-vsg-palette] textarea::placeholder { color: var(--text-muted) !important; opacity: .68; }
    html[data-vsg-palette] .form-control:focus,
    html[data-vsg-palette] input:focus,
    html[data-vsg-palette] textarea:focus,
    html[data-vsg-palette] select:focus { border-color: var(--primary-hover) !important; box-shadow: var(--focus-ring) !important; }
    html[data-vsg-palette] h1,
    html[data-vsg-palette] h2,
    html[data-vsg-palette] h3,
    html[data-vsg-palette] h4,
    html[data-vsg-palette] h5,
    html[data-vsg-palette] h6,
    html[data-vsg-palette] th,
    html[data-vsg-palette] strong { color: var(--text-primary); }
    html[data-vsg-palette] p,
    html[data-vsg-palette] small,
    html[data-vsg-palette] label,
    html[data-vsg-palette] td { color: var(--text-muted); }
    html[data-vsg-palette] a:not(.btn-primary, .btn-outline) { color: var(--primary-hover); }
    html[data-vsg-palette] ::selection { background: var(--primary-color); color: #fff; }
}

/* La selección del perfil colorea la interfaz completa, incluidas superficies
   que históricamente tenían el azul escrito de forma fija. */
@layer vsg-universal {
    html[data-vsg-palette] body {
        background-image: radial-gradient(circle at 84% -10%, var(--vsg-theme-wash, rgba(56,189,248,.15)), transparent 34%);
    }
    html[data-vsg-palette] .sidebar,
    html[data-vsg-palette] .universal-top-container,
    html[data-vsg-palette] .card,
    html[data-vsg-palette] .modal-content {
        border-color: var(--vsg-theme-border, rgba(56,189,248,.42));
    }
    html[data-vsg-palette] .btn-primary,
    html[data-vsg-palette] .nav-btn.active,
    html[data-vsg-palette] .account-tab.is-active {
        border-color: var(--primary-hover, #7dd3fc) !important;
        background: linear-gradient(135deg, var(--primary-color, #38bdf8), var(--vsg-theme-strong, #2563eb)) !important;
        box-shadow: 0 9px 22px var(--vsg-theme-wash, rgba(56,189,248,.24));
    }
    html[data-vsg-palette] a:hover,
    html[data-vsg-palette] .u-primary,
    html[data-vsg-palette] .universal-top-title span { color: var(--primary-hover, #7dd3fc); }
}

body { margin: 0; font-family: 'Inter', sans-serif; background: var(--bg-color); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; overflow-x: clip; position: relative; z-index: 0; }
*,
*::before,
*::after { box-sizing: border-box; }

@keyframes vsgFadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* removed vsgFadeInUp flicker */

body::before { 
    content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; 
    background: radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.2) 0%, transparent 20%), 
                radial-gradient(circle at 80% 70%, rgba(129, 140, 248, 0.2) 0%, transparent 20%); 
    z-index: -2; 
    will-change: transform;
}

.loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color); display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 0.95; contain: layout paint; }

.custom-loader-img {
    width: 350px;
    max-width: 80vw;
    height: auto;
    animation: pulseLoader 1.05s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.5));
    will-change: transform, opacity;
}

@keyframes pulseLoader {
    0%, 100% { transform: translateZ(0) scale(.96); opacity: .8; }
    50% { transform: translateZ(0) scale(1.03); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .custom-loader-img { animation: none; } }

.mobile-header { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 68px; background: rgba(26, 26, 46, 0.8); backdrop-filter: none; z-index: 1500; border-bottom: 1px solid var(--border-color); justify-content: space-between; align-items: center; padding: 0 5%; box-sizing: border-box; overflow: hidden; }
/* Fusión con la cabecera de video de Noticias (.nw-header-container, ahora
   oculta en móvil — ver mobile.css): .mobile-header muestra el mismo video
   de fondo y el nombre completo de la guild en todas las secciones, no solo
   en Noticias. .mobile-brand-summary/los controles de la derecha llevan
   z-index:2 para quedar por encima del video y el degradado. */
.mobile-header-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; opacity: .38; z-index: 0; pointer-events: none; }
.mobile-header-overlay { display: none !important; }
.mobile-header .mobile-brand-summary,
.mobile-header > .u-row-gap-8 { position: relative; z-index: 2; }
.mobile-brand-kicker { display: block; color: #7dd3fc; font-size: .56rem; font-weight: 800; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
#mobileMenuBtn { background: transparent; border: none; font-size: 1.8rem; color: var(--text-primary); cursor: pointer; padding: 0; }
.close-mobile-menu { display: none; position: absolute; top: 15px; right: 15px; background: transparent; border: none; font-size: 2rem; color: var(--text-muted); z-index: 10; cursor: pointer; }
.sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1998; opacity: 0; transition: opacity 0.3s ease; }
.sidebar-overlay.show { display: block; opacity: 1; }

.app-layout { display: flex; width: 100%; }

.sidebar { width: var(--sidebar-width); height: 100dvh; position: fixed; top: 0; left: 0; z-index: 1999; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5vw; box-sizing: border-box; border-right: 1px solid var(--border-color); background: rgba(26, 26, 46, 0.9); box-shadow: 10px 0 30px rgba(0,0,0,0.2); transition: transform 0.3s ease; }
#sidebar-snow-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; }
.snow-particle { position: absolute; pointer-events: none; border-radius: 50%; /* perf-optimized: removed redundant filter blur */ box-shadow: 0 0 4px rgba(255, 255, 255, 0.5); z-index: 1; will-change: transform; }

.sidebar-top, .sidebar-bottom { z-index: 2; position: relative; }
.logo-container { text-align: center; margin-bottom: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.main-logo { max-height: 60px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); }
.logo-text { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); letter-spacing: 1px; text-transform: uppercase; text-align: center; }

.main-nav { display: flex; flex-direction: column; gap: 8px; }
.admin-menu { display: flex; flex-direction: column; gap: 8px; }
.admin-menu-toggle {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 7px;
    width: 86%;
    min-height: 36px;
    margin: 7px auto 2px;
    padding: 6px 9px 6px 7px;
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(14, 165, 233, .12), rgba(99, 102, 241, .08));
    color: #d9f4ff;
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255,255,255,.07), 0 9px 20px rgba(1, 6, 20, .18);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.admin-menu-toggle::before { content: '✦'; display:grid; place-items:center; width:22px; height:22px; border:1px solid rgba(125,211,252,.25); border-radius:7px; background:rgba(56,189,248,.12); color:#78ddff; font-size:.72rem; }
.admin-menu-toggle:hover { border-color: rgba(56, 189, 248, .52); color: #f1fbff; background: linear-gradient(135deg, rgba(14, 165, 233, .2), rgba(99, 102, 241, .14)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 12px 24px rgba(14, 165, 233, .16); transform: translateY(-1px); }
.admin-menu-toggle-icon { display:grid; place-items:center; width:18px; height:18px; border-radius:6px; background:rgba(2,6,23,.34); color:#7dd3fc; font-size:1rem; line-height:1; transition: transform .2s ease, background .2s ease; }
.admin-menu:not(.is-collapsed) .admin-menu-toggle-icon { transform: rotate(180deg); }
.admin-menu:not(.is-collapsed) .admin-menu-toggle { border-color:rgba(125,211,252,.52); }
.admin-menu-content { display: flex; flex-direction: column; gap: 6px; padding:5px 0 2px; border-left:1px solid rgba(56,189,248,.16); }
.admin-menu-content[hidden] { display: none !important; }
#guestControls, #userControls { display: flex; flex-direction: column; gap: 8px; }

.nav-btn { background: rgba(255,255,255,0.03); border: 1px solid transparent; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; padding: 3px 10px; cursor: pointer; border-radius: 8px; transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; text-align: left; width: 86%; margin: 0 auto; box-sizing: border-box; min-height: 24px; }
.nav-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); transform: translateX(4px); }
.nav-btn.active { background: rgba(255,255,255,0.15); color: var(--text-primary); border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.menu-divider { color: var(--text-muted); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 8px 10px; font-weight: 700; opacity: 0.6; }
.bottom-btn { margin-top: 4px; }
#userAccountBtn {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(14, 165, 233, 0.16));
    border: 1px solid rgba(125, 211, 252, 0.5);
    color: #e0f2fe;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.2), 0 10px 22px rgba(14, 165, 233, 0.2);
    display: grid;
    grid-template-columns: 18px 1fr;
    grid-template-areas:
        "logo label"
        "logo name"
        "logo role";
    align-items: center;
    column-gap: 8px;
    row-gap: 1px;
    padding: 7px 10px;
    min-height: 52px;
}

#userAccountBtn::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--vsg-account-avatar, url("https://i.imgur.com/2aTRnRn.png")) center/cover no-repeat;
    border: 1px solid rgba(224, 242, 254, 0.65);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18);
    grid-area: logo;
}

#userAccountBtn:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.4), rgba(14, 165, 233, 0.24));
    border-color: rgba(125, 211, 252, 0.75);
    color: #f0f9ff;
}

#accountName {
    grid-area: name;
    font-weight: 600;
    font-size: 0.74rem;
    line-height: 1.2;
    color: #eaf6ff;
    opacity: 0.96;
    white-space: normal;
    overflow-wrap: anywhere;
}

.account-btn-label {
    grid-area: label;
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(224, 242, 254, 0.9);
}

#accountRole {
    grid-area: role;
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15;
    color: #bae6fd;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.danger-text { color: #fca5a5; }
.danger-text:hover { background: rgba(248, 113, 113, 0.2); color: #fef2f2; }
/* Guild > Gestión repite este mismo borde de acción destructiva (Eliminar,
   Purgar, Revertir, Restaurar) con style="border-color:#ef4444" inline en
   más de 15 botones distintos, en 8 archivos -- siempre junto a la clase
   danger-text que ya estaba puesta en casi todos. Con esta regla, cualquier
   botón nuevo que combine .btn-outline/.btn-primary con .danger-text
   hereda el borde correcto gratis, sin memorizar el hex a mano; los
   estilos inline existentes quedan como duplicados inofensivos (mismo
   valor) hasta que se limpien uno por uno. */
.btn-outline.danger-text, .btn-primary.danger-text { border-color: #ef4444; }

.content-container { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); padding: 2%; box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; }

.universal-top-container {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* Unified Universal Top Header style (global) */
.universal-top-container {
    position: relative;
    background: linear-gradient(135deg, rgba(10, 14, 34, 0.96), rgba(20, 26, 56, 0.9));
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 0;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 26px rgba(0,0,0,0.24);
    padding: 14px 18px;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.universal-top-container > .ut-left-accent,
.universal-top-container::marker {
    display: none;
}

.universal-top-title {
    font-size: clamp(1.5rem, 0.9vw + 1.2rem, 2rem);
    line-height: 1.15;
}

/* Perfil social unificado de jugadores */
.gp-shell { width: min(980px, 92vw); display: grid; gap: 18px; }
.gp-hero { display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; align-items: center; padding: 20px; border: 1px solid rgb(56 189 248 / 22%); border-radius: 18px; background: linear-gradient(135deg, rgb(14 30 57 / 92%), rgb(8 15 32 / 96%)); }
.gp-hero > img { width: 84px; height: 84px; object-fit: cover; border-radius: 18px; border: 2px solid rgb(56 189 248 / 55%); }
.gp-hero h2 { margin: 3px 0; font-size: clamp(1.8rem, 4vw, 2.65rem); line-height: 1; }
.gp-hero span,.gp-hero p,.gp-points span { color: var(--text-muted); }
.gp-points { min-width: 110px; text-align: right; }
.gp-points strong { display: block; color: #38bdf8; font-size: 2rem; }
.gp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gp-stats > div { padding: 14px 16px; border: 1px solid rgb(148 163 184 / 15%); border-radius: 14px; background: rgb(9 18 38 / 76%); }
.gp-stats strong,.gp-stats span { display: block; }
.gp-stats strong { font-size: 1.35rem; color: #f8fafc; }
.gp-stats span { color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.gp-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(390px, 1.2fr); gap: 14px; }
.gp-grid > section { min-width: 0; padding: 16px; border: 1px solid rgb(148 163 184 / 15%); border-radius: 16px; background: rgb(7 14 30 / 82%); }
.gp-heading { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; color: #f8fafc; font-weight: 800; }
.gp-heading strong { color: #38bdf8; font-size: .78rem; text-transform: uppercase; }
.gp-characters { display: grid; gap: 8px; max-height: 330px; overflow: auto; }
.gp-character { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgb(30 41 59 / 48%); }
.gp-character img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }
.gp-character strong,.gp-character span { display: block; }
.gp-character span { margin-top: 3px; color: var(--text-muted); font-size: .78rem; }
.gp-messages { height: 245px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 5px; }
.gp-message { max-width: 84%; padding: 10px 12px; align-self: flex-start; border-radius: 13px 13px 13px 4px; background: rgb(30 41 59 / 84%); }
.gp-message.is-mine { align-self: flex-end; border-radius: 13px 13px 4px; background: rgb(3 105 161 / 32%); }
.gp-message header { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; }
.gp-message time { color: var(--text-muted); }
.gp-message p { margin: 5px 0 0; white-space: pre-wrap; }
.gp-message-body { margin:5px 0 0; overflow-wrap:anywhere; }
.gp-message-body p { margin:.2em 0; }
.gp-message-body ul,.gp-message-body ol { margin:.3em 0; padding-left:1.25rem; }
.gp-message img { max-width: 220px; max-height: 180px; margin-top: 7px; object-fit: contain; border-radius: 10px; }
.gp-compose { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.gp-compose textarea { grid-column: 1 / -1; min-height: 68px; resize: vertical; }
.gp-emojis { display: flex; gap: 5px; }
.gp-emojis button,.gp-gifs button { border: 1px solid rgb(148 163 184 / 20%); border-radius: 8px; background: rgb(15 23 42 / 82%); color: #fff; cursor: pointer; }
.gp-gifs { display: flex; gap: 7px; overflow-x: auto; }
.gp-gifs button { flex: 0 0 92px; padding: 3px; }
.gp-gifs button.is-selected { border-color: #38bdf8; box-shadow: 0 0 0 2px rgb(56 189 248 / 20%); }
.gp-gifs img { width: 100%; height: 66px; object-fit: cover; border-radius: 6px; }
.gp-empty,.gp-loading { padding: 28px; color: var(--text-muted); text-align: center; }
.gp-chat.is-hidden { display: none; }
.gp-inbox { min-height: 360px; padding: 16px; }
.gp-inbox-list { display: grid; gap: 8px; }
.gp-inbox-item { width: 100%; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 11px; border: 1px solid rgb(148 163 184 / 15%); border-radius: 13px; background: rgb(9 18 38 / 78%); color: #fff; text-align: left; cursor: pointer; }
.gp-inbox-item:hover { border-color: rgb(56 189 248 / 55%); transform: translateY(-1px); }
.gp-inbox-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 11px; }
.gp-inbox-item strong,.gp-inbox-item small { display: block; }
.gp-inbox-item small { max-width: 54ch; margin-top: 4px; overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.gp-inbox-item em { min-width: 24px; padding: 4px 7px; border-radius: 999px; background: #0ea5e9; font-size: .75rem; font-style: normal; text-align: center; }
[data-guild-player-id] { cursor: pointer; }
.gp-realname { color: var(--text-muted); font-size: .58em; font-weight: 600; }
.gp-bnet { grid-column: 1 / -1; }
.gp-bnet-body { display: flex; align-items: center; gap: 14px; }
.gp-bnet-render { width: 90px; height: 90px; object-fit: contain; border-radius: 12px; background: rgb(15 23 42 / 60%); }
.gp-bnet-alters { color: var(--text-muted); font-size: .85rem; }
@media (max-width: 760px) { .gp-grid { grid-template-columns: 1fr; } .gp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gp-hero { grid-template-columns: 64px 1fr; } .gp-hero > img { width: 64px; height: 64px; } .gp-points { grid-column: 1 / -1; text-align: left; } }

/* ═══ Perfil público v2: banner personalizado, marco de avatar, logros, monturas ═══ */
.gp-banner { border-radius: 18px; padding: 3px; position: relative; overflow: hidden; }
.gp-banner-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,15,0.15), rgba(5,8,15,0.72)); pointer-events: none; }
.gp-banner-effect-particles::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.55; background-image:radial-gradient(circle at 18% 22%,rgba(255,255,255,.55) 0 1px,transparent 2px),radial-gradient(circle at 74% 36%,rgba(125,211,252,.72) 0 1px,transparent 2px),radial-gradient(circle at 52% 76%,rgba(255,255,255,.45) 0 1px,transparent 2px); background-size:58px 58px,78px 78px,92px 92px; /* static */ }.gp-banner-effect-glow-pulse { /* static */ }.gp-banner-effect-parallax { background-attachment:fixed; background-size:cover; }
@keyframes gpBannerParticles { to { background-position:58px -58px,-78px 78px,92px -92px; } } @keyframes gpBannerGlow { 50% { box-shadow:inset 0 0 42px rgba(125,211,252,.34),0 0 23px rgba(56,189,248,.18); } }
.gp-hero-v2 { position: relative; background: transparent; border: none; grid-template-columns: auto 1fr auto; z-index: 1; }
.gp-avatar-wrap { position: relative; width: 90px; height: 90px; border-radius: 20px; overflow: hidden; border: 3px solid var(--gp-accent, #38bdf8); box-shadow: 0 6px 18px rgba(0,0,0,0.35); flex-shrink: 0; }
.gp-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-avatar-wrap.gp-frame-bronze { border-color: #b45309; }
.gp-avatar-wrap.gp-frame-silver { border-color: #cbd5e1; }
.gp-avatar-wrap.gp-frame-gold { border-color: #eab308; box-shadow: 0 0 14px rgba(234,179,8,0.45); }
.gp-avatar-wrap.gp-frame-runic { border-color: #22d3ee; border-style: double; border-width: 5px; }
.gp-avatar-wrap.gp-frame-thorns { border-color: #7f1d1d; border-style: dashed; }
.gp-avatar-wrap.gp-avatar-glow { box-shadow: 0 0 10px rgba(56,189,248,0.4); }
@keyframes gpAvatarGlowPulse {
    0%, 100% { box-shadow: 0 0 8px 0 var(--gp-accent, #38bdf8); }
    50% { box-shadow: 0 0 24px 6px var(--gp-accent, #38bdf8); }
}
.gp-hero-info { min-width: 0; }
.gp-hero-role { color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.gp-hero-title-badge { display: inline-block; margin: 2px 0 4px; padding: 2px 10px; border-radius: 999px; background: rgba(251,191,36,0.14); border: 1px solid rgba(251,191,36,0.4); color: #fde68a; font-size: 0.72rem; font-weight: 700; }
.gp-hero-motto { font-style: italic; color: #cbd5e1; margin-top: 4px; }
.gp-bio { padding: 12px 16px; border-radius: 12px; background: rgba(148,163,184,0.06); border: 1px solid rgba(148,163,184,0.12); font-size: 0.88rem; color: #e2e8f0; }
.gp-bio p { margin: 0; }
.gp-featured-ach { padding: 10px 14px; border-radius: 12px; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.3); color: #fde68a; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; }
.gp-featured-ach span { color: var(--text-muted); font-weight: 400; }
.gp-featured-ach-img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.gp-achievements { grid-column: 1 / -1; }
.gp-ach-strip { display: flex; flex-wrap: wrap; gap: 7px; }
.gp-ach-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.3); color: #fde68a; font-size: 0.75rem; font-weight: 600; }
.gp-ach-chip-img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.gp-mounts { grid-column: 1 / -1; }
.gp-mounts-grid { display: flex; flex-wrap: wrap; gap: 7px; max-height: 140px; overflow-y: auto; }
.gp-mount-chip { padding: 5px 11px; border-radius: 999px; background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.25); color: #bae6fd; font-size: 0.75rem; }

/* Ítem 25: modal de perfil de jugador por pestañas (Resumen/Logros/
   Mensajes) en vez de todo apilado en una sola vista larga, y selector de
   temporada dentro de la pestaña de Logros. */
.gp-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(148,163,184,0.14); }
.gp-tab-btn { padding: 8px 16px; border: 1px solid transparent; border-radius: 10px 10px 0 0; background: transparent; color: var(--text-muted); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: color .15s ease, background .15s ease; }
.gp-tab-btn:hover { color: #e2e8f0; }
.gp-tab-btn.is-active { color: #38bdf8; background: rgba(56,189,248,0.1); border-color: rgba(56,189,248,0.25); border-bottom-color: transparent; }
.gp-tab-btn.is-hidden { display: none; }
.gp-tab-panel { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.gp-tab-panel.is-hidden { display: none; }
.gp-logros-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.gp-logros-head select { min-width: 200px; }
.gp-ach-filter { display:flex; gap:4px; padding:4px; border:1px solid rgba(148,163,184,.14); border-radius:10px; background:rgba(2,6,23,.36); }.gp-ach-filter-btn { padding:6px 9px; border:0; border-radius:7px; background:transparent; color:#94a3b8; font-size:.7rem; font-weight:800; cursor:pointer; }.gp-ach-filter-btn.is-active,.gp-ach-filter-btn:hover { color:#e0f2fe; background:rgba(56,189,248,.16); }
@media (max-width: 760px) { .gp-tab-btn { flex: 1 1 auto; text-align: center; padding: 8px 10px; } }

/* Perfil de Guild: superficie estable, sin saltos entre pestañas. */
#universalModal:has(.gp-shell) .modal-content { width:min(1120px,94vw); max-width:min(1120px,94vw); height:min(820px,88dvh); max-height:min(820px,88dvh); }
#universalModal:has(.gp-shell) .modal-body { padding:16px; overflow:hidden; }
#universalModal.gp-modal-active .modal-content { display:flex; flex-direction:column; width:min(1120px,94vw); max-width:min(1120px,94vw); height:min(820px,88dvh); max-height:min(820px,88dvh); min-height:0; }
#universalModal.gp-modal-active .modal-header { flex:0 0 auto; }
#universalModal.gp-modal-active .modal-body { display:flex; flex:1 1 auto; height:auto; min-height:0; padding:16px; overflow:hidden; box-sizing:border-box; }
.gp-shell-v2 { width:100%; height:100%; min-height:0; display:flex; flex-direction:column; gap:14px; }
.gp-shell-v2 .gp-banner { min-height:164px; display:flex; align-items:center; }
.gp-shell-v2 .gp-hero { width:100%; padding:22px 24px; }
.gp-shell-v2 .gp-tab-panel { flex:1 1 0; min-height:0; overflow:auto; padding:8px 2px 2px; scrollbar-gutter:stable; }
.gp-shell-v2 .gp-grid { align-items:start; }
.gp-shell-v2.gp-shell--compact { gap:10px; }.gp-shell-v2.gp-shell--compact .gp-banner { min-height:132px; }.gp-shell-v2.gp-shell--compact .gp-hero { padding:16px 20px; }.gp-shell-v2.gp-shell--showcase .gp-featured-ach { order:-1; box-shadow:0 10px 24px rgba(234,179,8,.12); }
.gp-shell-v2 .gp-characters { max-height:300px; }
.gp-ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.gp-ach-card { display:flex; align-items:center; gap:10px; min-height:68px; padding:10px; border:1px solid rgba(148,163,184,.16); border-radius:12px; background:rgba(7,14,30,.7); }
.gp-ach-card img { width:44px; height:44px; object-fit:contain; flex:0 0 auto; }
.gp-ach-card strong,.gp-ach-card small { display:block; }
.gp-ach-card strong { color:#f1f5f9; font-size:.8rem; }
.gp-ach-card small { margin-top:3px; color:#92a4bc; font-size:.7rem; }
.gp-ach-card.is-locked { opacity:.62; }
.gp-ach-card.is-locked img { filter:grayscale(1) contrast(.82) brightness(.72); }
.gp-ach-card-top { border-color:rgba(251,191,36,.42); background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(7,14,30,.76)); }
.gp-ach-card-top strong { color:#fef3c7; }
.gp-messages-panel { overflow:hidden; }.gp-chat { display:grid; grid-template-rows:auto minmax(110px,1fr) auto; min-height:0; height:100%; padding:14px; border:1px solid rgba(125,211,252,.16); border-radius:16px; background:linear-gradient(145deg,rgba(15,23,42,.72),rgba(5,11,24,.86)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }.gp-message-head { display:flex; align-items:center; gap:10px; padding:0 2px 12px; border-bottom:1px solid rgba(148,163,184,.13); }.gp-message-head img { width:38px; height:38px; border:2px solid rgba(56,189,248,.45); border-radius:12px; object-fit:cover; }.gp-message-head strong,.gp-message-head span { display:block; }.gp-message-head strong { color:#e0f2fe; font-size:.92rem; }.gp-message-head span { margin-top:2px; color:#8fa1b8; font-size:.7rem; }.gp-message-private { margin-left:auto; padding:4px 8px; border:1px solid rgba(52,211,153,.24); border-radius:999px; background:rgba(52,211,153,.08); color:#6ee7b7; font-size:.63rem; font-weight:800; }.gp-messages { height:auto; min-height:0; padding:14px 5px 12px 0; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }.gp-messages::-webkit-scrollbar { display:none; }.gp-message { max-width:min(78%,620px); padding:10px 12px; border:1px solid rgba(148,163,184,.12); box-shadow:0 5px 14px rgba(0,0,0,.13); }.gp-compose { align-self:end; display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:0; padding:11px; border:1px solid rgba(125,211,252,.16); border-radius:13px; background:rgba(2,6,23,.42); }.gp-compose-toolbar { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#8fa1b8; font-size:.67rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.gp-emojis { display:flex; gap:4px; }.gp-emojis button { width:27px; height:27px; padding:0; border:1px solid rgba(148,163,184,.15); border-radius:7px; background:rgba(255,255,255,.04); cursor:pointer; }.gp-emojis button:hover { border-color:rgba(125,211,252,.45); background:rgba(56,189,248,.1); }.gp-gif-search { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }.gp-gif-search .btn-outline { white-space:nowrap; }.gp-gifs { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; min-height:0; max-height:76px; overflow:hidden; }.gp-gifs button { min-width:0; height:70px; padding:2px; border:1px solid rgba(148,163,184,.14); border-radius:8px; background:rgba(255,255,255,.03); }.gp-gifs button:nth-child(n+5) { display:none; }.gp-gifs img { width:100%; height:64px; object-fit:cover; border-radius:6px; }.gp-gif-loading { grid-column:1/-1; color:#94a3b8; font-size:.76rem; }.gp-compose #gpSendMessage { min-width:130px; }
.gp-compose .tox-tinymce { grid-column:1/-1; border-radius:12px; border-color:rgba(56,189,248,.34); overflow:hidden; }
@media (max-width:760px) {
  #universalModal:has(.gp-shell) .modal-content { width:calc(100vw - 12px); max-width:calc(100vw - 12px); height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); }
  #universalModal:has(.gp-shell) .modal-body { padding:10px; }
  #universalModal.gp-modal-active .modal-content { width:calc(100vw - 12px); max-width:calc(100vw - 12px); height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); }
  #universalModal.gp-modal-active .modal-body { height:auto; padding:10px; }
  .gp-shell-v2 { gap:10px; }
  .gp-shell-v2 .gp-banner { min-height:132px; border-radius:14px; }
  .gp-shell-v2 .gp-hero { grid-template-columns:64px minmax(0,1fr); gap:12px; padding:16px; }
  .gp-shell-v2 .gp-avatar-wrap { width:64px; height:64px; border-radius:16px; }
  .gp-shell-v2 .gp-hero h2 { font-size:clamp(1.5rem,8vw,2rem); overflow-wrap:anywhere; }
  .gp-shell-v2 .gp-points { grid-column:2; grid-row:1; align-self:start; min-width:0; }
  .gp-shell-v2 .gp-points strong { font-size:1.55rem; }
  .gp-shell-v2 .gp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
  .gp-shell-v2 .gp-stats > div { padding:11px; }
  .gp-shell-v2 .gp-grid { grid-template-columns:1fr; }
  .gp-shell-v2 .gp-grid > section { padding:12px; }
  .gp-ach-grid { grid-template-columns:1fr; }
  .gp-logros-head select { min-width:0; width:100%; }
  .gp-tab-btn { padding:9px 7px; font-size:.75rem; }
  .gp-messages { height:clamp(180px,31dvh,290px); }
  .gp-gif-search { grid-template-columns:1fr; }.gp-gif-search .btn-outline { width:100%; }.gp-compose #gpSendMessage { width:100%; grid-column:1/-1; }
}

.universal-top-header {
    margin-bottom: 6px;
    border-radius: 10px;
    overflow: hidden;
}

/* Folded corners + subtle animated sheen like the previous "Reglas" style */
.universal-top-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #fea0c5;
    border-radius: 10px 0 0 10px;
    z-index: 2;
}

.universal-top-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(254,160,197,0.12) 45%, transparent 75%);
    transform: translateX(-120%);
    /* static */
    pointer-events: none;
}

@keyframes topHeaderSheen {
    0%, 72%, 100% { transform: translateX(-120%); }
    84% { transform: translateX(120%); }
}

.universal-top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.universal-top-title {
    margin: 0;
    font-weight: 700;
    font-size: 1.48rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.universal-top-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.universal-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 15px;
}

.universal-tab-btn {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease, color .2s ease, background .22s ease;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.universal-tab-btn::after {
    content: '';
    position: absolute;
    inset: auto 12% 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0;
    transition: opacity .2s ease;
}

.universal-tab-btn:hover {
    background: linear-gradient(160deg, rgba(56, 189, 248, 0.16), rgba(255,255,255,0.04));
    color: var(--text-primary);
    transform: translateY(-1px);
    border-color: rgba(125,211,252,0.65);
    box-shadow: 0 10px 22px rgba(56,189,248,0.16);
}
.universal-tab-btn.active { 
    background: linear-gradient(160deg, rgba(56, 189, 248, 0.24), rgba(30,64,175,0.16)) !important;
    border-color: var(--primary-color) !important;
    color: #dff4ff !important;
    box-shadow: inset 0 0 0 1px rgba(186,230,253,0.18), 0 12px 26px rgba(56, 189, 248, 0.24);
}
.universal-tab-btn.active::after { opacity: 1; }

.roster-wrapper, .mg-wrapper, .ap-wrapper, .pt-wrapper, .rd-wrapper, .nw-wrapper, .debug-wrapper, .gd-wrapper, .at-wrapper, .cal-wrapper, .mn-wrapper, .wt-wrapper, .rules-wrapper, .cons-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 0 50px 0; 
    box-sizing: border-box;
}

.prog-banner-container { position:absolute; inset:0; display:grid; align-items:stretch; width:100%; height:100%; padding:0; overflow:hidden; isolation:isolate; }
.prog-banner-container::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(3,8,22,.97) 0%,rgba(5,12,30,.84) 48%,rgba(3,8,22,.58) 100%); }
.prog-banner-bg { position:absolute; inset:0; width:100%; height:100%; background-size:cover; background-position:center; opacity:.56; z-index:-2; filter:saturate(.85) contrast(1.08); }
.prog-banner-header { display:flex; flex-direction:column; width:100%; height:100%; min-width:0; padding:13px 16px; gap:9px; z-index:1; box-sizing:border-box; justify-content:center; }
.prog-header-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; min-width:0; }
.prog-header-top-left { display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; }
.prog-season-logo { width:42px; height:42px; object-fit:contain; flex-shrink:0; border-radius:8px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.prog-banner-titles { display:flex; flex-direction:column; min-width:0; gap:4px; flex:1 1 auto; }
.prog-season-name { color:#7dd3fc; font-size:.6rem; font-weight:850; line-height:1.2; text-transform:uppercase; letter-spacing:.14em; }
.prog-raid-name { margin:0; color:#f8fbff; font-size:clamp(1rem,1.35vw,1.32rem); font-weight:850; line-height:1.1; letter-spacing:-.03em; text-shadow:0 3px 14px rgba(0,0,0,.75); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.prog-boss-panel { min-width:0; width:100%; box-sizing:border-box; padding:9px 12px; border:1px solid rgba(148,163,184,.14); border-radius:12px; background:rgba(2,6,23,.46); backdrop-filter: none; display:flex; align-items:stretch; gap:12px; }
.prog-boss-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:7px; }
.prog-boss-panel-label { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.prog-progress-label { flex:0 0 auto; color:#aab8cc; font-size:.62rem; font-weight:800; letter-spacing:.02em; white-space:nowrap; text-transform:uppercase; }
.prog-progress-bar { position:relative; flex:1 1 auto; min-width:40px; height:6px; border-radius:99px; background:rgba(148,163,184,.16); overflow:hidden; }
.prog-progress-fill { height:100%; width:0%; border-radius:99px; background:#38bdf8; transition:width .4s cubic-bezier(.2,.8,.2,1),background .3s; }
.prog-bosses-grid { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; }
.prog-boss-icon { width:32px; height:32px; flex:0 0 32px; border-radius:8px; border:1px solid rgba(148,163,184,.2); object-fit:cover; transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s,border-color .25s,box-shadow .25s; }
.prog-boss-icon:hover { transform:translateY(-2px) scale(1.06); }
.prog-boss-icon.alive { filter:grayscale(1) brightness(.48); border-color:rgba(148,163,184,.16); }
.prog-boss-icon.dead { filter:saturate(1.08) contrast(1.04); border-color:#38bdf8; box-shadow:0 0 0 1px rgba(56,189,248,.18),0 6px 14px rgba(14,165,233,.2); }
.prog-next-box { flex:0 0 280px; min-width:0; display:flex; align-items:center; gap:10px; padding-left:14px; border-left:1px solid rgba(148,163,184,.16); }
.prog-next-icon { width:38px; height:38px; flex:0 0 38px; border-radius:9px; border:1px solid rgba(56,189,248,.35); object-fit:cover; filter:grayscale(.4) brightness(.75); box-shadow:0 0 0 3px rgba(56,189,248,.08); }
.prog-next-info { display:flex; flex-direction:column; min-width:0; gap:2px; }
.prog-next-kicker { color:#7dd3fc; font-size:.56rem; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }
.prog-next-name { overflow:hidden; color:#f4f8ff; font-size:.82rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.prog-next-meta { overflow:hidden; color:#8fa0ba; font-size:.6rem; text-overflow:ellipsis; white-space:nowrap; }
.prog-next-cleared { display:flex; flex-direction:column; gap:3px; }
.prog-next-cleared .prog-next-kicker { color:#6ee7b7; }
.prog-next-cleared strong { color:#f4f8ff; font-size:.78rem; font-weight:800; }
.prog-stats-row { display:flex; gap:6px; flex:0 0 auto; }
.prog-stat-badge { display:grid; grid-template-rows:auto auto; place-items:center; min-width:60px; padding:8px 10px 7px; border:1px solid rgba(148,163,184,.18); border-radius:10px; background:rgba(2,6,23,.68); cursor:pointer; opacity:.72; transition:transform .2s ease,opacity .2s,border-color .2s,background .2s,box-shadow .2s; }
.prog-stat-badge strong { color:currentColor; font-size:.96rem; line-height:1; }
.prog-stat-badge small { margin-top:3px; color:#8fa0ba; font-size:.5rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.prog-stat-badge:hover { opacity:1; transform:translateY(-1px); }
.prog-stat-badge.active { opacity:1; border-color:currentColor; background:rgba(8,18,40,.92); box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 25%,transparent),0 7px 18px rgba(0,0,0,.25); }

.content-wrapper { width: 100%; margin: 0; display: none; }

.card { background: var(--card-bg); border-radius: var(--border-radius); padding: var(--space-5); border: 1px solid var(--border-color); box-shadow: var(--shadow-2); width: 100%; box-sizing: border-box; }

.btn-primary { display: inline-block; width: fit-content; background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(37,99,235,0.18)); border: 1px solid rgba(125,211,252,0.5); color: #eaf8ff; padding: 10px 20px; border-radius: var(--radius-md); cursor: pointer; font-size: var(--fs-md); font-weight: 700; transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; font-family: 'Inter', sans-serif;  }
.btn-primary:hover { background: linear-gradient(135deg, rgba(56,189,248,0.3), rgba(37,99,235,0.24)); transform: translateY(-2px); }
.btn-primary, .btn-outline, .nav-btn { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.btn-primary:hover, .btn-outline:hover, .nav-btn:hover { box-shadow: 0 8px 22px rgba(56, 189, 248, 0.2); }
.btn-primary:focus-visible, .btn-outline:focus-visible, .nav-btn:focus-visible, .form-control:focus-visible, .universal-tab-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
/* Ítem 14: red de seguridad universal. La lista de arriba (y la que se
   repite más abajo para casos puntuales) cubre los controles más usados,
   pero el sitio tiene decenas de botones/`div` clickeables propios por
   sección (.vsg-menu-trigger, .vsg-menu-option, .nw-world-comment-command,
   tarjetas con onclick, etc.) que nunca quedaron en esas listas y se
   navegaban con teclado sin ningún indicio visual de foco. Esta regla no
   reemplaza las de arriba (que dan un highlight ya afinado por componente),
   solo asegura que TODO lo interactivo tenga *algún* indicador. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
[tabindex]:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [contenteditable="true"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn-outline { display: inline-block; width: fit-content; background: rgba(255,255,255,0.04); border: 1px solid rgba(148,163,184,0.4); color: var(--text-primary); padding: 8px 16px; border-radius: var(--radius-md); cursor: pointer; font-size: var(--fs-base); font-weight: 650; transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;  }
.btn-outline:hover { background: rgba(56,189,248,0.2); border-color: var(--primary-color); color: #e8f7ff; box-shadow: 0 6px 16px rgba(56, 189, 248, 0.26); }

/* Compact action controls on desktop: avoid over-stretched inputs/buttons in toolbars */
.universal-top-actions .form-control,
.universal-top-actions select.form-control,
.rc-filters .form-control,
.rc-filters select.form-control,
.nw-inline-actions .form-control,
.nw-inline-actions select.form-control {
    width: auto;
    min-width: 180px;
    max-width: 320px;
}

.universal-top-actions .btn-primary,
.universal-top-actions .btn-outline,
.mg-bulk-actions .btn-primary,
.mg-bulk-actions .btn-outline,
.attendance-actions .btn-primary,
.attendance-actions .btn-outline,
.topgun-zone .rc-btn {
    width: auto;
    max-width: 100%;
    white-space: nowrap;
}

/* Keep forms full-width while preventing accidental button stretch in data areas */
.table-responsive .btn-primary,
.table-responsive .btn-outline,
.modal-body .btn-primary,
.modal-body .btn-outline {
    width: auto;
    max-width: 100%;
}

.table-responsive .form-control {
    max-width: 100%;
}

.np-form-group { margin-bottom: 15px; width: 100%; min-width: 0; box-sizing: border-box; }
.np-form-group label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.form-control { width: 100%; padding: 10px 12px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-family: 'Inter', sans-serif; box-sizing: border-box; transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; font-size: 0.9rem; }
.form-control:focus { outline: none; border-color: rgba(255,255,255,0.3); background: rgba(0,0,0,0.4); }

select.form-control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23cbd5e1' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4H4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 30px; }
select.form-control option { background-color: #1a1a2e; color: #ffffff; padding: 10px; }

.table-responsive { 
    width: 100%; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    scroll-behavior: smooth;
}
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 10px; min-width: 600px; }
.data-table th, .data-table td { padding: 16px; text-align: left; border-bottom: 1px solid var(--border-color); }
.data-table th { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }

/* Tabla → tarjetas en móvil (clase de adopción opcional ".dt-cards").
   Generalizado del patrón que ya usaba #rosterTable/#rosterGeneralTable en
   roster.css (probado en producción); acá queda disponible para cualquier
   tabla del sitio sin duplicar el CSS. Requiere que cada <td> tenga
   data-label="Nombre de columna" (ya es el caso en varias tablas, ej.
   #atLogsTable en attendance-data.js). Si una tabla no tiene data-label, esta
   regla simplemente no le aplica (sigue con scroll horizontal normal dentro
   de .table-responsive) — agregar la clase .dt-cards es seguro incluso antes
   de sumar los data-label, no rompe nada. */
@media (max-width: 820px) {
    .data-table.dt-cards {
        display: block;
        width: 100%;
        min-width: 0;
        background: transparent;
    }
    .data-table.dt-cards thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .data-table.dt-cards tbody { display: grid; gap: 9px; }
    .data-table.dt-cards tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 10px;
        padding: 10px 11px;
        border: 1px solid rgba(148,163,184,.14);
        border-radius: 12px;
        background: linear-gradient(145deg, rgba(15,23,42,.82), rgba(5,10,25,.88));
        box-shadow: 0 8px 18px rgba(0,0,0,.16);
    }
    .data-table.dt-cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
        min-height: 36px;
        padding: 6px 0;
        white-space: normal;
        border: 0;
        background: transparent;
        text-align: right;
    }
    .data-table.dt-cards td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-right: 9px;
        color: #7f91aa;
        font-size: .56rem;
        font-weight: 850;
        letter-spacing: .08em;
        text-align: left;
        text-transform: uppercase;
    }
    .data-table.dt-cards td:not([data-label])::before { content: none; }
    .data-table.dt-cards td:first-child {
        grid-column: 1 / -1;
        justify-content: flex-start;
        min-height: 42px;
        margin-bottom: 3px;
        padding-bottom: 9px;
        border-bottom: 1px solid rgba(148,163,184,.13);
    }
}

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 2000; align-items: center; justify-content: center; padding: 2%; box-sizing: border-box; }
.modal.visible { display: flex; }

.modal-content { width: 100%; max-width: 800px; background: #1a1a2e; border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; position: relative; overflow: hidden; margin: auto; box-sizing: border-box; }
.modal-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('../img/fonlo.jpeg'); background-size: cover; background-position: center; opacity: 0.2; z-index: 0; pointer-events: none; }

.modal-header, .modal-body { position: relative; z-index: 1; box-sizing: border-box; }
.modal-header { padding: 15px 20px; border-bottom: 1px solid var(--border-color); background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 15px; }
.modal-logo { height: 30px; }
.modal-header-text { display: flex; flex-direction: column; flex: 1; }
.modal-guild-name { font-size: 0.65rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 2px; }
.modal-title { margin: 0; color: var(--text-primary); font-size: 1.2rem; font-weight: 600; }
.close-modal-x { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.16); border-radius: 6px; background: rgba(255,255,255,0.08); color: var(--text-primary); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; position: relative; z-index: 2; }
.close-modal-x:hover { background: rgba(239,68,68,0.16); border-color: rgba(248,113,113,0.55); color: #fecaca; transform: translateY(-1px); }
#mgMediaBrowserModal .modal-content > * { position: relative; z-index: 1; }
#mgMediaBrowserModal {
    align-items: center;
    justify-content: center;
}
.table-responsive > .data-table { margin-top: 0; }
#mgMediaBrowserModal .modal-content {
    width: min(1560px, 99vw);
    max-width: min(1560px, 99vw);
    min-width: min(1560px, 99vw);
    height: min(94vh, 1020px);
    min-height: min(94vh, 1020px);
    max-height: min(94vh, 1020px);
}
#mgMediaBrowserModal.is-picker { z-index: 100050; }
#mgMediaBrowserModal.is-picker .mg-media-item { cursor: pointer; }
#mgMediaBrowserModal.is-picker .mg-media-item:hover { border-color: rgba(125,211,252,.62); box-shadow: 0 0 0 2px rgba(56,189,248,.12), 0 14px 28px rgba(1,5,18,.3); }
.mg-media-modal-shell {
    width: min(1560px, 99vw);
    max-width: min(1560px, 99vw);
    height: min(94vh, 1020px);
    background: #111a38;
    display: flex;
    flex-direction: column;
}
.mg-media-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.mg-media-toolbar {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.24);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "path actions"
        "search actions";
    gap: 10px 16px;
    align-items: center;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
}
#mgMediaBreadcrumb {
    grid-area: path;
    color: var(--primary-color);
    font-weight: 800;
    font-size: 1.85rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mg-media-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.mg-media-search-wrap {
    grid-area: search;
    max-width: 360px;
}
#mgMediaBrowserGrid {
    position: relative;
    z-index: 1;
    min-height: 160px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    align-content: start;
}
.mg-media-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.mg-media-main.with-editor { grid-template-columns: 1fr 290px; }
.mg-media-main.edit-only {
    grid-template-columns: 1fr;
}
.mg-media-main.edit-only #mgMediaBrowserGrid {
    display: none;
}
.mg-media-editor-panel {
    border-left: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(180deg, rgba(8,15,34,0.94), rgba(5,12,28,0.9));
    padding: 14px;
    overflow-y: auto;
    min-width: 0;
}
.mg-media-editor-panel.solo {
    width: calc(100% - 28px);
    max-width: none;
    margin: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.35);
}
.mg-editor-topbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}
.mg-editor-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1.35fr) minmax(280px, 1fr);
    gap: 16px;
    align-items: start;
    min-height: 68vh;
}
.mg-editor-left,
.mg-editor-right { min-width: 0; }
.mg-media-editor-panel.is-hidden { display: none; }
.mg-media-editor-panel h4 { margin: 4px 0 10px; font-size: 0.95rem; color: #d9f6ff; text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
.mg-editor-preview-wrap {
    width: 100%;
    height: clamp(240px, 46vh, 500px);
    min-height: 0;
    max-height: 50vh;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    overflow: hidden;
    background: #020617;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.mg-editor-preview-wrap img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: none; }

#mgMediaBrowserModal .mg-media-editor-panel { min-width: 0; overflow-x: hidden; }
#mgMediaBrowserModal .mg-editor-layout { min-height: 0; }
#mgMediaBrowserModal .mg-draw-crop-stage,
#mgMediaBrowserModal .mg-draw-crop-stage img { max-width: 100%; max-height: 50vh; object-fit: contain; }
.mg-editor-row { margin-bottom: 10px; }
.mg-editor-row label { font-size: 0.76rem; color: #93a4c7; display: block; margin-bottom: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
#mgEditorPercent {
    height: 40px;
    border-radius: 10px;
    border-color: rgba(148,163,184,0.3);
    background: rgba(2,8,26,0.85);
}
.mg-size-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.mg-chip {
    border: 1px solid rgba(148,163,184,0.35);
    background: rgba(15,23,42,0.7);
    color: #dbe7ff;
    border-radius: 999px;
    height: 30px;
    padding: 0 12px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.mg-chip:hover {
    border-color: rgba(56,189,248,0.7);
    color: #7dd3fc;
}
.mg-chip.active {
    border-color: #38bdf8;
    background: rgba(56,189,248,0.2);
    color: #7dd3fc;
}
.mg-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.mg-editor-actions .btn-outline { width: auto; min-width: 138px; min-height: 34px; padding: 6px 12px; font-size: 0.78rem; }
.mg-editor-actions .btn-primary { width: auto; min-width: 156px; min-height: 36px; padding: 6px 14px; font-size: 0.8rem; background: linear-gradient(135deg, #0ea5e9, #2563eb); border-color: #38bdf8; }
.mg-editor-actions-primary { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); justify-content: flex-end; }
.mg-crop-tool {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(148,163,184,0.25);
    border-radius: 10px;
    background: rgba(2,8,26,0.5);
}
.mg-crop-tool.is-hidden { display: none; }
.mg-crop-tool input[type="range"] { width: 100%; }
.mg-draw-crop-stage {
    position: relative;
    width: 100%;
    height: 180px;
    border: 1px dashed rgba(148,163,184,0.4);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #020617;
}
#mgCropDrawImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
#mgCropDrawRect {
    position: absolute;
    border: 2px solid #38bdf8;
    background: rgba(56,189,248,0.15);
    display: none;
    pointer-events: auto;
    cursor: move;
}
#mgCropDrawRect .mg-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    right: -6px;
    bottom: -6px;
    background: #38bdf8;
    border: 1px solid #ffffff;
    border-radius: 50%;
    cursor: nwse-resize;
}
@media (max-width: 1100px) {
    .mg-media-main { grid-template-columns: 1fr; }
    .mg-media-editor-panel { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); }
    .mg-editor-layout { grid-template-columns: 1fr; }
}
.mg-media-folder,
.mg-media-item {
    cursor: pointer;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14);
    background: linear-gradient(165deg, rgba(7,14,35,0.86), rgba(17,27,56,0.8));
    box-shadow: 0 8px 24px rgba(0,0,0,0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mg-media-folder:hover,
.mg-media-item:hover {
    transform: translateY(-3px);
    border-color: rgba(110,231,255,0.7);
    box-shadow: 0 14px 30px rgba(13, 148, 136, 0.25);
}
.mg-media-folder {
    min-height: 176px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}
.mg-folder-icon {
    font-size: 2.6rem;
    line-height: 1;
}
.mg-folder-name {
    color: #d9f6ff;
    font-weight: 700;
    font-size: 1rem;
    word-break: break-word;
    padding: 0 12px;
}
.mg-media-item {
    display: flex;
    flex-direction: column;
    min-height: 210px;
}
.mg-media-thumb {
    flex: 1;
    min-height: 148px;
    background: radial-gradient(circle at 50% 28%, rgba(29,78,216,0.2), rgba(2,6,23,1) 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mg-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.mg-media-item:hover .mg-media-thumb img {
    transform: scale(1.05);
    filter: saturate(1.08);
}
.mg-media-item-selected {
    border-color: #22d3ee;
    box-shadow: 0 0 0 2px rgba(34,211,238,0.35), 0 14px 30px rgba(13,148,136,0.25);
}
.mg-media-name {
    padding: 10px 12px;
    font-size: 0.86rem;
    color: #e6f4ff;
    font-weight: 600;
    background: rgba(3, 8, 24, 0.95);
    border-top: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
#mgBtnUploadImage,
#mgBtnUploadVideo,
#mgBtnRefreshMedia {
    border-radius: 9px;
    font-weight: 700;
    letter-spacing: 0.2px;
    min-height: 38px;
    padding: 8px 14px;
}
#mgBtnUploadImage {
    background: linear-gradient(135deg, rgba(6,182,212,0.24), rgba(16,185,129,0.2));
}
#mgBtnUploadVideo {
    background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(99,102,241,0.2));
}
#mgBtnRefreshMedia {
    background: rgba(255,255,255,0.06);
}
#mgMediaSearch {
    border-radius: 10px;
    background: rgba(2,6,23,0.72);
    border-color: rgba(148,163,184,0.32);
    height: 38px;
}
@media (max-width: 900px) {
    .mg-media-toolbar {
        grid-template-columns: 1fr;
        grid-template-areas:
            "path"
            "actions"
            "search";
    }
    .mg-media-actions {
        flex-wrap: wrap;
    }
    .mg-media-search-wrap {
        max-width: 100%;
    }
}

/* Subida multimedia: flujo simple y separado de la biblioteca. */
#mgUploadModal{align-items:center;justify-content:center;padding:16px;background:rgba(1,5,18,.84);backdrop-filter: none;}
#mgUploadModal .mg-upload-modal-shell{width:min(660px,95vw);max-width:660px;max-height:min(92dvh,820px);border:1px solid rgba(125,211,252,.22);border-radius:22px;background:linear-gradient(155deg,rgba(10,18,42,.99),rgba(4,9,24,.99));box-shadow:0 28px 80px rgba(0,0,0,.58)}
.mg-upload-body{display:flex;flex-direction:column;gap:15px;padding:20px;overflow:auto}
.mg-upload-intro span{color:#48caff;font-size:.62rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.mg-upload-intro h4{margin:4px 0;font-size:1.25rem}.mg-upload-intro p{margin:0;color:#8395af;font-size:.78rem;line-height:1.45}
.mg-upload-kind{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.mg-upload-kind button{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;padding:12px;border:1px solid rgba(148,163,184,.14);border-radius:13px;background:rgba(255,255,255,.025);color:#8496b0;text-align:left;cursor:pointer}.mg-upload-kind button>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(56,189,248,.08);color:#63d8ff;font-size:1rem}.mg-upload-kind strong{color:#dcecff;font-size:.82rem}.mg-upload-kind small{font-size:.64rem}.mg-upload-kind button.is-active{border-color:rgba(94,210,255,.42);background:linear-gradient(135deg,rgba(14,165,233,.16),rgba(37,99,235,.09));box-shadow:0 0 0 3px rgba(56,189,248,.05)}
.mg-upload-dropzone{display:grid;place-items:center;min-height:150px;padding:22px;border:1px dashed rgba(103,216,255,.42);border-radius:16px;background:radial-gradient(circle at 50% 30%,rgba(56,189,248,.1),transparent 60%),rgba(2,7,20,.52);color:#d9efff;text-align:center;cursor:pointer;transition:border-color .2s ease,background .2s ease}.mg-upload-dropzone.is-dragging{border-color:#67e8f9;background:rgba(14,165,233,.12)}.mg-upload-dropzone input{display:none}.mg-upload-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:8px;border-radius:13px;background:linear-gradient(135deg,#0891b2,#2563eb);font-size:1.35rem}.mg-upload-dropzone strong{font-size:.86rem}.mg-upload-dropzone small{margin-top:4px;color:#7187a5;font-size:.68rem}
.mg-upload-preview{display:flex;align-items:center;justify-content:center;min-height:88px;overflow:hidden;border:1px solid rgba(148,163,184,.12);border-radius:13px;background:rgba(2,7,20,.55)}.mg-upload-preview.is-empty{color:#667b98;font-size:.7rem}.mg-upload-preview img,.mg-upload-preview video{display:block;width:100%;max-height:170px;object-fit:contain;background:#020617}.mg-upload-preview div{min-width:0;padding:13px}.mg-upload-preview div strong,.mg-upload-preview div span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mg-upload-preview div strong{font-size:.78rem}.mg-upload-preview div span{margin-top:4px;color:#7187a5;font-size:.66rem}
.mg-upload-destination{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 14px;border:1px solid rgba(148,163,184,.12);border-radius:13px;background:rgba(255,255,255,.025)}.mg-upload-destination span,.mg-upload-destination strong{display:block}.mg-upload-destination span{color:#7187a5;font-size:.58rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.mg-upload-destination strong{margin-top:2px;font-size:.75rem}.mg-upload-destination select{width:150px;min-height:38px}.mg-upload-destination.is-user-only select{pointer-events:none;opacity:.78}
.mg-upload-status{min-height:18px;color:#7dd3fc;font-size:.7rem}.mg-upload-status.is-error{color:#fb7185}.mg-upload-status.is-success{color:#4ade80}.mg-upload-footer{display:flex;justify-content:flex-end;gap:9px;padding-top:3px}.mg-upload-footer button{min-height:40px;padding:9px 16px}
@media(max-width:560px){.mg-upload-kind{grid-template-columns:1fr}.mg-upload-destination{align-items:stretch;flex-direction:column}.mg-upload-destination select{width:100%}.mg-upload-footer button{flex:1}}

/* Progreso comparte el corte de la app: entre 721 y 820px ya no conserva
   controles de escritorio dentro de una navegación móvil. */
@media (max-width: 820px) {
    .prog-banner-header { padding:12px 14px; gap:8px; }
    .prog-header-top { flex-wrap:wrap; gap:8px 12px; }
    .prog-boss-panel { padding:7px 9px; }
    .prog-boss-icon { width:24px; height:24px; flex-basis:24px; }
    .prog-stat-badge { min-width:44px; padding:6px; }
    .prog-stat-badge small { display:none; }
    .prog-progress-label { font-size:.54rem; }
}

.modal-body { padding: 20px; overflow-y: auto; background: transparent; width: 100%; box-sizing: border-box; }
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

.login-modal-layout { display: flex; gap: 5%; align-items: center; width: 900px; max-width: 100%; }
.login-visual-container { width: 40%; display: flex; justify-content: center; }
.warlock-img { width: 100%; max-width: 220px; height: auto; opacity: 0.8; }
.login-form-container { width: 60%; display: flex; flex-direction: column; justify-content: center; }
.forgot-link { text-align: center; margin-top: 25px; font-size: 0.9rem; }
.forgot-link a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.forgot-link a:hover { color: var(--text-primary); }

.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.store-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-speed);
}
.store-item:hover {
    transform: translateY(-5px);
}
.store-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.1);
}
.store-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.store-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    height: 40px;
}
.store-price {
    font-size: 1.5rem;
    font-weight: 900;
    color: #10b981;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.topside-placeholder {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    justify-content: flex-start; 
    width: 100%;
    margin-bottom: 2rem;
    padding: 0;
    max-width: min(100%, var(--vsg-banner-max-width));
}

#guildProgressionBanner {
    flex: 1 1 calc(50% - 10px);
    max-width: none;
    height: var(--vsg-banner-height);
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

#thisWeekWowBanner {
    flex: 1 1 calc(50% - 10px);
    max-width: none;
    height: var(--vsg-banner-height);
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.4);
}

.nw-header-banner {
    width: 100%;
    height: 250px;
    position: relative; 
    border-radius: 12px; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 30px; 
    box-sizing: border-box; 
    border: 1px solid rgba(255,255,255,0.05); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    background: rgba(26,26,46,0.8);
    margin-bottom: 25px;
}

#nwDynamicVideo {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
    z-index: 0; opacity: 0.4; border-radius: 12px; filter: saturate(1.05) contrast(1.04);
    mask-image: linear-gradient(to right, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%);
}

@media (max-width: 900px) {
    .topside-placeholder { flex-direction: column; padding: 10px; gap: 20px; }
    #guildProgressionBanner, #thisWeekWowBanner { flex: 1 1 100%; max-width: 100%; height: var(--vsg-banner-height); min-height: var(--vsg-banner-height); }
    .nw-header-banner { flex-direction: column; justify-content: center; text-align: center; gap: 15px; }
}

@media (max-width: 820px) {
    .prog-next-box { display: none; }
}

@media (max-width: 820px) {
    .login-modal-layout { flex-direction: column; min-width: 100%; gap: 0; }
    .login-visual-container { display: none; }
    .login-form-container { width: 100%; padding: 20px 10px; }
}

/* Media library 2.0 */
#mgMediaBrowserModal { padding: clamp(8px, 1.5vw, 22px); background: rgba(1,5,17,.86); backdrop-filter: none; }
#mgMediaBrowserModal .mg-media-modal-shell { width: min(1680px, 98vw); min-width: 0; max-width: 1680px; height: min(94dvh, 1040px); min-height: 0; border: 1px solid rgba(125,211,252,.18); border-radius: 22px; background: linear-gradient(150deg, rgba(11,19,42,.99), rgba(4,8,21,.99)); box-shadow: 0 40px 100px rgba(0,0,0,.62); }
#mgMediaBrowserModal .modal-header { min-height: 66px; padding: 12px 18px; border-color: rgba(148,163,184,.13); background: rgba(3,8,22,.8); }
#mgMediaBrowserModal .modal-header > img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(56,189,248,.25)); }
#mgMediaBrowserModal .modal-title { font-size: 1.08rem; font-weight: 750; }
.mg-media-toolbar { grid-template-columns: minmax(260px, 1fr) auto; grid-template-areas: "heading actions" "search controls" "categories categories"; gap: 12px 18px; padding: 17px 20px 14px; border-color: rgba(148,163,184,.12); background: rgba(5,10,27,.72); box-shadow: none; }
.mg-library-heading { grid-area: heading; min-width: 0; }
.mg-library-heading > span { display: block; margin-bottom: 4px; color: #38bdf8; font-size: .58rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
#mgMediaBreadcrumb { color: #f1f7ff; font-size: clamp(1.15rem, 1.8vw, 1.55rem); letter-spacing: -.025em; }
.mg-media-actions { gap: 7px; }
.mg-media-actions .btn-primary,
.mg-media-actions .btn-outline { min-height: 37px; padding: 7px 11px; border-radius: 9px; font-size: .7rem; }
.mg-media-actions .btn-primary { background: linear-gradient(135deg, #0284c7, #2563eb); border-color: rgba(125,211,252,.35); }
.mg-media-search-wrap { grid-area: search; max-width: 560px; }
#mgMediaSearch { height: 41px; padding-left: 14px; border: 1px solid rgba(148,163,184,.18); border-radius: 10px; background: rgba(2,6,23,.7); }
.mg-media-categories { grid-area: categories; display: flex; gap: 6px; overflow-x: auto; padding-top: 2px; scrollbar-width: none; }
.mg-category-chip { flex: 0 0 auto; min-height: 33px; padding: 6px 11px; border: 1px solid transparent; border-radius: 9px; background: rgba(255,255,255,.025); color: #8393ac; font-size: .66rem; font-weight: 750; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.mg-category-chip:hover { color: #dff6ff; border-color: rgba(56,189,248,.18); }
.mg-category-chip.active { color: #dff7ff; border-color: rgba(56,189,248,.3); background: rgba(56,189,248,.11); box-shadow: inset 0 0 0 1px rgba(56,189,248,.04); }
.mg-media-display-controls { grid-area: controls; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
#mgMediaResultCount { color: #71829d; font-size: .65rem; white-space: nowrap; }
#mgMediaSort { width: 132px; height: 36px; padding: 6px 8px; border-radius: 8px; background: rgba(2,6,23,.68); font-size: .66rem; }
.mg-view-switch { display: inline-flex; padding: 3px; border: 1px solid rgba(148,163,184,.13); border-radius: 8px; background: rgba(2,6,23,.55); }
.mg-view-switch button { min-height: 28px; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: #71819a; font-size: .61rem; cursor: pointer; }
.mg-view-switch button.active { background: rgba(56,189,248,.13); color: #dff7ff; }
.mg-media-main { background: radial-gradient(circle at 30% 0%, rgba(37,99,235,.05), transparent 36%); }
#mgMediaBrowserGrid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 12px; padding: 18px 20px 24px; scrollbar-color: rgba(56,189,248,.24) transparent; }
.mg-media-folder,
.mg-media-item { border: 1px solid rgba(148,163,184,.12); border-radius: 13px; background: linear-gradient(150deg, rgba(13,22,45,.86), rgba(4,9,22,.94)); box-shadow: 0 10px 24px rgba(0,0,0,.17); }
.mg-media-folder { min-height: 164px; padding: 18px 14px; }
.mg-folder-icon { display: grid; place-items: center; width: 47px; height: 40px; margin-bottom: 12px; border: 1px solid rgba(56,189,248,.18); border-radius: 10px; background: rgba(56,189,248,.07); font-size: 1.25rem; }
.mg-folder-name { color: #cfeeff; font-size: .78rem; }
.mg-media-item { min-height: 205px; }
.mg-media-thumb { position: relative; min-height: 155px; background: #030817; }
.mg-media-thumb img { object-fit: cover; }
.mg-media-type { position: absolute; z-index: 2; top: 8px; right: 8px; padding: 3px 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(2,6,23,.72); backdrop-filter: none; color: #bcecff; font: 800 .52rem ui-monospace, monospace; }
.mg-media-name { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; text-align: left; background: rgba(3,8,21,.94); }
.mg-media-name strong { overflow: hidden; color: #e3ecf8; font-size: .68rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mg-media-name span { overflow: hidden; color: #62738f; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.mg-media-item-selected { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56,189,248,.18), 0 16px 34px rgba(0,0,0,.28); }
#mgMediaBrowserGrid.is-compact { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
#mgMediaBrowserGrid.is-compact .mg-media-item { display: grid; grid-template-columns: 92px minmax(0,1fr); min-height: 76px; height: 76px; }
#mgMediaBrowserGrid.is-compact .mg-media-thumb { min-height: 74px; }
#mgMediaBrowserGrid.is-compact .mg-media-name { justify-content: center; }
.mg-media-main.with-editor { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
.mg-media-editor-panel { border-color: rgba(148,163,184,.12); background: linear-gradient(180deg, rgba(11,20,42,.96), rgba(4,9,22,.96)); }

@media (max-width: 760px) {
    .mg-media-toolbar { grid-template-columns: 1fr; grid-template-areas: "heading" "search" "categories" "controls" "actions"; }
    .mg-media-actions,
    .mg-media-display-controls { justify-content: flex-start; flex-wrap: wrap; }
    .mg-media-main.with-editor { grid-template-columns: 1fr; }
    #mgMediaBrowserGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
    .mg-media-item { min-height: 160px; }
    .mg-media-thumb { min-height: 112px; }
}

.nw-reader-body img {
    max-width: 40%;
    height: auto;
    border-radius: 8px;
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: block;
    margin: 15px auto;
}
.nw-reader-body img:hover {
    transform: scale(1.03);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}

/* Shared utility layer to reduce inline-style dependence */
.u-hidden { display: none; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-text-left { text-align: left; }
.u-text-muted { color: var(--text-muted); }
.u-primary { color: var(--primary-color); }
.u-danger { color: #ef4444; }
.u-success { color: #10b981; }
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end { justify-content: flex-end; }
.u-gap-8 { gap: 8px; }
.u-gap-10 { gap: 10px; }
.u-gap-15 { gap: 15px; }
.u-wrap { flex-wrap: wrap; }
.u-w-100 { width: 100%; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-15 { margin-bottom: 15px; }
.u-mb-20 { margin-bottom: 20px; }
.u-mt-15 { margin-top: 15px; }
.u-mt-20 { margin-top: 20px; }
.u-p-20 { padding: 20px; }
.u-panel-soft {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}
.u-btn-success { background:#10b981; border-color:#059669; }
.u-btn-warn { border-color:#f59e0b; color:#f59e0b; }
.u-btn-danger { border-color:#ef4444; color:#ef4444; }

/* Safer motion defaults for weaker devices and accessibility */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Ultra-Pro CSS hardening layer (non-destructive overrides) ===== */
:root {
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --space-1: clamp(6px, 0.35vw, 8px);
    --space-2: clamp(8px, 0.5vw, 12px);
    --space-3: clamp(12px, 0.8vw, 16px);
    --space-4: clamp(16px, 1.1vw, 22px);
    --space-5: clamp(22px, 1.5vw, 30px);
    --text-xs: clamp(0.75rem, 0.2vw + 0.72rem, 0.82rem);
    --text-sm: clamp(0.86rem, 0.25vw + 0.82rem, 0.95rem);
    --text-md: clamp(0.95rem, 0.3vw + 0.9rem, 1.05rem);
    --text-lg: clamp(1.1rem, 0.55vw + 1rem, 1.35rem);
    --elev-1: 0 6px 18px rgba(0,0,0,0.18);
    --elev-2: 0 12px 26px rgba(0,0,0,0.24);
    --elev-3: 0 18px 40px rgba(0,0,0,0.3);
    --focus-ring-strong: 0 0 0 1px rgba(186,230,253,0.25), 0 0 0 4px rgba(56,189,248,0.24);
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.content-container {
    max-width: 1700px;
}

.card,
.modal-content,
.ap-left-card,
.ap-preview-live,
.mg-raid-card,
.pt-leaderboard {
    border-radius: var(--radius-md);
    box-shadow: var(--elev-2);
}

.btn-primary,
.btn-outline,
.nav-btn,
.form-control,
.universal-tab-btn {
    border-radius: var(--radius-sm);
}

.btn-primary,
.btn-outline,
.nav-btn {
    font-size: var(--text-sm);
    letter-spacing: 0.01em;
}

.nav-btn {
    min-height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1.15;
}

.btn-primary:hover,
.btn-outline:hover,
.nav-btn:hover {
    transform: none;
}

.btn-primary:active,
.btn-outline:active,
.nav-btn:active {
    transform: none;
}

.btn-primary:focus-visible,
.btn-outline:focus-visible,
.nav-btn:focus-visible,
.form-control:focus-visible,
.universal-tab-btn:focus-visible,
.data-table tr:focus-within,
.ap-live-alter-clickable:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-strong);
}

.np-form-group label {
    font-size: var(--text-xs);
    margin-bottom: var(--space-1);
}

.form-control {
    font-size: var(--text-sm);
    padding: clamp(10px, 0.7vw, 12px) clamp(12px, 0.9vw, 14px);
    background: rgba(5,10,24,0.55);
    border-color: rgba(148,163,184,0.34);
}

.form-control::placeholder {
    color: rgba(191,206,233,0.6);
}

.form-control:hover {
    border-color: rgba(147,197,253,0.5);
}

.form-control:focus {
    border-color: rgba(125,211,252,0.8);
    background: rgba(4,11,28,0.75);
}

select.form-control {
    background-position: right 12px center;
}

.table-responsive {
    border-radius: var(--radius-sm);
}

.data-table th {
    position: sticky;
    top: 0;
    backdrop-filter: none;
    background: rgba(17,23,44,0.86);
    z-index: 1;
}

.data-table tbody tr {
    transition: background-color .2s ease, transform .2s ease;
}

.data-table tbody tr:hover {
    background: rgba(148,163,184,0.08);
}

.modal { background: rgba(3, 7, 18, 0.82);
}

.modal-content {
    max-height: min(92dvh, 1020px);
}

.modal-body {
    overflow: auto;
    /* Evita que, al llegar al borde del scroll interno del modal, el
       navegador encadene el resto del gesto hacia la página de atrás
       (típico en móvil: "bajo bien pero después no puedo subir"). */
    overscroll-behavior: contain;
}

/* Se activa desde openModal()/closeModal() (utils.js). Sin esto la página
   detrás de un modal abierto seguía siendo scrolleable con el dedo/rueda,
   lo que en móvil hacía que el gesto de scroll se perdiera entre el modal
   y el fondo en vez de mover solo el modal. */
body.vsg-modal-open {
    overflow: hidden;
}

/* Modal general project-wide tuning (safe for universal/alert modals) */
#universalModal .modal-content,
#alertModal .modal-content {
    width: min(760px, 94vw);
    max-height: min(88dvh, 900px);
    border-radius: 14px;
}

#universalModal .modal-header,
#alertModal .modal-header {
    padding: 12px 16px;
}

#universalModal .modal-title,
#alertModal .modal-title {
    font-size: 1.05rem;
}

#universalModal .modal-body,
#alertModal .modal-body {
    padding: 14px 16px;
}

.ap-live-alter-clickable {
    min-height: 44px;
}

@media (max-width: 992px) {
    .content-container {
        padding: var(--space-3);
    }

    .card,
    .modal-content {
        border-radius: var(--radius-sm);
    }
}

@media (max-width: 640px) {
    .btn-primary,
    .btn-outline,
    .nav-btn {
        width: 100%;
    }

    .data-table th,
    .data-table td {
        padding: 12px;
    }
}

.vsg-discord-rank {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    margin-left: 6px;
    border: 1px solid rgba(88, 101, 242, 0.4);
    border-radius: 6px;
    background: rgba(88, 101, 242, 0.16);
    color: #9ec5ff;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/* Mobile responsive layout fixes for sidebar and content container */
/* El shell móvil y los módulos de aplicación comparten 820px. Mantenerlo
   alineado evita la franja 821-900px con navegación móvil y contenido PC. */
@media (max-width: 820px) {
    .mobile-header {
        display: flex;
        height: calc(68px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }
    .sidebar { transform: translateX(-100%); width: 260px; }
    .sidebar.open { transform: translateX(0); }
    .close-mobile-menu { display: block; }
    .content-container {
        margin-left: 0;
        width: 100%;
        padding: calc(84px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 20px max(12px, env(safe-area-inset-left, 0px));
    }
}

/* ═══ Modal de felicitación por Logro de Vanilla IO ═══ */
.ach-congrats-modal {
    text-align: center;
    padding: 10px 6px 4px;
}
.ach-congrats-icon {
    font-size: 3.2rem;
    line-height: 1;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.55));
    animation: achBounceIn 0.5s cubic-bezier(.34,1.56,.64,1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ach-congrats-rank-img { width: 92px; height: 92px; object-fit: contain; }
@keyframes achBounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
.ach-congrats-title {
    margin: 0 0 6px;
    color: #fbbf24;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
}
.ach-congrats-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 10px;
    padding: 0 10px;
}
.ach-congrats-threshold {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fde68a;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.ach-congrats-coin { width: 18px; height: 18px; object-fit: contain; }
.ach-congrats-copy {
    color: var(--text-muted, #94a3b8);
    font-size: 0.88rem;
    margin: 0 auto 18px;
    max-width: 340px;
}
.ach-congrats-close { width: 100%; padding: 12px; font-weight: 700; }

/* ═══ Campana de notificaciones (sidebar) ═══ */
/* Ítem 10: la campana ahora vive dentro del contenedor del botón de Cuenta,
   como una insignia circular anclada a su esquina superior derecha, en vez
   de ser un botón aparte al lado. #userAccountBtn y #userNotifBellBtn siguen
   siendo elementos hermanos (dos <button> no pueden anidarse en HTML válido),
   pero comparten el mismo contenedor visual .user-account-wrap. */
.user-account-wrap { position: relative; width: 100%; margin: 0 auto; }
.user-account-wrap #userAccountBtn { width: 100%; margin: 0; }
.nav-bell-btn-embedded {
    position: absolute;
    /* El sidebar tiene overflow-x:hidden (navigation-auth-modern.css) para
       no dejar scroll horizontal -- un offset negativo acá (antes -7px)
       hace que la mitad derecha del círculo quede recortada contra ese
       borde, y lo que debería verse redondo se ve aplastado/elíptico. Un
       inset positivo lo mantiene entero dentro de los límites del botón. */
    top: -4px;
    right: 2px;
    width: 26px;
    height: 26px;
    aspect-ratio: 1;
    flex-shrink: 0;
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 0.88rem;
    line-height: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.95), rgba(14, 165, 233, 0.9));
    border: 2px solid rgba(10, 14, 34, 0.92);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    color: #f0f9ff;
    cursor: pointer;
    z-index: 3;
    transition: transform 0.2s ease, background 0.2s ease;
}
.nav-bell-btn-embedded:hover { transform: scale(1.1); background: linear-gradient(135deg, rgba(56, 189, 248, 1), rgba(14, 165, 233, 1)); }
.nav-bell-btn { font-size: 1.05rem; line-height: 1; }
.nav-notif-count {
    position: absolute;
    top: -3px;
    right: -1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
}
.notif-center-modal { display: flex; flex-direction: column; gap: 6px; max-width: 420px; width: min(420px, 84vw); }
.notif-center-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #94a3b8);
    margin: 10px 0 4px;
}
.notif-center-section-title:first-child { margin-top: 0; }
.notif-center-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    color: inherit;
}
.notif-center-item:hover { border-color: rgba(56,189,248,0.35); }
.notif-center-item.is-unread { background: rgba(56,189,248,0.06); border-color: rgba(56,189,248,0.2); }
.notif-center-icon { font-size: 1.1rem; flex-shrink: 0; }
.notif-center-body { min-width: 0; }
.notif-center-msg { display: block; font-size: 0.85rem; color: #f1f5f9; line-height: 1.35; }
.notif-center-meta { display: block; font-size: 0.7rem; color: var(--text-muted, #94a3b8); margin-top: 3px; }
.notif-center-empty { padding: 24px; text-align: center; color: var(--text-muted, #94a3b8); font-size: 0.85rem; }
}

/* Encabezados universales: en pantallas pequeñas el contenido conserva su
   jerarquía sin depender de alturas fijas ni forzar scroll horizontal. */
@layer vsg-universal {
    .universal-top-container,
    .universal-top-header,
    .universal-top-header > *,
    .universal-top-title,
    .topside-placeholder#topsideContainer > * { min-width: 0; max-width: 100%; }

    .topside-placeholder#topsideContainer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: clamp(12px, 1.5vw, 20px);
    }
    .topside-placeholder#topsideContainer > #guildProgressionBanner,
    .topside-placeholder#topsideContainer > #thisWeekWowBanner {
        width: 100%; height: auto; min-height: clamp(150px, 13vw, 184px);
    }

    @media (max-width: 820px) {
        .universal-top-container { min-height: 0 !important; padding: clamp(12px, 4vw, 18px) !important; }
        .universal-top-header { align-items: flex-start !important; gap: 10px !important; }
        .universal-top-title { flex: 1 1 190px; font-size: clamp(1.08rem, 5vw, 1.45rem) !important; line-height: 1.12; overflow-wrap: anywhere; }
        .universal-top-actions, .universal-tabs { flex: 1 1 100%; width: 100%; min-width: 0; }
        .universal-top-actions { display: flex; flex-wrap: wrap; gap: 8px; }
        .universal-top-actions > * { flex: 1 1 140px; min-width: 0; }
        .universal-tabs { overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
        .universal-tabs > * { flex: 0 0 auto; }
        .topside-placeholder#topsideContainer { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 18px; }
        .topside-placeholder#topsideContainer > #guildProgressionBanner,
        .topside-placeholder#topsideContainer > #thisWeekWowBanner { min-height: 0; }
        /* El banner de progreso debe medir solo el alto de su contenido en
           móvil (pedido explícito) -- no un número fijo ni el alto de la
           imagen del carrusel de al lado (eso dejaba un hueco vacío debajo
           cuando la imagen era más alta que el contenido real). Ver
           #guildProgressionBanner .prog-banner-container más abajo, que
           deja de rellenar con position:absolute;inset:0 para que el alto
           de este elemento salga de su contenido de verdad. */
        .topside-placeholder#topsideContainer > #guildProgressionBanner { height: auto; min-height: 0; }
    }
    @media (max-width: 430px) {
        .universal-top-container { padding: 12px !important; }
        .universal-top-title { flex-basis: 150px; font-size: 1.05rem !important; }
        .universal-top-actions > * { flex-basis: 100%; }
        .topside-placeholder#topsideContainer > #thisWeekWowBanner { min-height: 236px; }
    }
}

/* Superficies que se dimensionan desde su propio ancho y no desde la pantalla
   completa. El coordinador JS escribe --vsg-surface-scale al redimensionar;
   no se usa transform:scale, por lo que el alto y los puntos táctiles siguen
   correspondiendo con el tamaño que el usuario ve. */
@layer vsg-universal {
    /* .nw-header-container ya migró a componente independiente -- su setup
       de container queries (min-width/max-width/container-type/
       --vsg-surface-scale y los clamp() con cqw de .nw-header-content-wrapper/
       .nw-brand-lockup/.nw-guild-mark) se declara ahora en news.css. */
    #newsThisWeekWowBanner,
    #thisWeekWowBanner,
    #guildProgressionBanner {
        min-width: 0;
        max-width: 100%;
        container-type: inline-size;

        --vsg-surface-scale: 1;
    }

    .topside-placeholder#topsideContainer > #guildProgressionBanner,
    .topside-placeholder#topsideContainer > #thisWeekWowBanner {
        min-width: 0;
        max-width: 100%;
    }

    #guildProgressionBanner .prog-banner-container {
        width: 100%;
        min-width: 0;
        container-type: inline-size;
    }

    #guildProgressionBanner .prog-banner-header {
        padding: clamp(9px, 2.1cqw, 14px);
    }

    #guildProgressionBanner .prog-season-logo {
        width: clamp(20px, 3.6cqw, 28px);
        height: clamp(20px, 3.6cqw, 28px);
    }

    #guildProgressionBanner .prog-raid-name {
        font-size: clamp(.86rem, 2.25cqw, 1.16rem);
        overflow-wrap: anywhere;
    }
}

/* ==========================================================================
   MEJORAS & REPARACIONES GLOBALES (2026 EDITION)
   ========================================================================== */

/* Barra de progreso de lectura / scroll (Idea 11) */
.vsg-scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color, #38bdf8), var(--accent-color, #818cf8), #fea0c5);
    box-shadow: 0 0 10px var(--primary-color, #38bdf8), 0 0 4px #ffffff;
    z-index: 9999;
    pointer-events: none;
    transition: width 0.08s ease-out;
}

/* Modal Scroll Lock (Reparación 25) */
body.vsg-modal-open {
    overflow: hidden !important;
    touch-action: none;
}

/* Prevención universal de desbordamiento horizontal (Reparación 1) */
html, body {
    max-width: 100%;
    overflow-x: clip;
}

/* Tablas autocontenidas con sticky headers (Reparación 4) */
.vsg-table-container,
.table-responsive,
.roster-table-container,
.attendance-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    border-radius: var(--radius-md, 12px);
}

.vsg-table-container table thead th,
.table-responsive table thead th,
.roster-table-container table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #0d1831;
}

/* Saltos de línea y truncamiento seguro (Reparación 6) */
.text-truncate-safe {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-break-safe {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Prevención de CLS en imágenes y avatares (Reparación 19) */
img.avatar-preview,
img.main-logo,
img.mobile-brand-logo,
.member-avatar img,
.blizzard-render {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Aceleración por hardware para animaciones (Reparación 20) */
.nav-btn,
.btn-primary,
.btn-outline,
.tw-banner-card,
.card,
.modal-content {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Contención de renderizado para listas pesadas (Reparación 22) */
.vsg-contain-intrinsic {
    content-visibility: auto;
    contain-intrinsic-size: 0 320px;
}

/* Contrato de contención: las rejillas y filas flexibles no pueden empujar la
   página fuera del viewport con un alias, correo o etiqueta excepcionalmente
   largos. El corte visual queda a cargo de cada componente; aquí solo se
   habilita que los hijos puedan encogerse de forma segura. */
:where(
    .content-container > *,
    .modal-content > *,
    .vsg-glass-card > *,
    .universal-top-actions > *,
    .nw-inline-actions > *,
    .rc-filters > *
) {
    min-inline-size: 0;
}

/* Los controles nunca deben extenderse más allá de su columna al heredar
   medidas antiguas de un módulo. No fuerza el ancho: conserva la intención
   compacta de acciones y selectores en escritorio. */
:where(.form-control, .btn-primary, .btn-outline) {
    max-inline-size: 100%;
}


/* ═══ MASTER GPU ACCELERATION & ZERO-LAG RULES ═══ */
* {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.modal-content, .card, .table-responsive, .roster-table-container, .raid-card, .sidebar, .main-content {
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: layout style;
}
.table-responsive {
    contain: paint layout;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
}
#rosterTable, #accHistorialContent, .news-grid, .raids-grid {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

/* ==========================================================================
   SISTEMA DE MODALES DE ALTO RENDIMIENTO (ZERO-LAG Y CONTROL DE VISIBILIDAD)
   ========================================================================== */
/* 1. Cuando los modales están CERRADOS: NUNCA se muestran, ni bloquean clics, ni oscurecen la pantalla */
.modal:not(.visible),
#universalModal:not(.visible),
#alertModal:not(.visible),
#mgUploadModal:not(.visible),
#mgMediaBrowserModal:not(.visible),
.vsg-birthday-modal:not(.is-visible),
.vsg-credentials-modal:not(.is-visible),
.vsg-carousel-section:not(.is-visible),
.vsg-modal:not(.visible),
.modal-backdrop:not(.visible) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

/* 2. Cuando los modales están ABIERTOS: Se muestran con aceleración GPU fluida */
.modal.visible,
#universalModal.visible,
#alertModal.visible,
#mgUploadModal.visible,
#mgMediaBrowserModal.visible {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(2, 6, 23, 0.82) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99999 !important;
    will-change: opacity;
    transform: translateZ(0);
}

.vsg-birthday-modal.is-visible,
.vsg-credentials-modal.is-visible,
.vsg-carousel-section.is-visible {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    will-change: opacity;
    transform: translateZ(0);
}

/* 3. Panel de contenido del modal: GPU Aislado, sin lag */
.modal-content,
#universalModal .modal-content,
#alertModal .modal-content,
.vsg-birthday-modal__panel,
.vsg-credentials-modal__panel,
.vsg-carousel-section-panel {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75);
}

/* 4. Optimización de tablas y renderizado bajo demanda */
#rosterTable, #accHistorialContent, .news-grid, .raids-grid {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

/* ==========================================================================
   ULTRA-SMOOTH SCROLLING & PAINT OPTIMIZATIONS
   ========================================================================== */
/* Aisla los contenedores con scroll para que no repinten la página completa */
.scrollable, .table-responsive, .modal-body, .mg-dict-grid {
    overscroll-behavior: contain;
}

/* Optimiza la decodificación de imágenes y rasterización */
img {
    content-visibility: auto;
}

.loader-wrapper {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.loader-wrapper.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#global-loader { pointer-events: none; }