/**
 * cart-reservation.css
 *
 * Estilos de los modales de reserva del carrito (individual + conjunta,
 * ver docs/superpowers/specs/2026-08-24-cart-table-reservation-integration-design.md).
 * El botón "Reservar ya" de cada fila vive en cart-table.tpl (Tarea 1) y
 * usa las mismas clases .rb-cart-reservation__btn definidas aquí.
 *
 * El calendario en sí (días/horas) NO se estiliza aquí: cart-reservation.js
 * construye su markup con las mismas clases .availability-calendar__* que
 * custom.css ya define para la ficha de producto.
 */

/* Más aire bajo el contenido de los 3 modales de reserva del carrito
   (individual/conjunta/aviso de pago) — el padding-bottom de Bootstrap
   (1rem) dejaba el calendario/checklist/texto pegado al borde inferior. */
#cart-reservation-modal .modal-body,
#cart-group-reservation-modal .modal-body,
#order-group-reservation-modal .modal-body {
    padding-bottom: 2.5rem;
}

#cart-payment-gate-modal .modal-body{
    padding-bottom: 0;
}

/* Aviso de reserva antes de pagar: diálogo estrecho por defecto (Bootstrap
   --bs-modal-width: 500px) dejaba el título partido en varias líneas. */
#cart-payment-gate-modal .modal-dialog {
    --bs-modal-width: 650px;
}

/* El tamaño del título lo da custom.css (titular de modal del estándar,
   1.625rem, común a los modales de checkout/cuenta/confirmación). */

/* El checklist es un BLOQUE, no una lista de texto colgando del párrafo de
   arriba: contenedor propio con la misma receta que #checkout-phone-form
   (--ritual-cream + borde --ink + radio 12px), que es como el estándar
   marca ya "aquí hay algo que rellenar". Compartido a propósito por los dos
   modales que lo usan (cadena del carrito y reserva conjunta de pedido/mi
   cuenta): son la misma pantalla en dos sitios distintos. */
.rb-cart-reservation__checklist {
    margin-bottom: 1rem;
    padding: .25rem 1.25rem;
    background: var(--ritual-cream);
    border: 1px solid var(--ink);
    border-radius: 12px;
}

.rb-cart-reservation__check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.25rem;
    /* Dato del estándar. */
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.4;
    border-bottom: 1px solid rgba(41, 37, 28, 0.08);
    cursor: pointer;
    /* La fila entera es el objetivo de toque (el label envuelve al
       checkbox), no solo la caja de 1.15rem: 44px es la referencia
       habitual de tamaño táctil cómodo. */
    min-height: 44px;
}

.rb-cart-reservation__check:last-of-type {
    border-bottom: none;
}

