/* ========================================================= */
/* === ?? VARIABLES DE COLOR PERSONALIZADAS - NICODEMO === */
/* ========================================================= */
:root {
    /* FONDOS PRINCIPALES */
    --color-fondo-principal: #FAFAFA;       /* Fondo negro como la imagen */
    --color-fondo-item-menu: #ffffff;       /* Gris muy oscuro para los ¨ªtems */

    /* HEADER Y CATEGOR¨ªAS */
    --color-fondo-header: #000000;          
    --color-texto-header: #ffffff;          
    
    --color-categoria-fondo: #e31e24;       /* Rojo Nicodemo */
    --color-categoria-texto: #ffffff;       
    
    /* ¨ªTEMS Y PRECIOS */
    --color-precio-fondo: #ffcc00;          /* Amarillo para resaltar precios */
    --color-precio-texto: #000000;          
    
    --color-descripcion: #bbbbbb;           /* Gris claro para legibilidad */
    
    /* CARRITO Y MODAL */
    --color-boton-carrito-flotante-fondo: #e31e24; 
    --color-boton-carrito-flotante-texto: #ffffff; 
    
    --color-modal-header-fondo: #e31e24;    
    --color-modal-header-texto: #ffffff;    
    
    --color-total-fondo: #ffcc00;           
    --color-total-texto: #000000;           
    
    --color-boton-enviar-fondo: #25d366;    /* Verde WhatsApp */
}

/* FUENTE ESTILO LOGO */
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

/* ========================================================= */
/* === 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.) */