.sheet-backdrop{

    position:fixed;

    inset:0;

    background:
        var(--bg-overlay-medium);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity var(--transition),
        visibility var(--transition);

    z-index:9990;

}

.sheet-backdrop.active{

    opacity:1;

    visibility:visible;

}

.sheet{

    position:fixed;

    left:50%;

    bottom:4px;

    transform:
        translateX(-50%)
        translateY(105%);

    width:
        calc(100vw - 8px);

    height:80vh;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(18,18,18,.96),
            rgba(8,8,8,.985)
        );

    backdrop-filter:
        blur(32px);

    -webkit-backdrop-filter:
        blur(32px);

    border:
        1px solid var(--border-glass);

    border-radius:34px;

    box-shadow:
        var(--shadow-xl);

    z-index:9999;

    transition:
        transform .34s cubic-bezier(.2,.8,.2,1),
        height var(--transition);

}

/*
|--------------------------------------------------------------------------
| STATES
|--------------------------------------------------------------------------
*/

.sheet.is-open,
.sheet.expanded{

    transform:
        translateX(-50%)
        translateY(0);

    pointer-events:auto;

}

.sheet.collapsed{

    height:88px;

    overflow:visible;

    background:transparent;

    border:none;

    box-shadow:none;

    backdrop-filter:none;

    -webkit-backdrop-filter:none;

    pointer-events:none;

    transform:
        translateX(-50%)
        translateY(0);

}

/*
|--------------------------------------------------------------------------
| HANDLE
|--------------------------------------------------------------------------
*/

.sheet-handle{

    width:56px;

    height:5px;

    border-radius:
        var(--radius-pill);

    background:
        rgba(255,255,255,.14);

    margin:
        14px auto 10px;

}

/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/

.sheet-content{

    flex:1;

    overflow-y:auto;

    padding:
        26px
        26px
        calc(30px + env(safe-area-inset-bottom));

    -webkit-overflow-scrolling:touch;

    transition:
        opacity var(--transition-fast);

}

.sheet.collapsed .sheet-content{

    opacity:0;

    pointer-events:none;

}

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.sheet-header{

    margin-bottom:22px;

}

.sheet-title{

    margin:0 0 8px;

    font-size:clamp(
        1.9rem,
        3vw,
        2.8rem
    );

    line-height:.95;

    font-weight:800;

    letter-spacing:-.05em;

    color:
        var(--text-primary);

}

.sheet-subtitle{

    margin:0;

    max-width:560px;

    color:
        var(--text-faded);

    font-size:1rem;

    line-height:1.6;

}

/*
|--------------------------------------------------------------------------
| MINI
|--------------------------------------------------------------------------
*/

.sheet-mini{

    position:absolute;

    left:50%;

    bottom:58px;

    transform:
        translateX(-50%);

    z-index:50;

    display:flex;

    align-items:center;

    justify-content:center;

    pointer-events:auto;

    transition:
        opacity var(--transition),
        transform var(--transition);

}

.sheet.expanded .sheet-mini{

    opacity:0;

    pointer-events:none;

    transform:
        translateX(-50%)
        translateY(10px);

}

.sheet-mini-pill{

    display:inline-flex;

    align-items:center;

    gap:10px;

    min-height:54px;

    min-width:58px;

    padding:0 20px;

    border-radius:
        var(--radius-pill);

    border:
        1px solid rgba(255,255,255,.10);

    background:
        linear-gradient(
            135deg,
            rgba(46,45,94,.94),
            rgba(31,86,184,.88)
        );

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);

    color:
        var(--text-primary);

    font-size:.95rem;

    font-weight:700;

    box-shadow:
        0 18px 40px
        var(--brand-glow);

    cursor:pointer;

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);

}

.sheet-mini-pill:hover{

    transform:
        translateY(-1px);

}

.sheet-mini-pill i{

    font-size:.9rem;

    opacity:.9;

}

/*
|--------------------------------------------------------------------------
| AUTH
|--------------------------------------------------------------------------
*/

.auth-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.auth-field{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.auth-label-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.auth-label{

    color:
        var(--text-soft);

    font-size:.92rem;

    font-weight:600;

}

.auth-input{

    width:100%;

    height:60px;

    padding:0 20px;

    border-radius:20px;

    border:
        1px solid var(--border-glass);

    background:
        rgba(255,255,255,.035);

    color:
        var(--text-primary);

    font-size:1rem;

    outline:none;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);

}

