/*
 * base.css — GYM-S POWER v1.0.0
 * MODIFICADO: Distribución vertical con espacios intencionales
 */

/* ═══ VARIABLES & RESET ══════════════════════════════════════════ */
/* ═══ VARIABLES & RESET ══════════════════════════════════════════ */
:root {
    --ac:        #aaff00;
    --ac-r:      170;
    --ac-g:      255;
    --ac-b:      0;
    --ac-dim:    rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
    --ac-glow:   rgba(var(--ac-r),var(--ac-g),var(--ac-b),.50);
    --ac2:       var(--ac);
    --ac2-dim:   rgba(0,229,255,.12);
    --ac2-glow:  rgba(0,229,255,.45);
    --bg:        #000;
    --card-bg:   rgba(0,0,0,.72);
    --card-border:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.30);
    --text:      #ffffff;
    --text-muted:rgba(255,255,255,.65);
    --text-faint:rgba(255,255,255,.30);
    --t:         .2s cubic-bezier(.4,0,.2,1);
    --font-hud:  'Rajdhani','Barlow Condensed','Arial Narrow',sans-serif;
    --font-title:'Bebas Neue','Impact',sans-serif;
    
    /* Variables de espaciado - DUPLICADAS */
    --space-lg:  clamp(4rem, 12vh, 8rem);  /* ANTES: clamp(2rem, 6vh, 4rem) - AHORA EL DOBLE */
    --space-md:  clamp(1rem, 3vh, 2rem);
    --space-sm:  clamp(0.5rem, 1.5vh, 1rem);

    /* ── Variables de paneles/modales — controladas por personalize.js ── */
    --panel-bg:  #09090b;   /* fondo principal de paneles y modales */
    --panel-bg2: #0a0a0a;   /* fondo secundario/header de paneles  */
    --panel-bg3: #111111;   /* fondo terciario/cards dentro paneles */
    --panel-blur: blur(0px); /* blur del fondo de paneles (aumenta con UI brightness) */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{overflow:hidden;height:100%;}
body.gyms-app{
    background:#000!important;color:var(--text)!important;
    font-family:var(--font-hud);font-size:1rem;
    height:100vh;height:100svh;overflow:hidden;
    display:flex;flex-direction:column;
}
body.gyms-app #page,body.gyms-app .site,body.gyms-app #content,
 body.gyms-app .entry-content,body.gyms-app .site-content{all:unset;display:flex;flex-direction:column;height:auto;flex:1 1 auto;min-height:0;}
/* Tras eliminar las cajas intermedias, las hijas toman la jerarquía del body y mantienen la distribución flex */
a{color:var(--ac);text-decoration:none;}

/* ── Variable de padding lateral del layout — usada por el topbar ── */
:root { --layout-px: 1.5rem; }
@media (min-width:768px)  { :root { --layout-px: 0px;    } } /* desktop: grid sin padding */
@media (max-width:767px)  { :root { --layout-px: .7rem;  } }
@media (max-width:600px)  { :root { --layout-px: .5rem;  } }
@media (max-width:400px)  { :root { --layout-px: .35rem; } }
button{font-family:inherit;cursor:pointer;}
ul,ol{list-style:none;}
img{display:block;max-width:100%;}

/* ═══ LOADER ════════════════════════════════════════════════════ */
.hud-loader{
    position:fixed;inset:0;z-index:9999;background:var(--bg);
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:1.5rem;
}
.hud-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s,visibility .5s;}
.hud-loader__ring{
    width:52px;height:52px;
    border:2px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);border-top-color:var(--ac);
    border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.hud-loader__text{text-align:center;}
.hud-loader__name{display:block;font-family:var(--font-title);font-size:1.6rem;letter-spacing:.15em;color:var(--ac);}
.hud-loader__sub{display:block;font-size:.65rem;letter-spacing:.2em;color:var(--text-muted);margin-top:.3rem;}
.hud-loader__bar-wrap{width:200px;height:2px;background:rgba(255,255,255,.1);overflow:hidden;}
.hud-loader__bar-fill{height:100%;width:0;background:var(--ac);animation:load-bar 1.4s ease-out forwards;}
@keyframes load-bar{to{width:100%;}}
.hud-loader__corners{position:absolute;inset:1.5rem;}

/* ═══ FONDO ═════════════════════════════════════════════════════ */
.hud-bg{position:fixed;inset:0;z-index:0;overflow:hidden;}
.hud-bg__img{
    position:absolute;inset:0;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    background-attachment:scroll;
    /* Fuerza que la imagen nunca exceda el contenedor fijo */
    max-width:100%;
    overflow:hidden;
    transition:opacity .35s ease;
    will-change:opacity;
}
.hud-bg__img.is-transitioning{opacity:0;}
.hud-bg__overlay{
    position:absolute;inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.42) 40%,
        rgba(0,0,0,.60) 75%,
        rgba(0,0,0,.82) 100%
    );
}
.hud-bg__scanlines{display:none;}
.hud-bg__vignette-left{
    position:absolute;top:0;left:0;bottom:0;width:100px;
    background:linear-gradient(to right,rgba(0,0,0,.55),transparent);
}
.hud-bg__vignette-right{
    position:absolute;top:0;right:0;bottom:0;width:100px;
    background:linear-gradient(to left,rgba(0,0,0,.55),transparent);
}

/* ── Barra de progreso del slideshow ──────────────────── */
.hud-slide-progress{
    position:absolute;bottom:0;left:0;right:0;
    height:2px;background:rgba(255,255,255,.08);
    z-index:20;overflow:hidden;
}
#slide-progress-bar{
    height:100%;width:0;
    background:var(--ac);
    box-shadow:0 0 6px var(--ac-glow);
}
.hud-bg__vignette-right{
    position:absolute;top:0;right:0;bottom:0;width:100px;
    background:linear-gradient(to left,rgba(0,0,0,.55),transparent);
}

/* ═══ LAYOUT ════════════════════════════════════════════════════ */
/* MODIFICADO: Estructura de distribución vertical específica */
.hud-layout{
    position:relative;z-index:1;
    display:flex;flex-direction:column;
    width:100vw;height:100vh;height:100svh;
    overflow:hidden;padding:0;
    flex:1 1 auto;
    min-height:0;
}

/* NUEVO: Wrapper con distribución vertical controlada */
.hud-main-content {
    flex: 1 1 auto;        /* flex: crece para llenar todo el alto disponible */
    align-self: stretch;   /* grid: se estira al 100% de la celda */
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    overflow-y: auto;        /* permitir scroll interno sin tocar overflow del body */
}

/* Distribución específica de cada sección */
.hud-reel {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0 .4rem;
    position: relative;
    z-index: 5;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;        /* No se comprime */
    margin: 0;             /* Sin márgenes — space-between del orbital gestiona el espacio */
}

.hud-center {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.3rem;
    overflow:hidden;
    padding:.2rem 0;
    position:relative;
    z-index:5;
    width:100%;
    margin: 0 0 var(--space-sm) 0;  /* Espacio pequeño después del panel central */
}

/* Los botones dentro de .hud-center ya están, pero aseguramos su margen */
.hud-actions {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.25rem;
    padding:.15rem 0;
    margin: 20px 0 var(--space-lg) 0;
}

/* Patrocinadores al final con margen superior grande */
.hud-sponsors {
    padding:.35rem 0 .5rem;
    position:relative;
    z-index:5;
    flex-shrink:0;
    margin-top: auto;  /* Empuja hacia abajo */
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Esquinas HUD */
.hud-corner{position:absolute;width:10px;height:10px;border-color:var(--ac);border-style:solid;opacity:.7;}
.hud-corner--tl{top:0;left:0;border-width:1px 0 0 1px;}
.hud-corner--tr{top:0;right:0;border-width:1px 1px 0 0;}
.hud-corner--bl{bottom:0;left:0;border-width:0 0 1px 1px;}
.hud-corner--br{bottom:0;right:0;border-width:0 1px 1px 0;}

/* ═══ TOPBAR ════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
   TOPBAR — 2 filas responsive
   Fila 1: Logo + Sociales + Controles
   Fila 2: Nav de secciones (ancho completo)
   ════════════════════════════════════════════════════ */
.hud-topbar{
    display:flex;flex-direction:column;
    padding:.4rem 0 0;gap:0;
    position:relative;z-index:10;
    flex-shrink:0;
    /* Ancho completo: escapar el padding del layout padre */
    width:calc(100% + 2 * var(--layout-px));
    margin-left:calc(-1 * var(--layout-px));
    overflow:visible;
}
/* Fila 1 */
.hud-topbar__row1{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: .4rem !important;
    width: 100% !important;
    min-height: 36px !important;
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Grupo izquierda: logo + sociales — tamaño natural, no crece */
.hud-topbar__left {
    display: flex !important;
    align-items: center !important;
    gap: .45rem !important;
    flex: 0 0 auto !important;
}
/* Desktop: alinear con columnas del grid (sidebar izq / numerador der) */
@media (min-width:768px) {
    .hud-topbar__row1 { padding-left:52px !important; padding-right:32px !important; }
}
@media (min-width:1024px) {
    .hud-topbar__row1 { padding-left:64px !important; padding-right:40px !important; }
}
@media (min-width:1440px) {
    .hud-topbar__row1 { padding-left:72px !important; padding-right:48px !important; }
}
/* Fila 2 */
.hud-topbar__row2{
    display:flex;align-items:center;justify-content:flex-start;gap:.4rem;
    width:100%;border-top:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);
    padding:.25rem var(--layout-px) .2rem;
    margin-top:.25rem;
    min-height:28px;overflow:visible;
    box-sizing:border-box;
}
@media (min-width:768px) {
    .hud-topbar__row2 { padding-left:52px !important; padding-right:32px !important; }
}
@media (min-width:1024px) {
    .hud-topbar__row2 { padding-left:64px !important; padding-right:40px !important; }
}

/* Logo */
.hud-logo{
    display:inline-flex;align-items:center;
    border:none;padding:.18rem .55rem;
    text-decoration:none;flex-shrink:0;
}
.hud-logo__bracket{display:none;}
.hud-logo__name{
    font-family:var(--font-title);font-size:.65rem;
    letter-spacing:.12em;color:var(--ac);white-space:nowrap;
}
.hud-logo:hover{box-shadow:0 0 12px var(--ac-glow);}

/* Sociales */
.hud-social{display:flex;align-items:center;gap:.45rem;}
.hud-social__link{
    display:flex;align-items:center;justify-content:center;
    width:24px;height:24px;color:var(--text-muted);transition:color var(--t);
}
.hud-social__link:hover{color:var(--ac);}
.hud-social__link svg{width:14px;height:14px;fill:currentColor;}

/* Controls derecha */
.hud-topbar__right{
    display:flex;align-items:center;gap:.4rem;
    flex:0 0 auto;flex-shrink:0;
}

/* ════════ NAV SECCIONES — Carrusel con flechas (desktop) / scroll libre (mobile) */
.hud-sections-nav{
    display:flex;align-items:center;gap:.15rem;
    max-width:100%;overflow:hidden;
}
/* Track: en desktop muestra todo el contenido centrado;
   en mobile scroll libre sin scrollbar */
.hud-snav__track{
    display:flex;align-items:center;gap:0;
    /* Deja que el track crezca según los botones pero no fuerce flex:1 en desktop */
    min-width:0;
    overflow-x:auto;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.hud-snav__track::-webkit-scrollbar{display:none;}

/* Botón de sección */
.hud-snav__btn{
    flex-shrink:0;
    background:none;border:none;
    font-family:var(--font-hud);font-size:.62rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--text-muted);padding:.2rem .45rem;
    transition:color var(--t);position:relative;white-space:nowrap;
    cursor:pointer;
}
.hud-snav__btn::after{
    content:'';position:absolute;bottom:0;left:50%;right:50%;
    height:1px;background:var(--ac);transition:left var(--t),right var(--t);
}
.hud-snav__btn.is-active,.hud-snav__btn:hover{color:var(--ac);}
.hud-snav__btn.is-active::after,.hud-snav__btn:hover::after{left:0;right:0;}
.hud-snav__btn[hidden]{display:none!important;}

/* Flechas (solo desktop) */
.hud-snav__arrow{
    flex-shrink:0;
    background:none;border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);
    color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.55);
    width:18px;height:18px;
    display:flex;align-items:center;justify-content:center;
    font-size:.9rem;line-height:1;cursor:pointer;
    transition:border-color var(--t),color var(--t),opacity var(--t);
    padding:0;
}
.hud-snav__arrow:hover{border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.65);color:#fff;}
.hud-snav__arrow:disabled{opacity:.2;cursor:default;pointer-events:none;}
.hud-snav__arrow[hidden]{display:none!important;}
.hud-icon-btn{
    background:none;border:none;color:var(--text-muted);
    width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    transition:color var(--t);flex-shrink:0;
}
.hud-icon-btn:hover{color:var(--ac);}
.hud-icon-btn svg{width:15px;height:15px;}

.hud-user{display:flex;align-items:center;gap:.4rem;}
.hud-user__info{display:flex;flex-direction:column;align-items:flex-end;font-size:.65rem;letter-spacing:.08em;line-height:1.3;}
.hud-user__role{color:var(--text-faint);}
.hud-user__sitename{color:var(--text-muted);}
.hud-user__name{font-size:.75rem;font-weight:700;color:var(--ac);letter-spacing:.08em;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hud-user__login-btn{
    background:none;border:1.5px solid var(--ac);
    font-family:var(--font-hud);font-size:.68rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--ac);padding:.25rem .6rem;cursor:pointer;
    transition:background var(--t),color var(--t);
}
.hud-user__login-btn:hover{background:var(--ac);color:#000;}

.hud-topbar__right{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;flex-shrink:0;}

/* ══════════════════════════════════════════════════════════
   CAMPANITA DE NOTIFICACIONES
   ══════════════════════════════════════════════════════════ */
.gyms-bell-wrap {
    position: static;   /* panel se posiciona relativo al topbar, no al wrapper */
    display: flex;
    align-items: center;
}
.gyms-bell-btn {
    position: relative;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: rgba(255,255,255,.75);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    flex-shrink: 0;
}
.gyms-bell-btn:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.3);
}
.gyms-bell-btn.has-unread {
    color: #FFD700;
    border-color: rgba(255,215,0,.5);
    animation: gyms-bell-shake 2s ease infinite;
}
@keyframes gyms-bell-shake {
    0%,90%,100% { transform: rotate(0); }
    92%          { transform: rotate(-12deg); }
    96%          { transform: rotate(12deg); }
}
.gyms-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    background: #ff3b5c;
    color: #fff;
    font-size: .5rem;
    font-weight: 800;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    letter-spacing: 0;
    border: 1.5px solid #0c0e10;
}

/* Panel desplegable */
.gyms-notif-panel {
    position: fixed;
    top: 56px;
    right: 8px;
    width: 320px;
    max-height: 440px;
    background: #111518;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,.75);
    z-index: 99999;
    flex-direction: column;  /* display toggled via JS (style.display) */
    overflow: hidden;
}
.gyms-notif-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .85rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255,255,255,.85);
    flex-shrink: 0;
}
.gyms-notif-panel__clear {
    background: none;
    border: none;
    color: var(--ac, #00ffff);
    font-size: .65rem;
    cursor: pointer;
    letter-spacing: .06em;
    padding: 0;
}
.gyms-notif-panel__clear:hover { text-decoration: underline; }

.gyms-notif-list {
    overflow-y: auto;
    flex: 1;
    padding: .3rem 0;
}
.gyms-notif-empty {
    color: rgba(255,255,255,.35);
    font-size: .72rem;
    text-align: center;
    padding: 1.2rem;
    margin: 0;
}
.gyms-notif-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .55rem .85rem;
    text-decoration: none;
    color: rgba(255,255,255,.8);
    font-size: .72rem;
    line-height: 1.35;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .15s;
}
.gyms-notif-item:hover { background: rgba(255,255,255,.05); }
.gyms-notif-item--new {
    background: rgba(0,255,200,.04);
    border-left: 2px solid var(--ac, #00ffff);
}
.gyms-notif-item__icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.gyms-notif-item__text { flex: 1; color: rgba(255,255,255,.85); }
.gyms-notif-item__time { font-size: .6rem; color: rgba(255,255,255,.35); flex-shrink:0; white-space:nowrap; }

/* Mobile */
@media (max-width: 480px) {
    .gyms-notif-panel { right: 4px; width: calc(100vw - 8px); max-width: 320px; }
}


.hud-topbar__cta-publish{
    background:var(--ac);color:#000;
    font-family:var(--font-hud);font-size:.68rem;font-weight:700;
    letter-spacing:.12em;border:none;padding:.3rem .85rem;
    cursor:pointer;transition:background var(--t);
    white-space:nowrap;flex-shrink:0;
}
.hud-topbar__cta-publish:hover{background:color-mix(in srgb,var(--ac) 85%,white);}

/* ── Wrapper dropdown usuario ───────────────────────── */
.hud-user-wrap{position:relative;flex-shrink:0;}

/* Botón trigger */
.hud-topbar__cta-login{
    display:flex;align-items:center;gap:.35rem;
    background:none;
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.4);
    font-family:var(--font-hud);font-size:.68rem;font-weight:700;
    letter-spacing:.1em;color:var(--ac);
    padding:.28rem .65rem;cursor:pointer;
    transition:background var(--t),border-color var(--t);
    white-space:nowrap;
}
.hud-topbar__cta-login:hover,
.hud-topbar__cta-login[aria-expanded="true"]{
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);border-color:var(--ac);
}
.hud-user-avatar-wrap{display:flex;align-items:center;}
.hud-user-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid var(--ac);}
.hud-user-chevron{transition:transform .2s;flex-shrink:0;opacity:.7;}
.hud-topbar__cta-login[aria-expanded="true"] .hud-user-chevron{transform:rotate(180deg);}

/* ── Menú desplegable ───────────────────────────────── */
.hud-user-menu{
    /* position:fixed calculado por JS según posición del botón */
    position:fixed;top:auto;right:auto;
    min-width:210px;width:max-content;max-width:min(280px,90vw);
    background:rgba(51,51,51,0.08);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25);
    box-shadow:0 8px 32px rgba(0,0,0,.7),0 0 0 1px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.06);
    z-index:9999;
    animation:menuDrop .15s ease;
    overflow:hidden;
}
@keyframes menuDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.hud-user-menu[hidden]{display:none!important;}

/* Hero (avatar + nombre) */
.hud-user-menu__hero{
    display:flex;align-items:center;gap:.6rem;
    padding:.65rem .75rem .5rem;
}
.hud-user-menu__avatar{
    width:36px;height:36px;border-radius:50%;
    object-fit:cover;border:2px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);
    flex-shrink:0;
}
.hud-user-menu__name{
    font-size:.8rem;font-weight:700;letter-spacing:.05em;color:#fff;
    line-height:1.2;
}
.hud-user-menu__role{
    font-size:.58rem;letter-spacing:.12em;color:var(--ac);
    font-weight:700;
}

/* Separador */
.hud-user-menu__sep{height:1px;background:rgba(255,255,255,.07);margin:.2rem 0;}

/* Ítems */
.hud-user-menu__item{
    display:flex;align-items:center;gap:.5rem;width:100%;
    background:none;border:none;text-align:left;
    font-family:var(--font-hud);font-size:.7rem;font-weight:700;
    letter-spacing:.1em;color:rgba(255,255,255,.65);
    padding:.52rem .75rem;cursor:pointer;
    transition:background var(--t),color var(--t);
}
.hud-user-menu__item:hover{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);color:var(--ac);}
.hud-user-menu__item--danger:hover{background:rgba(220,53,69,.1);color:#ff6b6b;}
.hud-user-menu__item svg{flex-shrink:0;opacity:.6;}
.hud-user-menu__item:hover svg{opacity:1;}

/* Badge de pendientes */
.hud-menu-badge{
    margin-left:auto;
    background:#dc3545;color:#fff;
    font-size:.58rem;font-weight:700;
    padding:.08rem .35rem;border-radius:8px;
    min-width:16px;text-align:center;
    animation:pulse 1.5s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* Guest view */
.hud-user-menu__guest{padding:.3rem 0;}
.hud-user-menu__logged{padding:.1rem 0;}


.hud-avatar{
    background:none;border:1.5px solid var(--ac);
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;flex-shrink:0;
    transition:box-shadow var(--t);
}
.hud-avatar:hover{box-shadow:0 0 10px var(--ac-glow);}
.hud-avatar__initials{font-size:.72rem;font-weight:700;color:var(--ac);}
.hud-avatar__img{width:100%;height:100%;object-fit:cover;}
.hud-avatar__ring{display:none;}

/* ═══ REEL ══════════════════════════════════════════════════════ */
.hud-reel__arrow{
    background:rgba(0,0,0,.55);border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);
    color:var(--text-muted);width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.95rem;line-height:1;transition:all var(--t);flex-shrink:0;
}
.hud-reel__arrow:hover{border-color:var(--ac);color:var(--ac);background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);}
.hud-reel__track-wrap{flex:1;overflow:hidden;}
.hud-reel__track{display:flex;gap:.55rem;align-items:center;transition:transform .3s cubic-bezier(.4,0,.2,1);}
.hud-reel__item{
    flex-shrink:0;width:52px;height:52px;border-radius:50%;
    background-size:cover;background-position:center;
    border:2px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.28);
    position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    transition:border-color var(--t),transform var(--t),box-shadow var(--t),width var(--t),height var(--t);
    background-color:rgba(0,0,0,.5);cursor:pointer;
}
.hud-reel__item.is-active{
    width:66px;height:66px;
    border-color:var(--ac);
    box-shadow:0 0 0 2px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25), 0 0 18px var(--ac-glow);
}
.hud-reel__item:hover:not(.is-active){
    border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.7);transform:scale(1.07);
    box-shadow:0 0 10px var(--ac-glow);
}
.hud-reel__item-ring{display:none;}
.hud-reel__initials,.hud-reel__placeholder-icon{font-size:.78rem;color:var(--ac);font-weight:700;}
.hud-reel__item--placeholder{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.04);}
.hud-reel__votes{
    position:absolute;bottom:1px;left:50%;transform:translateX(-50%);
    font-size:.5rem;font-weight:700;letter-spacing:.04em;
    background:rgba(0,0,0,.78);color:var(--ac);padding:1px 4px;
    white-space:nowrap;line-height:1.4;pointer-events:none;
}
.hud-reel__author-avatar{
    position:absolute;bottom:1px;right:1px;
    width:16px;height:16px;border-radius:50%;
    border:1px solid rgba(0,0,0,.5);object-fit:cover;pointer-events:none;
}

/* ── Reel de usuarios nuevos ───────────────────────────────── */
.hud-reel__item--user {
    background: rgba(0,0,0,.55);
    /* sin background-image — la imagen es el <img> interno */
}
.hud-reel__user-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
    display: block;
}
/* tooltip de nombre al hover */
.hud-reel__item--user::after {
    content: attr(data-name);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.82);
    color: rgba(255,255,255,.9);
    font-family: var(--font-hud);
    font-size: .42rem;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 20;
}
.hud-reel__item--user:hover::after { opacity: 1; }

/* ═══ PANEL CENTRAL ═════════════════════════════════════════════ */
.hud-divider,
.hud-panel,
.hud-actions,
.hud-section-cards-wrap {
    width:100%;
    max-width:900px;
    align-self:center;
}
.hud-divider{display:flex;align-items:center;gap:.75rem;margin-bottom:.2rem;}
.hud-divider__dash{flex:1;height:1px;background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.22);}
.hud-divider__label{
    font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--text-muted);font-style:italic;white-space:nowrap;
}
.hud-divider__dot{color:var(--ac);font-size:.45rem;}

.hud-panel{
    display:grid;grid-template-columns:1fr 1fr;gap:.35rem;align-items:stretch;
}
.hud-panel__col{display:flex;flex-direction:column;}
.hud-panel__col--center{align-items:center;}

.hud-panel-card{
    background:rgba(0,0,0,.18);
    border:none;
    border-left:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.22);
    padding:.4rem .7rem;flex:1;display:flex;flex-direction:column;gap:.12rem;position:relative;
}
.hud-panel-card::before,.hud-panel-card::after{
    content:'';position:absolute;width:7px;height:7px;border-color:var(--ac);border-style:solid;opacity:.45;
}
.hud-panel-card::before{display:none;}
.hud-panel-card::after{display:none;}
.hud-panel-card__label{font-size:.5rem;font-weight:400;letter-spacing:.18em;color:var(--ac);text-transform:uppercase;opacity:.55;}
.hud-panel-card__value{
    font-family:var(--font-hud);font-size:.88rem;font-weight:600;letter-spacing:.04em;
    color:var(--text);line-height:1.2;text-transform:uppercase;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:100%;display:block;
}
.hud-panel-card__sub{
    font-size:.63rem;letter-spacing:.07em;color:var(--text-muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:100%;display:block;
}
.hud-panel-card--right .hud-panel-card__label{color:var(--ac2);}
.hud-panel-card--right .hud-panel-card__value{color:var(--ac2);}
.hud-panel-card--right::before,.hud-panel-card--right::after{border-color:var(--ac2);}
.hud-winner-avatar{font-size:1.3rem;margin-top:.15rem;}
.hud-winner-avatar img{width:26px;height:26px;object-fit:cover;border:1px solid var(--ac);}
.hud-prize-icon{font-size:1.3rem;margin-top:.15rem;}

.hud-countdown-card{
    background:rgba(0,0,0,.22);
    border:none;
    border-top:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);
    border-bottom:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);
    padding:.55rem 1rem .45rem;
    display:flex;flex-direction:column;align-items:center;gap:.1rem;
    width:100%;position:relative;
}
.hud-countdown-card::before,.hud-countdown-card::after{
    content:'';position:absolute;width:7px;height:7px;border-color:var(--ac);border-style:solid;opacity:.35;
}
.hud-countdown-card::before{top:3px;left:3px;border-width:1px 0 0 1px;}
.hud-countdown-card::after {bottom:3px;right:3px;border-width:0 1px 1px 0;}
.hud-countdown-card__label{font-size:.52rem;font-weight:400;letter-spacing:.22em;color:var(--ac);text-transform:uppercase;opacity:.6;}
.hud-countdown-card__time{font-family:var(--font-title);font-size:1.65rem;letter-spacing:.12em;color:#fff;line-height:1;font-weight:400;}
.hud-countdown-card__time span{color:var(--ac);}
.hud-countdown-card__status{display:none;}
.hud-week-bar{width:100%;height:2px;background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);overflow:hidden;margin-top:.2rem;}
.hud-week-bar__fill{height:100%;background:var(--ac);box-shadow:0 0 6px var(--ac-glow);transition:width .5s ease;}

/* ═══ BOTONES DE ACCIÓN ══════════════════════════════════════════
   Dos bloques con fondo semitransparente de color + forma HUD angular
═══════════════════════════════════════════════════════════════ */
.hud-actions{
    display:flex;align-items:stretch;justify-content:center;
    gap:0;padding:0;
    margin:100px 0 0 0;
    width:100%;max-width:900px;
}
/* Cada grupo = mitad del bloque, con fondo de color */
.hud-actions__group{
    flex:1;display:flex;flex-direction:column;gap:0;
    position:relative;overflow:hidden;
}
/* COMUNIDAD — fondo verde semitransparente, corte superior-derecho */
.hud-actions__group:first-child{
    background:linear-gradient(135deg,rgba(var(--ac-r),var(--ac-g),var(--ac-b),.14) 0%,rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05) 100%);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.30);
    border-right:none;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
/* REGALOS — fondo cyan semitransparente, corte inferior-izquierdo */
.hud-actions__group:last-child{
    background:linear-gradient(135deg,rgba(var(--ac-r),var(--ac-g),var(--ac-b),.14) 0%,rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05) 100%);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.30);
    border-left:none;
    clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px));
}
/* Línea separadora central */
.hud-actions__sep{
    width:1px;flex-shrink:0;
    background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.15) 40%,rgba(255,255,255,.15) 60%,transparent 100%);
}
.hud-actions__group-label{
    font-size:.5rem;font-weight:700;letter-spacing:.25em;
    text-transform:uppercase;padding:.4rem 1rem .15rem;display:block;
}
.hud-actions__group:first-child .hud-actions__group-label{color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.7);}
.hud-actions__group:last-child  .hud-actions__group-label{color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.7);}
.hud-actions__btns{display:flex;flex:1;}

/* ── Botones base ── */
.hud-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
    font-family:var(--font-hud);font-size:.74rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    padding:.55rem 1rem;border:none;cursor:pointer;
    transition:all var(--t);white-space:nowrap;border-radius:0;
    flex:1;
}
/* Primario verde — corte en esquina inferior-derecha */
.hud-btn--primary{
    background:var(--ac);color:#000;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
}
.hud-btn--primary:hover{
    background:color-mix(in srgb,var(--ac) 88%,#fff);
    box-shadow:0 0 22px var(--ac-glow);filter:brightness(1.08);
}
/* Secundario cyan — corte en esquina superior-izquierda */
.hud-btn--secondary{
    background:var(--ac2);color:#000;
    clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px);
}
.hud-btn--secondary:hover{
    background:color-mix(in srgb,var(--ac2) 88%,#fff);
    box-shadow:0 0 22px var(--ac2-glow);filter:brightness(1.08);
}
/* Ghost — transparente con borde sutil */
.hud-btn--ghost{
    background:rgba(255,255,255,.03);
    color:var(--text-muted);
    border-left:1px solid rgba(255,255,255,.08);
}
.hud-btn--ghost:hover{color:#fff;background:rgba(255,255,255,.07);}
/* Ghost del lado regalos hereda color cyan en hover */
.hud-actions__group:last-child .hud-btn--ghost{border-left-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);}
.hud-actions__group:last-child .hud-btn--ghost:hover{color:var(--ac2);background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.06);}
.hud-btn svg{flex-shrink:0;width:14px;height:14px;}

/* ═══ PATROCINADORES / REGALOS DESTACADOS ═══════════════════════ */
.hud-sponsors{
    padding:.4rem 0 .5rem;position:relative;z-index:5;flex-shrink:0;
    width:100%;
}
.hud-sponsors .hud-divider{max-width:100%;margin-bottom:.5rem;}
.hud-sponsors__track{
    display:flex;gap:.55rem;overflow-x:auto;scrollbar-width:none;
    padding:.1rem .5rem .4rem;align-items:stretch;
}
.hud-sponsors__track::-webkit-scrollbar{display:none;}
.hud-sponsors__bar-wrap{height:2px;background:rgba(255,255,255,.07);margin-top:.4rem;overflow:hidden;}
.hud-sponsors__bar-fill{height:100%;background:linear-gradient(90deg,var(--ac),var(--ac2));width:30%;animation:bar-slide 3s ease-in-out infinite alternate;}
@keyframes bar-slide{to{width:70%;}}

/* Slot vacío */
.hud-sponsor-slot{
    flex-shrink:0;width:200px;
    border:1px dashed rgba(255,255,255,.08);background:rgba(0,0,0,.3);
    display:flex;align-items:center;justify-content:center;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.hud-sponsor-slot__inner{display:flex;align-items:center;gap:.5rem;padding:.5rem .8rem;}
.hud-sponsor-slot__icon{font-size:1.2rem;opacity:.25;}
.hud-sponsor-slot__title{font-size:.58rem;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.22);text-transform:uppercase;}
.hud-sponsor-slot__sub{font-size:.5rem;color:rgba(255,255,255,.15);margin-top:.1rem;}

/* ── GIFT CARD SHOWCASE — imagen + nombre + patrocinador + VER ── */
/* ════════ CARRUSEL DE REGALOS — Layout Horizontal HUD ════════ */
.hud-gift-card{
    flex-shrink:0;
    width:320px;
    background:rgba(5,5,10,.88);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    overflow:hidden;position:relative;cursor:pointer;
    display:flex;flex-direction:column;
    transition:transform var(--t),border-color var(--t),box-shadow var(--t);
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.hud-gift-card:hover{
    transform:translateY(-4px) scale(1.015);
    border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.65);
    box-shadow:0 12px 32px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18),inset 0 0 20px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.04);
    z-index:3;
}
.hud-gift-card--featured{
    width:360px;
    border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);
    background:linear-gradient(160deg,rgba(5,10,3,.92),rgba(3,6,2,.92));
}
.hud-gift-card--featured:hover{
    border-color:var(--ac);
    box-shadow:0 12px 32px var(--ac-glow),inset 0 0 20px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05);
}
.hud-gift-card::before{
    content:'';position:absolute;top:0;left:0;right:12px;height:1px;
    background:linear-gradient(90deg,rgba(var(--ac-r),var(--ac-g),var(--ac-b),.7),transparent);z-index:2;
}
.hud-gift-card--featured::before{background:linear-gradient(90deg,rgba(var(--ac-r),var(--ac-g),var(--ac-b),.8),transparent);}

