/* ═══════════════════════════════════════════════════════════
   PuffCase — header_nuevo.css
   Header rediseñado con iconos, indicador activo y animaciones
   ═══════════════════════════════════════════════════════════ */

/* ── NAV ITEMS REDISEÑADOS ──────────────────────────────────── */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--gray-light);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 10px;
    transition: color .2s, background .2s, transform .2s;
    white-space: nowrap;
    letter-spacing: 0.3px;
    position: relative;
}

.nav-item-ico {
    font-size: 1.15rem;
    line-height: 1;
    display: block;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}

.nav-item-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .75;
    transition: opacity .2s;
}

/* Hover */
.nav-item:hover {
    color: var(--white);
    background: rgba(124,58,237,.15);
    transform: translateY(-1px);
}
.nav-item:hover .nav-item-ico {
    transform: scale(1.25) rotate(-5deg);
}
.nav-item:hover .nav-item-label { opacity: 1; }

/* Indicador activo — línea inferior */
.nav-item::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 18%; right: 18%;
    height: 2px;
    background: linear-gradient(90deg, var(--purple-accent), var(--purple-glow));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}
.nav-item:hover::after {
    transform: scaleX(1);
}
/* Active indicator appears instantly — no transition to avoid flicker on page load */
.nav-item-active::after {
    transform: scaleX(1);
    transition: none !important;
}
.nav-item-active {
    color: var(--white) !important;
}
.nav-item-active .nav-item-label { opacity: 1 !important; }

/* Colores de acento por sección — solo hover, sin fondo activo persistente */
.nav-item--codes:hover    { background: rgba(99,102,241,.18) !important; }
.nav-item--sorteos:hover  { background: rgba(251,191,36,.13) !important; }
.nav-item--tienda:hover   { background: rgba(34,197,94,.13)  !important; }
.nav-item--minijuegos:hover { background: rgba(124,58,237,.18) !important; }
.nav-item--quien:hover    { background: rgba(255,255,255,.09) !important; }

.nav-item--codes:hover::after,    .nav-item--codes.nav-item-active::after    { background: linear-gradient(90deg,#6366f1,#818cf8); }
.nav-item--sorteos:hover::after,  .nav-item--sorteos.nav-item-active::after  { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.nav-item--tienda:hover::after,   .nav-item--tienda.nav-item-active::after   { background: linear-gradient(90deg,#22c55e,#4ade80); }
.nav-item--minijuegos:hover::after, .nav-item--minijuegos.nav-item-active::after { background: linear-gradient(90deg,var(--purple-accent),var(--purple-glow)); }

/* ── HEADER — borde inferior con gradiente ──────────────────── */
header {
    border-bottom: 1px solid transparent !important;
    background-image:
        linear-gradient(rgba(13,10,26,0.92), rgba(13,10,26,0.92)),
        linear-gradient(90deg, rgba(124,58,237,.6), rgba(181,123,255,.4), rgba(240,192,64,.25), rgba(181,123,255,.4), rgba(124,58,237,.6)) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

/* ── LOGO — glow al hover ───────────────────────────────────── */
.header-logo {
    position: relative;
    display: flex;
    align-items: center;
}
.header-logo::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(124,58,237,.25), transparent 70%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.header-logo:hover::after { opacity: 1; }
.header-logo img {
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s !important;
}
.header-logo:hover img {
    transform: scale(1.08) rotate(-3deg) !important;
    filter: drop-shadow(0 0 12px rgba(181,123,255,.7)) !important;
}

/* ── SEPARADOR VISUAL entre logo y nav ─────────────────────── */
.nav-desktop {
    position: relative;
}
.nav-desktop::before,
.nav-desktop::after {
    content: '';
    width: 1px;
    height: 24px;
    background: linear-gradient(180deg, transparent, rgba(124,58,237,.4), transparent);
    flex-shrink: 0;
}

/* ── BADGE "NUEVO" en nav items (opcional) ─────────────────── */
.nav-item-new::before {
    content: 'NEW';
    position: absolute;
    top: 2px; right: 4px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 0.52rem;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
    letter-spacing: .05em;
    line-height: 1.4;
}

/* ── RESPONSIVE — nav items en mobile ──────────────────────── */
@media (max-width: 900px) {
    .nav-item-label { display: none; }
    .nav-item { padding: 8px 10px; }
    .nav-item-ico { font-size: 1.3rem; }
}