.rb-cart-reservation__check input[type="checkbox"] {
    appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    border: 1.5px solid var(--ink);
    border-radius: 6px;
    background: transparent;
    position: relative;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.rb-cart-reservation__check input[type="checkbox"]:checked {
    background: var(--brass);
    border-color: var(--brass);
}
.rb-cart-reservation__check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Código de reserva junto al nombre del servicio en el checklist de
   reserva conjunta (modal de pedido/mi cuenta) — mismo estilo que
   .rb-account-resumen__code (código/referencia del estándar). */
.rb-cart-reservation__check-code {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(41, 37, 28, 0.6);
    font-variant-numeric: tabular-nums;
}

/* Barra bajo el calendario de reserva conjunta: fecha/hora elegidas a la
   izquierda, botón para abrir el modal de confirmación final a la
   derecha (ver docs/superpowers/specs sobre el paso de confirmación). */
/* Pasa de ser un filete con dos cosas encima a un bloque propio, con el
   mismo lavado y filete lateral --brass de .rb-chain__order: es el resumen
   de la cita que se va a confirmar, y merece leerse como una pieza y no
   como el pie del calendario. */
.rb-cart-reservation__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    border-left: 2px solid var(--brass);
    background: color-mix(in srgb, var(--brass) 6%, transparent);
    flex-wrap: wrap;
}
/* Fecha/hora elegidas: dato del estándar (la negrita es del <strong>). */
.rb-cart-reservation__summary strong {
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* Icono (?) junto a los 3 botones "Reserva conjunta" del sitio
   (carrito/confirmación de pedido/mi cuenta): explica el concepto en un
   tooltip en vez de un texto siempre visible. El bubble se oculta con
   opacity/visibility (no display) para que quede accesible a lectores de
   pantalla aunque no se muestre visualmente. */
.rb-info-tip {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.rb-info-tip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* El tip vive dentro de rótulos en versalitas (el antetítulo "Reserva
       conjunta" de la ficha de producto): sin esto, la interletra heredada
       descentra el "?" dentro de su círculo. */
    letter-spacing: normal;
    text-transform: none;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: rgba(41, 37, 28, 0.12);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.rb-info-tip__bubble {
    position: absolute;
    bottom: calc(100% + 1rem);
    right: 0;
    /* Misma razón que el icono: dentro de un antetítulo en versalitas, el
       texto del tooltip se heredaba en mayúsculas y espaciado. */
    letter-spacing: normal;
    text-transform: none;
    width: max-content;
    max-width: 220px;
    padding: 0.5rem 0.65rem;
    border-radius: 0.4rem;
    background: var(--ink);
    color: #fff;
    /* Metadato del estándar, a opacidad plena sobre fondo --ink. */
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    z-index: 5;
}

.rb-info-tip:hover .rb-info-tip__bubble,
.rb-info-tip:focus-within .rb-info-tip__bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* El bubble se ancla por la derecha porque los tres tips originales viven
   en celdas alineadas a la derecha. Donde el tip queda pegado al borde
   IZQUIERDO —el antetítulo del bloque de la ficha de producto, que es una
   columna estrecha— anclarlo igual lo sacaría de la pantalla. */
.rb-info-tip--start .rb-info-tip__bubble {
    right: auto;
    left: 0;
}

/* Forma/color/hover/disabled de estos botones ya los da la clase maestra
   .btn-pill (+ --sm --secondary, ver custom.css) añadida junto a las
   clases .rb-cart-reservation__btn* de abajo, que ahora solo sirven de
   hook para el JS de los modales (cart-reservation.js). */

/* ==========================================================================
   Reserva encadenada (RESERVAS-MULTIPLES.md fase 3)
   --------------------------------------------------------------------------
   El modal de cadena muestra la disponibilidad COMPLETA de Bewe (§8), no el
   calendario reducido de la ficha: pueden ser ~47 horas en un solo día
   frente a las 3-4 de antes. De ahí que las horas vayan agrupadas en
   mañana/tarde (BeweCalendar, opción hourGroups) y con más aire entre
   tiras — la densidad es el problema de diseño de esta pantalla.

   Movimiento, color y tipografía salen de los tokens del estándar
   (--motion-duration .6s, --motion-hover .4s, --motion-ease, --ink,
   --brass): aquí no se define ninguna duración ni ningún color nuevo.
   ========================================================================== */

/* El modal de cadena necesita más ancho que el de reserva individual: con
   los 500px por defecto de Bootstrap, una tira de horas de la mañana se
   parte en demasiadas líneas. Se sube a 760px en la pasada de fases 3-6
   para que el calendario y la tira de horas quepan uno al lado del otro
   (ver más abajo) en vez de uno debajo del otro, que era lo que obligaba a
   hacer scroll dentro del modal para ver lo que se acababa de elegir. */
#cart-group-reservation-modal .modal-dialog {
    --bs-modal-width: 760px;
}

/* --- Jerarquía de los pasos (§16 del encargo) ---
   Tres pantallas y ninguna señal de en cuál se estaba. Mismo lenguaje que
   los pasos de la vía 1 de la ficha (.product-detail__steps en custom.css):
   número en círculo, el paso en curso en --brass y los ya hechos en sólido.
   En horizontal porque aquí son rótulos de una palabra, no frases. */
.rb-chain__steps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    margin: 0 0 1.75rem;
    padding: 0 0 1.25rem;
    border-bottom: 1px solid rgba(41, 37, 28, .08);
    list-style: none;
}
.rb-chain__step {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
    opacity: .5;
    transition: opacity var(--motion-hover) var(--motion-ease);
}
.rb-chain__step--current,
.rb-chain__step--done {
    opacity: 1;
}
.rb-chain__step-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border: 1px solid rgba(41, 37, 28, .25);
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 700;
    transition: background-color var(--motion-hover) var(--motion-ease), border-color var(--motion-hover) var(--motion-ease), color var(--motion-hover) var(--motion-ease);
}
.rb-chain__step--current .rb-chain__step-mark {
    border-color: var(--brass);
    color: var(--brass);
}
.rb-chain__step--done .rb-chain__step-mark {
    background: var(--brass);
    border-color: var(--brass);
    color: #fff;
}
.rb-chain__step--current .rb-chain__step-text {
    font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
    .rb-chain__step,
    .rb-chain__step-mark {
        transition: none;
    }
}

