:root {
    --color-Inn1: #222540;
    /* Azul */
    --color-Inn2: #284580;
    /* Azulmedio */
    --color-Inn3: #005D99;
    /* AzulLigero */
    --color-Inn4: #0BA0DC;
    /* casiCeleste */
    --color-Inn5: #0a86b7;
    /* casiCeleste */
    --color-Inn6: #7fc0da;
    /* casiCeleste */
    --color-fondo: #ecf0f1;
    /* Gris claro */
    --color-texto: #2c3e50;
    /* Azul oscuro */
    --color-Inn7: #c0e3f1;
    /* casiCeleste */
    --color-fondo-field: #f5f6f6fb;
    /* Azul oscuro */
}

/*style="background-color: #10509B"*/
.sidebar-dark-primary {
    background-color: var(--color-Inn3) !important;
}

.brand-link {
    background-color: var(--color-Inn3) !important;
}

.usumenuperfil {
    background-color: var(--color-Inn3) !important;
}

.control-sidebar-modulos {
    background-color: var(--color-Inn3) !important;
}


.table-rounded {
    border-radius: 10px;
    overflow: hidden;
    /* Para evitar que los bordes se corten */
}

/* Estilo para la cabecera */
.thead-custom {
    background-color: var(--color-Inn5) !important;
    color: white;
}



/*Estilo para el cuerpo para colores intercalados*/
/*
.tbody-custom tr:nth-child(odd) {
    background-color: var(--color-Inn4) !important; #f2f2f2; 
}
*/
/* Estilo para el pie de tabla */
.tfoot-custom {
    background-color: var(--color-Inn5) !important;
    color: white;
    font-weight: bold;
}



/* Reducir el tamaño de fuente en la tabla */
#tbllistado {
    font-size: 14px;
    /* Ajusta el tamaño según tu necesidad */
}


/* Ajustar el padding de las celdas para reducir el espacio */
#tbllistado td,
#tbllistado th {
    padding-top: 3px;
    /* Ajusta el espacio superior */
    padding-bottom: 3px;
    /* Ajusta el espacio inferior */
    padding-right: 5px;
    /* Ajusta el espacio inferior */

}

#tblbusqueda {
    font-size: 14px;
}



/* Ajustar el padding de las celdas para reducir el espacio */

#tblbusqueda th {
    padding-top: 3px;
    padding-bottom: 3px;
    /*padding-right: 5px ; */
}

#tblbusqueda td {
    padding-top: 3px;
    padding-bottom: 3px;
    /*padding-right: 5px; */
}


/*
.tabla-fija {
    width: 100% !important;
    table-layouT: fixed; 
}
*/



/*
.tabla-auto {
    table-layout: auto;
    white-space: normal;
}
*/
/*
#tblbusqueda {
    font-size: 14px;
    width: 100% !important;
    table-layouT: fixed; 
}

#tblbusqueda {
    font-size: 14px;
    width: 100% !important;
    table-layout: auto; 
    white-space: nowrap; 
}
*/



/* Overlay de carga */
#loading-screen {
    background-color: rgba(25, 25, 25, 0.6);
    backdrop-filter: blur(4px);
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

#loading-screen.active {
    display: flex !important;
}

/* Imagen del logo INPROYI animado */
#loading-screen img {
    max-width: 240px;
    max-height: 200px;
    width: auto;
    height: auto;
    animation: pulse 1.3s infinite ease-in-out;
}

.form-control-sm,
.input-group-sm,
.input-group-append {
    height: 25px !important;
}

.nav-sidebar p {
    font-size: 14px;
    /* Ajusta el tamaño del texto */
}

/* Aplica el borde redondeado solo en las esquinas superiores 
.table thead th {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
*/

/* Asegurar que la tabla respete los bordes 
.table {
    border-collapse: separate;
    border-spacing: 0;
}
*/
/*
.table, th, td {
    border: none;
}
*/

/*
  .dataTables_length {
    display: block !important;
}*/

input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--color-Inn7) !important;
    /* Fondo blanco */
    color: #495057 !important;
    /* Texto gris */
    opacity: 1 !important;
    /* Evita que se vea atenuado */
    border: 1px solid #ced4da !important;
    /* Borde normal */
}