/* Badges */
.hud-gift-card__type-badge{
    position:absolute;top:0;left:0;z-index:4;
    font-family:var(--font-hud);font-size:.42rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.95);
    background:rgba(0,0,0,.85);padding:.16rem .48rem;
    border-right:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.22);border-bottom:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.14);
}
.hud-gift-card--featured .hud-gift-card__type-badge{
    color:var(--ac);border-right-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.28);border-bottom-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.14);
}
.hud-gift-card__dest-badge{
    position:absolute;top:0;right:0;z-index:4;
    font-family:var(--font-hud);font-size:.42rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;background:var(--ac);color:#000;padding:.16rem .48rem;
}

/* ── Layout interior horizontal ── */
.hud-gift-card__inner{
    display:flex;flex-direction:row;align-items:center;
    gap:.85rem;padding:.9rem .85rem .55rem;
    flex:1;
}

/* Foto circular izquierda */
.hud-gift-card__circle-wrap{
    flex-shrink:0;
    width:72px;height:72px;
    position:relative;
}
.hud-gift-card--featured .hud-gift-card__circle-wrap{width:88px;height:88px;}
.hud-gift-card__circle-img{
    width:100%;height:100%;border-radius:50%;object-fit:cover;
    border:2px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.45);
    filter:drop-shadow(0 0 10px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3));
    transition:transform .35s ease,filter .35s ease;
    display:block;
}
.hud-gift-card--featured .hud-gift-card__circle-img{
    border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5);
    filter:drop-shadow(0 0 12px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3));
}
.hud-gift-card:hover .hud-gift-card__circle-img{transform:scale(1.08);}
.hud-gift-card__circle-placeholder{
    width:100%;height:100%;border-radius:50%;
    background:radial-gradient(circle,rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12),rgba(0,0,0,.6));
    border:2px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);
    display:flex;align-items:center;justify-content:center;
    font-size:1.6rem;opacity:.6;
}
.hud-gift-card--featured .hud-gift-card__circle-placeholder{border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);}
/* Anillo exterior animado */
.hud-gift-card__circle-ring{
    position:absolute;inset:-4px;border-radius:50%;
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25);
    pointer-events:none;
    animation:ringPulse 3s ease-in-out infinite;
}
.hud-gift-card--featured .hud-gift-card__circle-ring{border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);}
@keyframes ringPulse{0%,100%{opacity:.3;transform:scale(1);}50%{opacity:.7;transform:scale(1.04);}}

/* Cuerpo: info a la derecha de la foto */
.hud-gift-card__body{
    flex:1;display:flex;flex-direction:column;gap:.22rem;
    min-width:0;
}
/* Fila usuario/patrocinador */
.hud-gift-card__user-row{
    display:flex;align-items:center;gap:.3rem;
    margin-top:.1rem;
}
.hud-gift-card__avatar{
    width:14px;height:14px;border-radius:50%;object-fit:cover;flex-shrink:0;
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.4);
}
.hud-gift-card--featured .hud-gift-card__avatar{border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.45);}
.hud-gift-card__sponsor-label{
    font-size:.48rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hud-gift-card--featured .hud-gift-card__sponsor-label{color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.85);}
/* Título */
.hud-gift-card__title{
    font-family:var(--font-hud);font-size:.75rem;font-weight:700;
    letter-spacing:.02em;color:#fff;line-height:1.25;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.hud-gift-card--featured .hud-gift-card__title{font-size:.82rem;color:#fff;}
/* Descripción */
.hud-gift-card__desc{
    font-size:.52rem;color:rgba(255,255,255,.42);line-height:1.4;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
/* "por usuario" */
.hud-gift-card__by{margin-top:.05rem;}
.hud-gift-card__by-label{
    font-size:.45rem;color:rgba(255,255,255,.28);letter-spacing:.06em;
    font-style:italic;
}
/* Footer con botón INFO */
.hud-gift-card__footer{
    margin-top:.3rem;
    display:flex;align-items:center;
}
.hud-gift-card__ver{
    font-family:var(--font-hud);font-size:.52rem;font-weight:700;letter-spacing:.15em;
    text-transform:uppercase;background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);cursor:pointer;
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.45);color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.95);
    padding:.2rem .65rem;text-decoration:none;display:inline-block;
    transition:all var(--t);
    clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%);
}
.hud-gift-card__ver:hover{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);border-color:var(--ac);color:#fff;}
.hud-gift-card--featured .hud-gift-card__ver{
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.55);color:var(--ac);
}
.hud-gift-card--featured .hud-gift-card__ver:hover{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);border-color:var(--ac);color:#000;}
.hud-gift-card__glow{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 30px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05);}

/* ════════ UPLOAD DE IMAGEN EN MODAL REGALAR ════════ */
.regalar-img-upload{
    display:flex;flex-direction:column;gap:.5rem;
}
.regalar-img-upload__btn{
    display:flex;align-items:center;gap:.55rem;
    padding:.6rem .9rem;cursor:pointer;
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.04);
    border:1px dashed rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);
    border-radius:4px;
    transition:border-color var(--t),background var(--t);
}
.regalar-img-upload__btn:hover{border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.7);background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);}
.regalar-img-upload__icon{font-size:1.2rem;}
.regalar-img-upload__text{
    font-family:var(--font-hud);font-size:.6rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.8);
}
.regalar-img-upload__preview{
    position:relative;width:100%;max-height:140px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.4);border-radius:4px;overflow:hidden;
}
.regalar-img-upload__preview img{
    max-width:100%;max-height:140px;object-fit:contain;display:block;
}
.regalar-img-upload__remove{
    position:absolute;top:4px;right:4px;
    background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.2);
    color:#fff;font-size:.7rem;width:20px;height:20px;border-radius:50%;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background var(--t);
}
.regalar-img-upload__remove:hover{background:rgba(255,80,80,.8);}

/* ═══ DECORACIONES LATERALES ════════════════════════════════════ */
/* ═══ DECORACIONES LATERALES ════════════════════════════════════ */
.hud-section-cards{display:none;}
.hud-vertical-nums{
    position:fixed;right:.85rem;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;gap:.18rem;z-index:10;
}
.hud-vnum{font-size:.58rem;letter-spacing:.1em;color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.22);transition:color var(--t);line-height:1;}
.hud-vnum.is-active{color:var(--ac);font-weight:700;}

/* ═══ INDICADOR LATERAL — LEGACY (elemento reemplazado por .hud-ranking) ════
.hud-section-indicator{
    position:fixed;left:0;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;gap:1px;
    z-index:10;
}
.hud-section-indicator__name{ display:none; }
.hud-section-indicator__item{ padding:.28rem .3rem .28rem .3rem; }
.hud-section-indicator__label{ display:none; }
.hud-section-indicator__item{
    background:rgba(0,0,0,.5);border:none;
    border-left:2px solid rgba(255,255,255,.07);
    display:flex;align-items:center;gap:.45rem;
    cursor:pointer;
    padding:.28rem .5rem .28rem .4rem;
    position:relative;overflow:hidden;
    transition:background var(--t),border-color var(--t),padding-right var(--t);
}
.hud-section-indicator__item::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,var(--ac-dim),transparent);
    opacity:0;transition:opacity var(--t);
}
.hud-section-indicator__item:hover{
    background:rgba(0,0,0,.65);
    border-left-color:var(--ac);
    padding-right:.85rem;
}
.hud-section-indicator__item:hover::after{opacity:1;}
.hud-section-indicator__item.is-active{
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05);
    border-left-color:var(--ac);
    box-shadow:inset -1px 0 0 rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);
    padding-right:.85rem;
}
.hud-section-indicator__item.is-active::after{opacity:1;}
.hud-section-indicator__dot{
    width:4px;height:4px;border-radius:50%;flex-shrink:0;
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.22);
    transition:background var(--t),transform var(--t),box-shadow var(--t);
}
.hud-section-indicator__item.is-active .hud-section-indicator__dot{
    background:var(--ac);box-shadow:0 0 6px var(--ac-glow);transform:scale(1.5);
}
.hud-section-indicator__item:hover .hud-section-indicator__dot{background:color-mix(in srgb,var(--ac) 55%,transparent);}
.hud-section-indicator__name{
    font-family:var(--font-hud);font-size:.49rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);white-space:nowrap;
    transition:color var(--t);
}
.hud-section-indicator__item:hover .hud-section-indicator__name{color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.75);}
.hud-section-indicator__item.is-active .hud-section-indicator__name{color:var(--ac);}
══════════════════════════════════════════════════════════════════════════════ */

/* ══ RANKING LATERAL ═══════════════════════════════════════════
   Reemplaza el antiguo nav de puntos. Posición fija izquierda.
══════════════════════════════════════════════════════════════ */
.hud-ranking {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 148px;
    background: rgba(0,0,0,.62);
    border-right: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0 6px 6px 0;
    overflow: hidden;
    max-height: 82vh;
    overflow-y: auto;
    scrollbar-width: none;
}
.hud-ranking::-webkit-scrollbar { display: none; }

.hud-ranking__block { padding: .55rem .5rem .5rem; }

.hud-ranking__header {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-hud);
    font-size: .44rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ac);
    margin-bottom: .45rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);
}
.hud-ranking__header svg { flex-shrink: 0; fill: var(--ac); opacity: .9; }

.hud-ranking__divider {
    height: 1px;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);
    margin: 0 .4rem;
}

.hud-ranking__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.hud-ranking__item {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .25rem;
    border-radius: 4px;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.04);
    transition: background .18s;
    min-width: 0;
}
.hud-ranking__item:hover {
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);
}

.hud-ranking__medal {
    font-size: .7rem;
    flex-shrink: 0;
    line-height: 1;
}

.hud-ranking__thumb {
    width: 26px;
    height: 26px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,.06);
}
.hud-ranking__thumb--empty {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 3px;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);
    flex-shrink: 0;
}

.hud-ranking__info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1;
}

.hud-ranking__title {
    font-family: var(--font-hud);
    font-size: .45rem;
    font-weight: 700;
    color: rgba(255,255,255,.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    line-height: 1.2;
    display: block;
}
a.hud-ranking__title:hover { color: var(--ac); }

.hud-ranking__score {
    font-family: var(--font-hud);
    font-size: .42rem;
    font-weight: 600;
    color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.7);
    letter-spacing: .04em;
}

/* Skeleton loaders */
.hud-ranking__skeleton {
    height: 32px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,.04) 25%,
        rgba(255,255,255,.09) 50%,
        rgba(255,255,255,.04) 75%
    );
    background-size: 200% 100%;
    animation: hud-ranking-shimmer 1.4s infinite;
}
@keyframes hud-ranking-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.hud-ranking__empty {
    font-family: var(--font-hud);
    font-size: .43rem;
    color: rgba(255,255,255,.28);
    text-align: center;
    padding: .3rem 0;
    letter-spacing: .06em;
}

/* Ocultar en móvil (< 768px) — igual que el nav de puntos anterior */
@media (max-width: 767px) {
    .hud-ranking { display: none !important; }
}
/* Compactar un poco en pantallas medianas */
@media (max-width: 1023px) {
    .hud-ranking { width: 120px; }
    .hud-ranking__thumb,
    .hud-ranking__thumb--empty { width: 20px; height: 20px; }
}

/* ── Countdown dentro del ranking lateral ──────────────────── */
.hud-ranking__countdown {
    padding: .5rem .5rem .35rem;
    border-bottom: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.15);
    text-align: center;
}
.hud-ranking__countdown-label {
    font-family: var(--font-hud);
    font-size: .4rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.55);
    margin-bottom: .18rem;
}
.hud-ranking__countdown-time {
    font-family: var(--font-hud);
    font-size: .62rem;
    font-weight: 800;
    color: var(--ac);
    letter-spacing: .06em;
    line-height: 1.1;
    margin-bottom: .22rem;
}
.hud-ranking__countdown-time span {
    display: inline-block;
    min-width: 1.4ch;
}
/* barra de progreso de semana */
.hud-ranking__countdown .hud-week-bar {
    height: 2px;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
    border-radius: 2px;
    overflow: hidden;
    margin-top: .2rem;
}
.hud-ranking__countdown .hud-week-bar__fill {
    height: 100%;
    width: 0%;
    background: var(--ac);
    border-radius: 2px;
    transition: width .8s linear;
}
/* urgencia */
.hud-ranking__countdown.is-urgent   .hud-ranking__countdown-time { color: #ff6b1a; }
.hud-ranking__countdown.is-last-day .hud-ranking__countdown-time { color: #f59e0b; }

/* ── Blink del puesto #1 en ranking ───────────────────────── */
@keyframes ranking-blink {
    0%, 49% { opacity: 1; }
    50%, 99% { opacity: .35; }
    100%     { opacity: 1; }
}
.hud-ranking__item--top1 {
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1) !important;
    border-left: 2px solid var(--ac);
    /* Ligeramente más grande que los demás — escala sutil */
    transform: scale(1.06);
    transform-origin: left center;
    margin-bottom: .15rem;
    margin-top: .05rem;
}
.hud-ranking__item--top1 .hud-ranking__medal {
    animation: ranking-blink 1.4s ease-in-out infinite;
}
.hud-ranking__item--top1 .hud-ranking__title {
    font-size: .48rem !important;   /* ligeramente mayor que el .45rem base */
}
.hud-ranking__item--top1 .hud-ranking__score {
    color: var(--ac) !important;
    font-weight: 800;
}
.hud-ranking__item--top1 .hud-ranking__thumb,
.hud-ranking__item--top1 .hud-ranking__thumb--empty {
    width: 30px !important;
    height: 30px !important;
}

.hud-slide-num{
    position:fixed;
    right:.85rem;
    bottom:.85rem;
    font-family:var(--font-title);
    font-size:1.15rem;
    color:var(--ac);
    letter-spacing:.1em;
    z-index:10;
}

/* ═══ MODAL POST ════════════════════════════════════════════════ */
.post-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;}
.post-modal[hidden]{display:none!important;}
.post-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(5px);}
.post-modal__box{
    position:relative;width:min(520px,92vw);max-height:88vh;
    background:var(--panel-bg);border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.22);
    overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;
    box-sizing:border-box;
}
@media (max-height:750px),(max-width:600px){
    .post-modal__box{max-height:94vh;width:min(480px,96vw);}
    .post-modal__header{padding:.4rem .6rem;}
    .post-modal__avatar{width:26px;height:26px;}
    .post-modal__author-name{font-size:.68rem;}
    .post-modal__date{font-size:.52rem;}
    .post-modal__img-wrap{aspect-ratio:16/9;max-height:38vh;}
    .post-modal__body{padding:.45rem .6rem;}
    .post-modal__title{font-size:.9rem;margin-bottom:.35rem;}
    .post-modal__vote-btn{font-size:.62rem;padding:.28rem .55rem;min-width:52px;}
    .post-modal__votes-count{font-size:1.1rem;}
    .post-modal__votes-label{font-size:.58rem;}
}
@media (min-width:601px) and (max-width:1400px) and (max-height:900px){
    .post-modal__box{max-height:92vh;width:min(460px,94vw);}
    .post-modal__header{padding:.5rem .7rem;}
    .post-modal__avatar{width:28px;height:28px;}
    .post-modal__author-name{font-size:.72rem;}
    .post-modal__date{font-size:.54rem;}
    .post-modal__img-wrap{aspect-ratio:16/9;max-height:40vh;}
    .post-modal__body{padding:.5rem .7rem;}
    .post-modal__title{font-size:1rem;margin-bottom:.4rem;}
    .post-modal__vote-btn{font-size:.68rem;padding:.32rem .6rem;min-width:58px;}
    .post-modal__votes-count{font-size:1.2rem;}
    .post-modal__votes-label{font-size:.62rem;}
    .post-modal__vote-btns{gap:.35rem;padding:.35rem 0;}
}
.post-modal__box::-webkit-scrollbar{width:3px;}
.post-modal__box::-webkit-scrollbar-thumb{background:var(--ac);}
.post-modal__header{
    display:flex;align-items:center;justify-content:space-between;
    padding:.7rem .9rem;border-bottom:1px solid rgba(255,255,255,.05);gap:.6rem;
    box-sizing:border-box;flex-shrink:0;
}
.post-modal__author{display:flex;align-items:center;gap:.55rem;}
.post-modal__avatar{width:34px;height:34px;object-fit:cover;border:1px solid var(--ac);}
.post-modal__author-name{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:#fff;}
.post-modal__date{display:block;font-size:.62rem;color:var(--text-muted);}
.post-modal__close{background:none;border:none;color:var(--text-muted);font-size:.95rem;padding:.2rem;transition:color var(--t);margin-left:auto;flex-shrink:0;}
.post-modal__close:hover{color:var(--ac);}
.post-modal__img-wrap{position:relative;background:var(--panel-bg3);aspect-ratio:16/9;overflow:hidden;flex-shrink:0;box-sizing:border-box;}
.post-modal__img{width:100%;height:100%;object-fit:cover;display:block;}
.post-modal__img-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.03);}
.post-modal__body{padding:.8rem .9rem;}
.post-modal__title{font-family:var(--font-title);font-size:1.35rem;letter-spacing:.05em;margin-bottom:.7rem;color:#fff;}
.post-modal__footer{display:flex;align-items:center;justify-content:space-between;gap:.65rem;flex-wrap:wrap;box-sizing:border-box;flex-shrink:0;}
.post-modal__vote-btns{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;padding:.5rem 0;}
.post-modal__vote-btn{
    display:inline-flex;align-items:center;gap:.35rem;
    font-family:var(--font-hud);font-size:.8rem;font-weight:700;letter-spacing:.06em;
    background:none;border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);color:var(--ac);
    padding:.42rem 1rem;cursor:pointer;transition:all var(--t);min-width:72px;justify-content:center;
}
.post-modal__vote-btn:hover{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);border-color:var(--ac);}
.post-modal__vote-btn.is-voted{background:var(--ac);color:#000;border-color:var(--ac);}
.post-modal__vote-btn:disabled{opacity:.5;cursor:not-allowed;}
.post-modal__vote-num{font-size:.88rem;}

.post-modal__votes{display:flex;align-items:baseline;gap:.28rem;}
.post-modal__votes-count{font-family:var(--font-title);font-size:1.55rem;color:var(--ac);letter-spacing:.05em;}
.post-modal__votes-label{font-size:.72rem;color:var(--text-muted);}
.post-modal__actions{display:flex;gap:.45rem;flex-wrap:wrap;}
.vote-spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(0,0,0,.3);border-top-color:#000;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;}

/* ═══════════════════════════════════════════════════════════
   FEED PANEL — Lateral derecho
   ═══════════════════════════════════════════════════════════ */
.feed-panel{position:fixed;inset:0;z-index:1800;display:flex;}
.feed-panel[hidden]{display:none!important;}
.feed-panel__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);}
.feed-panel__box{
    position:relative;margin-left:auto;
    width:min(400px,96vw);height:100%;
    background:var(--panel-bg2);
    border-left:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.15);
    display:flex;flex-direction:column;overflow:hidden;z-index:1;
}

/* ── Topbar ─────────────────────────────────────────────── */
.feed-panel__header{
    display:flex;align-items:center;gap:.3rem;
    padding:.55rem .75rem;
    background:var(--bg);
    border-bottom:1px solid rgba(255,255,255,.06);
    flex-shrink:0;position:sticky;top:0;z-index:10;
}
.feed-panel__title{
    display:flex;align-items:center;gap:.35rem;
    font-family:var(--font-title);font-size:.88rem;letter-spacing:.14em;color:#fff;
    flex-shrink:0;
}
.feed-panel__title-icon{font-size:.85rem;}
.feed-panel__controls{display:flex;align-items:center;gap:.2rem;margin-left:auto;}

/* Filtros */
.feed-filter__btn{
    background:none;border:none;
    font-family:var(--font-hud);font-size:.62rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    color:rgba(255,255,255,.35);
    padding:.2rem .4rem;cursor:pointer;transition:color var(--t);
    border-bottom:1px solid transparent;
}
.feed-filter__btn.is-active{color:var(--ac);border-bottom-color:var(--ac);}
.feed-filter__btn:hover{color:rgba(255,255,255,.7);}

/* Toggle vista */
.feed-view-btn{
    background:none;border:none;
    color:rgba(255,255,255,.3);padding:.2rem .25rem;cursor:pointer;
    display:flex;align-items:center;transition:color var(--t);
}
.feed-view-btn.is-active{color:var(--ac);}
.feed-view-btn:hover{color:rgba(255,255,255,.6);}

/* Buscar posts */
.feed-search-wrap{margin:0 .15rem;}
.feed-search-input{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    border-radius:4px;
    color:#fff;
    font-family:var(--font-hud);
    font-size:.6rem;
    padding:.25rem .5rem;
    width:100px;
    outline:none;
    transition:all var(--t);
}
.feed-search-input::placeholder{color:rgba(255,255,255,.3);}
.feed-search-input:focus{
    background:rgba(255,255,255,.12);
    border-color:var(--ac);
    width:140px;
}

/* Botón actualizar */
.feed-refresh-btn{
    background:none;border:none;
    color:rgba(255,255,255,.3);padding:.25rem .3rem;cursor:pointer;
    display:flex;align-items:center;transition:color var(--t);
}
.feed-refresh-btn:hover{color:var(--ac);}
.feed-refresh-btn.is-spinning svg{
    animation:spin 0.5s linear infinite;
}
@keyframes spin{100%{transform:rotate(360deg);}}

/* Cerrar */
.feed-panel__close-btn{
    background:none;border:none;
    font-size:.75rem;color:rgba(255,255,255,.4);
    padding:.2rem .3rem;cursor:pointer;transition:color var(--t);
    margin-left:.15rem;
}
.feed-panel__close-btn:hover{color:#fff;}

/* ── Stream (scroll infinito) ───────────────────────────── */
.feed-stream{
    flex:1;overflow-y:auto;
    display:flex;flex-direction:column;
    gap:20px;
    padding:.4rem 0 1rem;
    scrollbar-width:thin;scrollbar-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3) transparent;
    background:var(--panel-bg);
}
.feed-stream::-webkit-scrollbar{width:3px;}
.feed-stream::-webkit-scrollbar-thumb{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);}
/* Compatibilidad: si alguien referencia feed-grid */
.feed-grid{
    flex:1;overflow-y:auto;
    display:flex;flex-direction:column;
    gap:10px;
    padding:.4rem 0 1rem;
    background:var(--panel-bg);
    scrollbar-width:thin;scrollbar-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3) transparent;
}
.feed-grid::-webkit-scrollbar{width:3px;}
.feed-grid::-webkit-scrollbar-thumb{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);}
/* Modo cuadrícula (toggle) */
.feed-grid.is-grid-view,.feed-stream.is-grid-view{
    display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
    background:rgba(255,255,255,.04);
}

/* ── Sentinel de scroll infinito ───────────────────────── */
.feed-sentinel{
    display:flex;align-items:center;justify-content:center;
    padding:1.25rem;min-height:60px;flex-shrink:0;
}
.feed-sentinel.is-hidden{display:none;}
.feed-sentinel__spinner{
    width:20px;height:20px;
    border:2px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    border-top-color:var(--ac);
    border-radius:50%;
    animation:spin .7s linear infinite;
    display:none;
}
.feed-sentinel.is-loading .feed-sentinel__spinner{display:block;}

/* ── Vacío ──────────────────────────────────────────────── */
.feed-empty{
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:.9rem;padding:3rem 1rem;text-align:center;
}
.feed-empty__icon{font-size:2.2rem;}
.feed-empty p{font-size:.82rem;color:var(--text-muted);}

/* ═══════════════════════════════════════════════════════════
   FC — FEED CARD (formato lista, estilo red social)
   ═══════════════════════════════════════════════════════════ */
.fc{
    display:flex;flex-direction:column;
    /* ── Polaroid retro-futurista ── */
    background:var(--panel-bg2);
    margin:0 .6rem;              /* gap controlado por el padre */
    padding:0 0 .75rem;          /* base blanca inferior del polaroid */
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.22);          /* borde neón sutil */
    box-shadow:
        0 0 0 3px #000,                            /* relleno negro interno */
        0 0 0 4px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18),             /* segunda capa neón */
        4px 6px 18px rgba(0,0,0,.85),              /* sombra de profundidad */
        0 0 22px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.06);              /* glow ambiental */
    position:relative;
    cursor:default;
}
/* Línea de scan retro en la parte inferior del polaroid */
.fc::after{
    content:'';
    display:block;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25) 30%,rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5) 50%,rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25) 70%,transparent);
    margin:0 .75rem;
    margin-top:.6rem;
}
/* Esquinas anguladas HUD */
.fc::before{
    content:'';
    position:absolute;top:-1px;right:-1px;
    width:10px;height:10px;
    border-top:2px solid var(--ac);
    border-right:2px solid var(--ac);
    pointer-events:none;
}

/* ── Header ─────────────────────────────────────────────── */
.fc__header{
    display:flex;align-items:center;gap:.55rem;
    padding:.65rem .75rem .5rem;
}
.fc__avatar{
    width:42px;height:42px;border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);
    flex-shrink:0;
}
.fc__meta{display:flex;flex-direction:column;gap:.05rem;flex:1;min-width:0;}
.fc__author{
    font-size:.82rem;font-weight:700;letter-spacing:.04em;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fc__date{font-size:.65rem;color:rgba(255,255,255,.4);}
.fc__follow-btn{
    background:none;
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5);
    font-family:var(--font-hud);font-size:.62rem;font-weight:700;
    letter-spacing:.1em;color:var(--ac);
    padding:.2rem .55rem;cursor:pointer;
    white-space:nowrap;flex-shrink:0;
    transition:background var(--t),color var(--t);
}
.fc__follow-btn:hover,.fc__follow-btn.is-following{background:var(--ac);color:#000;}

/* ── Imagen full-width ──────────────────────────────────── */
.fc__img-wrap{
    position:relative;width:100%;
    background:var(--panel-bg3);overflow:hidden;
}
.fc__img{
    width:100%;max-height:340px;
    object-fit:cover;display:block;
}

/* ── Imagen de post DESTACADO — blink dorado ─────────────────────
   Se anima la imagen directamente: ningún contenedor padre
   interfiere con este elemento — efecto garantizado.
───────────────────────────────────────────────────────────────── */
/* ── Imagen de post DESTACADO — blink dorado garantizado ────────────
   Se usa ::after en el WRAP (dentro del overflow:hidden) para que
   el borde animado nunca sea recortado. Es position:absolute inset:0
   y pointer-events:none para no interferir con clics.
─────────────────────────────────────────────────────────────────── */
@keyframes img-featured-blink {
    0%, 100% {
        opacity: 1;
        box-shadow:
            inset 0 0 0 3px rgba(255,200,0,.95),
            inset 0 0 12px rgba(255,200,0,.4);
    }
    50% {
        opacity: .85;
        box-shadow:
            inset 0 0 0 3px rgba(255,200,0,.12),
            inset 0 0 4px rgba(255,200,0,.06);
    }
}

.fc__img-wrap--featured::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 3px rgba(255,200,0,.95),
        inset 0 0 12px rgba(255,200,0,.4);
    animation: img-featured-blink 1.4s ease-in-out infinite;
}

/* La clase en la imagen ya no necesita animación — se deja limpia */
.fc__img--featured {
    width:100%;max-height:340px;
    object-fit:cover;display:block;
}
.fc__img-placeholder{
    width:100%;height:200px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.04);
}
.fc__initials{font-size:2rem;font-weight:700;color:var(--ac);letter-spacing:.1em;}
/* Badge de categoría (esquina sup izquierda) */
.fc__cat{
    position:absolute;top:0;left:0;
    font-size:.6rem;font-weight:700;letter-spacing:.1em;
    background:var(--ac);color:#000;
    padding:.2rem .55rem;text-transform:uppercase;
    z-index:2;
}

