/* ═══════════════════════════════════════════════════════════════
   BOTTOM NAV — Bingo Lysto
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables DARK (por defecto) ── */
:root,
[data-theme="dark"] {
    --bn-bg              : rgba(13, 14, 26, 0.96);
    --bn-border          : rgba(255, 255, 255, 0.07);
    --bn-border-top      : rgba(255, 255, 255, 0.08);
    --bn-shadow-top      : rgba(0, 0, 0, 0.25);
    --bn-backdrop-bg     : rgba(15, 23, 42, 0.85);
    --bn-height          : 60px;

    --bn-item-color      : rgba(255, 255, 255, 0.38);
    --bn-item-hover      : rgba(255, 255, 255, 0.65);
    --bn-item-active     : #a5b4fc;
    --bn-active-bg       : rgba(99, 102, 241, 0.12);
    --bn-active-border   : rgba(99, 102, 241, 0.25);

    --bn-deposit-from    : #059669;
    --bn-deposit-to      : #10b981;
    --bn-deposit-glow    : rgba(16, 185, 129, 0.35);
    --bn-deposit-glow-hov: rgba(16, 185, 129, 0.50);
    --bn-deposit-ring    : rgba(16, 185, 129, 0.15);
    --bn-deposit-ring-hov: rgba(16, 185, 129, 0.25);
    --bn-deposit-label   : #10b981;

    --bn-scan-from       : #0ea5e9;
    --bn-scan-to         : #38bdf8;
    --bn-scan-glow       : rgba(56, 189, 248, 0.35);
    --bn-scan-glow-hov   : rgba(56, 189, 248, 0.50);
    --bn-scan-ring       : rgba(56, 189, 248, 0.18);
    --bn-scan-ring-hov   : rgba(56, 189, 248, 0.28);
    --bn-scan-label      : #38bdf8;

    --bn-withdraw-from   : #d97706;
    --bn-withdraw-to     : #f59e0b;
    --bn-withdraw-glow   : rgba(245, 158, 11, 0.35);
    --bn-withdraw-glow-hov: rgba(245, 158, 11, 0.50);
    --bn-withdraw-ring   : rgba(245, 158, 11, 0.18);
    --bn-withdraw-ring-hov: rgba(245, 158, 11, 0.28);
    --bn-withdraw-label  : #f59e0b;

    --bn-feature-size    : 56px;
    --bn-feature-width   : 72px;
    --bn-feature-radius  : 18px;
    --bn-badge-border    : rgba(13, 14, 26, 0.96);
    --bn-ripple          : rgba(255, 255, 255, 0.15);
    --bn-radius          : 20px 20px 0 0;
    --bn-font            : .58rem;
    --bn-icon            : 1.15rem;
    --bn-transition      : 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Variables LIGHT ── */
[data-theme="light"] {
    --bn-bg              : rgba(255, 255, 255, 0.97);
    --bn-border          : rgba(0, 0, 0, 0.06);
    --bn-border-top      : rgba(0, 0, 0, 0.08);
    --bn-shadow-top      : rgba(0, 0, 0, 0.08);
    --bn-backdrop-bg     : rgba(255, 255, 255, 0.92);

    --bn-item-color      : rgba(0, 0, 0, 0.35);
    --bn-item-hover      : rgba(0, 0, 0, 0.65);
    --bn-item-active     : #4f46e5;
    --bn-active-bg       : rgba(99, 102, 241, 0.08);
    --bn-active-border   : rgba(99, 102, 241, 0.20);

    --bn-deposit-from    : #059669;
    --bn-deposit-to      : #10b981;
    --bn-deposit-glow    : rgba(16, 185, 129, 0.28);
    --bn-deposit-glow-hov: rgba(16, 185, 129, 0.42);
    --bn-deposit-ring    : rgba(16, 185, 129, 0.12);
    --bn-deposit-ring-hov: rgba(16, 185, 129, 0.22);
    --bn-deposit-label   : #059669;

    --bn-scan-from       : #0284c7;
    --bn-scan-to         : #38bdf8;
    --bn-scan-glow       : rgba(56, 189, 248, 0.25);
    --bn-scan-glow-hov   : rgba(56, 189, 248, 0.40);
    --bn-scan-ring       : rgba(56, 189, 248, 0.15);
    --bn-scan-ring-hov   : rgba(56, 189, 248, 0.24);
    --bn-scan-label      : #0284c7;

    --bn-withdraw-from   : #d97706;
    --bn-withdraw-to     : #f59e0b;
    --bn-withdraw-glow   : rgba(245, 158, 11, 0.28);
    --bn-withdraw-glow-hov: rgba(245, 158, 11, 0.42);
    --bn-withdraw-ring   : rgba(245, 158, 11, 0.14);
    --bn-withdraw-ring-hov: rgba(245, 158, 11, 0.24);
    --bn-withdraw-label  : #d97706;

    --bn-badge-border    : rgba(255, 255, 255, 0.97);
    --bn-ripple          : rgba(99, 102, 241, 0.12);
}

/* ═══════════════════════════════════════════════════════════════
   CONTENEDOR
   ═══════════════════════════════════════════════════════════════ */
.bottom-nav-bl {
    position            : fixed;
    bottom              : 0;
    left                : 0;
    right               : 0;
    z-index             : 1030;
    border-radius       : var(--bn-radius);
    background          : var(--bn-backdrop-bg);
    backdrop-filter     : blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top          : 1px solid var(--bn-border-top);
    box-shadow          :
        0 -1px 0 var(--bn-border),
        0 -8px 32px var(--bn-shadow-top);
    display             : flex;
    justify-content     : space-around;
    align-items         : stretch;
    gap                 : 2px;
    padding             : 0 0 calc(0rem + env(safe-area-inset-bottom, 0px));
    transition          : background .3s ease,
                          border-color .3s ease,
                          box-shadow .3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   ITEM BASE
   ═══════════════════════════════════════════════════════════════ */
.bottom-nav-bl-item {
    position                  : relative;
    display                   : flex;
    flex-direction             : column;
    align-items               : center;
    justify-content           : center;
    gap                       : .22rem;
    flex                      : 1;
    color                     : var(--bn-item-color);
    border                    : none;
    background                : none;
    cursor                    : pointer;
    text-decoration           : none;
    font-size                 : 0.68rem;
    font-weight               : 500;
    padding                   : 0.4rem 0.5rem;
    transition                : color var(--bn-transition);
    -webkit-tap-highlight-color: transparent;
    outline                   : none;
    min-width                 : 18%;
}

.bottom-nav-bl-item i {
    font-size : var(--bn-icon);
    transition: transform var(--bn-transition),
                color var(--bn-transition);
    line-height: 1;
}

.bottom-nav-bl-item span {
    font-size     : var(--bn-font);
    font-weight   : 600;
    letter-spacing: .02em;
    line-height   : 1;
    transition    : color var(--bn-transition);
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

/* ── Hover ── */
.bottom-nav-bl-item:hover {
    color: var(--bn-item-hover);
}

.bottom-nav-bl-item:hover i {
    transform: translateY(-2px);
}

/* ── Active ── */
.bottom-nav-bl-item.active {
    color: var(--bn-item-active);
}

.bottom-nav-bl-item.active i {
    transform: translateY(-2px) scale(1.08);
}

@keyframes bn-pill-in {
    from { opacity: 0; transform: translateX(-50%) scale(.8); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES DESTACADOS — Misma base visual del botón Depositar
   ═══════════════════════════════════════════════════════════════ */
.bottom-nav-bl-item.bn-deposit,
.bottom-nav-bl-item.bn-scaner,
.bottom-nav-bl-item.bn-btn-scaner,
.bottom-nav-bl-item.bn-withdraw {
    flex      : 0 0 auto;
    width     : var(--bn-feature-width);
    position  : relative;
    margin-top: -20px;
    color     : #fff;
}

/* Círculo principal compartido */
.bottom-nav-bl-item.bn-deposit .bn-deposit-circle,
.bottom-nav-bl-item.bn-scaner .bn-scaner-circle,
.bottom-nav-bl-item.bn-btn-scaner .bn-scaner-circle,
.bottom-nav-bl-item.bn-withdraw .bn-withdraw-circle {
    width          : var(--bn-feature-size);
    height         : var(--bn-feature-size);
    border-radius  : var(--bn-feature-radius);
    display        : flex;
    align-items    : center;
    justify-content: center;
    position       : relative;
    overflow       : hidden;
    box-shadow     :
        0 4px 20px var(--bn-feature-glow),
        0 0 0 3px var(--bn-feature-ring),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition     : transform var(--bn-transition),
                     box-shadow var(--bn-transition);
}

/* Color por tipo */
.bottom-nav-bl-item.bn-deposit {
    --bn-feature-from    : var(--bn-deposit-from);
    --bn-feature-to      : var(--bn-deposit-to);
    --bn-feature-glow    : var(--bn-deposit-glow);
    --bn-feature-glow-hov: var(--bn-deposit-glow-hov);
    --bn-feature-ring    : var(--bn-deposit-ring);
    --bn-feature-ring-hov: var(--bn-deposit-ring-hov);
    --bn-feature-label   : var(--bn-deposit-label);
}

.bottom-nav-bl-item.bn-scaner,
.bottom-nav-bl-item.bn-btn-scaner {
    --bn-feature-from    : var(--bn-scan-from);
    --bn-feature-to      : var(--bn-scan-to);
    --bn-feature-glow    : var(--bn-scan-glow);
    --bn-feature-glow-hov: var(--bn-scan-glow-hov);
    --bn-feature-ring    : var(--bn-scan-ring);
    --bn-feature-ring-hov: var(--bn-scan-ring-hov);
    --bn-feature-label   : var(--bn-scan-label);
}

.bottom-nav-bl-item.bn-withdraw {
    --bn-feature-from    : var(--bn-withdraw-from);
    --bn-feature-to      : var(--bn-withdraw-to);
    --bn-feature-glow    : var(--bn-withdraw-glow);
    --bn-feature-glow-hov: var(--bn-withdraw-glow-hov);
    --bn-feature-ring    : var(--bn-withdraw-ring);
    --bn-feature-ring-hov: var(--bn-withdraw-ring-hov);
    --bn-feature-label   : var(--bn-withdraw-label);
}

/* Gradiente por círculo */
.bottom-nav-bl-item.bn-deposit .bn-deposit-circle,
.bottom-nav-bl-item.bn-scaner .bn-scaner-circle,
.bottom-nav-bl-item.bn-btn-scaner .bn-scaner-circle,
.bottom-nav-bl-item.bn-withdraw .bn-withdraw-circle {
    background: linear-gradient(135deg,
                var(--bn-feature-from),
                var(--bn-feature-to));
}

/* Brillo interno */
.bottom-nav-bl-item.bn-deposit .bn-deposit-circle::before,
.bottom-nav-bl-item.bn-scaner .bn-scaner-circle::before,
.bottom-nav-bl-item.bn-btn-scaner .bn-scaner-circle::before,
.bottom-nav-bl-item.bn-withdraw .bn-withdraw-circle::before {
    content      : '';
    position     : absolute;
    top          : -40%;
    left         : -40%;
    width        : 80%;
    height       : 80%;
    background   : rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    filter       : blur(8px);
}

/* Ícono dentro del círculo */
.bottom-nav-bl-item.bn-deposit .bn-deposit-circle i,
.bottom-nav-bl-item.bn-scaner .bn-scaner-circle i,
.bottom-nav-bl-item.bn-btn-scaner .bn-scaner-circle i,
.bottom-nav-bl-item.bn-withdraw .bn-withdraw-circle i {
    font-size : 1.3rem;
    color     : #fff;
    position  : relative;
    z-index   : 1;
    transition: transform var(--bn-transition);
}

/* Label debajo */
.bottom-nav-bl-item.bn-deposit span,
.bottom-nav-bl-item.bn-scaner span,
.bottom-nav-bl-item.bn-btn-scaner span,
.bottom-nav-bl-item.bn-withdraw span {
    font-size     : .5rem;
    font-weight   : 800;
    color         : var(--bn-feature-label);
    text-transform: uppercase;
    margin-top    : .15rem;
    transition    : color .3s ease;
}

/* Hover / Active compartido */
.bottom-nav-bl-item.bn-deposit:hover .bn-deposit-circle,
.bottom-nav-bl-item.bn-deposit:active .bn-deposit-circle,
.bottom-nav-bl-item.bn-scaner:hover .bn-scaner-circle,
.bottom-nav-bl-item.bn-scaner:active .bn-scaner-circle,
.bottom-nav-bl-item.bn-btn-scaner:hover .bn-scaner-circle,
.bottom-nav-bl-item.bn-btn-scaner:active .bn-scaner-circle,
.bottom-nav-bl-item.bn-withdraw:hover .bn-withdraw-circle,
.bottom-nav-bl-item.bn-withdraw:active .bn-withdraw-circle {
    transform : translateY(-3px) scale(1.06);
    box-shadow:
        0 8px 28px var(--bn-feature-glow-hov),
        0 0 0 4px var(--bn-feature-ring-hov),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Animación del ícono por tipo */
.bottom-nav-bl-item.bn-deposit:hover .bn-deposit-circle i {
    transform: rotate(90deg) scale(1.1);
}

.bottom-nav-bl-item.bn-scaner:hover .bn-scaner-circle i,
.bottom-nav-bl-item.bn-btn-scaner:hover .bn-scaner-circle i {
    transform: scale(1.12);
}

.bottom-nav-bl-item.bn-withdraw:hover .bn-withdraw-circle i {
    transform: translateY(2px) scale(1.08);
}

/* Pulso animado compartido */
.bottom-nav-bl-item.bn-deposit .bn-deposit-pulse,
.bottom-nav-bl-item.bn-scaner .bn-scaner-pulse,
.bottom-nav-bl-item.bn-btn-scaner .bn-scaner-pulse,
.bottom-nav-bl-item.bn-withdraw .bn-withdraw-pulse {
    position      : absolute;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%, -50%);
    width         : var(--bn-feature-size);
    height        : var(--bn-feature-size);
    border-radius : var(--bn-feature-radius);
    background    : var(--bn-feature-to);
    opacity       : 0;
    pointer-events: none;
    /* animation: bn-feature-pulse 2.5s ease-in-out infinite; */
}

@keyframes bn-feature-pulse {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(1); }
    40%  { opacity: 0.18; transform: translate(-50%, -50%) scale(1.35); }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.7); }
}

/* Compatibilidad con nombre anterior del keyframe de depósito */
@keyframes bn-deposit-pulse {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(1); }
    40%  { opacity: 0.18; transform: translate(-50%, -50%) scale(1.35); }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.7); }
}

