/* =========================================
   ESTILOS DEL PANEL DEL CARRITO (ARREGLADO)
   ========================================= */

#cartPanel {
    position: fixed;
    background-color: #fff;
    z-index: 2000; /* Bien arriba de todo */
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 15px;
    box-sizing: border-box;
    /* Configuración Flex para que el contenido scrollee pero el header/footer queden fijos */
    display: flex;
    flex-direction: column; 
    justify-content: space-between;
}

/* --- VISTA DE ESCRITORIO (SIDEBAR DERECHA) --- */
@media (min-width: 769px) {
    #cartPanel {
        top: 0;
        right: 0;
        bottom: 0; /* Ocupa todo el alto */
        width: 400px; /* Ancho fijo cómodo */
        height: 100vh;
        
        /* Estado inicial: Oculto a la derecha */
        transform: translateX(100%);
    }

    #cartPanel.active {
        /* Estado activo: Se desliza a su lugar */
        transform: translateX(0);
    }
}

/* --- VISTA DE CELULAR (BOTTOM SHEET) --- */
@media (max-width: 768px) {
    #cartPanel {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 85vh; /* Ocupa el 85% de la altura de la pantalla */
        border-radius: 20px 20px 0 0; /* Bordes redondeados arriba */
        
        /* Estado inicial: Oculto abajo */
        transform: translateY(100%);
    }

    #cartPanel.active {
        /* Estado activo: Sube */
        transform: translateY(0);
    }
}

/* --- MANEJO DEL CONTENIDO INTERNO --- */

/* Encabezado del carrito (Donde dice Orden de Compra y la X) */
.cart-header {
    flex-shrink: 0; /* No se achica */
    padding: 15px 20px;
    background-color: #000; /* Tu color negro */
    color: white;
    border-radius: 0;
}

/* En móvil, redondeamos el header para que coincida con el panel */
@media (max-width: 768px) {
    .cart-header {
        border-radius: 20px 20px 0 0;
    }
}

/* Lista de items (LO IMPORTANTE: Aquí va el scroll) */
#cartItems {
    flex-grow: 1; /* Ocupa todo el espacio disponible */
    overflow-y: auto; /* Scroll vertical si hay muchos productos */
    padding: 15px;
    /* Scrollbar bonita */
    scrollbar-width: thin;
}

/* Footer del carrito (Totales y Botones) */
#cartFooter {
    flex-shrink: 0; /* No se achica */
    background-color: #fff;
    padding: 15px 20px;
    border-top: 1px solid #eee;
    padding-bottom: 30px; /* Un poco más de aire abajo */
}