/* Menú compartir flotante (aparece sobre la imagen, lado derecho) */
.fc__share-dropdown{
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;gap:0;
    z-index:10;
    border:1px solid rgba(255,255,255,.1);
    overflow:hidden;
}
.fc__share-dropdown[hidden]{display:none!important;}
.fc__share-item{
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border:none;cursor:pointer;text-decoration:none;
    transition:opacity var(--t);
}
.fc__share-item:hover{opacity:.85;}
.fc__share-item--fb{background:#1877f2;color:#fff;}
.fc__share-item--wa{background:#25d366;color:#fff;}
.fc__share-item--x {background:var(--bg);color:#fff;border-top:1px solid rgba(255,255,255,.15);}

/* ── Barra de acciones (lápiz · compartir · guardar) ────── */
.fc__actions-bar{
    display:flex;justify-content:flex-end;gap:.3rem;
    padding:.4rem .65rem .2rem;
}
.fc__action-btn{
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.55);
    cursor:pointer;text-decoration:none;
    transition:all var(--t);border-radius:50%;
}
.fc__action-btn:hover{color:#fff;border-color:rgba(255,255,255,.4);}
.fc__action-btn--placeholder{border:none;background:none;cursor:default;pointer-events:none;}
.fc__action-btn--share{
    background:var(--ac);color:#000;border-color:var(--ac);
}
.fc__action-btn--share:hover{background:color-mix(in srgb,var(--ac) 82%,white);}
.fc__action-btn--share.is-open{
    background:var(--ac);box-shadow:0 0 12px var(--ac-glow);
}
.fc__action-btn--save.is-saved{
    color:var(--ac);border-color:var(--ac);background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);
}
.fc__action-btn--save.is-saved svg{fill:var(--ac);}
.fc__action-btn--edit:hover{color:var(--ac2);border-color:var(--ac2);}

/* ── Título (autor en verde + texto) ───────────────────── */
.fc__title-row{
    padding:.3rem .75rem .2rem;
    font-size:.82rem;line-height:1.45;
    color:#fff;
}
.fc__author-tag{
    font-weight:700;color:var(--ac);margin-right:.35rem;
    font-size:.82rem;letter-spacing:.02em;
}
.fc__title{font-weight:400;color:var(--ac);}

/* ── Rating / votos ─────────────────────────────────────── */
.fc__rating{
    display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;
    padding:.3rem .75rem;
    background:rgba(0,0,0,.25);
    border-top:1px solid rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.04);
}
.fc__rating-label{font-size:.6rem;color:rgba(255,255,255,.4);letter-spacing:.04em;flex-shrink:0;}
.fc__rating-type{
    font-size:.6rem;font-weight:700;letter-spacing:.06em;
    color:var(--ac);flex-shrink:0;margin-right:.1rem;
}
.fc__vote-btn{
    display:inline-flex;align-items:center;gap:.25rem;
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.06);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    color:rgba(255,255,255,.5);
    font-family:var(--font-hud);font-size:.62rem;font-weight:700;
    padding:.16rem .42rem;cursor:pointer;
    transition:all var(--t);border-radius:0;
    white-space:nowrap;
}
/* Nivel 1: verde lima */
.fc__vote-btn--1{ border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25); }
.fc__vote-btn--1:hover:not([disabled]):not(.is-voted),
.fc__vote-btn--1.is-voted-choice { background:var(--ac);color:#000;border-color:var(--ac);box-shadow:0 0 8px var(--ac-glow); }
/* Nivel 2: cyan */
.fc__vote-btn--2{ border-color:rgba(0,200,255,.25);color:rgba(0,200,255,.6); }
.fc__vote-btn--2:hover:not([disabled]):not(.is-voted),
.fc__vote-btn--2.is-voted-choice { background:#00c8ff;color:#000;border-color:#00c8ff;box-shadow:0 0 8px rgba(0,200,255,.4); }
/* Nivel 3: dorado */
.fc__vote-btn--3{ border-color:rgba(255,200,0,.25);color:rgba(255,200,0,.65); }
.fc__vote-btn--3:hover:not([disabled]):not(.is-voted),
.fc__vote-btn--3.is-voted-choice { background:#ffc800;color:#000;border-color:#ffc800;box-shadow:0 0 8px rgba(255,200,0,.4); }
/* Votado: opacidad reducida en todos */
.fc__vote-btn.is-voted{ opacity:.5;cursor:not-allowed; }
/* Nivel fijo del botón de voto */
.fc__vote-level{font-weight:700;font-size:.82rem;}
/* Contador total de bíceps del post */
.fc__vote-total{
    display:inline-flex;align-items:center;gap:.2rem;
    font-family:var(--font-hud);font-size:.72rem;font-weight:700;
    color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.6);letter-spacing:.05em;margin-left:.3rem;
}
.fc__vote-total-num{color:var(--ac);}
/* Nivel fijo en modal */
.post-modal__vote-level{font-weight:700;font-size:.9rem;}
/* Total en modal */
.post-modal__vote-total{
    display:inline-flex;align-items:center;gap:.2rem;
    font-family:var(--font-hud);font-size:.82rem;font-weight:700;
    color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.6);letter-spacing:.05em;padding:.3rem .5rem;
    border-left:1px solid rgba(255,255,255,.08);margin-left:.3rem;
}

.fc__vote-btn.is-voted-choice{ opacity:1!important;cursor:not-allowed; }
.fc__vote-btn.is-loading{opacity:.6;cursor:not-allowed;}
.fc__vote-btn[disabled]{cursor:not-allowed;opacity:.45;}
.fc__votes-hidden{display:none!important;}

/* ── Sep ────────────────────────────────────────────────── */
.fc__sep{height:1px;background:rgba(255,255,255,.05);margin:.15rem .75rem;}

/* ── Excerpt + ver más ──────────────────────────────────── */
.fc__body{padding:.4rem .75rem .6rem;}
.fc__excerpt{font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.65;}
.fc__excerpt-full{
    font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.65;
    display:none;   /* hidden by default — JS toggles inline style */
    margin-top:.25rem;
    /* NO max-height, NO overflow:hidden — se muestra TODO el texto */
}
.fc__read-more,.fc__read-less{
    background:none;border:none;
    font-family:var(--font-hud);font-size:.78rem;font-weight:600;
    color:var(--ac);cursor:pointer;padding:0;margin-top:.3rem;
    display:inline-block;transition:opacity var(--t);letter-spacing:.04em;
}
.fc__read-more:hover,.fc__read-less:hover{opacity:.7;}
.fc__expand-hidden{display:none!important;visibility:hidden;pointer-events:none;}

/* ── Vista cuadrícula (toggle) ──────────────────────────── */
.is-grid-view .fc{
    border-bottom:1px solid rgba(255,255,255,.05);
    border-right:1px solid rgba(255,255,255,.05);
}
/* Preservar blink dorado en grid view — no pisarlo con border fijo */
.is-grid-view .fc.fc--featured{
    border: 2px solid rgba(255,200,0,1);
    border-bottom: 2px solid rgba(255,200,0,1);
    box-shadow:
        0 0 0 3px rgba(255,200,0,.95),
        0 0 0 5px rgba(255,200,0,.3),
        4px 6px 18px rgba(0,0,0,.85);
    animation: fc-featured-pulse 1.8s ease-in-out infinite;
}
.is-grid-view .fc__header{padding:.4rem .45rem .3rem;}
.is-grid-view .fc__avatar{width:28px;height:28px;}
.is-grid-view .fc__author{font-size:.65rem;}
.is-grid-view .fc__date{display:none;}
.is-grid-view .fc__follow-btn{display:none;}
.is-grid-view .fc__img{max-height:160px;}
.is-grid-view .fc__actions-bar{padding:.3rem .45rem .15rem;}
.is-grid-view .fc__action-btn{width:26px;height:26px;}
.is-grid-view .fc__title-row{font-size:.7rem;padding:.2rem .45rem .15rem;}
.is-grid-view .fc__rating{padding:.2rem .45rem;}
.is-grid-view .fc__vote-btn{font-size:.58rem;padding:.12rem .35rem;}
.is-grid-view .fc__body{padding:.3rem .45rem .5rem;}
.is-grid-view .fc__excerpt{font-size:.68rem;}

/* Backward compat con selectores viejos usados en el JS */
.feed-card{background:var(--panel-bg);display:flex;flex-direction:column;}
.feed-card__vote-btn{background:none;border:none;cursor:pointer;}
.feed-card__vote-btn.is-voted{color:var(--ac);}
.feed-card__vote-btn.is-loading{opacity:.6;}
.feed-card__expand-btn{display:none!important;}

/* ═══ GIFTS PANEL ═══════════════════════════════════════════════ */
.gifts-panel{position:fixed;inset:0;z-index:1800;display:flex;}
.gifts-panel[hidden]{display:none!important;}
.gifts-panel__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(3px);}
.gifts-panel__box{position:relative;margin-left:auto;width:min(520px,96vw);height:100%;background:var(--panel-bg);border-left:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);display:flex;flex-direction:column;overflow:hidden;z-index:1;}
.gifts-panel__header{display:flex;align-items:center;justify-content:space-between;padding:.8rem .95rem;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;}
.gifts-panel__title{display:flex;align-items:center;gap:.35rem;font-family:var(--font-title);font-size:1.05rem;letter-spacing:.1em;color:var(--ac2);}
.gifts-panel__controls{display:flex;align-items:center;gap:.45rem;}
.gifts-filter{display:flex;gap:.18rem;}
.gifts-filter__btn{background:none;border:1px solid rgba(255,255,255,.1);font-family:var(--font-hud);font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:.18rem .45rem;transition:all var(--t);}
.gifts-filter__btn.is-active{border-color:var(--ac2);color:var(--ac2);background:var(--ac2-dim);}
.gifts-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem;padding:.65rem;}
.gifts-grid::-webkit-scrollbar{width:3px;}
.gifts-grid::-webkit-scrollbar-thumb{background:var(--ac2);}
.gift-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);overflow:hidden;position:relative;transition:border-color var(--t);}
.gift-card:hover{border-color:var(--ac);}
.gift-card--featured{border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.32);box-shadow:0 0 10px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);}
.gift-card__img-wrap{height:86px;background:var(--panel-bg3);overflow:hidden;position:relative;}
.gift-card__img{width:100%;height:100%;object-fit:cover;}
.gift-card__img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.9rem;background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.04);}
.gift-card__type-badge{position:absolute;top:3px;left:3px;font-size:.5rem;font-weight:700;letter-spacing:.1em;background:rgba(0,0,0,.82);color:var(--ac);padding:2px 5px;}
.gift-card__body{padding:.45rem .5rem;}
.gift-card__sponsor-row{display:flex;align-items:center;gap:.28rem;margin-bottom:.18rem;}
.gift-card__avatar{border-radius:50%;border:1px solid rgba(255,255,255,.18);object-fit:cover;}
.gift-card__sponsor{font-size:.58rem;color:var(--text-muted);}
.gift-card__title{font-size:.7rem;font-weight:700;color:#fff;line-height:1.3;}
.gift-card__desc{font-size:.62rem;color:var(--text-muted);margin-top:.18rem;line-height:1.4;}
.gift-card__glow{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 18px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05);}
.gifts-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;padding:2.2rem 1rem;text-align:center;}
.gifts-empty__icon{font-size:2.2rem;}
.gifts-empty p{font-size:.8rem;color:var(--text-muted);}
.gifts-empty__sub{font-size:.7rem!important;}
.gifts-panel__footer{padding:.65rem .95rem;border-top:1px solid rgba(255,255,255,.05);flex-shrink:0;}
.gifts-panel__footer .hud-btn{width:100%;justify-content:center;}

/* ═══ MODAL REGALAR ═════════════════════════════════════════════ */
.regalar-modal{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;}
.regalar-modal[hidden]{display:none!important;}
.regalar-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.84);backdrop-filter:blur(6px);}
.regalar-modal__box{position:relative;width:min(560px,94vw);max-height:90vh;overflow-y:auto;background:var(--panel-bg);border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.22);padding:1.4rem 1.6rem;display:flex;flex-direction:column;gap:1.15rem;}
.regalar-modal__header{display:flex;align-items:center;justify-content:space-between;}
.regalar-modal__title{display:flex;align-items:center;gap:.45rem;font-family:var(--font-title);font-size:1.35rem;letter-spacing:.1em;color:var(--ac2);}
.regalar-modal__title-icon{font-size:1.1rem;}
.regalar-modal__steps{display:flex;gap:.35rem;align-items:center;}
.regalar-step-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.14);transition:background var(--t);}
.regalar-step-dot.is-active{background:var(--ac2);}
.regalar-intro{font-size:.8rem;color:var(--text-muted);}
.regalar-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.regalar-type-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:.9rem;display:flex;flex-direction:column;gap:.32rem;text-align:left;cursor:pointer;transition:all var(--t);}
.regalar-type-card:hover{border-color:var(--ac);background:var(--ac-dim);}
.regalar-type-card--featured{border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.28);}
.regalar-type-card--featured:hover{border-color:var(--ac2);background:var(--ac2-dim);}
.regalar-type-card__badge{font-size:.58rem;font-weight:700;letter-spacing:.12em;color:var(--ac2);text-transform:uppercase;}
.regalar-type-card__icon{font-size:1.5rem;}
.regalar-type-card__name{font-family:var(--font-title);font-size:1.05rem;letter-spacing:.08em;color:#fff;}
.regalar-type-card__desc{font-size:.7rem;color:var(--text-muted);line-height:1.4;}
.regalar-type-card__price{display:block;margin-top:.28rem;font-weight:700;color:var(--ac2);font-size:.82rem;}
.regalar-type-card__select-btn{font-size:.65rem;font-weight:700;letter-spacing:.12em;color:var(--ac);text-transform:uppercase;margin-top:.18rem;}
.regalar-type-card__select-btn--featured{color:var(--ac2);}
.regalar-step-content[hidden]{display:none!important;}
.regalar-form-type-badge{font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--ac2);text-transform:uppercase;margin-bottom:.22rem;}
.regalar-field{display:flex;flex-direction:column;gap:.28rem;}
.regalar-label{font-size:.66rem;font-weight:700;letter-spacing:.12em;color:var(--text-muted);text-transform:uppercase;}
.regalar-optional{font-weight:400;text-transform:none;opacity:.7;}
.regalar-input{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff;padding:.52rem .75rem;font-family:inherit;font-size:.88rem;outline:none;transition:border-color var(--t);width:100%;}
.regalar-input:focus{border-color:var(--ac2);}
.regalar-input--textarea{resize:vertical;min-height:68px;}
.regalar-field__hint{font-size:.62rem;color:var(--text-faint);}
.regalar-mp-info{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05);border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);}
.regalar-mp-info__inner{display:flex;align-items:flex-start;gap:.55rem;padding:.6rem .8rem;}
.regalar-mp-info__icon{font-size:1.1rem;flex-shrink:0;}
.regalar-mp-info p{font-size:.72rem;color:var(--text-muted);line-height:1.5;margin-top:.18rem;}
.regalar-form-actions{display:flex;gap:.55rem;justify-content:flex-end;margin-top:.2rem;}
.regalar-result{text-align:center;padding:1.15rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;}
.regalar-result__icon{font-size:2.2rem;}
.regalar-result__msg{font-size:.8rem;color:var(--text-muted);line-height:1.5;}

/* ═══ RESPONSIVE ════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first completo
   ════════════════════════════════════════════════════ */

/* ── Tablet 768px+ ───────────────────────────────── */
@media (min-width:768px){
    .hud-layout{padding:0;}
    /* Topbar row2 tiene más espacio — flechas nav visibles */
    .hud-snav__arrow{display:flex;}
    /* Reel */
    .hud-reel__item{width:56px;height:56px;}
    .hud-reel__item.is-active{width:70px;height:70px;}
    /* Panel */
    .hud-countdown-card{min-width:240px;}
    .hud-countdown-card__time{font-size:2.1rem;}
    .hud-panel-card__value{font-size:1.45rem;}
    /* sec-top-post visible en tablet */
    .sec-top-post{display:flex;}
}

/* ── Desktop 1024px+ ─────────────────────────────── */
@media (min-width:1024px){
    .hud-layout{padding:0;}
    .hud-reel__item{width:60px;height:60px;}
    .hud-reel__item.is-active{width:76px;height:76px;}
    .hud-countdown-card__time{font-size:2.3rem;}
    .hud-actions{gap:2rem;}
    .hud-btn{font-size:.8rem;padding:.38rem .95rem;}
    .hud-social{display:flex;}
    .hud-logo__name{font-size:.95rem;letter-spacing:.18em;}
}

/* ── Mobile ≤767px ───────────────────────────────── */
@media (max-width:767px){
    .hud-layout{padding:0;}
    /* Fila 1: compacta */
    .hud-topbar__row1{min-height:32px;gap:.35rem;}
    .hud-logo{padding:.14rem .4rem;}
    .hud-logo__name{font-size:.78rem;letter-spacing:.1em;}
    .hud-social{display:none;}
    .hud-topbar__cta-publish{
        font-size:.58rem;padding:.2rem .45rem;letter-spacing:.08em;
    }
    /* Fila 2: nav scroll libre, sin flechas */
    .hud-topbar__row2{padding:.2rem 0 .15rem;margin-top:.2rem;}
    .hud-snav__arrow{display:none!important;}
    .hud-snav__btn{font-size:.56rem;padding:.16rem .38rem;letter-spacing:.07em;}
    /* sec-top-post: oculto en mobile */
    .sec-top-post{display:none!important;}
    /* Reel */
    .hud-reel__item{width:46px;height:46px;}
    .hud-reel__item.is-active{width:58px;height:58px;}
    /* Panel */
    .hud-countdown-card{min-width:140px;}
    .hud-countdown-card__time{font-size:1.45rem;}
    .hud-panel-card__value{font-size:1.05rem;}
    .hud-panel{gap:.2rem;}
    /* Acciones */
    .hud-actions{gap:.5rem;flex-wrap:wrap;}
    .hud-btn{font-size:.65rem;padding:.28rem .55rem;}
    /* Cards regalo */
    .hud-gift-card{width:250px;}
    .hud-gift-card--featured{width:280px;}
    .hud-gift-card__circle-wrap{width:56px;height:56px;}
    .hud-gift-card--featured .hud-gift-card__circle-wrap{width:66px;height:66px;}
}

/* ── Mobile pequeño ≤600px ───────────────────────── */
@media (max-width:600px){
    .hud-layout{padding:0;}
    .hud-vertical-nums{display:none;}
    .hud-section-indicator{display:none;}
    .hud-icon-btn{display:none;}
    .hud-user__info{display:none;}
    .hud-snav__btn{font-size:.5rem;padding:.14rem .32rem;letter-spacing:.05em;}
    .hud-countdown-card__time{font-size:1.25rem;}
    .hud-panel-card__value{font-size:.95rem;}
    .hud-btn{font-size:.6rem;padding:.25rem .48rem;}
    .feed-grid{grid-template-columns:1fr;}
    .regalar-type-grid{grid-template-columns:1fr;}
    /* Login btn: solo ícono */
    #hud-user-label{display:none;}
    .hud-user-chevron{display:none;}
    .hud-topbar__cta-login{padding:.22rem .35rem;min-width:32px;justify-content:center;}
}

/* ── Pantallas muy pequeñas ≤400px ──────────────── */
@media (max-width:400px){
    .hud-layout{padding:0;}
    .hud-logo__name{font-size:.68rem;letter-spacing:.06em;}
    .hud-logo{padding:.12rem .32rem;}
    .hud-topbar__cta-publish{display:none;}
    .hud-snav__btn{font-size:.46rem;padding:.12rem .28rem;letter-spacing:.04em;}
    .hud-countdown-card__time{font-size:1.05rem;}
    .hud-panel__col--left,.hud-panel__col--right{display:none;}
    .hud-panel{justify-content:center;}
}

/* ── Landscape + altura baja ─────────────────────── */
@media (max-height:500px) and (orientation:landscape){
    .hud-countdown-card__time{font-size:1.1rem;}
    .hud-sponsors{display:none;}
    .hud-reel{display:none;}
    .hud-topbar__row2{display:none;}
}

/* ── Safe area iOS ───────────────────────────────── */
@supports (padding-bottom:env(safe-area-inset-bottom)){
    .hud-layout{
        padding-left:max(.5rem, env(safe-area-inset-left));
        padding-right:max(.5rem, env(safe-area-inset-right));
    }
}

/* ═══════════════════════════════════════════════════════════════
   IT6 — AUTENTICACIÓN, PERFIL, PUBLICAR POST
   Modales: Auth (login/registro), Perfil, Publicar
   ═══════════════════════════════════════════════════════════════ */

/* ── AUTH MODAL ──────────────────────────────────────────────── */
.auth-modal{
  position:fixed;inset:0;z-index:3000;display:flex;align-items:center;
  justify-content:center;
}
.auth-modal[hidden]{display:none!important;}
.auth-modal__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);
}
.auth-modal__box{
  position:relative;width:min(440px,92vw);max-height:90vh;overflow-y:auto;
  background:var(--panel-bg2);border:1px solid rgba(var(--ac-rgb,170,255,0),.25);
  padding:2rem 2rem 1.5rem;display:flex;flex-direction:column;gap:1.4rem;
}
.auth-modal__box::-webkit-scrollbar{width:4px;}
.auth-modal__box::-webkit-scrollbar-track{background:transparent;}
.auth-modal__box::-webkit-scrollbar-thumb{background:var(--ac);border-radius:2px;}
.auth-modal__header{
  display:flex;align-items:center;justify-content:space-between;
}
.auth-modal__title{
  font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.1em;color:var(--ac);
}
.auth-modal__subtitle{
  font-size:.82rem;color:#8a9a7a;letter-spacing:.08em;margin-top:.15rem;
}
.auth-modal__tabs{
  display:flex;gap:.5rem;border-bottom:1px solid rgba(255,255,255,.08);
}
.auth-tab{
  flex:1;padding:.55rem;background:none;border:none;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:600;
  letter-spacing:.1em;color:#6a7a5a;text-transform:uppercase;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.auth-tab.is-active{color:var(--ac);border-bottom-color:var(--ac);}
.auth-form{display:flex;flex-direction:column;gap:1rem;}
.auth-form[hidden]{display:none!important;}
.auth-field{display:flex;flex-direction:column;gap:.35rem;}
.auth-label{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;color:#8a9a7a;
  text-transform:uppercase;
}
.auth-input{
  background:var(--panel-bg3);border:1px solid rgba(255,255,255,.1);color:#e8f0d8;
  padding:.6rem .85rem;font-family:inherit;font-size:.95rem;outline:none;
  transition:border-color .2s;border-radius:0;
}
.auth-input:focus{border-color:var(--ac);}
.auth-input.is-error{border-color:#ff4444;}
.auth-field__error{font-size:.72rem;color:#ff6666;letter-spacing:.05em;display:none;}
.auth-field__error.is-visible{display:block;}
.auth-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem;}
.auth-divider{
  text-align:center;font-size:.75rem;color:#5a6a4a;letter-spacing:.1em;
  position:relative;
}
.auth-divider::before,.auth-divider::after{
  content:'';position:absolute;top:50%;width:42%;height:1px;
  background:rgba(255,255,255,.08);
}
.auth-divider::before{left:0;}
.auth-divider::after{right:0;}
.auth-switch{
  text-align:center;font-size:.8rem;color:#6a7a5a;
}
.auth-switch__link{
  color:var(--ac);cursor:pointer;background:none;border:none;
  font-family:inherit;font-size:.8rem;font-weight:600;padding:0;
  text-decoration:underline;
}
.auth-error-msg{
  background:rgba(255,68,68,.08);border:1px solid rgba(255,68,68,.3);
  color:#ff8888;padding:.6rem .85rem;font-size:.82rem;letter-spacing:.05em;
  display:none;
}
.auth-error-msg.is-visible{display:block;}

/* ── AVATAR EN TOPBAR (usuario logueado) ─────────────────────── */
.hud-avatar__img{
  width:100%;height:100%;object-fit:cover;border-radius:0;
}
.hud-user__name{
  font-size:.8rem;font-weight:600;color:var(--ac);letter-spacing:.08em;
  max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hud-user__role{font-size:.65rem;color:#6a7a5a;letter-spacing:.1em;}
.hud-user__login-btn{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--ac);
  background:none;border:1px solid var(--ac);padding:.25rem .65rem;cursor:pointer;
  text-transform:uppercase;transition:background .2s,color .2s;
}
.hud-user__login-btn:hover{background:var(--ac);color:#0c0e10;}

/* ── PROFILE PANEL ───────────────────────────────────────────── */
.profile-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:2500;
  width:min(380px,94vw);display:flex;flex-direction:column;
}
.profile-panel[hidden]{display:none!important;}
.profile-panel__backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:-1;
}
.profile-panel__box{
  height:100%;background:var(--panel-bg2);border-left:1px solid rgba(var(--ac-rgb,170,255,0),.2);
  display:flex;flex-direction:column;overflow-y:auto;
}
.profile-panel__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:0;background:var(--panel-bg2);z-index:2;
}
.profile-panel__title{
  font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.1em;color:var(--ac);
}
.profile-hero{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  padding:1.75rem 1.5rem 1.25rem;text-align:center;
}
.profile-hero__avatar{
  width:72px;height:72px;border:2px solid var(--ac);object-fit:cover;
  box-shadow:0 0 16px var(--ac-glow);
}
.profile-hero__name{
  font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.08em;
}
.profile-hero__username{font-size:.75rem;color:#6a7a5a;letter-spacing:.1em;}
.profile-hero__bio{font-size:.82rem;color:#8a9a7a;line-height:1.5;max-width:260px;}
.profile-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.06);margin:0 1.5rem 1.25rem;
}
.profile-stat{
  background:var(--panel-bg2);padding:.75rem .5rem;text-align:center;
}
.profile-stat__val{
  font-family:'Bebas Neue',sans-serif;font-size:1.4rem;color:var(--ac);
}
.profile-stat__lbl{font-size:.62rem;letter-spacing:.1em;color:#5a6a4a;text-transform:uppercase;}
.profile-panel__section{
  padding:0 1.5rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;
}
.profile-panel__section-title{
  font-size:.72rem;font-weight:700;letter-spacing:.15em;color:#5a6a4a;
  text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.06);
  padding-bottom:.4rem;
}
.profile-edit-form{display:flex;flex-direction:column;gap:.85rem;}
.profile-field{display:flex;flex-direction:column;gap:.3rem;}
.profile-label{font-size:.7rem;font-weight:600;letter-spacing:.12em;color:#8a9a7a;text-transform:uppercase;}
.profile-input{
  background:var(--panel-bg3);border:1px solid rgba(255,255,255,.1);color:#e8f0d8;
  padding:.55rem .8rem;font-family:inherit;font-size:.9rem;outline:none;
  transition:border-color .2s;width:100%;
}
.profile-input:focus{border-color:var(--ac);}
.profile-textarea{
  resize:vertical;min-height:70px;
}
.profile-actions{
  display:flex;gap:.5rem;margin-top:.25rem;
}

/* ── PUBLISH MODAL ───────────────────────────────────────────── */
.publish-modal{
  position:fixed;inset:0;z-index:2800;display:flex;align-items:center;justify-content:center;
}
/* Garantizar que hidden siempre oculte, sin importar display del elemento */
.publish-modal [hidden]{display:none!important;}
.publish-modal[hidden]{display:none!important;}
.publish-modal__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);
}
.publish-modal__box{
  position:relative;width:min(560px,94vw);max-height:90vh;overflow-y:auto;
  background:var(--panel-bg2);border:1px solid rgba(var(--ac-rgb,170,255,0),.25);
  padding:2rem;display:flex;flex-direction:column;gap:1.4rem;
}
/* Cuando solo muestra el resultado, el box se compacta y centra */
.publish-modal__box:has(#publish-form-wrap[hidden]){
  overflow-y:hidden;
  justify-content:center;
  min-height:260px;
}
.publish-modal__header{
  display:flex;align-items:center;justify-content:space-between;
}
.publish-modal__title{
  font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.1em;color:var(--ac);
}
.publish-form{display:flex;flex-direction:column;gap:1.1rem;}
.publish-field{display:flex;flex-direction:column;gap:.35rem;}
.publish-label{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;color:#8a9a7a;text-transform:uppercase;
}
.publish-input{
  background:var(--panel-bg3);border:1px solid rgba(255,255,255,.1);color:#e8f0d8;
  padding:.65rem .9rem;font-family:inherit;font-size:.95rem;outline:none;
  transition:border-color .2s;width:100%;
}
.publish-input:focus{border-color:var(--ac);}
.publish-textarea{
  resize:vertical;min-height:100px;
}
.publish-section-tabs{
  display:flex;flex-wrap:wrap;gap:.4rem;
}
.publish-section-btn{
  padding:.3rem .75rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:#8a9a7a;font-family:'Barlow Condensed',sans-serif;font-size:.8rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s;
}
.publish-section-btn.is-active{
  background:var(--ac-dim);border-color:var(--ac);color:var(--ac);
}
.publish-char-count{
  font-size:.7rem;color:#5a6a4a;text-align:right;
}
/* ── Foto adjunta al post ── */
.pub-img-wrap{
  position:relative;border-radius:6px;overflow:hidden;background:var(--panel-bg2);
  border:1px solid rgba(255,255,255,.08);min-height:52px;
}
.pub-img-btns{
  display:flex;gap:.5rem;padding:.5rem;
}
.pub-img-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);font-family:inherit;font-size:.72rem;letter-spacing:.06em;
  padding:.55rem .5rem;border-radius:5px;cursor:pointer;transition:border-color .15s,color .15s;
}
.pub-img-btn:hover{border-color:var(--ac);color:var(--ac);}
.pub-img-preview{
  position:relative;width:100%;aspect-ratio:16/9;
}
.pub-img-remove{
  position:absolute;top:6px;right:6px;z-index:2;
  background:rgba(0,0,0,.65);border:none;color:#fff;
  width:24px;height:24px;border-radius:50%;font-size:.75rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s;
}
.pub-img-remove:hover{background:rgba(200,0,0,.8);}
.publish-notice{
  background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.06);border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
  padding:.6rem .85rem;font-size:.78rem;color:#aad060;letter-spacing:.05em;
}
.publish-actions{
  display:flex;gap:.75rem;justify-content:flex-end;margin-top:.25rem;
}
.publish-result{
  text-align:center;padding:1.5rem;display:flex;flex-direction:column;
  align-items:center;gap:1rem;
}
.publish-result[hidden]{display:none!important;}
.publish-result__icon{font-size:2.5rem;}
.publish-result__msg{font-size:.9rem;color:#8a9a7a;line-height:1.5;}
.publish-result__link{
  font-size:.8rem;color:var(--ac);text-decoration:underline;
}

/* ── Publish Multi-Step ──────────────────────────────────── */
.pub-step-dots{
  display:flex;justify-content:center;align-items:center;gap:.55rem;
  margin:.2rem 0 1.4rem;
}
.pub-step-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:background .3s,transform .25s,width .25s;
}
.pub-step-dot.is-active{
  background:var(--ac);transform:scale(1.35);
  box-shadow:0 0 6px rgba(170,255,0,.5);
}
.pub-step-dot.is-done{background:rgba(170,255,0,.4);}

/* Paso contenedor */
.pub-step{
  display:flex;flex-direction:column;align-items:center;
  gap:1.1rem;width:100%;
}

/* Paso 1 — círculo cámara */
.pub-cam-hint{
  font-size:.7rem;color:rgba(255,255,255,.38);letter-spacing:.1em;
  text-transform:uppercase;text-align:center;margin-bottom:-.2rem;
}
.pub-camera-circle{
  width:148px;height:148px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 100%);
  border:3px dashed rgba(255,255,255,.22);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;gap:.55rem;
  color:rgba(255,255,255,.55);
  transition:border-color .25s,background .25s,color .2s,transform .15s,box-shadow .25s;
  -webkit-tap-highlight-color:transparent;
}
.pub-camera-circle:hover,
.pub-camera-circle:focus-visible{
  border-color:var(--ac);border-style:solid;
  background:rgba(170,255,0,.06);color:var(--ac);
  box-shadow:0 0 22px rgba(170,255,0,.18);
  outline:none;
}
.pub-camera-circle:active{transform:scale(.95);}
.pub-cam-label{
  font-size:.62rem;letter-spacing:.18em;font-weight:700;
  text-transform:uppercase;line-height:1;
}
.pub-gallery-wrap{margin-top:.2rem;}
.pub-gallery-icon-btn{
  display:flex;align-items:center;gap:.45rem;
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.38);
  padding:.38rem 1rem;border-radius:6px;
  font-size:.68rem;letter-spacing:.1em;font-weight:700;text-transform:uppercase;
  cursor:pointer;transition:border-color .2s,color .2s;font-family:inherit;
}
.pub-gallery-icon-btn:hover{
  border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.75);
}

/* Paso 2 — mini preview + título */
.pub-mini-preview{
  position:relative;width:100%;max-height:190px;
  overflow:hidden;border-radius:10px;flex-shrink:0;
}
.pub-mini-preview img{
  width:100%;height:190px;object-fit:cover;display:block;
}
.pub-img-change{
  position:absolute;bottom:.55rem;right:.55rem;
  background:rgba(0,0,0,.72);color:rgba(255,255,255,.8);
  border:none;padding:.3rem .65rem;border-radius:5px;
  font-size:.62rem;cursor:pointer;letter-spacing:.06em;
  font-family:inherit;transition:background .2s;
}
.pub-img-change:hover{background:rgba(0,0,0,.9);}

/* Paso 3 — header con thumb + título preview */
.pub-step3-header{
  display:flex;align-items:center;gap:.8rem;
  width:100%;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;padding:.6rem .75rem;
}
.pub-mini-preview-sm{
  flex-shrink:0;width:58px;height:58px;
  border-radius:6px;overflow:hidden;
  background:rgba(255,255,255,.06);
}
.pub-mini-preview-sm img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.pub-step3-title-preview{
  font-family:'Bebas Neue',sans-serif;font-size:1.05rem;
  letter-spacing:.05em;color:rgba(255,255,255,.82);
  line-height:1.2;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}

/* Step actions (botones Atrás / Siguiente) */
.pub-step-actions{
  display:flex;gap:.6rem;width:100%;margin-top:.2rem;
}
.pub-step-actions .hud-btn{flex:1;}
.pub-section-tabs-step4{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;width:100%;
}
.pub-section-tabs-step4 .publish-section-btn{
  padding:.7rem .5rem;font-size:.7rem;text-align:center;
  border-radius:8px;justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  transition:border-color .2s,background .2s,color .2s,box-shadow .2s;
}
.pub-section-tabs-step4 .publish-section-btn.is-active{
  border-color:var(--ac);background:rgba(170,255,0,.1);
  color:var(--ac);box-shadow:0 0 10px rgba(170,255,0,.15);
}



/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:480px){
  .auth-modal__box{padding:1.5rem 1.25rem;}
  .publish-modal__box{padding:1.5rem 1.25rem;}
  .profile-stats{grid-template-columns:repeat(2,1fr);}
}

/* ═══════════════════════════════════════════════════════════
   SECTIONS NAV — list wrapper generado por JS
   ═══════════════════════════════════════════════════════════ */

/* ════════ SEC-TOP-POST — Mejor post de la sección en el header ════════ */
.sec-top-post{
    display:flex;align-items:center;gap:.5rem;
    padding:.22rem .55rem;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);
    border-radius:2px;
    max-width:260px;
    backdrop-filter:blur(4px);
    transition:opacity var(--t);
    flex-shrink:0;
}
.sec-top__thumb{
    width:32px;height:32px;border-radius:3px;object-fit:cover;flex-shrink:0;
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);
}
.sec-top__thumb--empty{
    width:32px;height:32px;border-radius:3px;flex-shrink:0;
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.07);border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    display:flex;align-items:center;justify-content:center;font-size:.9rem;
}
.sec-top__info{
    display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1;
}
.sec-top__label{
    font-family:var(--font-hud);font-size:.38rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.7);white-space:nowrap;
}
.sec-top__title{
    font-family:var(--font-hud);font-size:.55rem;font-weight:700;letter-spacing:.02em;
    color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    transition:color var(--t);
}
.sec-top__title:hover{color:var(--ac);}
.sec-top__more{
    font-family:var(--font-hud);font-size:.42rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.65);text-decoration:none;white-space:nowrap;
    flex-shrink:0;
    transition:color var(--t);
}
.sec-top__more:hover{color:var(--ac);}

