/* ============================================================================
   Pantalla de reserva de cita (Home/Appointment)
   ----------------------------------------------------------------------------
   Los horarios se guardan en la zona en la que el doctor arma su agenda y se
   muestran convertidos a la de quien reserva. Eso obliga a decir en qué zona
   están: sin decirlo, el paciente no sabe si el número que ve es el suyo o el
   del doctor, y la conversión no sirve de nada.
   ============================================================================ */

/* Marca de que un horario cae en otro día natural al convertirlo a la zona del
   paciente. Pasa con las citas de la tarde cuando hay muchas horas de
   diferencia: las 19:00 de Quito son las 02:00 del día siguiente en Madrid, y
   sin avisar el paciente reserva creyendo que es hoy. */
.cm-day-different {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cm-amber);
    line-height: 1.1;
}


/* ============================================================================
   La rejilla de horarios en el teléfono
   ----------------------------------------------------------------------------
   En pantalla ancha la agenda es una rejilla: los días en columnas y las horas
   de cada día debajo. En un teléfono esa misma rejilla se sale por la derecha
   —se veían tres días y medio de siete— y el paciente tenía que arrastrar de
   lado para encontrar el suyo, sin saber cuántos había.

   Debajo de 768px pasa a ser lo que hacen las apps de citas: una fila de días
   que se desliza, y debajo sólo las horas del día elegido, en rejilla de tres.

   El marcado no cambia. Se reordena con CSS y se muestra un día a la vez con
   un poco de JavaScript, así que la vista de escritorio queda intacta y el
   guardado del horario sigue siendo el mismo.
   ============================================================================ */