/* Jerarquía de texto dentro de los modales de reserva (revisión de
   usabilidad): tres registros y no más, para que se lea de un vistazo en
   vez de como un párrafo detrás de otro.
     1. .rb-chain__prompt  → LA INSTRUCCIÓN. Lo que hay que hacer en esta
        pantalla. Va primero y es lo más grande del cuerpo.
     2. .rb-chain__lead    → la explicación de apoyo, una línea, en gris.
        Debajo de la instrucción, no encima: quien ya sabe lo que es se la
        salta sin leerla.
     3. .rb-chain__section-title → antetítulo de bloque ("Tus citas"),
        el mismo registro que las cabeceras de la tabla del carrito.
   Hasta esta pasada los tres se pintaban iguales: custom.css igualaba
   TODOS los <p> del modal a 1.0625rem/1.7 y estas clases perdían por
   especificidad (ver la nota en custom.css). */
.rb-chain__prompt {
    margin: 0 0 .35rem;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
}
.rb-chain__lead {
    margin: 0 0 1.5rem;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(41, 37, 28, .6);
}
.rb-chain__section-title {
    margin: 0 0 .75rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(41, 37, 28, .6);
}
/* Un bloque detrás de otro necesita aire entre ellos, no un filete más. */
.rb-chain__section + .rb-chain__section {
    margin-top: 2rem;
}
/* "Crear cita conjunta" cierra la sección de sueltos —es lo que se hace
   con esa lista—, así que va pegado a ella y no en un bloque propio. */
#cart-group-manager-modal .js-cart-group-manager-create {
    margin-top: 1.25rem;
}

/* --- Pantalla 1 (selección de servicios): rediseño visual ---
   El modal se ensancha a 760px para el calendario del paso 2 (arriba), pero
   la pantalla 1 heredaba ese mismo ancho para un simple texto + checklist:
   demasiado aire horizontal, ninguna definición de bloque, se leía como
   texto suelto flotando en una caja grande. La columna de contenido se
   centra en un ancho de lectura cómodo. */
#cart-group-reservation-modal .js-cart-group-modal-select {
    max-width: 30rem;
    margin: 0 auto;
}
/* El botón de avanzar gana el ancho completo de la columna: sobre un fondo
   claro y sólido, un botón a medio ancho quedaba descentrado respecto al
   panel que tiene justo encima. */
#cart-group-reservation-modal .js-cart-group-modal-show-availability {
    display: flex;
    width: 100%;
    margin-top: 1.5rem;
}

/* Calendario y horas, lado a lado. Apilados, el modal medía dos pantallas
   de alto: había que bajar a ver las horas y volver a subir a cambiar de
   día. Con `hidden` (display:none) la tira de horas no ocupa nada, así que
   antes de elegir día el calendario se queda centrado él solo, igual que
   estaba. Sin media query propia: el flex-basis se encarga de apilarlos
   cuando no caben. */
#cart-group-reservation-modal .js-availability-calendar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
}
#cart-group-reservation-modal .js-availability-calendar > .availability-calendar {
    flex: 0 1 20rem;
    max-width: 20rem;
    margin: 0;
}
#cart-group-reservation-modal .availability-calendar__hours {
    flex: 1 1 17rem;
    margin-top: 0;
    justify-content: flex-start;
}
#cart-group-reservation-modal .availability-calendar__hours-title {
    text-align: left;
}
#cart-group-reservation-modal .availability-calendar__message {
    flex: 1 1 100%;
    margin-top: 0;
}

