/*
 * PHP POS Tienda - UI estable
 * Versión 12
 *
 * Una sola definición por componente.
 * Sin capas V1...V11, sin CSS muerto y sin !important innecesario.
 */

:root{
    --app-accent:#4a9ee8;
    --app-accent-hover:#3a91dd;
    --app-bg:#f4f6f8;
    --app-card:#ffffff;
    --app-text:#172033;
    --app-muted:#667281;
    --app-line:#dfe5eb;
    --app-dark:#202833;
    --app-cart:#303a48;
    --app-danger:#ef4454;
    --app-success:#20b26b;
    --app-warning:#e8a400;
}

*{
    box-sizing:border-box;
}

html,
body{
    min-height:100%;
}

body{
    margin:0;
    background:var(--app-bg);
    color:var(--app-text);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

a{
    text-decoration:none;
}

.min-w-0{
    min-width:0;
}

.btn-primary{
    --bs-btn-bg:var(--app-accent);
    --bs-btn-border-color:var(--app-accent);
    --bs-btn-hover-bg:var(--app-accent-hover);
    --bs-btn-hover-border-color:var(--app-accent-hover);
    --bs-btn-active-bg:var(--app-accent-hover);
    --bs-btn-active-border-color:var(--app-accent-hover);
}

/* ================================================================
   LOGIN
   ================================================================ */

.login-page{
    background:
        radial-gradient(circle at 12% 8%,rgba(74,158,232,.09),transparent 34%),
        var(--app-bg);
}

.login-card{
    max-width:430px;
    padding:28px;
    background:#fff;
    border:1px solid rgba(15,23,42,.04);
    border-radius:24px;
    box-shadow:0 18px 50px rgba(15,23,42,.10);
}

.login-logo{
    display:block;
    width:auto;
    height:auto;
    max-width:190px;
    max-height:84px;
    object-fit:contain;
}

.brand-circle{
    width:70px;
    height:70px;
    border-radius:22px;
    background:var(--app-accent);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.login-page .input-group-text,
.login-page .form-control{
    min-height:54px;
}

.login-page .input-group-text{
    border-color:#dfe5eb;
    color:#718096;
}

.login-page .form-control{
    border-color:#dfe5eb;
}

.login-page .form-control:focus{
    border-color:#a8cceb;
    box-shadow:0 0 0 .2rem rgba(74,158,232,.12);
}

.register-box{
    padding-top:14px;
    border-top:1px solid #edf0f3;
}

/* ================================================================
   HEADER COMPARTIDO
   ================================================================ */

.store-header{
    background:rgba(244,246,248,.97);
    border-bottom:1px solid #e3e7ec;
    box-shadow:none;
    z-index:1030;
}

.store-page .compact-header .container{
    padding-top:12px;
    padding-bottom:10px;
}

.store-logo{
    width:38px;
    height:38px;
    object-fit:contain;
    flex:0 0 38px;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.header-cart-btn{
    height:50px;
    min-height:50px;
    padding:7px 10px 7px 16px;
    border:0;
    border-radius:28px;
    background:var(--app-dark);
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:9px;
    box-shadow:none;
}

.header-cart-btn:hover,
.header-cart-btn:focus{
    color:#fff;
    background:#18202a;
}

.header-cart-btn > i{
    font-size:1.15rem;
}

.header-cart-total{
    font-weight:800;
    white-space:nowrap;
}

.header-cart-count{
    min-width:32px;
    height:32px;
    padding:0 9px;
    border-radius:999px;
    background:var(--app-danger);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.8rem;
    font-weight:800;
}

.header-exit-btn{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#fff;
    border:1px solid #eef1f4;
    color:#111827;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.header-exit-btn:hover,
.header-exit-btn:focus{
    background:#f8fafc;
    color:#111827;
}

/* ================================================================
   BUSCADOR
   ================================================================ */

.search-wrap{
    position:relative;
    margin-top:10px;
    margin-bottom:0;
}

.search-wrap > i{
    position:absolute;
    left:24px;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    color:#8ea0b7;
    font-size:1.35rem;
    pointer-events:none;
}

.search-wrap .form-control{
    width:100%;
    height:72px;
    min-height:72px;
    padding:0 24px 0 68px;
    border:1px solid transparent;
    border-radius:24px;
    background:#fff;
    box-shadow:none;
    font-size:1.27rem;
    color:#374151;
}

.search-wrap .form-control:focus{
    border-color:#d8e4ef;
    box-shadow:0 0 0 3px rgba(74,158,232,.10);
}

/* ================================================================
   CATEGORÍAS
   ================================================================ */

.store-page main.container{
    padding-top:8px;
    padding-bottom:100px;
}

.category-nav-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:0;
    margin-bottom:12px;
}

.category-scroller{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 0;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.category-scroller::-webkit-scrollbar{
    display:none;
}

.category-pill{
    appearance:none;
    min-height:48px;
    padding:0 16px;
    border:1px solid #d9e0e7;
    border-radius:12px;
    background:#fff;
    color:#263246;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    white-space:nowrap;
    font-size:1rem;
    font-weight:750;
    line-height:1;
    box-shadow:0 2px 7px rgba(15,23,42,.055);
}

.category-pill:hover,
.category-pill:focus{
    background:#f8fafc;
    border-color:#c8d1dc;
    color:#182235;
}

.category-pill.active{
    background:#f0f5f9;
    border-color:#bcc8d4;
    color:#182235;
}

.category-back{
    width:50px;
    min-width:50px;
    max-width:50px;
    padding:0;
    border-radius:12px;
}

/* ================================================================
   PRODUCTOS
   ================================================================ */

#productsGrid{
    --bs-gutter-x:10px;
    --bs-gutter-y:12px;
}

.product-card{
    height:100%;
    background:#fff;
    border:0;
    border-radius:20px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:none;
}

.product-image-wrap{
    width:100%;
    aspect-ratio:1/1;
    min-height:0;
    overflow:hidden;
    background:#fafbfc;
}

.product-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    padding:12px;
}

.product-body{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-width:0;
    padding:12px;
}

.tag-row{
    margin:0 0 7px;
}

.product-tag{
    width:30px;
    height:30px;
    padding:0;
    border-radius:50%;
    background:#eef6ff;
    color:#2b6dad;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:.82rem;
    line-height:1;
}

.product-title{
    margin:0 0 10px;
    min-height:2.55em;
    font-size:1.02rem;
    line-height:1.25;
    font-weight:850;
    color:#111827;
}

.product-bottom{
    margin-top:auto;
}

.price-row-v9{
    width:100%;
    min-height:52px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 52px;
    align-items:center;
    gap:10px;
}

.price-row-v9 .product-price{
    display:block;
    min-width:0;
    margin:0;
    padding:0;
    line-height:1;
    font-size:1.32rem;
    font-weight:900;
    color:#080d17;
    white-space:nowrap;
}

.add-btn-v9{
    appearance:none;
    width:52px;
    min-width:52px;
    max-width:52px;
    height:52px;
    min-height:52px;
    max-height:52px;
    margin:0;
    padding:0;
    border:0;
    border-radius:50%;
    background:var(--app-accent);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    justify-self:end;
    line-height:1;
    box-shadow:none;
    transition:transform .12s ease,background-color .12s ease;
}

.add-btn-v9:hover{
    background:var(--app-accent-hover);
}

.add-btn-v9:active{
    transform:scale(.94);
}

.add-btn-v9:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.add-btn-v9 > i{
    font-size:1.35rem;
    line-height:1;
}

.stock{
    margin-top:6px;
    display:flex;
    align-items:center;
    gap:7px;
    font-size:.92rem;
    line-height:1.15;
}

.stock > span{
    width:10px;
    height:10px;
    border-radius:50%;
    flex:0 0 10px;
}

.stock-success{
    color:#078a53;
}

.stock-success > span{
    background:var(--app-success);
}

.stock-warning{
    color:#a66d00;
}

.stock-warning > span{
    background:var(--app-warning);
}

.stock-danger{
    color:#c0362c;
}

.stock-danger > span{
    background:#dc3545;
}

/* ================================================================
   CARRITO FLOTANTE
   ================================================================ */

.floating-cart-v9{
    position:fixed;
    left:50%;
    bottom:14px;
    transform:translateX(-50%);
    z-index:2000;
    width:min(calc(100vw - 30px),530px);
    min-height:78px;
    padding:12px 18px;
    border:0;
    border-radius:20px;
    background:var(--app-cart);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    box-shadow:0 14px 32px rgba(15,23,42,.23);
    text-decoration:none;
    transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}

.floating-cart-v9:hover,
.floating-cart-v9:focus{
    color:#fff;
    box-shadow:0 18px 38px rgba(15,23,42,.30);
}

.floating-cart-left{
    min-width:0;
    display:flex;
    align-items:center;
    gap:11px;
    font-size:1.12rem;
    font-weight:850;
}

.floating-cart-left > i{
    font-size:1.25rem;
}

.floating-cart-total{
    margin-left:auto;
    font-size:1.28rem;
    font-weight:900;
    white-space:nowrap;
}

.floating-cart-v9 strong{
    min-width:40px;
    height:40px;
    padding:0 10px;
    border-radius:999px;
    background:var(--app-danger);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.88rem;
    font-weight:850;
}

.floating-cart-v9.cart-active{
    box-shadow:0 18px 38px rgba(15,23,42,.34);
}

.floating-cart-v9.cart-pop{
    animation:storeCartPop .28s ease-out;
}

@keyframes storeCartPop{
    0%{transform:translateX(-50%) scale(1)}
    45%{transform:translateX(-50%) scale(1.035)}
    100%{transform:translateX(-50%) scale(1)}
}

/* ================================================================
   CHECKOUT
   ================================================================ */

.checkout-page{
    background:var(--app-bg);
}

.checkout-page .store-header{
    background:rgba(244,246,248,.97);
}

.icon-btn{
    width:42px;
    height:42px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.checkout-page .card{
    border-color:transparent;
}

.cart-line{
    display:flex;
    gap:12px;
    align-items:center;
    border-bottom:1px solid #eef1f4;
}

.cart-line:last-child{
    border-bottom:0;
}

.cart-line img{
    width:68px;
    height:68px;
    object-fit:contain;
    border-radius:13px;
    background:#f8fafc;
    flex:0 0 68px;
}

.cart-line-title{
    line-height:1.2;
}

.qty-control{
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:#f3f5f7;
    border-radius:999px;
    padding:3px;
}

.qty-btn{
    width:30px;
    height:30px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    border:1px solid #e8edf2;
}

.order-summary{
    background:#fff;
}

.debug-pre{
    background:#111827;
    color:#e5e7eb;
    border-radius:14px;
    padding:14px;
    max-height:520px;
    overflow:auto;
    font-size:.78rem;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media(max-width:575.98px){
    .container{
        --bs-gutter-x:.9rem;
    }

    .login-card{
        padding:22px 18px;
        border-radius:20px;
    }

    .store-page .compact-header .container{
        padding-top:10px;
        padding-bottom:9px;
    }

    .store-logo{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .header-cart-btn{
        height:46px;
        min-height:46px;
        padding-left:14px;
    }

    .header-cart-total{
        display:none;
    }

    .header-exit-btn{
        width:46px;
        height:46px;
    }

    .search-wrap{
        margin-top:8px;
    }

    .search-wrap .form-control{
        height:62px;
        min-height:62px;
        border-radius:21px;
        padding-left:60px;
        font-size:1.05rem;
    }

    .search-wrap > i{
        left:22px;
        font-size:1.2rem;
    }

    .store-page main.container{
        padding-top:7px;
        padding-bottom:94px;
    }

    .category-nav-row{
        gap:9px;
        margin-bottom:10px;
    }

    .category-scroller{
        gap:9px;
    }

    .category-pill{
        min-height:46px;
        padding:0 14px;
        border-radius:12px;
        font-size:.92rem;
    }

    .category-back{
        width:48px;
        min-width:48px;
        max-width:48px;
    }

    #productsGrid{
        --bs-gutter-x:10px;
        --bs-gutter-y:12px;
    }

    .product-card{
        border-radius:18px;
    }

    .product-image{
        padding:9px;
    }

    .product-body{
        padding:10px;
    }

    .product-tag{
        width:28px;
        height:28px;
        font-size:.77rem;
    }

    .product-title{
        margin-bottom:8px;
        min-height:2.5em;
        font-size:.92rem;
        line-height:1.25;
    }

    .price-row-v9{
        grid-template-columns:minmax(0,1fr) 48px;
        min-height:48px;
        gap:8px;
    }

    .price-row-v9 .product-price{
        font-size:1.15rem;
    }

    .add-btn-v9{
        width:48px;
        min-width:48px;
        max-width:48px;
        height:48px;
        min-height:48px;
        max-height:48px;
    }

    .stock{
        margin-top:5px;
        font-size:.82rem;
    }

    .floating-cart-v9{
        bottom:10px;
        width:calc(100vw - 24px);
        min-height:70px;
        padding:10px 14px;
        border-radius:18px;
    }

    .floating-cart-left{
        gap:9px;
        font-size:1.02rem;
    }

    .floating-cart-total{
        font-size:1.13rem;
    }

    .floating-cart-v9 strong{
        min-width:36px;
        height:36px;
        font-size:.82rem;
    }

    .cart-line{
        gap:9px;
    }

    .cart-line img{
        width:58px;
        height:58px;
        flex-basis:58px;
    }
}

@media(min-width:992px){
    .store-page{
        max-width:1180px;
        margin:0 auto;
    }
}