/* Cambia el color cuando es solo de solo lectura (readonly) */
input[readonly],
textarea[readonly] {
    background-color: var(--color-Inn7) !important;
    /* Un gris claro */
    color: #495057 !important;
    /* Texto oscuro */
    border: 1px solid #ced4da !important;
    /* Mantiene el borde */
}




.scroll-detalle::-webkit-scrollbar {
    width: 6px;
    /* Grosor del scrollbar vertical */
    height: 6px;
    /* Grosor del scrollbar horizontal */
}

.scroll-detalle::-webkit-scrollbar-thumb {
    background: #ccc;
    /* Color de la parte móvil del scrollbar */
    border-radius: 3px;
    /* Bordes redondeados */
}

/* Contenedor con scroll horizontal */
.scroll-detalle {
    max-height: 600px;
    /* Ajusta la altura */
    overflow-x: auto;
    /* Scroll horizontal */
    border: 1px solid #ddd;
    display: flex;
}

/* Mantiene el encabezado fijo */
#tabla-detalle thead {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
}

/* Estiliza las celdas */
#tabla-detalle th,
#tabla-detalle td {
    padding: 5px;
    border: 1px solid #ddd;
}


.scroll-mesa {
    overflow: scroll;
    scrollbar-width: thin;
    white-space: nowrap;
    height: 320px;
}

.scroll-mesa-detalle {
    overflow: scroll;
    scrollbar-width: thin;
    white-space: nowrap;
    height: 310px;
}


/*categorie styling*/
.categories {
    cursor: pointer;
    text-align: center;
    margin: 5px 3px;
    padding: 8px 14px;
    background-color: #ffffff;
    border-radius: 20px;
    color: #5a6a85;
    text-transform: uppercase;
    display: inline-block;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid #d0dbe8;
    transition: all 0.3s;
}

.selectedGat {
    background-color: #0082C6;
    color: #ffffff;
    border-color: #0082C6;
}

.categories:hover {
    background-color: #eef5fc;
    color: #284580;
    border-color: #284580;
}

.slimScrollDiv {
    display: inline-block !important;
    width: 100% !important;
}

#productList {
    width: 100% !important;
}

