/* ============================================================
   ROLYGAMING - Marca, arreglos y nombres de colores (v1)
   Se carga despues de portal-v1.css y solo pisa lo necesario.
   ============================================================ */

/* ---------- Logo propio ---------- */
.rg-brand-logo { display: block; width: 40px; height: auto; filter: drop-shadow(0 0 12px rgba(168, 85, 247, .35)); }
.rg-brand.footer .rg-brand-logo { width: 34px; }
.rg-auth-brand img { width: 34px; height: auto; }
.rg-discord-card .rg-discord-logo { width: 54px; height: auto; filter: drop-shadow(0 0 14px rgba(168, 85, 247, .35)); }

/* ---------- Hero con el banner de ROLYGAMING ---------- */
.rg-command-center::before {
    background:
        linear-gradient(90deg, rgba(7,5,11,.98) 0 38%, rgba(7,5,11,.35) 70%, rgba(7,5,11,.55)),
        url('/assets/img/brand/hero-rg.jpg') 100% 50% / min(980px, 68vw) auto no-repeat !important;
    opacity: .95 !important;
}
@media (max-width: 650px) {
    .rg-command-center::before {
        background:
            linear-gradient(rgba(7,5,11,.82), var(--bg)),
            url('/assets/img/brand/hero-rg.jpg') 50% 0 / cover !important;
        opacity: .7 !important;
    }
}

