/* ==========================================================
   Agenda pública — panel + calendario, y la ficha "Mi cita"
   ==========================================================
   Mobile-first. Sin dependencias: los pasos son enlaces, así que todo funciona
   con JavaScript desactivado.

   La pantalla son dos columnas en escritorio y una sola en el teléfono. El
   orden del marcado es panel → calendario → información, que es exactamente el
   orden en que hay que leerlo cuando las columnas se apilan; en escritorio el
   grid manda el panel y la información a la columna izquierda sin tocar el
   marcado. Por eso la información de interés es un bloque aparte y no va dentro
   del panel: adentro habría quedado ENCIMA del calendario en el teléfono, y
   nadie entra a la agenda a leer las condiciones primero.
   ========================================================== */

.agenda { padding-block: 2rem 3.5rem; }

.agenda__header { margin-bottom: 1.6rem; }
.agenda__header h1 { margin: 0 0 0.4rem; }
.agenda__intro { margin: 0 0 1.2rem; color: var(--color-text-muted); max-width: 60ch; }

/* ---------- Indicador de pasos ---------- */
.agenda-pasos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: paso;
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

.agenda-pasos li {
    counter-increment: paso;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.agenda-pasos li::before {
    content: counter(paso);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    flex: 0 0 auto;
}

.agenda-pasos .is-current { color: var(--color-text); font-weight: 600; }
.agenda-pasos .is-current::before { border-color: currentColor; }
/* El par --color-primary / --color-primary-text, no --color-text con blanco
   fijo: en modo oscuro --color-text es CLARO, así que el visto quedaba blanco
   sobre casi blanco —invisible— y el paso completado no se distinguía del
   pendiente. Este par se da vuelta junto. */
.agenda-pasos .is-done::before {
    content: '✓';
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

/* ==========================================================
   La grilla de la pantalla
   ========================================================== */
.agenda-layout {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 960px) {
    .agenda-layout {
        grid-template-columns: 330px minmax(0, 1fr);
        grid-template-areas:
            "panel main"
            "info  main";
        gap: 1.5rem 2.5rem;
        align-items: start;
    }
    .agenda-panel { grid-area: panel; }
    .agenda-main  { grid-area: main; }
    .agenda-info  { grid-area: info; }

    /* El panel sigue a la vista mientras se recorren los meses: es donde está
       el precio y lo que se lleva elegido. El desplazamiento arranca por debajo
       de la cabecera pegajosa, que mide 104px. */
    .agenda-panel { position: sticky; top: var(--sticky-top); }
}

/* ---------- Bloques del panel ---------- */
.panel-bloque {
    background: var(--color-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    padding: 1.15rem 1.2rem;
}
.panel-bloque + .panel-bloque { margin-top: 1rem; }

.panel-bloque__titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    font-size: var(--text-md);
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--color-text-strong);
}

.panel-bloque__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--color-cta-soft);
    color: var(--color-accent-text);
    font-size: var(--text-2xs);
    font-weight: 700;
    flex: 0 0 auto;
}

.panel-vacio { margin: 0; font-size: var(--text-md); color: var(--color-text-muted); }

/* ---------- Elegir el servicio, acá mismo ----------
   Era una redirección a /servicios: cambiar de idea significaba salirse de la
   agenda y volver a entrar. Ahora es una lista de opciones al costado, con la
   duración y el precio a la vista, que es lo que se compara al elegir. */
.servicio-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.servicio-opcion {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    /* 44px de alto mínimo aunque el nombre entre en una línea. */
    min-height: 44px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition);
}

.servicio-opcion:hover {
    border-color: var(--color-border-cool);
    background: var(--surface-quiet);
    text-decoration: none;
    color: inherit;
}

.servicio-opcion:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }

/* El elegido se marca con relleno suave y una barra de acento a la izquierda:
   el relleno sólido de --color-cta acá competía con el día seleccionado del
   calendario, que es la selección que de verdad hay que mirar. */
.servicio-opcion.is-selected {
    background: var(--color-cta-soft);
    border-color: transparent;
    box-shadow: inset 3px 0 0 var(--color-cta);
}
.servicio-opcion.is-selected .servicio-opcion__nombre { color: var(--color-accent-text); }

.servicio-opcion__nombre {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-strong);
}

