body {
    background-color: aliceblue !important;
}

/*--------------------------------------------------------------
# TICKET
--------------------------------------------------------------*/

.card-ticket {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08),
        0px 4px 8px rgba(0, 0, 0, 0.06);
    border-radius: 1rem !important;
    background: white;
    margin-bottom: 2rem;
}

.card-ticket img {
    border-radius: 1rem 1rem 0 0;
}

.btn-minus,
.btn-plus {
    background-color: #5740eb;
    color: white;
    height: 2rem; /* Asegura que el alto y ancho sean iguales para la forma circular */
    width: 2rem;
    border: none;
    border-radius: 50%; /* Esto hace que el botón sea completamente circular */
    display: inline-flex; /* Usa flexbox para centrar el contenido */
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    font-size: 1rem; /* Ajusta esto según necesites para el tamaño del signo más y menos */
    cursor: pointer; /* Cambia el cursor a un puntero para indicar que es clickeable */
}

/*--------------------------------------------------------------
# TOTALS
--------------------------------------------------------------*/

.card-totals {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08),
        0px 4px 8px rgba(0, 0, 0, 0.06);
    border-radius: 1rem !important;
    background: white;
    margin-bottom: 2rem;
    padding: 2rem;
}

.card-totals .decimales {
    font-size: 0.6em; /* más pequeño */
    vertical-align: super; /* flotando arriba */
}
.card-totals .moneda {
    font-size: 0.6em; /* más pequeño */
    vertical-align: middle; /* flotando arriba */
}
/*--------------------------------------------------------------
# CLIENTE
--------------------------------------------------------------*/

.cardAsistente {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08),
        0px 4px 8px rgba(0, 0, 0, 0.06);
    border-radius: 1rem !important;
    background: white;
    margin-bottom: 2rem;
    padding: 2rem;
}

.btn-confirmar-asistentes {
    color: white;
    background-color: #5740eb;
    padding: 0.5rem 1rem;
}

.btn-confirmar-asistentes-confirm:hover {
    color: #32d769;
    background-color: white;
    border: 1px solid #32d769;
    padding: 0.5rem 1rem;
    cursor: not-allowed;
}

.btn-confirmar-asistentes:hover {
    color: white;
    background-color: black;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

#btnEditarAsistentes {
    color: white;
    background-color: rgb(156, 3, 3);
    padding: 0.5rem 1rem;
}

#btnEditarAsistentes:hover {
    color: white;
    background-color: rgb(197, 8, 8);
    padding: 0.5rem 1rem;
    cursor: pointer;
}
/*--------------------------------------------------------------
# RESERVE
--------------------------------------------------------------*/



/* Paleta rápida (ajusta a tu gusto) */
:root{
  --rb-bg: #fff;           /* fondo de la barra */
  --btn-bg: #39d76d;       /* botón normal */
  --btn-bg-disabled: gray; /* botón "gateado" (aria-disabled) */
  --btn-bg-loading: #000;  /* botón en loading */
  --accent: #32d769;       /* color del spinner */
}

/* Barra fija en móvil */
.barReserve{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1050;
  color: #fff;
  background-color: var(--rb-bg);
  padding: .5rem;
}

/* Botón */
#btnReserve{
  background: var(--btn-bg);
  border: 0;
  color: #fff;
  font-size: 16px;
  width: 100%;
  min-height: 44px;               /* evita saltos de altura */
  padding: 12px 16px;             /* aire interno */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;                      /* separación entre spans */
  border-radius: 8px;
  box-shadow:
    0 8px 20px rgba(0,0,0,.08),
    0 4px 8px rgba(0,0,0,.06) !important;
  cursor: pointer;
}

/* Mensaje superior */
#messageBarReserve{ font-size: x-small; }

/* Desktop: no fija la barra y fondo transparente */
@media (min-width:768px){
  .barReserve{ position: relative; background-color: transparent; padding: 0; }
}

/* -------- Estados -------- */

/* 1) Botón realmente deshabilitado (solo cuando DE VERDAD bloqueas, p.ej. loading) */
.barReserve button:disabled{
  background-color: var(--btn-bg-disabled) !important;
  pointer-events: none;
  cursor: not-allowed;
  opacity: .7;
}

/* 2) Gateado visualmente pero clickeable (para mostrar SweetAlert) */
#btnReserve[aria-disabled="true"]{
  background-color: var(--btn-bg-disabled);
  opacity: .7;
  cursor: not-allowed; /* look deshabilitado, pero SÍ recibe click */
}

/* 3) Mensajes de estado (opcional) */
.barReserve .msg-error{ color:#d11; }
.barReserve .msg-ok{    color:#0a7d28; }

/* -------- Loading -------- */

/* Color del spinner (Bootstrap usa currentColor) */
#reserveSpinner{ color: var(--accent); }

/* En loading: spinner visible, textos ocultos, centrado y bloqueo */
.barReserve[data-state="loading"] #reserveSpinner{
  display: inline-block !important;
}

.barReserve[data-state="loading"] #reserveQty,
.barReserve[data-state="loading"] #reserveTotal,
.barReserve[data-state="loading"] #messageBarReserve,
.barReserve[data-state="loading"] #btnReserve .fw-semibold{
  display: none !important;
}

.barReserve[data-state="loading"] #btnReserve{
  justify-content: center;
  background-color: var(--btn-bg-loading) !important;
  pointer-events: none; /* extra por si no usas disabled real */
}