/* ========================================================= */
/* === ?? VARIABLES DE COLOR PERSONALIZADAS (AJUSTAR AQU¨ª) === */
/* ========================================================= */
:root {
    /* FONDOS PRINCIPALES */
    --color-fondo-principal: #08122b;       /* Color de fondo principal (cuerpo de la pagina - ej. #f8f9fa o #ffffff) FONDO */ 
    --color-fondo-item-menu: #08122b;       /* Color de fondo de cada ¨ªtem del men¨² (list-group-item) */

    /* HEADER Y CATEGOR¨ªAS */
    --color-fondo-header: #08122b;             /* Color de fondo del encabezado (Header) TITULO */ 
    --color-texto-header: #d0b280;             /* Color del texto del encabezado NOMBRE DEL BAR */
    
    --color-categoria-fondo: #08122b;          /* Color de fondo para encabezados de categor¨ªas (Header H2) */
    --color-categoria-texto: #d3b583;          /* Color del texto de las categorIas */
    
    /* ¨ªTEMS Y PRECIOS */
    --color-item-nombre: #d3b583;              /* Color del texto del nombre de cada ¨ªtem */ 
    --color-precio-fondo: #ffffff;             /* Color de fondo del badge de precio (verde) */
    --color-precio-texto: #000000;             /* Color del texto del badge de precio */
    
    --color-descripcion: #FFFFFF;              /* 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: #08122b;       /* Color de fondo del encabezado del modal del carrito */
    --color-modal-header-texto: #ffffff;       /* Color del texto del encabezado del modal */
    
    /* === NUEVAS VARIABLES PARA DETALLE DE CARRITO === */
    --color-carrito-item-fondo: #1a233b;           /* Fondo de cada ¨ªtem en la lista del carrito */ 
    --color-carrito-item-nombre-texto: #d3b583;    /* Texto del nombre del ¨ªtem en el carrito */
    --color-carrito-item-precio-texto: #a0a0a0;     /* Texto del precio c/u en el carrito (secundario) */
    --color-carrito-item-subtotal-texto: #FFFFFF;  /* Texto del subtotal por ¨ªtem en el carrito */
    --color-carrito-cantidad-badge-fondo: #d3b583; /* Fondo del badge de cantidad en el carrito */
    --color-carrito-cantidad-badge-texto: #08122b; /* Texto del badge de cantidad en el carrito */
    
    --color-total-fondo: #e30c39;              /* 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;
}

/* Nombre del ¨ªtem */
.item-nombre-custom {
    color: var(--color-item-nombre) !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;
}

/* ========================================================= */
/* === ESTILOS DE ¨ªTEMS EN EL CARRITO (MODAL)            === */
/* ========================================================= */

.cart-item-custom {
    background-color: var(--color-carrito-item-fondo) !important;
    border-color: var(--color-carrito-item-fondo) !important; /* Elimina la l¨ªnea divisoria si es de otro color */
}

/* Nombre del ¨ªtem */
.cart-item-custom .item-name {
    color: var(--color-carrito-item-nombre-texto) !important;
}
/* Precio por Unidad */
.cart-item-custom .item-price-per-unit {
    color: var(--color-carrito-item-precio-texto) !important;
}
/* Subtotal por ¨ªtem */
.cart-subtotal-custom {
    color: var(--color-carrito-item-subtotal-texto) !important;
}

/* Badge de Cantidad en Carrito */
.cart-quantity-badge-custom {
    background-color: var(--color-carrito-cantidad-badge-fondo) !important;
    color: var(--color-carrito-cantidad-badge-texto) !important;
    border-radius: .25rem;
    font-size: 1rem; /* Asegurar tama?o consistente */
}

/* 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;
}