/* Cada franja en su propia tira, en vez de una sola lista continua. */
.availability-calendar__hours-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    width: 100%;
    margin-bottom: 1.25rem;
}
.availability-calendar__hours-strip:last-child {
    margin-bottom: 0;
}

/* Rótulo de franja: mismo tratamiento que .availability-calendar__hours-title
   (dato del estándar), separado del bloque anterior. */
.availability-calendar__hours-title--group {
    margin-top: .5rem;
    text-align: left;
    letter-spacing: .12em;
}

/* --- Aviso de reescritura de cita (§6.1) ---
   Entre lo marcado hay algo que YA tiene cita, y confirmar la cadena se la
   va a cambiar. Mismo recurso visual que .rb-chain__order (filete y lavado
   en --brass): las dos son advertencias sobre cómo va a quedar la cita,
   no errores. */
.rb-chain__rewrite-note {
    margin: 0 0 1rem;
    padding: .875rem 1rem;
    border-left: 2px solid var(--brass);
    background: color-mix(in srgb, var(--brass) 6%, transparent);
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
}

/* --- Gestor de citas: tarjeta de cada cita ya formada ---
   Mismo recurso visual que .rb-chain__order (filete --brass + lavado) para
   que una cita se reconozca igual aquí que en la tabla del carrito y en
   el modal de cadena. Lo que cambia es la jerarquía dentro de la tarjeta:
   fecha (antetítulo en --brass) → servicios con su hora → acciones, cada
   una con el peso que le toca. */
.rb-chain__visit-title {
    margin: 0 0 .5rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brass);
}
.rb-chain__visit-add-label {
    margin: 1rem 0 .5rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(41, 37, 28, .6);
}
.rb-chain__visit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
/* Los nombres de servicio NO van en versalitas: el pill del estándar es
   para acciones cortas ("Confirmar"), y "AÑADIR RITUAL DETOX 60'" en
   mayúsculas grita y se lee peor que el propio nombre del servicio. Se
   conserva la forma de pastilla (la afordancia de "esto se pulsa") y se le
   quita el énfasis tipográfico. */
#cart-group-manager-modal .rb-chain__visit-actions .btn-pill {
    padding: .35rem 1rem;
    font-size: .8125rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}
/* "Deshacer" no es una acción hermana de "añadir": es la salida, y va en
   metadato accionable (mismo peso que "Quitar la cita" de la tabla), al
   final de la fila y en el rojo de error sólo al pasar por encima. */
.rb-chain__visit-undo {
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(41, 37, 28, .6);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color var(--motion-hover) var(--motion-ease);
}
.rb-chain__visit-undo:hover,
.rb-chain__visit-undo:focus-visible {
    color: var(--color-error);
}
@media (prefers-reduced-motion: reduce) {
    .rb-chain__visit-undo {
        transition: none;
    }
}
@media (max-width: 575.98px) {
    /* En móvil la fila de acciones se apila; "Deshacer" pierde el empuje a
       la derecha (no hay derecha que valga en una columna). */
    .rb-chain__visit-undo {
        margin-left: 0;
        margin-top: .25rem;
    }
}

/* --- Orden real de la cadena (solo cuando el servidor lo ha invertido) --- */
.rb-chain__order {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 2px solid var(--brass);
    background: color-mix(in srgb, var(--brass) 6%, transparent);
}
.rb-chain__order-note {
    margin: 0 0 .5rem;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
}
.rb-chain__order-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .9375rem;
    line-height: 1.6;
}

/* --- Desglose por servicio: "10:00 Masaje 1 · 11:55 Masaje 2" --- */
.rb-chain__breakdown {
    flex: 1 1 16rem;
}
.rb-chain__breakdown-date {
    margin: 0 0 .5rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(41, 37, 28, .6);
    font-variant-numeric: tabular-nums;
}
.rb-chain__breakdown-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Se lee como una secuencia, no como una lista: un filete vertical une la
   hora de un eslabón con la del siguiente, que es exactamente lo que pasa
   en la cita (uno empieza cuando acaba el otro). Es un pseudoelemento
   sobre el hueco entre filas, sin tocar el marcado que pinta chain-modal.js. */