.auth-input::placeholder{

    color:
        var(--text-dim);

}

.auth-input:focus{

    border-color:
        rgba(24,167,192,.38);

    background:
        rgba(255,255,255,.055);

}

.auth-submit{

    width:100%;

    height:60px;

    margin-top:10px;

    border:none;

    border-radius:22px;

    background:
        var(--brand-primary);

    color:#ffffff;

    font-size:1rem;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 14px 36px
        var(--brand-glow);

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast),
        box-shadow var(--transition-fast);

}

.auth-submit:hover{

    transform:
        translateY(-1px);

}

.auth-submit:active{

    transform:
        scale(.99);

}

.auth-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    margin:
        28px 0
        22px;

}

.auth-divider span{

    width:100%;

    height:1px;

    background:
        var(--border-glass);

}

.auth-secondary-button{

    width:100%;

    padding:14px;

    border-radius:16px;

    border:1px dashed
        var(--glass-border-strong);

    background:none;

    color:var(--text-soft);

    font-weight:600;

}

.auth-secondary-button:hover{

    opacity:.8;

}

.auth-text-button{

    border:none;

    background:transparent;

    color:
        var(--text-faded);

    font-size:.92rem;

    font-weight:700;

    cursor:pointer;

    transition:
        color var(--transition-fast);

}

.auth-text-button:hover{

    color:
        var(--text-primary);

}

.auth-message{

    min-height:20px;

    padding-left:4px;

    margin-top:14px;

    color:
        var(--text-soft);

    font-size:.92rem;

}

.auth-recovery-link{

    display:inline-flex;

    margin-top:-2px;

    color:
        var(--text-faded);

    font-size:.92rem;

    text-decoration:none;

    transition:
        color var(--transition-fast);

}

.auth-recovery-link:hover{

    color:
        var(--text-primary);

}

/*
|--------------------------------------------------------------------------
| BADGES
|--------------------------------------------------------------------------
*/

.auth-sheet-badges{

    display:flex;

    justify-content:center;

    gap:16px;

    margin-top:18px;

    flex-wrap:wrap;

}

.auth-sheet-badges span{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--text-faded);

    font-size:.82rem;

    font-weight:500;

}

.auth-sheet-badges span:first-child i{

    color:var(--local-orange);

}

.auth-sheet-badges span:last-child i{

    color:var(--local-cyan);

}

/*
|--------------------------------------------------------------------------
| REGISTER ROLES
|--------------------------------------------------------------------------
*/

.register-role-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:14px;

    margin:
        26px 0
        24px;

}

.register-role-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    gap:10px;

    padding:18px;

    min-height:124px;

    border-radius:24px;

    border:
        1px solid rgba(255,255,255,.05);

    background:
        rgba(255,255,255,.03);

    text-align:left;

    cursor:pointer;

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);

}

.register-role-card::before{

    content:'';

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(24,167,192,.14),
            transparent 58%
        );

    opacity:0;

    transition:
        opacity var(--transition-fast);

}

.register-role-card:hover{

    transform:
        translateY(-2px);

    border-color:
        rgba(255,255,255,.12);

}

.register-role-card:hover::before{

    opacity:1;

}

.register-role-card.active{

    background:
        var(--brand-primary-soft);

    border-color:
        var(--brand-primary);

    box-shadow:
        0 10px 30px
        var(--brand-glow);

}

.register-role-icon{

    position:relative;

    z-index:2;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:
        rgba(255,255,255,.05);

    color:
        rgba(255,255,255,.92);

    font-size:1rem;

}

.register-role-title{

    position:relative;

    z-index:2;

    font-size:1rem;

    font-weight:800;

    letter-spacing:-.03em;

    color:
        var(--text-primary);

}

.register-role-description{

    position:relative;

    z-index:2;

    font-size:.84rem;

    line-height:1.45;

    color:
        rgba(255,255,255,.58);

}

.register-role-helper{

    margin-top:18px;

    color:
        rgba(255,255,255,.5);

    font-size:.92rem;

    font-weight:600;

    letter-spacing:-.02em;

}

/*
|--------------------------------------------------------------------------
| PROFILE SHEET
|--------------------------------------------------------------------------
*/