.hud-sections-nav__list{
    display:flex;align-items:center;gap:.1rem;
    list-style:none;padding:0;margin:0;
    flex-wrap:wrap;justify-content:center;
}
.hud-sections-nav__item{
    display:flex;align-items:center;
}
/* hud-sections-nav: hereda reglas del bloque principal */
/* ═══════════════════════════════════════════════════════════
   PEX-MODAL — Tarjeta de post expandida IT8
   Estilo: card tipo red social, fondo oscuro, acento neón
   ═══════════════════════════════════════════════════════════ */

/* ── Wrapper / backdrop ─────────────────────────────────── */
.pex-modal{
    position:fixed;inset:0;z-index:2200;
    display:flex;align-items:center;justify-content:center;
    padding:0;
    background:rgba(233,233,233,.09);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    overflow:hidden;
}
.pex-modal[hidden]{display:none!important;}
.pex-modal__backdrop{
    position:fixed;inset:0;z-index:0;
    cursor:pointer;
}
.pex-modal__box{
    position:relative;z-index:1;
    width:min(480px,100vw);
    /* altura fija: topbar pegado arriba, contenido scrolleable abajo */
    height:min(92vh,840px);
    max-height:92vh;
    background:var(--panel-bg2);
    display:flex;flex-direction:column;
    overflow:hidden;
}
/* Zona de scroll principal del modal (todo menos el topbar) */
.pex-modal__body-scroll{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:var(--ac) transparent;
    -webkit-overflow-scrolling:touch;
}
.pex-modal__body-scroll::-webkit-scrollbar{width:3px;}
.pex-modal__body-scroll::-webkit-scrollbar-thumb{background:var(--ac);}

/* ── Topbar ─────────────────────────────────────────────── */
.pex-topbar{
    display:flex;align-items:center;gap:.5rem;
    padding:.55rem .85rem;
    background:var(--bg);
    border-bottom:1px solid rgba(255,255,255,.05);
    position:relative;z-index:10;
    flex-shrink:0;
}
.pex-topbar__menu{
    background:none;border:none;color:var(--text-muted);
    display:flex;align-items:center;padding:.15rem;transition:color var(--t);flex-shrink:0;
}
.pex-topbar__menu:hover{color:var(--ac);}
.pex-topbar__section-icon{font-size:.9rem;flex-shrink:0;}
.pex-topbar__title{
    font-family:var(--font-title);font-size:.9rem;letter-spacing:.15em;
    color:#fff;white-space:nowrap;
}
.pex-topbar__badge{
    font-size:.6rem;font-weight:700;letter-spacing:.12em;
    color:var(--ac);border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.4);
    padding:.1rem .45rem;text-transform:uppercase;
    white-space:nowrap;
}
.pex-topbar__close{
    margin-left:auto;flex-shrink:0;
    background:none;
    border:1px solid #dc3545;
    font-family:var(--font-hud);font-size:.68rem;font-weight:700;
    letter-spacing:.1em;color:#dc3545;
    padding:.22rem .65rem;cursor:pointer;
    transition:background var(--t),color var(--t);
}
.pex-topbar__close:hover{background:#dc3545;color:#fff;}

/* ── Card principal ─────────────────────────────────────── */
.pex-card{
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.15);
    margin:.75rem;
    background:var(--panel-bg2);
    display:flex;flex-direction:column;
    overflow:hidden;
}

/* ── Header: avatar + autor + seguir + compartir ─────────── */
.pex-card__header{
    display:flex;align-items:center;gap:.65rem;
    padding:.65rem .85rem;
    border-bottom:1px solid rgba(255,255,255,.05);
}
.pex-card__avatar{
    width:42px;height:42px;border-radius:50%;
    object-fit:cover;border:2px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);
    flex-shrink:0;
}
.pex-card__author-info{display:flex;flex-direction:column;gap:.1rem;flex:1;min-width:0;}
.pex-card__author-name{
    font-size:.82rem;font-weight:700;letter-spacing:.06em;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pex-card__date{font-size:.65rem;color:var(--text-muted);}

/* Acciones del header (seguir + compartir) */
.pex-card__actions-top{
    display:flex;align-items:center;gap:.4rem;
    flex-shrink:0;position:relative;
}
.pex-follow-btn{
    background:none;
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5);
    font-family:var(--font-hud);font-size:.65rem;font-weight:700;
    letter-spacing:.1em;color:var(--ac);
    padding:.22rem .6rem;cursor:pointer;
    transition:background var(--t),color var(--t);
    white-space:nowrap;
}
.pex-follow-btn:hover,.pex-follow-btn.is-following{
    background:var(--ac);color:#000;
}
.pex-follow-btn[hidden]{display:none;}

.pex-share-toggle{
    background:none;border:none;
    color:var(--text-muted);
    display:flex;align-items:center;justify-content:center;
    width:30px;height:30px;
    transition:color var(--t);flex-shrink:0;
}
.pex-share-toggle:hover{color:var(--ac);}

/* Menú compartir — dropdown vertical */
.pex-share-menu{
    position:absolute;top:calc(100% + .4rem);right:0;
    display:flex;flex-direction:column;gap:3px;
    background:var(--panel-bg3);border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25);
    padding:.3rem;z-index:20;
    min-width:36px;
}
.pex-share-menu[hidden]{display:none!important;}
.pex-share-btn{
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    border:none;cursor:pointer;
    transition:opacity var(--t),transform var(--t);
    text-decoration:none;
    border-radius:0;
}
.pex-share-btn:hover{opacity:.85;transform:scale(1.08);}
.pex-share-btn--fb  {background:#1877f2;color:#fff;}
.pex-share-btn--wa  {background:#25d366;color:#fff;}
.pex-share-btn--x   {background:var(--bg);color:#fff;border:1px solid rgba(255,255,255,.15);}
.pex-share-btn--copy{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);color:var(--ac);border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);}

/* ── Imagen ─────────────────────────────────────────────── */
.pex-card__img-wrap{
    position:relative;
    background:var(--panel-bg3);
}
.pex-card__img-wrap[hidden]{display:none!important;}
.pex-card__img{
    width:100%;max-height:380px;
    object-fit:cover;display:block;
}

/* Botones flotantes sobre la imagen (guardar / editar / borrar) */
.pex-card__img-actions{
    position:absolute;bottom:.55rem;right:.55rem;
    display:flex;gap:.35rem;
}
.pex-img-btn{
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    border:none;cursor:pointer;
    background:rgba(0,0,0,.72);
    color:var(--text-muted);
    border:1px solid rgba(255,255,255,.18);
    transition:all var(--t);
    text-decoration:none;
}
.pex-img-btn:hover{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(0,0,0,.9);}
.pex-img-btn[hidden]{display:none!important;}

/* Guardar — activo = bookmark relleno + acento */
.pex-img-btn--save{color:var(--text-muted);}
.pex-img-btn--save.is-saved{
    color:var(--ac);border-color:var(--ac);
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
}
.pex-img-btn--save.is-saved svg{fill:var(--ac);stroke:var(--ac);}

/* Editar — acento azul */
.pex-img-btn--edit:hover{color:var(--ac2);border-color:var(--ac2);}

/* Borrar — rojo */
.pex-img-btn--delete:hover{color:#ff4d4d;border-color:#ff4d4d;}

/* ── Meta: autor tag + título ───────────────────────────── */
.pex-card__meta{
    padding:.6rem .85rem .3rem;
    font-size:.82rem;color:var(--text-muted);
    line-height:1.4;
}

/* ── Rating / votos ─────────────────────────────────────── */
.pex-card__rating{
    display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
    padding:.4rem .85rem;
    background:rgba(0,0,0,.3);
    border-top:1px solid rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.04);
}
.pex-rating__label{font-size:.65rem;color:var(--text-muted);letter-spacing:.05em;}
.pex-rating__type{
    font-size:.65rem;font-weight:700;letter-spacing:.08em;
    color:var(--ac);margin-right:.2rem;
}
.pex-rating__btn{
    display:inline-flex;align-items:center;gap:.3rem;
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);
    color:var(--ac);
    font-family:var(--font-hud);font-size:.7rem;font-weight:700;
    padding:.22rem .55rem;cursor:pointer;
    transition:all var(--t);
    letter-spacing:.04em;
}
.pex-vote-level{font-weight:700;font-size:.85rem;}
.pex-vote-total-wrap{
    display:inline-flex;align-items:center;gap:.2rem;
    font-family:var(--font-hud);font-size:.78rem;font-weight:700;
    color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.6);letter-spacing:.05em;
    padding:.25rem .5rem;border-left:1px solid rgba(255,255,255,.1);
    margin-left:.2rem;
}
.pex-vote-total-wrap span{color:var(--ac);}

.pex-rating__btn:hover,.pex-rating__btn--active{
    background:var(--ac);color:#000;
    box-shadow:0 0 10px var(--ac-glow);
}
.pex-rating__btn.is-voted{background:var(--ac);color:#000;}
.pex-rating__btn.is-loading{opacity:.6;cursor:not-allowed;}

/* ── Separador ──────────────────────────────────────────── */
.pex-card__sep{
    height:1px;background:rgba(255,255,255,.06);margin:.15rem .85rem;
}

/* ── Cuerpo del texto ───────────────────────────────────── */
.pex-card__body{padding:.5rem .85rem .65rem;}
.pex-card__excerpt{
    font-size:.82rem;color:var(--text-muted);line-height:1.6;
}
/* Texto completo: div con scroll propio, no empuja el modal */
.pex-card__text-scroll{
    display:none;
    max-height:260px;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35) transparent;
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);
    border-radius:2px;
    padding:.55rem .65rem;
    margin-top:.35rem;
    background:rgba(255,255,255,.02);
    -webkit-overflow-scrolling:touch;
}
.pex-card__text-scroll::-webkit-scrollbar{width:3px;}
.pex-card__text-scroll::-webkit-scrollbar-thumb{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);border-radius:2px;}
.pex-card__text-scroll.is-open{display:block;}
.pex-card__excerpt-full{
    font-size:.82rem;color:var(--text-muted);line-height:1.6;
    margin:0;
}
.pex-card__excerpt-full[hidden]{display:none!important;}
.pex-card__read-more,
.pex-card__read-less{
    background:none;border:none;
    font-family:var(--font-hud);font-size:.78rem;font-weight:600;
    color:var(--ac);cursor:pointer;padding:0;margin-top:.35rem;
    display:block;transition:opacity var(--t);letter-spacing:.03em;
}
.pex-card__read-more:hover,
.pex-card__read-less:hover{opacity:.7;}
.pex-card__read-more[hidden],
.pex-card__read-less[hidden]{display:none!important;}

/* ── Permalink ──────────────────────────────────────────── */
.pex-card__permalink{
    display:block;
    margin:.25rem .85rem .85rem;
    font-size:.72rem;font-weight:700;letter-spacing:.1em;
    color:var(--text-muted);text-decoration:underline;
    transition:color var(--t);
    text-transform:uppercase;
}
.pex-card__permalink:hover{color:var(--ac);}
.pex-card__permalink[hidden]{display:none!important;}

/* ── Confirmación de borrado ────────────────────────────── */
.pex-delete-confirm{
    position:absolute;inset:0;z-index:50;
    background:rgba(0,0,0,.88);backdrop-filter:blur(3px);
    display:flex;align-items:center;justify-content:center;
    padding:1.5rem;
}
.pex-delete-confirm[hidden]{display:none!important;}
.pex-delete-confirm__box{
    background:var(--panel-bg3);border:1px solid rgba(220,53,69,.4);
    padding:1.5rem;text-align:center;
    display:flex;flex-direction:column;gap:1rem;
    max-width:320px;
}
.pex-delete-confirm__msg{font-size:.85rem;color:var(--text-muted);line-height:1.5;}
.pex-delete-confirm__actions{display:flex;gap:.65rem;justify-content:center;}

/* ── Responsive ─────────────────────────────────────────── */
@media (min-width:600px){
    .pex-modal{align-items:center;}
    .pex-modal__box{border-radius:0;max-height:92vh;}
}
@media (max-width:480px){
    .pex-card{margin:.5rem;}
    .pex-card__img{max-height:260px;}
    .pex-topbar__close{font-size:.62rem;padding:.2rem .5rem;}
}

/* ── Toast de notificaciones (gyms-toast) ─────────────── */
.gyms-toast{
    position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;
    background:var(--panel-bg2);color:#e8f0d8;
    padding:.65rem 1rem;font-size:.82rem;font-family:var(--font-hud);
    letter-spacing:.05em;max-width:340px;
    box-shadow:0 4px 16px rgba(0,0,0,.5);
    border-left:3px solid var(--ac);
    opacity:0;transform:translateX(24px);
    transition:opacity .3s,transform .3s;
    pointer-events:none;
}
.gyms-toast.is-visible{opacity:1;transform:translateX(0);pointer-events:auto;}
.gyms-toast--success{border-left-color:#aaff00;}
.gyms-toast--error{border-left-color:#ff4444;}
.gyms-toast--warning{border-left-color:#ffc107;color:#ffe082;}
.gyms-toast--info{border-left-color:#4af;}

/* ── Banner de intent en modal de auth ────────────────── */
.auth-intent-banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25);
    border-left: 3px solid #aaff00;
    padding: .6rem .9rem;
    margin: .5rem 0 .75rem;
    border-radius: 2px;
    font-size: .78rem;
    color: #c8e89a;
    line-height: 1.4;
}
.auth-intent-banner[hidden] { display: none !important; }
.auth-intent-banner__icon { font-size: 1.2rem; flex-shrink: 0; }
.auth-intent-banner__text strong { color: var(--ac); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   PANEL REGALOS — IT9
   ═══════════════════════════════════════════════════════════ */

/* ── Wrapper / backdrop ─────────────────────────────────── */
.gr-panel{
    position:fixed;inset:0;z-index:2500;
    display:flex;align-items:stretch;justify-content:flex-end;
}
.gr-panel[hidden]{display:none!important;}
.gr-panel__backdrop{
    position:absolute;inset:0;
    background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
    cursor:pointer;z-index:0;
}
.gr-panel__box{
    position:relative;z-index:1;
    width:min(560px,100vw);
    background:var(--panel-bg);
    border-left:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    display:flex;flex-direction:column;overflow:hidden;
}

/* ── Topbar ─────────────────────────────────────────────── */
.gr-topbar{
    display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
    padding:.55rem .8rem;
    background:var(--bg);
    border-bottom:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
    flex-shrink:0;
}
.gr-topbar__icon{font-size:1rem;flex-shrink:0;}
.gr-topbar__title{
    font-family:var(--font-title);font-size:.9rem;
    letter-spacing:.15em;color:#fff;flex-shrink:0;
    margin-right:.4rem;
}
.gr-topbar__tabs{display:flex;gap:.15rem;flex:1;flex-wrap:wrap;}
.gr-tab{
    background:none;border:none;
    font-family:var(--font-hud);font-size:.6rem;font-weight:700;
    letter-spacing:.1em;color:rgba(255,255,255,.35);
    padding:.22rem .5rem;cursor:pointer;
    border-bottom:2px solid transparent;
    transition:color var(--t),border-color var(--t);
    display:flex;align-items:center;gap:.25rem;
    white-space:nowrap;
}
.gr-tab.is-active{color:var(--ac);border-bottom-color:var(--ac);}
.gr-tab:hover{color:rgba(255,255,255,.7);}
.gr-tab__badge{
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.15);color:var(--ac);
    font-size:.55rem;padding:.05rem .3rem;
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);
    min-width:16px;text-align:center;
}
/* Badge de warning (revisión) — color ámbar */
.gr-tab__badge--warn{
    background:rgba(245,158,11,.15);color:#f59e0b;
    border-color:rgba(245,158,11,.4);
}
/* Banner de advertencia dentro de la card */
.pp-flag-banner{
    background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);
    border-radius:4px;padding:.35rem .6rem;font-size:.72rem;
    color:#f59e0b;letter-spacing:.03em;margin-bottom:.4rem;
}
.pp-flag-banner strong{color:#fbbf24;}
/* Card flaggeada — borde lateral ámbar */
.pp-flagged{
    border-left:3px solid #f59e0b !important;
}
.gr-topbar__close{
    background:none;border:1px solid rgba(220,53,69,.5);
    color:rgba(220,53,69,.8);font-size:.68rem;font-weight:700;
    padding:.22rem .6rem;cursor:pointer;
    transition:all var(--t);flex-shrink:0;
}
.gr-topbar__close:hover{background:#dc3545;color:#fff;}

/* ── Admin bar ──────────────────────────────────────────── */
.gr-admin-bar{
    display:flex;align-items:center;gap:.4rem;
    padding:.38rem .8rem;
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.06);
    border-bottom:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
    font-size:.65rem;color:var(--ac);letter-spacing:.04em;
    flex-shrink:0;
}
.gr-admin-bar[hidden]{display:none!important;}

/* ── Filtro semana ──────────────────────────────────────── */
.gr-week-filter{
    display:flex;align-items:center;gap:.5rem;
    padding:.4rem .8rem;
    border-bottom:1px solid rgba(255,255,255,.05);
    flex-shrink:0;
}
.gr-week-filter__label{font-size:.62rem;color:rgba(255,255,255,.4);letter-spacing:.06em;flex-shrink:0;}
.gr-week-filter__select{
    background:var(--panel-bg3);border:1px solid rgba(255,255,255,.12);
    color:#fff;font-family:var(--font-hud);font-size:.62rem;
    padding:.18rem .4rem;flex:1;cursor:pointer;
}
.gr-week-filter__select:focus{outline:1px solid var(--ac);}
.gr-refresh-btn{
    background:none;border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.4);padding:.2rem .35rem;
    cursor:pointer;transition:all var(--t);display:flex;align-items:center;
}
.gr-refresh-btn:hover{color:var(--ac);border-color:var(--ac);}

/* ── Lista de regalos ───────────────────────────────────── */
.gr-list{
    flex:1;overflow-y:auto;
    display:flex;flex-direction:column;gap:.6rem;
    padding:.6rem .7rem 1rem;
    scrollbar-width:thin;scrollbar-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3) transparent;
}
.gr-list::-webkit-scrollbar{width:3px;}
.gr-list::-webkit-scrollbar-thumb{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);}

/* ── Loading / empty ────────────────────────────────────── */
.gr-loading,.gr-empty{
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:.6rem;
    padding:2.5rem 1rem;text-align:center;color:rgba(255,255,255,.35);
    font-size:.78rem;
}
.gr-loading[hidden],.gr-empty[hidden]{display:none!important;}
.gr-spinner{
    width:24px;height:24px;
    border:2px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.15);
    border-top-color:var(--ac);border-radius:50%;
    animation:spin .7s linear infinite;
}

/* ── Tarjeta de regalo ──────────────────────────────────── */
.gr-gift{
    background:var(--panel-bg);
    border:1px solid rgba(255,255,255,.08);
    transition:border-color var(--t),box-shadow var(--t);
    overflow:hidden;
    min-height:150px;
}
.gr-gift:hover{border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);}
.gr-gift--approved{
    border-color:var(--ac)!important;
    box-shadow:0 0 12px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.15);
    animation:approvedPulse .6s ease;
}
@keyframes approvedPulse{0%{transform:scale(1)}50%{transform:scale(1.01)}100%{transform:scale(1)}}
.gr-gift__inner{display:flex;gap:.5rem;padding:.45rem .55rem;}

/* Imagen */
.gr-gift__img-wrap{
    width:56px;height:56px;flex-shrink:0;
    background:var(--panel-bg3);position:relative;overflow:hidden;
}
.gr-gift__img{width:100%;height:100%;object-fit:cover;display:block;}
.gr-gift__img-placeholder{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;
}
.gr-gift__type-badge{
    position:absolute;bottom:0;left:0;right:0;
    font-size:.44rem;font-weight:700;letter-spacing:.06em;
    text-align:center;padding:.1rem;
    background:rgba(0,0,0,.75);
}
.gr-gift__type-badge--featured{color:#ffd700;}
.gr-gift__type-badge--free{color:var(--ac);}

/* Info */
.gr-gift__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem;}
.gr-gift__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.35rem;}
.gr-gift__title{
    font-size:.78rem;font-weight:700;color:#fff;
    letter-spacing:.02em;line-height:1.25;
}
.gr-gift__desc{font-size:.68rem;color:rgba(255,255,255,.4);line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}

