/* =====================================================================
   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; } }