.servicio-opcion__meta {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.servicio-opcion__precio {
    margin-left: auto;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
}

/* ---------- Resumen ---------- */
.panel-resumen { background: var(--surface-quiet); }

@media (max-width: 959px) {
    .panel-resumen--redundante { display: none; }
    .panel-servicios--fuera { display: none; }
    /* Sin la lista de servicios arriba, el resumen queda solo en el panel y no
       necesita el margen que lo separaba de ella. */
    .panel-servicios--fuera + .panel-resumen { margin-top: 0; }
    .resumen-cuando { display: none; }
}

.resumen-lista { margin: 0; display: grid; gap: 0.7rem; }
.resumen-lista > div { display: grid; gap: 0.1rem; }
.resumen-lista dt {
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.resumen-lista dd {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-strong);
}
.resumen-precio { font-size: var(--text-xl); font-weight: 650; font-variant-numeric: tabular-nums; }

.resumen-cambiar {
    display: inline-block;
    margin-left: 0.4rem;
    /* El objetivo táctil no puede ser el alto de la palabra: se toca en el
       teléfono, y justo cuando alguien se equivocó. */
    padding: 0.4rem 0.2rem;
    font-size: var(--text-xs);
    color: var(--sage-deep);
}

/* ==========================================================
   Calendario
   ==========================================================
   Reemplaza a la tira horizontal de días. La tira mostraba cuatro días a la vez
   de hasta cuarenta y dos, así que llegar a fin de mes eran diez barridos, y al
   recargar volvía al principio: el día recién elegido quedaba fuera de pantalla.
   Un mes entero cabe en una pantalla de teléfono y no se desplaza. */
.calendario {
    background: var(--color-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    padding: 1rem 1rem 1.2rem;
}

.calendario__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.calendario__mes {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 600;
    text-transform: capitalize;
    color: var(--color-text-strong);
    text-align: center;
}
.calendario__mes span {
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 0.3rem;
}

.calendario__mover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    color: var(--color-text);
    transition: background var(--transition), border-color var(--transition);
}
.calendario__mover:hover { background: var(--surface-quiet); border-color: var(--color-border-cool); text-decoration: none; }
.calendario__mover:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.calendario__mover svg { width: 18px; height: 18px; }
/* El mes fuera de la ventana de reserva no existe como botón, pero su hueco sí:
   sin él el nombre del mes se descentra al llegar al borde. */
.calendario__mover--hueco { border-color: transparent; pointer-events: none; }

.calendario__semana,
.calendario__grilla {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
}

.calendario__semana {
    margin-bottom: 0.35rem;
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    text-align: center;
}

.calendario__dia {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    /* Cuadrado: en 390px cada casilla queda en 46px, sobre el mínimo táctil. */
    aspect-ratio: 1;
    min-height: 44px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    color: var(--color-text);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

a.calendario__dia {
    border-color: var(--hairline);
    background: var(--color-bg);
}
a.calendario__dia:hover {
    background: var(--surface-quiet);
    border-color: var(--color-border-cool);
    text-decoration: none;
    color: inherit;
}
a.calendario__dia:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }

/* Los días sin horas no son botones apagados: son texto. Un botón que no hace
   nada invita a tocarlo y después no pasa nada. */
.calendario__dia--sin { color: var(--color-text-subtle); }

.calendario__numero { font-size: var(--text-base); font-weight: 600; line-height: 1; }
a.calendario__dia .calendario__numero { color: var(--color-text-strong); }

/* Hoy se marca con un aro, no con relleno: el relleno es del día elegido y dos
   rellenos distintos en la misma grilla se leen como dos selecciones. */
.calendario__dia.is-today { box-shadow: inset 0 0 0 1px var(--color-border-strong); }

/* Va con --color-cta y --color-cta-text, no con --sage-deep y blanco fijo: en
   modo oscuro la salvia profunda se invierte a salvia CLARA, y el blanco encima
   caía a 2.38:1. Ese par de tokens existe precisamente para eso —se dan vuelta
   juntos— y da 6.6:1 en claro y 6.8:1 en oscuro. */
a.calendario__dia.is-selected,
a.calendario__dia.is-selected:hover {
    background: var(--color-cta);
    border-color: var(--color-cta);
    color: var(--color-cta-text);
}
a.calendario__dia.is-selected .calendario__numero { color: inherit; }

.calendario__punto {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent-text);
}
.calendario__punto--pocas { background: var(--color-warn); }
a.calendario__dia.is-selected .calendario__punto { background: currentColor; }

.calendario__hueco { aspect-ratio: 1; }

@media (min-width: 960px) {
    /* En escritorio la columna es ancha y la casilla cuadrada se iba a 98px de
       alto: un calendario del porte de la pantalla, con más aire adentro de
       cada día que entre los bloques de la página. Rectangular ocupa lo que
       tiene que ocupar. */
    .calendario { padding: 1.3rem 1.4rem 1.5rem; }
    .calendario__dia,
    .calendario__hueco { aspect-ratio: auto; }
    .calendario__dia { min-height: 58px; }
    .calendario__numero { font-size: var(--text-lg); }
}

