/*==============================================================================
CARRITO DE COTIZACIÓN · ANSIER
Usa las variables definidas en style.css (--color-primary, --radius-*, etc.)
==============================================================================*/

/*==========================
BOTÓN DEL CARRITO EN EL HEADER
==========================*/

.cart-toggle{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    color:var(--color-white);
    font-size:1.05rem;
    cursor:pointer;
    transition:var(--transition);
    flex-shrink:0;
}

.cart-toggle:hover{
    background:var(--color-secondary);
    border-color:var(--color-secondary);
    color:var(--color-primary);
    transform:translateY(-2px);
}

.cart-toggle__badge{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:var(--radius-pill);
    background:var(--gradient-secondary);
    color:var(--color-primary);
    font-size:.72rem;
    font-weight:var(--fw-bold);
    display:none;
    align-items:center;
    justify-content:center;
    line-height:1;
    box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/*==========================
OVERLAY
==========================*/

.cart-overlay{
    position:fixed;
    inset:0;
    background:rgba(17,17,17,.55);
    backdrop-filter:blur(2px);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--transition), visibility var(--transition);
    z-index:10001;
}

.cart-overlay--visible{
    opacity:1;
    visibility:visible;
}

/*==========================
PANEL LATERAL
==========================*/

.cart-drawer{
    position:fixed;
    top:0;
    right:0;
    height:100%;
    width:min(420px, 100%);
    background:var(--color-white);
    z-index:10002;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.22,.9,.3,1);
    box-shadow:-30px 0 60px rgba(0,0,0,.2);
}

.cart-drawer--open{
    transform:translateX(0);
}

.cart-drawer__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 26px;
    background:var(--gradient-primary);
    color:var(--color-white);
    flex-shrink:0;
}

.cart-drawer__header h2{
    font-size:1.15rem;
    font-weight:var(--fw-bold);
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
}

.cart-drawer__close{
    width:36px;
    height:36px;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.12);
    border:none;
    color:var(--color-white);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
    flex-shrink:0;
}

.cart-drawer__close:hover{
    background:var(--color-secondary);
    color:var(--color-primary);
    transform:rotate(90deg);
}

.cart-drawer__body{
    flex:1;
    overflow-y:auto;
    padding:20px 22px;
}

.cart-empty{
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:14px;
    color:var(--text-secondary);
    padding:40px 20px;
}

.cart-empty i{
    font-size:2.6rem;
    color:var(--border);
}

.cart-empty p{
    font-size:.95rem;
    max-width:240px;
}

/*==========================
ITEM DEL CARRITO
==========================*/

.cart-item{
    display:flex;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid var(--border);
}

.cart-item:first-child{
    padding-top:0;
}

.cart-item__img{
    width:72px;
    height:72px;
    border-radius:var(--radius-sm);
    object-fit:cover;
    background:var(--background-light);
    border:1px solid var(--border);
    flex-shrink:0;
}