.rb-chain__breakdown-item {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .45rem 0;
}
.rb-chain__breakdown-item + .rb-chain__breakdown-item::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: -.35rem;
    height: .7rem;
    border-left: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
}
/* Ancho fijo + tabular-nums: las horas quedan alineadas en columna aunque
   cambien de dígitos (9:40 / 11:55). */
.rb-chain__breakdown-hour {
    flex: 0 0 auto;
    min-width: 3.25rem;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--brass);
    font-variant-numeric: tabular-nums;
}
.rb-chain__breakdown-name {
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
}

/* En el resumen previo a confirmar, la fecha deja de ser un rótulo
   diminuto: es la mitad del dato que el cliente está a punto de aceptar. */
.rb-chain__breakdown--summary .rb-chain__breakdown-date {
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
}

/* En el modal de confirmación final el desglose va centrado bajo la
   pregunta, separado por un filete como el resto de bloques del estándar. */
.rb-chain__breakdown--confirm {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(41, 37, 28, .08);
}

/* --- Sin combinación posible (§6.4): no es un error, no se pinta como tal --- */
.rb-chain__empty {
    padding: 1.5rem 0 .5rem;
    text-align: center;
    animation: rb-chain-fade-in var(--motion-duration) var(--motion-ease);
}
.rb-chain__empty-title {
    margin: 0 0 .75rem;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
}
.rb-chain__empty-text {
    margin: 0 auto 1.75rem;
    max-width: 34rem;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(41, 37, 28, .75);
}
.rb-chain__empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

@keyframes rb-chain-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .rb-chain__empty {
        animation: none;
    }
}

/* --- Revalidación del gate de pago (RESERVAS-MULTIPLES.md §4.D7) ---
   Estado de carga del botón "Place Order" mientras cart-reservation.js
   comprueba contra Bewe que las cadenas ya confirmadas del carrito siguen
   disponibles, justo antes de dejar pasar el pago. Con la caché de 10
   minutos fría esa consulta puede notarse, así que el botón lo dice en vez
   de quedarse quieto sin explicación.

   Reaprovecha el mismo anillo giratorio que ya usan los modales de
   confirmación de booking-landing.js (@keyframes availability-calendar-spin,
   definida una sola vez en custom.css) — no se inventa un spinner nuevo,
   solo se repite aquí porque booking-landing.css no se carga en el
   checkout. La aparición usa @keyframes rb-chain-fade-in (ya definida más
   arriba en este mismo fichero) con --motion-hover (.4s) + --motion-ease:
   mismos tokens de movimiento que el resto del estándar, ninguna duración
   nueva. */
.rb-cart-reservation__pay-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: .5rem;
    vertical-align: middle;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: availability-calendar-spin .8s linear infinite,
               rb-chain-fade-in var(--motion-hover) var(--motion-ease);
}

@media (prefers-reduced-motion: reduce) {
    .rb-cart-reservation__pay-spinner {
        animation: none;
    }
}

/* "Guardando tu cita…" en el modal de reserva individual, mientras el
   servidor revalida el hueco y la página se recarga con la cita ya puesta.
   Mismo registro de apoyo en gris que .rb-chain__lead —es una nota de
   estado, no una instrucción ni un error— y el MISMO spinner que el botón
   de pago, que ya trae su margen y su alineación. */
/* `display:flex` es una regla de autor y PISA el display:none que el
   navegador aplica a [hidden], así que sin esta línea el aviso "Guardando
   tu cita…" se quedaba visible desde que se abría el modal, con su spinner
   girando sobre un calendario en el que todavía no se había pulsado nada.
   Va primero para que la regla de abajo no tenga que competir en orden. */
.rb-cart-reservation__busy[hidden] {
    display: none;
}

.rb-cart-reservation__busy {
    display: flex;
    align-items: center;
    margin: 1rem 0 0;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(41, 37, 28, .6);
}
/* El spinner es un ítem flex: sin esto se encoge cuando el rótulo ocupa las
   dos líneas que ocupa en móvil, y el círculo deja de ser un círculo. */
.rb-cart-reservation__busy .rb-cart-reservation__pay-spinner {
    flex: 0 0 auto;
}

/* Mientras hay una hora guardándose, el calendario deja de aceptar clics:
   el guardián de individual-modal.js ya descarta la segunda pulsación, y
   esto es lo que lo hace visible en vez de que parezca que sigue vivo pero
   no responde. La hora recién elegida se queda marcada debajo, atenuada
   junto al resto. */