.profile-sheet{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.profile-user-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.015)
        );

    border:
        1px solid rgba(255,255,255,.06);

    cursor:default;

    pointer-events:none;

}

.profile-user-card:hover{

    transform:none;

    border-color:
        rgba(255,255,255,.06);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.015)
        );

}

.profile-user-avatar{

    width:64px;

    height:64px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.4rem;

    font-weight:800;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--brand-primary),
            var(--local-blue)
        );

    border:
        1px solid rgba(255,255,255,.08);

}

.profile-user-meta{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.profile-user-meta strong{

    display:block;

    font-size:1.2rem;

    font-weight:700;

    color:#fff;

}

.profile-user-meta span{

    display:block;

    margin-top:.35rem;

    font-size:.92rem;

    color:
        rgba(255,255,255,.48);

}

.profile-sheet-actions{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.profile-sheet-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;

    border-radius:24px;

    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.02)
        );

    border:
        1px solid rgba(255,255,255,.06);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
        
    z-index: 999999;

}

.profile-sheet-card:hover{

    transform:
        translateY(-2px);

    border-color:
        rgba(24,167,192,.24);

}

.profile-sheet-icon{

    width:56px;

    height:56px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:1.15rem;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            rgba(24,167,192,.14),
            rgba(255,255,255,.03)
        );

    border:
        1px solid rgba(255,255,255,.06);

}

.profile-sheet-content{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:4px;

}

.profile-sheet-content strong{

    font-size:1rem;

    font-weight:800;

    color:#fff;

}

.profile-sheet-content p{

    margin:0;

    font-size:.92rem;

    line-height:1.4;

    color:
        rgba(255,255,255,.58);

}

.profile-sheet-arrow{

    font-size:.85rem;

    color:
        rgba(255,255,255,.35);

}

.profile-sheet-card.danger .profile-sheet-icon{

    background:
        linear-gradient(
            135deg,
            rgba(239,68,68,.18),
            rgba(255,255,255,.03)
        );

}

.profile-sheet-card.danger:hover{

    border-color:
        rgba(239,68,68,.28);

}

.profile-sheet-legal{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:.8rem;

    margin-top:2rem;

    padding-top:1.2rem;

    border-top:
        1px solid rgba(255,255,255,.06);

    font-size:.82rem;

    color:
        rgba(255,255,255,.38);

}

.profile-sheet-legal a{

    color:inherit;

    text-decoration:none;

    transition:
        color var(--transition-fast);

}

.profile-sheet-legal a:hover{

    color:
        rgba(255,255,255,.72);

}

.profile-sheet-legal span{

    opacity:.25;

}

/*
|--------------------------------------------------------------------------
| SHEET USER
|--------------------------------------------------------------------------
*/

.sheet-user{

    display:flex;

    align-items:center;

    gap:1rem;

}

.sheet-user-avatar{

    width:72px;

    height:72px;

    border-radius:1.6rem;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    font-weight:800;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--brand-primary),
            var(--local-blue)
        );

    border:
        1px solid rgba(255,255,255,.08);

    flex-shrink:0;

}

.sheet-user-meta{

    display:flex;

    flex-direction:column;

    gap:.35rem;

}

.sheet-user-meta strong{

    font-size:1.05rem;

    font-weight:700;

    color:
        rgba(255,255,255,.72);

}

/*
|--------------------------------------------------------------------------
| SHOP MENU SHEET
|--------------------------------------------------------------------------
*/

.shop-menu-backdrop{

    position:fixed;

    inset:0;

    z-index:10000;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    background:
        rgba(0,0,0,.55);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        opacity .2s ease,
        visibility .2s ease;

}

.shop-menu-backdrop.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

.shop-menu-sheet{

    position:fixed;

    left:50%;

    bottom:4px;

    transform:
        translateX(-50%)
        translateY(105%);

    width:
        calc(100vw - 8px);

    height:80vh;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:34px;

    border:
        1px solid rgba(255,255,255,.06);

    background:
        linear-gradient(
            180deg,
            rgba(18,18,18,.96),
            rgba(8,8,8,.985)
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);

    transition:
        transform .34s cubic-bezier(.2,.8,.2,1);

    z-index:10001;

}

.shop-menu-sheet.is-open{

    transform:
        translateX(-50%)
        translateY(0);

}