/* Rediseño de la Grilla de Platillos */
.dish-grid-container {
    padding: 10px;
}
.dish-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
@media (min-width: 768px) { .dish-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .dish-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { .dish-grid { grid-template-columns: repeat(6, 1fr); } }

.dish-card {
    background: linear-gradient(135deg, #284580, #005D99);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: white;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.dish-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}
.dish-card__img-container {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background-color: #1e2240;
}
.dish-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.dish-card:hover .dish-card__img {
    transform: scale(1.05);
}
.dish-card__body {
    padding: 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.dish-card__name {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
    line-height: 1.3;
    word-break: break-word;
}
.dish-card__price {
    background: linear-gradient(135deg, #0BA0DC, #0082C6);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: bold;
    align-self: flex-start;
}

/*============================================================
  BOOTBOX / MODALES BOOTSTRAP
============================================================*/
.bootbox .modal-header {
  background-color: #222540;
  color: #ffffff;
  border-bottom: 2px solid #0082C6;
  padding: 12px 15px;
}
.bootbox .modal-title {
  color: #ffffff;
  font-weight: 700;
}
.bootbox .modal-header .close,
.bootbox .modal-header .bootbox-close-button {
  color: #ffffff;
  opacity: 0.8;
  text-shadow: none;
}
.bootbox .modal-header .close:hover {
  opacity: 1;
}
.bootbox .modal-body {
  color: #222540;
  font-weight: 500;
  padding: 20px;
}
.bootbox .modal-footer {
  border-top: 1px solid #e1eaf3;
  padding: 10px 15px;
}
.bootbox .btn-primary,
.bootbox .bootbox-accept {
  background-color: #005D99 !important;
  border-color: #005D99 !important;
  font-weight: 600;
}
.bootbox .btn-primary:hover,
.bootbox .bootbox-accept:hover {
  background-color: #222540 !important;
  border-color: #222540 !important;
}
.bootbox .btn-secondary,
.bootbox .bootbox-cancel {
  background-color: transparent !important;
  color: #284580 !important;
  border: 1px solid #284580 !important;
  font-weight: 600;
}
.bootbox .btn-secondary:hover,
.bootbox .bootbox-cancel:hover {
  background-color: #284580 !important;
  color: white !important;
}
.bootbox .modal-content {
  border-radius: 10px;
  overflow: hidden;
  border: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/*============================================================
  MESAS GRID Y TARJETAS
============================================================*/
.sticky-mesas-header {
    position: sticky !important;
    top: 56px; /* Ajuste por el navbar superior genérico, puede variar si hay otro elemento fixed */
    z-index: 1000;
    background: #f4f8fc;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-bottom: 2px solid #0082C6;
    padding-bottom: 12px;
}

.mesa-control-btn {
    background-color: #d8e4f0; /* Azul-grisáceo más oscuro y notorio */
    color: #1e335a;
    border: 1px solid #b1c4d6;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700; 
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06); /* Sombra suave para que "salgan" del fondo */
}

.mesa-control-btn:hover {
    background-color: #0082C6;
    color: #ffffff;
    border-color: #0082C6;
}

/*============================================================
  USER MENU DROPDOWN REDESIGN
============================================================*/
.user-menu .user-header {
    background-color: #f2f7fb !important; /* Forzar el reemplazo del azul feo de AdminLTE */
    color: #333333 !important;
    height: auto !important;
    min-height: 180px;
    padding-top: 20px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.user-menu .user-header img {
    border: 4px solid #0082C6 !important; /* Borde azul exacto al de la imagen */
    width: 90px !important;
    height: 90px !important;
    margin-bottom: 10px;
}

.user-menu .user-header p {
    color: #0082C6 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-transform: uppercase;
    margin-top: 10px;
}

.user-menu .user-header p small {
    color: #6c757d !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    margin-top: 8px !important;
    display: block;
}

.user-menu .user-footer {
    background-color: #f2f7fb !important; /* Mismo color que la parte de arriba para que se funda orgánicamente */
    border-radius: 0 0 8px 8px;
    border-top: none !important; /* Sin líneas divisorias para un look más limpio */
    padding: 5px 25px 25px 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px; /* Margen perfecto entre ambos botones */
}

/* User Menu Buttons */
.user-menu-btn-primary {
    background-color: #0088cc !important;
    color: white !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    border: 2px solid #0088cc !important; /* Mismo grosor de borde que el otro botón para simetría */
    padding: 8px 5px !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    transition: background 0.3s;
    flex: 1; /* Ocupa el 50% exacto */
}
.user-menu-btn-primary:hover {
    background-color: #006699 !important;
    border-color: #006699 !important;
    color: white !important;
}

.user-menu-btn-outline {
    background-color: #ffffff !important;
    color: #0088cc !important;
    border: 2px solid #0088cc !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    padding: 8px 5px !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    transition: background 0.3s, color 0.3s;
    flex: 1; /* Ocupa el 50% exacto */
}
.user-menu-btn-outline:hover {
    background-color: #f4f8fc !important;
    color: #006699 !important;
    border-color: #006699 !important;
}

#titulomesas {
    font-size: 18px;
    font-weight: 800;
    color: #222540;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    background: #e1eaf3;
    padding: 4px 20px;
    border-radius: 20px;
    margin-top: 5px;
    margin-bottom: 0;
}

.table-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 5px;
}

@media (min-width: 500px) {
    .table-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
        padding: 10px;
    }
}

.mesa-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.mesa-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.mesa-card__header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 10px;
}

.mesa-card__title {
    font-size: 15px;
    font-weight: 800;
}

.mesa-card__status-dot {
    display: none; /* Removing the dot to use solid headers instead */
}

/* SOLID COLOR STATUS - VERY CLEAR FOR WAITERS */
.mesa-card--free {
    border: 2px solid #28a745;
}
.mesa-card--free .mesa-card__header {
    background-color: #28a745;
}
.mesa-card--free .mesa-card__title {
    color: white;
}
.mesa-card--free .mesa-card__icon {
    font-size: 32px;
    color: #28a745;
    margin-bottom: 6px;
}

.mesa-card--busy {
    border: 2px solid #dc3545;
}
.mesa-card--busy .mesa-card__header {
    background-color: #dc3545;
}
.mesa-card--busy .mesa-card__title {
    color: white;
}
.mesa-card--busy .mesa-card__icon {
    font-size: 32px;
    color: #dc3545;
    margin-bottom: 6px;
}

.mesa-card__body {
    padding: 12px 8px;
    text-align: center;
    flex-grow: 1;
}

.mesa-card__waiter {
    font-size: 11px;
    font-weight: 700;
    color: #4a5a75;
}

.mesa-card__footer {
    padding: 8px 10px;
}

.mesa-card__btn {
    width: 100%;
    padding: 6px 0;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    border: none;
    transition: all 0.2s;
}

.mesa-card__btn--free {
    background-color: #e8f5e9;
    color: #28a745;
}
.mesa-card__btn--free:hover {
    background-color: #28a745;
    color: white;
}

.mesa-card__btn--busy {
    background-color: #feeceb;
    color: #dc3545;
}
.mesa-card__btn--busy:hover {
    background-color: #dc3545;
    color: white;
}

/*============================================================
  SALAS / PISOS TARJETAS
============================================================*/
.sala-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* More subtle than shadow-lg */
    border: 1px solid #e1eaf3;
    overflow: hidden;
    margin-bottom: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.sala-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}
.sala-card__image-container {
    height: 140px;
    overflow: hidden;
    background: #eef5fc;
}
.sala-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}
.sala-card__body {
    padding: 15px 12px;
}
.sala-card__title {
    font-size: 18px;
    font-weight: 800;
    color: #222540;
    text-align: center;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sala-card__stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 18px;
    background: #f8fbff;
    border-radius: 8px;
    padding: 10px 5px;
}
.sala-stat {
    text-align: center;
}
.sala-stat__label {
    font-size: 10px;
    font-weight: 800;
    color: #a0aaba;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.sala-stat__value {
    font-size: 15px;
    font-weight: 800;
}
.sala-stat__value--total { color: #5a6a85; }
.sala-stat__value--busy { color: #dc3545; }
.sala-stat__value--free { color: #28a745; }

.sala-card__btn {
    width: 100%;
    border-radius: 20px;
    padding: 8px 0;
    font-weight: 700;
    font-size: 14px;
    background: linear-gradient(135deg, #0BA0DC, #0082C6);
    color: white;
    border: none;
    transition: background 0.3s;
}
.sala-card__btn:hover {
    background: linear-gradient(135deg, #0082C6, #005D99);
}

body {
    font-family: 'Inter', sans-serif;
}

/*============================================================
  SIDEBAR MODERNIZATION (AdminLTE Overrides)
============================================================*/
/* Ajuste para que el nombre largo no desborde */
.main-sidebar .brand-text {
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 160px;
    vertical-align: middle;
}

/* Fondo general: degradado de celeste a azul oscuro profundo */
.main-sidebar.sidebar-dark-primary {
    background: linear-gradient(180deg, #0082C6 0%, #284580 50%, #222540 100%) !important; 
    border-right: none;
}

/* La cabecera del logo transparente para heredar el celeste superior */
.main-sidebar.sidebar-dark-primary .brand-link {
    background-color: transparent !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; 
    color: #ffffff !important;
}

/* Estilos base para todos los enlaces (Texto Blanco) */
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link {
    color: #ffffff !important;
    border-radius: 8px !important;
    margin: 4px 12px !important;
    width: calc(100% - 24px) !important;
    transition: all 0.2s;
    font-weight: 600;
}

/* Hover de menú principal: Resplandor translúcido */
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15) !important; 
    color: #ffffff !important;
}

/* Activo del menú principal: Celeste brillante destacado */
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #0BA0DC !important; 
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
    border: none !important;
}

/* Submenu container (Completamente plano) */
.main-sidebar.sidebar-dark-primary .nav-treeview {
    background-color: transparent !important; 
    padding: 0 !important;
    margin: 0 !important;
}

/* Ítems del submenú */
.main-sidebar.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link {
    background-color: transparent !important;
    color: #e0f0fa !important; /* Celeste súper claro */
    padding-left: 45px !important;
    margin: 2px 12px !important;
    width: calc(100% - 24px) !important;
    border-radius: 8px !important;
}

/* Hover de submenús */
.main-sidebar.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important; 
}

/* Submenú activo */
.main-sidebar.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active {
    background-color: rgba(11, 160, 220, 0.3) !important; 
    color: #ffffff !important;
    font-weight: 800;
}

/* Scrollbar del sidebar para que combine */
.main-sidebar .sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.text-titulo-pmp {
    color: #000000;
}

/*============================================================
  DETALLES DE CARRITO (CART ROW)
============================================================*/
.cart-row {
  background-color: #f8fbff !important;
  border-left: 4px solid #005D99 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: background-color 0.2s ease;
}
.cart-row:hover {
  background-color: #eef5fc !important;
}
.cart-row td {
  vertical-align: middle;
  padding: 8px 5px !important;
  border-top: 1px solid #e1eaf3 !important;
}
.cart-qty-input {
  width: 32px !important;
  height: 28px !important;
  text-align: center;
  border: 1px solid #0BA0DC;
  color: #222540;
  font-weight: bold;
  background-color: #fff;
}
.btn-amount-plus,
.btn-amount-minus {
  background-color: #0082C6;
  color: white;
  height: 28px;
  line-height: 1;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-amount-plus:hover,
.btn-amount-minus:hover {
  background-color: #005D99;
  color: white;
}
.btn-amount-minus {
  border-radius: 4px 0 0 4px;
}
.btn-amount-plus {
  border-radius: 0 4px 4px 0;
}
.cart-trash-btn {
  background-color: transparent !important;
  color: #dc3545 !important;
  border: 1px solid #dc3545 !important;
  transition: all 0.2s;
}
.cart-trash-btn:hover {
  background-color: #dc3545 !important;
  color: white !important;
}
.cart-subtotal {
  color: #0082C6;
  font-weight: 700;
  font-size: 14px;
}

/*============================================================
  CABECERA Y PIE DE CARRITO (HEADER & FOOTER)
============================================================*/
.cart-header-box {
  padding: 10px 0;
  border-bottom: 2px solid #e1eaf3;
  margin-bottom: 15px;
}
.cart-title-main {
  color: #222540;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 2px;
}
.cart-title-sub {
  color: #0082C6;
  font-size: 1.1rem;
  font-weight: 600;
}
.cart-btn-return {
  background-color: transparent !important;
  color: #0082C6 !important;
  border: 1px solid #0082C6 !important;
  box-shadow: none !important;
  font-weight: 600;
  transition: all 0.2s;
}
.cart-btn-return:hover {
  background-color: #0082C6 !important;
  color: white !important;
}
.cart-btn-options {
  background-color: transparent !important;
  color: #222540 !important;
  border: 1px solid #222540 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  line-height: 1;
  transition: all 0.2s;
}
.cart-btn-options::after {
  margin-left: 4px;
  vertical-align: middle;
}
.cart-btn-options:hover {
  background-color: #222540 !important;
  color: white !important;
}

/* Totales Container */
.cart-totals-box {
  background-color: #f8fbff;
  border: 1px solid #e1eaf3;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.cart-total-label {
  color: #284580;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}
.cart-total-value {
  color: #222540;
  font-weight: 700;
  font-size: 16px;
  margin: 0;
}
.cart-total-final-label {
  color: #222540;
  font-weight: 800;
  font-size: 16px;
  margin: 0;
}
.cart-total-final-value {
  color: #0082C6;
  font-weight: 800;
  font-size: 22px;
  margin: 0;
}

/* Botones Inferiores */
.cart-btn-clean {
  background-color: transparent !important;
  color: #dc3545 !important;
  border: 1px solid #dc3545 !important;
  font-weight: 600;
}
.cart-btn-clean:hover {
  background-color: #dc3545 !important;
  color: white !important;
}
.cart-btn-send {
  background-color: #005D99 !important;
  color: white !important;
  border: none !important;
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(0, 93, 153, 0.2) !important;
}
.cart-btn-send:hover {
  background-color: #222540 !important;
}
.cart-btn-view {
  background-color: #0BA0DC !important;
  color: white !important;
  border: none !important;
  font-weight: 600;
}
.cart-btn-view:hover {
  background-color: #0082C6 !important;
}