.js-cart-reservation-modal-calendar.is-busy {
    pointer-events: none;
    opacity: .55;
}

/* Móvil: el desglose y el botón de confirmar dejan de compartir línea. */
@media (max-width: 575.98px) {
    .rb-cart-reservation__summary {
        flex-direction: column;
        align-items: stretch;
    }
    /* `flex: 1 1 16rem` del desglose es un ancho pensado para la fila de
       escritorio; al apilar en columna, ese flex-basis pasa a ser ALTO y el
       bloque crema se estiraba a 16rem aunque el desglose ocupe tres
       líneas, dejando un hueco enorme antes de "Confirmar la cita". En
       columna el desglose mide lo que mide su contenido. */
    .rb-cart-reservation__summary .rb-chain__breakdown {
        flex: 0 0 auto;
    }
    .rb-chain__empty-actions {
        flex-direction: column;
    }
}

/* Móvil: con ~47 horas agrupadas en mañana/tarde, dejar que crezcan dentro
   del scroll normal de la página deja un modal interminable. Se contiene
   el bloque de horas en su propio scroll interno (el día seleccionado y el
   resto del modal quedan siempre visibles arriba) en vez de tocar cómo
   BeweCalendar agrupa u ordena las horas — mismo criterio que el
   desbordamiento controlado que ya usa .rb-cart-flyout__list en el
   desplegable de cabecera. */
@media (max-width: 575.98px) {
    #cart-group-reservation-modal .availability-calendar__hours {
        max-height: 45vh;
        overflow-y: auto;
        padding-right: .25rem;
        /* Mismo tratamiento discreto de barra que el desplegable de
           cabecera (ritualbienestar_shoppingcart.css): tono del proyecto y
           ancho fino, en vez del gris frío del navegador. */
        scrollbar-width: thin;
        scrollbar-color: rgba(41, 37, 28, .28) transparent;
    }
    #cart-group-reservation-modal .availability-calendar__hours::-webkit-scrollbar {
        width: 6px;
    }
    #cart-group-reservation-modal .availability-calendar__hours::-webkit-scrollbar-track {
        background: transparent;
    }
    #cart-group-reservation-modal .availability-calendar__hours::-webkit-scrollbar-thumb {
        background: rgba(41, 37, 28, .28);
        border-radius: 999px;
    }
}

/* Móvil: los botones de acción de estas pantallas son .btn-pill--sm
   (padding .5rem + .8rem de texto ≈ 31px de alto), un tamaño pensado para
   ir en línea con un input en escritorio. Con el dedo se quedan por debajo
   de los 44px de referencia que este mismo fichero ya aplica a la fila del
   checklist y custom.css a los chips de hora, así que crecen solo de alto:
   ni tipografía ni padding lateral ni escritorio se tocan. */
@media (max-width: 767px) {
    .rb-cart-reservation__btn.btn-pill--sm,
    #product-chain-invite-modal .btn-pill--sm {
        min-height: 44px;
    }
}

/* ==========================================================================
   Cantidad múltiple: modal de asignación de fecha (RESERVAS-MULTIPLES.md
   §7, fase 6 bloque B)
   --------------------------------------------------------------------------
   Una fila por unidad recién añadida: nombre a la izquierda, "Asignar
   fecha" o la fecha ya elegida a la derecha. Mismo filete suave entre filas
   que .rb-cart-reservation__check, sin bordes gruesos ni sombras.
   ========================================================================== */
.rb-multi-quantity__intro {
    margin: 0 0 1.25rem;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(41, 37, 28, .75);
}

.rb-multi-quantity__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rb-multi-quantity__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem .25rem;
    border-bottom: 1px solid rgba(41, 37, 28, .08);
}

.rb-multi-quantity__item:last-child {
    border-bottom: none;
}

.rb-multi-quantity__item-name {
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
}

/* Fecha/hora ya asignadas: mismo tratamiento tabular-nums que el resto del
   estándar (cart-table.tpl, desglose de cadena), en --brass como el resto
   de datos de reserva confirmados. */
.rb-multi-quantity__item-status {
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--brass);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}