/* Status badge */
.gr-gift__status{
    font-size:.55rem;font-weight:700;letter-spacing:.07em;
    padding:.1rem .38rem;flex-shrink:0;white-space:nowrap;
    border:1px solid currentColor;opacity:.85;
}
.gr-gift__status--pending {color:#f0ad4e;}
.gr-gift__status--approved{color:#5bc0de;}
.gr-gift__status--active  {color:var(--ac);}
.gr-gift__status--expired {color:rgba(255,255,255,.3);}
.gr-gift__status--rejected{color:#dc3545;}

/* Meta row */
.gr-gift__meta-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.gr-gift__meta{
    display:flex;align-items:center;gap:.15rem;
    font-size:.58rem;color:rgba(255,255,255,.3);
}
.gr-gift__price{font-weight:700;color:rgba(255,255,255,.45);}
.gr-gift__price--featured{color:#ffd700;}

/* Fila Mercado Pago */
.gr-gift__mp-row{
    display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.04);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);
    padding:.22rem .4rem;
    font-size:.58rem;
}
.gr-mp-label{color:rgba(255,255,255,.4);flex-shrink:0;font-weight:700;letter-spacing:.05em;}
.gr-mp-loading{color:rgba(255,255,255,.3);font-style:italic;}
.gr-mp-status--approved   {color:#2dbe61;font-weight:700;}
.gr-mp-status--pending    {color:#f0ad4e;}
.gr-mp-status--in_process {color:#5bc0de;}
.gr-mp-status--rejected   {color:#dc3545;}
.gr-mp-status--cancelled  {color:rgba(255,255,255,.3);}
.gr-mp-status--unknown,
.gr-mp-status--no-payment {color:rgba(255,255,255,.25);}
.gr-mp-status--preference_ok{color:#5bc0de;}
.gr-mp-payer{color:rgba(255,255,255,.35);font-style:italic;}
.gr-mp-amount{color:#ffd700;font-weight:700;}
.gr-mp-refresh-btn{
    background:none;border:none;color:rgba(255,255,255,.3);
    cursor:pointer;padding:.1rem;transition:color var(--t);
    display:flex;align-items:center;
}
.gr-mp-refresh-btn:hover{color:var(--ac);}

/* Botones de acción */
.gr-gift__actions{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin-top:.05rem;}
.gr-btn{
    display:inline-flex;align-items:center;gap:.25rem;
    font-family:var(--font-hud);font-size:.58rem;font-weight:700;
    letter-spacing:.07em;padding:.18rem .5rem;
    border:none;cursor:pointer;transition:all var(--t);
    white-space:nowrap;
}
.gr-btn--approve{background:var(--ac);color:#000;}
.gr-btn--approve:hover{background:color-mix(in srgb,var(--ac) 85%,white);}
.gr-btn--approve:disabled{opacity:.5;cursor:not-allowed;}
.gr-btn--pause{background:none;border:1px solid rgba(240,173,78,.4);color:rgba(240,173,78,.8);}
.gr-btn--pause:hover{background:#f0ad4e;color:#000;border-color:#f0ad4e;}
.gr-btn--reactivate{background:none;border:1px solid rgba(91,192,222,.4);color:rgba(91,192,222,.8);}
.gr-btn--reactivate:hover{background:#5bc0de;color:#000;border-color:#5bc0de;}
.gr-btn--reject{background:none;border:1px solid rgba(220,53,69,.4);color:rgba(220,53,69,.8);}
.gr-btn--reject:hover{background:#dc3545;color:#fff;border-color:#dc3545;}
.gr-btn--delete{background:none;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.35);}
.gr-btn--delete:hover{background:rgba(220,53,69,.15);color:#dc3545;border-color:rgba(220,53,69,.4);}
.gr-btn--edit{background:none;border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);color:var(--ac);}
.gr-btn--feature{background:none;border:1px solid rgba(255,200,0,.4);color:rgba(255,200,0,.85);}
.gr-btn--feature:hover{background:rgba(255,200,0,.15);border-color:#ffc800;color:#ffc800;}
.gr-btn--unfeature{background:rgba(255,200,0,.12);border:1px solid rgba(255,200,0,.7);color:#ffc800;font-weight:700;}
.gr-btn--unfeature:hover{background:#dc3545;border-color:#dc3545;color:#fff;}
.gr-btn--edit:hover{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);}
.gr-btn--active-tag{
    font-size:.56rem;color:var(--ac);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25);padding:.18rem .45rem;
    pointer-events:none;letter-spacing:.07em;
}
.gr-btn--rejected-tag{font-size:.56rem;color:rgba(220,53,69,.6);pointer-events:none;}
.gr-tag{font-size:.56rem;padding:.15rem .45rem;border:1px solid currentColor;letter-spacing:.07em;}
.gr-tag--active{color:var(--ac);}
.gr-tag--rejected{color:#dc3545;}
.gr-tag--expired{color:rgba(255,255,255,.3);}

/* ── Footer ─────────────────────────────────────────────── */
.gr-footer{
    padding:.5rem .8rem;
    border-top:1px solid rgba(255,255,255,.05);
    font-size:.65rem;color:rgba(255,255,255,.3);
    display:flex;align-items:center;gap:.5rem;
    flex-shrink:0;
    letter-spacing:.04em;
}
.gr-msg{padding:.2rem .5rem;font-size:.65rem;}
.gr-msg--success{color:var(--ac);}
.gr-msg--error{color:#dc3545;}
.gr-msg--warning{color:#f0ad4e;}
.gr-msg--info{color:#5bc0de;}

/* ── Modal de confirmación (rechazar / eliminar) ─────────── */
.gr-confirm-modal{
    position:fixed;inset:0;z-index:3000;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.78);backdrop-filter:blur(4px);
}
.gr-confirm-modal[hidden]{display:none!important;}
.gr-confirm-modal__box{
    background:var(--panel-bg3);
    border:1px solid rgba(255,255,255,.12);
    padding:1.5rem;width:min(380px,92vw);
    display:flex;flex-direction:column;gap:.85rem;
    box-shadow:0 12px 40px rgba(0,0,0,.8);
}
.gr-confirm-modal__title{
    font-family:var(--font-hud);font-size:.88rem;font-weight:700;
    letter-spacing:.08em;color:#fff;
}
.gr-confirm-modal__sub{font-size:.75rem;color:rgba(255,255,255,.45);line-height:1.5;}
.gr-confirm-modal__reason{
    background:var(--panel-bg2);border:1px solid rgba(255,255,255,.12);
    color:#fff;font-family:var(--font-hud);font-size:.75rem;
    padding:.45rem .6rem;width:100%;
    transition:border-color var(--t);
}
.gr-confirm-modal__reason:focus{outline:none;border-color:rgba(255,255,255,.3);}
textarea.gr-confirm-modal__reason{resize:vertical;min-height:80px;line-height:1.5;}
select.gr-confirm-modal__reason{cursor:pointer;}
.gr-confirm-modal__actions{display:flex;gap:.6rem;justify-content:flex-end;}

/* Tags de estado inline */
.gr-tag{
    display:inline-flex;align-items:center;
    font-family:var(--font-hud);font-size:.6rem;font-weight:700;
    letter-spacing:.08em;padding:.22rem .5rem;
    pointer-events:none;
}
.gr-tag--active  {color:var(--ac);  border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25);}
.gr-tag--rejected{color:#dc3545;    border:1px solid rgba(220,53,69,.25);}
.gr-tag--expired {color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.1);}

/* Botones de acción — colores */
.gr-btn--approve   {background:var(--ac);color:#000;}
.gr-btn--approve:hover{background:color-mix(in srgb,var(--ac) 80%,white);}
.gr-btn--pause     {background:none;border:1px solid rgba(240,173,78,.5);color:#f0ad4e;}
.gr-btn--pause:hover{background:rgba(240,173,78,.12);}
.gr-btn--reactivate{background:none;border:1px solid rgba(91,192,222,.5);color:#5bc0de;}
.gr-btn--reactivate:hover{background:rgba(91,192,222,.1);}
.gr-btn--reject    {background:none;border:1px solid rgba(230,126,34,.4);color:#e67e22;}
.gr-btn--reject:hover{background:rgba(230,126,34,.12);}
.gr-btn--delete    {background:none;border:1px solid rgba(220,53,69,.4);color:#dc3545;}
.gr-btn--delete:hover{background:rgba(220,53,69,.12);}
.gr-btn:disabled   {opacity:.4;cursor:not-allowed;}

/* Toast inline en footer */
.gr-toast{padding:.2rem .5rem;font-size:.65rem;letter-spacing:.04em;}
.gr-toast--success{color:var(--ac);}
.gr-toast--error  {color:#dc3545;}
.gr-toast--warning{color:#f0ad4e;}
.gr-toast--info   {color:#5bc0de;}

/* ══════════════════════════════════════════════════════════
   TARJETA DIGITAL DE USUARIO — Modal
══════════════════════════════════════════════════════════ */
.ucard-modal{
    position:fixed;inset:0;z-index:3000;
    display:flex;align-items:flex-start;justify-content:center;
    padding-top:52px;
}
.ucard-modal[hidden]{display:none!important;}
.ucard-modal__backdrop{
    position:absolute;inset:0;
    background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
    cursor:pointer;
}
.ucard-modal__box{
    position:relative;z-index:1;
    width:min(460px,96vw);
    max-height:calc(100vh - 68px);
    background:var(--panel-bg2);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);
    border-top:none;
    display:flex;flex-direction:column;
    overflow:hidden;
    animation:ucardSlideDown .28s ease;
}
@keyframes ucardSlideDown{from{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Portada */
.ucard-cover{
    height:130px;flex-shrink:0;
    background:#111 center/cover no-repeat;
    position:relative;
}
.ucard-cover__grad{
    position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(0,0,0,.1),rgba(10,10,10,.85));
}
.ucard-close{
    position:absolute;top:.5rem;right:.5rem;
    background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);
    color:#fff;font-size:.7rem;padding:.2rem .5rem;
    cursor:pointer;transition:all .2s;z-index:2;
}
.ucard-close:hover{background:#dc3545;border-color:#dc3545;}

/* QR del perfil — esquina inferior derecha de la portada */
.ucard-qr{
    position:absolute;bottom:.6rem;right:.6rem;
    z-index:3;
    display:none;  /* JS lo pone display:block cuando tiene contenido */
    background:rgba(0,0,0,.82);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.45);
    padding:3px;
    line-height:0;
    transition:transform .2s,border-color .2s;
}
.ucard-qr:hover{transform:scale(1.08);border-color:var(--ac);}
.ucard-qr__img{
    display:block;
    width:64px;height:64px;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
}

/* Cuerpo */
.ucard-body{
    display:flex;align-items:flex-start;gap:.75rem;
    padding:.75rem .9rem .5rem;
    position:relative;margin-top:-40px;
    overflow:visible;
}
.ucard-avatar{
    width:72px;height:72px;
    border-radius:50%;
    border:3px solid #0a0a0a;
    object-fit:cover;flex-shrink:0;
    background:var(--panel-bg3);
}
.ucard-info{flex:1;min-width:0;padding-top:42px;}
.ucard-name{
    font-family:var(--font-title);font-size:1rem;
    letter-spacing:.08em;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ucard-user{font-size:.68rem;color:rgba(255,255,255,.4);letter-spacing:.04em;}
.ucard-link{
    display:inline-flex;align-items:center;gap:.3rem;
    font-size:.58rem;font-family:var(--font-hud,'Rajdhani',sans-serif);
    font-weight:700;letter-spacing:.06em;
    color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.7);
    text-decoration:none;
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    padding:.1rem .4rem;
    margin-top:.22rem;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    transition:color .15s,border-color .15s,background .15s;
}
.ucard-link:empty{display:none;}
.ucard-link:hover{
    color:var(--ac);
    border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.6);
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.06);
}
.ucard-link::before{content:'⬡';font-size:.5rem;opacity:.6;}
.ucard-bio{font-size:.72rem;color:rgba(255,255,255,.5);line-height:1.4;margin-top:.2rem;}
.ucard-follow-btn{
    flex-shrink:0;
    background:none;border:1px solid var(--ac);
    color:var(--ac);font-family:var(--font-hud);
    font-size:.65rem;font-weight:700;letter-spacing:.1em;
    padding:.28rem .7rem;cursor:pointer;transition:all .2s;
}
.ucard-follow-btn:hover,.ucard-follow-btn.is-following{background:var(--ac);color:#000;}

/* Stats */
.ucard-stats{
    display:flex;border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
    flex-shrink:0;
}

/* Botón seguir + compartir en columna */
.ucard-actions{
    display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;
    flex-shrink:0;margin-top:44px;
}

/* Botón único de compartir */
.ucard-share-wrap{position:relative;}
.ucard-share-toggle{
    background:none;
    border:1px solid rgba(255,255,255,.2);
    color:rgba(255,255,255,.5);
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .2s;
    padding:0;
}
.ucard-share-toggle svg{width:14px;height:14px;}
.ucard-share-toggle:hover{border-color:var(--ac);color:var(--ac);background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);}

/* Dropdown: fila de íconos con position:fixed para escapar overflow:hidden del modal */
.ucard-share-menu{
    position:fixed;
    display:flex;flex-direction:row;gap:.6rem;align-items:center;
    background:var(--panel-bg);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 6px 20px rgba(0,0,0,.7);
    padding:.5rem .6rem;
    z-index:9999;
}
.ucard-share-menu[hidden]{display:none!important;}
.ucard-share-item{
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.06);
    border:1.5px solid rgba(255,255,255,.15);
    border-radius:50%;
    width:40px;height:40px;
    cursor:pointer;padding:0;
    transition:background .15s,border-color .15s,transform .12s;
    flex-shrink:0;
}
.ucard-share-item svg{width:19px;height:19px;flex-shrink:0;}
.ucard-share-item:active{transform:scale(.88);}
.ucard-share-item--wa  {color:#25d366;border-color:rgba(37,211,102,.35);}
.ucard-share-item--wa:hover  {background:rgba(37,211,102,.18);border-color:#25d366;}
.ucard-share-item--fb  {color:#1877f2;border-color:rgba(24,119,242,.35);}
.ucard-share-item--fb:hover  {background:rgba(24,119,242,.18);border-color:#1877f2;}
.ucard-share-item--x   {color:#e7e9ea;border-color:rgba(255,255,255,.2);}
.ucard-share-item--x:hover   {background:rgba(255,255,255,.12);border-color:#e7e9ea;}
.ucard-share-item--copy{color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.9);border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);}
.ucard-share-item--copy:hover{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);border-color:var(--ac);}
.ucard-stat{
    flex:1;text-align:center;padding:.45rem .3rem;
    border-right:1px solid rgba(255,255,255,.06);
}
.ucard-stat:last-child{border-right:none;}
.ucard-stat__val{
    display:block;
    font-family:var(--font-title);font-size:.9rem;
    color:var(--ac);letter-spacing:.06em;
}
.ucard-stat__lbl{
    display:block;font-size:.52rem;
    color:rgba(255,255,255,.3);letter-spacing:.08em;margin-top:.1rem;
}

/* Loading */
.ucard-loading{
    display:flex;justify-content:center;padding:.8rem;
}
.ucard-loading[hidden]{display:none!important;}

/* Posts del usuario */
.ucard-posts-section{
    flex:1;overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2) transparent;
}
.ucard-posts-section[hidden]{display:none!important;}
.ucard-posts-title{
    font-family:var(--font-hud);font-size:.6rem;font-weight:700;
    letter-spacing:.12em;color:rgba(255,255,255,.3);
    padding:.5rem .9rem .25rem;
    border-bottom:1px solid rgba(255,255,255,.04);
}
.ucard-posts-list{display:flex;flex-direction:column;}
.ucard-post-item{
    display:flex;align-items:center;gap:.6rem;
    padding:.4rem .9rem;
    border-bottom:1px solid rgba(255,255,255,.04);
    transition:background .15s;
}
.ucard-post-item:hover{background:rgba(255,255,255,.03);}
.ucard-post-thumb{
    width:44px;height:44px;flex-shrink:0;
    background:var(--panel-bg3);overflow:hidden;
}
.ucard-post-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ucard-post-no-thumb{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;
}
.ucard-post-info{flex:1;min-width:0;}
.ucard-post-title{
    font-size:.75rem;font-weight:700;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    letter-spacing:.02em;
}
.ucard-post-meta{
    display:flex;gap:.5rem;margin-top:.15rem;
    font-size:.62rem;color:rgba(255,255,255,.35);
}
.ucard-post-link{
    color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5);font-size:.75rem;
    text-decoration:none;padding:.2rem;flex-shrink:0;
    transition:color .15s;
}
.ucard-post-link:hover{color:var(--ac);}

/* ══════════════════════════════════════════════════════════
   LAYOUT FEED — columna de autores + stream-wrap
══════════════════════════════════════════════════════════ */
/* El feed-panel__box ahora tiene layout flex-row */
.feed-panel__box{
    flex-direction:row!important;
    overflow:hidden;
}

/* Columna lateral de autores */
.feed-authors-col{
    width:50px;flex-shrink:0;
    background:rgba(255,255,255,.13);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-right:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    display:flex;flex-direction:column;
}
.feed-authors-col__inner{
    flex:1;overflow-y:auto;overflow-x:hidden;
    display:flex;flex-direction:column;align-items:center;
    gap:.35rem;padding:.5rem 0;
    scrollbar-width:none;
}
.feed-authors-col__inner::-webkit-scrollbar{display:none;}
.feed-authors-col__author{
    width:34px;height:34px;flex-shrink:0;
    border-radius:50%;overflow:hidden;
    background:var(--panel-bg3);
    border:2px solid transparent;
    cursor:pointer;padding:0;
    transition:border-color .2s,transform .15s;
    display:flex;align-items:center;justify-content:center;
}
.feed-authors-col__author:hover{
    border-color:var(--ac);
    transform:scale(1.1);
}
.feed-authors-col__author img{
    width:100%;height:100%;object-fit:cover;display:block;
}
.feed-authors-col__initials{
    font-family:var(--font-title);font-size:.6rem;color:var(--ac);
}

/* Wrap derecho: header fijo + stream con scroll propio */
.feed-stream-wrap{
    flex:1;min-width:0;
    display:flex;flex-direction:column;
    overflow:hidden;
    position:relative;
}
.feed-stream-wrap .feed-panel__header{
    position:sticky;top:0;z-index:10;flex-shrink:0;
}
.feed-stream-wrap .feed-stream,
.feed-stream-wrap .feed-grid{
    flex:1;min-height:0;
    overflow-y:auto;
    gap:28px !important;
    padding:.8rem 0 2rem !important;
}

/* ── Autor clickeable en las cards ───────────────────── */
button.fc__author, button.fc__author-tag{
    background:none;border:none;padding:0;
    font-family:inherit;font-size:inherit;font-weight:inherit;
    color:inherit;letter-spacing:inherit;
    cursor:pointer;text-align:left;
    transition:color .15s;
    display:inline;
}
button.fc__author:hover, button.fc__author-tag:hover{ color:var(--ac); }
img.fc-author-link{ cursor:pointer; }



/* ═══════════════════════════════════════════════════════════
   SISTEMA DE MODERACIÓN / VIOLACIONES — IT11
   ═══════════════════════════════════════════════════════════ */

.fc__avatar-wrap{position:relative;display:inline-flex;flex-shrink:0;}
.fc__avatar-warn{
    position:absolute;bottom:-3px;right:-3px;
    font-size:.7rem;line-height:1;
    background:#f0ad4e;border-radius:50%;
    width:16px;height:16px;display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 2px #000;pointer-events:none;
}
.fc__avatar-wrap--warned .fc__avatar{
    border:2px solid #f0ad4e!important;
}

.fc__violation-banner{
    display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
    background:rgba(240,173,78,.08);
    border-top:2px solid #f0ad4e;
    border-bottom:1px solid rgba(240,173,78,.2);
    padding:.55rem .75rem;
    font-size:.72rem;color:rgba(255,255,255,.75);
}
.fc__viol-icon{font-size:1rem;flex-shrink:0;}
.fc__viol-text{flex:1;line-height:1.5;}
.fc__viol-text strong{color:#f0ad4e;font-weight:700;}
.fc__viol-countdown{
    font-family:var(--font-hud);font-weight:700;color:#f0ad4e;
    font-size:.78rem;letter-spacing:.05em;
}
.fc__viol-edit-btn{
    font-family:var(--font-hud);font-size:.62rem;font-weight:700;
    letter-spacing:.08em;padding:.25rem .65rem;
    background:none;border:1px solid #f0ad4e;color:#f0ad4e;
    cursor:pointer;white-space:nowrap;transition:all var(--t);flex-shrink:0;
}
.fc__viol-edit-btn:hover{background:#f0ad4e;color:#000;}



/* ╔══════════════════════════════════════════════════════════════════╗
   ║  GYM-S POWER — ALL FIXES v2.0.0 (UN SOLO BLOQUE LIMPIO)        ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ━━ 0. VARIABLES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root { --vh: 1vh; }

/* ━━ 1. JS VH SETTER — documentado, ejecutado en core.js ━━━━━━━━━━ */
/* window.innerHeight * 0.01 → --vh */

/* ━━ 2. DECORATIVOS LATERALES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hud-vertical-nums {
    overflow: hidden !important;
    scrollbar-width: none !important;
}
.hud-vertical-nums::-webkit-scrollbar { display: none !important; }

@media (max-width: 767px) {
    .hud-slide-num,
    .hud-vertical-nums,
    .hud-section-indicator { display: none !important; }
}

/* ━━ 3. GLOBAL ANTI-OVERFLOW ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gyms-app *, .gyms-app *::before, .gyms-app *::after {
    max-width: 100%;
    min-width: 0;
}
.hud-snav__track, .hud-reel__track, .hud-sponsors__track { max-width: none; }

/* ━━ 4. DESKTOP ≥ 768px ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 768px) {

    .hud-layout {
        display: grid !important;
        grid-template-rows:    auto 1fr auto !important;
        grid-template-columns: 52px 1fr 32px !important;
        grid-template-areas:
            "topbar   topbar   topbar"
            ".        main     ."
            ".        sponsors ." !important;
        width:    100vw  !important;
        height:   100vh  !important;
        height:   100dvh !important;
        overflow: hidden !important;
        padding:  0      !important;
    }

    .hud-topbar {
        grid-area: topbar !important;
        padding: .35rem 0 0 !important;  /* padding lateral controlado por row1/row2 */
    }

    .hud-main-content {
        grid-area:       main          !important;
        display:         flex          !important;
        flex-direction:  column        !important;
        justify-content: flex-start    !important;  /* orbital usa space-between internamente */
        align-items:     center        !important;
        align-self:      stretch       !important;  /* ocupa 100% de la celda grid */
        height:          100%          !important;
        width:           100%          !important;
        max-width:       900px         !important;
        margin:          0 auto        !important;
        padding:         0             !important;
        min-height:      0             !important;
        overflow:        hidden        !important;
    }

    .hud-sponsors {
        grid-area:   sponsors !important;
        flex-shrink: 0        !important;
        width:       100%     !important;
        max-width:   900px    !important;
        margin:      0 auto   !important;
        padding:     .2rem 1rem .35rem !important;
        overflow:    visible  !important;
    }

    .hud-section-indicator {
        position:  fixed !important;
        left:      0     !important;
        top:       50%   !important;
        transform: translateY(-50%) !important;
        z-index:   15    !important;
        overflow:  hidden !important;
        max-width: 56px  !important;
    }
    .hud-vertical-nums {
        position:  fixed  !important;
        right:     .6rem  !important;
        top:       50%    !important;
        transform: translateY(-50%) !important;
        z-index:   15     !important;
    }
}

@media (min-width: 1024px) {
    .hud-layout       { grid-template-columns: 64px 1fr 40px !important; }
    .hud-main-content { max-width: 940px  !important; }
    .hud-sponsors     { max-width: 940px  !important; }
    .hud-topbar       { padding: .35rem 0 0 !important; }
}
@media (min-width: 1440px) {
    .hud-layout       { grid-template-columns: 72px 1fr 48px !important; }
    .hud-main-content { max-width: 1000px !important; }
    .hud-sponsors     { max-width: 1000px !important; }
}

/* ━━ 5. HIJOS DEL MAIN-CONTENT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* REEL — espacio inferior grande para dar protagonismo al carrusel */
.hud-layout .hud-main-content .hud-reel {
    margin-bottom: 0   !important;  /* space-between del orbital gestiona */
    flex-shrink: 0     !important;
    flex-grow:   0     !important;
    width:       100%  !important;
    margin-top:  0     !important;
}
@media (max-height: 800px) and (min-width: 768px) {
    .hud-layout .hud-main-content .hud-reel { margin-bottom: 0 !important; }
}
@media (max-height: 650px) and (min-width: 768px) {
    .hud-layout .hud-main-content .hud-reel { margin-bottom: 0 !important; }
}

/* CENTER — tamaño natural, no crece */
.hud-layout .hud-main-content .hud-center {
    flex-shrink: 0  !important;
    flex-grow:   0  !important;
    width:       100% !important;
    margin:      0  !important;
    overflow:    visible !important;
}

/* ACTIONS — separación respecto al panel */
.hud-layout .hud-main-content .hud-actions {
    flex-shrink: 0          !important;
    flex-grow:   0          !important;
    width:       100%       !important;
    margin-top:  0          !important;  /* space-between gestiona */
    margin-bottom: 0        !important;
    margin-left:   0        !important;
    margin-right:  0        !important;
}
/* Pantallas de altura media (ej: 1280×720) */
@media (max-height: 800px) and (min-width: 768px) {
    .hud-layout .hud-main-content .hud-actions {
        margin-top: 0 !important;
    }
}
@media (max-height: 650px) and (min-width: 768px) {
    .hud-layout .hud-main-content .hud-actions {
        margin-top: 0 !important;
    }
}
/* Mobile: margen reducido — el JS ajusta dinámicamente según tamaño de fuente */
@media (max-width: 767px) {
    .hud-layout .hud-main-content .hud-actions {
        margin-top: 0 !important;
    }
}
@media (max-width: 480px) {
    .hud-layout .hud-main-content .hud-actions {
        margin-top: 0 !important;
    }
}
@media (max-width: 390px) {
    .hud-layout .hud-main-content .hud-actions {
        margin-top: 0 !important;
    }
}

/* SPONSORS al fondo — margin-top:auto empuja sponsors al fondo en mobile */
.hud-sponsors { margin-top: auto !important; }

/* ━━ 6. MOBILE < 768px ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {

    html:has(body.gyms-app) {
        height:   100dvh !important;
        height:   calc(var(--vh) * 100) !important;
        overflow: hidden !important;
    }
    body.gyms-app {
        position: fixed   !important;
        width:    100%    !important;
        height:   100dvh  !important;
        height:   calc(var(--vh) * 100) !important;
        overflow: hidden  !important;
    }

    .hud-layout {
        display:        flex    !important;
        flex-direction: column  !important;
        width:          100%    !important;
        height:         100dvh  !important;
        height:         calc(var(--vh) * 100) !important;
        overflow-x:     hidden  !important;
        overflow-y:     hidden  !important;
        padding:        0 !important;
    }

    .hud-topbar { flex-shrink: 0 !important; }

    .hud-main-content {
        flex:            1 1 auto !important;
        height:          100%     !important;
        display:         flex     !important;
        flex-direction:  column   !important;
        justify-content: flex-start !important;
        align-items:     center   !important;
        width:           100%     !important;
        min-height:      0        !important;
        overflow-x:      hidden   !important;
        overflow-y:      hidden   !important;
        padding:         0        !important;
    }

    /* REEL mobile: space-between gestiona el espaciado */
    .hud-layout .hud-main-content .hud-reel {
    margin-bottom: 0   !important;
    flex-shrink: 0     !important;
    flex-grow:   0     !important;
    width:       100%  !important;
    margin-top:  0     !important;
}

    /* CENTER mobile */
    .hud-layout .hud-main-content .hud-center {
        flex-shrink: 0 !important;
        flex-grow:   0 !important;
        overflow:    hidden !important;
    }

    /* ACTIONS mobile: hijo directo de hud-main-content — siempre visible */
    .hud-layout .hud-main-content > .hud-actions {
        flex-shrink: 0          !important;
        flex-grow:   0          !important;
        width:       100%       !important;
        margin-top:  6px        !important;
        margin-bottom: 0        !important;
    }

    /* SPONSORS mobile: pegado al fondo con padding para la barra browser */
    .hud-sponsors {
        flex-shrink:    0        !important;
        overflow:       visible  !important;
        padding-top:    .15rem   !important;
        padding-bottom: max(
            calc(env(safe-area-inset-bottom, 0px) + 120px),
            120px
        )                        !important;
    }

    .hud-sponsors__track {
        overflow-x:  auto    !important;
        overflow-y:  visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 0    !important;
    }
    .hud-sponsors__track::-webkit-scrollbar { display: none !important; }

    /* Scrollables horizontales */
    .hud-reel__track, .hud-snav__track {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
    }
    /* track del nav inline en mobile: ancho natural, no flex:1 */
    .hud-sections-nav--inline .hud-snav__track {
        flex: 0 0 auto !important;
    }
    .hud-sections-nav {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .hud-topbar__row2 {
        justify-content: flex-start !important;
    }
    .hud-reel__track::-webkit-scrollbar,
    .hud-snav__track::-webkit-scrollbar { display: none !important; }

    /* Topbar compacta */
    .hud-logo__name    { font-size: .75rem !important; }
    .hud-social        { display:   none   !important; }
    .hud-snav__arrow   { display:   none   !important; }
    .hud-snav__btn     { font-size: .54rem !important; padding: .14rem .35rem !important; flex-shrink: 0 !important; }
    .hud-panel         { gap: .2rem !important; }
    .hud-countdown-card{ min-width: 140px !important; }
    .hud-countdown-card__time { font-size: 1.4rem !important; }
}

/* Mobile muy pequeño */
@media (max-width: 390px) {
    .hud-layout           { padding: 0 !important; }
    .hud-logo__name       { font-size: .65rem !important; }
    .hud-topbar__cta-publish { display: none !important; }
    #hud-user-label, .hud-user-chevron { display: none !important; }
    .hud-topbar__cta-login { padding: .2rem .3rem !important; min-width: 28px !important; }
    .hud-layout .hud-main-content .hud-reel {
    margin-bottom: 0 !important;
    flex-shrink: 0     !important;
    flex-grow:   0     !important;
    width:       100%  !important;
    margin-top:  0     !important;
}
}

/* Landscape bajo */
@media (max-height: 450px) and (orientation: landscape) {
    .hud-reel, .hud-sponsors, .hud-topbar__row2 { display: none !important; }
}

/* iOS safe area */
@supports (padding: max(0px)) {
    @media (max-width: 1023px) {
        .hud-sponsors {
            padding-bottom: max(
                calc(env(safe-area-inset-bottom) + 120px),
                120px
            ) !important;
        }
        .hud-layout {
            padding-left:  0 !important;
            padding-right: 0 !important;
        }
    }
}

/* ━━ 7. SEC-TOP-POST eliminado v1.4.5 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sec-top-post {
    flex:            1 1 auto !important;
    display:         flex     !important;
    justify-content: center   !important;
    align-items:     center   !important;
    min-width:       0        !important;
    overflow:        hidden   !important;
    margin-left:     auto     !important;
    margin-right:    auto     !important;
    max-width:       340px    !important;
}
@media (min-width: 1024px) {
    #sec-top-post { max-width: 440px !important; }
}
@media (max-width: 767px) {
    #sec-top-post {
        max-width: 180px !important;
    }
    #sec-top-post .sec-top__more  { display: none   !important; }
    #sec-top-post .sec-top__title { font-size: .48rem !important; }
    #sec-top-post .sec-top__label { font-size: .35rem !important; }
    #sec-top-post .sec-top__thumb,
    #sec-top-post .sec-top__thumb--empty {
        width: 26px !important; height: 26px !important;
    }
}
@media (max-width: 360px) {
    #sec-top-post { display: none !important; }
}


/* ── Logo imagen ── */
.hud-logo--img {
    border: none !important;
    background: none !important;
    padding: .1rem 0 !important;
    box-shadow: none !important;
}
.hud-logo__img {
    height: 32px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}
@media (max-width: 767px) {
    .hud-logo__img {
        height: 26px;
        max-width: 110px;
    }
}


/* ── Botones cámara/galería en formulario de regalos ── */
.regalar-img-upload__btns {
    display: flex;
    gap: .5rem;
    padding: .4rem 0;
}
.regalar-img-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    color: rgba(255,255,255,.7);
    font-family: inherit;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .55rem .5rem;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.regalar-img-btn:hover {
    border-color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.7);
    color: var(--ac2, var(--ac));
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.06);
}
.regalar-img-btn__icon {
    font-size: 1.1rem;
    line-height: 1;
}


/* ══════════════════════════════════════════════════════════════════
   TÉRMINOS Y CONDICIONES — Botón flotante + Modal
   v1.4.4
══════════════════════════════════════════════════════════════════ */

/* ── Botón flotante ─────────────────────────────────────────────── */
.gyms-terms-btn {
    position: fixed;
    bottom: 14px;
    left: 14px;
    z-index: 2100;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(10,10,10,.82);
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);
    color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.55);
    font-family: var(--font-hud, 'Rajdhani', sans-serif);
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .1em;
    padding: .28rem .55rem;
    cursor: pointer;
    border-radius: 2px;
    backdrop-filter: blur(6px);
    transition: color .2s, border-color .2s, background .2s;
    white-space: nowrap;
}
.gyms-terms-btn:hover {
    color: var(--ac, #aaff00);
    border-color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.45);
    background: rgba(10,10,10,.95);
}
.gyms-terms-btn svg { opacity: .55; flex-shrink: 0; }
/* Ocultar botón de términos cuando el juego está activo */
body.game-open .gyms-terms-btn { display:none !important; }

.gyms-terms-btn:hover svg { opacity: 1; }

/* ── Overlay ────────────────────────────────────────────────────── */
.gyms-terms-overlay {
    position: fixed;
    inset: 0;
    z-index: 99000;
    background: rgba(0,0,0,.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
    animation: termsOverlayIn .2s ease;
}
.gyms-terms-overlay[hidden] { display: none !important; }
@keyframes termsOverlayIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Caja del modal ─────────────────────────────────────────────── */
.gyms-terms-box {
    position: relative;
    width: 100%;
    max-width: 760px;
    max-height: 88vh;
    background: #0d0d0d;
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.22);
    box-shadow: 0 24px 64px rgba(0,0,0,.85), 0 0 0 1px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.06);
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    animation: termsBoxIn .22s ease;
    overflow: hidden;
}
@keyframes termsBoxIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── Header ─────────────────────────────────────────────────────── */
.gyms-terms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
    flex-shrink: 0;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.03);
}
.gyms-terms-header__left {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--ac, #aaff00);
}
.gyms-terms-header__title {
    font-family: var(--font-hud, 'Rajdhani', sans-serif);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ac, #aaff00);
    margin: 0;
}
.gyms-terms-close {
    background: none;
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.45);
    width: 26px;
    height: 26px;
    border-radius: 2px;
    cursor: pointer;
    font-size: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, color .2s, border-color .2s;
}
.gyms-terms-close:hover { background: #dc3545; color: #fff; border-color: #dc3545; }

/* ── Body (scroll) ──────────────────────────────────────────────── */
.gyms-terms-body {
    overflow-y: auto;
    flex: 1;
    padding: 1.1rem 1.25rem 1rem;
    color: rgba(255,255,255,.65);
    font-size: .72rem;
    line-height: 1.7;
    scroll-behavior: smooth;
}
.gyms-terms-body::-webkit-scrollbar { width: 4px; }
.gyms-terms-body::-webkit-scrollbar-track { background: transparent; }
.gyms-terms-body::-webkit-scrollbar-thumb { background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25); border-radius: 2px; }

/* ── Elementos internos ──────────────────────────────────────────── */
.gyms-terms-intro {
    color: rgba(255,255,255,.75);
    margin-bottom: 1rem;
    font-size: .73rem;
}
.gyms-terms-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .58rem;
    letter-spacing: .1em;
    color: var(--ac, #aaff00);
    font-family: var(--font-hud, 'Rajdhani', sans-serif);
    font-weight: 700;
    border-left: 2px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.4);
    padding-left: .65rem;
    margin-bottom: 1.2rem;
    opacity: .7;
}
.gyms-terms-section {
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.gyms-terms-section:last-child { border-bottom: none; }
.gyms-terms-section h3 {
    font-family: var(--font-hud, 'Rajdhani', sans-serif);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ac, #aaff00);
    margin: 0 0 .65rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
}
.gyms-terms-section p {
    margin: 0 0 .6rem;
}
.gyms-terms-section ul {
    margin: .3rem 0 .6rem 1rem;
    padding: 0;
}
.gyms-terms-section ul li {
    margin-bottom: .3rem;
}
.gyms-terms-quote {
    border-left: 3px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);
    margin: .6rem 0;
    padding: .5rem .75rem;
    color: rgba(255,255,255,.5);
    font-style: italic;
    font-size: .68rem;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.03);
}
.gyms-terms-closing {
    color: rgba(255,255,255,.5);
    font-size: .68rem;
    font-style: italic;
    margin-top: .75rem !important;
}

/* ── Footer del modal ───────────────────────────────────────────── */
.gyms-terms-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem 1rem;
    border-top: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
    flex-shrink: 0;
    background: rgba(0,0,0,.4);
    flex-wrap: wrap;
}
.gyms-terms-footer__brand {
    font-family: var(--font-hud, 'Rajdhani', sans-serif);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255,255,255,.25);
}
.gyms-terms-footer__accept {
    background: var(--ac, #aaff00);
    color: #000;
    border: none;
    font-family: var(--font-hud, 'Rajdhani', sans-serif);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    padding: .4rem 1.1rem;
    cursor: pointer;
    border-radius: 2px;
    transition: filter .2s;
}
.gyms-terms-footer__accept:hover { filter: brightness(1.1); }

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .gyms-terms-box { max-height: 94vh; }
    .gyms-terms-body { padding: .75rem .85rem; font-size: .68rem; }
    .gyms-terms-header__title { font-size: .7rem; }
    .gyms-terms-footer { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .gyms-terms-footer__accept { width: 100%; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════════
   NAV SECCIONES INLINE EN ROW1 — v1.4.5
   Ocupa el espacio disponible entre los iconos sociales y los
   botones de la derecha, con scroll horizontal táctil libre.
═══════════════════════════════════════════════════════════════ */
.hud-sections-nav--inline {
    /* flex:1 — ocupa TODO el espacio entre .hud-topbar__left y .hud-topbar__right */
    flex: 1 1 0 !important;
    min-width: 0 !important;
    /* Centra los botones del menú en ese espacio */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
/* Track: ancho natural de sus botones (no 100% — así se centra visualmente) */
.hud-sections-nav--inline .hud-snav__track {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
}
.hud-sections-nav--inline .hud-snav__track::-webkit-scrollbar { display: none; }

/* Ocultar flechas JS en inline — scroll táctil nativo */
.hud-sections-nav--inline .hud-snav__arrow { display: none !important; }

/* En pantallas muy pequeñas se oculta para no colapsar el row */
@media (max-width: 420px) {
    .hud-sections-nav--inline { display: none; }
}

/* ── sec-top-post: ocultar completamente (reemplazado por nav) ─── */
#sec-top-post,
.sec-top-post {
    display: none !important;
}

/* ── Row2 vacía: ocultar el borde/padding que quedaría ─────────── */
.hud-topbar__row2:empty,
.hud-topbar__row2 > *:first-child:last-child:not([id]) {
    display: none !important;
}

/* ── pex-card text-scroll en mobile (menos alto) ───────────────── */
@media (max-width: 480px) {
    .pex-card__text-scroll { max-height: 180px; }
    .pex-modal__box { height: 100svh; max-height: 100svh; border-radius: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   TOPBAR FULL-WIDTH — override definitivo (última regla, gana todo)
   Estrategia: topbar y row1 con width explícito que ignora el padding
   del layout padre, usando margin negativo exacto en cada breakpoint.
═══════════════════════════════════════════════════════════════════ */

/* ── Base (mobile-first, padding layout = 1.5rem) ─────────────── */
.hud-topbar {
    width:       calc(100vw)         !important;
    margin-left: calc(-1.5rem)       !important;
    padding-left:  0                 !important;
    padding-right: 0                 !important;
    box-sizing:  border-box          !important;
}
.hud-topbar__row1 {
    display:      flex               !important;
    flex-direction: row              !important;
    align-items:  center             !important;
    width:        100%               !important;
    box-sizing:   border-box         !important;
    padding-left:  0                 !important;
    padding-right: 0                 !important;
}

/* ── Mobile / Desktop — padding cero en todos los breakpoints ─── */
@media (max-width: 767px) {
    .hud-topbar {
        margin-left: 0               !important;
    }
    .hud-topbar__row1 {
        padding-left:  0             !important;
        padding-right: 0             !important;
    }
}
@media (max-width: 600px) {
    .hud-topbar__row1 {
        padding-left:  0             !important;
        padding-right: 0             !important;
    }
}
@media (max-width: 400px) {
    .hud-topbar__row1 {
        padding-left:  0             !important;
        padding-right: 0             !important;
    }
}

@media (min-width: 768px) {
    .hud-topbar {
        width:        100%           !important;
        margin-left:  0              !important;
    }
    .hud-topbar__row1 {
        padding-left:  0             !important;
        padding-right: 0             !important;
    }
}
@media (min-width: 1024px) {
    .hud-topbar__row1 {
        padding-left:  0             !important;
        padding-right: 0             !important;
    }
}
@media (min-width: 1440px) {
    .hud-topbar__row1 {
        padding-left:  0             !important;
        padding-right: 0             !important;
    }
}

/* ── Flex items del row1 ──────────────────────────────────────── */
.hud-topbar__left {
    flex:          0 0 auto          !important;
    display:       flex              !important;
    align-items:   center            !important;
    gap:           .45rem            !important;
    min-width:     0                 !important;
}
.hud-sections-nav--inline {
    flex:          1 1 0px           !important;
    min-width:     0                 !important;
    display:       flex              !important;
    align-items:   center            !important;
    justify-content: center          !important;
    overflow:      hidden            !important;
}
.hud-sections-nav--inline .hud-snav__track {
    flex:          0 0 auto          !important;
    max-width:     100%              !important;
    overflow-x:    auto              !important;
    overflow-y:    hidden            !important;
    scrollbar-width: none            !important;
    display:       flex              !important;
    align-items:   center            !important;
    flex-wrap:     nowrap            !important;
}
.hud-topbar__right {
    flex:          0 0 auto          !important;
    display:       flex              !important;
    align-items:   center            !important;
    gap:           .4rem             !important;
}

/* ── Espacios laterales del nav en el header ────────────────────── */
.hud-sections-nav--inline {
    padding-left:  2rem  !important;
    padding-right: 2rem  !important;
}
@media (max-width: 1024px) {
    .hud-sections-nav--inline {
        padding-left:  1.2rem !important;
        padding-right: 1.2rem !important;
    }
}
@media (max-width: 767px) {
    .hud-sections-nav--inline {
        padding-left:  .6rem !important;
        padding-right: .6rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FIX DEFINITIVO — el selector universal max-width:100% bloquea al
   topbar. Se sobreescribe explícitamente con none en los elementos
   que necesitan escapar ese límite.
═══════════════════════════════════════════════════════════════════ */
.gyms-app .hud-topbar,
.gyms-app .hud-topbar__row1 {
    max-width: none !important;
}

/* Empujar botones al borde derecho */
.hud-topbar__right {
    margin-left: auto !important;
}

/* Nav y right sin padding — elementos pegados a los bordes */
.hud-sections-nav--inline {
    padding-left:  0 !important;
    padding-right: 0 !important;
}
.hud-topbar__right {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* Centrar el track del menú dentro del espacio flex:1 */
.hud-sections-nav--inline {
    justify-content: center !important;
    align-items: center     !important;
}
.hud-sections-nav--inline .hud-snav__track {
    margin-left:  auto !important;
    margin-right: auto !important;
}

/* ══ LAYOUT DEFINITIVO DEL HEADER — CSS GRID 3 ZONAS ══════════════
   grid-template-columns: auto 1fr auto
   col1=left(logo+social)  col2=nav(centrado)  col3=right(botones)
   Matemáticamente imposible que el centro no quede centrado.
═══════════════════════════════════════════════════════════════════ */
.hud-topbar__row1 {
    display:               grid             !important;
    grid-template-columns: auto 1fr auto    !important;
    align-items:           center           !important;
    gap:                   0                !important;
    padding:               0                !important;
    width:                 100%             !important;
    box-sizing:            border-box       !important;
}
.hud-topbar__left {
    grid-column:  1 !important;
    grid-row:     1 !important;
    display:      flex !important;
    align-items:  center !important;
    gap:          .45rem !important;
    flex:         none !important;
    min-width:    0 !important;
    margin:       0 !important;
}
.hud-sections-nav--inline {
    grid-column:     2           !important;
    grid-row:        1           !important;
    display:         flex        !important;
    justify-content: center      !important;
    align-items:     center      !important;
    overflow:        hidden      !important;
    min-width:       0           !important;
    width:           100%        !important;
    margin:          0           !important;
    padding:         0           !important;
    flex:            none        !important; /* grid maneja el ancho */
}
.hud-sections-nav--inline .hud-snav__track {
    flex:          0 0 auto  !important;
    margin:        0 auto    !important; /* centra dentro del 1fr */
    overflow-x:    auto      !important;
    scrollbar-width: none    !important;
    display:       flex      !important;
    align-items:   center    !important;
    flex-wrap:     nowrap    !important;
    max-width:     100%      !important;
}
.hud-topbar__right {
    grid-column:  3 !important;
    grid-row:     1 !important;
    display:      flex !important;
    align-items:  center !important;
    gap:          .4rem !important;
    flex:         none !important;
    margin:       0 !important;
    padding:      0 !important;
    min-width:    0 !important;
}

/* ── hud-topbar__center: columna 2 del grid, centra su contenido ── */
.hud-topbar__center {
    grid-column:     2           !important;
    grid-row:        1           !important;
    display:         flex        !important;
    align-items:     center      !important;
    justify-content: center      !important;
    width:           100%        !important;
    height:          100%        !important;
    overflow:        hidden      !important;
    min-width:       0           !important;
}
/* El nav ocupa todo el ancho del center y centra internamente */
.hud-topbar__center .hud-sections-nav--inline {
    grid-column:     auto        !important;  /* reset — no es grid child */
    width:           100%        !important;
    display:         flex        !important;
    justify-content: center      !important;
    align-items:     center      !important;
    overflow:        hidden      !important;
}
/* Track: ancho natural de sus botones, centrado por margin auto */
.hud-topbar__center .hud-sections-nav--inline .hud-snav__track {
    flex:          0 0 auto      !important;
    margin-left:   auto          !important;
    margin-right:  auto          !important;
    overflow-x:    auto          !important;
    scrollbar-width: none        !important;
    display:       flex          !important;
    align-items:   center        !important;
    flex-wrap:     nowrap        !important;
    max-width:     100%          !important;
}


/* ━━ FONT SIZE BODY CLASSES — aplicadas por personalize.js ━━━━━━━━━ */
/* Texto mediano en mobile: comprimir un poco el panel central */
@media (max-width: 767px) {
    body.gyms-font-md .hud-panel {
        transform: scale(0.88) !important;
        transform-origin: center top !important;
        margin-bottom: -8% !important;
    }
    body.gyms-font-md .hud-countdown-card__time {
        font-size: 1.2rem !important;
    }
    body.gyms-font-md .hud-panel-card__value {
        font-size: 0.9rem !important;
    }
    body.gyms-font-md .hud-sponsors {
        display: none !important;
    }
}

/* Texto máximo en mobile: comprimir mucho más el panel y ocultar patrocinadores */
@media (max-width: 767px) {
    body.gyms-font-lg .hud-panel {
        transform: scale(0.72) !important;
        transform-origin: center top !important;
        margin-bottom: -18% !important;
    }
    body.gyms-font-lg .hud-countdown-card__time {
        font-size: 1.0rem !important;
    }
    body.gyms-font-lg .hud-panel-card__value {
        font-size: 0.75rem !important;
    }
    body.gyms-font-lg .hud-sponsors {
        display: none !important;
    }
    body.gyms-font-lg .hud-divider {
        display: none !important;
    }
    body.gyms-font-lg .hud-reel__item {
        width: 38px !important;
        height: 38px !important;
    }
    body.gyms-font-lg .hud-reel__item.is-active {
        width: 48px !important;
        height: 48px !important;
    }
    body.gyms-font-lg .hud-layout .hud-main-content .hud-reel {
    margin-bottom: 0 !important;
    flex-shrink: 0     !important;
    flex-grow:   0     !important;
    width:       100%  !important;
    margin-top:  0     !important;
}
}


/* ━━ GLASS EFFECT — activado por personalize.js con body.gyms-glass ━━━━━━ */
body.gyms-glass .feed-panel__box,
body.gyms-glass .gifts-panel__box,
body.gyms-glass .post-modal__box,
body.gyms-glass .pex-modal__box,
body.gyms-glass .auth-modal__box,
body.gyms-glass .publish-modal__box,
body.gyms-glass .regalar-modal__box,
body.gyms-glass .gr-panel__box,
body.gyms-glass .pp-panel__box,
body.gyms-glass .hud-user-menu,
body.gyms-glass .hud-panel-card,
body.gyms-glass .hud-countdown-card,
body.gyms-glass .hud-gift-card,
body.gyms-glass .fc,
body.gyms-glass .gift-card__inner {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(18px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

body.gyms-glass .feed-panel__box,
body.gyms-glass .gifts-panel__box,
body.gyms-glass .auth-modal__box,
body.gyms-glass .publish-modal__box,
body.gyms-glass .gr-panel__box,
body.gyms-glass .pp-panel__box {
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(24px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
}

/* Feed panel header y stream también */
body.gyms-glass .feed-panel__header,
body.gyms-glass .feed-panel__stream,
body.gyms-glass .feed-grid,
body.gyms-glass .gifts-panel__header,
body.gyms-glass .gifts-panel__body {
    background: transparent !important;
}

/* Cards del feed con glass */
body.gyms-glass .fc {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.gyms-glass .fc:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Topbar con glass */
body.gyms-glass .hud-topbar {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

/* Texto más legible en glass */
body.gyms-glass .hud-panel-card__value,
body.gyms-glass .hud-countdown-card__time,
body.gyms-glass .fc__title,
body.gyms-glass .fc__author-name {
    text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
}

/* Botones de acción con glass */
body.gyms-glass .hud-actions__group {
    background: rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}


/* ━━ ACTIONS v1.4.25 — dos filas limpias ━━━━━━━━━━━━━━━━━━━━━━━━ */
.hud-actions__row-primary,
.hud-actions__row-secondary {
    display: flex;
    width: 100%;
    gap: 0;
}
.hud-actions__row-primary {
    margin-bottom: 0;
}
.hud-actions__row-secondary {
    border-top: 1px solid rgba(255,255,255,.06);
}
.hud-actions__row-primary .hud-btn {
    flex: 1;
    padding: .52rem 1rem;
    font-size: .72rem;
    letter-spacing: .12em;
}
.hud-actions__row-secondary .hud-btn {
    flex: 1;
    padding: .32rem .6rem;
    font-size: .58rem;
    letter-spacing: .12em;
    color: var(--ac) !important;
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.45) !important;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05) !important;
    opacity: 1;
}
.hud-actions__row-secondary .hud-btn:hover {
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.14) !important;
    border-color: var(--ac) !important;
}
@media (max-width: 767px) {
    .hud-actions__row-primary .hud-btn { font-size: .66rem; padding: .46rem .8rem; }
    .hud-actions__row-secondary .hud-btn { font-size: .54rem; padding: .28rem .5rem; }
}


/* ━━ FEED CARD v1.4.27 — nuevo layout ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Acciones flotantes sobre imagen */
.fc__img-actions {
    position: absolute;
    bottom: .45rem;
    right: .45rem;
    display: flex;
    gap: .3rem;
    z-index: 5;
}
.fc__img-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.55);
    color: rgba(255,255,255,.75);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .15s, color .15s;
}
.fc__img-btn:hover {
    background: var(--ac);
    color: #000;
}

/* Ícono libro en el título */
.fc__book-icon {
    flex-shrink: 0;
    opacity: .45;
    color: var(--ac);
    margin-top: 1px;
}
.fc__title-row {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-bottom: .4rem;
}
.fc__title {
    font-family: var(--font-hud);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text);
    line-height: 1.35;
}

/* Separador visual entre posts — línea sutil del acento */
.fc:not(.fc--featured) {
    border-bottom: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12) !important;
}

/* ── Play/Pause en lista vertical de secciones ─────────── */
.hud-section-indicator__playpause {
    background: none;
    border: none;
    border-left: 2px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25);
    padding: .3rem .5rem .3rem .4rem;
    cursor: pointer;
    color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: .3rem;
    transition: color .2s, border-color .2s;
    width: 100%;
}
.hud-section-indicator__playpause:hover {
    color: var(--ac);
    border-color: var(--ac);
}
.hud-section-indicator__playpause svg {
    flex-shrink: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT ORBITAL v1.4.28
   El logo es el núcleo. Todo emana de él con líneas conectoras.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Contenedor orbital — ocupa todo el espacio disponible */
.hud-orbital {
    position: relative;
    width: 100%;
    flex: 1 1 auto;        /* crece para llenar hud-main-content */
    height: 100%;          /* garantiza altura completa */
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;  /* fila1=logo arriba, fila2=reel centro, fila3=iconos abajo */
    padding: 0;
}

/* SVG líneas — ocultas */
.hud-orbital__lines { display: none; }

/* REEL — corona superior */
.hud-orbital__reel {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 700px;
    margin-bottom: .6rem;
}
.hud-orbital__reel .hud-reel__track-wrap {
    overflow: hidden;
}
.hud-orbital__reel .hud-reel__track {
    display: flex;
    gap: .35rem;
    align-items: flex-end;
    justify-content: center;
    padding: .2rem .5rem;
}
/* Sin flechas en el reel orbital */
.hud-orbital__reel .hud-reel__arrow { display: none; }

/* LOGO CENTRAL */
.hud-orbital__logo {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0%;          /* crece para llenar todo el espacio entre reel e iconos */
    min-height: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.hud-orbital__logo-img {
    width: 75%;
    max-width: min(600px, 80vw);
    max-height: 100%;     /* No supera el alto del contenedor flex */
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 28px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25));
    transition: filter .4s;
}
.hud-orbital__logo-img:hover {
    filter: drop-shadow(0 0 28px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35));
}
.hud-orbital__logo-text {
    font-family: var(--font-title);
    font-size: 2.8rem;
    letter-spacing: .08em;
    color: var(--text);
    text-transform: uppercase;
}

/* BOTONES IZQUIERDA Y DERECHA */
.hud-orbital__left,
.hud-orbital__right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.hud-orbital__left  { left: 0; align-items: flex-start; }
.hud-orbital__right { right: 0; align-items: flex-end; }

.hud-orb-btn {
    font-size: .62rem !important;
    padding: .35rem .65rem !important;
    white-space: nowrap;
}

/* COUNTDOWN — debajo del logo */
.hud-orbital__countdown {
    position: relative;
    z-index: 8;
    text-align: center;
    margin-top: .25rem;
    width: 100%;
    max-width: 260px;
    background: transparent;
    border: none;
    padding: .2rem .4rem .18rem;
}

/* STATS — esquinas inferiores */
.hud-orbital__stat-left,
.hud-orbital__stat-right {
    position: absolute;
    bottom: 0;
    z-index: 8;
    max-width: 120px;
}
.hud-orbital__stat-left  { left: 0; }
.hud-orbital__stat-right { right: 0; text-align: right; }
.hud-orbital__stat-left  .hud-panel-card__label,
.hud-orbital__stat-right .hud-panel-card__label { font-size: .46rem; }
.hud-orbital__stat-left  .hud-panel-card__value,
.hud-orbital__stat-right .hud-panel-card__value {
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile: ajustes del layout orbital */
@media (max-width: 767px) {
    .hud-orbital__logo-img { max-width: 95vw; }
    .hud-orbital__left,
    .hud-orbital__right { position: static; transform: none; }
    .hud-orbital { gap: .4rem; }

    /* En mobile: botones en fila debajo del logo */
    .hud-orbital__left,
    .hud-orbital__right {
        display: none; /* se muestran via hud-actions abajo */
    }
    .hud-orbital__stat-left,
    .hud-orbital__stat-right { display: none; }
    .hud-orbital__countdown { max-width: 100%; }
}
@media (min-width: 768px) {
    .hud-orbital { padding: 0 140px; }   /* solo padding lateral en desktop */
}

/* Sponsors siguen al fondo */
.hud-layout .hud-main-content .hud-actions {
    display: none; /* en desktop los botones están en el orbital */
}
@media (max-width: 767px) {
    .hud-layout .hud-main-content .hud-actions {
        display: flex !important; /* en mobile vuelven los botones */
    }
}


/* Botones ghost del orbital — acento visible */
.hud-orbital__left .hud-btn--ghost,
.hud-orbital__right .hud-btn--ghost {
    color: var(--ac) !important;
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.45) !important;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05) !important;
}
.hud-orbital__left .hud-btn--ghost:hover,
.hud-orbital__right .hud-btn--ghost:hover {
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.14) !important;
    border-color: var(--ac) !important;
}
/* Reel orbital usa el mismo estilo que el reel original */
.hud-orbital__reel .hud-reel__arrow { display: flex; }


/* Countdown orbital — más pequeño y sutil */
.hud-orbital__countdown .hud-countdown-card__label {
    font-size: .44rem !important;
    opacity: .5 !important;
    letter-spacing: .18em !important;
}
.hud-orbital__countdown .hud-countdown-card__time {
    font-size: 1.1rem !important;
    letter-spacing: .14em !important;
}
.hud-orbital__countdown .hud-week-bar {
    margin-top: .25rem !important;
    height: 1px !important;
    opacity: .4 !important;
}

/* old stat styles removed */


/* ── Barra única orbital v1.4.33 ──────────────────────────────── */
.hud-orbital__bar {
    position: relative;
    z-index: 8;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    margin-top: .3rem;
    padding: .3rem .5rem;
    background: transparent;          /* Sin fondo */
    backdrop-filter: none;            /* Sin blur */
    -webkit-backdrop-filter: none;
    border-top: none;                 /* Sin bordes */
    border-bottom: none;
}

/* Stat inline en la barra */
.hud-orbital__stat-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: .25rem .4rem;
    background: rgba(0,0,0,.3);
    border-left: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25);
    min-width: 90px;
    max-width: 120px;
    position: relative;
}
.hud-orbital__stat-bar--right {
    align-items: flex-end;
    border-left: none;
    border-right: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25);
    text-align: right;
}
.hud-orbital__stat-bar .hud-panel-card__label {
    font-size: .42rem !important;
    color: var(--ac) !important;
    opacity: .65 !important;
    letter-spacing: .12em !important;
    white-space: nowrap;
}
.hud-orbital__stat-bar .hud-panel-card__value {
    font-size: .72rem !important;
    font-family: var(--font-hud) !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.hud-orbital__stat-bar .hud-panel-card__sub {
    font-size: .44rem !important;
    opacity: .4 !important;
    white-space: nowrap;
}

/* Countdown dentro de la barra */
.hud-orbital__bar .hud-orbital__countdown {
    background: transparent !important;
    border: none !important;
    padding: .15rem .5rem !important;
    margin: 0 !important;
    border-left: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.15) !important;
    border-right: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.15) !important;
    flex-shrink: 0;
}

/* Ocultar left/right ahora en orbital (se reemplazaron por barra) */
.hud-orbital__left,
.hud-orbital__right { display: none !important; }

/* Mobile: barra scroll horizontal */
@media (max-width: 767px) {
    .hud-orbital__bar {
        overflow-x: auto;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: .3rem;
        padding: .25rem .4rem;
        scrollbar-width: none;
    }
    .hud-orbital__bar::-webkit-scrollbar { display: none; }
    .hud-orbital__stat-bar { min-width: 75px; }
    .hud-orb-btn { flex-shrink: 0; }
}


/* ━━ BARRA ORBITAL v1.4.34 — layout limpio, elementos legibles ━━ */

/* Contenedor: dos filas — botones arriba, stats+countdown abajo */
.hud-orbital__bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .4rem .6rem;
    position: relative;
    z-index: 8;
}

/* Fila 1: botones de acción */
.hud-orbital__bar-btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    flex-wrap: wrap;
}

/* Fila 2: stats + countdown */
.hud-orbital__bar-info {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    flex-wrap: wrap;
}

/* Botones en la barra — tamaño legible */
.hud-orbital__bar .hud-orb-btn {
    font-size: .72rem !important;
    padding: .45rem .9rem !important;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .1em;
}

/* Ghost buttons — color acento, completamente visibles */
.hud-orbital__bar .hud-btn--ghost {
    color: var(--ac) !important;
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5) !important;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.06) !important;
}
.hud-orbital__bar .hud-btn--ghost:hover {
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.15) !important;
    border-color: var(--ac) !important;
}

/* Stats en la fila de info */
.hud-orbital__stat-bar {
    padding: .4rem .7rem;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    flex: 1;
    min-width: 110px;
    max-width: 180px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.hud-orbital__stat-bar--right {
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
    text-align: right;
}
.hud-orbital__stat-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.4);
    pointer-events: none;
    clip-path: inherit;
}
.hud-orbital__stat-bar .hud-panel-card__label {
    font-size: .5rem !important;
    color: var(--ac) !important;
    opacity: .8 !important;
    display: block;
    letter-spacing: .14em;
    margin-bottom: .1rem;
}
.hud-orbital__stat-bar .hud-panel-card__value {
    font-size: .82rem !important;
    font-family: var(--font-hud) !important;
    font-weight: 600 !important;
    color: #fff !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.hud-orbital__stat-bar .hud-panel-card__sub {
    font-size: .5rem !important;
    color: rgba(255,255,255,.5) !important;
    display: block;
    margin-top: .1rem;
}