.calendario__leyenda {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1rem 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.calendario__leyenda .calendario__punto { margin-left: 0.7rem; }
.calendario__leyenda .calendario__punto:first-child { margin-left: 0; }

/* ==========================================================
   Horas del día elegido — dentro del calendario
   ==========================================================
   Antes eran dos piezas: la tarjeta del mes y, más abajo, una lista suelta. En
   escritorio eso significaba que al elegir un día no pasaba nada visible: la
   respuesta aparecía fuera de la vista, debajo del calendario.

   Ahora son dos lados del mismo panel. Al elegir el día la tarjeta se abre y las
   horas entran al costado; en el teléfono, donde no hay ancho para dos columnas,
   entran debajo pero dentro de la misma tarjeta y separadas por un filete, no
   por un bloque nuevo. */
.calendario__panel { display: grid; gap: 1.2rem; }

@media (min-width: 860px) {
    /* La columna de horas solo existe cuando hay horas que mostrar: sin día
       elegido, el mes ocupa la tarjeta entera en vez de dejar media reservada y
       vacía. */
    .calendario.is-abierto .calendario__panel {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 288px);
        gap: 1.6rem;
        align-items: start;
    }
    .calendario.is-abierto .horarios {
        border-left: 1px solid var(--hairline);
        padding-left: 1.6rem;
    }
    /* Las horas se aprietan a tres o cuatro por fila en la columna angosta. A
       dos por fila —el ancho que traían de cuando ocupaban la página entera— la
       lista medía setecientos píxeles contra los quinientos del mes, y la
       tarjeta quedaba con medio lado vacío. */
    .calendario.is-abierto .horarios__grilla {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: 0.4rem;
    }
    .calendario.is-abierto .horario { padding-inline: 0.2rem; }
}

@media (max-width: 859px) {
    .horarios {
        border-top: 1px solid var(--hairline);
        padding-top: 1.2rem;
    }
}

/* ---------- La entrada ----------
   Dos animaciones encadenadas: el panel de horas aparece, y las horas caen
   detrás en una onda. El desfase de cada una sale de --i, que el PHP escribe en
   línea porque depende de la posición en la lista.

   Duraciones cortas y una sola curva, la que ya usa el resto del sitio
   (--ease-out-quart). No hace falta apagarlas para quien pide menos movimiento:
   base.css ya reduce toda animación a 0.01ms con prefers-reduced-motion, así que
   el estado final se aplica igual y nadie ve nada moverse. */
@keyframes horas-entran {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes hora-aparece {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.calendario.is-abierto .horarios {
    animation: horas-entran 260ms var(--ease-out-quart) both;
}

@media (min-width: 860px) {
    /* En dos columnas la entrada viene del costado, que es de donde nace: del
       día que se acaba de tocar. */
    @keyframes horas-entran {
        from { opacity: 0; transform: translateX(-12px); }
        to   { opacity: 1; transform: none; }
    }
}

.horario {
    animation: hora-aparece 220ms var(--ease-out-quart) both;
    animation-delay: calc(var(--i, 0) * 16ms + 120ms);
}

.horarios__titulo {
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
}
.horarios__titulo strong { color: var(--color-text-strong); font-weight: 600; }

.horarios__vacio { margin: 0; color: var(--color-text-muted); font-size: var(--text-md); }

.horarios__tramo { margin-bottom: 1.3rem; }
.horarios__tramo-titulo {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.7rem;
    font-size: var(--text-md);
    font-weight: 650;
    color: var(--color-text-strong);
}
.horarios__tramo-titulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--hairline);
}
.horarios__tramo-titulo span {
    order: 3;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.horarios__grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.5rem;
}

.horario {
    padding: 0.75rem 0.4rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    text-align: center;
    text-decoration: none;
    color: var(--color-text-strong);
    font-size: var(--text-base);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: var(--color-bg);
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.horario:hover {
    background: var(--color-cta);
    border-color: var(--color-cta);
    color: var(--color-cta-text);
    transform: translateY(-2px);
    text-decoration: none;
}
.horario:active { transform: translateY(0); }
.horario:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }

@media (pointer: coarse) {
    /* 44px de alto mínimo para el dedo. */
    .horario { padding-block: 0.9rem; }
}

/* ==========================================================
   Estados de espera (sin servicio, sin horas, servicio cerrado)
   ========================================================== */