/* ---------- Menu: cuenta dentro del menu del celular ---------- */
.rg-menu .rg-menu-account { display: none; }
@media (max-width: 920px) {
    .rg-menu .rg-menu-account { display: flex; border-top: 1px solid var(--line); margin-top: 4px; color: white; }
    .rg-menu .rg-menu-account + .rg-menu-account { border-top: 0; margin-top: 0; }
    .rg-menu .rg-menu-account.highlight { background: linear-gradient(135deg, var(--purple), #7c3aed); border-radius: 8px; justify-content: center; }
    .rg-navbar { position: relative; }
}

/* ---------- Toast ---------- */
.rg-toast { max-width: min(92vw, 440px); text-align: center; line-height: 1.4; }

/* ============================================================
   NOMBRES DE COLORES
   ============================================================ */
.rg-name { font-weight: 800; }

/* Por rol */
.rg-name--rol-admin { color: #ff5d6c; text-shadow: 0 0 10px rgba(255, 93, 108, .35); }
.rg-name--rol-mod   { color: #5cc8ff; text-shadow: 0 0 10px rgba(92, 200, 255, .3); }

/* Degrades (texto pintado) */
.rg-name--owner, .rg-name--dorado, .rg-name--fuego, .rg-name--hielo,
.rg-name--toxico, .rg-name--neon, .rg-name--arcoiris, .rg-name--plata, .rg-name--sangre {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.rg-name--owner {
    background-image: linear-gradient(90deg, #b8860b, #ffe58a 25%, #fff6c9 40%, #f5b700 55%, #ffe58a 75%, #b8860b);
    background-size: 220% 100%;
    animation: rgNameShine 3.2s linear infinite;
    filter: drop-shadow(0 0 8px rgba(255, 196, 0, .45));
    font-weight: 900;
}
.rg-name--dorado   { background-image: linear-gradient(180deg, #fff1a8, #f5b700 55%, #b07a00); filter: drop-shadow(0 0 6px rgba(245, 183, 0, .35)); }
.rg-name--fuego    { background-image: linear-gradient(90deg, #ffde59, #ff7a18 45%, #ff2e2e); filter: drop-shadow(0 0 7px rgba(255, 90, 30, .4)); }
.rg-name--hielo    { background-image: linear-gradient(90deg, #e6fbff, #7fe3ff 50%, #3aa0ff); filter: drop-shadow(0 0 7px rgba(90, 200, 255, .4)); }
.rg-name--toxico   { background-image: linear-gradient(90deg, #d4ff5a, #3dff95 55%, #00c27a); filter: drop-shadow(0 0 7px rgba(61, 255, 149, .35)); }
.rg-name--neon     { background-image: linear-gradient(90deg, #ff6ad5, #c567ff 50%, #8b5cf6); filter: drop-shadow(0 0 8px rgba(197, 103, 255, .5)); }
.rg-name--plata    { background-image: linear-gradient(180deg, #ffffff, #c9ced6 55%, #8a919c); filter: drop-shadow(0 0 5px rgba(220, 225, 235, .3)); }
.rg-name--sangre   { background-image: linear-gradient(180deg, #ff6b6b, #c40018 60%, #6e0010); filter: drop-shadow(0 0 7px rgba(200, 0, 30, .4)); }
.rg-name--arcoiris {
    background-image: linear-gradient(90deg, #ff4d4d, #ffb84d, #f9f871, #5bff8f, #4dd2ff, #9b6bff, #ff4dd2, #ff4d4d);
    background-size: 300% 100%;
    animation: rgNameShine 5s linear infinite;
}

@keyframes rgNameShine { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }

@media (prefers-reduced-motion: reduce) {
    .rg-name--owner, .rg-name--arcoiris { animation: none; }
}

/* Etiqueta de rango */
.rg-rank-tag { display: inline-flex; align-items: center; margin-left: 6px; border-radius: 5px; padding: 2px 6px; font-size: 8px; font-weight: 950; letter-spacing: .6px; vertical-align: middle; background: rgba(168,85,247,.15); color: var(--purple-2); }
.rg-rank-tag.owner { background: rgba(245,183,0,.14); color: #ffd34d; border: 1px solid rgba(245,183,0,.35); }
.rg-rank-tag.admin { background: rgba(255,93,108,.12); color: #ff7a87; }
.rg-rank-tag.mod   { background: rgba(92,200,255,.12); color: #7fd6ff; }

/* ---------- Selector de estilo (perfil) ---------- */
.rg-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.rg-style-option { position: relative; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: #08050d; padding: 10px; cursor: pointer; }
.rg-style-option input { width: auto !important; accent-color: var(--purple); }
.rg-style-option:has(input:checked) { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(168,85,247,.12); }
.rg-style-option .rg-name { font-size: 13px; }
.rg-style-locked { border: 1px dashed rgba(245,183,0,.35); border-radius: 12px; padding: 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.rg-style-locked a { color: #ffd34d; font-weight: 850; }

/* ============================================================
   PAGINA STAFF
   ============================================================ */
.rg-staff-page { padding: 50px 0 80px; }
.rg-staff-hero { margin-bottom: 30px; }
.rg-staff-hero h1 { margin: 8px 0; font-size: clamp(40px, 6vw, 68px); line-height: 1; letter-spacing: -2px; }
.rg-staff-hero h1 em { color: var(--purple-2); font-style: normal; }
.rg-staff-hero p { max-width: 720px; color: var(--muted); }
.rg-staff-group { margin-top: 34px; }
.rg-staff-group > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; letter-spacing: 1.4px; color: var(--muted); }
.rg-staff-group > h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rg-staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.rg-staff-card { position: relative; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(21,13,32,.96), rgba(12,8,18,.96)); padding: 16px; overflow: hidden; transition: transform .2s, border-color .2s; }
.rg-staff-card:hover { transform: translateY(-2px); border-color: rgba(168,85,247,.45); }
.rg-staff-card.owner { border-color: rgba(245,183,0,.35); box-shadow: 0 0 0 1px rgba(245,183,0,.08), 0 20px 50px rgba(245,183,0,.06); }
.rg-staff-card.owner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, rgba(245,183,0,.12), transparent 60%); pointer-events: none; }
.rg-staff-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(145deg, var(--purple), #3b0f6b); font-size: 20px; font-weight: 950; color: #fff; }
.rg-staff-card.owner .rg-staff-avatar { background: linear-gradient(145deg, #f5b700, #7a5200); }
.rg-staff-card.admin .rg-staff-avatar { background: linear-gradient(145deg, #ff5d6c, #6e0010); }
.rg-staff-card.mod .rg-staff-avatar { background: linear-gradient(145deg, #3aa0ff, #0b3b6e); }
.rg-staff-info { min-width: 0; }
.rg-staff-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.rg-staff-info small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 11px; }
.rg-staff-online { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px rgba(78,224,155,.6); }
.rg-staff-empty { border: 1px dashed var(--line); border-radius: 14px; padding: 22px; color: var(--muted); text-align: center; font-size: 13px; }