/* Quitar pill/dot activo en botones destacados */
.bottom-nav-bl-item.bn-deposit::before,
.bottom-nav-bl-item.bn-deposit::after,
.bottom-nav-bl-item.bn-scaner::before,
.bottom-nav-bl-item.bn-scaner::after,
.bottom-nav-bl-item.bn-btn-scaner::before,
.bottom-nav-bl-item.bn-btn-scaner::after,
.bottom-nav-bl-item.bn-withdraw::before,
.bottom-nav-bl-item.bn-withdraw::after {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   BADGE DE NOTIFICACIÓN
   ═══════════════════════════════════════════════════════════════ */
.bn-badge {
    position      : absolute;
    top           : 4px;
    right         : calc(50% - 18px);
    min-width     : 16px;
    height        : 16px;
    padding       : 0 4px;
    border-radius : 50px;
    background    : #ef4444;
    color         : #fff;
    font-size     : .52rem;
    font-weight   : 800;
    display       : flex;
    align-items   : center;
    justify-content: center;
    border        : 2px solid var(--bn-badge-border);
    line-height   : 1;
    pointer-events: none;
    animation     : bn-badge-in .3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition    : border-color .3s ease;
}

@keyframes bn-badge-in {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   RIPPLE al tocar
   ═══════════════════════════════════════════════════════════════ */
.bottom-nav-bl-item .bn-ripple {
    position      : absolute;
    border-radius : 50%;
    background    : var(--bn-ripple);
    transform     : scale(0);
    animation     : bn-ripple .5s linear;
    pointer-events: none;
}

@keyframes bn-ripple {
    to { transform: scale(4); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP — ocultar
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .bottom-nav-bl {
        display: none;
    }
}