.cart-item__body{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.cart-item__category{
    font-size:.72rem;
    font-weight:var(--fw-semibold);
    color:var(--color-secondary);
    text-transform:uppercase;
    letter-spacing:.04em;
}

.cart-item__name{
    font-size:.9rem;
    font-weight:var(--fw-medium);
    color:var(--text-primary);
    line-height:1.3;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.cart-item__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:4px;
}

.cart-item__remove{
    width:32px;
    height:32px;
    border-radius:var(--radius-pill);
    border:1px solid var(--border);
    background:var(--color-white);
    color:#C0392B;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
    flex-shrink:0;
}

.cart-item__remove:hover{
    background:#C0392B;
    color:var(--color-white);
    border-color:#C0392B;
}

/*==========================
SELECTOR DE CANTIDAD
==========================*/

.qty-selector{
    display:inline-flex;
    align-items:center;
    border:1px solid var(--border);
    border-radius:var(--radius-pill);
    overflow:hidden;
}

.qty-btn{
    width:32px;
    height:32px;
    border:none;
    background:var(--background-light);
    color:var(--color-primary);
    font-size:1rem;
    font-weight:var(--fw-bold);
    cursor:pointer;
    transition:var(--transition);
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.qty-btn:hover{
    background:var(--color-secondary);
    color:var(--color-primary);
}

.qty-input{
    width:38px;
    height:32px;
    border:none;
    text-align:center;
    font-size:.88rem;
    font-weight:var(--fw-semibold);
    color:var(--text-primary);
    -moz-appearance:textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.qty-selector--sm .qty-btn,
.qty-selector--sm .qty-input{
    width:26px;
    height:26px;
    font-size:.8rem;
}

/*==========================
FOOTER DEL CARRITO
==========================*/

.cart-drawer__footer{
    padding:18px 22px 22px;
    border-top:1px solid var(--border);
    flex-shrink:0;
    display:none;
}

.cart-drawer__summary{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:14px;
    font-size:.9rem;
    color:var(--text-secondary);
}

.cart-drawer__summary strong{
    color:var(--text-primary);
    font-size:1.05rem;
}

.cart-drawer__form{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:16px;
}

.cart-drawer__label{
    font-size:.76rem;
    font-weight:var(--fw-semibold);
    color:var(--text-secondary);
    margin-top:8px;
}

.cart-drawer__label:first-child{
    margin-top:0;
}

.cart-drawer__field{
    width:100%;
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-family:var(--font-primary);
    font-size:.88rem;
    color:var(--text-primary);
    background:var(--background-light);
    transition:var(--transition);
}

.cart-drawer__field:focus{
    outline:none;
    border-color:var(--color-secondary);
    background:var(--color-white);
    box-shadow:0 0 0 3px rgba(92,225,230,.18);
}

.cart-drawer__field--error{
    border-color:#C0392B;
}

.cart-drawer__actions{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.cart-postsend{
    display:none;
    background:rgba(120,214,172,.14);
    border:1px solid var(--color-accent);
    border-radius:var(--radius-md);
    padding:14px 16px;
    margin-bottom:14px;
}

.cart-postsend--visible{
    display:block;
}

.cart-postsend p{
    margin:0 0 10px;
    font-size:.86rem;
    color:var(--text-primary);
    font-weight:var(--fw-medium);
    display:flex;
    align-items:center;
    gap:8px;
}

.cart-postsend p i{
    color:var(--color-accent);
}

.cart-postsend__actions{
    display:flex;
    align-items:center;
    gap:14px;
}

.cart-postsend__actions .btn{
    padding:9px 16px;
    font-size:.8rem;
}

.cart-postsend__dismiss{
    background:none;
    border:none;
    color:var(--text-secondary);
    font-family:var(--font-primary);
    font-size:.8rem;
    text-decoration:underline;
    cursor:pointer;
}

.cart-whatsapp-btn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 20px;
    border-radius:var(--radius-pill);
    background:#25D366;
    color:var(--color-white);
    border:none;
    font-family:var(--font-primary);
    font-size:.95rem;
    font-weight:var(--fw-bold);
    cursor:pointer;
    transition:var(--transition);
}

.cart-whatsapp-btn:hover{
    background:#1EBE5A;
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(37,211,102,.3);
}

.cart-whatsapp-btn i{
    font-size:1.2rem;
}

.cart-clear-btn{
    width:100%;
    background:none;
    border:none;
    color:var(--text-secondary);
    font-family:var(--font-primary);
    font-size:.82rem;
    text-decoration:underline;
    cursor:pointer;
    padding:4px;
}

.cart-clear-btn:hover{
    color:#C0392B;
}

/*==========================
BARRA FLOTANTE DEL CARRITO
==========================*/

.cart-float-bar{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%) translateY(120%);
    display:flex;
    align-items:center;
    gap:18px;
    background:var(--color-primary);
    color:var(--color-white);
    padding:14px 16px 14px 22px;
    border-radius:var(--radius-pill);
    box-shadow:var(--shadow-lg);
    z-index:9998;
    opacity:0;
    visibility:hidden;
    transition:transform .35s cubic-bezier(.22,.9,.3,1), opacity .35s ease, visibility .35s ease;
}

.cart-float-bar--visible{
    transform:translateX(-50%) translateY(0);
    opacity:1;
    visibility:visible;
}

.cart-float-bar span{
    font-size:.86rem;
    font-weight:var(--fw-medium);
    white-space:nowrap;
}

.cart-float-bar .btn{
    padding:9px 18px;
    font-size:.8rem;
    white-space:nowrap;
}

@media (max-width:640px){

    .cart-float-bar{
        left:16px;
        right:16px;
        bottom:16px;
        transform:translateY(120%);
        width:auto;
        justify-content:space-between;
    }

    .cart-float-bar--visible{
        transform:translateY(0);
    }

}

/*==========================
TOAST DE CONFIRMACIÓN
==========================*/

.cart-toast{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:var(--color-primary);
    color:var(--color-white);
    padding:14px 24px;
    border-radius:var(--radius-pill);
    font-size:.88rem;
    font-weight:var(--fw-medium);
    box-shadow:var(--shadow-lg);
    z-index:10003;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
    display:flex;
    align-items:center;
    gap:10px;
    max-width:90%;
    text-align:center;
}

.cart-toast::before{
    content:"\f058";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:var(--color-secondary);
}

.cart-toast--visible{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

body.cart-open-lock{
    overflow:hidden;
}

/*==============================================================================
GRILLA DE PRODUCTOS (páginas de categoría)
==============================================================================*/

.product-section{
    padding:var(--space-7) 0;
    background:var(--background-light);
}

.product-search{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-top:40px;
}

.product-search__input{
    flex:1;
    min-width:240px;
    max-width:420px;
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--color-white);
    border:1px solid var(--border);
    border-radius:var(--radius-pill);
    padding:12px 20px;
    box-shadow:var(--shadow-xs);
}

.product-search__input i{
    color:var(--text-secondary);
}

.product-search__input input{
    border:none;
    outline:none;
    width:100%;
    font-family:var(--font-primary);
    font-size:.9rem;
    color:var(--text-primary);
    background:transparent;
}

.product-search__count{
    font-size:.85rem;
    color:var(--text-secondary);
    white-space:nowrap;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:24px;
    margin-top:24px;
}

.product-grid__empty{
    grid-column:1 / -1;
    text-align:center;
    color:var(--text-secondary);
    padding:40px 20px;
    background:var(--color-white);
    border-radius:var(--radius-md);
    border:1px dashed var(--border);
}

.product-grid__more{
    grid-column:1 / -1;
    display:flex;
    justify-content:center;
    margin-top:8px;
}

.product-card{
    background:var(--color-white);
    border-radius:var(--radius-md);
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow:var(--shadow-xs);
    transition:var(--transition);
    display:flex;
    flex-direction:column;
}

.product-card:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
    border-color:var(--color-secondary);
}

.product-card__img{
    width:100%;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:var(--background-light);
}

.product-card__img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.product-card:hover .product-card__img img{
    transform:scale(1.06);
}

.product-card__body{
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:14px;
    flex:1;
}

.product-card__name{
    font-size:.9rem;
    font-weight:var(--fw-medium);
    color:var(--text-primary);
    line-height:1.35;
    margin:0;
    min-height:2.7em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-card__actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:auto;
}

.product-card__add{
    padding:10px 16px;
    font-size:.82rem;
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}

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

@media (max-width:640px){

    .cart-drawer{
        width:100%;
    }

    .product-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:14px;
    }

    .product-card__body{
        padding:12px;
        gap:10px;
    }

    .product-card__actions{
        flex-direction:column;
        align-items:stretch;
    }

    .product-card__add{
        justify-content:center;
    }

}