.shop-menu-handle{

    width:56px;

    height:5px;

    margin:
        14px auto 10px;

    border-radius:
        var(--radius-pill);

    background:
        rgba(255,255,255,.14);

}

.shop-menu-content{

    flex:1;

    overflow-y:auto;

    padding:
        26px
        26px
        calc(30px + env(safe-area-inset-bottom));

}

/*
|--------------------------------------------------------------------------
| RECHARGE SHEET
|--------------------------------------------------------------------------
*/

.recharge-sheet{

    display:flex;

    flex-direction:column;

    gap:32px;

}

.recharge-sheet-actions{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.recharge-sheet-button{

    width:100%;

    min-height:64px;

    border:none;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            var(--brand-primary),
            var(--local-blue)
        );

    color:#fff;

    font-size:1rem;

    font-weight:800;

    letter-spacing:-.02em;

    cursor:pointer;

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast),
        box-shadow var(--transition-fast);

    box-shadow:
        0 14px 36px
        var(--brand-glow);

}

.recharge-sheet-button:hover{

    transform:
        translateY(-2px);

}

.recharge-sheet-button:active{

    transform:
        scale(.99);

}

.recharge-sheet-info{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:22px;

    border-radius:28px;

    border:
        1px solid rgba(255,255,255,.06);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.015)
        );

}

.recharge-sheet-info-item{

    display:flex;

    align-items:flex-start;

    gap:14px;

    color:
        rgba(255,255,255,.72);

    font-size:.96rem;

    line-height:1.6;

}

.recharge-sheet-info-item i{

    margin-top:2px;

    color:
        var(--local-orange);

    font-size:.95rem;

}

/*
|--------------------------------------------------------------------------
| DELIVERY FREE
|--------------------------------------------------------------------------
*/

.delivery-free-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.delivery-free-form .form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.delivery-free-form label,
.form-group label{

    display:block;

    margin-bottom:10px;

    font-size:.9rem;

    font-weight:700;

    color:
        rgba(255,255,255,.88);

}

.delivery-free-form textarea{

    min-height:90px;

}

.delivery-kind-selector{

    display:flex;

    gap:10px;

    margin-top:10px;

    margin-bottom:16px;

}

.delivery-kind-option{

    flex:1;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    border:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.02);

    cursor:pointer;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);

}

.delivery-kind-option input{

    display:none;

}

.delivery-kind-option span{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    color:
        rgba(255,255,255,.7);

    font-size:.95rem;

    font-weight:700;

}

.delivery-kind-option span i{

    font-size:1rem;

    opacity:.85;

}

.delivery-kind-option.active{

    background:
        var(--brand-primary);

    border-color:
        var(--brand-primary);

}

.delivery-kind-option.active span,
.delivery-kind-option.active i{

    color:#ffffff !important;

}

.location-btn{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:0 16px;

}

.delivery-map-legend{

    display:flex;

    justify-content:space-between;

    gap:12px;

    margin-top:18px;

    margin-bottom:10px;

}

.delivery-map-legend span{

    flex:1;

    text-align:center;

    padding:10px;

    border-radius:12px;

    background:
        rgba(255,255,255,.04);

    font-size:.82rem;

    font-weight:600;

}

.delivery-search-item{

    padding:12px 14px;

    border-radius:14px;

    background:
        rgba(255,255,255,.04);

    cursor:pointer;

}

.delivery-search-item:hover{

    background:
        rgba(255,255,255,.08);

}

.delivery-map-marker{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.delivery-map-marker i{

    font-size:2.2rem;

    filter:
        drop-shadow(
            0 8px 18px rgba(0,0,0,.45)
        );

    animation:
        markerPulse 1.8s ease-in-out infinite;

}

.delivery-map-marker.pickup i{

    color:#ffffff;

}

.delivery-map-marker.delivery i{

    color:
        var(--danger);

}

.marker-label{

    width:110px;

    min-width:110px;

    text-align:center;

    margin-bottom:4px;

    padding:4px 10px;

    border-radius:
        var(--radius-pill);

    background:
        rgba(18,18,18,.92);

    border:
        1px solid rgba(255,255,255,.08);

    color:#fff;

    font-size:.72rem;

    font-weight:700;

    box-shadow:
        0 8px 20px rgba(0,0,0,.35);

}

@keyframes markerPulse{

    0%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-4px);

    }

    100%{

        transform:
            translateY(0);

    }

}

