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

/*--------------------------------------------------------------
# CUPON
--------------------------------------------------------------*/

.card-cupon {
    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: 1.25rem;
    padding: 1.25rem;
}

.card-cupon__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0.85rem;
}

.card-cupon__title {
    font-weight: 700;
    font-size: 1rem;
    color: #111827;
    margin: 0;
}

.card-cupon__text {
    color: #6b7280;
    font-size: 0.88rem;
    line-height: 1.35;
}

.card-cupon__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cupon-input-wrap {
    display: flex;
    gap: 8px;
}

.cupon-input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 0.75rem;
    border: 1px solid #dbe2ea;
    background: #fff;
    color: #111827;
    outline: none;
    transition: 0.2s ease;
}

.cupon-input::placeholder {
    color: #9ca3af;
    font-weight: 600;
}

.cupon-input:focus {
    border-color: #5740eb;
    box-shadow: 0 0 0 3px rgba(87, 64, 235, 0.10);
}

.cupon-input.is-valid {
    border-color: #32d769;
    box-shadow: 0 0 0 3px rgba(50, 215, 105, 0.10);
}

.cupon-input.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.08);
}

.cupon-btn {
    border: none;
    min-width: 108px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.92rem;
    color: white;
    background-color: #5740eb;
    transition: 0.2s ease;
}

.cupon-btn:hover {
    background-color: black;
    color: white;
}

.cupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(50, 215, 105, 0.12);
    color: #178a45;
    font-weight: 700;
    font-size: 0.78rem;
    white-space: nowrap;
}

.cupon-feedback {
    font-size: 0.82rem;
    font-weight: 600;
    color: #dc3545;
    padding-left: 2px;
}

@media (max-width: 576px) {
    .card-cupon__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .cupon-input-wrap {
        flex-direction: column;
    }

    .cupon-btn {
        width: 100%;
    }
}


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