/* ============================================================================
   Ficha pública del doctor
   ----------------------------------------------------------------------------
   Es la página en la que el paciente decide. Tenía dos problemas de fondo: la
   tarifa se leía como una línea más de la lista de datos, y la única acción
   —reservar— estaba arriba del todo, así que en el móvil desaparecía en cuanto
   se empezaba a leer la formación y la experiencia.
   ============================================================================ */

/* -------------------------------------------------------------- Precios

   Una tarjeta por modalidad, que es como el paciente elige: en línea o en el
   consultorio. Antes era una lista plana de importes agrupada por valor, así que
   quien cobraba lo mismo por las dos enseñaba una sola cifra sin decir de qué era,
   y el precio de fin de semana no llegaba a salir nunca.

   El precio manda en el tamaño —es lo que más pesa en la decisión— y el fin de
   semana va debajo, en pequeño, y sólo cuando de verdad es distinto. */

.cm-prices {
    display: grid;
    gap: .55rem;
    margin: .85rem 0 1.1rem;
}

.cm-price {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .35rem .9rem;
    padding: .65rem .85rem;
    border: 1px solid var(--cm-rule);
    border-radius: var(--cm-radius-sm);
    background: var(--cm-bg);
}

.cm-price__that {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--cm-gray);
    font-size: .82rem;
    font-weight: 600;
}