/*
|--------------------------------------------------------------------------
| DELIVERY PROPOSALS
|--------------------------------------------------------------------------
*/

.delivery-proposal-card{

    display:grid;

    gap:16px;

    padding:18px;

    border-radius:18px;

    border:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.03);

}

.delivery-proposal-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:16px;

    margin-bottom:10px;

}

.delivery-proposal-header small{

    display:block;

    margin-top:4px;

    opacity:.65;

}

.delivery-proposal-price{

    font-size:1.35rem;

    font-weight:800;

}

.delivery-proposal-description{

    margin-bottom:16px;

    font-size:.9rem;

    line-height:1.7;

    opacity:.75;

}

.delivery-proposal-actions{

    display:grid;

    grid-template-columns:1fr 140px;

    gap:12px;

}

.delivery-proposal-wa,
.delivery-proposal-accept{

    width:100%;

    height:48px;

    border:none;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

    font-weight:700;

}

.delivery-proposal-wa{

    background:#111;

    border:
        1px solid rgba(255,255,255,.08);

    color:#fff;

}

.delivery-proposal-accept{

    background:
        var(--brand-primary);

    color:#ffffff;

}

/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

body.sheet-open{

    overflow:hidden;

}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media(max-width:640px){

    .register-role-grid{

        grid-template-columns:1fr;

    }

    .register-role-tabs{

        flex-direction:column;

    }

    .sheet-content{

        padding:
            24px
            20px
            calc(28px + env(safe-area-inset-bottom));

    }

    .sheet-title{

        font-size:2rem;

    }

    .delivery-proposal-actions{

        grid-template-columns:1fr;

    }

}

@media(min-width:768px){

    .sheet{

        width:
            calc(100vw - 20%);

        max-width:1180px;

    }

    .sheet-content{

        padding:
            34px
            40px
            calc(40px + env(safe-area-inset-bottom));

    }

    .shop-menu-sheet{

        width:
            calc(100vw - 20%);

        max-width:1180px;

    }

}

.order-current-status{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:10px;

    font-size:1rem;

    font-weight:700;

}

body.sheet-open #shopMiniPanel{

    opacity:0;

    transform:
        translateY(-12px);

    pointer-events:none;

}

body.sheet-open .customer-floating-panel{
    opacity:0;
    pointer-events:none;
}

#shopMiniPanel{

    transition:

        opacity .22s ease,

        transform .22s ease;

}

.reset-request-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

}

.reset-request-row p{

    margin:
        .35rem 0;

}

.reset-request-actions{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:.75rem;

}

.reset-status{

    padding:
        .35rem .75rem;

    border-radius:
        999px;

    font-size:
        .75rem;

    font-weight:
        600;

}

.reset-status.pendiente{

    color:
        var(--warning);

    background:
        rgba(
            255,
            200,
            87,
            .12
        );

}

.reset-status.enviado{

    color:
        var(--success);

    background:
        rgba(
            74,
            222,
            128,
            .12
        );

}

.reset-status.usado{

    color:
        var(--local-cyan);

    background:
        rgba(
            24,
            167,
            192,
            .12
        );

}

.reset-status.expirado{

    color:
        var(--danger);

    background:
        rgba(
            239,
            68,
            68,
            .12
        );

}

@media(
    max-width:640px
){

    .reset-request-row{

        flex-direction:column;

        align-items:flex-start;

    }

    .reset-request-actions{

        width:100%;

        align-items:stretch;

    }

}

.users-search{

    margin-bottom:1rem;

}

.users-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                220px,
                1fr
            )
        );

    gap:1rem;

}

.user-card{

    display:flex;

    flex-direction:column;

    gap:.85rem;

    padding:1rem;

    border:none;

    border-radius:1rem;

    background:
        var(--bg-card);

    border:
        1px solid
        var(--glass-border);

    transition:
        .2s ease;

}

.user-card:hover{

    background:
        var(--bg-card-hover);

    border-color:
        var(--glass-border-strong);

}

.user-card-header{

    display:flex;

    align-items:center;

    gap:.85rem;

}

.user-card-icon{

    width:48px;
    height:48px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:.85rem;

    background:
        var(--glass-4);

    font-size:1rem;

}

.user-card-info{

    min-width:0;

}