.agenda-espera {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.3rem;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-xl);
    color: var(--color-text-muted);
}
.agenda-espera svg { width: 34px; height: 34px; color: var(--color-accent); margin-bottom: 0.6rem; }
.agenda-espera h2 { margin: 0; font-size: var(--text-xl); color: var(--color-text-strong); }
.agenda-espera p  { margin: 0.3rem 0 0; max-width: 44ch; }

.agenda-main__titulo {
    font-size: var(--text-2xl);
    margin: 0 0 1rem;
}
.sitio-publico .agenda-main__titulo {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
}

/* ==========================================================
   Información de interés
   ========================================================== */
.agenda-info {
    background: var(--surface-quiet);
    border-radius: var(--radius-xl);
    padding: 1.15rem 1.2rem;
}

.info-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}
.info-lista li {
    display: flex;
    gap: 0.6rem;
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--color-text-muted);
}
.info-lista svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--color-accent-text);
}

.info-ayuda {
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hairline);
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

/* ==========================================================
   Confirmar: resumen de la hora y formulario
   ========================================================== */
.agenda-volver { margin: 0 0 0.6rem; font-size: var(--text-md); }
/* El enlace de volver es texto de 17px de alto: sin esto el objetivo táctil
   queda en un tercio del mínimo, y es justo el que se toca cuando alguien se
   equivocó de hora. Con el padding llega a 44. */
.agenda-volver a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-right: 0.4rem;
}

.agenda-confirma__cuando {
    margin: 0 0 1.4rem;
    font-size: var(--text-xl);
    color: var(--color-text-muted);
}
.agenda-confirma__cuando strong {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 650;
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
}

.agenda-nota {
    margin: 0 0 1.4rem;
    padding: 0.8rem 0.95rem;
    border-radius: var(--radius-lg);
    background: var(--color-warn-soft);
    color: var(--color-warn);
    font-size: var(--text-md);
}

.agenda-form { max-width: 560px; }
.agenda-form__campo { margin: 0 0 1rem; }
.agenda-form__campo label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--text-md);
    font-weight: 500;
}
.agenda-form__campo input,
.agenda-form__campo textarea,
.agenda-form__campo select { width: 100%; }

.agenda-form__ayuda {
    margin: -0.6rem 0 1rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Correo y teléfono son un solo requisito —uno de los dos—, así que van dentro
   del mismo grupo con la explicación arriba. Suelta entre el nombre y el
   correo, esa frase se leía como instrucción del nombre. */
.agenda-form__contacto {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem 0.2rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--surface-quiet);
}
.agenda-form__contacto legend {
    padding: 0 0.4rem;
    font-size: var(--text-2xs);
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.agenda-form__contacto .agenda-form__ayuda { margin: 0 0 0.9rem; }

/* 16px o iOS hace zoom solo al enfocar el campo, y después la página queda
   corrida a la derecha. Los 15px de --text-base son justo el borde.

   Van las dos condiciones: `pointer: coarse` es la correcta —es el teléfono lo
   que importa— pero no se puede comprobar en un navegador sin dedo, así que el
   ancho la acompaña y así la regla se verifica en cualquier parte. */
@media (max-width: 900px), (pointer: coarse) {
    .agenda-form input,
    .agenda-form textarea,
    .agenda-form select { font-size: 1rem; }
}

/* La casilla de consentimiento es obligatoria y venía en 17px: el objetivo más
   chico de la pantalla, en el paso donde ya no se puede fallar. */
.agenda-form .consent__check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 0.1rem;
}

.agenda-form__enviar { margin: 1.5rem 0 0; }
.agenda-form__enviar .btn { width: 100%; }
@media (min-width: 640px) {
    .agenda-form__enviar .btn { width: auto; min-width: 15rem; }
}

/* Trampa antispam: fuera de la vista y del foco, nunca display:none (algunos
   bots ignoran los campos ocultos de esa forma). */
.agenda-form__hp,
.booking-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.booking-form__legal { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ==========================================================
   Ficha "Mi cita"
   ==========================================================
   Vive en components/public/mi_cita.php y comparte esta hoja porque comparte el
   lenguaje: es la misma reserva, vista después. */
.booking { padding-block: 2rem 3.5rem; }

.booking-summary {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1.3rem 1.4rem;
    margin-bottom: 1.6rem;
    background: var(--surface-quiet);
}

.booking-summary h1,
.booking-summary h2 { margin: 0 0 0.9rem; font-size: var(--text-xl); }

.booking-summary dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.4rem;
    margin: 0;
}