@media (max-width: 767.98px) {

    /* La agenda usa .col-md-12, que por debajo de 768px no fija ancho: la columna
       se ajusta a su contenido en lugar de al teléfono. Con la rejilla dentro,
       cada 1fr se resolvía a max-content y el bloque acababa midiendo 730px en
       una pantalla de 375. Se ancla la cadena al ancho disponible. */
    .booking-schedule .schedule-header > .row,
    .booking-schedule .schedule-container,
    .booking-schedule .schedule-container > .row {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .booking-schedule .schedule-header > .row > [class*="col-"],
    .booking-schedule .schedule-container > .row > [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .booking-schedule .time-slot,
    .booking-schedule .day-slot {
        width: 100%;
        min-width: 0;
    }

    /* La tarjeta deja de ser el contenedor que se desplaza. Con el overflow aquí
       arrastraba el bloque entero y las fichas de fecha se cortaban contra los
       bordes de la pantalla; el desplazamiento tiene que estar en la tira de días,
       que es lo único que no cabe. */
    .booking-schedule {
        overflow-x: clip;
    }

    /* min-width: auto deja que una caja crezca hasta lo que pida su contenido: es
       lo que hacía que la cabecera midiera 730px dentro de una tarjeta de 351. */
    .booking-schedule .schedule-header,
    .booking-schedule .schedule-container,
    .booking-schedule .schedule-header > .row,
    .booking-schedule .schedule-container > .row {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* ---------------------------------------------------------- Días */

    .booking-schedule .day-slot ul {
        display: flex;
        flex-wrap: nowrap;
        gap: .4rem;
        margin: 0;
        padding: .25rem .1rem .6rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;

        /* Fichas y flechas sobre el mismo eje. Sin esto cada una se alineaba a su
           manera dentro de la caja, que tiene más relleno abajo que arriba, y las
           flechas quedaban altas respecto a las fechas. */
        align-items: center;

        /* Deja libre el ancho de las dos flechas, que se quedan fijas en los
           bordes: sin esto una ficha puede detenerse justo debajo de una. */
        scroll-padding-inline: 2.9rem;
    }

    .booking-schedule .day-slot ul::-webkit-scrollbar {
        display: none;
    }

    .booking-schedule .day-slot ul > li {
        flex: 0 0 auto;
        width: auto;
        min-width: 4.6rem;
        padding: .5rem .6rem;
        border: 1px solid var(--cm-rule);
        border-radius: var(--cm-radius);
        background: var(--cm-white);
        text-align: center;
        line-height: 1.25;
        scroll-snap-align: center;
        cursor: pointer;
    }

    .booking-schedule .day-slot ul > li > span:first-child {
        display: block;
        font-size: .74rem;
        text-transform: capitalize;
        color: var(--cm-gray);
    }

    .booking-schedule .day-slot ul > li .slot-date {
        display: none;
    }

    .booking-schedule .day-slot ul > li .cm-date-short {
        display: block;
        font-size: .84rem;
        font-weight: 700;
        color: var(--cm-ink);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .booking-schedule .day-slot ul > li.cm-day-active .cm-date-short {
        color: var(--cm-cyan-dark);
    }

    /* El día elegido tiene que distinguirse a la primera: es lo que decide qué
       horas se están viendo debajo. */
    .booking-schedule .day-slot ul > li.cm-day-active {
        border-color: var(--cm-cyan);
        background: var(--cm-cyan-soft);
    }

    .booking-schedule .day-slot ul > li.cm-day-active .slot-date,
    .booking-schedule .day-slot ul > li.cm-day-active > span:first-child {
        color: var(--cm-cyan-dark);
    }

    /* Un día sin ninguna hora libre se sigue mostrando, apagado: si se ocultara,
       el paciente no sabría que ese día existe y está lleno. */
    .booking-schedule .day-slot ul > li.cm-day-full {
        opacity: .45;
    }

    /* Las flechas de semana se quedan quietas en los bordes mientras los días pasan
       por debajo. Dentro de la tira se perdían al arrastrar, y para cambiar de semana
       había que llevarla hasta el extremo. */
    /* La tira es el marco de referencia de las flechas. El <ul> tiene que quedarse
       sin posicionar: la plantilla lo declara `relative` y, siendo además el que se
       desplaza, las flechas se iban con los días. */
    .booking-schedule .day-slot {
        position: relative;
        /* Sin esto mide cero: la plantilla flota los elementos de la lista y el
           contenedor no los contenía, así que top: 50% caía en su borde de arriba. */
        display: flow-root;
    }

    .booking-schedule .day-slot > ul {
        position: static;
    }

    .booking-schedule .day-slot ul > li.left-arrow,
    .booking-schedule .day-slot ul > li.right-arrow {
        /* Fuera del flujo que se desplaza. Como elementos pegajosos, su alineación
           vertical dependía del relleno del contenedor y quedaban once píxeles por
           encima de las fichas; ancladas a la tira, centrado significa centrado
           respecto a lo que se ve. */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;

        /* Botón redondo, no una franja: de alto completo tapaba entera la ficha del
           extremo y parecía un trozo de la tira en vez de algo que se pulsa. */
        width: 2.2rem;
        min-width: 0;
        max-width: 2.2rem;
        height: 2.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(39, 43, 65, .08);
        border-radius: 50%;

        /* Translúcido a propósito: la fecha que queda debajo se sigue adivinando,
           así se sabe que ahí hay otro día. El desenfoque mantiene legible la
           flecha por encima de lo que pase por detrás. */
        background: rgba(255, 255, 255, .82);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        box-shadow: 0 2px 8px rgba(39, 43, 65, .16);
    }

    /* `!important` aquí y en ningún otro sitio de esta hoja: la plantilla declara
       `width: 20px !important` en estas dos flechas, y a una declaración importante
       sólo se le gana con otra importante y más específica. Con 20 de ancho y 35 de
       alto, el radio del 50% las dejaba ovaladas. */
    .booking-schedule .day-slot ul > li.left-arrow {
        left: .25rem;
        width: 2.2rem !important;
    }

    .booking-schedule .day-slot ul > li.right-arrow {
        /* La plantilla además la saca 11px fuera del contenedor, medio cortada. */
        right: .25rem;
        width: 2.2rem !important;
    }

    /* Con las flechas fuera del flujo, la tira recupera su ancho completo; el relleno
       deja el sitio para que ninguna ficha quede debajo de un botón. */
    .booking-schedule .day-slot ul {
        padding-inline: 2.9rem;
    }

    .booking-schedule .day-slot ul > li.left-arrow a,
    .booking-schedule .day-slot ul > li.right-arrow a {
        min-height: 0;
        height: 100%;
        border-radius: 50%;
        color: var(--cm-ink);
        font-size: .8rem;
    }

    .booking-schedule .day-slot ul > li.left-arrow a,
    .booking-schedule .day-slot ul > li.right-arrow a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        min-height: 44px;
        color: var(--cm-gray);
    }

    /* ---------------------------------------------------------- Horas */

    .booking-schedule .time-slot > ul {
        display: block;
        margin: 0;
        padding: 0;
    }

    /* Sólo el día elegido. Los demás siguen en el documento para no rehacer el
       marcado ni perder el horario ya seleccionado al cambiar de día. */
    .booking-schedule .time-slot > ul > li {
        display: none;
        width: 100%;
        padding: 0;
        border: 0;
    }

    .booking-schedule .time-slot > ul > li.cm-day-active {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
    }

    .booking-schedule .time-slot .timing {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .1rem;
        min-height: 52px;
        margin: 0;
        padding: .5rem .3rem;
        border: 1px solid var(--cm-rule);
        border-radius: var(--cm-radius-sm);
        background: var(--cm-white);
        color: var(--cm-ink);
        font-size: .9rem;
        font-variant-numeric: tabular-nums;
        line-height: 1.15;
    }

    .booking-schedule .time-slot .timing.selected {
        border-color: var(--cm-cyan);
        background: var(--cm-cyan);
        color: #fff;
    }

    .booking-schedule .time-slot .timing.selected .cm-day-different {
        color: #fff;
    }

    /* En modo un-día-a-la-vez la caja de "No disponible" ya no aporta: si el día
       está vacío se dice una vez, debajo. */
    .booking-schedule .time-slot > ul > li > .alert {
        display: none;
    }

    .cm-without-hours {
        padding: 1.6rem 1rem;
        text-align: center;
        color: var(--cm-gray);
        font-size: .88rem;
    }

    .cm-without-hours i {
        display: block;
        margin-bottom: .4rem;
        font-size: 1.4rem;
        color: var(--cm-gray-light);
    }

    /* ------------------------------------------------- Continuar, a mano */

    /* Los botones estaban encima de la rejilla: al elegir una hora había que
       volver a subir para continuar. */
    .booking-schedule + .cm-booking-footer,
    .cm-booking-footer {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--cm-rule);
        background: var(--cm-white);
        box-shadow: 0 -4px 18px rgba(39, 43, 65, .1);
    }

    .cm-booking-footer__chosen {
        flex: 1 1 auto;
        min-width: 0;
        font-size: .84rem;
        line-height: 1.3;
        color: var(--cm-gray);
    }

    .cm-booking-footer__chosen strong {
        display: block;
        color: var(--cm-ink);
        font-size: .95rem;
        font-variant-numeric: tabular-nums;
    }

    .cm-booking-footer .btn {
        flex: 0 0 auto;
    }

    body.cm-with-footer-booking {
        padding-bottom: 82px;
    }

    /* La sección original de botones se oculta: su contenido vive ahora en el pie. */
    .cm-booking-actions {
        display: none;
    }
}

/* La fecha abreviada es sólo para las fichas del teléfono; en la rejilla de
   escritorio la columna ya lleva la fecha completa. */
@media (min-width: 768px) {
    .booking-schedule .day-slot .cm-date-short {
        display: none;
    }
}

/* Mientras llega la semana nueva. Media décima de segundo apenas se ve, pero si la
   red va lenta el paciente sabe que su pulsación se registró. */
#cmHours.cm-loading {
    opacity: .55;
    pointer-events: none;
    transition: opacity .12s ease;
}