.user-card-info strong{

    display:block;

    font-size:.95rem;

    line-height:1.2;

}

.user-card-info small{

    display:block;

    color:
        var(--text-faded);

    font-size:.78rem;

}

.user-card-actions{

    display:flex;

    gap:.5rem;

}

.user-card-btn{

    flex:1;

    height:38px;

    border:none;

    border-radius:.75rem;

    background:
        var(--glass-4);

    color:
        var(--text-primary);

    font-size:.8rem;

    font-weight:600;

    cursor:pointer;

    transition:
        .2s ease;

}

.user-card-btn:hover{

    background:
        var(--glass-8);

}

.user-card-btn.wallet{

    color:
        var(--local-cyan);

}

.user-card-btn.block{

    color:
        var(--warning);

}

.user-card-btn.active{

    color:
        var(--success);

}

.user-card-blocked{

    opacity:.65;

}

.users-search-wrapper{

    display:flex;
    align-items:center;
    gap:.75rem;

    height:54px;

    padding:
        0 1rem;

    margin-bottom:
        1.25rem;

    border-radius:
        1rem;

    background:
        var(--bg-card);

    border:
        1px solid
        var(--glass-border);

}

.users-search-wrapper i{

    color:
        var(--text-faded);

    font-size:
        .95rem;

}

.users-search-input{

    flex:1;

    border:none;
    outline:none;

    background:none;

    color:
        var(--text-primary);

    font-size:
        .95rem;

}

.users-search-input::placeholder{

    color:
        var(--text-faded);

}

.admin-logo-preview{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:2rem;

    margin:1.5rem 0;

    border-radius:1.25rem;

    background:
        var(--bg-card);

    border:
        1px solid
        var(--glass-border);

}

.admin-logo-preview img{

    max-width:180px;

    max-height:180px;

    object-fit:contain;

    display:block;

}

.sheet-subtitle{

    margin-top:.35rem;

    color:
        var(--text-faded);

}

.admin-hero-preview{

    overflow:hidden;

    margin:1.5rem 0;

    border-radius:1.25rem;

    background:
        var(--bg-card);

    border:
        1px solid
        var(--glass-border);

}

.admin-hero-preview img{

    width:100%;

    display:block;

    object-fit:cover;

    min-height:180px;

    max-height:320px;

}

.sheet-subtitle{

    margin-top:.35rem;

    color:
        var(--text-faded);

}

.settings-grid{

    display:grid;

    gap:1rem;

}

.settings-card{

    display:flex;

    align-items:center;

    gap:1rem;

    width:100%;

    padding:1rem;

    border:none;

    border-radius:1rem;

    cursor:pointer;

    text-align:left;

    background:
        var(--bg-card);

    border:
        1px solid
        var(--glass-border);

    transition:
        .2s ease;

}

.settings-card:hover{

    background:
        var(--bg-card-hover);

    border-color:
        var(--glass-border-strong);

}

.settings-card-icon{

    width:52px;

    height:52px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:1rem;

    background:
        var(--glass-4);

    font-size:1.1rem;

}

.settings-card strong{

    display:block;

    margin-bottom:.25rem;

}

.settings-card small{

    color:
        var(--text-faded);

}

.shop-cart-float{

    position:fixed;

    right:20px;

    bottom:24px;

    width:64px;

    height:64px;

    border-radius:50%;

    background:#2E2D5E;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:99999;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.35);

}

.shop-cart-float i{

    font-size:22px;

}

.shop-cart-float-count{

    position:absolute;

    top:-4px;

    right:-4px;

    min-width:24px;

    height:24px;

    padding:0 6px;

    border-radius:999px;

    background:#FF8424;

    color:#fff;

    font-size:12px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

}


.shop-mini-footer-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
}

.shop-mini-alert{
    font-size:11px;
    color:#f59e0b;
    display:flex;
    align-items:center;
    gap:4px;
    font-weight:600;
}

input,
textarea,
select{
    font-size:16px;
}


.shop-buttons-container {
    display: flex;
    gap: 12px;           /* espacio entre botones */
    flex-wrap: wrap;     /* si quieres que se bajen en pantallas muy pequeñas */
    align-items: center;
    margin-top: 10px;
}

.shop-video-btn {
    /* tus estilos actuales... */
    display: inline-flex;
    align-items: center;
    gap: 8px;
}