.booking-summary dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.booking-summary dd { margin: 0; font-size: var(--text-base); }

.booking-status { margin: -0.4rem 0 0.9rem; }

.booking-note {
    margin: 0.9rem 0 0;
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

.booking-cta {
    border: 1px solid var(--color-warn-soft);
    background: var(--color-warn-soft);
    border-radius: var(--radius-xl);
    padding: 1.2rem 1.3rem;
    margin-bottom: 1.4rem;
}
.booking-cta h2 { margin: 0 0 0.4rem; font-size: var(--text-lg); }
.booking-cta p  { margin: 0 0 0.8rem; }

.booking-cancel { margin: 1.6rem 0; }
.booking-cancel p { margin: 0 0 0.6rem; font-size: var(--text-md); }

.booking-help { margin-top: 1.6rem; font-size: var(--text-md); }

.booking-empty {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    text-align: center;
}
.booking-empty h1,
.booking-empty h2 { margin: 0 0 0.5rem; font-size: var(--text-xl); }
.booking-empty p  { margin: 0 0 0.8rem; color: var(--color-text-muted); }

@media (min-width: 720px) {
    .booking-summary dl { gap: 0.6rem 2rem; }
}

@media (max-width: 480px) {
    .booking-summary dl { grid-template-columns: 1fr; gap: 0.1rem; }
    .booking-summary dd { margin-bottom: 0.6rem; }
}

/* ==========================================================
   Elegir profesional
   ==========================================================
   La tarjeta trae lo que sirve para decidir: la cara, en qué se especializa, su
   número de registro —que es la señal de confianza que importa en salud— y
   cuándo tiene la próxima hora libre. Ese último dato suele ser el que decide.

   La tarjeta entera es el enlace, no un botón chico adentro: en el teléfono eso
   es la diferencia entre acertar y no. */
.pro-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

@media (min-width: 1200px) {
    .pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pro-card {
    display: flex;
    gap: 1.1rem;
    height: 100%;
    padding: 1.1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-organic);
    background: var(--color-bg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.pro-card:hover {
    border-color: var(--color-border-cool);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

/* El foco va en la tarjeta, no en un botón interior: es lo que ahora recibe el
   clic, y sin esto quien navega con teclado no vería dónde está parado. */
.pro-card:focus-visible {
    outline: 2px solid var(--sage-deep);
    outline-offset: 3px;
}

/* Retrato en columna angosta y fija: con el ancho libre, dos fotos de
   proporciones distintas descuadraban las tarjetas entre sí. */
.pro-card__foto {
    flex: 0 0 84px;
    align-self: flex-start;
    overflow: hidden;
    border-radius: var(--blob-3);
    background: var(--sage-soft);
    line-height: 0;
}

.pro-card__foto img,
.pro-card__foto svg {
    display: block;
    width: 84px;
    height: 104px;
    object-fit: cover;
    /* Los retratos se recortan hacia arriba: centrado, un plano de medio cuerpo
       deja la cara fuera del encuadre. */
    object-position: center 22%;
}

.pro-card__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.pro-card__nombre {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: var(--tracking-serif);
    line-height: 1.2;
    color: var(--color-text-strong);
}

.pro-card__cargo {
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

.pro-card__especialidad {
    margin-top: 0.3rem;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* La colegiatura es la señal de confianza que se busca en salud, así que va
   marcada con el visto y no perdida entre el resto del texto. */
.pro-card__registro {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--sage-deep);
}
.pro-card__registro svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* `margin-top: auto` empuja el pie abajo: con textos de largo distinto, las
   tarjetas mantienen la próxima hora a la misma altura. */
.pro-card__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem 0.8rem;
    margin-top: auto;
    padding-top: 0.8rem;
    font-size: var(--text-xs);
}

.pro-card__hora { color: var(--color-text-muted); }
.pro-card__hora strong {
    display: block;
    font-size: var(--text-base);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--sage-deep);
}
.pro-card__hora--sin { font-style: italic; }

.pro-card__ir {
    font-weight: 600;
    color: var(--sage-deep);
    white-space: nowrap;
    transition: transform var(--transition);
}
.pro-card:hover .pro-card__ir { transform: translateX(3px); }

@media (max-width: 480px) {
    /* En pantallas angostas el retrato encima: a 84px de foto más el texto al
       lado, el nombre envolvía en cada palabra. */
    .pro-card { flex-direction: column; gap: 0.9rem; }
    .pro-card__foto { flex: 0 0 auto; align-self: stretch; }
    .pro-card__foto img,
    .pro-card__foto svg { width: 100%; height: 150px; }
}