/* Countdown en la fila de info — compacto pero legible */
.hud-orbital__bar .hud-orbital__countdown {
    flex-shrink: 0;
    text-align: center;
    background: rgba(0,0,0,.3);
    border: none;
    border-left: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    border-right: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    padding: .35rem .7rem;
    margin: 0;
    max-width: none;
    width: auto;
    min-width: 140px;
}
.hud-orbital__bar .hud-countdown-card__label {
    font-size: .46rem !important;
    opacity: .5 !important;
    letter-spacing: .16em !important;
}
.hud-orbital__bar .hud-countdown-card__time {
    font-size: 1.15rem !important;
    letter-spacing: .12em !important;
    color: var(--ac) !important;
}
.hud-orbital__bar .hud-week-bar {
    width: 100%;
    margin: .2rem 0 0 !important;
    height: 1.5px !important;
}

/* Ocultar los left/right del orbital */
.hud-orbital__left,
.hud-orbital__right { display: none !important; }

/* Inline stats (del sistema anterior) — ocultar */
.hud-orbital__stat-inline { display: none !important; }

/* Mobile */
@media (max-width: 767px) {
    .hud-orbital__bar { padding: .3rem .4rem; gap: .4rem; }
    .hud-orbital__bar-btns { gap: .35rem; }
    .hud-orbital__bar-info { gap: .35rem; }
    .hud-orbital__bar .hud-orb-btn { font-size: .65rem !important; padding: .38rem .7rem !important; }
    .hud-orbital__stat-bar { min-width: 90px; max-width: 140px; }
    .hud-orbital__bar .hud-orbital__countdown { min-width: 110px; }
    .hud-orbital__bar .hud-countdown-card__time { font-size: .95rem !important; }
}


/* ━━ TÉRMINOS — parpadeo solo en el TEXTO del botón ━━━━━━━━━━━━━━ */
@keyframes gyms-text-blink {
    0%, 49%  { opacity: 1; }
    50%, 100% { opacity: 0; }
}
.gyms-terms-btn__text {
    animation: gyms-text-blink 0.08s step-end infinite;
}


/* ━━ RESPONSIVE ORBITAL v1.4.35 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Desktop grande (>1200px) ── */
@media (min-width: 1200px) {
    .hud-orbital__logo-img   { max-width: 700px; }
    .hud-orbital__bar .hud-orb-btn { font-size: .78rem !important; padding: .5rem 1.1rem !important; }
    .hud-orbital__stat-bar   { min-width: 140px; max-width: 220px; }
    .hud-orbital__stat-bar .hud-panel-card__value { font-size: .9rem !important; }
    .hud-orbital__bar .hud-countdown-card__time   { font-size: 1.3rem !important; }
}

/* ── Desktop medio (768–1199px) ── */
@media (min-width: 768px) and (max-width: 1199px) {
    .hud-orbital__logo-img   { max-width: 520px; }
    .hud-orbital__bar .hud-orb-btn { font-size: .7rem !important; padding: .42rem .85rem !important; }
    .hud-orbital__stat-bar   { min-width: 110px; max-width: 170px; }
    .hud-orbital__bar .hud-countdown-card__time   { font-size: 1.05rem !important; }
}

/* ── Tablet (600–767px) ── */
@media (min-width: 600px) and (max-width: 767px) {
    .hud-orbital__logo-img   { max-width: 85vw; }
    .hud-orbital__bar-btns   { gap: .4rem; }
    .hud-orbital__bar .hud-orb-btn { font-size: .62rem !important; padding: .38rem .7rem !important; }
    .hud-orbital__stat-bar   { min-width: 95px; max-width: 130px; }
    .hud-orbital__bar .hud-countdown-card__time   { font-size: .9rem !important; }
}

/* ── Mobile pequeño (<400px) ── */
@media (max-width: 400px) {
    .hud-orbital__logo-img   { max-width: 95vw; }
    .hud-orbital__bar-btns   { gap: .25rem; }
    .hud-orbital__bar .hud-orb-btn { font-size: .56rem !important; padding: .3rem .5rem !important; }
    .hud-orbital__bar-info   { flex-wrap: wrap; gap: .25rem; }
    .hud-orbital__stat-bar   { min-width: 80px; max-width: 110px; }
    .hud-orbital__bar .hud-orbital__countdown { min-width: 100px; }
    .hud-orbital__bar .hud-countdown-card__time { font-size: .8rem !important; }
}

/* ━━ FONT SIZE CLASSES responsive en orbital ━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
    /* Fuente Normal (por defecto) */
    body.gyms-font-sm .hud-orbital__bar .hud-orb-btn { font-size: .65rem !important; }
    body.gyms-font-sm .hud-orbital__stat-bar .hud-panel-card__value { font-size: .78rem !important; }

    /* Fuente Grande */
    body.gyms-font-md .hud-orbital__logo-img  { max-width: 90vw; }
    body.gyms-font-md .hud-orbital__bar .hud-orb-btn { font-size: .72rem !important; padding: .42rem .8rem !important; }
    body.gyms-font-md .hud-orbital__stat-bar .hud-panel-card__value { font-size: .86rem !important; }
    body.gyms-font-md .hud-orbital__bar .hud-countdown-card__time { font-size: 1rem !important; }

    /* Con fuente grande: comprimir reel para dar espacio */
    body.gyms-font-md .hud-layout .hud-main-content .hud-reel { margin-bottom: 0 !important; }
}

/* ━━ BARRA ILUSTRATIVA — PARTICIPA · CALIFICA · PREMIA · GANA ━━━ */
.hud-engage-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    width: 100%;
    padding: .35rem .6rem;
    background: rgba(0,0,0,.28);
    border-top: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex-wrap: nowrap;
    overflow: hidden;
}

.hud-engage-bar__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .06rem;
    flex-shrink: 0;
}

.hud-engage-bar__icon {
    font-size: .9rem;
    line-height: 1;
    color: var(--ac);
}

.hud-engage-bar__label {
    font-family: var(--font-hud);
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ac);
    line-height: 1;
}

.hud-engage-bar__sub {
    font-size: .42rem;
    color: rgba(255,255,255,.35);
    letter-spacing: .06em;
    line-height: 1;
}

/* Paso GANA — más destacado */
.hud-engage-bar__step--gana .hud-engage-bar__icon { font-size: 1.1rem; }
.hud-engage-bar__step--gana .hud-engage-bar__label {
    color: var(--ac);
    font-size: .6rem;
    text-shadow: 0 0 8px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5);
}

/* Flechas separadoras */
.hud-engage-bar__arrow {
    font-size: .7rem;
    color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);
    flex-shrink: 0;
    line-height: 1;
    margin: 0 .1rem;
}

/* Botones de voto decorativos — igual que en los posts */
.hud-engage-bar__mock-votes {
    display: flex;
    gap: .2rem;
    margin-top: .15rem;
}
.hud-engage-bar__mock-btn {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-family: var(--font-hud);
    font-size: .48rem;
    font-weight: 700;
    padding: .1rem .3rem;
    border: 1px solid;
    cursor: default;
    pointer-events: none;
    line-height: 1;
}
.hud-engage-bar__mock-btn--1 {
    border-color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);
    color: var(--ac);
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);
}
.hud-engage-bar__mock-btn--2 {
    border-color: rgba(0,200,255,.35);
    color: #00c8ff;
    background: rgba(0,200,255,.08);
}
.hud-engage-bar__mock-btn--3 {
    border-color: rgba(255,200,0,.35);
    color: #ffc800;
    background: rgba(255,200,0,.08);
}

/* Mobile: reducir aún más */
@media (max-width: 600px) {
    .hud-engage-bar { gap: .2rem; padding: .28rem .4rem; }
    .hud-engage-bar__icon { font-size: .75rem; }
    .hud-engage-bar__label { font-size: .44rem; }
    .hud-engage-bar__sub { display: none; }
    .hud-engage-bar__mock-votes { display: none; }
    .hud-engage-bar__arrow { font-size: .6rem; }
}

/* ━━ TÉRMINOS — avisos destacados ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gyms-terms-notice {
    padding: .7rem .9rem;
    border-radius: 4px;
    font-size: .78rem;
    line-height: 1.6;
    margin: .75rem 0;
}
.gyms-terms-notice--beta {
    background: rgba(255,200,0,.08);
    border-left: 3px solid rgba(255,200,0,.6);
    color: rgba(255,220,80,.9);
}
.gyms-terms-notice--copyright {
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.07);
    border-left: 3px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5);
    color: rgba(255,255,255,.85);
}
.gyms-terms-section ul {
    padding-left: 1.2rem;
    margin: .4rem 0;
}
.gyms-terms-section ul li {
    font-size: .82rem;
    line-height: 1.6;
    color: rgba(255,255,255,.7);
    margin-bottom: .2rem;
}

/* ━━ RECUPERAR CONTRASEÑA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.auth-forgot-row {
    text-align: center;
    margin-top: .6rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(255,255,255,.05);
}
.auth-forgot-link {
    background: none;
    border: none;
    color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.6);
    font-size: .62rem;
    letter-spacing: .08em;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
    font-family: var(--font-hud);
    transition: color .15s;
}
.auth-forgot-link:hover { color: var(--ac); }

.auth-forgot-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
    font-size: .6rem;
    letter-spacing: .12em;
    color: var(--ac);
    font-family: var(--font-hud);
    font-weight: 700;
}
.auth-forgot-back {
    background: none;
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);
    color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.7);
    font-size: .58rem;
    letter-spacing: .08em;
    padding: .2rem .5rem;
    cursor: pointer;
    font-family: var(--font-hud);
    transition: all .15s;
}
.auth-forgot-back:hover {
    border-color: var(--ac);
    color: var(--ac);
}
.auth-forgot-desc {
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    line-height: 1.5;
    margin-bottom: .8rem;
    letter-spacing: .02em;
}
.auth-forgot-success {
    font-size: .72rem;
    color: rgba(150,255,150,.85);
    background: rgba(0,200,100,.08);
    border: 1px solid rgba(0,200,100,.25);
    border-radius: 4px;
    padding: .6rem .8rem;
    margin-top: .6rem;
    line-height: 1.5;
    letter-spacing: .02em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TARJETA DE REGALO DESTACADO v1.4.42
   Diseño impactante que contrasta con los posts normales
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Garantizar que [hidden] funcione en cards de regalos independientemente
   de la especificidad de .fc { display:flex } u otras reglas de display. */
.gfc[hidden],
.gifts-fc[hidden] { display: none !important; }

/* ══ POST DESTACADO — fc--featured ════════════════════════════════════
   PROBLEMA RESUELTO: CSS animations NO pueden sobrescribir propiedades
   declaradas con !important. Si box-shadow tiene !important estático,
   la animación se ignora aunque tenga !important.
   
   SOLUCIÓN: usar .fc.fc--featured (doble clase = mayor especificidad)
   sin !important en las propiedades animadas. Así los @keyframes
   pueden modificar border-color y box-shadow libremente.
════════════════════════════════════════════════════════════════════ */
@keyframes fc-featured-pulse {
    0% {
        border-color: rgba(255,200,0,1);
        box-shadow:
            0 0 0 3px rgba(255,200,0,.95),
            0 0 0 5px rgba(255,200,0,.3),
            4px 6px 18px rgba(0,0,0,.85);
    }
    50% {
        border-color: rgba(255,200,0,.2);
        box-shadow:
            0 0 0 3px rgba(255,200,0,.1),
            0 0 0 5px rgba(255,200,0,.03),
            4px 6px 18px rgba(0,0,0,.85);
    }
    100% {
        border-color: rgba(255,200,0,1);
        box-shadow:
            0 0 0 3px rgba(255,200,0,.95),
            0 0 0 5px rgba(255,200,0,.3),
            4px 6px 18px rgba(0,0,0,.85);
    }
}

/* Doble clase para mayor especificidad que .fc sin necesitar !important.
   Sin !important → los @keyframes pueden animar las propiedades. */
.fc.fc--featured {
    border: 2px solid rgba(255,200,0,1);
    border-bottom: 2px solid rgba(255,200,0,1);
    box-shadow:
        0 0 0 3px rgba(255,200,0,.95),
        0 0 0 5px rgba(255,200,0,.3),
        4px 6px 18px rgba(0,0,0,.85);
    animation: fc-featured-pulse 1.8s ease-in-out infinite;
    position: relative;
}

/* Banner ⭐ POST DESTACADO — franja superior */
.fc__featured-banner {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    background: linear-gradient(90deg, rgba(255,200,0,.18) 0%, rgba(255,200,0,.06) 100%);
    border-bottom: 1px solid rgba(255,200,0,.25);
}
.fc__featured-icon { font-size: .85rem; line-height: 1; }

@keyframes featured-label-blink {
    0%, 100% {
        color: #ffc800;
        text-shadow: 0 0 6px rgba(255,200,0,.9), 0 0 12px rgba(255,200,0,.5);
    }
    50% {
        color: rgba(255,200,0,.25);
        text-shadow: none;
    }
}

.fc__featured-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: #ffc800;
    text-transform: uppercase;
    animation: featured-label-blink 1.2s ease-in-out infinite;
}

