/* Playfair Display (titulares del hero y el banner) autoalojada. Antes venía de Google Fonts, lo que encadenaba DOS conexiones a terceros antes de poder pintar el titular: fonts.googleapis.com (el CSS) y luego fonts.gstatic.com (el woff2), cada una con su DNS y su TLS. Como el

del hero es el elemento LCP y usa esta fuente, el repintado al llegar la fuente marcaba el LCP a los 6,3 s en móvil, frente a un FCP de 3,5 s. Sirviéndola desde el propio dominio es una sola petición, sin conexiones nuevas, y App.razor la precarga para que arranque al leer el . Solo los pesos que se usan: 500 redonda (.hero__titulo) e itálica (.hero__titulo-resaltado). Los subconjuntos latin-ext no se precargan: el unicode-range hace que el navegador solo los descargue si la página contiene esos caracteres. Las rutas son las literales (no @Assets), porque el precargado de App.razor debe pedir EXACTAMENTE la misma URL o se descargaría dos veces. */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/playfair-display-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/playfair-display-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; font-display: swap; src: url(/fonts/playfair-display-500-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; font-display: swap; src: url(/fonts/playfair-display-500-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } html, body { background-color: #eff2f6; min-height: 100%; margin: 0; } /* Blazor mueve el foco al

al cambiar de página (FocusOnNavigate) para los lectores de pantalla; marcarlo no aporta nada a quien navega con teclado. */ h1:focus { outline: none; } /* ── Foco de teclado ────────────────────────────────────────────────────────────── Quien navega con Tab necesita ver dónde está. :focus-visible solo se activa con el teclado: al hacer clic con el ratón no se pinta nada. Los componentes que tienen su propio halo (botones del sistema, campos...) lo mantienen; esto cubre todo lo demás con un borde teal en lugar del anillo por defecto del navegador. */ :focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; } /* Sobre fondo turquesa un borde teal no se vería: ahí va en blanco. */ .site-footer :focus-visible, .login-panel :focus-visible, .assistant-side :focus-visible, .professionals-hero :focus-visible, .professionals-differentiation :focus-visible, .banner-pro :focus-visible { outline-color: #fff; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } :root { /* Colores de marca — mismos valores que byclinics.com. Regla de uso: el coral es SOLO para la acción principal de cada pantalla (reservar, registrarse), y como mucho un botón coral a la vista. Todo lo secundario va en teal. Usar SIEMPRE estas variables en vez de escribir el hexadecimal a mano. */ --brand-cta: #f05838; /* acentos: iconos, bordes, puntos; nunca fondo con texto */ /* Fondo de botón coral con texto blanco. Mismo coral que byclinics.com, por coherencia de marca entre las dos webs. Ojo: con el blanco da 3,4:1 y no llega a AA para texto normal; si algún día se prioriza AA, #cf4423 da 4,7:1 y basta con cambiarlo aquí (todos los botones coral rellenos usan esta variable). */ --brand-cta-solid: #f05838; --brand-cta-hover: #df4c2e; /* hover de los botones coral (igual que byclinics.com) */ --brand-cta-strong: #c63d21; /* coral como texto sobre blanco (contraste AA) */ --brand-cta-soft: #fff2ee; /* fondos de aviso o badge en tono coral */ --brand-cta-line: #ffe2da; /* bordes sobre --brand-cta-soft */ --brand-cta-rgb: 240, 88, 56; /* para sombras y halos: rgba(var(--brand-cta-rgb), .3) */ --brand-cta-ring: rgba(240, 88, 56, .3); --brand-teal: #2f9ca2; --brand-teal-strong: #136f75; /* teal como texto de botón sobre blanco (AA) */ /* Teal para texto, enlaces e iconos. El teal de marca (#3F9EA4) da 3,2:1 sobre blanco y no llega a AA como texto; este da 5,1:1 sobre blanco y 4,5:1 sobre el fondo gris de página. El de marca sigue para fondos, bordes y botones. */ --brand-teal-text: #1a7a80; --brand-teal-soft: #e6f4f5; --brand-teal-soft-hover: #d3ecee; --brand-teal-line: #b9dfe3; --brand-teal-ring: rgba(47, 156, 162, .3); --brand-ink: #22314d; --brand-line: #e7ebef; --primary-bg: #3F9EA4; --secondary-bg: var(--brand-cta-solid); --color-primary: #3F9EA4; --bs-primary-rgb: 63, 158, 164; --bs-secondary-rgb: var(--brand-cta-rgb); --color-sf-btn-bgcolor: var(--brand-cta-solid); --color-sf-btn-color: white; --color-sf-btn-border-color: var(--brand-cta-solid); --color-sf-btn-hover-bgcolor: var(--brand-cta-hover); /* Tipografía — sistema unificado. Sans de sistema (sin descarga) para cuerpo/UI; Playfair (cargada en App.razor) solo para titulares de display (hero/banner). Usar SIEMPRE estas variables en vez de declarar fuentes a mano. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-display: "Playfair Display", Georgia, "Times New Roman", serif; /* Escala de titulares. Todo

va en --font-display a peso 500 (Playfair solo está cargada en 500: un 700 sale con negrita sintetizada) y usa uno de estos tres tamaños, según el papel de la página: display portada de sección: inicio, buscadores, especialidades, landings title título de página: fichas, especialidad, legales, contacto... title-sm título compacto: buscador con resultados, panel de usuario Los clamp() crecen con el ancho de pantalla, así que no hacen falta media queries para el móvil. */ --fs-display: clamp(2rem, 1.45rem + 2.2vw, 3rem); --fs-title: clamp(1.7rem, 1.45rem + 1vw, 2.3rem); --fs-title-sm: clamp(1.45rem, 1.3rem + .6vw, 1.85rem); --fs-section: clamp(1.35rem, 1.25rem + .45vw, 1.55rem); /* títulos de sección (h2) */ /* Radios y sombras. Tres radios con papel fijo, en vez de los ~60 valores que había: card tarjetas y paneles control botones, campos y tarjetas internas (una tarjeta dentro de otra) pill chips, insignias y botones redondos */ --radius-card: 1rem; --radius-control: .65rem; --radius-pill: 999px; --shadow-card: 0 10px 30px rgba(15, 23, 42, .04); /* tarjeta en reposo */ --shadow-raised: 0 6px 16px rgba(15, 23, 42, .08); /* hover o elemento que flota */ /* Alto de la cabecera (.site-header es sticky, top:0). Lo necesitan los elementos que se pegan por debajo de ella, como la barra de secciones de las fichas en móvil, para no quedar tapados. Valor de arranque: js/section-tabs.js lo sobrescribe con la altura real y la mantiene sincronizada. DEBE QUEDARSE CORTO. La cabecera mide ~63px en móvil (logo 46 + 16 de padding del navbar + 1 de borde). Si este valor se pasa, la barra de secciones se pega más abajo de la cuenta y deja un hueco por el que se ve pasar el contenido; si se queda corto, se solapa dos o tres píxeles con la cabecera y no se nota. Estaba en 5rem (80px) y ese era justo el hueco que se veía cuando el JS no llegaba a aplicar el valor real. */ --header-height: 3.75rem; } /* ══ Ancho máximo del sitio: 1250px, no los 1320 de Bootstrap ═════════════════ Bootstrap sube .container a 1320px a partir de 1400px de viewport. Aquí se baja a 1250 A PROPÓSITO, para dejar libres los laterales y que quepan carriles de anuncios verticales de 300x600 (media página), que es el formato vertical que mejor se paga. La cuenta: en una pantalla de 1920, (1920 - 1250) / 2 = 335px por lado, o sea el anuncio de 300 más 35 de aire. Con los 1320 de Bootstrap quedaban 300 justos y el anuncio habría ido pegado al borde. Los dos carriles caben a partir de ~1900px de viewport; por debajo no se pintan. Va aquí y no solo en las páginas de búsqueda para que la cabecera, el pie y el contenido queden ALINEADOS entre sí y los carriles pasen limpios de arriba abajo. Las páginas de búsqueda repiten este mismo 1250 en su propio max-width. Solo se toca el corte de 1400px: por debajo, los anchos de Bootstrap (1140 y menores) ya son más estrechos que 1250 y no hay nada que corregir. app.css se carga DESPUÉS de bootstrap.min.css (ver App.razor), así que gana sin !important. SI ALGÚN DÍA SE DESCARTAN LOS ANUNCIOS, esto puede volver a 1320. */ @media (min-width: 1400px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1250px; } } /* El CSS de bootstrap-icons se carga sin bloquear el render (ver App.razor), así que durante los primeros instantes los están vacíos y ocupan 0px. Sin esta reserva de espacio, al llegar el CSS los iconos aparecerían de golpe empujando el texto de al lado y el CLS (hoy 0) se rompería. 1em = el ancho nominal del glifo. SOLO min-width, NUNCA width + height. Se probó con caja fija de 1em x 1em y desalineó iconos por todo el sitio: el icono no es el , es su ::before, que bootstrap-icons pinta con line-height:1 y vertical-align:-.125em contando con apoyarse en la línea base del texto de al lado. Al convertir el en una caja cerrada de 1em de alto, ese ::before pasa a colocarse dentro de una línea cuya altura es el line-height HEREDADO (1.4, 1.5...), que no cabe en 1em y desborda por abajo; y en contenedores flex con align-items:center se centra la caja, no el dibujo. Sin height, la caja crece con su propia línea y el glifo vuelve a caer donde debe. */ .bi { display: inline-block; min-width: 1em; } /* Título de página genérico (legales, contacto...) para las páginas que no tienen cabecera propia. Las que la tienen usan su clase con los mismos tokens. La página que lo use debe declarar en su para que el titular no parpadee al llegar la fuente. */ .page-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-title); line-height: 1.2; color: var(--brand-ink); text-wrap: balance; } /* ── Fichas de especialista y centro (.center-page) ───────────────────────────── Piezas comunes a todas las secciones de las dos fichas. Vivían copiadas en el CSS aislado de cada sección (hasta 20 copias de .center-card), porque el CSS aislado de Blazor no cruza de un componente a otro. Ahora están aquí una sola vez, acotadas a .center-page para no tocar otras clases con el mismo nombre (CenterCard de los resultados usa también .center-card). Cada sección solo define lo suyo; si necesita otro margen bajo el título, lo pone en su propio CSS y gana por ir después. */ .center-page .center-card { background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .center-page .center-section-title { font-size: var(--fs-section); font-weight: 500; color: var(--brand-ink); line-height: 1.2; } .center-page .center-section-subtitle { color: #6b7684; font-size: .95rem; margin-bottom: 0; line-height: 1.6; } .center-page .center-text { color: #5f6b7a; line-height: 1.8; font-size: .98rem; } .center-page .center-inline-link { font-weight: 600; color: var(--brand-teal-text); font-size: .92rem; } @media (max-width: 767.98px) { .center-page .center-text { font-size: .95rem; } } /* ── Pantallas de acceso (.login-page) ───────────────────────────────────────── Login, registro de paciente, recuperar y restablecer contraseña y alta de profesional/empresa comparten este diseño. Antes había dos mezclados (campos de 30px y botón de 40px en unas; campos de 46px, logo de 72px y botón con sombra coral en otras), repetidos en el CSS aislado de cada página con 140 !important peleando con Syncfusion. Al ser CSS global llega a los SfTextBox/SfDropDownList/SfButton sin ::deep, y por especificidad (.login-page delante) gana al tema de Syncfusion sin !important. Cada página solo conserva lo suyo (stepper, beneficios, avisos...). */ .login-page { min-height: 100vh; padding: 2rem 1rem; background: url("/img/new-login-register.webp") center top / cover no-repeat; background-attachment: fixed; } .login-page .login-container { position: relative; width: min(860px, 100%); background: #fff; border-radius: var(--radius-card); box-shadow: 0 26px 70px rgba(15, 23, 42, .18); overflow: hidden; animation: login-card-in .5s ease-out both; } .login-page .login-container--register { width: min(1000px, 100%); } @keyframes login-card-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Panel turquesa con el logo y el enlace a la otra pantalla (login ⇄ registro). */ .login-page .login-panel { background: linear-gradient(145deg, #357f86 0%, #2c6f75 100%); color: #fff; } .login-page .login-panel p { color: rgba(255, 255, 255, .85); line-height: 1.55; } .login-page .login-panel .btn-outline-light { min-width: 175px; border-color: rgba(255, 255, 255, .75); border-radius: var(--radius-control); font-weight: 600; } .login-page .login-panel .btn-outline-light:hover { background: #fff; border-color: #fff; color: #236f76; } /* Titular y subtítulo del formulario. */ .login-page .login-form__title { color: var(--brand-ink); font-family: var(--font-display); font-size: var(--fs-title-sm); font-weight: 500; line-height: 1.15; letter-spacing: .01em; } .login-page .login-form__title + p { color: #5f6b7a !important; /* gana al .text-muted de Bootstrap, que lleva !important */ font-size: .95rem; } .login-page .form-label { margin-bottom: .4rem; color: #1f2937; } /* Campos: 46px de alto en los tres tipos que se usan aquí (input de Bootstrap, SfTextBox y SfDropDownList). 30px se quedaba corto para rellenar un formulario, sobre todo en el móvil. */ .login-page .form-control, .login-page .form-select, .login-page .e-input-group, .login-page .e-input-group.e-control-wrapper { min-height: 46px; border: 1px solid #d7dde5; border-radius: .5rem; background-color: #fff; color: #1f2937; font-size: .98rem; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } .login-page .e-input-group input.e-input { min-height: 44px; padding: 0 .85rem; font-size: .98rem; } .login-page .form-control::placeholder, .login-page .e-input-group input.e-input::placeholder { color: #6b7684; } .login-page .form-control:focus, .login-page .form-select:focus, .login-page .e-input-group:focus-within, .login-page .e-input-group.e-input-focus { border-color: var(--brand-teal); box-shadow: 0 0 0 3px var(--brand-teal-ring); } /* El ojo de mostrar contraseña va al lado del campo y tiene su misma altura. */ .login-page .d-flex > .btn-outline-secondary { min-height: 46px; border-radius: .5rem; } /* Botón principal (Entrar, Crear cuenta, Continuar, Enviar código...): el coral del sistema de botones, 52px en todas las pantallas. Sirve igual para