.cm-price__that i {
    color: var(--cm-cyan-text, #0c76a4);
    font-size: .95rem;
}

.cm-price__how-much {
    color: var(--cm-ink);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
    justify-self: end;
}

/* El de fin de semana ocupa la fila entera, debajo de los dos: es una condición
   del precio de arriba, no un precio que compita con él. */
.cm-price__weekend {
    grid-column: 1 / -1;
    color: var(--cm-gray);
    font-size: .78rem;
}

/* --------------------------------------------------- Reservar, siempre a mano */

.cm-book-fixed {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    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-book-fixed__price {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.cm-book-fixed__price span {
    color: var(--cm-ink);
    font-size: 1rem;
    font-weight: 700;
}

.cm-book-fixed__price small {
    color: var(--cm-gray);
    font-size: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-book-fixed .btn {
    flex: 0 0 auto;
    padding-right: 1.4rem;
    padding-left: 1.4rem;
}

/* La barra tapa el final de la página; se le deja sitio para que el último
   bloque no quede escondido detrás.

   Y se dice cuánto ocupa, que es lo que Robi necesita para ponerse encima y no
   taparla: el botón vive en la esquina de abajo a la izquierda, justo donde está
   el «desde $20,00» (Nelson, 24-sep-2026). */
@media (max-width: 991.98px) {
    body {
        --cm-bottom-bar: calc(76px + env(safe-area-inset-bottom));
        padding-bottom: var(--cm-bottom-bar);
    }
}

/* Los premios y la formación se leen como una línea de tiempo; sin el punto de
   color la lista parecía un párrafo con sangría. */
.experience-list .name {
    display: block;
    color: var(--cm-ink);
    font-weight: 600;
}

/* -------------------------------------------------------------- Cómo atiende

   Va lo primero de la ficha y antes no existía: el paciente sólo leía la ciudad,
   y quien va a ir a un consultorio necesita la calle y el punto en el mapa. */

.cm-block-title {
    margin: 0 0 .85rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cm-ink);
}

.cm-attends { margin-bottom: 1.75rem; }

.cm-attends__list {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cm-attends__box {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem .95rem;
    border: 1px solid var(--cm-rule);
    border-radius: var(--cm-radius-sm);
    background: var(--cm-bg);
}

.cm-attends__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(32, 192, 243, .12);
    color: var(--cm-cyan-text, #0c76a4);
    font-size: 1rem;
}

.cm-attends__box strong {
    display: block;
    color: var(--cm-ink);
    font-size: .95rem;
}

.cm-attends__where {
    margin: .2rem 0 0;
    color: var(--cm-gray);
    font-size: .84rem;
    line-height: 1.45;
}

.cm-attends__map {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .35rem;
    color: #0c6a8c;
    font-size: .82rem;
    font-weight: 600;
}

/* ------------------------------------------------- Formación, experiencia, premios

   Estaban en la línea de tiempo de la plantilla: un circulito, una raya y tres
   textos apilados sin jerarquía, con el año pesando lo mismo que el título. Lo que
   el paciente busca es qué estudió y dónde; el año es apoyo, así que va al margen. */

.cm-milestones { margin-bottom: 1.75rem; }

.cm-milestone {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--cm-rule);
}

.cm-milestone:last-child { border-bottom: 0; }

.cm-milestone__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--cm-bg);
    color: var(--cm-gray);
    font-size: .85rem;
}

.cm-milestone__text strong {
    display: block;
    color: var(--cm-ink);
    font-size: .95rem;
    line-height: 1.35;
}

.cm-milestone__text span {
    display: block;
    color: var(--cm-gray);
    font-size: .85rem;
}

.cm-milestone__note {
    margin-top: .2rem;
    font-size: .82rem !important;
    font-style: italic;
}

/* El año, al margen y en pequeño: sitúa, no compite. */
.cm-milestone__when {
    color: var(--cm-gray-light, #9aa4ae);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-top: .15rem;
}

@media (max-width: 575.98px) {
    /* En móvil el año se va debajo del texto: en tres columnas estrechas el título
       se parte en cuatro líneas para dejarle sitio a cuatro cifras. */
    .cm-milestone { grid-template-columns: auto 1fr; }
    .cm-milestone__when { grid-column: 2; padding-top: .25rem; }
}

/* Los servicios de la cabecera, con su icono. */
.clinic-services span i {
    margin-right: .35rem;
    color: var(--cm-cyan-text, #0c76a4);
}

/* Compartir, dentro de la barra fija del móvil.

   Cuadrado y sólo con el icono: al lado de «Agendar» compite por un ancho que
   no sobra, y el icono de compartir se reconoce sin leerlo. El nombre va en
   aria-label, que es lo que necesita quien no lo ve.

   Dentro de la tarjeta no servía: quedaba justo detrás de esta misma barra, así
   que en un teléfono de 375 puntos el botón existía y no se veía nunca. */
.cm-share--bar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.05rem;
}

/* El texto va sólo para el lector de pantalla, así que el aviso de «copiado» no
   se puede dar cambiándolo: se marca con el color del botón. */
.cm-share--bar.cm-share--done {
    background: var(--cm-green-bg);
}

/* ------------------------------------- El vacío al lado de los botones */

/* En dos columnas, el alto de la tarjeta lo manda la derecha: dos tarifas y
   la fila de botones suman unos 250 puntos, y lo de la izquierda —nombre,
   especialidad, servicios y la próxima hora— ronda los 150. Los cien de
   diferencia se acumulaban al final de la columna izquierda, debajo de la
   última línea, y se leían como un agujero.

   No se quita quitando cosas: se reparte. El contenido se distribuye a lo
   alto de la columna, así que el nombre queda arriba, la disponibilidad
   abajo y el aire cae entre las líneas, donde no se ve como un vacío.

   Ese desnivel es estable —la derecha siempre lleva lo mismo—, y cuando la
   izquierda crece porque el profesional tiene más servicios, el reparto se
   reduce solo hasta desaparecer.

   Por debajo de 768 la plantilla apila las dos columnas y aquí no hay nada
   que repartir. */
@media (min-width: 768px) {
    .doctor-widget .doc-info-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* ------------------------------------------------- La foto del profesional */

/* La plantilla la clava a 150 puntos en cualquier pantalla y la pega arriba.
   En un monitor ancho eso deja una foto pequeña al lado de una columna de
   texto que ocupa el doble de alto, y la cara —que es lo primero que mira
   quien está eligiendo médico— pierde el sitio que le corresponde.

   Crece con la ventana, entre 140 y 190 puntos. Con tope, porque una foto
   que sigue creciendo acaba compitiendo con el nombre y con el precio, que
   es lo que se ha venido a leer.

   Y centrada frente al texto: alinearla arriba está bien cuando los dos
   bloques miden lo mismo, y aquí el de texto es bastante más alto.

   Cuadrada y recortada desde arriba: las fotos que sube la gente vienen en
   proporciones distintas, y sin esto cada ficha tiene una forma. En un
   retrato lo que importa está en la parte de arriba, así que lo que se
   recorta es el pecho y no la cabeza. */
@media (min-width: 768px) {
    .doctor-widget .doctor-img {
        flex: 0 0 clamp(140px, 13vw, 190px);
        width: clamp(140px, 13vw, 190px);
        align-self: center;
    }

    .doctor-widget .doctor-img img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center top;
        border-radius: 10px;
    }
}

/* ------------------------------------------- La línea de «Ahora» del horario */

/* En el teléfono, la primera línea del horario —«Ahora», la fecha completa y
   la etiqueta de abierto o cerrado— no cabe de lado a lado, y el contenedor
   de la plantilla lleva flex-wrap: wrap. Con wrap, lo que no cabe no se
   encoge: se va a la línea de abajo. Así que la etiqueta y la hora caían
   debajo y ocupando sólo la mitad izquierda, con «Abierto» alineado a la
   derecha de esa media caja, que es justo en mitad de la tarjeta. Parecía
   puesto al azar.

   Sin wrap, la columna de la izquierda se encoge —la fecha pasa a dos
   líneas— y la etiqueta con su horario se quedan a la derecha, alineados con
   los de los demás días. Que es lo que se espera: leer el día a la izquierda
   y sus horas a la derecha, en todas las filas igual.

   Va sin media query a propósito: en tablet la tarjeta ocupa media pantalla
   y le pasaba lo mismo. */
.listing-hours .listing-day.current {
    flex-wrap: nowrap;
    gap: 12px;
}

.listing-hours .listing-day.current .day {
    /* Que se encoja; sin esto un elemento de flex no baja de su contenido. */
    flex: 1 1 auto;
    min-width: 0;
}

.listing-hours .listing-day.current .time-items {
    flex: 0 0 auto;
}

/* ================================================ El horario, en una tarjeta */

/* Lo de antes era la tabla de la plantilla: filas a dos columnas con una línea
   gris por medio y la fecha del sistema arriba. Decía lo necesario y parecía
   un listín.

   La forma sigue a lo que se lee: primero el estado —una respuesta, con su
   punto de color— y después la semana, con hoy resaltado para no tener que
   buscarlo. Los mismos recursos que el resto de la ficha: una caja con borde
   suave, radios de 10 a 12, la tinta y el gris de siempre, y las horas en
   cifras de ancho fijo para que las columnas cuadren solas. */
.cm-hours {
    border: 1px solid var(--cm-rule);
    border-radius: 14px;
    background: var(--cm-white);
    overflow: hidden;
}

/* ---------------------------------------------------- Cómo está ahora mismo */

.cm-hours__now {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: var(--cm-soft);
    border-bottom: 1px solid var(--cm-rule);
}

/* El punto hace el trabajo del color sin pintar media caja de verde, y deja el
   texto en negro, que es lo que se lee. */
.cm-hours__point {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--cm-gray);
}

.cm-hours__now--open .cm-hours__point {
    background: var(--cm-green);
    /* El halo lo separa del fondo suave sin subir la saturación. */
    box-shadow: 0 0 0 4px var(--cm-green-bg);
}

.cm-hours__now strong {
    display: block;
    color: var(--cm-ink);
    font-size: 1rem;
    line-height: 1.3;
}

.cm-hours__when {
    display: block;
    margin-top: 2px;
    color: var(--cm-gray);
    font-size: .875rem;
}

/* ------------------------------------------------------------- La semana */

.cm-hours__week {
    margin: 0;
    padding: 6px 0;
    list-style: none;
}

.cm-hours__day {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 18px;
}

/* Hoy, marcado. Sin esto hay que contar las filas para saber en cuál se está,
   que es justo lo que el horario tenía que ahorrar. */
.cm-hours__day--today {
    background: var(--cm-soft);
}

.cm-hours__name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cm-ink);
    font-size: .925rem;
    /* La primera letra del día viene en minúscula del sistema. */
    text-transform: capitalize;
}

.cm-hours__day--today .cm-hours__name {
    font-weight: 600;
}

.cm-hours__today {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--cm-green-bg);
    color: var(--cm-green);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* Las franjas se apilan a la derecha: un día partido en mañana y tarde son dos
   líneas, no una frase larga que haya que leer entera. */
.cm-hours__strips {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.cm-hours__strip {
    color: var(--cm-ink);
    font-size: .875rem;
    /* Cifras del mismo ancho: las columnas de horas cuadran sin tocar nada. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cm-hours__closed {
    color: var(--cm-gray);
    font-size: .875rem;
}

@media (max-width: 575.98px) {
    .cm-hours__day,
    .cm-hours__now {
        padding-right: 14px;
        padding-left: 14px;
    }

    .cm-hours__strip,
    .cm-hours__closed,
    .cm-hours__name {
        font-size: .85rem;
    }
}