/* ══ REEL — item destacado: anillo pulsante dorado ═════════════════
   El blink se aplica directamente al border del hud-reel__item
   (el .hud-reel__item-ring está en display:none y no se usa).
════════════════════════════════════════════════════════════════════ */
@keyframes reel-feat-border {
    0%   {
        border-color: rgba(255,200,0,1);
        box-shadow:   0 0 0 2px rgba(255,200,0,.5),
                      0 0 12px rgba(255,200,0,.7),
                      0 0 24px rgba(255,200,0,.25);
    }
    50%  {
        border-color: rgba(255,200,0,.25);
        box-shadow:   0 0 0 1px rgba(255,200,0,.1),
                      0 0 6px  rgba(255,200,0,.2),
                      0 0 0    rgba(255,200,0,0);
    }
    100% {
        border-color: rgba(255,200,0,1);
        box-shadow:   0 0 0 2px rgba(255,200,0,.5),
                      0 0 12px rgba(255,200,0,.7),
                      0 0 24px rgba(255,200,0,.25);
    }
}

.hud-reel__item--featured {
    border-color: rgba(255,200,0,1) !important;
    animation: reel-feat-border 2s ease-in-out infinite !important;
    /* No interferir con is-active que tiene su propio border-color */
}
/* Cuando el item featured está activo, mantener ambos efectos */
.hud-reel__item--featured.is-active {
    animation: reel-feat-border 2s ease-in-out infinite !important;
    width: 66px !important;
    height: 66px !important;
}

/* Estrella flotante en el reel */
.hud-reel__featured-star {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: .6rem;
    line-height: 1;
    z-index: 4;
    filter: drop-shadow(0 0 4px rgba(255,200,0,1));
    pointer-events: none;
}

.gfc {
    background: var(--panel-bg) !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    position: relative;
    overflow: hidden;
}

/* Borde lateral izquierdo de acento para regalo featured */
.gfc--featured {
    border-left: 3px solid #ffc800 !important;
}
.gfc--free {
    border-left: 3px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.6) !important;
}

/* ── BANNER SUPERIOR ── */
.gfc__banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .7rem;
    background: rgba(255,200,0,.10);
    border-top: 1px solid rgba(255,200,0,.25);
    border-bottom: 1px solid rgba(255,200,0,.12);
}
.gfc--free .gfc__banner {
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);
    border-top-color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);
    border-bottom-color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
}
.gfc__banner-left {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.gfc__banner-icon {
    font-size: 1.1rem;
    line-height: 1;
}
.gfc__banner-tag {
    display: block;
    font-family: var(--font-hud);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: #ffc800;
    line-height: 1;
}
.gfc--free .gfc__banner-tag { color: var(--ac); }
.gfc__banner-sub {
    display: block;
    font-size: .42rem;
    color: rgba(255,255,255,.35);
    letter-spacing: .1em;
}
.gfc__banner-right {
    font-family: var(--font-hud);
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255,255,255,.5);
    animation: gfc-pulse 2s ease-in-out infinite;
}
@keyframes gfc-pulse {
    0%, 100% { opacity: .5; }
    50%       { opacity: 1; color: #ffc800; }
}
.gfc--free .gfc__banner-right {
    animation: gfc-pulse-ac 2s ease-in-out infinite;
}
@keyframes gfc-pulse-ac {
    0%, 100% { opacity: .5; }
    50%       { opacity: 1; color: var(--ac); }
}

/* ── IMAGEN ── */
.gfc__img-wrap {
    position: relative;
    aspect-ratio: 16/8;
    overflow: hidden;
    background: rgba(0,0,0,.5);
}
.gfc__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gfc__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: 2.5rem;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05);
}
.gfc__img-placeholder-text {
    font-size: .7rem;
    color: rgba(255,255,255,.4);
    letter-spacing: .08em;
    font-family: var(--font-hud);
}
.gfc__img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 50%);
    pointer-events: none;
}

/* ── SPONSOR PILL sobre la imagen ── */
.gfc__sponsor-pill {
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    display: flex;
    align-items: center;
    gap: .3rem;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
    padding: .18rem .45rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.1);
    z-index: 4;
}
.gfc__sponsor-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.2);
}
.gfc__sponsor-initials {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .48rem;
    font-weight: 700;
    color: var(--ac);
}
.gfc__sponsor-name {
    font-size: .52rem;
    color: rgba(255,255,255,.75);
    letter-spacing: .06em;
    font-family: var(--font-hud);
}

/* ── CUERPO ── */
.gfc__body {
    padding: .5rem .7rem .2rem;
}
.gfc__title {
    font-family: var(--font-hud);
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
    margin: 0 0 .2rem;
    line-height: 1.2;
}
.gfc__desc {
    font-size: .65rem;
    color: rgba(255,255,255,.5);
    line-height: 1.5;
    margin: 0;
}

/* ── CTA BAR con calificación ── */
.gfc__cta-bar {
    padding: .4rem .7rem;
    background: rgba(0,0,0,.3);
    border-top: 1px solid rgba(255,255,255,.05);
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.gfc__cta-text {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .58rem;
    color: rgba(255,255,255,.55);
    letter-spacing: .05em;
}
.gfc__cta-icon { font-size: .85rem; }
.gfc__cta-text strong { color: #ffc800; }
.gfc--free .gfc__cta-text strong { color: var(--ac); }

.gfc__votes {
    display: flex;
    align-items: center;
    gap: .3rem;
}
.gfc__vote-btn {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-family: var(--font-hud);
    font-size: .62rem;
    font-weight: 700;
    padding: .2rem .45rem;
    border: 1px solid;
    cursor: pointer;
    transition: all .15s;
    background: transparent;
    line-height: 1;
}
.gfc__vote-btn--1 {
    border-color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);
    color: var(--ac);
}
.gfc__vote-btn--1:hover { background: var(--ac); color: #000; }
.gfc__vote-btn--2 {
    border-color: rgba(0,200,255,.35);
    color: #00c8ff;
}
.gfc__vote-btn--2:hover { background: #00c8ff; color: #000; }
.gfc__vote-btn--3 {
    border-color: rgba(255,200,0,.35);
    color: #ffc800;
}
.gfc__vote-btn--3:hover { background: #ffc800; color: #000; }
.gfc__vote-btn.is-voted { opacity: .4; cursor: not-allowed; }

.gfc__vote-total {
    font-family: var(--font-hud);
    font-size: .68rem;
    font-weight: 700;
    color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.6);
    margin-left: .2rem;
}

/* ━━ PANEL DEL USUARIO v1.4.46 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.user-panel-modal{position:fixed;inset:0;z-index:2100;display:flex;align-items:flex-end;justify-content:flex-end;}
.user-panel-modal[hidden]{display:none!important;}
.user-panel-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);}
.user-panel-modal__box{
    position:relative;width:min(480px,100vw);height:100%;
    background:var(--panel-bg);
    border-left:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    display:flex;flex-direction:column;overflow:hidden;z-index:1;
}
.user-panel-modal__header{
    flex-shrink:0;padding:.6rem .8rem .4rem;
    border-bottom:1px solid rgba(255,255,255,.06);
    display:flex;flex-direction:column;gap:.4rem;
    background:var(--panel-bg2);
}
.user-panel-modal__tabs{display:flex;gap:0;}
.user-panel-tab{
    flex:1;background:none;border:none;
    border-bottom:2px solid transparent;
    color:var(--text-muted);font-family:var(--font-hud);
    font-size:.6rem;font-weight:700;letter-spacing:.12em;
    padding:.35rem .5rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:.3rem;
    transition:all .15s;
}
.user-panel-tab.is-active{color:var(--ac);border-bottom-color:var(--ac);}
.user-panel-subtabs{display:flex;gap:.35rem;}
.user-panel-subtab{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
    color:var(--text-muted);font-family:var(--font-hud);
    font-size:.52rem;letter-spacing:.1em;padding:.18rem .5rem;cursor:pointer;
    transition:all .15s;
}
.user-panel-subtab.is-active{
    color:var(--ac);border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5);
    background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);
}
.user-panel-modal__close{
    position:absolute;top:.5rem;right:.6rem;
    background:none;border:none;color:var(--text-muted);
    font-size:1rem;cursor:pointer;padding:.15rem .4rem;
    transition:color .15s;
}
.user-panel-modal__close:hover{color:#fff;}
.user-panel-modal__body{flex:1;overflow-y:auto;padding:.5rem;}
.user-panel-loading{display:flex;justify-content:center;padding:2rem;}
.user-panel-empty{text-align:center;font-size:.7rem;color:var(--text-faint);padding:2rem;}

/* Item de post/regalo en el panel */
.up-item{
    display:flex;align-items:center;gap:.6rem;
    padding:.5rem .6rem;border-radius:4px;
    border:1px solid rgba(255,255,255,.05);
    background:rgba(255,255,255,.03);
    margin-bottom:.4rem;position:relative;
}
.up-item__thumb{
    width:46px;height:46px;object-fit:cover;flex-shrink:0;
    border-radius:3px;background:rgba(255,255,255,.06);
}
.up-item__thumb-placeholder{
    width:46px;height:46px;flex-shrink:0;
    border-radius:3px;background:rgba(255,255,255,.06);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;
}
.up-item__info{flex:1;min-width:0;}
.up-item__title{
    font-size:.75rem;font-weight:600;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:block;margin-bottom:.15rem;
}
.up-item__meta{font-size:.52rem;color:var(--text-muted);letter-spacing:.06em;}
.up-item__badge{
    font-size:.44rem;padding:1px 5px;border-radius:2px;
    font-weight:700;letter-spacing:.1em;
}
.up-item__badge--featured{background:rgba(255,200,0,.15);color:#ffc800;border:1px solid rgba(255,200,0,.3);}
.up-item__badge--active{background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);color:var(--ac);border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);}
.up-item__badge--trashed{background:rgba(220,53,69,.1);color:#ff6b6b;border:1px solid rgba(220,53,69,.2);}
.up-item__actions{display:flex;gap:.25rem;flex-shrink:0;}
.up-item__btn{
    background:none;border:1px solid rgba(255,255,255,.1);
    color:var(--text-muted);font-size:.5rem;
    font-family:var(--font-hud);letter-spacing:.1em;
    padding:.18rem .4rem;cursor:pointer;
    transition:all .15s;white-space:nowrap;
}
.up-item__btn:hover{border-color:var(--ac);color:var(--ac);}
.up-item__btn--danger:hover{border-color:#dc3545;color:#ff6b6b;}
.up-item__btn--feature{border-color:rgba(255,200,0,.3);color:#ffc800;}
.up-item__btn--feature:hover{background:rgba(255,200,0,.1);border-color:#ffc800;}
/* Estado: post ya está destacado — botón para quitarlo */
.up-item__btn--featured-active{
    background:rgba(255,200,0,.15);
    border-color:#ffc800;
    color:#ffc800;
    font-weight:700;
}
.up-item__btn--featured-active:hover{
    background:rgba(220,53,69,.15);
    border-color:#dc3545;
    color:#ff6b6b;
}

/* ━━ BOTÓN DESTACAR EN PANEL ADMIN ━━━━━━━━━━━━━━━━━━━━━━━ */
.gr-btn--feature {
    background: rgba(255,200,0,.08);
    border: 1px solid rgba(255,200,0,.4);
    color: #ffc800;
    font-family: var(--font-hud);
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .1em;
    padding: .2rem .55rem;
    cursor: pointer;
    transition: all .15s;
}
.gr-btn--feature:hover {
    background: rgba(255,200,0,.18);
    border-color: #ffc800;
}


/* ══════════════════════════════════════════════════════════════
   CHAT PANEL
══════════════════════════════════════════════════════════════ */

/* Badge de online en el botón CONTACTAR */
.hud-chat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #4cff72;
    color: #000;
    font-size: .58rem;
    font-weight: 800;
    margin-left: .3rem;
    vertical-align: middle;
}

/* Panel principal */
.chat-panel__box {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
}

/* Columna usuarios */
.chat-users-col {
    width: 72px;
    flex-shrink: 0;
    background: var(--panel-bg2);
    border-right: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-users-col__header {
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--text-muted);
    text-align: center;
    padding: .5rem .2rem .3rem;
    border-bottom: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);
}
.chat-users-col__list {
    flex: 1;
    overflow-y: auto;
    padding: .4rem .3rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    scrollbar-width: none;
}
.chat-users-col__list::-webkit-scrollbar { display: none; }

/* Item de usuario en la columna */
.chat-user-item {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 auto;
    flex-shrink: 0;
    border: 2px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    overflow: hidden;
    transition: border-color .2s, transform .15s;
    background: var(--panel-bg3);
}
.chat-user-item:hover { transform: scale(1.08); border-color: var(--ac); }
.chat-user-item img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.chat-user-item__initials {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: .75rem; font-weight: 700; color: var(--ac);
}

/* Anillo verde-amarillo para usuarios online */
@keyframes online-ring-pulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(100,255,80,.9), 0 0 8px rgba(100,255,80,.5); border-color: rgba(100,255,80,.9); }
    50%      { box-shadow: 0 0 0 2px rgba(100,255,80,.3), 0 0 3px rgba(100,255,80,.2); border-color: rgba(100,255,80,.4); }
}
.chat-user-item--online {
    border-color: rgba(100,255,80,.9);
    animation: online-ring-pulse 2s ease-in-out infinite;
}

/* Icono de chat sobre la imagen (solo en online) */
.chat-user-item__chat-icon {
    position: absolute;
    bottom: 1px; right: 1px;
    width: 14px; height: 14px;
    background: rgba(100,255,80,.9);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .5rem;
    z-index: 2;
    pointer-events: none;
}

/* Usuario seleccionado para DM */
.chat-user-item--selected {
    border-color: var(--ac) !important;
    animation: none !important;
    box-shadow: 0 0 0 2px var(--ac), 0 0 10px var(--ac-glow);
}

/* Área de mensajes */
.chat-stream-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.chat-panel__header { flex-shrink: 0; }
.chat-panel__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: .6rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2) transparent;
}
.chat-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: .5rem; opacity: .4;
    flex: 1; text-align: center;
    font-size: .78rem; color: var(--text-muted);
}

/* Burbuja de mensaje */
.chat-msg {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    max-width: 88%;
}
.chat-msg--mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg--other { align-self: flex-start; }
.chat-msg__avatar {
    width: 28px; height: 28px;
    border-radius: 50%; object-fit: cover;
    flex-shrink: 0;
}
.chat-msg__bubble-wrap { display: flex; flex-direction: column; gap: .15rem; }
.chat-msg--mine .chat-msg__bubble-wrap { align-items: flex-end; }
.chat-msg__name {
    font-size: .58rem; color: var(--text-muted);
    padding: 0 .35rem;
}
.chat-msg__bubble {
    padding: .4rem .65rem;
    border-radius: 14px;
    font-size: .78rem;
    line-height: 1.4;
    word-break: break-word;
    max-width: 280px;
}
.chat-msg--other .chat-msg__bubble {
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.18);
    color: var(--text);
    border-bottom-left-radius: 4px;
}
.chat-msg--mine .chat-msg__bubble {
    background: var(--ac);
    color: #000;
    border-bottom-right-radius: 4px;
    font-weight: 500;
}
.chat-msg--private .chat-msg__bubble {
    border: 1.5px solid rgba(255,200,0,.5);
}
.chat-msg__time {
    font-size: .52rem; color: var(--text-muted);
    padding: 0 .35rem;
}
.chat-msg__private-tag {
    font-size: .55rem; color: rgba(255,200,0,.7);
    padding: 0 .35rem;
}

/* Input bar */
.chat-input-bar {
    flex-shrink: 0;
    border-top: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12);
    padding: .5rem .65rem;
    background: var(--panel-bg2);
}
.chat-private-indicator {
    display: flex; align-items: center; gap: .4rem;
    font-size: .65rem; color: rgba(255,200,0,.8);
    margin-bottom: .35rem;
    padding: .2rem .4rem;
    background: rgba(255,200,0,.08);
    border-radius: 4px;
    border: 1px solid rgba(255,200,0,.2);
}
.chat-private-indicator button {
    background: none; border: none; color: inherit;
    cursor: pointer; font-size: .75rem; padding: 0;
    opacity: .7;
}
.chat-private-indicator button:hover { opacity: 1; }
.chat-input-row {
    display: flex; gap: .4rem; align-items: flex-end;
}
.chat-input {
    flex: 1;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05);
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    border-radius: 10px;
    color: var(--text);
    font-size: .82rem;
    padding: .45rem .7rem;
    resize: none;
    max-height: 100px;
    overflow-y: auto;
    outline: none;
    font-family: inherit;
    transition: border-color .2s;
}
.chat-input:focus { border-color: var(--ac); }
.chat-input::placeholder { color: var(--text-muted); }
.chat-send-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ac);
    border: none;
    color: #000;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s, opacity .15s;
}
.chat-send-btn:hover { transform: scale(1.08); }
.chat-send-btn:disabled { opacity: .4; cursor: default; transform: none; }

/* Hidden state */
.chat-panel[hidden] { display: none !important; }

/* ━━ CHAT — BARRA ANTI-SPAM ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.chat-cooldown-wrap {
    padding: .2rem .6rem .15rem;
    background: rgba(0,0,0,.3);
    border-top: 1px solid rgba(255,255,255,.04);
}
.chat-cooldown-bar {
    height: 2px;
    background: var(--ac);
    width: 100%;
    border-radius: 1px;
    margin-bottom: .15rem;
}
.chat-cooldown-label {
    font-size: .48rem;
    color: rgba(255,255,255,.3);
    letter-spacing: .08em;
    font-family: var(--font-hud);
}

/* ━━ PERFIL — PREFERENCIAS DE CONTACTO ━━━━━━━━━━━━━━━━━━━━━ */
.profile-contact-desc {
    font-size: .65rem;
    color: rgba(255,255,255,.45);
    margin: .2rem 0 .5rem;
    line-height: 1.4;
}
.profile-contact-opts {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.profile-contact-opt {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .68rem;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    padding: .3rem .5rem;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 3px;
    transition: all .15s;
}
.profile-contact-opt:hover {
    border-color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05);
}
.profile-contact-opt input[type="radio"] {
    accent-color: var(--ac);
    flex-shrink: 0;
}
.profile-contact-opt:has(input:checked) {
    border-color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5);
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);
    color: var(--ac);
}
.profile-contact-note {
    font-size: .55rem;
    color: rgba(255,255,255,.3);
    margin-top: .4rem;
    line-height: 1.5;
    letter-spacing: .04em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEGUNDA FILA DE BOTONES ORBITAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hud-orbital__bar-btns--row2 {
    margin-top: .3rem;
    justify-content: center;
}
.hud-orb-btn--chat {
    border-color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.4) !important;
}
.hud-orb-btn--play {
    border-color: rgba(100,200,100,.4) !important;
    color: rgba(100,255,100,.9) !important;
}
.hud-orb-btn--play:hover {
    background: rgba(100,255,100,.1) !important;
    border-color: rgba(100,255,100,.7) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MODAL DE JUEGOS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.games-modal { position:fixed;inset:0;z-index:2200;display:flex;align-items:center;justify-content:center; }
.games-modal[hidden] { display:none!important; }
.games-modal__backdrop { position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px); }
.games-modal__box {
    position:relative;width:min(520px,96vw);
    background:var(--panel-bg);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);
    border-radius:8px;padding:1.2rem;z-index:1;
    box-shadow:0 0 40px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);
}
.games-modal__header {
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:1rem;padding-bottom:.6rem;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.games-modal__title {
    display:flex;align-items:center;gap:.4rem;
    font-family:var(--font-hud);font-size:.75rem;font-weight:700;
    letter-spacing:.14em;color:var(--ac);
}
.games-modal__close {
    background:none;border:none;color:var(--text-muted);font-size:1rem;
    cursor:pointer;padding:.15rem .4rem;transition:color .15s;
}
.games-modal__close:hover { color:#fff; }
.games-modal__list { display:flex;flex-direction:column;gap:.6rem; }

.game-card {
    display:flex;align-items:center;gap:.8rem;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    border-radius:6px;padding:.7rem .8rem;
    transition:border-color .15s;
}
.game-card:hover { border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3); }
.game-card--soon { opacity:.5;pointer-events:none; }
.game-card__icon { font-size:2rem;flex-shrink:0; }
.game-card__info { flex:1;min-width:0; }
.game-card__name { font-family:var(--font-hud);font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--text);margin-bottom:.2rem; }
.game-card__desc { font-size:.6rem;color:var(--text-muted);line-height:1.4;margin-bottom:.3rem; }
.game-card__tags { display:flex;gap:.25rem;flex-wrap:wrap; }
.game-tag { font-size:.48rem;padding:2px 6px;border-radius:2px;background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1);color:var(--ac);font-family:var(--font-hud);letter-spacing:.08em; }
.game-card__play { flex-shrink:0;font-size:.58rem!important;padding:.3rem .7rem!important; }

/* ━━ JUEGO FULLSCREEN ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.game-fullscreen {
    position:fixed;inset:0;z-index:2300;
    background:#0f0f1a;
    display:flex;flex-direction:column;
    overflow:hidden;
    height:100vh;
}
.game-fullscreen[hidden] { display:none!important; }
.game-fullscreen__bar {
    display:flex;align-items:center;gap:.6rem;
    padding:.4rem .8rem;
    background:rgba(0,0,0,.6);
    border-bottom:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
    flex-shrink:0;
}
.game-fullscreen__logo { height:28px;object-fit:contain; }
.game-fullscreen__logo-text { font-family:var(--font-title,'Bebas Neue',sans-serif);font-size:1.1rem;color:var(--ac);letter-spacing:.1em; }
.game-fullscreen__title { font-family:var(--font-hud);font-size:.65rem;font-weight:700;letter-spacing:.12em;color:var(--ac);flex:1; }
.game-fullscreen__close {
    background:none;border:1px solid rgba(255,255,255,.15);
    color:rgba(255,255,255,.6);font-family:var(--font-hud);font-size:.55rem;
    letter-spacing:.1em;padding:.25rem .6rem;cursor:pointer;transition:all .15s;
}
.game-fullscreen__close:hover { border-color:#ff6b6b;color:#ff6b6b; }
.game-fullscreen__content { flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;min-height:0; }

/* ━━ JUEGO INTERNO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gyms-game-wrap { width:100%;max-width:1100px;padding:.5rem; }
.gyms-game-layout { display:flex;gap:.6rem;align-items:flex-start;justify-content:center; }
.gyms-game-side {
    background:rgba(0,0,0,.5);border-radius:12px;padding:.6rem .5rem;
    min-width:80px;width:90px;flex-shrink:0;
    display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.gyms-game-side--rewards { border:1px solid rgba(255,170,100,.3); }
.gyms-game-side--punish  { border:1px solid rgba(255,136,100,.3); }
.gyms-game-side__title { font-family:var(--font-hud);font-size:.55rem;font-weight:700;letter-spacing:.1em;text-align:center; }
.gyms-game-side--rewards .gyms-game-side__title { color:#ffaa66; }
.gyms-game-side--punish  .gyms-game-side__title { color:#ff8866; }
.gyms-game-side__list { display:flex;flex-direction:column;gap:.4rem;width:100%; }
.gyms-game-side__item { display:flex;flex-direction:column;align-items:center;gap:3px; }
.gyms-game-side__icon {
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:1.2rem;
    border:2px solid var(--hc,#ffaa66);background:rgba(0,0,0,.4);
    transition:all .2s;
}
.gyms-game-side__icon.is-done { background:radial-gradient(circle at 30% 30%,var(--hc,#ffaa66),rgba(0,0,0,.5));box-shadow:0 0 10px var(--hc,#ffaa66); }
.gyms-game-side__icon.is-near { animation:gyms-pulse-side 1s infinite; }
.gyms-game-side__icon.is-locked { border-color:#333;color:#333;background:rgba(0,0,0,.3); }
@keyframes gyms-pulse-side { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06);box-shadow:0 0 12px var(--hc,#ffaa66)} }
.gyms-game-side__name { font-size:.5rem;color:rgba(255,255,255,.55);text-align:center;font-family:var(--font-hud);letter-spacing:.06em;line-height:1.2; }

.gyms-game-center { flex:1;min-width:280px;display:flex;flex-direction:column;gap:.4rem; }
.gyms-game-hud {
    display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;
    background:rgba(0,0,0,.7);border-radius:30px;padding:.4rem .6rem;
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);
}
.gyms-game-stat { display:flex;align-items:baseline;gap:.3rem;background:rgba(0,0,0,.5);padding:2px 8px;border-radius:20px;border:1px solid rgba(255,170,100,.2); }
.gyms-game-stat__lbl { font-size:.55rem;font-weight:700;color:#ffaa66;letter-spacing:.08em;font-family:var(--font-hud); }
.gyms-game-stat__val { font-size:1rem;font-weight:700;color:#fff;font-family:'Courier New',monospace; }

#gg-canvas { display:block;border-radius:16px;border:2px solid rgba(255,170,100,.3);cursor:crosshair;touch-action:none; }
.gyms-game-hint { font-size:.55rem;color:rgba(255,170,100,.6);text-align:center;font-family:var(--font-hud);letter-spacing:.05em;line-height:1.4; }

/* ━━ MODAL DESAFÍO SOCIAL ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gyms-game-challenge {
    position:fixed;inset:0;z-index:2400;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.75);backdrop-filter:blur(4px);
}
.gyms-game-challenge[hidden] { display:none!important; }
.gyms-game-challenge__box {
    background:var(--panel-bg);
    border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.4);
    border-radius:10px;padding:1.4rem;
    width:min(420px,92vw);text-align:center;
    box-shadow:0 0 30px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.15);
}
.gyms-game-challenge__logo { margin-bottom:.8rem;display:flex;justify-content:center; }
.gyms-game-challenge__title { font-family:var(--font-hud);font-size:.8rem;font-weight:700;letter-spacing:.12em;color:var(--ac);margin-bottom:.8rem; }
.gyms-challenge-emoji { font-size:3rem;margin:.5rem 0; }
.gyms-challenge-name { font-family:var(--font-hud);font-size:.85rem;font-weight:700;color:#fff;margin-bottom:.4rem; }
.gyms-challenge-desc { font-size:.7rem;color:rgba(255,255,255,.6);margin-bottom:.4rem;line-height:1.5; }
.gyms-challenge-cta { font-size:.65rem;color:var(--ac);margin:.6rem 0;line-height:1.5;font-style:italic; }
.gyms-game-challenge__actions { display:flex;flex-direction:column;gap:.4rem;margin-top:.8rem; }
.gyms-challenge-btn { font-size:.6rem!important;padding:.35rem 1rem!important;width:100%; }

@media(max-width:600px){
    .gyms-game-side { display:none; }
    .gyms-game-layout { gap:.3rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   JUEGO v1.4.62 — UI completa
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gg-root { width:100%;min-height:100%;display:block;padding:.5rem;box-sizing:border-box;position:relative; }
.gg-screen { width:100%;max-width:900px;display:none;flex-direction:column;align-items:center;gap:.7rem;padding:.5rem;margin:0 auto; }
.gg-s-start { display:flex; } /* inicio visible por defecto */

