/* =====================================================================
   CITA ONLINE (13-09-2026)

   Hoja propia. Esto se abre desde la web de la clínica, muchas veces
   dentro de un iframe y casi siempre desde un móvil, así que no comparte
   nada con el programa: ni Bootstrap, ni la hoja de la v2.

   El color de la clínica entra por --marca y manda en toda la pantalla:
   es SU página, no la nuestra.
   ===================================================================== */
:root {
    /* Los colores son LOS DE SIEMPRE (Enrique, 13-09-2026): manda el color corporativo de la clínica,
       igual que en la cita online de la v1, y el botón de acción es el verde de siempre. Mucha gente
       ya está acostumbrada a esta pantalla; lo que se moderniza es la forma, no el color. */
    --marca: #000;
    --fondo: #fff;
    --textoBoton: #fff;
    /* El verde de los botones "Seleccionar" y "Reservar cita" de la v1 (btn-success de Bootstrap 3). */
    --accion: #5cb85c;
    --accionOscuro: #4cae4c;
    --radio: 11px;
    --radioBoton: 10px;
    --letra: "Figtree", "Segoe UI", system-ui, Arial, sans-serif;

    /* Los grises los pone el tema (abajo), no cada regla: así cambiar de claro a oscuro es
       cambiar seis valores y no repasar la hoja entera. */
    --panel: #fff;
    --borde: #e3e8f0;
    --bordeSuave: #dfe5ef;
    --texto: #1f2430;
    --titulo: #14213d;
    --apagado: #5b6b8c;
    --hover: #f8fafd;
    --sombra: 0 4px 18px rgba(20, 33, 61, .07);
}

/* --- Los tres estilos que puede elegir la clínica ------------------------- */
.tema-oscuro {
    --panel: #1b2333;
    --borde: #2c3547;
    --bordeSuave: #2c3547;
    --texto: #e8ecf4;
    --titulo: #fff;
    --apagado: #9aa7bf;
    --hover: #232c3e;
    --sombra: 0 4px 20px rgba(0, 0, 0, .35);
}

/* "Suave": sin bordes duros, todo resuelto con fondos muy tenues. */
.tema-suave {
    --panel: #fff;
    --borde: transparent;
    --bordeSuave: transparent;
    --hover: #f2f5fb;
    --sombra: 0 6px 26px rgba(20, 33, 61, .08);
}

.tema-suave .coOpcion,
.tema-suave .coHora,
.tema-suave .coDia { background: #f5f7fb; }

* { box-sizing: border-box; }

.coBody {
    margin: 0;
    padding: 18px 14px 34px;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--letra);
    font-size: 15px;
    line-height: 1.5;
}

.coCaja { max-width: 540px; margin: 0 auto; }

/* --- A lo ancho cuando hay sitio -----------------------------------------
   La pantalla es RESPONSIVE: se adapta al aparato desde el que se mira, y ya está. Lo ancho entra a
   partir de 760 px, que es donde la columna estrecha se queda perdida en medio de una pantalla
   grande; por debajo de eso, columna.

   El selector "móvil / página web" de Marketing NO decide esto: es solo para ver la vista previa en
   un aparato o en otro (Enrique, 13-09-2026: "si eliges móvil te sigue mostrando para móvil en el
   ordenador; debe ser responsive"). Las clases .ancho-movil y .ancho-web se siguen aceptando por si
   alguna página las tuviera escritas, pero no hacen nada. */
@media (min-width: 760px) {
    .coCaja { max-width: 980px; }
    .coCaja .coImagen { height: 200px; }
    /* Las listas de opciones en dos columnas: con veinte tipos de cita, una sola columna obliga a
       un rato de rueda de ratón antes de ver la última. */
    .coCaja .coOpciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .coCaja .coOpciones .coOpcion { margin: 0; }
}

.coCabecera { text-align: center; margin-bottom: 16px; }
.coCabecera h1 { font-size: 22px; font-weight: 800; margin: 10px 0 0; color: var(--titulo); letter-spacing: -.4px; }

/* Altura fija y ancho libre: los logos de clínica son apaisados y meterlos en un cuadrado los
   deja minúsculos. */
.coLogo { height: 54px; width: auto; max-width: 100%; }

/* --- Migas: en qué paso va y cuántos quedan ------------------------------
   Sin esto, un asistente de seis pantallas parece que no se acaba nunca. */
.coPasos { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }
.coPunto { width: 26px; height: 4px; border-radius: 4px; background: var(--bordeSuave); opacity: .5; }
.coPunto.hecho { background: var(--marca); opacity: .45; }
.coPunto.activo { background: var(--marca); }

.coPanel {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: calc(var(--radio) + 3px);
    padding: 24px 22px;
    box-shadow: var(--sombra);
}

.coPanel h2 { font-size: 17px; font-weight: 700; margin: 0 0 16px; color: var(--titulo); }

/* --- Opciones ------------------------------------------------------------
   Cada opción es un botón alto y entero pinchable. En un móvil, una lista de enlaces pequeños se
   falla la mitad de las veces, y aquí fallar significa perder al paciente. */
.coOpciones { display: flex; flex-direction: column; gap: 9px; }

.coOpcion {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--bordeSuave);
    border-radius: var(--radio);
    padding: 15px 17px;
    font: inherit;
    color: var(--texto);
    cursor: pointer;
    transition: border-color .12s, background .12s, transform .12s;
}

.coOpcion:hover { border-color: var(--marca); background: var(--hover); transform: translateY(-1px); }
.coOpcion .nombre { display: block; font-weight: 600; }
.coOpcion .info { display: block; font-size: 12.5px; color: var(--apagado); margin-top: 3px; }
.coOpcion .precio { display: block; font-size: 13px; font-weight: 700; color: var(--marca); margin-top: 5px; }

/* --- Tarjetas de sede y de profesional, y paneles de servicio ------------
   La misma estructura que la cita online de siempre (cabecera de color, cuerpo y pie con los
   botones), pero con la tipografía y los colores de la v2. Aquí se enseñan las cosas por las que
   el paciente decide: la dirección con su mapa, la cara del profesional y el precio del servicio. */
.coTarjeta {
    background: var(--panel);
    border: 1px solid var(--bordeSuave);
    border-radius: var(--radio);
    margin-bottom: 12px;
    overflow: hidden;
}

.coTarjetaCab { background: var(--marca); color: var(--textoBoton); padding: 10px 14px; }
.coTarjetaTitulo { font-weight: 700; font-size: 15px; }
.coTarjetaCuerpo { padding: 13px 14px; }
.coTarjetaPie { padding: 10px 14px; border-top: 1px solid var(--bordeSuave); text-align: right; }

.coDireccion { margin: 0 0 8px; color: var(--apagado); font-size: 13.5px; }

.coMapa {
    display: inline-block; font-size: 13px; color: var(--marca);
    text-decoration: none; border-bottom: 1px dotted var(--marca);
}

.coProfesional { display: flex; gap: 14px; align-items: flex-start; }
.coFoto { width: 86px; height: 86px; object-fit: cover; border-radius: 50%; flex: 0 0 auto; }
.coInfoProfesional { margin: 0; font-size: 13.5px; color: var(--apagado); }

.coPanelEsp {
    border: 1px solid var(--bordeSuave);
    border-radius: var(--radio);
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--panel);
}

.coPanelEspCab { background: var(--marca); color: var(--textoBoton); padding: 10px 14px; font-weight: 700; }
.coPanelEspCuerpo { padding: 4px 14px; }

