/* ========================================================= */
/* === 馃帹 VARIABLES DE COLOR PERSONALIZADAS (AJUSTAR AQU脥) === */
/* ========================================================= */
:root {
    /* FONDOS PRINCIPALES */
    --color-fondo-principal: #FAFAFA;       /* Color de fondo principal (cuerpo de la pagina - ej. #f8f9fa o #ffffff) */ FONDO
    --color-fondo-item-menu: #ffffff;       /* Color de fondo de cada 铆tem del men煤 (list-group-item) */

    /* HEADER Y CATEGOR脥AS */
    --color-fondo-header: #0d6efd;             /* Color de fondo del encabezado (Header) */ TITULO
    --color-texto-header: #ffffff;             /* Color del texto del encabezado */
    
    --color-categoria-fondo: #0d6efd;          /* Color de fondo para encabezados de categor铆as (Header H2) */
    --color-categoria-texto: #ffffff;          /* Color del texto de las categor铆as */
    
    /* 脥TEMS Y PRECIOS */
    --color-precio-fondo: #198754;             /* Color de fondo del badge de precio (verde) */
    --color-precio-texto: #ffffff;             /* Color del texto del badge de precio */
    
    --color-descripcion: #6c757d;              /* Color del texto de la descripci贸n del 铆tem (gris) */
    
    /* CARRITO Y MODAL */
    --color-boton-carrito-flotante-fondo: #ffc107; /* Color de fondo del bot贸n "Ver Carrito" (amarillo) */
    --color-boton-carrito-flotante-texto: #212529; /* Color del texto del bot贸n "Ver Carrito" */
    
    --color-modal-header-fondo: #0d6efd;       /* Color de fondo del encabezado del modal del carrito */
    --color-modal-header-texto: #ffffff;       /* Color del texto del encabezado del modal */
    
    --color-total-fondo: #198754;              /* Color de fondo del badge de "Total" en el modal */
    --color-total-texto: #ffffff;              /* Color del texto del badge de "Total" */
    
    --color-boton-enviar-fondo: #198754;       /* Color de fondo del bot贸n "Enviar Pedido" (verde) */
}

/* ========================================================= */
/* === ESTILOS APLICADOS (NO MODIFICAR AQU脥)             === */
/* ========================================================= */

/* FONDO PRINCIPAL DEL BODY */
body {
    background-color: var(--color-fondo-principal) !important;
}

/* FONDO DE 脥TEM DE MEN脷 */
.list-group-item {
    background-color: var(--color-fondo-item-menu) !important;
}

/* Header */
.header-custom {
    background-color: var(--color-fondo-header) !important;
    color: var(--color-texto-header) !important;
}

/* Categor铆a */
.card-header-custom {
    background-color: var(--color-categoria-fondo) !important;
    color: var(--color-categoria-texto) !important;
}

/* Precio Badge */
.price-badge-custom {
    background-color: var(--color-precio-fondo) !important;
    color: var(--color-precio-texto) !important;
}

/* Descripci贸n */
.description-custom {
    color: var(--color-descripcion) !important;
}

/* Bot贸n Carrito Flotante */
#cart-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    font-size: 1.1rem;
    padding: 10px 20px;
    border-radius: 50px;
    background-color: var(--color-boton-carrito-flotante-fondo) !important;
    color: var(--color-boton-carrito-flotante-texto) !important;
    /* Para evitar el borde por defecto de Bootstrap */
    border-color: var(--color-boton-carrito-flotante-fondo) !important; 
}

/* Modal Header */
.modal-header-custom {
    background-color: var(--color-modal-header-fondo) !important;
    color: var(--color-modal-header-texto) !important;
}

/* Total Badge */
.total-badge-custom {
    background-color: var(--color-total-fondo) !important;
    color: var(--color-total-texto) !important;
}

/* Bot贸n Enviar WhatsApp */
.btn-whatsapp-custom {
    background-color: var(--color-boton-enviar-fondo) !important;
    border-color: var(--color-boton-enviar-fondo) !important;
}
/* Estilo base para el encabezado */
.header-custom {
    background-color: #343a40; /* Color de fallback si no hay imagen */
    color: #ffffff;
    min-height: 200px; /* Altura mínima para que la imagen se vea */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Los estilos de imagen (background-image, cover, center) se a?aden con JS */
}

/* Otros estilos existentes (card-header-custom, total-badge-custom, etc.) */