/* ── PANTALLA INICIO ── */
.gg-s-start { gap:.8rem; }
.gg-start-logo { margin-bottom:.3rem; }
.gg-logo-img { max-height:52px;object-fit:contain; }
.gg-logo-txt { font-family:var(--font-title,'Bebas Neue',sans-serif);font-size:1.6rem;color:var(--ac);letter-spacing:.12em; }
.gg-start-title {
    font-family:var(--font-title,'Bebas Neue',sans-serif);
    font-size:clamp(1.6rem,5vw,2.6rem);
    color:#fff;text-align:center;line-height:1.1;letter-spacing:.06em;
}
.gg-start-title span { display:block;color:var(--ac); }
.gg-start-sub { font-size:.7rem;color:rgba(255,255,255,.5);text-align:center;max-width:420px;line-height:1.5; }
.gg-mode-row { display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;width:100%; }
.gg-mode-btn {
    display:flex;flex-direction:column;align-items:center;gap:.3rem;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;padding:1rem 1.4rem;cursor:pointer;
    transition:all .2s;min-width:160px;
}
.gg-mode-solo:hover  { border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5);background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.07); }
.gg-mode-social { border-color:rgba(100,200,100,.25); }
.gg-mode-social:hover { border-color:rgba(100,255,100,.6);background:rgba(100,200,100,.07); }
.gg-mode-icon { font-size:2rem; }
.gg-mode-name { font-family:var(--font-hud);font-size:.72rem;font-weight:700;letter-spacing:.12em;color:#fff; }
.gg-mode-desc { font-size:.58rem;color:rgba(255,255,255,.4);text-align:center; }
.gg-start-hint { font-size:.57rem;color:rgba(255,255,255,.3);text-align:center;font-family:var(--font-hud);letter-spacing:.05em;max-width:440px; }

/* ── PANTALLA COMPAÑERO ── */
.gg-s-partner { max-width:500px;gap:.6rem; }
.gg-partner-hdr { display:flex;align-items:center;gap:.6rem;width:100%; font-family:var(--font-hud);font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--ac); }
.gg-back-btn { background:none;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.5);font-family:var(--font-hud);font-size:.55rem;letter-spacing:.08em;padding:.22rem .55rem;cursor:pointer;transition:all .15s; }
.gg-back-btn:hover { border-color:var(--ac);color:var(--ac); }
.gg-partner-sub { font-size:.65rem;color:rgba(255,255,255,.45);text-align:center;line-height:1.5; }
.gg-search-inp { width:100%;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:.7rem;padding:.4rem .7rem;border-radius:4px;outline:none;box-sizing:border-box; }
.gg-search-inp:focus { border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.5); }
.gg-p-list { width:100%;max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:.3rem; }
.gg-p-loading { font-size:.65rem;color:rgba(255,255,255,.35);text-align:center;padding:1rem; }
.gg-p-item {
    display:flex;align-items:center;gap:.6rem;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
    border-radius:6px;padding:.4rem .6rem;cursor:pointer;transition:all .15s;
}
.gg-p-item:hover { border-color:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.05); }
.gg-p-sel { border-color:var(--ac)!important;background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.1)!important; }
.gg-p-av { width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0; }
.gg-p-av-ph { width:36px;height:36px;border-radius:50%;background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.2);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--ac);flex-shrink:0; }
.gg-p-info { display:flex;flex-direction:column;gap:.1rem;flex:1;min-width:0; }
.gg-p-un { font-size:.7rem;color:#fff;font-weight:500; }
.gg-p-on-badge { font-size:.52rem;color:#44ff88;letter-spacing:.06em; }
.gg-partner-acts { display:flex;flex-direction:column;gap:.35rem;width:100%; }
.gg-partner-acts .hud-btn { font-size:.6rem!important;padding:.35rem!important; }

/* ── PANTALLA JUEGO ── */
.gg-s-game { max-width:1000px;gap:.35rem;width:100%; }
.gg-topbar { display:flex;align-items:center;justify-content:space-between;width:100%;background:rgba(0,0,0,.65);border-radius:30px;padding:.35rem .7rem;border:1px solid rgba(255,170,100,.2);flex-wrap:wrap;gap:.3rem; }
.gg-stats { display:flex;flex-wrap:wrap;gap:.3rem; }
.gg-st { display:flex;align-items:baseline;gap:.25rem;background:rgba(0,0,0,.5);padding:2px 7px;border-radius:20px;border:1px solid rgba(255,170,100,.2); }
.gg-sl { font-size:.52rem;color:#ffaa66;font-family:var(--font-hud);font-weight:700; }
.gg-sv { font-size:.95rem;font-weight:700;color:#fff;font-family:'Courier New',monospace; }
.gg-p-chip { display:flex;align-items:center;gap:.35rem;background:rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08);border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.25);border-radius:20px;padding:.2rem .5rem; }
.gg-p-chip-av { width:22px;height:22px;border-radius:50%;object-fit:cover; }
.gg-p-chip-nm { font-size:.6rem;font-weight:700;color:var(--ac);font-family:var(--font-hud); }
.gg-p-chip-lbl { font-size:.48rem;color:rgba(255,255,255,.35);font-family:var(--font-hud);letter-spacing:.08em; }

.gg-area { display:flex;gap:.4rem;align-items:flex-start;width:100%;min-height:0; }
.gg-side { background:rgba(0,0,0,.45);border-radius:10px;padding:.5rem .4rem;width:82px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:.4rem; }
.gg-side-r { border:1px solid rgba(255,170,100,.2); }
.gg-side-p { border:1px solid rgba(255,136,100,.2); }
.gg-side-ttl { font-family:var(--font-hud);font-size:.52rem;font-weight:700;letter-spacing:.1em;text-align:center; }
.gg-side-list { display:flex;flex-direction:column;gap:.3rem;width:100%; }
.gg-si { display:flex;align-items:center;gap:5px;width:100%;padding:2px 0; }
/* logrado */
.gg-si--done .gg-si-nm { color:rgba(255,255,255,.75); }
.gg-si-ic { width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;border:2px solid var(--hc,#ffaa66);background:rgba(0,0,0,.4);transition:all .2s;flex-shrink:0; }
.gg-si-ic.is-done { box-shadow:0 0 8px var(--hc,#ffaa66);background:rgba(0,0,0,.2); }
/* proximo */
.gg-si--next { flex-direction:column;align-items:stretch;gap:3px;padding:5px 4px;background:rgba(255,255,255,.06);border-radius:8px;border:1px solid rgba(255,255,255,.15);width:100%;margin:1px 0; }
.gg-si--next.gg-si--near { border-color:var(--hc,#ffaa66);animation:gg-near-pulse 1.1s infinite; }
.gg-si-ic-next { width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;border:2px solid var(--hc,#ffaa66);background:rgba(0,0,0,.3);flex-shrink:0;align-self:center;margin-bottom:2px; }
.gg-si-body { display:flex;flex-direction:column;gap:2px;width:100%; }
.gg-si-nm-next { font-size:.44rem;font-family:var(--font-hud);letter-spacing:.05em;line-height:1.3; }
.gg-si-nm-next strong { font-weight:700; }
.gg-si-prog-wrap { width:100%;height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden; }
.gg-si-prog-fill { height:100%;border-radius:3px;transition:width .45s ease; }
.gg-si-lvl-lbl { font-size:.37rem;color:rgba(255,255,255,.38);font-family:var(--font-hud);letter-spacing:.04em; }
/* futuro siempre visible */
.gg-si--future { align-items:center; }
.gg-si-ic-future { width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.88rem;border:1.5px solid var(--hc,#ffaa66);background:rgba(0,0,0,.3);flex-shrink:0;transition:opacity .3s; }
.gg-si-nm-future { display:flex;flex-direction:column;gap:0px;min-width:0;transition:opacity .3s; }
.gg-si-nm { font-size:.44rem;color:rgba(255,255,255,.45);font-family:var(--font-hud);letter-spacing:.04em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46px; }
.gg-si-nm--done { color:rgba(255,255,255,.75); }
.gg-si-nm--lock { color:rgba(255,255,255,.15); }
.gg-si-lv-badge { font-size:.34rem;color:rgba(255,255,255,.25);font-family:var(--font-hud);letter-spacing:.03em; }
@keyframes gg-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08);box-shadow:0 0 10px var(--hc,#ffaa66)} }
@keyframes gg-near-pulse { 0%,100%{box-shadow:0 0 5px var(--hc,#ffaa66)} 50%{box-shadow:0 0 15px var(--hc,#ffaa66),0 0 26px var(--hc,#ffaa66)} }
/* end screen */
.gg-end-sec-title { font-size:.56rem;color:rgba(255,255,255,.5);font-family:var(--font-hud);letter-spacing:.1em;margin:.45rem 0 .2rem;text-align:left; }
.gg-end-items-grid { display:flex;flex-direction:column;gap:.28rem;margin-bottom:.4rem; }
.gg-end-item { display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;column-gap:.35rem;align-items:start;background:rgba(255,255,255,.04);border-radius:7px;padding:.3rem .45rem;border-left:3px solid transparent; }
.gg-end-item--rew { border-left-color:rgba(255,190,50,.8); }
.gg-end-item--pun { border-left-color:rgba(255,100,80,.8); }
.gg-end-item-em { grid-row:1/3;font-size:1.2rem;line-height:1;align-self:center; }
.gg-end-item-nm { font-size:.58rem;font-weight:700;color:#fff;font-family:var(--font-hud);letter-spacing:.04em; }
.gg-end-item-ds { font-size:.5rem;color:rgba(255,255,255,.45); }
.gg-end-empty { font-size:.58rem;color:rgba(255,255,255,.3);text-align:center;padding:.5rem 0; }

#gg-canvas { display:block;border-radius:12px;border:2px solid rgba(255,170,100,.25);cursor:crosshair;touch-action:none; }
.gg-hint { font-size:.53rem;color:rgba(255,170,100,.45);text-align:center;font-family:var(--font-hud);letter-spacing:.04em;line-height:1.4;width:100%; }

/* ── MODALES DEL JUEGO ── */
.gg-modal { position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8);backdrop-filter:blur(3px); }
.gg-modal[hidden] { display:none!important; }
.gg-modal-box { background:var(--panel-bg);border:1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);border-radius:12px;padding:1.4rem 1.2rem;width:min(380px,90%);text-align:center;box-shadow:0 0 30px rgba(var(--ac-r),var(--ac-g),var(--ac-b),.12); }
.gg-modal-logo { margin-bottom:.6rem;display:flex;justify-content:center; }
.gg-modal-title { font-family:var(--font-hud);font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--ac);margin-bottom:.6rem; }
.gg-modal-emoji { font-size:3rem;margin:.3rem 0; }
.gg-modal-name { font-family:var(--font-hud);font-size:.82rem;font-weight:700;color:#fff;margin-bottom:.3rem; }
.gg-modal-desc { font-size:.67rem;color:rgba(255,255,255,.55);margin-bottom:.3rem;line-height:1.5; }
.gg-modal-pmsg { font-size:.65rem;color:var(--ac);margin:.4rem 0;font-style:italic;line-height:1.4; }
.gg-modal-acts { display:flex;flex-direction:column;gap:.35rem;margin-top:.7rem; }
.gg-ch-btn { font-size:.6rem!important;padding:.35rem 1rem!important;width:100%; }
.gg-end-stats { display:flex;gap:.5rem;justify-content:center;margin:.4rem 0; }
.gg-end-st-row { display:flex;flex-direction:column;align-items:center;gap:.1rem;background:rgba(255,255,255,.05);border-radius:8px;padding:.4rem .7rem; }
.gg-end-st-row span { font-size:.55rem;color:rgba(255,255,255,.4);font-family:var(--font-hud); }
.gg-end-st-row strong { font-size:1.2rem;color:#fff;font-family:'Courier New',monospace; }
.gg-end-items { display:flex;flex-direction:column;gap:.25rem;margin:.3rem 0; }

/* gg-root relative para que los modales absolutos queden dentro */
#game-content-1 { position:relative;width:100%;height:100%;overflow:hidden;display:flex;flex-direction:row;align-items:stretch; }
#game-content-1 .gg-root { position:relative;height:100%; }

/* ── Responsive del juego ─────────────────────────────────────── */

/* Tablet: columnas más compactas */
@media(max-width:820px){
    .gg-side { width:68px;min-width:68px; }
    .gg-si-ic { width:32px;height:32px;font-size:.9rem; }
    .gg-si-nm { font-size:.42rem; }
    .gg-side-ttl { font-size:.48rem; }
}

/* Móvil grande: columnas se ponen abajo del canvas en fila horizontal */
@media(max-width:600px){
    .gg-area { flex-direction:column;align-items:center;gap:.4rem; }
    .gg-sides-row { display:flex;gap:.5rem;width:100%;justify-content:center; }
    .gg-side { width:auto;flex:1;max-width:45%;padding:.4rem .5rem; }
    .gg-side-list { flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.3rem; }
    .gg-si { min-width:52px; }
    .gg-si-ic { width:34px;height:34px;font-size:1rem; }
    .gg-si-nm { font-size:.44rem;max-width:54px; }
    /* #gg-canvas size managed by JS fitCanvas() */
}

/* Móvil pequeño */
@media(max-width:400px){
    .gg-side { max-width:48%; }
    .gg-si-ic { width:28px;height:28px;font-size:.85rem; }
    .gg-topbar { padding:.25rem .4rem; }
    .gg-sv { font-size:.8rem; }
}

/* Botones de modo en móvil */
@media(max-width:580px){
    .gg-area { gap:.3rem; }
    .gg-mode-row { flex-direction:column;align-items:center; }
    .gg-mode-btn { width:100%;max-width:300px;flex-direction:row;padding:.7rem 1rem; }
}

/* Mobile sides row — oculto en desktop, visible en móvil */
.gg-sides-row { display:none; }

@media(max-width:600px){
    /* Ocultar columnas laterales del desktop */
    .gg-area .gg-side { display:none; }
    /* Mostrar fila inferior con ambas columnas */
    .gg-sides-row {
        display:flex;
        gap:.5rem;
        width:100%;
        justify-content:center;
    }
    .gg-side-mobile {
        display:flex !important;
        flex:1;
        max-width:48%;
        padding:.4rem .5rem;
    }
    .gg-side-mobile .gg-side-list {
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
        gap:.3rem;
    }
    .gg-side-mobile .gg-si { min-width:46px; }
    .gg-side-mobile .gg-si-ic { width:32px;height:32px;font-size:.9rem; }
    .gg-side-mobile .gg-si-nm { font-size:.42rem;max-width:50px; }
    .gg-side-mobile .gg-side-ttl { font-size:.5rem;margin-bottom:.25rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   JUEGO v1.4.79 — Layout externo (metas · juego · banner)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Outer layout: 3 columnas ─────────────────────────────────── */
.gg-outer-layout {
    display:flex;
    gap:.4rem;
    width:100%;
    height:100%;
    align-items:flex-start;
    justify-content:center;
    padding:.4rem;
    box-sizing:border-box;
    overflow:hidden;
    flex:1;
}

/* Centro: contiene el gg-root del juego */
.gg-outer-center {
    flex:1;
    min-width:0;
    max-width:700px;
    height:100%;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
}
.gg-outer-center .gg-root { position:relative; height:100%; overflow:auto; }

/* Columna izquierda: Metas + Motivaciones EN FILA, ancho mínimo */
.gg-outer-left {
    flex-shrink:0;
    width:auto;           /* se ajusta al contenido */
    display:flex;
    flex-direction:row;   /* FILA: metas | motivaciones lado a lado */
    gap:.3rem;
    align-items:flex-start;
    max-height:100%;
    overflow-y:auto;
    scrollbar-width:none;
}
.gg-outer-left::-webkit-scrollbar { display:none; }

/* Columna derecha: banner de regalos */
.gg-outer-right {
    flex-shrink:0;
    width:140px;
    display:flex;
    flex-direction:column;
    gap:.4rem;
    max-height:100%;
    overflow-y:auto;
    scrollbar-width:none;
}
.gg-outer-right::-webkit-scrollbar { display:none; }

/* ── Sub-columnas dentro de .gg-outer-left ─────────────────────── */
/* Cada sub-columna (Metas / Motivaciones) ocupa solo lo necesario */
.gg-outer-col {
    background:rgba(0,0,0,.45);
    border-radius:10px;
    padding:.4rem .3rem;
    display:flex;
    flex-direction:column;
    gap:.25rem;
    width:56px;           /* ancho fijo mínimo: ícono 32px + padding */
    flex-shrink:0;
}
.gg-outer-col__title {
    font-family:var(--font-hud);
    font-size:.42rem;
    font-weight:700;
    letter-spacing:.06em;
    text-align:center;
    margin-bottom:.1rem;
    white-space:nowrap;
}
.gg-outer-col__list {
    display:flex;
    flex-direction:column;
    gap:.2rem;
    width:100%;
    align-items:center;
}

/* ── Items con ícono + nombre debajo (layout columna) ──────────── */
.gg-si--icon-col {
    flex-direction:column !important;
    align-items:center !important;
    gap:2px !important;
    padding:2px 1px !important;
    width:100% !important;
}

/* Nombre debajo del ícono — pequeño, cabe en 56px */
.gg-si-nm--below {
    display:block !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:52px !important;
    width:100% !important;
    font-size:.32rem !important;
    line-height:1.15 !important;
    word-break:break-word;
    color:rgba(255,255,255,.5) !important;
}

/* Nombre de la meta ACTUAL — más grande, destacado */
.gg-si-nm--current {
    display:block !important;
    text-align:center !important;
    font-size:.4rem !important;
    font-weight:700 !important;
    font-family:var(--font-hud);
    letter-spacing:.02em;
    line-height:1.2;
    white-space:normal !important;
    max-width:52px !important;
    width:100% !important;
    word-break:break-word;
}

/* Nombre de ítems futuros — el más pequeño */
.gg-si-nm--future-lbl {
    font-size:.29rem !important;
    color:rgba(255,255,255,.35) !important;
    letter-spacing:.02em;
}

/* Ítem "próximo/actual" — barra de progreso debajo del nombre */
.gg-si--next.gg-si--icon-col {
    padding:4px 3px !important;
    background:rgba(255,255,255,.06);
    border-radius:7px;
    border:1px solid rgba(255,255,255,.15);
    margin:1px 0;
    width:100% !important;
}
.gg-si--next.gg-si--near.gg-si--icon-col {
    border-color:var(--hc,#ffaa66);
    animation:gg-near-pulse 1.1s infinite;
}

/* Íconos más compactos en las columnas externas */
.gg-outer-col .gg-si-ic,
.gg-outer-col .gg-si-ic-next,
.gg-outer-col .gg-si-ic-future {
    width:28px !important;
    height:28px !important;
    font-size:.85rem !important;
}
/* Barra de progreso en el ítem actual — ocupa todo el ancho */
.gg-outer-col .gg-si-prog-wrap { width:100%; height:4px; }
/* Label de nivel — muy compacto */
.gg-outer-col .gg-si-lvl-lbl { font-size:.28rem; }

/* ── Banner externo de regalos ────────────────────────────────── */
.gg-ext-banner {
    width:100%;
}
.gg-ext-banner__empty {
    font-size:.5rem;
    color:rgba(255,255,255,.25);
    text-align:center;
    padding:1.5rem .5rem;
    font-family:var(--font-hud);
    line-height:1.6;
}
.gg-ext-banner__card {
    background:linear-gradient(160deg,#1a1f2e,#0f1724);
    border:1px solid rgba(100,160,255,.25);
    border-radius:12px;
    padding:.55rem .5rem;
    display:flex;
    flex-direction:column;
    gap:.3rem;
    animation:gg-banner-in .35s ease;
}
.gg-ext-banner__card.is-featured {
    border-color:rgba(255,215,0,.35);
    box-shadow:0 0 12px rgba(255,215,0,.1);
}
@keyframes gg-banner-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.gg-ext-banner__badges {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.2rem;
}
.gg-ext-banner__badge-type {
    font-size:.38rem;
    font-family:var(--font-hud);
    font-weight:700;
    letter-spacing:.06em;
    background:linear-gradient(90deg,rgba(240,100,100,.9),rgba(160,50,200,.9));
    color:#fff;
    padding:2px 6px;
    border-radius:6px;
}
.gg-ext-banner__card:not(.is-featured) .gg-ext-banner__badge-type {
    background:linear-gradient(90deg,rgba(80,130,240,.88),rgba(80,80,200,.88));
}
.gg-ext-banner__week {
    font-size:.35rem;
    font-family:var(--font-hud);
    color:rgba(255,215,0,.8);
    background:rgba(255,215,0,.12);
    padding:2px 5px;
    border-radius:5px;
}
.gg-ext-banner__img-wrap {
    width:100%;
    aspect-ratio:1/1;
    border-radius:8px;
    overflow:hidden;
    background:rgba(255,255,255,.04);
    display:flex;
    align-items:center;
    justify-content:center;
}
.gg-ext-banner__img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.gg-ext-banner__img-ph {
    font-size:2.2rem;
    opacity:.5;
}
.gg-ext-banner__title {
    font-size:.5rem;
    font-weight:700;
    font-family:var(--font-hud);
    color:#fff;
    text-align:center;
    letter-spacing:.04em;
    line-height:1.3;
    word-break:break-word;
}
.gg-ext-banner__card.is-featured .gg-ext-banner__title {
    background:linear-gradient(90deg,#fff,#ffd966);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.gg-ext-banner__desc {
    font-size:.4rem;
    color:rgba(255,255,255,.55);
    text-align:center;
    line-height:1.4;
    word-break:break-word;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.gg-ext-banner__footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.2rem;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:.3rem;
    margin-top:.1rem;
}
.gg-ext-banner__sponsor {
    display:flex;
    align-items:center;
    gap:.2rem;
    min-width:0;
    flex:1;
}
.gg-ext-banner__spon-av {
    width:16px;
    height:16px;
    border-radius:50%;
    background:rgba(255,215,0,.2);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.32rem;
    font-weight:700;
    color:rgba(255,215,0,.9);
    flex-shrink:0;
}
.gg-ext-banner__spon-nm {
    font-size:.38rem;
    color:rgba(255,215,0,.75);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}
.gg-ext-banner__votes {
    font-size:.38rem;
    color:rgba(200,200,200,.5);
    white-space:nowrap;
    flex-shrink:0;
}
.gg-ext-banner__stars {
    font-size:.5rem;
    text-align:center;
    opacity:.7;
}
.gg-ext-banner__cta {
    font-size:.4rem;
    font-family:var(--font-hud);
    font-weight:700;
    letter-spacing:.06em;
    text-align:center;
    background:linear-gradient(90deg,rgba(255,107,107,.9),rgba(255,142,83,.9));
    color:#fff;
    padding:4px 6px;
    border-radius:8px;
    cursor:pointer;
    transition:opacity .15s;
}
.gg-ext-banner__cta:hover { opacity:.85; }
.gg-ext-banner__dots {
    display:flex;
    justify-content:center;
    gap:4px;
    margin-top:.1rem;
}
.gg-ext-banner__dot {
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(255,255,255,.25);
    transition:all .2s;
}
.gg-ext-banner__dot.is-active {
    background:rgba(255,107,107,.9);
    width:12px;
    border-radius:3px;
}

/* ── Ajuste: game-fullscreen__content ahora contiene el outer-layout ── */
.game-fullscreen__content {
    padding:0 !important;
    align-items:stretch !important;
}
#game-content-1 {
    width:100%;
    height:100%;
    overflow:hidden;
    display:flex;
    flex-direction:row;
    align-items:stretch;
}

/* ── Responsive outer layout ──────────────────────────────────── */

/* Tablet ancho: banner un poco más estrecho */
@media(max-width:900px){
    .gg-outer-right { width:120px; }
    .gg-outer-col   { width:50px; }
}

/* Tablet chico */
@media(max-width:720px){
    .gg-outer-right { width:100px; }
    .gg-outer-col   { width:46px; }
    .gg-outer-col__title { font-size:.38rem; }
    .gg-outer-layout { gap:.25rem; padding:.3rem; }
}

/* Móvil: layout columna — metas+motivaciones arriba en fila, juego, banner abajo */
/* ━━ MÓVIL ≤580px ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:580px){

    /* El fullscreen ocupa exactamente el viewport (dvh evita barra del browser) */
    .game-fullscreen       { height:100dvh; overflow:hidden; }
    .game-fullscreen__content { flex:1; min-height:0; overflow:hidden; padding:0 !important; }
    #game-content-1        { width:100%; height:100%; overflow:hidden; }

    /* Layout exterior: fila horizontal */
    .gg-outer-layout {
        flex-direction:row !important;
        height:100%;
        width:100%;
        padding:.15rem;
        gap:.15rem;
        overflow:hidden;
        align-items:stretch;
    }

    /* Columna izquierda (metas + motivaciones lado a lado) */
    .gg-outer-left {
        display:flex !important;
        flex-direction:row !important;
        gap:.12rem;
        width:auto;
        flex-shrink:0;
        overflow:hidden;
        align-items:flex-start;
    }
    .gg-outer-right { display:none !important; }

    /* Sub-columnas ultra compactas */
    .gg-outer-col           { width:42px; padding:.2rem .15rem; overflow:hidden; }
    .gg-outer-col__title    { font-size:.32rem; margin-bottom:.05rem; white-space:nowrap; }
    .gg-outer-col__list     { gap:.1rem; overflow:hidden; }
    .gg-si--icon-col        { gap:1px !important; padding:1px !important; }
    .gg-outer-col .gg-si-ic,
    .gg-outer-col .gg-si-ic-next,
    .gg-outer-col .gg-si-ic-future { width:20px !important; height:20px !important; font-size:.6rem !important; }
    .gg-si-nm--below        { font-size:.25rem !important; }
    .gg-si-nm--current      { font-size:.28rem !important; }
    .gg-si-nm--future-lbl   { font-size:.22rem !important; }
    .gg-si-prog-wrap        { height:2px; }
    .gg-si-lvl-lbl          { display:none; }

    /* Centro: todo el ancho restante */
    .gg-outer-center {
        flex:1 !important;
        min-width:0;
        overflow:hidden;
        display:flex;
        flex-direction:column;
    }

    /* gg-root: flex column, sin min-height, sin padding que infle */
    .gg-outer-center .gg-root {
        display:flex !important;
        flex-direction:column !important;
        min-height:0 !important;
        height:100% !important;
        padding:.1rem !important;
        overflow:hidden !important;
        box-sizing:border-box;
    }

    /* Pantallas inicio/selector: absolute para no afectar el flujo */
    .gg-outer-center .gg-s-start,
    .gg-outer-center .gg-s-partner {
        position:absolute;
        inset:0;
        overflow-y:auto;
        z-index:5;
        background:#0f0f1a;
        padding:.5rem;
        box-sizing:border-box;
        margin:0;
        max-width:none;
    }

    /* gg-s-game: flex column, llena todo */
    .gg-outer-center .gg-s-game {
        flex:1 !important;
        min-height:0 !important;
        display:flex !important;
        flex-direction:column !important;
        overflow:hidden !important;
        gap:.15rem;
        padding:0;
        width:100%;
        max-width:none;
    }

    /* Banner móvil compacto — dentro del flex column del juego */
    .gg-mob-banner {
        margin:0 .1rem;
        flex-shrink:0;
    }

    /* Topbar: fijo y compacto */
    .gg-outer-center .gg-topbar {
        flex-shrink:0;
        padding:.1rem .25rem;
        border-radius:12px;
    }
    .gg-sl { font-size:.36rem; }
    .gg-sv { font-size:.65rem; }
    .gg-p-chip { display:none !important; }

    /* gg-area: llena todo lo que queda, canvas pegado arriba */
    .gg-outer-center .gg-area {
        flex:1 !important;
        min-height:0 !important;
        display:flex !important;
        align-items:flex-start !important;
        justify-content:center;
        overflow:hidden;
        gap:0;
    }

    /* Canvas: JS fija width/height exactos via setProperty(!important) */
    .gg-outer-center #gg-canvas {
        display:block;
        flex-shrink:0 !important;
        border-radius:6px;
    }

    /* Ocultar elementos innecesarios */
    .gg-hint                    { display:none !important; }
    .gg-sides-row               { display:none !important; }
    .gg-area .gg-side           { display:none !important; }
    .gg-outer-center .gg-s-game .gg-sides-row { display:none !important; }
}


/* Ocultar columnas externas durante pantallas de inicio/selección */
.game-selecting .gg-outer-left { visibility:hidden; }
.game-selecting .gg-outer-right { visibility:hidden; }
/* ── v1.4.79: cuando el outer-layout está activo, ocultar columnas internas del canvas ── */
.gg-outer-center .gg-area .gg-side { display:none !important; }
.gg-outer-center .gg-sides-row      { display:none !important; }
/* Canvas: JS gestiona el tamaño via fitCanvas() */
.gg-outer-center #gg-canvas { display:block; border-radius:12px; flex-shrink:0; }
/* gg-s-game sin columnas laterales — canvas al 100% */
.gg-outer-center .gg-s-game { max-width:100%; }
.gg-outer-center .gg-area   { gap:0; }

/* ── Banner compacto de regalo para móvil ─────────────────────────── */
/* Oculto en desktop — JS lo activa cuando gg-outer-right no es visible */
.gg-mob-banner {
    display:none;
    align-items:center;
    gap:.3rem;
    background:linear-gradient(90deg,#1a1f2e 0%,#0f1724 100%);
    border:1px solid rgba(255,215,0,.22);
    border-radius:8px;
    padding:.22rem .3rem;
    flex-shrink:0;
    overflow:hidden;
    cursor:pointer;
    animation:gg-banner-in .3s ease;
    transition:border-color .2s;
}
.gg-mob-banner:hover { border-color:rgba(255,215,0,.45); }
.gg-mob-banner__img-wrap {
    width:30px; height:30px; border-radius:6px; overflow:hidden; flex-shrink:0;
    background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center;
}
.gg-mob-banner__img { width:100%; height:100%; object-fit:cover; display:block; }
.gg-mob-banner__img-ph { font-size:.9rem; opacity:.6; }
.gg-mob-banner__body {
    flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; overflow:hidden;
}
.gg-mob-banner__badge {
    font-size:.35rem; font-family:var(--font-hud); font-weight:700; letter-spacing:.06em;
    background:linear-gradient(90deg,rgba(80,130,240,.88),rgba(80,80,200,.88));
    color:#fff; padding:1px 5px; border-radius:4px; align-self:flex-start; white-space:nowrap;
}
.gg-mob-banner__badge--feat {
    background:linear-gradient(90deg,rgba(255,215,0,.85),rgba(255,140,50,.85));
    color:#1a1a2e;
}
.gg-mob-banner__title {
    font-size:.48rem; font-family:var(--font-hud); font-weight:700; color:#fff;
    letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gg-mob-banner__spon {
    font-size:.38rem; color:rgba(255,215,0,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gg-mob-banner__right {
    flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:.15rem;
}
.gg-mob-banner__dots { display:flex; gap:2px; align-items:center; }
.gg-mob-banner__dot {
    width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.22); transition:all .2s;
}
.gg-mob-banner__dot.is-active { background:rgba(255,215,0,.8); width:9px; border-radius:2px; }
.gg-mob-banner__cta {
    font-size:.38rem; font-family:var(--font-hud); font-weight:700; letter-spacing:.06em;
    background:linear-gradient(90deg,rgba(255,107,107,.9),rgba(255,142,83,.9));
    color:#fff; padding:2px 7px; border-radius:5px; border:none; cursor:pointer;
    white-space:nowrap; transition:opacity .15s;
}
.gg-mob-banner__cta:hover { opacity:.82; }

@media(max-width:580px){
    /* Activar display flex en móvil — JS pone hidden=false cuando hay regalo */
    .gg-mob-banner { display:flex; }
}

/* ━━ BOTONES ICONO — hud-icon-actions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hud-icon-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .3rem .4rem;
    flex-wrap: nowrap;
    background: transparent;      /* Sin fondo — completamente transparente */
    backdrop-filter: none;        /* Sin blur */
    -webkit-backdrop-filter: none;
}
.hud-icon-btn-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    background: transparent;      /* Sin fondo en los botones */
    border: none;                 /* Sin borde */
    cursor: pointer;
    padding: .45rem .55rem;
    min-width: 52px;
    flex: 1;
    max-width: 80px;
    transition: color .2s, transform .15s, opacity .2s;
    clip-path: none;              /* Sin clip-path */
    position: relative;
    opacity: .85;
}
.hud-icon-btn-action svg {
    flex-shrink: 0;
    transition: transform .2s;
}
.hud-icon-btn-action span {
    font-family: var(--font-hud);
    font-size: .38rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
.hud-icon-btn-action:hover {
    opacity: 1;
    transform: translateY(-2px);
}
.hud-icon-btn-action:hover svg { transform: translateY(-1px); }
.hud-icon-btn-action:active { transform: translateY(0); opacity: .9; }

/* ── Colores individuales por botón ──────────────────────────────── */

/* PUBLICAR → acento del usuario */
#btn-publish {
    color: var(--ac);
}
#btn-publish:hover {
    color: var(--ac);
    filter: brightness(1.2) drop-shadow(0 0 6px var(--ac));
}

/* POSTS → blanco/plata */
#btn-feed {
    color: rgba(255,255,255,.75);
}
#btn-feed:hover {
    color: #fff;
    filter: drop-shadow(0 0 5px rgba(255,255,255,.5));
}

/* REGALAR → dorado */
#btn-gift {
    color: #ffc800;
}
#btn-gift:hover {
    color: #ffd740;
    filter: drop-shadow(0 0 6px rgba(255,200,0,.6));
}

/* PREMIOS → naranja */
#btn-prizes {
    color: #ff8c00;
}
#btn-prizes:hover {
    color: #ffa733;
    filter: drop-shadow(0 0 6px rgba(255,140,0,.6));
}

/* CONTACTAR → cian */
#btn-chat {
    color: #00c8ff;
}
#btn-chat:hover {
    color: #33d6ff;
    filter: drop-shadow(0 0 6px rgba(0,200,255,.6));
}

/* JUGAR → magenta/rosa */
#btn-play-games {
    color: #ff3cac;
}
#btn-play-games:hover {
    color: #ff66c4;
    filter: drop-shadow(0 0 6px rgba(255,60,172,.6));
}

/* INSTALAR → verde */
#btn-install-pwa {
    color: #00ff8c;
}
#btn-install-pwa:hover {
    color: #33ffaa;
    filter: drop-shadow(0 0 6px rgba(0,255,140,.5));
}

/* Variantes legacy — mantenidas por compatibilidad, sin fondo */
.hud-icon-btn-action--primary  { /* color definido por #btn-publish */ }
.hud-icon-btn-action--secondary { /* color definido por #btn-gift */ }
.hud-icon-btn-action--play     { /* color definido por #btn-play-games */ }

/* ── Botón INSTALAR PWA ─────────────────────────────────── */
.hud-icon-btn-action--install {
    position: relative;
    overflow: visible;
    /* color y hover definidos por #btn-install-pwa arriba */
}
/* Pulso verde animado en la esquina superior derecha */
.hud-install-pulse {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff8c;
    box-shadow: 0 0 0 0 rgba(0,255,140,.7);
    animation: gyms-pulse 1.6s ease-out infinite;
}
@keyframes gyms-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,255,140,.7); }
    70%  { box-shadow: 0 0 0 6px rgba(0,255,140,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,255,140,0); }
}

/* ── Toast de notificación PWA ──────────────────────────── */
#gyms-pwa-toast {
    position: fixed;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: #0c1a14;
    border: 1px solid rgba(0,255,140,.35);
    color: #e0ffe8;
    font-size: .78rem;
    letter-spacing: .06em;
    padding: .6rem 1.2rem;
    border-radius: 8px;
    z-index: 99999;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    max-width: 90vw;
    text-align: center;
}
#gyms-pwa-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Badge chat */
.hud-icon-btn-action .hud-chat-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: .36rem;
    padding: .1rem .25rem;
}

/* Mobile: íconos más pequeños */
@media (max-width: 767px) {
    .hud-icon-btn-action { padding: .35rem .3rem; min-width: 40px; max-width: 60px; }
    .hud-icon-btn-action svg { width: 18px; height: 18px; }
    .hud-icon-btn-action span { font-size: .34rem; }
    .hud-icon-actions { gap: .25rem; padding: .2rem .3rem; }
}
@media (max-width: 390px) {
    .hud-icon-btn-action { padding: .28rem .22rem; min-width: 34px; max-width: 52px; }
    .hud-icon-btn-action svg { width: 16px; height: 16px; }
    .hud-icon-btn-action span { font-size: .3rem; letter-spacing: .08em; }
}

/* ━━ FEED HEADER — filtros icono+label ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.feed-panel__title-text {
    font-size: .7rem;
    letter-spacing: .14em;
}
.feed-filter__btn--icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .1rem !important;
    padding: .25rem .35rem !important;
    border-bottom: none !important;
    border: 1px solid transparent !important;
    line-height: 1 !important;
}
.feed-filter__btn--icon span {
    font-size: .42rem !important;
    letter-spacing: .1em !important;
    line-height: 1 !important;
}
.feed-filter__btn--icon svg {
    flex-shrink: 0;
    transition: transform .15s;
}
.feed-filter__btn--icon.is-active {
    border-color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.4) !important;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.08) !important;
    color: var(--ac) !important;
}
.feed-filter__btn--icon.is-active span { color: var(--ac) !important; }
.feed-filter__btn--icon:hover svg { transform: translateY(-1px); }
.hud-orbital { display:flex; flex-direction:column; justify-content:space-between; height:100%; }
.hud-reel { order: 1; }
.hud-orbital__logo { order: 2; margin: 0 auto; }
.hud-orbital__bar { order: 3; }