.coServicio {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--bordeSuave);
}
.coServicio:last-child { border-bottom: 0; }
.coServicioNombre { flex: 1 1 200px; }
.coServicioNombre .nombre { display: block; font-weight: 600; }
.coServicioNombre .precio { display: block; font-size: 13px; font-weight: 700; color: var(--marca); margin-top: 3px; }
.coServicioAcciones { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.coServicioBotones { display: flex; gap: 8px; align-items: center; }
.coInfoServicio { flex: 1 1 100%; margin: 4px 0 0; font-size: 13px; color: var(--apagado); }

/* "Seleccionar »" va en el VERDE de siempre, como en la cita online de la v1 (btn-success). La
   primera cita disponible es un atajo y por eso va más discreta, en el color de la clínica. */
.coElegir {
    background: var(--accion); color: var(--textoBoton); border: 0;
    border-radius: var(--radioBoton); padding: 8px 15px; font: inherit; font-weight: 600; cursor: pointer;
}
.coElegir:hover { background: var(--accionOscuro); }

.coPrimeraCita, .coMasInfo {
    background: var(--panel); color: var(--marca); border: 1px solid var(--bordeSuave);
    border-radius: var(--radioBoton); padding: 7px 13px; font: inherit; font-size: 13px; cursor: pointer;
}
.coPrimeraCita:hover, .coMasInfo:hover { border-color: var(--marca); background: var(--hover); }

@media (max-width: 560px) {
    .coProfesional { flex-direction: column; align-items: center; text-align: center; }
    .coServicioAcciones { justify-content: flex-start; }
}

/* --- Calendario ---------------------------------------------------------
   Solo se enseñan los días que TIENEN hueco. La pesadez de siempre de estas pantallas es ir
   pulsando días uno a uno a ver si alguno tiene horas. */
.coCalendario { margin-bottom: 18px; }

.coMes { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
/* Sin "capitalize": en español el mes sale como "septiembre de 2026" y capitalize lo convertía en
   "Septiembre De 2026", con esa "De" en medio. La primera letra la pone el JavaScript. */
.coMes span { font-weight: 700; color: var(--titulo); }
.coMes button {
    width: 36px; height: 36px;
    border: 1px solid var(--bordeSuave); border-radius: var(--radioBoton);
    background: var(--panel); font-size: 20px; line-height: 1; color: var(--marca); cursor: pointer;
}
.coMes button:hover { border-color: var(--marca); }

.coDias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }

.coDia {
    flex: none;
    width: 58px; height: 62px;
    border: 1px solid var(--bordeSuave); border-radius: var(--radio);
    background: var(--panel); cursor: pointer; font: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}

.coDia .dsem { font-size: 11px; color: var(--apagado); text-transform: capitalize; }
.coDia .dnum { font-size: 19px; font-weight: 800; color: var(--titulo); }
.coDia:hover { border-color: var(--marca); }
.coDia.activo { background: var(--marca); border-color: var(--marca); }
.coDia.activo .dsem, .coDia.activo .dnum { color: var(--textoBoton); }

.coNota { font-size: 12.5px; color: var(--apagado); margin: 10px 0 0; }

/* --- Horas --------------------------------------------------------------- */
.coHoras { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }

.coHora {
    border: 1px solid var(--bordeSuave); border-radius: var(--radioBoton);
    background: var(--panel); padding: 11px 8px; cursor: pointer; font: inherit;
    display: flex; flex-direction: column; gap: 2px; align-items: center;
}

.coHora:hover { border-color: var(--marca); background: var(--hover); transform: translateY(-1px); }
.coHora .h { font-size: 16px; font-weight: 800; color: var(--titulo); }
.coHora .p { font-size: 11px; color: var(--apagado); text-align: center; }

/* --- Formulario ---------------------------------------------------------- */
.coResumenCita {
    background: var(--hover); border-radius: var(--radio); padding: 12px 14px;
    font-size: 13.5px; font-weight: 600; color: var(--marca); margin: 0 0 18px;
}

.coCampo { margin-bottom: 14px; }
.coCampo label { display: block; font-size: 13px; font-weight: 600; color: var(--apagado); margin-bottom: 5px; }

.coCampo input, .coCampo textarea {
    width: 100%;
    border: 1px solid var(--bordeSuave); border-radius: var(--radioBoton);
    padding: 11px 13px;
    background: var(--panel);
    /* 16 px: por debajo de eso el iPhone hace zoom al tocar el campo y descoloca la pantalla. */
    font-size: 16px; font-family: inherit; color: var(--texto);
}

.coCampo input { height: 44px; }
.coCampo input:focus, .coCampo textarea:focus { outline: none; border-color: var(--marca); }

.coCheck { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin: 16px 0; }
.coCheck input { width: 20px; height: 20px; margin-top: 2px; flex: none; }

/* El botón de seguir adelante va en VERDE, el de siempre, no en el color de la clínica: es el que
   el paciente busca con la mirada y llevaba años siendo verde. */
.coBoton {
    width: 100%; height: 48px;
    border: none; border-radius: var(--radioBoton);
    background: var(--accion); color: var(--textoBoton);
    font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer;
}

.coBoton:hover { background: var(--accionOscuro); }
.coBoton:disabled { opacity: .6; cursor: default; }

.coError {
    background: #fdecec; border: 1px solid #f5c6c6; color: #c02626;
    border-radius: 9px; padding: 11px 13px; font-size: 13.5px; margin-top: 14px;
}

.coAviso {
    background: #fdf6e3; border: 1px solid #f3dfa6; color: #8a6400;
    border-radius: 11px; padding: 16px; text-align: center;
}

/* --- Hecho --------------------------------------------------------------- */
.coHecho { text-align: center; padding: 14px 0; }
.coHecho h2 { color: #16873c; }

.coTic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: #e7f7ed; color: #16873c; font-size: 30px; margin-bottom: 12px;
}

.coPie { text-align: left; margin-top: 14px; }
.coVolver {
    background: none; border: none; color: var(--apagado);
    font: inherit; font-size: 13.5px; cursor: pointer; padding: 6px 0;
}
.coVolver:hover { color: var(--marca); }


/* --- El asistente dentro del portal --------------------------------------
   Aquí ya hay un marco (la caja blanca del portal), así que el asistente no pinta el suyo: si no,
   quedaría una caja dentro de otra caja. */
.coEnPortal .coPanel { border: none; box-shadow: none; padding: 0; background: transparent; }
.coEnPortal .coPasos { margin-bottom: 18px; }
.coEnPortal .coPanel h2 { font-size: 15px; }


/* --- Cabecera con imagen -------------------------------------------------
   La clínica puede poner una foto suya arriba. Va a lo ancho y recortada, para que valga cualquier
   foto sin pedirle a nadie que la prepare a una medida concreta. */
.coImagen {
    height: 140px;
    /* "contain" y no "cover": un logotipo subido pequeño, estirado a lo ancho, se ve pixelado y
       borroso (Enrique, 15-09-2026). Así se respeta su tamaño y, si no llega, se deja aire a los
       lados en vez de agrandarlo. En Marketing se le dice qué medida conviene subir. */
    background-repeat: no-repeat;
    border-radius: calc(var(--radio) + 3px);
    background-size: contain;
    background-position: center;
    margin-bottom: 14px;
}

.coSubtitulo { font-size: 14px; color: var(--apagado); margin: 6px 0 0; }

/* ---------------------------------------------------------------- La vuelta de la pasarela
   La pantalla que ve el paciente al volver de pagar (14-09-2026). Deliberadamente sobria: es
   el final del camino y lo único que tiene que hacer es tranquilizar. */
.citaonline-vuelta { max-width: 420px; margin: 60px auto; text-align: center; }
.citaonline-vuelta .citaonline-logo { max-height: 60px; margin-bottom: 20px; }
.citaonline-vuelta h2 { margin: 12px 0 8px; font-size: 20px; }
.citaonline-vuelta p { color: #555; line-height: 1.5; }
.citaonline-icono { font-size: 46px; line-height: 1; margin-bottom: 6px; }
.citaonline-icono.ok { color: #3c9c5a; }
.citaonline-icono.espera { color: #b8860b; }
.co-aviso-pago { margin-top: 10px; padding: 10px 12px; border-radius: 6px;
                 background: #fff8e1; color: #6b5200; font-size: 14px; }

/* ===================================================================== EL CHAT
   Botón flotante y ventana de conversación. Usa las mismas variables de marca que
   el resto de la pantalla: es la página de la clínica, no la nuestra. */

.coChatBoton {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--marca);
    color: var(--textoBoton);
    font-family: var(--letra);
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

.coChatBoton:hover { filter: brightness(.94); }
.coChatBoton:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; }

.coChatPanel {
    position: fixed;
    right: 16px;
    bottom: 76px;
    z-index: 41;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 110px));
    border-radius: var(--radio);
    background: var(--fondo);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.coChatCabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: var(--marca);
    color: var(--textoBoton);
}

.coChatCerrar {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.coChatAviso {
    margin: 0;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.45;
    opacity: .8;
}

.coChatAviso a { color: inherit; }

.coChatMensajes {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coChatMensaje {
    max-width: 85%;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.coChat-visitante {
    align-self: flex-end;
    background: var(--marca);
    color: var(--textoBoton);
    border-bottom-right-radius: 4px;
}

.coChat-asistente {
    align-self: flex-start;
    background: rgba(127, 127, 127, .16);
    border-bottom-left-radius: 4px;
}

.coChat-esperando {
    align-self: flex-start;
    opacity: .6;
    font-style: italic;
}

.coChatEscribir {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(127, 127, 127, .25);
}

.coChatEscribir input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(127, 127, 127, .4);
    border-radius: var(--radio);
    background: transparent;
    color: inherit;
    font-family: var(--letra);
    font-size: 15px;   /* por debajo de 16px iOS hace zoom al escribir */
}

.coChatEscribir button {
    padding: 10px 16px;
    border: 0;
    border-radius: var(--radioBoton);
    background: var(--marca);
    color: var(--textoBoton);
    font-family: var(--letra);
    font-size: 14px;
    cursor: pointer;
}

.coChatEscribir button[disabled],
.coChatEscribir input[disabled] { opacity: .55; cursor: default; }

@media (max-width: 480px) {
    .coChatBotonTexto { display: none; }

    .coChatPanel {
        right: 8px;
        left: 8px;
        bottom: 72px;
        width: auto;
        max-height: calc(100vh - 100px);
    }
}

/* =====================================================================
   EL ATRIBUTO "hidden" TIENE QUE GANAR SIEMPRE (16-09-2026)

   Aquí casi todo se enseña y se esconde con el atributo `hidden` del HTML
   (los pasos del asistente, el chat, los detalles de cada servicio). Ese
   atributo esconde poniendo `display: none` desde la hoja del NAVEGADOR,
   que es la más débil de todas: en cuanto una regla nuestra dice
   `display: flex` —como hacía `.coChatPanel`—, gana la nuestra y el
   elemento se ve AUNQUE esté marcado como oculto.

   Eso es lo que pasaba con el chat: nacía "cerrado", pero se veía siempre,
   tapaba la pantalla de pedir cita y la X no parecía hacer nada (sí ponía
   hidden; simplemente no se notaba). Enrique, 16-09-2026.

   Con esta regla, `hidden` vuelve a mandar en toda la pantalla.
   ===================================================================== */
[hidden] { display: none !important; }


/* =====================================================================
   EL CALENDARIO DEL MES (13-09-2026)

   Como el de la cita online de siempre: el mes entero a la vista, los días
   con hueco se pulsan y el resto salen apagados.
   ===================================================================== */
.coDias.coRejillaMes {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.coDsem {
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--apagado);
    text-transform: uppercase;
    padding-bottom: 4px;
}

.coDiaVacio { height: 0; }

.coDias.coRejillaMes .coDia {
    /* Cuadrado y grande: esto se pulsa con el dedo. */
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    border-radius: 9px;
    border: 1px solid var(--bordeSuave);
    background: var(--panel);
    color: var(--texto);
    cursor: pointer;
}

    .coDias.coRejillaMes .coDia:hover:not(.apagado) { border-color: var(--marca); }

    /* Un día sin hueco no es un botón roto: es un día que no toca. Se dice con color Y con el cursor,
       y además está deshabilitado de verdad. */
    .coDias.coRejillaMes .coDia.apagado {
        color: var(--apagado);
        opacity: .4;
        background: transparent;
        border-color: transparent;
        cursor: default;
    }

    .coDias.coRejillaMes .coDia.activo {
        background: var(--marca);
        border-color: var(--marca);
        color: #fff;
    }

/* --- "Ya soy paciente" --------------------------------------------------- */
.coYaPaciente {
    border: 1px dashed var(--bordeSuave);
    border-radius: var(--radio);
    padding: 14px;
    margin-bottom: 16px;
}

.coYaPacienteTitulo { margin: 0 0 2px; font-weight: 700; }

.coYaPacienteCampos { display: grid; gap: 10px; margin: 10px 0; }

@media (min-width: 560px) {
    .coYaPacienteCampos { grid-template-columns: repeat(3, 1fr); }
}

.coBotonSecundario {
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radioBoton);
    border: 1px solid var(--marca);
    background: transparent;
    color: var(--marca);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}

.coPacienteEncontrado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #eef8ee;
    border: 1px solid #cfe9cf;
    color: #1e6b2a;
    border-radius: var(--radio);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-weight: 600;
}

/* ------------------------------------------------------------------------------------------------
   SERVICIOS ONLINE / CONSULTA ONLINE / PAGO DE FACTURA (16-09-2026)

   Las tres pantallas públicas de pago usan esta misma hoja y este mismo color: para el paciente son
   la misma página que la cita online con distinto contenido, y así lo parecen. Aquí abajo sólo va lo
   poco que no tenían ya: el enlace de "elegir otro servicio" y la pantalla de vuelta de la pasarela,
   que hasta hoy llevaba unas clases antiguas que ya no existían en el CSS y salía sin estilo.
   ------------------------------------------------------------------------------------------------ */

.coVolverPaso { margin: 14px 0 0; text-align: center; }

.coVuelta { text-align: center; padding: 28px 20px; }
.coVuelta h2 { font-size: 19px; font-weight: 700; margin: 14px 0 8px; color: var(--titulo); }
.coVuelta p { margin: 0; color: var(--apagado); font-size: 14.5px; }

.coIconoVuelta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    font-size: 32px; line-height: 1; font-weight: 700;
}
.coIconoVuelta.ok { background: #e8f6ec; color: #2e7d4f; }
.coIconoVuelta.espera { background: #fdf4e3; color: #a5760f; }

/* =============================================================================================
   REPASO DE ESTÉTICA (17-09-2026, Enrique).

   Lo que pidió, literal: *"esto si quieres todo esto puedes hacerlo con el mismo estilo de Calendly,
   que es mucho más moderno y más bonito"*, y después: *"de Calendly me refiero a los estilos, no a la
   funcionalidad... me gusta también que salga la cara del médico en circular como has hecho y la
   descripción de los profesionales, eso está bien. Sólo los estilos y selección de fecha y hora"*.

   Así que aquí NO se cambia ningún paso ni ningún dato: sólo cómo se ve. Va al final del fichero a
   propósito, para que se lea de un vistazo qué es lo nuevo y qué era el aspecto anterior.
   ============================================================================================= */

/* --- La cabecera -------------------------------------------------------------------------------
   La imagen que sube la clínica suele ser su logotipo, y se estaba estirando a 200 px de alto y a
   todo el ancho: se veía borroso y enorme (Enrique: "el logotipo de la clínica encima del nombre
   queda demasiado grande, y borroso y feo"). Con "contain" y menos alto, la imagen se ve a su
   tamaño y nítida. */
.coCaja .coImagen,
.coImagen {
    height: 96px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    margin-bottom: 10px;
}

@media (min-width: 760px) {
    .coCaja .coImagen { height: 110px; }
    /* La página no necesita ser tan ancha: a 980 px los campos quedaban larguísimos. */
    .coCaja { max-width: 720px; }
}

.coLogo { height: 42px; }

.coCabecera h1 { font-size: 24px; letter-spacing: -.5px; }
.coSubtitulo { font-size: 14.5px; }

/* --- Consulta y prueba, uno debajo del otro -----------------------------------------------------
   Enrique: "aparece también seleccionar consulta y seleccionar prueba en una sola línea,
   originalmente estaba en dos líneas y quedaba mejor". La rejilla de dos columnas de los anchos
   grandes valía para las listas largas, no para estas dos tarjetas. */
@media (min-width: 760px) {
    .coCaja #coTipos.coOpciones { display: block; }
    .coCaja #coTipos .coTarjeta { width: 100%; margin-bottom: 12px; }
}

/* --- Tarjetas: menos "cabecera de color", más tarjeta limpia ------------------------------------ */
.coTarjeta, .coPanelEsp {
    border-radius: 12px;
    border: 1px solid var(--bordeSuave);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}

.coTarjetaCab, .coPanelEspCab {
    background: transparent;
    color: var(--titulo);
    border-bottom: 1px solid var(--bordeSuave);
    border-left: 4px solid var(--marca);
    padding: 12px 14px;
}

.coTarjetaTitulo { font-size: 16px; font-weight: 700; }

/* Botones: la píldora con el borde de la marca que se rellena al pasar por encima. */
.coElegir {
    border-radius: 999px;
    border: 1px solid var(--marca);
    background: transparent;
    color: var(--marca);
    font-weight: 600;
    padding: 0 20px;
    height: 38px;
    transition: background .15s ease, color .15s ease;
}
.coElegir:hover { background: var(--marca); color: var(--textoBoton); }

/* --- EL CALENDARIO ------------------------------------------------------------------------------
   Enrique: "la agenda sale demasiado grande y los días que están activos y con huecos disponibles no
   se distinguen bien porque aparecen todos idénticos en blanco y negro".

   Los dos problemas, y su arreglo:
     · tamaño: la rejilla ocupaba todo el ancho de la página; ahora se queda en 340 px y centrada,
       como la de Calendly;
     · distinguirlos: un día CON hueco se pinta con un círculo del color de la clínica y el número en
       ese mismo color y en negrita; uno sin hueco es sólo un número gris claro, sin caja. Se ve de
       lejos cuáles se pueden pulsar. */
.coCalendario { max-width: 360px; margin: 0 auto 18px; }

/*  Siete columnas de verdad: con "1fr" a secas los botones imponían su ancho mínimo (62 px cada
    uno, 434 en total) dentro de una caja de 360 y los sábados y domingos se salían de la pantalla
    (visto el 17-09-2026). Con minmax(0, 1fr) las columnas se reparten el ancho que hay. */
.coDias.coRejillaMes { gap: 6px; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.coDias.coRejillaMes .coDia {
    /*  Redondos de verdad: alto y ancho iguales y centrados en su columna. Con el ancho al 100 %
        salían óvalos. */
    aspect-ratio: auto;
    width: 42px;
    height: 42px;
    min-height: 42px;
    margin: 0 auto;
    font-size: 14.5px;
    font-weight: 700;
    border-radius: 50%;
    border: 0;
    /* El fondo suave de la marca. El color de reserva es para los navegadores sin color-mix. */
    background: #eef3fb;
    background: color-mix(in srgb, var(--marca) 12%, #fff);
    color: var(--marca);
}

.coDias.coRejillaMes .coDia:hover:not(.apagado) {
    background: #dfe8f7;
    background: color-mix(in srgb, var(--marca) 22%, #fff);
    border: 0;
}

.coDias.coRejillaMes .coDia.apagado {
    background: transparent;
    color: var(--apagado);
    opacity: .45;
    font-weight: 500;
}

.coDias.coRejillaMes .coDia.activo {
    background: var(--marca);
    color: var(--textoBoton);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
}

.coDsem { font-size: 11px; letter-spacing: .04em; }

.coMes { max-width: 360px; margin: 0 auto 10px; }
.coMes span { font-size: 15.5px; }
.coMes button { border-radius: 50%; width: 32px; height: 32px; padding: 0; }

/* --- LAS HORAS ----------------------------------------------------------------------------------
   Igual que Calendly: una columna de píldoras con el borde de la marca, no una rejilla de cajas
   grises. Se lee mejor y se pulsa mejor con el dedo. */
.coHoras {
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: 360px;
    margin: 0 auto;
}

@media (min-width: 560px) {
    .coHoras { grid-template-columns: 1fr 1fr; max-width: 460px; }
}

.coHora {
    border: 1px solid var(--marca);
    border-radius: 10px;
    background: transparent;
    min-height: 46px;
    transition: background .15s ease, color .15s ease;
}
.coHora .h { color: var(--marca); font-size: 15.5px; font-weight: 700; }
.coHora:hover { background: var(--marca); transform: none; }
.coHora:hover .h, .coHora:hover .p { color: var(--textoBoton); }

.coNota { text-align: center; }

/* --- Los campos del formulario ------------------------------------------------------------------
   Los rótulos salían casi del mismo gris claro que el borde y el conjunto se leía "antiguo". */
.coCampo label { color: var(--titulo); font-size: 13.5px; font-weight: 600; }
.coCampo input, .coCampo textarea { border-radius: 10px; font-size: 15px; }
.coCampo input:focus, .coCampo textarea:focus { border-color: var(--marca); outline: none; }

/* La foto del profesional se queda como está —redonda, que es lo que le gusta—, sólo con un
   borde suave para que no se funda con el fondo. */
.coFoto { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--bordeSuave); }

/*  El mensaje de qué ha pasado con la cita después de pagar (17-09-2026). */
.coMensajeReserva {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f4f6fa;
    color: var(--titulo);
    font-size: 15px;
    line-height: 1.5;
}

/*  Los campos a medida del formulario de consulta online (17-09-2026): la lista de varias respuestas
    se pinta como casillas, una por línea. */
.coOpcionesCampo { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.coOpcionesCampo .coCheck { margin: 0; }

/*  Las listas desplegables se estilan como el resto de campos: la hoja sólo vestía input y textarea
    y salían con el aspecto de fábrica del navegador (visto el 17-09-2026). */
.coCampo select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--bordeSuave);
    border-radius: 10px;
    background: var(--panel);
    color: var(--texto);
    font-family: inherit;
    font-size: 15px;
}
.coCampo select:focus { border-color: var(--marca); outline: none; }

/* ---------------------------------------------------------------------------
   ESPECIALIDADES PLEGABLES Y LOGOTIPO INTEGRADO (18-09-2026)

   Enrique: las especialidades salían con todos sus tratamientos desplegados y una clínica con
   muchos dejaba una lista interminable. Ahora la cabecera es un botón: todas las especialidades
   caben de un vistazo, una por línea, y se abre la que interesa.
   --------------------------------------------------------------------------- */
.coPanelEspPlegable > .coPanelEspCab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    border: 1px solid var(--bordeSuave);
    background: var(--panel);
    color: var(--titulo);
    border-radius: var(--radio);
    padding: 14px 16px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.coPanelEspPlegable > .coPanelEspCab::after {
    content: "";
    width: 9px; height: 9px;
    margin-left: 12px;
    border-right: 2px solid var(--apagado);
    border-bottom: 2px solid var(--apagado);
    transform: rotate(45deg);          /* la flechita: abajo cerrada, arriba abierta */
    transition: transform .15s ease;
}
.coPanelEspPlegable.abierta > .coPanelEspCab::after { transform: rotate(-135deg); }
.coPanelEspPlegable.abierta > .coPanelEspCab {
    /*  La abierta va en el color de la clínica, con el color de texto que ella eligió: así se ve de
        un vistazo cuál está abierta y el "color del texto de los botones" vuelve a notarse donde
        siempre se notaba (18-09-2026). */
    background: var(--marca);
    border-color: var(--marca);
    color: var(--textoBoton);
}
.coPanelEspPlegable.abierta > .coPanelEspCab::after {
    border-color: var(--textoBoton);
}
.coPanelEspPlegable + .coPanelEspPlegable { margin-top: 10px; }
.coPanelEspPlegable > .coPanelEspCuerpo { padding-top: 10px; }

/*  EL LOGOTIPO, INTEGRADO CON EL FONDO (Enrique, 18-09-2026: "el logo se ve un poco feo ahí, se
    puede poner con los bordes un poco transparentes para que se integre con el fondo de la página
    de citas?"). Casi todos los logotipos llegan en PNG con fondo blanco: sobre un fondo de color se
    les ve el recuadro. Se difuminan los bordes con una máscara, así que el recuadro desaparece sin
    tocar la imagen que subió la clínica. */
.coLogo {
    -webkit-mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%);
    mix-blend-mode: multiply;
}
.tema-oscuro .coLogo { mix-blend-mode: normal; }

/* ===========================================================================
   TRES AJUSTES QUE SE GUARDABAN PERO NO SE VEÍAN  (Enrique, 18-09-2026)

   *"cuando cambio el color del texto de los botones, color de la letra y color de los campos, no veo
   que se cambie nada. Tampoco cuando hago cambios en la letra. Y si pongo el aspecto página web
   ancho, tampoco se cambia."*

   Tres causas distintas, todas reales:

   1. LA LETRA. `tipografias.css` —la hoja del programa— trae
      `body { font-family: ... !important }`. Ese !important ganaba siempre, así que la familia que
      elegía la clínica se guardaba y no se aplicaba nunca. Se responde con la misma moneda, pero
      sólo aquí dentro: `body.coBody`, que es la pantalla pública y nada más.

   2. EL ANCHO. La opción "Página web (ancho)" se guardaba en la tabla y NO LA USABA NADIE: ninguna
      de las pantallas públicas miraba ese valor. Ahora el cuerpo lleva la clase `ancho-web` o
      `ancho-movil` y aquí se le da su medida; en ancho, además, las opciones van en dos columnas,
      que es lo que tiene sentido en una pantalla de escritorio.

   3. EL COLOR DEL TEXTO DE LOS BOTONES. Sí se aplicaba, pero desde que las especialidades son
      plegables, la cabecera de cada una dejó de ir en el color de marca, que era donde más se veía.
      Se mantiene el diseño nuevo y se usa el color elegido donde toca: en los botones de acción, en
      el día elegido del calendario y en la hora elegida.
   =========================================================================== */
body.coBody {
    font-family: var(--letra) !important;
}

body.coBody.ancho-web .coCaja { max-width: 1040px; }
@media (min-width: 900px) {
    body.coBody.ancho-web #coTipos,
    body.coBody.ancho-web .coOpciones {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    body.coBody.ancho-web .coHoras { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* --- P161: añadir la cita al calendario (Google / Apple / Outlook) ---------------------------
   Los botones son los secundarios de la pantalla (borde y letra en el color de la clínica), con
   su icono. En el móvil, uno debajo de otro y a todo lo ancho. */
.coCalendario { margin-top: 18px; }
.coCalendario[hidden] { display: none; }
.coCalendarioRotulo { margin: 0 0 10px; color: var(--apagado); font-size: 13.5px; }
.coCalendarioBotones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.coBotonCalendario {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none; box-sizing: border-box; line-height: 1.2;
}
.coBotonCalendario:hover, .coBotonCalendario:focus { background: var(--marca); color: var(--textoBoton); text-decoration: none; }
.coBotonCalendario svg { flex: none; }
@media (max-width: 559px) {
    .coBotonCalendario { width: 100%; }
}

/* --- P1071 (Enrique, 08-10-2026): el selector de idioma ------------------------------------------
   Arriba a la derecha, pequeño y discreto: siglas y no banderas, como el portal del paciente. Los
   colores salen del tema y del color de la clínica, igual que el resto de la pantalla. */
.coIdiomas { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.coIdiomas a {
    font-size: 11.5px; font-weight: 700; letter-spacing: .5px; line-height: 1;
    color: var(--apagado); background: var(--panel); text-decoration: none;
    border: 1px solid var(--bordeSuave); border-radius: 20px; padding: 4px 9px;
}
.coIdiomas a:hover, .coIdiomas a:focus { color: var(--marca); border-color: var(--marca); text-decoration: none; }
.coIdiomas a.activo { background: var(--marca); border-color: var(--marca); color: var(--textoBoton); }

/* P1138: aviso de con quién y dónde será la cita cuando un paso se ha saltado solo. */
.coAvisoCita {
    margin: 0 0 16px; padding: 13px 16px 13px 46px; position: relative;
    background: #eef5ff; border: 1px solid #c9dcf7; border-left: 5px solid #2f6bb0;
    border-radius: var(--radio, 11px); color: var(--titulo, #14213d);
    font-size: 15px; line-height: 1.5; box-shadow: 0 1px 3px rgba(20,33,61,.06);
}
.coAvisoCita::before {
    content: ""; position: absolute; left: 15px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
    background: no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
.coAvisoCita b { font-weight: 700; }
@media (max-width: 600px) { .coAvisoCita { font-size: 14px; padding: 11px 12px 11px 40px; } .coAvisoCita::before { left: 12px; } }


/* =====================================================================
   P1475 — PÁGINA COMPLETA (?vista=pagina), 16-10-2026
   La cita online como una pantalla de la propia clínica: barra con su logotipo y su nombre arriba y el
   asistente en una tarjeta ancha y centrada. Es solo presentación: los pasos y el JavaScript son los de
   siempre. Sin ?vista=pagina nada de esto se aplica.
   ===================================================================== */
body.vista-pagina { background: var(--fondoPagina, #f4f6f8); min-height: 100vh; }
.vista-pagina .coBarra {
    background: var(--panel, #fff); border-bottom: 3px solid var(--marca);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
}
.vista-pagina .coBarraInt {
    max-width: 1040px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; gap: 14px;
}
.vista-pagina .coBarra .coLogo { height: 46px; }
.vista-pagina .coBarraTextos { display: flex; flex-direction: column; min-width: 0; }
.vista-pagina .coBarraNombre { font-size: 19px; font-weight: 800; color: var(--titulo); letter-spacing: -.3px; }
.vista-pagina .coBarraSub { font-size: 13.5px; color: var(--apagado); }
.vista-pagina .coCaja {
    max-width: 1040px; margin: 28px auto 40px; padding: 26px 28px;
    background: var(--panel, #fff); border-radius: 18px; box-shadow: 0 6px 30px rgba(0, 0, 0, .07);
}
@media (max-width: 640px) {
    .vista-pagina .coBarraInt { padding: 10px 14px; }
    .vista-pagina .coCaja { margin: 0; padding: 18px 14px; border-radius: 0; box-shadow: none; }
}

/* P1475: señal (pago parcial al reservar) */
.coSenal { display: block; font-size: 12.5px; color: var(--apagado); margin-top: 3px; line-height: 1.35; }
.coSenal b { color: var(--marca); }
.coAvisoSenal {
    margin: 10px 0 14px; padding: 10px 14px; border-radius: var(--radio, 10px);
    background: color-mix(in srgb, var(--marca) 9%, transparent); border: 1px solid color-mix(in srgb, var(--marca) 30%, transparent);
    font-size: 14px; font-weight: 600; color: var(--titulo);
}

/* ===== P1475: estilo «Escaparate» (profesionales con sus horas a la vista) ===== */
.estilo-escaparate .coPasos { display: none; }
.estilo-escaparate .coCaja { max-width: 1040px; }
.esTitulo { margin: 4px 0 14px; }
.esFiltros {
    display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
    padding: 14px; border: 1px solid var(--borde); border-radius: var(--radio, 12px);
    background: color-mix(in srgb, var(--marca) 4%, transparent); margin-bottom: 14px;
}
.esCampo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 190px; min-width: 150px; }
.esRotulo { font-size: 12px; font-weight: 700; color: var(--apagado); text-transform: uppercase; letter-spacing: .3px; }
.esSelect {
    width: 100%; box-sizing: border-box; height: 42px; padding: 0 10px; font: inherit; color: var(--texto);
    border: 1px solid var(--bordeSuave); border-radius: var(--radioBoton, 8px); background: var(--panel, #fff);
}
.esSelect:focus { outline: 2px solid var(--marca); outline-offset: 1px; }
.esSegmento { display: inline-flex; border: 1px solid var(--marca); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.esSeg { border: 0; background: transparent; color: var(--marca); font: inherit; font-weight: 700; padding: 9px 18px; cursor: pointer; }
.esSeg.activo { background: var(--marca); color: var(--textoBoton, #fff); }
.esNav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; }
.esRango { font-weight: 700; color: var(--titulo); text-align: center; }
.esNavBtn, .esIr {
    border: 1px solid var(--marca); background: transparent; color: var(--marca); font: inherit; font-weight: 700;
    padding: 8px 14px; border-radius: var(--radioBoton, 8px); cursor: pointer;
}
.esNavBtn:hover:not(:disabled), .esIr:hover { background: var(--marca); color: var(--textoBoton, #fff); }
.esNavBtn:disabled { opacity: .35; cursor: default; }
.esCargando, .esVacio { text-align: center; padding: 26px 10px; color: var(--apagado); }
.esVacio .esIr { margin-top: 8px; }
.esTarjeta {
    display: grid; grid-template-columns: minmax(240px, 5fr) 7fr; gap: 18px; padding: 18px;
    border: 1px solid var(--borde); border-radius: var(--radio, 14px); background: var(--panel, #fff);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05); margin-bottom: 14px; transition: box-shadow .2s, transform .2s;
}
.esTarjeta:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, .09); transform: translateY(-1px); }
.esQuien { display: flex; gap: 14px; min-width: 0; }
.esFoto {
    flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: flex; align-items: center;
    justify-content: center; font-size: 24px; font-weight: 800; color: var(--marca);
    background: color-mix(in srgb, var(--marca) 12%, transparent);
}
.esFoto img { width: 100%; height: 100%; object-fit: cover; }
.esDatos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.esNombre { margin: 0; font-size: 18px; color: var(--titulo); letter-spacing: -.2px; }
.esEsp { font-size: 13.5px; font-weight: 700; color: var(--marca); }
.esSede { font-size: 13px; color: var(--apagado); }
.esPrecio .precio { font-weight: 800; color: var(--titulo); }
.esInfo { font-size: 13.5px; color: var(--texto); max-height: 3.9em; overflow: hidden; margin-top: 4px; }
.esInfo p { margin: 0 0 4px; }
.esInfo.abierto { max-height: none; }
.esMas { align-self: flex-start; border: 0; background: none; color: var(--marca); font: inherit; font-size: 13px; font-weight: 700; padding: 2px 0; cursor: pointer; }
.esDias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-content: start; }
.esDia { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.esDiaCab { display: flex; flex-direction: column; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--bordeSuave); }
.esDiaSem { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--apagado); }
.esDiaNum { font-size: 13px; font-weight: 700; color: var(--titulo); }
.esSinHora { text-align: center; color: var(--apagado); padding-top: 6px; }
.esHora {
    border: 1px solid color-mix(in srgb, var(--marca) 45%, transparent); background: color-mix(in srgb, var(--marca) 8%, transparent);
    color: var(--marca); font: inherit; font-weight: 800; padding: 8px 0; border-radius: var(--radioBoton, 8px); cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}
.esHora:hover { background: var(--marca); color: var(--textoBoton, #fff); transform: scale(1.04); }
.esHora.oculta { display: none; }
.esDia.expandida .esHora.oculta { display: block; }
.esMasHoras { border: 0; background: none; color: var(--marca); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 2px 0; }
@media (max-width: 760px) {
    .esTarjeta { grid-template-columns: 1fr; padding: 14px; }
    .esDias { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; scroll-snap-type: x proximity; }
    .esDia { flex: 0 0 74px; scroll-snap-align: start; }
    .esFiltros { padding: 10px; }
    .esCampo { flex: 1 1 100%; }
    .esNavBtn { padding: 8px 10px; font-size: 13px; }
}

/* ===== P1475: estilo «Al Vuelo» (lo primero libre, 2 toques, móvil primero) ===== */
.estilo-alvuelo .coCaja { max-width: 640px; }
.estilo-alvuelo.vista-pagina .coCaja { max-width: 700px; }
.vuLista { display: flex; flex-direction: column; gap: 8px; }
.vuDia { margin: 14px 0 2px; font-size: 14px; font-weight: 800; text-transform: capitalize; color: var(--titulo); letter-spacing: .2px; }
.vuDia:first-child { margin-top: 2px; }
.vuFila {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--texto);
    padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio, 14px); background: var(--panel, #fff);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .04); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.vuFila:hover, .vuFila:focus-visible { border-color: var(--marca); box-shadow: 0 6px 18px rgba(0, 0, 0, .09); transform: translateY(-1px); outline: none; }
.vuHora {
    flex: 0 0 auto; min-width: 66px; text-align: center; padding: 9px 8px; border-radius: var(--radioBoton, 10px);
    background: var(--marca); color: var(--textoBoton, #fff); font-size: 18px; font-weight: 800; letter-spacing: -.3px;
}
.vuFoto {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: var(--marca); background: color-mix(in srgb, var(--marca) 12%, transparent);
}
.vuFoto img { width: 100%; height: 100%; object-fit: cover; }
.vuQuien { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.vuQuien b { font-size: 15px; color: var(--titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vuQuien small { font-size: 12.5px; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vuFlecha { font-size: 26px; color: var(--marca); line-height: 1; }
.vuPrecio { text-align: center; margin: 12px 0 0; }
.vuMas { display: block; width: 100%; margin-top: 14px; padding: 12px; }
@media (max-width: 480px) {
    .vuFila { padding: 10px 11px; gap: 9px; }
    .vuFoto { display: none; }
    .vuHora { min-width: 60px; font-size: 17px; }
}

/* ===== P1475: «Recepción» (el asistente de siempre) con el estilo renovado =====
   Mismos colores, mismos pasos, mismo orden. Solo se pule la forma: más aire, sombras suaves, una
   entrada animada entre pasos, barra de progreso más clara y botones con más presencia. */
.estilo-recepcion .coPanel { border-radius: 20px; padding: 28px 26px; box-shadow: 0 10px 40px rgba(20, 33, 61, .09); }
.estilo-recepcion .coPanel h2 { font-size: 19px; letter-spacing: -.2px; margin-bottom: 18px; }
.estilo-recepcion .coPaso:not([hidden]) { animation: coEntra .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes coEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.estilo-recepcion .coPasos { gap: 7px; margin-bottom: 18px; }
.estilo-recepcion .coPunto { height: 6px; width: 30px; transition: background .3s, opacity .3s, width .3s; }
.estilo-recepcion .coPunto.activo { width: 46px; }
.estilo-recepcion .coTarjeta, .estilo-recepcion .coPanelEsp {
    border-radius: 16px; box-shadow: 0 2px 12px rgba(20, 33, 61, .06); transition: box-shadow .25s, transform .25s;
}
.estilo-recepcion .coTarjeta:hover { box-shadow: 0 10px 28px rgba(20, 33, 61, .12); transform: translateY(-2px); }
.estilo-recepcion .coTarjetaCab, .estilo-recepcion .coPanelEspCab {
    background: linear-gradient(135deg, var(--marca), color-mix(in srgb, var(--marca) 80%, #000)); padding: 13px 16px;
}
.estilo-recepcion .coPanelEspCab { width: 100%; text-align: left; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.estilo-recepcion .coOpcion { border-radius: 14px; padding: 17px 19px; box-shadow: 0 1px 6px rgba(20, 33, 61, .05); }
.estilo-recepcion .coOpcion:hover { box-shadow: 0 8px 22px rgba(20, 33, 61, .10); }
.estilo-recepcion .coElegir { border-radius: 999px; padding: 9px 20px; box-shadow: 0 3px 10px rgba(76, 174, 76, .35); transition: transform .15s, box-shadow .15s, background .15s; }
.estilo-recepcion .coElegir:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(76, 174, 76, .4); }
.estilo-recepcion .coElegir:active { transform: none; box-shadow: none; }
.estilo-recepcion .coPrimeraCita, .estilo-recepcion .coMasInfo { border-radius: 999px; }
.estilo-recepcion .coDia { border-radius: 14px; transition: transform .15s, border-color .15s, background .15s; }
.estilo-recepcion .coDia:hover { transform: translateY(-2px); }
.estilo-recepcion .coHora { border-radius: 999px; transition: transform .15s, background .15s, border-color .15s; }
.estilo-recepcion .coHora:hover { transform: scale(1.04); }
.estilo-recepcion .coFoto { box-shadow: 0 3px 12px rgba(20, 33, 61, .18); }
@media (max-width: 560px) { .estilo-recepcion .coPanel { padding: 20px 16px; border-radius: 16px; } }
@media (prefers-reduced-motion: reduce) {
    .estilo-recepcion .coPaso:not([hidden]) { animation: none; }
    .estilo-recepcion * { transition: none !important; }
}

/* =====================================================================
   P1488 (Enrique, 17-10-2026): «Escaparate» al estilo de Doctoralia, a pantalla completa.
   Solo cuando el cuerpo lleva .estilo-escaparate (la cita online nueva; hoy solo la plataforma de pruebas).
   Fondo suave, tarjetas blancas con sombra, horas como pastillas, ficha de resumen a la derecha de «Tus datos»
   y «Catálogo de servicios» al final. Los colores siguen saliendo de --marca (el de la clínica).
   ===================================================================== */
body.estilo-escaparate { background: #eef2f7; --acentoSuave: color-mix(in srgb, var(--marca) 9%, #fff); --acentoBorde: color-mix(in srgb, var(--marca) 28%, #fff); }
.estilo-escaparate.vista-pagina .coBarra { border-bottom: 0; box-shadow: 0 2px 14px rgba(20, 33, 61, .08); }
.estilo-escaparate.vista-pagina .coBarraInt { max-width: 1180px; }
.estilo-escaparate .coCaja,
.estilo-escaparate.vista-pagina .coCaja { max-width: 1180px; background: transparent; box-shadow: none; padding: 22px 20px 40px; }
.estilo-escaparate .coPanel { background: transparent; box-shadow: none; border: 0; padding: 0; }
.estilo-escaparate .esTitulo { font-size: 26px; letter-spacing: -.4px; margin: 6px 0 16px; color: var(--titulo); }
.estilo-escaparate .esFiltros {
    background: #fff; border: 0; border-radius: 16px; padding: 16px 18px; gap: 12px 14px;
    box-shadow: 0 4px 22px rgba(20, 33, 61, .08);
}
.estilo-escaparate .esSelect { height: 46px; border-radius: 12px; border-color: #d7dfeb; background: #f8fafc; }
.estilo-escaparate .esSelect:focus { background: #fff; }
.estilo-escaparate .esNav { background: #fff; border-radius: 14px; padding: 8px 10px; box-shadow: 0 2px 10px rgba(20, 33, 61, .06); }
.estilo-escaparate .esNavBtn, .estilo-escaparate .esIr { border-radius: 999px; border-color: var(--acentoBorde); background: var(--acentoSuave); }
.estilo-escaparate .esTarjeta {
    border: 1px solid transparent; border-radius: 18px; padding: 22px; gap: 24px;
    grid-template-columns: minmax(260px, 4fr) 7fr; box-shadow: 0 4px 22px rgba(20, 33, 61, .07);
}
.estilo-escaparate .esTarjeta:hover { border-color: var(--acentoBorde); box-shadow: 0 12px 34px rgba(20, 33, 61, .12); transform: none; }
.estilo-escaparate .esFoto { flex-basis: 92px; width: 92px; height: 92px; font-size: 28px; box-shadow: 0 0 0 4px var(--acentoSuave); }
.estilo-escaparate .esNombre { font-size: 20px; }
.estilo-escaparate .esEsp { display: inline-block; align-self: flex-start; background: var(--acentoSuave); padding: 2px 10px; border-radius: 999px; font-size: 12.5px; }
.estilo-escaparate .esDias { gap: 10px; }
.estilo-escaparate .esDia { background: #f7f9fc; border-radius: 14px; padding: 8px 6px 10px; }
.estilo-escaparate .esDiaCab { border-bottom: 0; padding-bottom: 4px; }
.estilo-escaparate .esDiaSem { color: var(--marca); }
.estilo-escaparate .esHora {
    background: #fff; border: 1px solid var(--acentoBorde); border-radius: 999px; padding: 8px 0; font-size: 14px;
    box-shadow: 0 1px 3px rgba(20, 33, 61, .06);
}
.estilo-escaparate .esHora:hover { background: var(--marca); color: var(--textoBoton, #fff); border-color: var(--marca); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(20, 33, 61, .18); }
.estilo-escaparate .esSinHora { color: #b4bfd0; }

/* «Tus datos»: formulario a la izquierda y ficha de lo reservado a la derecha. */
.estilo-escaparate .coPaso[data-paso="5"]:not([hidden]) {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 28px; align-items: start;
}
.estilo-escaparate .coPaso[data-paso="5"] > * { grid-column: 1; background: transparent; }
.estilo-escaparate .coPaso[data-paso="5"] > h2 { font-size: 24px; margin: 0 0 14px; }
.estilo-escaparate .coPaso[data-paso="5"] > #coForm,
.estilo-escaparate .coPaso[data-paso="5"] > #coYaPaciente,
.estilo-escaparate .coPaso[data-paso="5"] > .coYaPaciente {
    background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 4px 22px rgba(20, 33, 61, .07); margin-bottom: 16px;
}
.estilo-escaparate .coResumenCita { display: none; }      /* lo cuenta la ficha de la derecha */
.estilo-escaparate .coPaso[data-paso="5"] > .esFicha {
    grid-column: 2; grid-row: 1 / span 8; position: sticky; top: 18px; background: #fff; border-radius: 18px; padding: 20px;
    box-shadow: 0 8px 30px rgba(20, 33, 61, .10); border-top: 5px solid var(--marca);
}
.estilo-escaparate .esFichaCab { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.estilo-escaparate .esFichaQuien { display: flex; flex-direction: column; min-width: 0; }
.estilo-escaparate .esFichaQuien b { font-size: 17px; color: var(--titulo); }
.estilo-escaparate .esFichaQuien small { color: var(--marca); font-weight: 700; }
.estilo-escaparate .esFichaFilas { margin: 0; display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; font-size: 14px; }
.estilo-escaparate .esFichaFilas dt { color: var(--apagado); font-weight: 600; }
.estilo-escaparate .esFichaFilas dd { margin: 0; color: var(--titulo); font-weight: 700; }
.estilo-escaparate .esFichaFilas dd::first-letter { text-transform: uppercase; }
.estilo-escaparate .esFichaPrecio { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--bordeSuave); }
.estilo-escaparate .coCampo input, .estilo-escaparate .coCampo textarea, .estilo-escaparate .coCampo select { border-radius: 12px; background: #f8fafc; }
.estilo-escaparate .coBoton { border-radius: 999px; padding: 14px 26px; font-size: 16px; box-shadow: 0 6px 16px rgba(76, 174, 76, .35); }

/* Catálogo de servicios (parte de abajo) */
.estilo-escaparate .esCatalogo { margin-top: 34px; padding-top: 10px; }
.estilo-escaparate .esCatTitulo { font-size: 24px; letter-spacing: -.3px; margin: 0 0 14px; color: var(--titulo); }
.estilo-escaparate .esCatGrupo { margin-bottom: 20px; }
.estilo-escaparate .esCatEsp { font-size: 15px; font-weight: 800; color: var(--marca); margin: 0 0 10px; text-transform: uppercase; letter-spacing: .4px; }
.estilo-escaparate .esCatRejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.estilo-escaparate .esCatServicio {
    background: #fff; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
    box-shadow: 0 3px 16px rgba(20, 33, 61, .07); border: 1px solid transparent; transition: border-color .15s, box-shadow .15s;
}
.estilo-escaparate .esCatServicio:hover, .estilo-escaparate .esCatServicio.activo { border-color: var(--acentoBorde); box-shadow: 0 10px 26px rgba(20, 33, 61, .11); }
.estilo-escaparate .esCatNombre { margin: 0; font-size: 16px; color: var(--titulo); }
.estilo-escaparate .esCatMeta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--apagado); font-size: 13.5px; }
.estilo-escaparate .esCatMin { background: var(--acentoSuave); color: var(--marca); font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.estilo-escaparate .esCatBoton {
    margin-top: auto; align-self: flex-start; border: 1px solid var(--marca); background: transparent; color: var(--marca);
    font: inherit; font-weight: 800; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s;
}
.estilo-escaparate .esCatBoton:hover { background: var(--marca); color: var(--textoBoton, #fff); }

@media (max-width: 900px) {
    .estilo-escaparate .coPaso[data-paso="5"]:not([hidden]) { display: flex; flex-direction: column; }
    .estilo-escaparate .coPaso[data-paso="5"] > h2 { order: -2; }
    .estilo-escaparate .coPaso[data-paso="5"] > .esFicha { order: -1; position: static; margin: 0 0 16px; }
    .estilo-escaparate .esTarjeta { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .estilo-escaparate .esTitulo, .estilo-escaparate .esCatTitulo { font-size: 21px; }
    .estilo-escaparate .esCatRejilla { grid-template-columns: 1fr; }
}

/* ===== P1488 (2.ª vuelta): como Doctoralia — «selecciona una fecha» en la tarjeta y ventana «Agendar cita» ===== */
.esFechas { display: flex; flex-direction: column; gap: 10px; align-content: start; min-width: 0; }
.esFechasTit { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--titulo); }
.esFechasRej { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.esFecha {
    display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; font: inherit; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--marca) 45%, transparent); background: color-mix(in srgb, var(--marca) 8%, transparent);
    color: var(--marca); border-radius: 12px; transition: background .15s, color .15s;
}
.esFecha:hover:not(:disabled) { background: var(--marca); color: var(--textoBoton, #fff); }
.esFechaSem { font-size: 12px; font-weight: 800; text-transform: capitalize; }
.esFechaNum { font-size: 12.5px; font-weight: 600; }
.esFecha.sinHoras, .esFecha:disabled { cursor: default; background: #f1f3f7; border-color: transparent; color: #a3acbb; text-decoration: line-through; }
.esFechasMas { align-self: flex-start; border: 0; background: none; color: var(--marca); font: inherit; font-weight: 700; cursor: pointer; padding: 2px 0; }
.esFechasMas:disabled { display: none; }

body.esModalAbierto { overflow: hidden; }
.esModalFondo { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 28, 45, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.esModal { background: #fff; color: var(--texto); width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto; border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.esModalCab { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--bordeSuave); position: sticky; top: 0; background: #fff; z-index: 1; }
.esModalCab h3 { margin: 0; font-size: 20px; color: var(--titulo); }
.esModalX { border: 0; background: #eef1f6; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--titulo); }
.esModalCuerpo { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.esModalBloque { display: flex; flex-direction: column; gap: 6px; }
.esModalRot { font-size: 13.5px; color: var(--titulo); }
.esModalSub { font-size: 13px; color: var(--apagado); }
.esModalFila { display: grid; grid-template-columns: 28px 1fr 28px; gap: 6px; align-items: start; }
.esModalFlecha { border: 0; background: color-mix(in srgb, var(--marca) 12%, transparent); color: var(--marca); width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; margin-top: 4px; }
.esModalFlecha:disabled { opacity: .35; cursor: default; }
.esModalRej { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.esModalDia { display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: center; }
.esModalDia b { font-size: 13px; text-transform: capitalize; color: var(--titulo); }
.esModalDia small { font-size: 11.5px; color: var(--apagado); margin-bottom: 2px; }
.esModalMasHoras { display: block; margin: 12px auto 0; border: 0; background: none; color: var(--marca); font: inherit; font-weight: 700; cursor: pointer; }
.esModalMapa { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--marca); text-decoration: none; }
.esModalMapa:hover { text-decoration: underline; }
.esModalRadios { display: flex; gap: 18px; }
.esModalRadio { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }

/* ===== 17-10-2026: aspecto de partida de la cita online NUEVA = el de dricloud.com ===== */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/Inter Web/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/Inter Web/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/Inter Web/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("fonts/Inter Web/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url("fonts/Inter Web/Inter-ExtraBold.woff2") format("woff2"); }

.estilo-recepcion:not(.tema-oscuro), .estilo-escaparate:not(.tema-oscuro) {
    --texto: #14263E;
    --titulo: #14263E;
    --apagado: #4D6076;
    --borde: #DBE4F0;
    --bordeSuave: #DBE4F0;
    --hover: #EDF6FE;
    --sombra: 0 10px 30px rgba(13, 27, 51, .08);
}
.estilo-recepcion h1, .estilo-recepcion h2, .estilo-recepcion h3,
.estilo-escaparate h1, .estilo-escaparate h2, .estilo-escaparate h3 {
    font-family: "Figtree", "Inter", system-ui, sans-serif; font-weight: 800; letter-spacing: -.3px; color: var(--titulo);
}
.estilo-recepcion .coCaja, .estilo-escaparate .coCaja { color: var(--texto); }
.estilo-escaparate .esTarjeta, .estilo-recepcion .coOpcion { border-radius: 16px; border-color: #DBE4F0; }
.coPrimera { margin: 4px 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.coPrimera .coYaPacienteTitulo { margin: 0; flex: 1 1 100%; }
.coPrimeraOpc { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
#coMapaCita { display: inline-block; margin: 2px 0 10px; font-size: 13.5px; font-weight: 700; color: var(--marca); text-decoration: none; }
.esValoracion { font-size: 13px; font-weight: 700; color: #b7791f; text-decoration: none; letter-spacing: .3px; }
a.esValoracion:hover { text-decoration: underline; }
#coMapaCita[hidden], .coPrimera[hidden] { display: none; }

/* Arreglos de la ronda de pruebas (17-10-2026) */
.esFechasRej { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 420px) { .esFechasRej { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.esFecha, .esHora { color: color-mix(in srgb, var(--marca) 65%, #0d1b33); }
.esFecha:hover:not(:disabled), .esHora:hover { color: var(--textoBoton, #fff); }

/* El texto de «Seleccionar »» iba un poco bajo dentro del boton (alto fijo + relleno arriba): se centra con flex (17-10-2026). */
.coElegir, .estilo-recepcion .coElegir { display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; line-height: 1; }

/* El texto de las cabeceras de tarjeta de Recepcion va en el color del texto de botones (blanco sobre el color principal):
   con un principal oscuro salia letra oscura sobre fondo oscuro y no se leia (Enrique, 17-10-2026). */
.estilo-recepcion .coTarjetaCab, .estilo-recepcion .coPanelEspCab, .estilo-recepcion .coTarjetaTitulo { color: var(--textoBoton, #fff); }

/* =====================================================================================================
   17-10-2026 (Enrique) · P1499–P1502: Escaparate como Doctoralia, página del profesional, «Ver mapa», «Tus datos», logo
   ===================================================================================================== */

/* --- P1502: el logo de cabecera, sin recuadro duro: bordes difuminados y el blanco del fondo se funde con la página --- */
.coImagen.coImagenImg {
    display: block; width: auto; max-width: 100%; margin: 0 auto 10px; object-fit: contain; background: none;
    -webkit-mask-image: radial-gradient(ellipse closest-side, #000 74%, transparent 100%);
            mask-image: radial-gradient(ellipse closest-side, #000 74%, transparent 100%);
    mix-blend-mode: multiply;
}
.tema-oscuro .coImagen.coImagenImg { mix-blend-mode: normal; }

/* --- P1500: «Ver mapa»: botón con chincheta en círculo de color --- */
.esMapaBtn, a.coMapa.esMapaBtn, #coMapaCita.esMapaBtn {
    display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 2px; padding: 5px 14px 5px 5px; border: 0;
    border-radius: 999px; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer;
    color: var(--marca); background: color-mix(in srgb, var(--marca) 11%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marca) 30%, #fff); transition: background .15s, box-shadow .15s, transform .15s;
}
.esMapaBtn:hover { background: color-mix(in srgb, var(--marca) 20%, #fff); text-decoration: none; transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--marca), 0 6px 14px rgba(20, 33, 61, .12); }
.esMapaIco { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--marca); color: var(--textoBoton, #fff); box-shadow: 0 3px 8px color-mix(in srgb, var(--marca) 45%, transparent); }
.esMapaIco svg { width: 17px; height: 17px; }
.esMapaFl { font-size: 15px; opacity: .8; }
.esPinPeq { display: inline-flex; vertical-align: -3px; color: var(--marca); }
.esPinPeq svg { width: 14px; height: 14px; }
#coMapaCita[hidden] { display: none; }
.estilo-escaparate #coMapaCita { display: none; }   /* en Escaparate el mapa va dentro de la ficha de la derecha */

/* --- P1499: tarjeta de profesional al estilo Doctoralia: foto grande, nombre pulsable, servicio y precio abajo, fechas en 4 columnas --- */
.estilo-escaparate .esTarjeta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; border-radius: 20px;
}
.estilo-escaparate .esQuien { flex-direction: column; justify-content: space-between; gap: 16px; padding: 24px 24px 20px; }
.estilo-escaparate .esCab { display: flex; gap: 20px; align-items: flex-start; }
.estilo-escaparate .esFoto { flex: 0 0 128px; width: 128px; height: 128px; font-size: 36px; box-shadow: 0 0 0 4px var(--acentoSuave); }
.estilo-escaparate .esFotoEnlace { cursor: pointer; }
.estilo-escaparate .esNombre { font-size: 22px; line-height: 1.2; margin: 2px 0 2px; }
.esNombreEnlace { color: var(--titulo); text-decoration: none; }
.esNombreEnlace:hover { color: var(--marca); text-decoration: underline; }
.estilo-escaparate .esEspLinea { font-size: 15px; color: var(--texto); }
.estilo-escaparate .esEsp { display: inline; background: none; padding: 0; border-radius: 0; font-size: inherit; font-weight: 500; color: var(--texto); }
.esVerPerfil { color: var(--titulo); text-decoration: underline; font-weight: 600; }
.esVerPerfil:hover { color: var(--marca); }
.estilo-escaparate .esServ { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding-top: 14px; border-top: 1px solid var(--bordeSuave); font-size: 15px; }
.esServNombre { color: var(--titulo); }
.estilo-escaparate .esFechas { padding: 24px; border-left: 1px solid var(--bordeSuave); gap: 14px; align-content: start; }
.estilo-escaparate .esFechasTit { font-size: 15px; font-weight: 600; text-align: center; }
.estilo-escaparate .esFechasRej { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.estilo-escaparate .esFecha { padding: 11px 4px; border-radius: 10px; border-color: transparent; background: color-mix(in srgb, var(--marca) 12%, #fff); }
.estilo-escaparate .esFecha.sinHoras, .estilo-escaparate .esFecha:disabled { background: #f1f3f7; }
.estilo-escaparate .esFechasMas {
    align-self: center; margin-top: 4px; padding: 11px 26px; border-radius: 999px; background: #efeeea; color: var(--titulo); font-weight: 700;
}
.estilo-escaparate .esFechasMas:hover { background: color-mix(in srgb, var(--marca) 14%, #fff); }

/* --- Línea de pasos de «Agendar cita» (ventana y página del profesional) --- */
.esTl { position: relative; display: flex; flex-direction: column; gap: 18px; margin: 4px 0 18px; }
.esTlPaso { position: relative; padding-left: 38px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.esTlPaso::before {
    content: '✓'; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: var(--marca); background: color-mix(in srgb, var(--marca) 14%, #fff);
}
.esTlPaso::after { content: ''; position: absolute; left: 11.5px; top: 28px; bottom: -16px; width: 1.5px; background: color-mix(in srgb, var(--marca) 35%, #fff); }
.esTlPaso:last-child::after { display: none; }
.esTlRot { font-size: 15px; color: var(--titulo); }
.esTlTxt { color: var(--texto); font-size: 15px; }
.esTlSub { color: var(--apagado); font-size: 13.5px; }
.esTlPaso .esSelect { width: 100%; }
.esModalTit { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.esModalQuien { font-size: 14px; color: var(--apagado); }

/* --- Página completa del profesional --- */
.estilo-escaparate .esVistaPerfil > .esTitulo, .estilo-escaparate .esVistaPerfil > .esFiltros,
.estilo-escaparate .esVistaPerfil > .esResultados, .estilo-escaparate .esVistaPerfil > .esCatalogo { display: none; }
.esPerfilVolver { border: 0; background: none; color: var(--marca); font: inherit; font-weight: 700; padding: 4px 0 12px; cursor: pointer; }
.esPerfilRej { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.esPerfilIzq { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.esPerfilCab, .esPerfilSec { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 4px 22px rgba(20, 33, 61, .07); }
.esPerfilCab { display: flex; gap: 24px; align-items: flex-start; }
.estilo-escaparate .esPerfilFoto { flex: 0 0 150px; width: 150px; height: 150px; font-size: 42px; }
.esPerfilDatos { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.esPerfilNombre { margin: 0; font-size: 26px; letter-spacing: -.3px; color: var(--titulo); }
.esPerfilEsp { font-size: 16px; color: var(--texto); }
.esValoracionGrande { font-size: 18px; }
.esPerfilAgendar { margin-top: 10px; border: 0; border-radius: 999px; padding: 13px 30px; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; background: var(--marca); color: var(--textoBoton, #fff); box-shadow: 0 6px 16px color-mix(in srgb, var(--marca) 40%, transparent); }
.esPerfilAgendar:hover { filter: brightness(.92); }
.esPerfilTabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; overflow-x: auto; background: #fff; border-radius: 16px; padding: 0 12px; box-shadow: 0 4px 16px rgba(20, 33, 61, .07); }
.esPerfilTab { border: 0; background: none; font: inherit; font-weight: 700; color: var(--apagado); padding: 16px 14px 13px; border-bottom: 3px solid transparent; white-space: nowrap; cursor: pointer; }
.esPerfilTab.activa, .esPerfilTab:hover { color: var(--titulo); border-bottom-color: var(--marca); }
.esPerfilSec { scroll-margin-top: 70px; }
.esPerfilSecTit { margin: 0 0 14px; font-size: 21px; color: var(--titulo); letter-spacing: -.2px; }
.esPerfilInfo { font-size: 15.5px; line-height: 1.6; color: var(--texto); }
.esPerfilInfo p { margin: 0 0 10px; }
.esPerfilServicios { display: flex; flex-direction: column; }
.esPerfilServ { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--bordeSuave); }
.esPerfilServ:first-child { border-top: 0; padding-top: 0; }
.esPerfilServNom { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.esPerfilServNom b { color: var(--titulo); }
.esPerfilServNom small { color: var(--apagado); }
.esPerfilServ.activo .esPerfilServNom b { color: var(--marca); }
.esPerfilConsultorio { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--bordeSuave); flex-wrap: wrap; }
.esPerfilConsultorio:first-of-type { border-top: 0; }
.esPerfilConsTxt { display: flex; flex-direction: column; min-width: 0; }
.esPerfilConsTxt span { color: var(--apagado); font-size: 14px; }
.esPerfilChips { display: flex; flex-wrap: wrap; gap: 8px; }
.esPerfilChip { padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--marca) 10%, #fff); color: var(--titulo); font-weight: 600; font-size: 14px; }
.esPerfilDer { position: sticky; top: 12px; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px rgba(20, 33, 61, .12); }
.esPerfilReservaCab { background: var(--marca); color: var(--textoBoton, #fff); padding: 18px 24px; display: flex; flex-direction: column; gap: 2px; }
.esPerfilReservaCab b { font-size: 19px; }
.esPerfilReservaCab span { opacity: .9; font-size: 14px; }
.esPerfilReservaCuerpo { padding: 20px 22px 24px; }

@media (max-width: 1000px) {
    .esPerfilRej { grid-template-columns: 1fr; }
    .esPerfilDer { position: static; order: -1; }
}
@media (max-width: 760px) {
    .estilo-escaparate .esTarjeta { grid-template-columns: 1fr; }
    .estilo-escaparate .esFechas { border-left: 0; border-top: 1px solid var(--bordeSuave); }
    .estilo-escaparate .esFoto { flex-basis: 96px; width: 96px; height: 96px; font-size: 30px; }
    .esPerfilCab { flex-direction: column; align-items: center; text-align: center; }
    .esPerfilDatos { align-items: center; }
    .esPerfilServ { flex-wrap: wrap; }
}

/* --- P1501: pantalla «Tus datos» (Escaparate) más limpia --- */
.estilo-escaparate .coPaso[data-paso="5"] > h2 { font-size: 26px; letter-spacing: -.3px; }
.estilo-escaparate .coYaPaciente, .estilo-escaparate #coYaPaciente {
    border: 0; border-radius: 18px; background: #fff; box-shadow: 0 4px 22px rgba(20, 33, 61, .07); padding: 22px;
}
.estilo-escaparate .coYaPacienteTitulo { font-size: 17px; color: var(--titulo); text-align: left; }
.estilo-escaparate .coYaPaciente p, .estilo-escaparate #coYaPaciente p { text-align: left; color: var(--apagado); }
.estilo-escaparate .coYaPaciente .coBotonSecundario {
    border: 0; border-radius: 999px; padding: 12px 28px; font-weight: 800; background: var(--marca); color: var(--textoBoton, #fff);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--marca) 35%, transparent);
}
.estilo-escaparate .coYaPaciente .coBotonSecundario:hover { filter: brightness(.92); }
.estilo-escaparate .coPaso[data-paso="5"] > .esFicha { border-top: 0; padding: 0; overflow: hidden; }
.estilo-escaparate .esFichaCab { background: color-mix(in srgb, var(--marca) 9%, #fff); margin: 0; padding: 18px 20px; }
.estilo-escaparate .esFichaFilas { padding: 18px 20px 0; }
.estilo-escaparate .esFichaPrecio { margin: 14px 20px 20px; }
.estilo-escaparate .esFicha .esMapaFicha { margin: 14px 20px 20px; }
.estilo-escaparate .esFicha .esFoto { flex: 0 0 56px; width: 56px; height: 56px; font-size: 18px; box-shadow: none; }

/* =====================================================================
   P1505 (Enrique, 17-10-2026) — RECEPCIÓN idéntica a cita_1.html (Clínica Aurora).
   Todo va bajo body.rc (cita online nueva + estilo Recepción). Los colores de la clínica entran por
   --marca / --marca2 / --marca-cl / --marca-bd (Index.cshtml); sin elegir nada salen los de Aurora:
   #0b6177 → #1fa7ae, fondo #f4f7f9. Escaparate y Al Vuelo no cambian.
   ===================================================================== */
body.rc {
    --oro: #c9a227; --tinta: #0f2430; --gris: #8696a6; --linea: #e8edf2; --ok: #16a34a; --okbg: #eafaf0;
    --texto: #46586a; --titulo: #0f2430; --apagado: #8696a6; --bordeSuave: #e8edf2; --borde: #e8edf2;
    --panel: #fff; --hover: #fbfdfe; --sombra: 0 10px 30px rgba(15, 36, 48, .07);
    --accion: var(--marca); --accionOscuro: var(--marca);
    padding: 0; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
body.rc * { box-sizing: border-box; }
body.rc .coCaja { max-width: 1180px; margin: -46px auto 0; padding: 0 22px 70px; position: relative; z-index: 2; }
body.rc .coCaja .coOpciones { display: block; }

/* cabecera */
.rcHeader { background: #fff; border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 40; }
.rcHin { max-width: 1180px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; gap: 16px; }
.rcLogo { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.rcEm { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, var(--marca2), var(--marca)); display: grid; place-items: center; flex: none; overflow: hidden; box-shadow: 0 3px 10px color-mix(in srgb, var(--marca) 28%, transparent); }
.rcEm svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rcEm img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.rcLogoTx { min-width: 0; }
.rcLogoTx b { display: block; font-size: 19px; color: var(--tinta); font-weight: 700; letter-spacing: -.2px; line-height: 1.15; }
.rcLogoTx span { font-size: 12px; color: var(--gris); letter-spacing: 2.4px; text-transform: uppercase; font-weight: 600; }
.rcSp { flex: 1; }
.rcDato { display: none; align-items: center; gap: 8px; font-size: 14px; color: var(--texto); font-weight: 600; }
.rcDato svg { width: 16px; height: 16px; stroke: var(--marca); fill: none; stroke-width: 2; stroke-linecap: round; }
@media (min-width: 900px) { .rcDato { display: flex; } }
.rcIdiomas { display: flex; gap: 3px; background: #f2f5f8; border-radius: 999px; padding: 3px; }
.rcIdiomas a { font-size: 12.5px; font-weight: 700; color: #7d8c9c; padding: 6px 11px; border-radius: 999px; cursor: pointer; letter-spacing: .4px; text-decoration: none; }
.rcIdiomas a.on { background: #fff; color: var(--marca); box-shadow: 0 1px 3px rgba(15, 36, 48, .12); }

/* hero */
.rcHero { background: linear-gradient(135deg, var(--marca), var(--marca2)); color: #fff; padding: 30px 22px 70px; text-align: center; position: relative; overflow: hidden; }
.rcHero::after { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 180px; background: var(--fondo); border-radius: 50% 50% 0 0; }
.rcHero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.6px; position: relative; z-index: 1; margin: 0; color: #fff; }
.rcHero p { font-size: 15.5px; opacity: .9; margin: 5px 0 0; position: relative; z-index: 1; }

/* pie */
.rcPie { background: #fff; border-top: 1px solid var(--linea); padding: 26px 22px; text-align: center; font-size: 13px; color: var(--gris); }
.rcPie b { color: var(--texto); }

/* columnas */
.rcCols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.rcCols > .coPasos { grid-column: 1 / -1; }
.rcCols > .coAvisoCita { grid-column: 1; }
.rcCols > main.coPanel { grid-column: 1; grid-row: 3; }
.rcCols > .rcResumen { grid-column: 2; grid-row: 2 / span 2; }
.rcCols > .coAvisoCita[hidden] { display: none; }
.rcCols.rcFin { grid-template-columns: minmax(0, 1fr); }
.rcCols.rcFin > .rcResumen { display: none; }
@media (max-width: 940px) {
    .rcCols { grid-template-columns: 1fr; }
    .rcCols > .rcResumen { grid-column: 1; grid-row: auto; position: static; order: 5; }
}

/* barra de pasos */
body.rc .pasos { display: flex; align-items: center; justify-content: flex-start; gap: 6px; background: #fff; border: 1px solid var(--linea); border-radius: 999px; padding: 9px 14px; margin: 0 0 18px; overflow-x: auto; box-shadow: 0 6px 20px rgba(15, 36, 48, .06); }
.ps { display: flex; align-items: center; gap: 9px; flex: none; padding: 4px 6px; }
.ps i { width: 26px; height: 26px; border-radius: 50%; background: #eef2f6; color: #94a3b1; font-size: 12.5px; font-weight: 800; font-style: normal; display: grid; place-items: center; flex: none; transition: .2s; }
.ps b { font-size: 13px; font-weight: 700; color: #94a3b1; white-space: nowrap; transition: .2s; }
.ps.on i { background: linear-gradient(145deg, var(--marca2), var(--marca)); color: #fff; box-shadow: 0 2px 7px color-mix(in srgb, var(--marca) 35%, transparent); }
.ps.on b { color: var(--tinta); }
.ps.ok i { background: var(--marca-cl); color: var(--marca); }
.ps.ok b { color: var(--marca); }
.pasos .ln { width: 18px; height: 2px; background: #e6ecf1; border-radius: 2px; flex: none; }

/* aviso (paso saltado) */
body.rc .coAvisoCita { background: var(--marca-cl); border: 1px solid var(--marca-bd); color: var(--marca); border-radius: 14px; margin-bottom: 14px; }

/* tarjeta del paso */
body.rc main.coPanel { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 28px; box-shadow: 0 10px 30px rgba(15, 36, 48, .07); }
body.rc main.coPanel h2 { font-size: 23px; font-weight: 800; color: var(--tinta); letter-spacing: -.4px; margin: 0; }
body.rc main.coPanel .sub { font-size: 15px; color: var(--gris); margin: 4px 0 22px; }
body.rc .coPaso:not([hidden]) { animation: none; }
@media (max-width: 560px) { body.rc main.coPanel { padding: 20px 16px; } body.rc .rcHero h1 { font-size: 25px; } }

/* opciones grandes: tipo, sede, profesional */
body.rc .coTarjeta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border: 1.5px solid var(--linea); border-radius: 14px; padding: 17px 18px; cursor: pointer; background: #fff; transition: .16s; margin: 0 0 12px; overflow: visible; box-shadow: none; text-align: left; }
body.rc .coTarjeta:hover { border-color: var(--marca-bd); background: #fbfdfe; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 36, 48, .08); }
body.rc .coTarjetaCab { background: none; color: var(--tinta); padding: 0; flex: 1 1 200px; min-width: 0; }
body.rc .coTarjetaTitulo { display: block; font-size: 17px; font-weight: 700; color: var(--tinta); }
body.rc .coTarjetaCuerpo { padding: 0; flex: 1 1 100%; order: 3; }
body.rc .coTarjetaPie { padding: 0; border: 0; display: flex; align-items: center; gap: 8px; margin-left: auto; text-align: right; }
body.rc .coDireccion { margin: 2px 0 8px; font-size: 14px; color: var(--gris); }
body.rc .coMapa, body.rc .esMapaBtn { border: 0; }
body.rc .coProfesional { gap: 14px; }
body.rc .coFoto { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 3px 10px rgba(15, 36, 48, .15); }
body.rc .coInfoProfesional { font-size: 14px; color: var(--gris); }

/* botones */
body.rc .coElegir.rcBtn, body.rc .coBoton { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 12px; padding: 10px 15px; font: 700 13.5px/1 var(--letra); cursor: pointer; border: 1.5px solid transparent; transition: .16s; white-space: nowrap; background: linear-gradient(135deg, var(--marca2), var(--marca)); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--marca) 32%, transparent); height: auto; width: auto; }
body.rc .coElegir.rcBtn:hover, body.rc .coBoton:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--marca) 40%, transparent); background: linear-gradient(135deg, var(--marca2), var(--marca)); }
body.rc .coElegir svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.rc .coBoton { width: 100%; padding: 17px; font-size: 16.5px; border-radius: 14px; margin-top: 4px; }
body.rc .coBoton::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center / contain no-repeat; }
body.rc .coPrimeraCita, body.rc .coMasInfo, body.rc .coBotonSecundario { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: #fff; border: 1.5px solid var(--marca-bd); color: var(--marca); border-radius: 12px; padding: 10px 15px; font: 700 13.5px/1 var(--letra); cursor: pointer; transition: .16s; text-decoration: none; box-shadow: none; }
body.rc .coPrimeraCita:hover, body.rc .coMasInfo:hover, body.rc .coBotonSecundario:hover { background: var(--marca-cl); border-color: var(--marca-bd); color: var(--marca); }

/* servicios: especialidades plegables */
body.rc .coPanelEsp { border: 1.5px solid var(--linea); border-radius: 14px; overflow: hidden; margin-bottom: 12px; background: #fff; box-shadow: none; transform: none; }
body.rc .coPanelEspCab { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 18px; cursor: pointer; background: #fff; border: 0; color: var(--tinta); text-align: left; font: inherit; }
body.rc .coPanelEspCab:hover { background: #fafcfd; }
body.rc .coPanelEspCab .pt { width: 38px; height: 38px; border-radius: 11px; background: var(--marca-cl); display: grid; place-items: center; flex: none; }
body.rc .coPanelEspCab .pt svg { width: 19px; height: 19px; stroke: var(--marca); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.rc .coPanelEspCab b { flex: 1; font-size: 16.5px; font-weight: 700; color: var(--tinta); }
body.rc .coPanelEspCab .n { font-size: 13px; color: var(--gris); font-weight: 600; }
body.rc .coPanelEspCab .ch { width: 18px; height: 18px; stroke: #aebcc8; fill: none; stroke-width: 2.4; stroke-linecap: round; transition: .2s; flex: none; }
body.rc .coPanelEsp.abierta .coPanelEspCab { background: var(--marca-cl); border-bottom: 1px solid var(--marca-bd); }
body.rc .coPanelEsp.abierta .coPanelEspCab .ch { transform: rotate(180deg); stroke: var(--marca); }
body.rc .coPanelEspCuerpo { padding: 6px 0; }
body.rc .coServicio { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid #f3f6f9; flex-wrap: nowrap; justify-content: flex-start; }
body.rc .coServicio:last-child { border-bottom: 0; }
body.rc .coServicio:hover { background: #fbfdfe; }
body.rc .coServicioNombre { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 9px; }
body.rc .coServicioNombre .nombre { flex: 1 1 100%; font-size: 16px; font-weight: 700; color: var(--tinta); }
body.rc .coServicioNombre .precio, body.rc .rcTag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 10px; margin: 0; }
body.rc .coServicioNombre .precio { background: var(--marca-cl); color: var(--marca); }
body.rc .rcTag.t-dur { background: #f1f5f8; color: #5f7183; }
body.rc .rcTag svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
body.rc .coSenal { display: inline-flex; margin: 0; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: #fdf6e3; color: #8a6a14; }
body.rc .coSenal b { color: inherit; font-weight: 700; }
body.rc .coServicioAcciones { flex-direction: row; flex: none; gap: 8px; align-items: center; }
body.rc .coServicioBotones { gap: 8px; }
body.rc .coInfoServicio { font-size: 13.5px; color: var(--gris); flex: 1 1 100%; order: 9; margin: 0; }
@media (max-width: 600px) { body.rc .coServicio { flex-wrap: wrap; } body.rc .coServicioAcciones { width: 100%; justify-content: flex-end; flex-wrap: wrap; } }

/* calendario */
body.rc .coCalendario { max-width: 430px; margin: 0 auto; }
body.rc .coMes { justify-content: center; gap: 20px; margin-bottom: 16px; }
body.rc .coMes span { font-size: 18px; font-weight: 700; color: var(--tinta); min-width: 180px; text-align: center; }
body.rc .coMes button { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--linea); background: #fff; color: var(--marca); font-size: 20px; display: grid; place-items: center; padding: 0; }
body.rc .coMes button:hover { background: var(--marca-cl); border-color: var(--marca-bd); }
body.rc .coDias.coRejillaMes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; overflow: visible; padding: 0; }
body.rc .coDsem { text-align: center; font-size: 12px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 2px; }
body.rc .coDias.coRejillaMes .coDia { width: auto; height: auto; aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #c3cfd9; position: relative; background: transparent; border: 1.5px solid transparent; padding: 0; }
body.rc .coDias.coRejillaMes .coDia:not(.apagado):not(:disabled) { background: #fff; border-color: var(--marca-bd); color: var(--marca); cursor: pointer; }
body.rc .coDias.coRejillaMes .coDia:not(.apagado):not(:disabled)::after { content: ""; position: absolute; bottom: 6px; left: 50%; margin-left: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--marca2); }
body.rc .coDias.coRejillaMes .coDia:hover:not(.apagado):not(:disabled) { background: var(--marca-cl); transform: translateY(-2px); border-color: var(--marca-bd); }
body.rc .coDias.coRejillaMes .coDia.activo { background: linear-gradient(135deg, var(--marca2), var(--marca)); color: #fff; border-color: transparent; box-shadow: 0 5px 14px color-mix(in srgb, var(--marca) 35%, transparent); }
body.rc .coDias.coRejillaMes .coDia.activo::after { background: #fff; }
body.rc .coDias.coRejillaMes .coDia.apagado, body.rc .coDias.coRejillaMes .coDia:disabled { background: transparent; border-color: transparent; color: #c3cfd9; opacity: 1; }
body.rc .leyenda { display: flex; justify-content: center; gap: 18px; margin-top: 16px; font-size: 13px; color: var(--gris); }
body.rc .leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
body.rc .coNota { color: var(--gris); font-size: 13px; text-align: center; }

/* horas por franjas */
body.rc .coHoras { display: block; }
body.rc .franja { margin-top: 22px; }
body.rc .franja h4 { font-size: 13px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 11px; display: flex; align-items: center; gap: 8px; }
body.rc .franja h4 svg { width: 15px; height: 15px; stroke: var(--marca); fill: none; stroke-width: 2; stroke-linecap: round; }
body.rc .franja .horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
body.rc .coHora.rcH { border: 1.5px solid var(--linea); border-radius: 12px; padding: 13px 6px; text-align: center; cursor: pointer; background: #fff; transition: .14s; display: block; }
body.rc .coHora.rcH .h { display: block; font-size: 16px; font-weight: 800; color: var(--tinta); }
body.rc .coHora.rcH .p { display: block; font-size: 11.5px; color: var(--gris); }
body.rc .coHora.rcH:hover { border-color: var(--marca); background: var(--marca-cl); transform: translateY(-2px); }

/* formulario */
body.rc .coResumenCita { background: var(--marca-cl); border: 1px solid var(--marca-bd); color: var(--marca); border-radius: 14px; padding: 13px 16px; font-size: 14px; }
body.rc .coAvisoSenal { background: #fdf6e3; border: 1px solid #f3dfa6; color: #8a6a14; border-radius: 14px; font-size: 13.5px; }
body.rc .coCampo { margin-bottom: 16px; }
body.rc .coCampo label { display: block; font-size: 13px; font-weight: 700; color: var(--tinta); margin-bottom: 7px; }
body.rc .coCampo input, body.rc .coCampo select, body.rc .coCampo textarea { width: 100%; height: auto; border: 1.5px solid var(--linea); border-radius: 12px; padding: 14px 15px; font: 15.5px var(--letra); color: var(--tinta); background: #fff; outline: none; transition: .15s; }
body.rc .coCampo textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
body.rc .coCampo input:focus, body.rc .coCampo select:focus, body.rc .coCampo textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca2) 14%, transparent); }
body.rc .coCampo input::placeholder { color: #b6c3ce; }
body.rc .coYaPaciente, body.rc .coPacienteEncontrado { border: 1.5px solid var(--marca-bd); background: var(--marca-cl); border-radius: 14px; }
body.rc .coYaPacienteTitulo { font-weight: 700; color: var(--tinta); }
body.rc .coPrimera { display: flex; gap: 10px; margin: 4px 0 16px; }
body.rc .coPrimera .coYaPacienteTitulo { flex: 1 1 100%; font-size: 13px; margin: 0 0 -2px; }
body.rc .coPrimeraOpc { flex: 1; position: relative; border: 1.5px solid var(--linea); border-radius: 12px; padding: 13px; text-align: center; font-size: 15px; font-weight: 700; color: var(--texto); cursor: pointer; justify-content: center; }
body.rc .coPrimeraOpc input { position: absolute; opacity: 0; pointer-events: none; }
body.rc .coPrimeraOpc:has(input:checked) { border-color: var(--marca); background: var(--marca-cl); color: var(--marca); }
body.rc .coCheck { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--texto); cursor: pointer; line-height: 1.5; margin: 6px 0 16px; }
body.rc .coCheck input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
body.rc .coCheck > span::before { content: ""; float: left; width: 22px; height: 22px; margin: 0 12px 0 0; border-radius: 7px; border: 1.8px solid #cdd8e1; background: #fff center / 13px no-repeat; transition: .14s; }
body.rc .coCheck > span { display: block; }
body.rc .coCheck:has(input:checked) > span::before { background-color: var(--marca); border-color: var(--marca); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
body.rc .coCheck > span { position: relative; }
body.rc .coError { border-radius: 12px; }

/* pie de navegación dentro de la tarjeta */
body.rc .pie-nav { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linea); }
body.rc .pie-nav[hidden] { display: none; }
body.rc .coVolver { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--gris); border: 0; padding: 13px 6px; font: 700 15px/1 var(--letra); cursor: pointer; }
body.rc .coVolver:hover { color: var(--marca); }

/* Tu cita (columna derecha) */
.rcResumen { background: #fff; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; position: sticky; top: 94px; box-shadow: 0 10px 30px rgba(15, 36, 48, .07); }
.rcRh { background: linear-gradient(135deg, var(--marca), var(--marca2)); color: #fff; padding: 20px; }
.rcRh b { font-size: 17px; font-weight: 800; display: block; }
.rcRh span { font-size: 13.5px; opacity: .88; }
.rcRb { padding: 18px 20px; }
.rcRb .ri { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px dashed var(--linea); }
.rcRb .ri:last-of-type { border-bottom: 0; }
.rcRb .ri .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--marca-cl); display: grid; place-items: center; flex: none; }
.rcRb .ri .ic svg { width: 16px; height: 16px; stroke: var(--marca); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rcRb .ri .tx { min-width: 0; }
.rcRb .ri .tx > span { display: block; font-size: 11.5px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .7px; }
.rcRb .ri .tx b { display: block; font-size: 15px; color: var(--tinta); font-weight: 700; margin-top: 2px; }
.rcRb .ri .tx b .sub2 { font-size: 13px; color: var(--gris); font-weight: 600; }
.rcRb .ri.pend .tx b { color: #c3cfd9; font-weight: 600; }
.rcRb .total { display: flex; align-items: baseline; margin-top: 14px; padding: 15px 17px; border-radius: 14px; background: var(--marca-cl); border: 1px solid var(--marca-bd); }
.rcRb .total b { font-size: 14px; color: var(--marca); font-weight: 700; }
.rcRb .total span { margin-left: auto; font-size: 24px; font-weight: 800; color: var(--marca); letter-spacing: -.5px; }
.rcRb .aviso { margin-top: 12px; font-size: 12.5px; color: var(--gris); line-height: 1.5; display: flex; gap: 9px; }
.rcRb .aviso svg { width: 15px; height: 15px; stroke: var(--oro); fill: none; stroke-width: 2; flex: none; margin-top: 2px; }
.rcRb .confia { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); }
.rcRb .cf { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto); font-weight: 600; }
.rcRb .cf svg { width: 16px; height: 16px; stroke: var(--ok); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* confirmación */
body.rc .coHecho { text-align: center; padding: 14px 0 6px; }
body.rc .coHecho h2 { font-size: 26px; color: var(--tinta); }
body.rc .coTic { width: 86px; height: 86px; border-radius: 50%; background: var(--okbg); color: var(--ok); font-size: 44px; font-weight: 800; margin: 0 auto 20px; animation: rcPop .5s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes rcPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
body.rc #coResumenFinal { text-align: left; border: 1.5px solid var(--marca-bd); background: var(--marca-cl); border-radius: 14px; padding: 18px 20px; margin: 18px 0; font-size: 15px; color: var(--tinta); font-weight: 600; }
body.rc .co-aviso-pago { border-radius: 12px; }
body.rc .coCalendario .coCalendarioBotones { justify-content: center; }
body.rc .coBotonCalendario { background: #fff; color: var(--marca); border: 1.5px solid var(--marca-bd); border-radius: 12px; }
body.rc .coBotonCalendario:hover, body.rc .coBotonCalendario:focus { background: var(--marca-cl); color: var(--marca); }

/* chat */
body.rc .coChatBoton { right: 22px; bottom: 22px; background: #fff; color: var(--tinta); border: 1px solid var(--linea); box-shadow: 0 10px 30px rgba(15, 36, 48, .16); font-weight: 700; padding: 10px 18px 10px 12px; }
body.rc .coChatBoton:hover { filter: none; transform: translateY(-2px); }
body.rc .coChatBoton > span[aria-hidden] { background: linear-gradient(145deg, var(--marca2), var(--marca)); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; }

/* P1505 (cont.): lo que traían las reglas anteriores de Recepción y aquí sobra */
body.rc h1, body.rc h2, body.rc h3 { font-family: var(--letra); letter-spacing: -.4px; }
body.rc .rcHero h1 { letter-spacing: -.6px; }
body.rc .coPanelEspPlegable > .coPanelEspCab::after, body.rc .coPanelEspPlegable.abierta > .coPanelEspCab::after { content: none; display: none; }
body.rc .coTarjetaCab, body.rc .coPanelEspCab { background: none; box-shadow: none; border: 0; border-radius: 0; }
body.rc .coPanelEspCab { background: #fff; padding: 15px 18px; }
body.rc .coPanelEsp.abierta .coPanelEspCab { background: var(--marca-cl); }
body.rc .coPanelEspCab:hover { background: #fafcfd; }
body.rc .coPanelEsp.abierta .coPanelEspCab:hover { background: var(--marca-cl); }
body.rc .coTarjetaTitulo { color: var(--tinta); }
body.rc .coTarjetaCab::before, body.rc .coTarjetaCab::after, body.rc .coTarjeta::before { content: none; }
body.rc .coTarjeta, body.rc .coPanelEsp { transition: .16s; }
body.rc .coPanelEsp:hover { transform: none; box-shadow: none; }
body.rc .rcTag, body.rc .coServicioNombre .precio, body.rc .coSenal { flex: none; white-space: nowrap; order: 2; }
body.rc .coServicioNombre .nombre { order: 0; }
body.rc .coServicioNombre .coInfoServicio { order: 1; flex: 1 1 100%; margin: -3px 0 2px; }
body.rc .coServicio { flex-wrap: wrap; }
body.rc .coServicioNombre { flex: 1 1 260px; }
.rcCols > .coPasos { grid-row: 1; }
.rcCols > .coAvisoCita { grid-row: 2; }
.rcCols > .rcResumen { grid-row: 2 / span 2; }
@media (max-width: 940px) { .rcCols > .coPasos, .rcCols > .coAvisoCita, .rcCols > main.coPanel { grid-row: auto; } }
.rcCols > .rcResumen { grid-row: 3; }
@media (max-width: 940px) { .rcCols > .rcResumen { grid-row: auto; } }
body.rc .coSenal { display: inline-block; white-space: normal; }
body.rc .coTarjeta .ic { width: 46px; height: 46px; border-radius: 13px; background: var(--marca-cl); display: grid; place-items: center; flex: none; }
body.rc .coTarjeta .ic svg { width: 22px; height: 22px; stroke: var(--marca); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.rc .coTarjeta.rcOp .coTarjetaCab { flex: 1 1 0; }
body.rc .coTarjeta.rcOp .coTarjetaTitulo { font-size: 17px; }
body.rc .coTarjeta.rcOp .coTarjetaPie { margin-left: 0; }
body.rc .coTarjeta.rcOp .coElegir.rcBtn { font-size: 0; gap: 0; padding: 0; width: 20px; height: 20px; background: none; box-shadow: none; border: 0; color: #c3cfd9; }
body.rc .coTarjeta.rcOp .coElegir.rcBtn svg { width: 20px; height: 20px; stroke-width: 2.4; transition: .16s; }
body.rc .coTarjeta.rcOp:hover .coElegir.rcBtn svg { stroke: var(--marca); transform: translateX(3px); }
body.rc .coTarjeta.rcOp:hover .coElegir.rcBtn { transform: none; box-shadow: none; background: none; }
body.rc #coDatosPaciente { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
body.rc #coDatosPaciente #coAseguradora { grid-column: 1 / -1; }
@media (max-width: 600px) { body.rc #coDatosPaciente { grid-template-columns: 1fr; } }
body.rc #coResumenFinal .l { display: flex; gap: 12px; padding: 7px 0; font-size: 15px; font-weight: 400; }
body.rc #coResumenFinal .l b { color: var(--tinta); min-width: 110px; font-weight: 700; }
body.rc #rcComoLlegar svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.rc .coCalendarioRotulo { color: var(--gris); }

/* =====================================================================
   P1507 / P1509 (Enrique, 17-10-2026): ESCAPARATE y AL VUELO IDÉNTICOS a escaparate.html y alvuelo.html
   (Clínica Aurora). Cabecera y pie: los de Recepción (.rcHeader / .rcPie). Todo bajo body.ev.
   ===================================================================== */
body.ev {
    --marca-sf: color-mix(in srgb, var(--marca) 4%, #fff); --arena: #c9a227; --arena-cl: #fdf6e4;
    --tinta: #0f2430; --texto: #46586a; --gris: #8696a6; --linea: #e7eef1; --ok: #16a34a; --okbg: #eafaf0;
    --titulo: #0f2430; --panel: #fff; --borde: #e7eef1; --bordeSuave: #e7eef1;
    background: #f3f7f8; color: var(--texto); padding: 0; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
body.ev * { box-sizing: border-box; }
body.ev .rcHin { max-width: 1240px; }
body.estilo-alvuelo.ev .rcHin { max-width: 1140px; }
body.ev .evHero { text-align: left; padding: 34px 22px 78px; background: linear-gradient(135deg, var(--marca) 0%, color-mix(in srgb, var(--marca) 55%, var(--marca2)) 55%, var(--marca2) 100%); }
body.ev .evHero::before { content: ""; position: absolute; right: -80px; top: -90px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.07); }
body.ev .evHero::after { content: ""; position: absolute; left: -60px; bottom: -140px; top: auto; right: auto; inset: auto auto -140px -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.05); }
body.ev .evHin { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }
body.estilo-alvuelo.ev .evHin { max-width: 1140px; }
body.estilo-alvuelo.ev .evHero { padding: 32px 22px 74px; }
body.estilo-alvuelo.ev .evHero::after { display: none; }
body.ev .evHero h1 { font-size: 33px; font-weight: 800; letter-spacing: -.7px; margin: 0; color: #fff; }
body.ev .evHero p { font-size: 16px; opacity: .92; margin: 6px 0 0; max-width: 620px; }
body.ev .evSellos { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
body.ev .evSello { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; backdrop-filter: blur(4px); }
body.ev .evSello svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body.ev .evRayo { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; letter-spacing: .3px; margin-bottom: 12px; }
body.ev .evRayo svg { width: 14px; height: 14px; stroke: #ffd98a; fill: #ffd98a; stroke-width: 1.5; }
@media (max-width: 560px) { body.ev .evHero h1 { font-size: 26px; } }

body.ev .coCaja, body.ev.vista-pagina .coCaja { max-width: 1240px; margin: -50px auto 0; padding: 0 22px 70px; position: relative; z-index: 2; background: transparent; box-shadow: none; border: 0; }
body.estilo-alvuelo.ev .coCaja { max-width: 1140px; margin-top: -48px; }
body.ev .coPanel { background: transparent; box-shadow: none; border: 0; padding: 0; }
body.ev .coPasos, body.ev .coPie, body.ev .esTitulo { display: none !important; }
body.ev svg { flex: none; }

/* filtros */
body.ev .evFiltros { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 16px; box-shadow: 0 12px 34px rgba(15,36,48,.09); margin: 0 0 20px; display: block; }
body.ev .evFl { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
body.ev .evSeg { display: flex; background: #f2f6f8; border-radius: 12px; padding: 4px; gap: 3px; }
body.ev .evSeg button { padding: 10px 17px; border-radius: 9px; font: 700 14px var(--fuente, inherit); color: #73828f; cursor: pointer; display: flex; align-items: center; gap: 7px; border: 0; background: none; }
body.ev .evSeg button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.ev .evSeg button.on { background: #fff; color: var(--marca); box-shadow: 0 2px 6px rgba(15,36,48,.1); }
body.ev .evCp { flex: 1; min-width: 190px; margin: 0; }
body.ev .evCp.evFecha { max-width: 200px; }
body.ev .evCp label { display: block; font-size: 11.5px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .8px; margin: 0 0 6px; }
body.ev .evCp select, body.ev .evCp input { width: 100%; height: auto; border: 1.5px solid var(--linea); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--tinta); background: #fff; outline: none; box-shadow: none; }
body.ev .evCp select:focus, body.ev .evCp input:focus { border-color: var(--marca); box-shadow: 0 0 0 4px rgba(31,167,174,.13); }
body.ev .evSw { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--linea); border-radius: 12px; padding: 11px 15px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--texto); user-select: none; }
body.ev .evSw i { width: 34px; height: 19px; border-radius: 999px; background: #dbe3e8; position: relative; transition: .18s; flex: none; }
body.ev .evSw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
body.ev .evSw.on { background: var(--marca-cl); border-color: var(--marca-bd); color: var(--marca); }
body.ev .evSw.on i { background: var(--marca2); }
body.ev .evSw.on i::after { left: 17px; }
body.ev .evChips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); }
body.ev .evChip { font-size: 13.5px; font-weight: 700; color: #67798a; background: #fff; border: 1.5px solid var(--linea); border-radius: 999px; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
body.ev .evChip i { width: 8px; height: 8px; border-radius: 50%; }
body.ev .evChip:hover { border-color: var(--marca-bd); color: var(--marca); }
body.ev .evChip.on { background: var(--marca-cl); border-color: var(--marca-bd); color: var(--marca); }

/* títulos */
body.ev .evTit { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 14px; flex-wrap: wrap; }
body.ev .evTit h2 { font-size: 24px; font-weight: 800; color: var(--tinta); letter-spacing: -.4px; margin: 0; }
body.ev .evTit span { font-size: 14.5px; color: var(--gris); }
body.ev .evTitCat { margin-top: 34px; }
body.ev .esCargando, body.ev .coNota { color: var(--gris); }

/* tarjeta de profesional */
body.ev .evPro { background: #fff; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; margin-bottom: 16px; box-shadow: 0 6px 20px rgba(15,36,48,.06); transition: .18s; border-left: 5px solid var(--c, var(--marca)); }
body.ev .evPro:hover { box-shadow: 0 14px 36px rgba(15,36,48,.11); transform: translateY(-2px); }
body.ev .evPcols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
@media (max-width: 900px) { body.ev .evPcols { grid-template-columns: 1fr; } }
body.ev .evPizq { padding: 22px; display: flex; gap: 17px; min-width: 0; }
body.ev .evFoto { width: 94px; height: 94px; border-radius: 18px; flex: none; background: linear-gradient(145deg, var(--marca-cl), color-mix(in srgb, var(--marca) 14%, #fff)); display: grid; place-items: center; color: var(--marca); font-size: 28px; font-weight: 800; position: relative; overflow: visible; }
body.ev .evFoto img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
body.ev .evVf { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); border: 3px solid #fff; display: grid; place-items: center; }
body.ev .evVf svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
body.ev .evPinfo { min-width: 0; flex: 1; }
body.ev .evEtq { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 4px 10px; margin-bottom: 7px; letter-spacing: .3px; }
body.ev .e-hoy { background: var(--okbg); color: #157a44; }
body.ev .evPinfo h3 { font-size: 19.5px; font-weight: 800; color: var(--tinta); letter-spacing: -.3px; display: flex; align-items: center; gap: 7px; margin: 0; }
body.ev .evPinfo h3 a { color: inherit; text-decoration: none; }
body.ev .evPinfo h3 a:hover { color: var(--marca); }
body.ev .evVer2 svg { width: 17px; height: 17px; fill: var(--marca2); display: block; }
body.ev .evEsp { display: inline-block; font-size: 13px; font-weight: 700; color: var(--c, var(--marca)); background: var(--ccl, var(--marca-cl)); border-radius: 7px; padding: 3px 10px; margin-top: 6px; }
body.ev .evLin { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--texto); margin-top: 9px; }
body.ev .evLin svg, body.ev .evHmeta svg { width: 15px; height: 15px; stroke: var(--gris); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.ev .evEstrellas { margin-top: 9px; font-size: 13.5px; }
body.ev .evEstrellas .esValoracion { color: #e8b931; font-weight: 700; text-decoration: none; }
body.ev .evPrecio { margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--linea); font-size: 13px; color: var(--marca); font-weight: 700; }
body.ev .evPrecio .precio { display: block; font-size: 21px; font-weight: 800; color: var(--tinta); letter-spacing: -.4px; }
body.ev .evPrecio .coSenal { display: block; font-size: 13px; color: var(--gris); font-weight: 600; margin-top: 3px; }
body.ev .evPrecio .coSenal b { color: var(--marca); font-weight: 700; font-size: 13px; }
body.ev .evVermas { font-size: 13.5px; font-weight: 700; color: var(--marca); cursor: pointer; margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
body.ev .evVermas svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
body.ev .evVermas:hover { text-decoration: underline; }
body.ev .evPder { padding: 22px; background: var(--marca-sf); border-left: 1px solid var(--linea); min-width: 0; }
@media (max-width: 900px) { body.ev .evPder { border-left: none; border-top: 1px solid var(--linea); } }
body.ev .evPder h4 { font-size: 13.5px; font-weight: 800; color: var(--texto); margin: 0 0 12px; }
body.ev .evDias { display: flex; align-items: center; gap: 8px; }
body.ev .evFlecha { width: 32px; height: 62px; border-radius: 11px; border: 1.5px solid var(--linea); background: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
body.ev .evFlecha svg { width: 15px; height: 15px; stroke: var(--marca); fill: none; stroke-width: 2.6; stroke-linecap: round; }
body.ev .evFlecha:hover { background: var(--marca-cl); border-color: var(--marca-bd); }
body.ev .evFlecha.off { opacity: .35; cursor: default; }
body.ev .evDgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; flex: 1; }
body.ev .evDia { border: 1.5px solid var(--marca-bd); background: #fff; border-radius: 12px; padding: 10px 4px; text-align: center; cursor: pointer; transition: .14s; }
body.ev .evDia b { display: block; font-size: 13.5px; font-weight: 800; color: var(--marca); text-transform: capitalize; }
body.ev .evDia span { display: block; font-size: 12.5px; color: var(--marca); opacity: .75; }
body.ev .evDia em { display: block; font-size: 10.5px; font-style: normal; font-weight: 700; color: var(--ok); margin-top: 3px; }
body.ev .evDia:hover { background: var(--marca-cl); transform: translateY(-2px); }
body.ev .evDia.sel { background: linear-gradient(135deg, var(--marca2), var(--marca)); border-color: transparent; box-shadow: 0 6px 16px rgba(11,97,119,.3); }
body.ev .evDia.sel b, body.ev .evDia.sel span, body.ev .evDia.sel em { color: #fff; opacity: 1; }
body.ev .evDia.no { border-color: var(--linea); background: #f6f8f9; cursor: default; }
body.ev .evDia.no b, body.ev .evDia.no span { color: #b6c2cb; text-decoration: line-through; }
body.ev .evDia.no:hover { transform: none; background: #f6f8f9; }
body.ev .evHoras { margin-top: 14px; border-top: 1px dashed var(--marca-bd); padding-top: 14px; }
body.ev .evHf { font-size: 11.5px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .9px; margin: 10px 0 8px; display: flex; align-items: center; gap: 7px; }
body.ev .evHf:first-child { margin-top: 0; }
body.ev .evHf svg { width: 14px; height: 14px; stroke: var(--marca); fill: none; stroke-width: 2; stroke-linecap: round; }
body.ev .evHgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px,1fr)); gap: 7px; }
body.ev .evHr { border: 1.5px solid var(--marca-bd); background: #fff; border-radius: 10px; padding: 10px 4px; text-align: center; font-size: 14.5px; font-weight: 800; color: var(--marca); cursor: pointer; transition: .12s; }
body.ev .evHr:hover { background: linear-gradient(135deg, var(--marca2), var(--marca)); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(11,97,119,.28); }
body.ev .evMas { display: block; width: 100%; margin-top: 11px; background: none; border: none; font-weight: 700; font-size: 13.5px; font-family: inherit; color: var(--marca); cursor: pointer; padding: 6px; }
body.ev .evMas:hover { text-decoration: underline; }
body.ev .esVacio { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 34px 26px; text-align: center; }

/* catálogo */
body.ev .evCatg { margin-top: 16px; }
body.ev .evCatg h3 { font-size: 13px; font-weight: 800; color: var(--c, var(--marca)); text-transform: uppercase; letter-spacing: 1.3px; margin: 22px 0 11px; display: flex; align-items: center; gap: 9px; }
body.ev .evCatg h3::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
body.ev .evSgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px,1fr)); gap: 13px; }
body.ev .evSv { background: #fff; border: 1px solid var(--linea); border-radius: 15px; padding: 18px; transition: .16s; display: flex; flex-direction: column; }
body.ev .evSv:hover, body.ev .evSv.activo { border-color: var(--marca-bd); box-shadow: 0 10px 26px rgba(15,36,48,.09); transform: translateY(-2px); }
body.ev .evSv b { font-size: 16.5px; font-weight: 700; color: var(--tinta); display: block; }
body.ev .evSv p { font-size: 13.5px; color: var(--gris); margin: 5px 0 0; min-height: 38px; }
body.ev .evSvm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 11px 0 14px; }
body.ev .evTg { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 10px; }
body.ev .evTg svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.3; stroke-linecap: round; }
body.ev .t-d { background: #f1f5f7; color: #5f7183; }
body.ev .t-p { background: var(--marca-cl); color: var(--marca); }
body.ev .t-r { background: var(--arena-cl); color: #8a6a14; }
body.ev .evBtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 12px; padding: 12px 20px; font-weight: 700; font-size: 14.5px; line-height: 1; font-family: inherit; cursor: pointer; border: 1.5px solid transparent; transition: .16s; margin-top: auto; }
body.ev .evBtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.ev .evBtnS { background: #fff; border-color: var(--marca-bd); color: var(--marca); }
body.ev .evBtnS:hover { background: var(--marca-cl); }
body.ev .evBtnFull { width: 100%; }

/* Al Vuelo: lista de huecos */
body.ev .evDialab { display: flex; align-items: center; gap: 11px; margin: 22px 0 10px; }
body.ev .evDialab b { font-size: 14.5px; font-weight: 800; color: var(--tinta); }
body.ev .evDialab b::first-letter { text-transform: uppercase; }
body.ev .evDialab .pz { font-size: 12px; font-weight: 800; color: var(--marca); background: var(--marca-cl); border-radius: 999px; padding: 4px 11px; }
body.ev .evDialab::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
body.ev .evHueco { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--linea); border-radius: 15px; padding: 13px 16px; margin-bottom: 9px; cursor: pointer; transition: .15s; border-left: 5px solid var(--c, var(--marca)); position: relative; }
body.ev .evHueco:hover { border-color: var(--marca-bd); border-left-color: var(--c, var(--marca)); box-shadow: 0 10px 26px rgba(15,36,48,.1); transform: translateY(-2px); }
body.ev .evHora { min-width: 84px; text-align: center; border-radius: 12px; padding: 11px 8px; background: linear-gradient(135deg, var(--marca2), var(--marca)); color: #fff; flex: none; box-shadow: 0 4px 12px rgba(11,97,119,.26); }
body.ev .evHora b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
body.ev .evHora span { display: block; font-size: 10.5px; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .6px; }
body.ev .evAv { width: 46px; height: 46px; border-radius: 50%; background: var(--ccl, var(--marca-cl)); display: grid; place-items: center; color: var(--c, var(--marca)); font-weight: 800; font-size: 15px; flex: none; overflow: hidden; }
body.ev .evAv img { width: 100%; height: 100%; object-fit: cover; }
body.ev .evHinfo { flex: 1; min-width: 0; }
body.ev .evHinfo > b { display: block; font-size: 16.5px; font-weight: 700; color: var(--tinta); }
body.ev .evHmeta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 5px; font-size: 13.5px; color: var(--gris); }
body.ev .evHsede { display: inline-flex; align-items: center; gap: 5px; }
body.ev .evEsp2 { font-size: 12.5px; font-weight: 700; color: var(--c, var(--marca)); background: var(--ccl, var(--marca-cl)); border-radius: 7px; padding: 3px 9px; }
body.ev .evHprecio { text-align: right; flex: none; }
body.ev .evHprecio b { font-size: 17.5px; font-weight: 800; color: var(--tinta); }
body.ev .evHprecio span { display: block; font-size: 12px; color: var(--marca); font-weight: 700; }
body.ev .evFlb { width: 34px; height: 34px; border-radius: 10px; background: var(--marca-cl); display: grid; place-items: center; flex: none; }
body.ev .evFlb svg { width: 16px; height: 16px; stroke: var(--marca); fill: none; stroke-width: 2.6; stroke-linecap: round; transition: .15s; }
body.ev .evHueco:hover .evFlb { background: linear-gradient(135deg, var(--marca2), var(--marca)); }
body.ev .evHueco:hover .evFlb svg { stroke: #fff; transform: translateX(2px); }
body.ev .evPrim { position: absolute; top: -9px; left: 16px; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--arena); border-radius: 999px; padding: 3px 10px; letter-spacing: .3px; }
body.ev .evMasd { display: block; width: 100%; margin-top: 14px; background: #fff; border: 1.5px dashed var(--marca-bd); border-radius: 14px; padding: 15px; font-weight: 700; font-size: 14.5px; font-family: inherit; color: var(--marca); cursor: pointer; }
body.ev .evMasd:hover { background: var(--marca-cl); }
body.ev .evVacio { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 44px 26px; text-align: center; }
body.ev .evVic { width: 76px; height: 76px; border-radius: 50%; background: var(--marca-cl); display: grid; place-items: center; margin: 0 auto 18px; }
body.ev .evVic svg { width: 34px; height: 34px; stroke: var(--marca); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.ev .evVacio h3 { font-size: 21px; font-weight: 800; color: var(--tinta); margin: 0; }
@media (max-width: 600px) {
    body.ev .evHueco { gap: 11px; padding: 12px; flex-wrap: wrap; }
    body.ev .evHora { min-width: 70px; }
    body.ev .evAv { display: none; }
    body.ev .evHprecio { text-align: left; }
    body.ev .evFlb { display: none; }
}

/* Escaparate: «Tus datos» y «Hecho» como ventana «Confirmar tu cita» (sobre la lista, que sigue debajo) */
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="7"] { display: block !important; }
body.ev.evAbierto { overflow: hidden; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"]:not([hidden]),
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="6"]:not([hidden]) {
    position: fixed; inset: 0; z-index: 80; display: block; overflow: auto;
    background: rgba(15,36,48,.55); backdrop-filter: blur(3px); padding: 40px 18px;
}
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > *,
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="6"] > * {
    max-width: 560px; margin-left: auto !important; margin-right: auto !important; background: #fff; grid-column: auto;
    padding-left: 22px; padding-right: 22px; border-radius: 0; box-shadow: none; border: 0; position: static;
}
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > :not(.evMh),
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="6"] > :not(.evMh) { border-radius: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; box-shadow: none !important; border: 0 !important; padding-top: 10px; padding-bottom: 10px; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"]::after,
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="6"]::after { content: ""; order: 99; display: block; flex: none; width: 100%; max-width: 560px; height: 22px; background: #fff; border-radius: 0 0 20px 20px; margin: 0 auto; }
body.ev.evAbierto .coCaja { z-index: 90; }
body.ev:not(.estilo-alvuelo) .esFicha .esFichaPrecio { display: none; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="6"]:not([hidden]) { display: flex; flex-direction: column; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="6"] > .evMh { order: -3; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="6"] > * { width: 100%; flex: none; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"]:not([hidden]) .evMh,
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="6"]:not([hidden]) .evMh { animation: evSube .3s cubic-bezier(.2,.9,.3,1.1); }
@keyframes evSube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
body.ev .evMh { display: flex; align-items: center; gap: 12px; padding: 19px 22px !important; background: linear-gradient(135deg, var(--marca), var(--marca2)) !important; color: #fff; border-radius: 20px 20px 0 0 !important; }
body.ev .evMh b { font-size: 19px; font-weight: 800; flex: 1; }
body.ev .evCerrar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; cursor: pointer; border: none; padding: 0; }
body.ev .evCerrar svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > h2 { display: none; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > .esFicha { order: 0; padding-top: 22px !important; padding-bottom: 4px; }
body.ev:not(.estilo-alvuelo) .esFicha { display: block; }
/* la ficha arriba, como el recuadro .rescita del HTML */
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"]:not([hidden]) { display: flex; flex-direction: column; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > .evMh { order: -3; flex: none; width: 100%; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > .esFicha { order: -2; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > * { width: 100%; flex: none; }
body.ev .esFicha .esFichaCab { display: flex; gap: 14px; align-items: center; background: var(--marca-cl); border: 1px solid var(--marca-bd); border-radius: 14px 14px 0 0; padding: 15px 15px 6px; margin: 0; }
body.ev .esFicha .esFichaCab .esFoto { width: 52px; height: 52px; flex-basis: 52px; border-radius: 14px; background: #fff; color: var(--marca); font-size: 17px; box-shadow: none; }
body.ev .esFichaQuien b { font-size: 16px; color: var(--tinta); }
body.ev .esFichaQuien small { font-size: 13.5px; color: var(--marca); font-weight: 700; }
body.ev .esFichaFilas { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; background: var(--marca-cl); border: 1px solid var(--marca-bd); border-top: 0; border-radius: 0 0 14px 14px; padding: 4px 15px 15px 81px; font-size: 13.5px; }
body.ev .esFichaFilas dt { color: var(--gris); font-weight: 700; }
body.ev .esFichaFilas dd { margin: 0; color: var(--texto); }
body.ev .esFicha .esMapaBtn, body.ev .esFicha .esFichaPrecio { margin-top: 10px; }
@media (max-width: 520px) { body.ev .esFichaFilas { padding-left: 15px; } }

/* Campos del formulario («Tus datos») como los del HTML (.cx) */
body.ev .coPaso[data-paso="5"] label { font-size: 12.5px; font-weight: 800; color: var(--tinta); }
body.ev .coPaso[data-paso="5"] input[type=text], body.ev .coPaso[data-paso="5"] input[type=email], body.ev .coPaso[data-paso="5"] input[type=tel],
body.ev .coPaso[data-paso="5"] input[type=date], body.ev .coPaso[data-paso="5"] select, body.ev .coPaso[data-paso="5"] textarea {
    border: 1.5px solid var(--linea); border-radius: 11px; padding: 12px 13px; font-size: 15px; font-family: inherit; color: var(--tinta); background: #fff; height: auto; box-shadow: none;
}
body.ev .coPaso[data-paso="5"] input:focus, body.ev .coPaso[data-paso="5"] select:focus, body.ev .coPaso[data-paso="5"] textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 4px rgba(31,167,174,.13); outline: none; }
body.ev .coPaso[data-paso="5"] .coBoton, body.ev .coPaso[data-paso="5"] button[type=submit] {
    background: linear-gradient(135deg, var(--marca2), var(--marca)); color: #fff; border: 0; border-radius: 12px; padding: 16px 20px; font-weight: 700; font-size: 15px; box-shadow: 0 5px 16px rgba(11,97,119,.3); width: 100%;
}
body.ev .coPaso[data-paso="6"] { text-align: center; }

/* Al Vuelo: «Tus datos» en página: tarjeta a la izquierda y resumen a la derecha (.cols / .card / .resumen) */
body.estilo-alvuelo.ev .coPaso[data-paso="5"]:not([hidden]) { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 22px; align-items: start; }
@media (max-width: 940px) { body.estilo-alvuelo.ev .coPaso[data-paso="5"]:not([hidden]) { grid-template-columns: 1fr; } }
body.estilo-alvuelo.ev .coPaso[data-paso="5"] > :not(.esFicha) { grid-column: 1; background: #fff; border-left: 1px solid var(--linea); border-right: 1px solid var(--linea); padding: 0 26px; margin: 0; }
body.estilo-alvuelo.ev .coPaso[data-paso="5"] > h2 { border-top: 1px solid var(--linea); border-radius: 18px 18px 0 0; padding-top: 26px; font-size: 23px; font-weight: 800; color: var(--tinta); letter-spacing: -.4px; margin: 0; }
body.estilo-alvuelo.ev .coPaso[data-paso="5"] > :nth-last-child(2) { border-bottom: 1px solid var(--linea); border-radius: 0 0 18px 18px; padding-bottom: 26px; }
body.estilo-alvuelo.ev .coPaso[data-paso="5"] > .esFicha { grid-column: 2; grid-row: 1 / span 20; background: #fff; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; position: sticky; top: 92px; box-shadow: 0 10px 30px rgba(15,36,48,.07); padding: 0 0 17px; }
@media (max-width: 940px) { body.estilo-alvuelo.ev .coPaso[data-paso="5"] > .esFicha { grid-column: 1; grid-row: auto; order: -1; position: static; } }
body.estilo-alvuelo.ev .esFicha .esFichaCab { background: linear-gradient(135deg, var(--marca), var(--marca2)); color: #fff; padding: 19px; border: 0; border-radius: 0; }
body.estilo-alvuelo.ev .esFicha .esFichaCab .esFoto { border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; }
body.estilo-alvuelo.ev .esFichaQuien b, body.estilo-alvuelo.ev .esFichaQuien small { color: #fff; }
body.estilo-alvuelo.ev .esFichaFilas { background: none; border: 0; padding: 14px 19px 0; grid-template-columns: 1fr; gap: 2px; }
body.estilo-alvuelo.ev .esFichaFilas dt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; margin-top: 8px; }
body.estilo-alvuelo.ev .esFichaFilas dd { font-size: 14.5px; color: var(--tinta); font-weight: 700; padding-bottom: 8px; border-bottom: 1px dashed var(--linea); }
body.estilo-alvuelo.ev .esFicha .esMapaBtn, body.estilo-alvuelo.ev .esFicha .esFichaPrecio { margin: 12px 19px 0; }
body.estilo-alvuelo.ev .coPaso[data-paso="6"] { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 26px; box-shadow: 0 10px 30px rgba(15,36,48,.07); }
body.estilo-alvuelo.ev .coPie { display: flex !important; }
/* Al Vuelo «Tus datos»: toda la columna izquierda es UNA tarjeta (.card del HTML) */
body.estilo-alvuelo.ev .coPaso[data-paso="5"]:not([hidden]) { gap: 0 22px; position: relative; }
body.estilo-alvuelo.ev .coPaso[data-paso="5"]::before { content: ""; grid-column: 1; grid-row: 1 / span 20; background: #fff; border: 1px solid var(--linea); border-radius: 18px; box-shadow: 0 10px 30px rgba(15,36,48,.07); }
body.estilo-alvuelo.ev .coPaso[data-paso="5"] > :not(.esFicha) { position: relative; z-index: 1; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 8px 26px !important; }
body.estilo-alvuelo.ev .coPaso[data-paso="5"] > h2 { padding-top: 26px !important; }
body.estilo-alvuelo.ev .coPaso[data-paso="5"] > :nth-last-child(2) { padding-bottom: 26px !important; }
@media (max-width: 940px) { body.estilo-alvuelo.ev .coPaso[data-paso="5"]::before { grid-row: 2 / span 20; } }
/* (sustituye la rejilla de arriba: bloque con la ficha a la derecha, absoluta) */
body.estilo-alvuelo.ev .coPaso[data-paso="5"]:not([hidden]) { display: block; position: relative; padding-right: 352px; }
body.estilo-alvuelo.ev .coPaso[data-paso="5"]::before { position: absolute; top: 0; bottom: 0; left: 0; right: 352px; grid-row: auto; z-index: 0; }
body.estilo-alvuelo.ev .coPaso[data-paso="5"] > .esFicha { position: absolute; top: 0; right: 0; width: 330px; grid-row: auto; }
@media (max-width: 940px) {
    body.estilo-alvuelo.ev .coPaso[data-paso="5"]:not([hidden]) { display: flex; flex-direction: column; padding-right: 0; }
    body.estilo-alvuelo.ev .coPaso[data-paso="5"]::before { right: 0; }
    body.estilo-alvuelo.ev .coPaso[data-paso="5"] > .esFicha { position: relative; z-index: 1; width: auto; order: -1; margin: 0 0 4px; border-radius: 18px 18px 0 0; box-shadow: none; }
}
body.ev .coPaso[data-paso="5"] > .coAvisoSenal.coAvisoSenal.coAvisoSenal { background: var(--arena-cl) !important; border: 1px solid #f0e2b6 !important; border-radius: 12px !important; padding: 12px 14px !important; font-size: 13.5px; color: #7d6212; font-weight: 600; margin: 8px 26px !important; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > .coAvisoSenal.coAvisoSenal.coAvisoSenal { margin: 6px 22px !important; }
body.ev .coPaso[data-paso="5"] > .coYaPaciente.coYaPaciente.coYaPaciente { border: 1.5px solid var(--marca-bd) !important; background: var(--marca-sf) !important; border-radius: 15px !important; padding: 18px !important; }
body.ev .coYaPacienteTitulo { font-size: 16px; font-weight: 800; color: var(--tinta); margin: 0; }
body.ev .coResumenCita { display: none; }
@media (max-width: 520px) {
    body.ev .coCaja, body.ev.vista-pagina .coCaja { padding-left: 14px; padding-right: 14px; }
    body.ev .evPizq { padding: 16px; gap: 13px; }
    body.ev .evFoto { width: 64px; height: 64px; font-size: 21px; border-radius: 15px; }
    body.ev .evPder { padding: 14px; }
    body.ev .evDias { gap: 5px; }
    body.ev .evFlecha { width: 24px; height: 58px; border-radius: 9px; }
    body.ev .evDgrid { gap: 5px; }
    body.ev .evDia { padding: 9px 2px; }
    body.ev .evDia b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.ev .evDia span { font-size: 11.5px; }
    body.ev .evHgrid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
    body.ev .evCp.evFecha { max-width: none; }
    body.ev .evTit h2 { font-size: 21px; }
}
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > .coAvisoSenal.coAvisoSenal.coAvisoSenal {
    margin: 0 auto !important; background: #fff !important; border: 0 !important; border-radius: 0 !important; padding: 18px 36px !important; position: relative; isolation: isolate;
}
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > .coAvisoSenal::before { content: ""; position: absolute; inset: 6px 22px; background: var(--arena-cl); border: 1px solid #f0e2b6; border-radius: 12px; z-index: -1; }
/* «¿Primera visita?» como los botones .rd del HTML */
body.ev .coPrimera { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
body.ev .coPrimera .coYaPacienteTitulo { flex: 1 0 100%; font-size: 12.5px; font-weight: 800; color: var(--tinta); margin: 0; }
body.ev .coPrimeraOpc { flex: 1; position: relative; border: 1.5px solid var(--linea); border-radius: 11px; padding: 11px; text-align: center; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--texto); margin: 0; }
body.ev .coPrimeraOpc input { position: absolute; opacity: 0; pointer-events: none; }
body.ev .coPrimeraOpc:has(input:checked) { border-color: var(--marca); background: var(--marca-cl); color: var(--marca); }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > .coYaPaciente.coYaPaciente.coYaPaciente { max-width: 516px; margin: 12px auto !important; outline: 22px solid #fff; border: 1.5px solid var(--marca-bd) !important; border-radius: 15px !important; }
body.ev .coPrimeraOpc { display: flex; justify-content: center; align-items: center; }

/* P1511 (Enrique, iPhone): en el móvil la cabecera NO va pegada arriba (tapaba lo de arriba y el scroll iba a saltos,
   lo mismo que P972 en el resto del programa) y es más baja. Los pasos ya hechos se pueden pulsar para volver. */
@media (max-width: 760px) {
    .rcHeader { position: static; }
    .rcHin { padding: 10px 14px; gap: 10px; }
    .rcEm { width: 38px; height: 38px; }
    .rcLogoTx b { font-size: 16px; }
    .rcLogoTx span { font-size: 10px; letter-spacing: 1.2px; white-space: nowrap; }
    .rcIdiomas a { padding: 5px 8px; font-size: 12px; }
}
.pasos .ps[data-n] { cursor: pointer; }
.pasos .ps[data-n]:hover b, .pasos .ps[data-n]:focus-visible b { color: var(--marca); text-decoration: underline; }

/* P1512 / P1513 (Enrique, iPhone vertical, 18-10-2026) */
.rcPie a { color: var(--marca); font-weight: 700; text-decoration: none; }
.rcPie a:hover { text-decoration: underline; }
/* «Ya soy paciente»: Teléfono, DNI, Pasaporte (en la cita online nueva) */
@media (max-width: 760px) {
    /* (a) el subtítulo no queda debajo de la barra de pasos */
    body.rc .rcHero { padding-bottom: 92px; }
    body.rc .rcHero p { line-height: 1.4; }
    /* (b) el aviso amarillo de la reserva baja de línea en vez de salirse */
    body.rc .coSenal { flex: 0 1 auto; max-width: 100%; white-space: normal; border-radius: 12px; }
    /* (c) el botón «Elegir» a la izquierda */
    body.rc .coServicioAcciones { justify-content: flex-start; }
    /* (f) Escaparate: el campo de fecha del iPhone no se sale */
    body.ev .evCp { min-width: 0; flex: 1 1 100%; }
    body.ev .evCp input[type=date] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; min-height: 48px; }
    body.ev .evCp input[type=date]::-webkit-date-and-time-value { text-align: left; }
}
/* P1513: en pantallas táctiles nada se mueve al tocar (los «hover» con desplazamiento hacían saltar la página en el iPhone) */
@media (hover: none) {
    body.ev .evPro:hover, body.ev .evDia:hover, body.ev .evHr:hover, body.ev .evSv:hover, body.ev .evSv.activo,
    body.ev .evHueco:hover, body.ev .evHueco:hover .evFlb svg, body.rc .coElegir.rcBtn:hover, body.rc .coBoton:hover,
    body.rc .coTarjeta:hover, body.rc .coHora:hover { transform: none !important; }
    body.ev .evSello, body.ev .evRayo { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
body.ev .evHero, body.rc .rcHero { contain: paint; }
body.rc .coPanelEspCab .n { white-space: nowrap; }

/* P1514 (Enrique, móvil): precio con su servicio, y página «Ver perfil» con el estilo de la cita nueva */
body.ev .evPrecioRot { display: block; font-size: 12px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 2px; }
body.ev .esVistaPerfil > .evTit { display: none; }
body.ev .esPerfil { padding-top: 4px; }
body.ev .esPerfilVolver { background: #fff; color: var(--marca); font-weight: 700; padding: 8px 16px; border-radius: 999px; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(15,36,48,.12); }
body.ev .esPerfilCab, body.ev .esPerfilSec { border: 1px solid var(--linea); border-radius: 18px; box-shadow: 0 6px 20px rgba(15,36,48,.06); }
body.ev .esPerfilNombre { color: var(--tinta); font-weight: 800; letter-spacing: -.4px; }
body.ev .esPerfilEsp { display: inline-block; font-size: 13px; font-weight: 700; color: var(--marca); background: var(--marca-cl); border-radius: 7px; padding: 3px 10px; }
body.ev .esPerfilFoto { border-radius: 18px; background: linear-gradient(145deg, var(--marca-cl), color-mix(in srgb, var(--marca) 14%, #fff)); color: var(--marca); }
body.ev .esPerfilAgendar { border-radius: 12px; padding: 13px 22px; font-size: 15px; font-weight: 700; background: linear-gradient(135deg, var(--marca2), var(--marca)); color: #fff; box-shadow: 0 5px 16px rgba(11,97,119,.3); }
body.ev .esPerfilTabs { border: 1px solid var(--linea); box-shadow: none; }
body.ev .esPerfilTab.activa, body.ev .esPerfilTab:hover { color: var(--tinta); border-bottom-color: var(--marca2); }
body.ev .esPerfilSecTit { color: var(--tinta); font-weight: 800; }
body.ev .esPerfilDer { border: 1px solid var(--linea); border-radius: 18px; box-shadow: 0 10px 30px rgba(15,36,48,.07); }
body.ev .esPerfilReservaCab { background: linear-gradient(135deg, var(--marca), var(--marca2)); color: #fff; }
/* Servicios y precios: todas las filas igual (nombre arriba; precio a la izquierda y «Pedir cita» a la derecha) */
body.ev .esPerfilServ { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom nom" "pre bot"; gap: 8px 14px; align-items: center; }
body.ev .esPerfilServNom { grid-area: nom; }
body.ev .esPerfilServ > .esPrecio { grid-area: pre; min-width: 0; }
body.ev .esPerfilServ > .esCatBoton { grid-area: bot; justify-self: end; }
body.ev .esPerfilServ > .esPrecio .precio { font-size: 16px; font-weight: 800; color: var(--tinta); }
body.ev .esPerfilServ > .esPrecio .coSenal { display: block; font-size: 12.5px; color: var(--gris); margin-top: 2px; }
body.ev .esPerfilServ > .esPrecio .coSenal b { color: var(--marca); }
body.ev .esCatBoton { border: 1.5px solid var(--marca-bd); background: #fff; color: var(--marca); border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
body.ev .esCatBoton:hover { background: var(--marca-cl); }
@media (min-width: 761px) {
    body.ev .esPerfilServ { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "nom pre bot"; }
    body.ev .esPerfilServ > .esPrecio { text-align: right; }
}
@media (max-width: 900px) {
    /* en el móvil primero el médico y luego «Agendar cita» (el botón de la ficha baja hasta él) */
    body.ev .esPerfilDer { order: 0; }
    body.ev .esPerfilCab { padding: 20px 16px; gap: 14px; }
    body.ev .esPerfilFoto { flex: 0 0 110px; width: 110px; height: 110px; font-size: 32px; }
    body.ev .esPerfilNombre { font-size: 22px; }
    body.ev .esPerfilSec { padding: 18px 16px; }
    body.ev .esPerfilTabs { top: 0; }
}
/* P1512 (g): el recuadro «¿Ya eres paciente?» dentro de la ventana, con su margen, sin salirse en el móvil */
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > .coYaPaciente.coYaPaciente.coYaPaciente { width: calc(100% - 44px) !important; max-width: 516px; outline: 0; box-shadow: none !important; padding: 16px !important; position: relative; isolation: isolate; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > .coYaPaciente::before { content: ""; position: absolute; inset: -14px -24px; background: #fff; z-index: -2; }
body.ev:not(.estilo-alvuelo) .coPaso[data-paso="5"] > .coYaPaciente::after { content: ""; position: absolute; inset: -1.5px; background: var(--marca-sf); border: 1.5px solid var(--marca-bd); border-radius: 15px; z-index: -1; }