/* Agendar una cita y reservar mesa en el sitio. Usa las variables de la marca
   (colores medidos en sitio.php) y las reglas de sitio.css: escala de 4,
   toques de 44 px o más, la orilla de cada control en var(--control) (3:1).

   El color de la marca sólo va en la acción principal (el botón del resumen)
   y en lo elegido (día, hora, personas, el anillo de la opción elegida). Lo
   demás es neutro: así el ojo encuentra qué sigue sin buscar. */

/* ——— Armazón: el paso a la izquierda y «Tu cita» a la derecha, pegajoso ——— */
.reserva { padding-top: 8px; }
.reserva-paso { min-width: 0; max-width: 680px; }
/* Un título por paso, del tamaño de un paso y no de una portada. */
.reserva h1, .reserva-vacia h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); letter-spacing: -.02em; margin: 24px 0; }
.resumen-cuerpo > p + .resumen-filas { margin-top: 16px; }
.reserva-vacia { max-width: 680px; padding-top: 16px; }
@media (min-width: 900px) {
    .reserva { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; padding-top: 16px; }
    .resumen { position: sticky; top: calc(var(--alto-cabecera) + 24px); }
}

/* ——— Avance: «Atrás», «Paso 2 de 4» y una raya por paso ——— */
.reserva-avance { margin: 0 0 8px; }
.avance-cabeza { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.atras { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding-right: 12px; margin-left: -4px; color: var(--enlace); font-weight: 600; text-decoration: none; }
.atras:hover { text-decoration: underline; }
.paso-de { margin: 0 0 0 auto; font-size: .88rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
.avance { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
/* Lo que falta en el gris de los controles (3:1), lo hecho y lo actual en el color del texto: se distingue sin depender del tono. */
.avance li { padding-top: 8px; border-top: 4px solid var(--control); font-size: .8rem; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avance li.hecho, .avance li.actual { border-color: var(--texto); }
.avance li.actual { color: var(--texto); font-weight: 700; }
/* En el teléfono basta «Paso 2 de 4 · Con quién»: las etiquetas de cada raya no caben. */
@media (max-width: 720px) {
    .avance li { padding-top: 0; font-size: 0; }
    .avance li .sr { font-size: 1rem; }
}
@media (min-width: 721px) { .paso-nombre { display: none; } }

/* ——— Opciones en renglón: todo el renglón es el botón ——— */
.grupo-elecciones + .grupo-elecciones { margin-top: 32px; }
.titulo-grupo, .franja {
    font-family: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--tenue); margin: 0 0 8px;
}
.elecciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.eleccion {
    display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 16px;
    border-radius: 16px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--control);
    color: var(--texto); text-decoration: none; transition: box-shadow .15s;
}
.eleccion:hover { box-shadow: inset 0 0 0 2px var(--texto); }
.eleccion.elegida { box-shadow: inset 0 0 0 2px var(--boton); }
.eleccion-texto { flex: 1; min-width: 0; display: grid; gap: 4px; }
.eleccion-nombre { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.eleccion-meta { color: var(--tenue); font-size: .94rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
/* La descripción en dos renglones: es para decidir, no para leer el folleto. */
.eleccion-desc { color: var(--tenue); font-size: .9rem; line-height: 1.4; max-width: 56ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eleccion .insignia { justify-self: start; margin-top: 4px; font-variant-numeric: tabular-nums; }
.eleccion-flecha { color: var(--tenue); }
.eleccion.elegida .eleccion-flecha { color: var(--texto); }

/* La inicial de cada profesional en su color (el que le puso el negocio). Grande y
   gruesa: cuenta como texto grande y le basta 3:1 contra su color. */
.avatar {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
    font: 700 1.25rem/1 'Marca Titulos', 'Marca Texto', system-ui, sans-serif;
}
.avatar-todos { background: color-mix(in srgb, var(--texto) 7%, var(--superficie)); color: var(--texto); }
.avatar .icono { width: 22px; height: 22px; }
.te-atiende { display: flex; align-items: center; gap: 12px; margin: -8px 0 24px; }

/* ——— Día y hora ——— */
.pronto {
    display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; margin: 0 0 24px;
    border-radius: 16px; background: color-mix(in srgb, var(--texto) 7%, var(--superficie)); color: var(--texto); text-decoration: none;
}
.pronto > span { flex: 1; display: grid; }
.pronto-etiqueta { font-size: .8rem; font-weight: 600; color: var(--tenue); }
.pronto strong { font-variant-numeric: tabular-nums; }
.pronto:hover strong { text-decoration: underline; text-underline-offset: 3px; }

.semana { margin: 0 0 24px; }
.semana-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.semana-rango { margin: 0; font-family: inherit; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.semana-flecha { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--texto); flex: none; }
a.semana-flecha { box-shadow: inset 0 0 0 1px var(--control); }
a.semana-flecha:hover { box-shadow: inset 0 0 0 2px var(--texto); }
/* Siete días a lo ancho, sin deslizar: en un teléfono de 360 px cada uno mide 46. */
.dias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dia {
    display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 76px; padding: 8px 0;
    border-radius: 12px; background: color-mix(in srgb, var(--texto) 7%, var(--superficie)); color: var(--texto);
    text-decoration: none; font-variant-numeric: tabular-nums;
}
.dia small { font-size: .75rem; font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .02em; }
.dia-num { font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.dia-nota { font-size: .7rem; line-height: 1.1; min-height: 8px; color: var(--tenue); }
/* Con lugar: un punto verde (de estado, no de la marca). La razón de lo apagado va en palabras. */
.dia.libre .dia-nota::before { content: ''; display: block; width: 6px; height: 6px; margin-top: 2px; border-radius: 50%; background: var(--exito); }
.dia.cerrado, .dia.lleno { background: none; box-shadow: inset 0 0 0 1px var(--borde); color: var(--tenue); }
.dia.cerrado .dia-num, .dia.lleno .dia-num { font-weight: 400; text-decoration: line-through; }
.dia:hover { box-shadow: inset 0 0 0 2px var(--texto); }
.dia.elegido { background: var(--boton); color: var(--sobre_boton); box-shadow: none; }
.dia.elegido small, .dia.elegido .dia-nota { color: inherit; }
.dia.elegido .dia-nota::before { background: currentColor; }

.horas-del-dia > .titulo-grupo { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--texto); margin-bottom: 4px; }
.franja { margin: 16px 0 8px; }
.horas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.hora {
    display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px;
    background: var(--superficie); box-shadow: inset 0 0 0 1px var(--control); color: var(--texto);
    font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums;
}
.hora:hover { box-shadow: inset 0 0 0 2px var(--texto); }
/* La primera libre lleva anillo grueso: es la misma que «Lo más pronto». */
.hora.la-mas-pronto { box-shadow: inset 0 0 0 2px var(--texto); }
.hora.elegida { background: var(--boton); color: var(--sobre_boton); box-shadow: none; }

/* Estados vacíos: qué pasó y qué hacer, con la salida a la mano. */
.vacio { padding: 16px 24px; border-radius: 16px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); }
.tarjeta.vacio { box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 6px 20px rgb(0 0 0 / .05); padding: 24px; }
.vacio p { margin: 0 0 8px; }
.vacio .acciones { margin: 16px 0 0; }
.vacio > .boton { margin-top: 8px; }
.boton .icono { width: 20px; height: 20px; }

/* ——— Personas ——— */
.personas { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; max-width: 520px; }
.persona {
    display: grid; place-items: center; min-height: 56px; border-radius: 12px;
    background: var(--superficie); box-shadow: inset 0 0 0 1px var(--control); color: var(--texto);
    font-weight: 700; font-size: 1.15rem; text-decoration: none; font-variant-numeric: tabular-nums;
}
.persona:hover { box-shadow: inset 0 0 0 2px var(--texto); }
.persona.elegida { background: var(--boton); color: var(--sobre_boton); box-shadow: none; }

/* ——— Tus datos: etiqueta arriba, ayuda abajo y el error al salir del campo (sin JS) ——— */
.formulario-datos { max-width: 560px; }
.formulario-datos > p { max-width: 60ch; }
.campo { margin: 0 0 24px; }
.campo label { margin: 0 0 8px; }
.campo input { margin: 0; }
.campo-ayuda, .campo-error { font-size: .88rem; margin: 8px 0 0; }
.campo-ayuda { color: var(--tenue); }
.campo-error { display: none; color: var(--error); font-weight: 600; }
.campo-error::before { content: '! '; }
.campo:has(input:user-invalid) .campo-error { display: block; }
.campo:has(input:user-invalid) .campo-ayuda { display: none; }
.campo input:user-invalid { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
@media (max-width: 720px) { .formulario-datos.tarjeta { padding: 16px; } }
.con-cuenta { display: flex; align-items: center; gap: 8px; }
.con-cuenta .icono { color: var(--exito); }
.formulario-datos .nota { margin: 0 0 16px; }
.formulario-datos .nota p { margin: 0; }
.privacidad a { color: var(--enlace); }

/* ——— Resumen: «Tu cita» ——— */
.resumen { background: var(--superficie); border-radius: 20px; padding: 24px; box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 6px 20px rgb(0 0 0 / .05); }
.resumen-titulo { font-size: 1.2rem; margin: 0 0 16px; }
.resumen-cuerpo > p { margin: 0; }
.resumen-filas { margin: 0; }
.resumen-filas > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--borde); }
.resumen-filas > div:first-child { border-top: 0; padding-top: 0; }
.resumen-filas dt { grid-column: 1; font-size: .8rem; font-weight: 600; color: var(--tenue); }
.resumen-filas dd { grid-column: 1; margin: 0; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.resumen-filas dd .tenue { display: block; font-weight: 400; font-size: .9rem; }
.resumen-cambiar { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; font-weight: 600; color: var(--enlace); }
.resumen-totales { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--borde); }
.resumen-totales > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; }
.resumen-totales dt { color: var(--tenue); }
.resumen-totales dd { margin: 0; font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.resumen-boton { width: 100%; margin-top: 24px; min-height: 52px; }
.resumen-pista { margin: 24px 0 0; text-align: center; color: var(--tenue); font-weight: 600; }
.resumen-corto { display: none; }

/* En el teléfono y la tableta, una barra fija abajo con lo corto y «Continuar».
   Encima de las pestañas del sitio (que miden 61 px más la zona segura). */
@media (max-width: 899px) {
    .resumen {
        position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px;
        margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0;
        box-shadow: 0 -1px 0 var(--borde), 0 -8px 24px rgb(0 0 0 / .08);
    }
    .resumen-vacio { display: none; }
    .resumen-cuerpo { flex: 1; min-width: 0; }
    .resumen-titulo, .resumen-filas, .resumen-totales { display: none; }
    .resumen-corto { display: grid; margin: 0; line-height: 1.35; }
    .resumen-corto strong, .resumen-corto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .resumen-corto span { font-size: .88rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
    .resumen-boton { width: auto; flex: none; margin: 0; min-height: 48px; padding: 0 20px; }
    .resumen-pista { flex: none; margin: 0; font-size: .88rem; max-width: 40%; text-align: right; }
    main:has(.resumen:not(.resumen-vacio)), body:has(.resumen:not(.resumen-vacio)) .pie { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) {
    .resumen { bottom: calc(61px + env(safe-area-inset-bottom)); padding-bottom: 12px; }
    main:has(.resumen:not(.resumen-vacio)), body:has(.resumen:not(.resumen-vacio)) .pie { padding-bottom: calc(184px + env(safe-area-inset-bottom)); }
}

/* ——— La cita apartada: grande y tranquila ——— */
.confirmacion { display: grid; justify-items: center; text-align: center; max-width: 560px; margin: 32px auto; }
.confirmacion > p { margin-inline: auto; }
.sello {
    width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px;
    --estado: var(--exito); background: color-mix(in srgb, var(--estado) 12%, var(--superficie)); color: var(--estado);
}
.pendiente .sello { --estado: var(--alerta); }
.apagado .sello { --estado: var(--tenue); }
.sello .icono { width: 36px; height: 36px; }
.confirmacion h1 { font-size: clamp(2rem, 7vw, 2.75rem); letter-spacing: -.02em; margin: 0 0 12px; }
.confirmacion-cuando { font-size: 1.3rem; font-weight: 700; line-height: 1.35; margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.confirmacion-que { font-size: 1.05rem; margin: 0 0 16px; }
.estado-cita {
    display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; margin: 0 0 16px;
    font-size: .88rem; font-weight: 600; color: var(--tenue); background: color-mix(in srgb, var(--texto) 7%, var(--superficie));
}
.confirmacion .boton.grande { width: 100%; min-height: 56px; margin: 8px 0 16px; }
.confirmacion-detalles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); max-width: 880px; margin: 0 auto 16px; align-items: stretch; }
.confirmacion-detalles .tarjeta { margin: 0; }
.confirmacion-detalles h2 { font-size: 1.15rem; }
.confirmacion-detalles .acciones { margin-bottom: 0; }
.cambiar-cita { justify-content: center; align-items: center; }
.cambiar-cita form { margin: 0; }
.centrado { text-align: center; margin-inline: auto; }

/* ——— Lugar en la fila (/espera/<código>) ———
   El número enorme se lee con el teléfono en la mano, de reojo. Avisado, se
   pinta del color de alerta: «ya casi» tiene que notarse sin leer. */
.espera-numero {
    width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; margin: 8px auto 16px;
    font-size: 4rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
    --estado: var(--exito); background: color-mix(in srgb, var(--estado) 12%, var(--superficie)); color: var(--estado);
}
.espera.pendiente .espera-numero { --estado: var(--alerta); }
.espera.pendiente h1 { color: var(--alerta); }

/* ——— Paquetes en venta (/paquetes) ——— */
.paquetes-en-venta { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.paquetes-en-venta .paquete { margin: 0; display: grid; gap: 4px; align-content: start; }
.paquetes-en-venta .paquete h2 { margin: 0; }
.paquetes-en-venta .paquete .cifra { font-size: 1.75rem; font-weight: 750; margin: 4px 0; }
.paquetes-en-venta .paquete form, .paquetes-en-venta .paquete .boton { margin-top: 8px; }
.paquetes-en-venta .paquete button { width: 100%; }