/* ═══════════════════════════════════════════════════════════════════════ TU SALUD CERCA · ESTILOS (móvil primero) El sistema completo está en docs/DESIGN_SALUD.md. Reglas de la hoja: · TODOS los colores salen de los tokens de este bloque (:root y los temas). Ningún componente escribe un color a mano. La única excepción es el punto de categoría, cuyo color viene de los DATOS (catálogo) y va como estilo en línea SOLO en ese punto (ui.js, `punto`). · Dos temas, los dos con la paleta teal de Tu Salud Cerca (--salud-50… 950; nada de gris neutro): claro sobre --salud-50 y oscuro sobre --salud-950. La barra superior y el pie son siempre oscuros: remapean los tokens (bloque `.barra, .pie`). Por defecto manda `prefers-color-scheme`; si la persona elige, main.js pone `data-theme` en (tema.js) y eso gana. · Controles de 36–48 px (--control*) con puntero fino; en pantallas táctiles o angostas los mismos tokens suben a 44 px. · Sistema (UI/UX Bloque 1): tokens semánticos (--primary, --surface, --text…), escala --fs-*, espaciado --sp-*, botones .btn + .btn-primary|secondary|ghost|danger. Ver DESIGN_SALUD.md §2–§5, §10, §11. · El panel «Ver mejor la página» (accesibilidad.js) pone clases en : z70…z175 (zoom), f-* (visión del color), fuente-legible, espaciado, contraste, enlaces, sinmov. Sus efectos están al final. ═══════════════════════════════════════════════════════════════════════ */ /* ── Tokens · tema claro (por defecto) ─────────────────────────────────── Ratios AA medidos (WCAG 2.x, docs/DESIGN_SALUD.md § Contraste): --texto #0C4E4C sobre --fondo 9,05 · --fondo-alt 7,72 · tarjeta 9,37 --texto-2 #2E6664 sobre --fondo 6,25 · --fondo-alt 5,33 · tarjeta 6,47 --texto-3 #436E6C sobre --fondo 5,43 · --fondo-alt 4,63 · tarjeta 5,62 --acento-texto #0F7471 sobre --fondo 5,32 · --fondo-alt 4,54 · tarjeta 5,51 botón --salud-500 con --texto-inv (--salud-950): 5,02 (con blanco daría 3,28: NO pasa para texto normal, por eso el texto del botón es oscuro) --salud-500 sobre --fondo 3,12: SOLO texto grande (≥ 24 px), p. ej. el resaltado del título de la portada. Etiquetas mono y enlaces (texto chico) usan --acento-texto, el mismo tono un paso más oscuro. barra y pie (--salud-900): texto 9,05 · texto-2 7,72 · texto-3 6,15 · acento 5,24 */ :root { color-scheme: light; /* primitivos de la paleta de Tu Salud Cerca */ --salud-50: #F3FBFB; --salud-100: #CDEEEE; --salud-200: #A9D9D6; --salud-300: #6FD0CC; --salud-500: #1A9E9B; --salud-700: #0F7471; --salud-900: #0C4E4C; --salud-950: #0A2322; /* superficies: página, secciones alternas / filtros y tarjetas. La tarjeta es blanco teñido: 92 % blanco + 8 % --salud-100 (hex calculado). */ --fondo: var(--salud-50); --fondo-alt: var(--salud-100); --fondo-2: #E8F6F6; --superficie: #FBFEFE; --superficie-2: #E2F5F4; --superficie-3: #B9E4E3; /* nivel ELEVADO (tanda 3): diálogos, menú, desplegables, popups y toasts; un paso por encima de la tarjeta (en claro, el blanco puro: más luz, nunca gris) */ --superficie-elevada: #FFFFFF; /* bordes: decorativo (--salud-300 al 40 %), fuerte y de control (≥ 3:1: 3,70) */ --borde: rgba(111, 208, 204, 0.4); --borde-fuerte: #9CCFCD; --borde-control: #5E8C8A; --borde-acento: var(--salud-500); /* texto: títulos y cuerpo --salud-900; secundarios en teal desaturado */ --texto: var(--salud-900); --texto-2: #2E6664; --texto-3: #436E6C; --texto-inv: var(--salud-950); /* acento: botones sólidos --salud-500 con --texto-inv encima (5,02:1) */ --acento: var(--salud-500); --acento-hover: #2BB3AF; --acento-activo: var(--salud-300); --acento-texto: var(--salud-700); --acento-grande: var(--salud-500); --acento-suave: #E2F5F4; --acento-linea: var(--salud-300); --invertido: var(--salud-900); --invertido-texto: var(--salud-50); /* barra superior y pie: --salud-900 con texto claro */ --barra-fondo: var(--salud-900); --barra-texto: var(--salud-50); --barra-texto-2: var(--salud-100); --barra-texto-3: var(--salud-200); --barra-acento: var(--salud-300); --barra-borde: rgba(205, 238, 238, 0.2); --barra-borde-fuerte: rgba(205, 238, 238, 0.36); --barra-superficie: rgba(243, 251, 251, 0.08); --barra-superficie-2: rgba(243, 251, 251, 0.16); /* estados */ --foco: var(--salud-900); --error: #A4262C; --error-suave: #FDECEC; --error-borde: #E3A3A6; --ok: #1B6B3A; --ok-suave: #E4F5EA; --cuidado: #8A5300; --cuidado-suave: #FDF3E1; --cuidado-borde: #E2BE7C; --si: var(--salud-700); --no: #A4262C; --velo: rgba(10, 35, 34, 0.55); --seleccion: rgba(26, 158, 155, 0.25); /* mapa y marca */ --pin-borde: var(--salud-900); --pin-activo: var(--salud-500); /* pin de centro del directorio (Bloque 3): relleno = color de la categoría (--cat-v); ícono y halo contrastan ≥ 3:1 con ese relleno y el contorno ≥ 3:1 con las teselas del tema (DESIGN_SALUD.md § Mapa) */ --pin-icono: #FFFFFF; --pin-halo: #FFFFFF; --pin-contorno: #0C4E4C; --logo-a: #2FBCA9; --logo-b: #12988A; --logo-figura: #FFFFFF; /* elevación teñida de --salud-900 (nada de negro neutro). DOS niveles, muy sutiles (tanda 3): --sombra-1 = apoyado (buscador, campos, controles del mapa, pin); --sombra-2 = flotando (tarjeta al pasar, menú, desplegables, diálogos, paneles, toasts). La jerarquía la da sobre todo el color de la superficie (--superficie → --superficie-elevada), no la sombra. */ --sombra-1: 0 1px 2px rgba(12, 78, 76, 0.06), 0 1px 1px rgba(12, 78, 76, 0.04); --sombra-2: 0 12px 32px -16px rgba(12, 78, 76, 0.28), 0 2px 6px -2px rgba(12, 78, 76, 0.08); /* tipografía (autoalojada: %%FONTS%%/fonts.css) */ --f-titulo: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* Escala tipográfica ÚNICA (Bloque 1 de UI/UX). Móvil → escritorio con clamp(): en 390 px toma el mínimo y en 1366 px el máximo o casi. Nadie escribe un font-size suelto: se usa uno de estos pasos. */ --fs-xs: 0.8125rem; /* 13 · pequeño: metadatos, pistas, etiquetas mono */ --fs-sm: 0.875rem; /* 14 · pequeño: botones, navegación, secundario */ --fs-body: 1rem; /* 16 · cuerpo y campos */ --fs-lead: 1.125rem; /* 18 · bajadas bajo un título */ --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18–20 · título de componente (tarjeta, panel) */ --fs-h3: clamp(1.375rem, 1.2rem + 0.55vw, 1.75rem); /* 22–28 · h3; h2 dentro de tarjeta o diálogo */ --fs-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); /* 28–40 · h2 de sección */ --fs-h1: clamp(2.25rem, 1.3rem + 3.2vw, 3.75rem); /* 36–60 · h1 de página (48–60 en escritorio) */ --lh-titulo: 1.1; --lh-sub: 1.25; --lh-cuerpo: 1.6; /* Escala de espaciado: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* radios: --r-xs detalles (anillo de foco, celdas, enlaces de acción), --r-sm controles (botones, campos, chips de hora), --r-md tarjetas, --r-lg paneles y diálogos, --r-pill píldoras e insignias */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; /* margen lateral de la página (20 px; 16 px ≤ 480 px, abajo): nunca menos de 16 */ --gutter: 20px; /* la barra fija de «Solicitar cita» de la ficha en móvil (tanda 3): su alto, que la página reserva abajo */ --cta-fija-alto: calc(var(--control-grande) + 2 * var(--sp-3)); /* cuánto sube la barra superior al compactarse (sticky con top negativo: sin salto de contenido) */ --barra-compacta: 8px; /* alto de controles: fino (escritorio) → 44 px en táctil o angosto (abajo) */ --control: 40px; --control-chico: 36px; --control-grande: 48px; /* alto de los campos de formulario (UI/UX Bloque 5): 44 px; 48 en táctil */ --campo: 44px; --barra-alto: 60px; --ancho: 1200px; /* movimiento: 150–250 ms, nombrando propiedades (nunca `all`) */ --ease: cubic-bezier(.2, .6, .35, 1); --ease-out: cubic-bezier(.23, 1, .32, 1); --dur-rapido: 160ms; --dur-medio: 220ms; --a11y-zoom: 1; } /* ── Tokens · tema oscuro «dim» (tanda TSC, 2026-09-27) ────────────────── Base gris azulada (estilo dim, NADA negro puro): --fondo; superficies un poco más claras (--superficie, --superficie-elevada, --superficie-2, --superficie-3), bordes --borde, texto --texto y secundario --texto-2. Los acentos siguen siendo la teal de la marca. Dos veces el mismo bloque: una para quien no eligió y tiene el sistema en oscuro, otra para quien eligió oscuro. Ratios medidos (WCAG 2.x; AA = 4,5 texto, 3 controles): texto sobre fondo 13,54 · superficie 12,48 · superficie-2 11,08 texto-2 sobre fondo 5,60 · superficie 5,16 · elevada 4,77 · superficie-2 4,58 texto-3 sobre fondo 6,65 · superficie-2 5,44 · superficie-3 4,51 acento-texto sobre fondo 9,09 · superficie-2 7,44 botón (--acento) con --texto-inv 5,03 · borde de control 3,37–4,12 error 6,37–7,79 · ok 8,48–10,36 · cuidado 8,35–10,20 (fondo…superficie-2) (valores en docs/DESIGN_SALUD.md § Contraste) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --fondo: #15202B; --fondo-alt: #192734; --fondo-2: #192734; --superficie: #192734; --superficie-2: #22303C; --superficie-3: #2C3D4C; --superficie-elevada: #1E2D3B; --borde: #38444D; --borde-fuerte: #4A5864; --borde-control: #72818D; --borde-acento: #1A9E9B; --texto: #E7E9EA; --texto-2: #8B98A5; --texto-3: #9AA6B2; --texto-inv: #15202B; --acento: #1A9E9B; --acento-hover: #2BB3AF; --acento-activo: #6FD0CC; --acento-texto: #6FD0CC; --acento-grande: #6FD0CC; --acento-suave: rgba(111, 208, 204, 0.1); --acento-linea: rgba(111, 208, 204, 0.32); --invertido: #E7E9EA; --invertido-texto: #15202B; --barra-fondo: #15202B; --barra-texto: #E7E9EA; --barra-texto-2: #8B98A5; --barra-texto-3: #9AA6B2; --barra-acento: #6FD0CC; --barra-borde: #38444D; --barra-borde-fuerte: #4A5864; --barra-superficie: #192734; --barra-superficie-2: #22303C; --foco: #6FD0CC; --error: #FF9494; --error-suave: rgba(255, 148, 148, 0.1); --error-borde: rgba(255, 148, 148, 0.4); --ok: #7FE0B0; --ok-suave: rgba(127, 224, 176, 0.1); --cuidado: #F5C46B; --cuidado-suave: rgba(245, 196, 107, 0.1); --cuidado-borde: rgba(245, 196, 107, 0.4); --si: #6FD0CC; --no: #FF9494; --velo: rgba(12, 18, 24, 0.7); --seleccion: rgba(111, 208, 204, 0.3); --pin-borde: #15202B; --pin-activo: #6FD0CC; --pin-icono: #15202B; --pin-halo: #15202B; --pin-contorno: #E7E9EA; --sombra-1: 0 1px 2px rgba(10, 16, 22, 0.45); --sombra-2: 0 14px 34px -16px rgba(10, 16, 22, 0.7), 0 2px 6px -2px rgba(10, 16, 22, 0.35); } } :root[data-theme="dark"] { color-scheme: dark; --fondo: #15202B; --fondo-alt: #192734; --fondo-2: #192734; --superficie: #192734; --superficie-2: #22303C; --superficie-3: #2C3D4C; --superficie-elevada: #1E2D3B; --borde: #38444D; --borde-fuerte: #4A5864; --borde-control: #72818D; --borde-acento: #1A9E9B; --texto: #E7E9EA; --texto-2: #8B98A5; --texto-3: #9AA6B2; --texto-inv: #15202B; --acento: #1A9E9B; --acento-hover: #2BB3AF; --acento-activo: #6FD0CC; --acento-texto: #6FD0CC; --acento-grande: #6FD0CC; --acento-suave: rgba(111, 208, 204, 0.1); --acento-linea: rgba(111, 208, 204, 0.32); --invertido: #E7E9EA; --invertido-texto: #15202B; --barra-fondo: #15202B; --barra-texto: #E7E9EA; --barra-texto-2: #8B98A5; --barra-texto-3: #9AA6B2; --barra-acento: #6FD0CC; --barra-borde: #38444D; --barra-borde-fuerte: #4A5864; --barra-superficie: #192734; --barra-superficie-2: #22303C; --foco: #6FD0CC; --error: #FF9494; --error-suave: rgba(255, 148, 148, 0.1); --error-borde: rgba(255, 148, 148, 0.4); --ok: #7FE0B0; --ok-suave: rgba(127, 224, 176, 0.1); --cuidado: #F5C46B; --cuidado-suave: rgba(245, 196, 107, 0.1); --cuidado-borde: rgba(245, 196, 107, 0.4); --si: #6FD0CC; --no: #FF9494; --velo: rgba(12, 18, 24, 0.7); --seleccion: rgba(111, 208, 204, 0.3); --pin-borde: #15202B; --pin-activo: #6FD0CC; --pin-icono: #15202B; --pin-halo: #15202B; --pin-contorno: #E7E9EA; --sombra-1: 0 1px 2px rgba(10, 16, 22, 0.45); --sombra-2: 0 14px 34px -16px rgba(10, 16, 22, 0.7), 0 2px 6px -2px rgba(10, 16, 22, 0.35); } /* ── Tokens · «Contraste reforzado» (panel de accesibilidad) ─────────── */ :root.contraste:not([data-theme="dark"]) { --fondo: #FFFFFF; --fondo-alt: #E6F4F4; --fondo-2: #FFFFFF; --superficie: #FFFFFF; --superficie-2: #E6F4F4; --superficie-elevada: #FFFFFF; --borde: #0C4E4C; --borde-fuerte: #031716; --borde-control: #031716; --borde-acento: #031716; --texto: #031716; --texto-2: #0B2B2A; --texto-3: #0B2B2A; --acento-texto: #083B3A; --cuidado: #6B4000; --pin-contorno: #031716; } :root.contraste[data-theme="dark"] { --texto: #FFFFFF; --texto-2: #E7E9EA; --texto-3: #CBD2D8; --fondo: #111A23; --fondo-alt: #15202B; --fondo-2: #15202B; --superficie: #15202B; --superficie-2: #192734; --superficie-3: #22303C; --superficie-elevada: #192734; --borde: rgba(231, 233, 234, 0.3); --borde-fuerte: rgba(231, 233, 234, 0.48); --borde-control: rgba(231, 233, 234, 0.6); --borde-acento: rgba(111, 208, 204, 0.7); --acento: #2BB3AF; --acento-texto: #A9ECE9; --cuidado: #FFD58A; --pin-contorno: #FFFFFF; } /* Barra superior y pie: el mismo sistema, con los tokens remapeados al fondo oscuro (--salud-900 en claro, casi negro teal en oscuro). Todo lo que va adentro (logo, enlaces, botones, íconos, foco) sigue usando los tokens de siempre y queda legible sin reglas propias. */ .barra, .pie { --fondo: var(--barra-fondo); --fondo-2: var(--barra-fondo); --texto: var(--barra-texto); --texto-2: var(--barra-texto-2); --texto-3: var(--barra-texto-3); --acento-texto: var(--barra-acento); --acento-linea: var(--barra-borde-fuerte); --borde: var(--barra-borde); --borde-fuerte: var(--barra-borde-fuerte); --borde-acento: var(--barra-acento); --superficie: var(--barra-superficie); --superficie-2: var(--barra-superficie-2); --superficie-3: var(--barra-superficie-2); --foco: var(--barra-acento); color: var(--texto); } /* ── Tokens semánticos (Bloque 1 de UI/UX) ────────────────────────────── Nombres de función, ALIAS de los tokens de arriba: el tema, el «Contraste reforzado» y la barra/pie siguen cambiando un solo bloque. Se declaran también en .barra y .pie para que se recalculen con los tokens remapeados (una variable con var() se resuelve donde se declara). Código nuevo: use estos nombres. */ :root, .barra, .pie { --background: var(--fondo); --background-alt: var(--fondo-alt); --surface: var(--superficie); --surface-2: var(--superficie-2); --surface-3: var(--superficie-3); --surface-elevated: var(--superficie-elevada); --border: var(--borde); --border-strong: var(--borde-fuerte); --border-control: var(--borde-control); --text: var(--texto); --muted: var(--texto-2); --subtle: var(--texto-3); --link: var(--acento-texto); --primary: var(--acento); --primary-hover: var(--acento-hover); --primary-active: var(--acento-activo); --on-primary: var(--texto-inv); --primary-soft: var(--acento-suave); --focus: var(--foco); --success: var(--ok); --success-bg: var(--ok-suave); --warning: var(--cuidado); --warning-bg: var(--cuidado-suave); --warning-border: var(--cuidado-borde); --error-bg: var(--error-suave); --error-border: var(--error-borde); /* (--error ya es semántico: mismo nombre) */ } /* Táctil o angosto: los controles suben a 44 px (DESIGN_SYSTEM.md). */ @media (pointer: coarse), (max-width: 640px) { :root { --control: 44px; --control-chico: 44px; --control-grande: 48px; --campo: 48px; } } @media (max-width: 480px) { :root { --gutter: var(--sp-4); } } /* ── Base ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--fondo); scroll-padding-top: calc(var(--barra-alto) + 16px); } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--f-cuerpo); font-size: var(--fs-body); line-height: var(--lh-cuerpo); color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: var(--seleccion); } body.con-dialogo, body.con-mapa { overflow: hidden; } main { flex: 1; width: 100%; } main:focus { outline: none; } ::selection { background: var(--seleccion); color: var(--texto); } /* Jerarquía: h1 (uno por página) → h2 (secciones) → h3 → h4. El tamaño sale de la escala; dentro de una tarjeta, un diálogo o una columna angosta el título baja UN paso visual (p. ej. un h2 de tarjeta usa --fs-h3), sin saltarse niveles en el HTML. */ h1, h2, h3, h4 { color: var(--texto); line-height: var(--lh-sub); margin: 0 0 var(--sp-2); font-family: var(--f-titulo); font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: var(--fs-h1); font-weight: 400; line-height: var(--lh-titulo); letter-spacing: -0.035em; margin-bottom: var(--sp-3); } h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.03em; } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } .pagina-angosta h1, .mini-card h1, .ficha-cabeza h1 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.03em; } p { margin: 0 0 var(--sp-3); } img { max-width: 100%; } /* Enlaces en el acento (--salud-700 en claro: --salud-500 no llega a 4,5:1 en texto chico). */ a { color: var(--acento-texto); text-decoration: underline; text-decoration-color: var(--acento-linea); text-underline-offset: 0.2em; } a:hover { color: var(--texto); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: var(--r-xs); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .saltar { position: fixed; left: var(--gutter); top: -100px; z-index: 4000; padding: var(--sp-3) var(--sp-4); background: var(--acento); color: var(--texto-inv); font-weight: 600; border-radius: var(--r-sm); text-decoration: none; transition: top var(--dur-medio) var(--ease-out); } .saltar:focus { top: 12px; } .sutil { color: var(--texto-2); font-size: var(--fs-sm); } .bajada { font-size: var(--fs-lead); color: var(--texto-2); max-width: 60ch; line-height: 1.6; } .num { font-variant-numeric: tabular-nums; } .contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); } /* Encabezado de sección: etiqueta mono chica + título grande. */ .eye { display: block; font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento-texto); margin: 0 0 var(--sp-3); } .titulo-sec { font-family: var(--f-titulo); font-weight: 400; font-size: var(--fs-h2); letter-spacing: -0.032em; line-height: 1.12; margin: 0 0 var(--sp-4); max-width: 24ch; } .titulo-portada { font-family: var(--f-titulo); font-weight: 400; font-size: var(--fs-h1); letter-spacing: -0.035em; line-height: 1.06; margin: 0 0 var(--sp-3); max-width: 22ch; } /* Palabras resaltadas del título: --salud-500 (3,12:1, válido solo en texto grande ≥ 24 px). */ .resalte { color: var(--acento-grande); } /* ── Logotipo (isotipo de Ayudate + la palabra) ───────────────────────── */ .logo { display: inline-flex; align-items: baseline; gap: 0.256em; font-family: var(--f-titulo); font-weight: 600; font-size: var(--fs-lead); letter-spacing: -0.01em; color: var(--texto); text-decoration: none; flex: 0 0 auto; } .logo:hover { color: var(--texto); } .logo .iso { flex: 0 0 auto; height: 1.1em; width: auto; display: block; transform: translateY(0.195em); } .logo .marca-sub { color: var(--acento-texto); font-weight: 500; } .iso-a { stop-color: var(--logo-a); } .iso-b { stop-color: var(--logo-b); } .iso-figura { fill: var(--logo-figura); stroke: var(--logo-figura); } @media (hover: hover) and (pointer: fine) { a.logo { transition: opacity var(--dur-rapido) var(--ease); } a.logo:hover { opacity: 0.78; } } /* ── Barra superior ─────────────────────────────────────────────────── */ /* Barra fija arriba que se COMPACTA al desplazarse (tanda 3) sin salto de contenido: su alto en el flujo no cambia nunca (60 px). Es sticky con top NEGATIVO (--barra-compacta, 8 px): al bajar, esos px quedan fuera de la pantalla y la barra se ve de 52; con .compacta (main.js) lo de adentro se recentra con transform (no mueve nada) y aparece la sombra. */ .barra { position: sticky; top: 0; z-index: 1000; background: var(--fondo); border-bottom: 1px solid var(--borde); transition: box-shadow var(--dur-medio) var(--ease); } .barra-in { transition: transform var(--dur-medio) var(--ease-out); } .barra-sitio { top: calc(-1 * var(--barra-compacta)); } .barra-sitio.compacta { box-shadow: var(--sombra-2); } .barra-sitio.compacta .barra-in { transform: translateY(calc(var(--barra-compacta) / 2)); } .barra-sitio.compacta ~ .nav-m, .barra-sitio.compacta ~ .nav-m-velo { top: calc(var(--barra-alto) - var(--barra-compacta)); } .barra-in { display: flex; align-items: center; gap: var(--sp-4); height: var(--barra-alto); } .nav-l { display: none; gap: 2px; font-size: var(--fs-sm); font-weight: 450; min-width: 0; list-style: none; margin: 0; padding: 0; } .nav-l a { display: inline-flex; align-items: center; min-height: var(--control-chico); padding: 0 var(--sp-3); border-radius: var(--r-sm); color: var(--texto-2); text-decoration: none; white-space: nowrap; touch-action: manipulation; transition: color var(--dur-rapido) var(--ease), background-color var(--dur-rapido) var(--ease); } .nav-l a:hover { color: var(--texto); background: var(--superficie-2); } .nav-l a[aria-current="page"] { color: var(--texto); background: var(--superficie-2); } .barra-acc { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; } .barra-acc .btn, .nav-m .btn { min-height: var(--control); white-space: nowrap; } .barra-cuenta { display: none; gap: var(--sp-2); } /* Tema y menú: .btn.btn-secondary.btn-icon (sistema de botones) + este gancho. */ .icono-barra[aria-expanded="true"] { --btn-bg: var(--surface-2); --btn-borde: var(--borde-acento); } [data-tema] .tema-sol { display: none; } :root[data-theme="dark"] [data-tema] .tema-sol { display: block; } :root[data-theme="dark"] [data-tema] .tema-luna { display: none; } /* Barra de la plataforma (UI/UX Bloque 2): logotipo a la izquierda, la navegación al centro y, a la derecha, tema · «Iniciar sesión» (ghost) · «Registrar mi centro» (secondary) · «Buscar un centro» (primary: la acción del paciente, la única sólida y SIEMPRE visible). < 640 px logotipo · Buscar un centro · menú (tema, navegación y cuentas van al menú); 640–1099 px + tema en la barra; ≥ 1100 px todo en la barra, sin menú. Por debajo de 480 px el botón dice «Buscar» (el nombre accesible sigue siendo «Buscar un centro»: el resto va en .barra-buscar-mas, fuera de vista); con ≤ 400 px, solo el ícono (más abajo, junto a .barra-a11y). Bloque 7: entre 401 y 446 px el texto entero desbordaba la barra hasta 42 px. */ .barra-sitio .barra-in { gap: var(--sp-3); } .barra-sitio .barra-nav { display: none; } .barra-sitio .barra-tema { display: none; } .barra-buscar { padding: 0 var(--sp-3); } .nav-m-tema { gap: var(--sp-2); } .nav-m-tema .ic { width: 20px; height: 20px; flex: none; } @media (max-width: 479.98px) { .barra-buscar-mas { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (max-width: 400px) { .barra-sitio .barra-in { gap: var(--sp-2); } } @media (min-width: 640px) { .barra-sitio .barra-tema { display: inline-flex; } .nav-m .nav-m-tema { display: none; } .barra-buscar { padding: 0 var(--sp-4); } } @media (min-width: 1100px) { .barra-sitio .barra-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; } .barra-sitio .barra-nav { display: flex; justify-content: center; min-width: 0; } .barra-sitio .nav-l { display: flex; } .barra-sitio .barra-acc { margin-left: 0; } .barra-sitio .barra-cuenta { display: flex; } .barra-sitio .hamburguesa, .nav-m, .nav-m-velo { display: none; } } /* Idioma (ES / EN): un par de botones con el activo marcado (aria-pressed). En la barra desde 640 px (junto al tema); por debajo, en el menú, con el nombre completo. La misma URL: cambia la cookie y recarga (selector-idioma.js). */ .idioma-sel { display: inline-flex; align-items: stretch; gap: 2px; padding: 2px; flex: none; border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); background: var(--superficie); } .idioma-op { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: calc(var(--control) - 6px); padding: 0 var(--sp-2); border: 0; border-radius: calc(var(--r-sm) - 2px); background: transparent; color: var(--texto-2); font: inherit; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; cursor: pointer; touch-action: manipulation; transition: background-color var(--dur-rapido) var(--ease), color var(--dur-rapido) var(--ease); } .idioma-op:hover { color: var(--texto); background: var(--superficie-2); } .idioma-op[aria-pressed="true"] { background: var(--superficie-2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borde-acento); cursor: default; } .idioma-op:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .barra-sitio .barra-idioma { display: none; } .nav-m-idioma { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; border-bottom: 1px solid var(--borde); } .nav-m-idioma-t { color: var(--texto-2); font-size: var(--fs-body); } .nav-m-idioma .idioma-op { min-height: 40px; padding: 0 var(--sp-3); font-weight: 500; } /* Táctil: cada opción y el logotipo de la barra, con 44 px de área (tanda 3). */ @media (pointer: coarse), (max-width: 640px) { .idioma-op { min-height: 44px; min-width: 44px; } .barra a.logo { padding-block: var(--sp-3); } .fchip.burbuja { min-height: 44px; } .campo-pass .pass-toggle { width: 44px; height: 44px; right: 2px; } .contacto li a { display: inline-flex; align-items: center; min-height: 44px; } } @media (min-width: 640px) { .barra-sitio .barra-idioma { display: inline-flex; } .nav-m .nav-m-idioma { display: none; } } /* Menú móvil: se despliega desde la barra (se queda montado para animar la salida). */ .nav-m { position: fixed; top: var(--barra-alto); right: var(--gutter); z-index: 999; width: min(calc(100vw - 2 * var(--gutter)), 300px); background: var(--superficie-elevada); border: 1px solid var(--borde-fuerte); border-radius: var(--r-md); max-height: calc(100dvh - var(--barra-alto) - 24px); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--sombra-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-medio) var(--ease-out), transform var(--dur-medio) var(--ease-out), visibility 0s linear var(--dur-medio); } .nav-m.abierto { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-medio) var(--ease-out), transform var(--dur-medio) var(--ease-out), visibility 0s linear 0s; } .nav-m-in { display: flex; flex-direction: column; padding: var(--sp-1) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); } .nav-m ul { list-style: none; margin: 0; padding: 0; } .nav-m a:not(.btn), .nav-m .enlace-menu { display: flex; align-items: center; width: 100%; min-height: 48px; font: inherit; font-size: var(--fs-body); font-weight: 450; text-decoration: none; color: var(--texto-2); border: 0; border-bottom: 1px solid var(--borde); background: none; padding: 0; text-align: left; cursor: pointer; } .nav-m a:not(.btn):hover, .nav-m .enlace-menu:hover { color: var(--texto); } .nav-m a[aria-current="page"] { color: var(--acento-texto); } .nav-m-cuenta { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); } .nav-m-velo { position: fixed; top: var(--barra-alto); left: 0; right: 0; bottom: 0; z-index: 998; background: var(--velo); opacity: 0; visibility: hidden; transition: opacity var(--dur-medio) var(--ease-out), visibility 0s linear var(--dur-medio); } .nav-m-velo.abierto { opacity: 1; visibility: visible; transition: opacity var(--dur-medio) var(--ease-out), visibility 0s linear 0s; } @media (min-width: 1024px) { .nav-l { display: flex; } } @media (max-width: 400px) { .logo { font-size: var(--fs-body); } .barra-in { gap: var(--sp-2); } } /* ── Botones (sistema, Bloque 1 de UI/UX) ────────────────────────────── UNA familia: `.btn` + variante + (opcional) tamaño. Variantes: .btn-primary sólido --primary con --on-primary (5,02:1); UNO por zona: la acción que importa. .btn-secondary contorno sobre --surface (también es el aspecto de `.btn` a secas). .btn-ghost sin borde ni fondo en reposo; acciones de poco peso («Olvidé mi contraseña», cerrar). .btn-danger tinte de error: quitar, cancelar, rechazar. Tamaños: (base) --control 40 px · .btn-sm --control-chico 36 px · .btn-lg --control-grande 48 px. Con puntero grueso o ≤ 640 px todos miden ≥ 44 px (tokens, arriba). Forma: .btn-icon (cuadrado, solo ícono: lleva aria-label), .btn-block (a todo el ancho), .btn-wide (a todo el ancho en móvil; ≥ 14rem desde 640 px). Misma altura, radio (--r-sm), tipografía (Inter 600, --fs-sm; --fs-body en .btn-lg) y estados en todas: hover (fondo/borde, --dur-rapido), active (un paso más), :focus-visible (anillo --focus de 2 px) y deshabilitado (opacidad .55, sin hover). Sin movimiento al pasar: con `prefers-reduced-motion` o «Reducir movimiento» no hay transiciones. Las variantes solo cambian las variables --btn-*: nada de repetir reglas. Íconos: iconoSolar(nombre) (iconos.js) dentro del botón, 18 px. */ .btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-borde: var(--border-strong); --btn-bg-hover: var(--surface-2); --btn-fg-hover: var(--btn-fg); --btn-borde-hover: var(--borde-acento); --btn-bg-activo: var(--surface-3); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; min-height: var(--control); padding: 0 var(--sp-4); border-radius: var(--r-sm); border: 1px solid var(--btn-borde); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-family: var(--f-cuerpo); font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; letter-spacing: 0; text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease), color var(--dur-rapido) var(--ease), box-shadow var(--dur-rapido) var(--ease); } .btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-borde-hover); color: var(--btn-fg-hover); } .btn:active { background: var(--btn-bg-activo); } .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .btn:disabled:hover, .btn[aria-disabled="true"]:hover, .btn:disabled:active { background: var(--btn-bg); border-color: var(--btn-borde); color: var(--btn-fg); } .btn[aria-busy="true"] { cursor: progress; } .btn[hidden], .enlace[hidden] { display: none; } .btn[aria-pressed="true"] { --btn-bg: var(--primary-soft); --btn-borde: var(--primary); --btn-fg: var(--link); } .btn .ic { width: 18px; height: 18px; flex: none; } .btn-primary { --btn-bg: var(--primary); --btn-fg: var(--on-primary); --btn-borde: var(--primary); --btn-bg-hover: var(--primary-hover); --btn-borde-hover: var(--primary-hover); --btn-bg-activo: var(--primary-active); } .btn-primary .flecha { transition: transform var(--dur-rapido) var(--ease-out); } @media (hover: hover) { .btn-primary:hover .flecha { transform: translateX(2px); } } .btn-secondary { /* = .btn: contorno sobre --surface */ } .btn-ghost { --btn-bg: transparent; --btn-borde: transparent; --btn-fg: var(--text); --btn-bg-hover: var(--surface-2); --btn-borde-hover: transparent; } .btn-danger { --btn-bg: var(--error-bg); --btn-fg: var(--error); --btn-borde: var(--error-border); --btn-bg-hover: color-mix(in srgb, var(--error) 14%, var(--surface)); --btn-borde-hover: var(--error); --btn-bg-activo: color-mix(in srgb, var(--error) 20%, var(--surface)); } .btn-sm { min-height: var(--control-chico); padding: 0 var(--sp-3); } .btn-lg { min-height: var(--control-grande); padding: 0 var(--sp-5); font-size: var(--fs-body); } .btn-block { width: 100%; } .btn-wide { width: 100%; } @media (min-width: 640px) { .btn-wide { width: auto; min-width: 14rem; } } .btn-icon { width: var(--control); height: var(--control); min-height: 0; flex: none; padding: 0; } .btn-icon.btn-sm { width: var(--control-chico); height: var(--control-chico); } .btn-icon .ic { width: 20px; height: 20px; } .btn-icon > span[aria-hidden="true"] { font-size: var(--fs-h3); line-height: 1; } /* Varios botones juntos: .fila-acciones (abajo) o .btn-grupo. */ .btn-grupo { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } /* Enlace de acción dentro del texto («Quitar», «ver más»): NO es un botón del sistema, es un enlace que actúa. 44 px de alto en táctil. */ .enlace { display: inline-flex; align-items: center; background: none; border: 0; padding: 0 2px; min-height: 32px; font: inherit; font-weight: 500; cursor: pointer; border-radius: var(--r-xs); color: var(--link); text-decoration: underline; text-decoration-color: var(--acento-linea); text-underline-offset: 3px; transition: text-decoration-color var(--dur-rapido) var(--ease), color var(--dur-rapido) var(--ease); } .enlace:hover { color: var(--text); text-decoration-color: currentColor; } @media (pointer: coarse), (max-width: 640px) { .enlace { min-height: 44px; } } /* ── Avisos, carga, vacío ───────────────────────────────────────────── */ .aviso { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); border: 1px solid var(--borde); border-left: 3px solid var(--acento); background: var(--superficie); color: var(--texto); } .aviso-error { border-color: var(--error-borde); border-left-color: var(--error); background: var(--error-suave); color: var(--error); font-weight: 500; } .aviso-ok { border-left-color: var(--ok); background: var(--ok-suave); } .aviso-cuidado { border-color: var(--warning-border); border-left-color: var(--warning); background: var(--warning-bg); color: var(--text); } .aviso-cuidado b { color: var(--warning); } /* Registro: «Recuperamos lo que había escrito» (registro-borrador.js), con «Empezar de cero». */ .reg-borrador { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: var(--sp-3) 0; } .reg-borrador p { margin: 0; flex: 1 1 16rem; } /* Centro de DEMOSTRACIÓN (demo.js): el aviso que reemplaza «Solicitar cita» (ficha y sitio del centro). */ .aviso-demo { display: grid; gap: var(--sp-1); font-size: var(--fs-sm); line-height: 1.45; } .aviso-demo b { font-size: var(--fs-body); } /* ── Tarjeta genérica (sistema) ───────────────────────────────────────── Borde sutil (--border), radio --r-md, relleno --sp-4 (--sp-5 desde 640 px) y SIN sombra en reposo: la sombra (--sombra-2) solo al pasar o con foco de teclado cuando la tarjeta entera es un destino. Use una tarjeta solo para un objeto que se compara con otros (una oferta, un plan, una política); lo demás se ordena con espacio, reglas y títulos. Las tarjetas existentes (.tarjeta, .pol-tarjeta, .plan, .cl-servicio…) usan los mismos tokens. */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); } @media (min-width: 640px) { .card { padding: var(--sp-5); } } .card-interactiva { transition: border-color var(--dur-rapido) var(--ease), box-shadow var(--dur-rapido) var(--ease); } @media (hover: hover) and (pointer: fine) { .card-interactiva:hover { border-color: var(--borde-acento); box-shadow: var(--sombra-2); } } .card-interactiva:has(:focus-visible) { border-color: var(--borde-acento); box-shadow: var(--sombra-2); } .cargando { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 0; color: var(--texto-2); } .girador { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--borde-fuerte); border-top-color: var(--acento); animation: girar 0.8s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } .vacio { background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--r-md); padding: var(--sp-5); text-align: center; } .vacio-titulo { font-family: var(--f-titulo); font-weight: 500; font-size: var(--fs-h4); } /* ── Formularios ────────────────────────────────────────────────────── */ .form { display: grid; gap: var(--sp-4); } .campo { display: grid; gap: var(--sp-1); margin: 0; min-width: 0; } fieldset.campo, fieldset.faceta, fieldset.donde { border: 0; padding: 0; margin: 0; min-width: 0; } legend, label, .etiqueta { font-weight: 500; font-size: var(--fs-sm); color: var(--texto); } legend { padding: 0; margin-bottom: var(--sp-1); } .opc { font-weight: 400; color: var(--texto-3); font-size: var(--fs-xs); } /* Obligatorio (UI/UX Bloque 5): asterisco en --error (≥ 6:1 en los dos temas) junto a la etiqueta; la nota de arriba del formulario dice qué significa. */ .req { color: var(--error); font-weight: 600; font-size: inherit; } .nota-req { margin: 0; font-size: var(--fs-sm); color: var(--muted); } input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input:not([type]), select, textarea { width: 100%; min-height: var(--campo); padding: 8px 12px; font: inherit; font-size: var(--fs-body); color: var(--texto); background-color: var(--superficie); border: 1px solid var(--borde-control); border-radius: var(--r-sm); transition: border-color var(--dur-rapido) var(--ease); } input::placeholder, textarea::placeholder { color: var(--texto-3); opacity: 1; } input:hover, select:hover, textarea:hover { border-color: var(--acento); } /* Foco claro: anillo de 2 px en --focus pegado al borde, y el borde también en --focus. */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); border-radius: var(--r-sm); } select:disabled, input:disabled { opacity: 0.6; cursor: not-allowed; } textarea { resize: vertical; } input[type="file"] { font: inherit; font-size: var(--fs-sm); min-height: var(--control); padding: 6px 0; color: var(--texto); } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--acento); flex: none; } [aria-invalid="true"] { border-color: var(--error) !important; box-shadow: 0 0 0 1px var(--error); } [aria-invalid="true"]:focus-visible { outline-color: var(--error); } .pista { font-size: var(--fs-xs); color: var(--texto-3); margin: 0; } .contador { text-align: right; font-variant-numeric: tabular-nums; } .error-campo { color: var(--error); font-weight: 500; margin: var(--sp-1) 0 0; font-size: var(--fs-sm); } .error-campo::before { content: "⚠ "; } .campo-check { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--sp-3); } .campo-check input { margin-top: 11px; } .campo-check label { font-weight: 400; min-height: var(--control); display: block; padding-top: 8px; } .campo-check .error-campo { grid-column: 1 / -1; } .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .checks li, .faceta li { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--control-chico); } .checks label, .faceta label { font-weight: 400; cursor: pointer; flex: 1; min-height: var(--control-chico); display: flex; align-items: center; gap: var(--sp-2); } @media (pointer: coarse), (max-width: 640px) { .checks li, .faceta li, .checks label, .faceta label { min-height: 44px; } } @media (min-width: 640px) { .checks { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); column-gap: var(--sp-4); } } .dos-col { display: grid; gap: var(--sp-4); } @media (min-width: 640px) { .dos-col { grid-template-columns: 1fr 1fr; } } .privacidad { background: var(--superficie-2); border-radius: var(--r-sm); padding: 0 var(--sp-4); } .privacidad summary { min-height: var(--control); display: flex; align-items: center; cursor: pointer; font-weight: 500; } .privacidad p { font-size: var(--fs-sm); } /* Contraseña con el ojo (CampoPassword.jsx de Ayudate). */ .campo-pass { position: relative; } .campo-pass input { padding-right: 44px; } /* Escala de espaciado de los formularios (Bloque 3, 2026-09-26; DESIGN_SALUD.md § Formularios · espaciado). Solo tokens --sp-*, igual en escritorio y móvil: label / legend → su control (o la pista que va antes) --sp-2 (gap --sp-1 + margen --sp-1) control → su pista, contador o error --sp-1 (el gap de .campo) campo → campo (también entre columnas de .dos-col) --sp-4 título de grupo o de paso → su texto introductorio --sp-2 grupo → grupo (.reg-sub con su filete) --sp-4 + filete + --sp-4 caja → caja (.repetible: servicio, profesional) --sp-4 */ .campo:not(.campo-check) > :is(label, .etiqueta) { margin: 0 0 var(--sp-1); } fieldset.campo > legend:not(.sr-only) { margin-bottom: var(--sp-2); } .campo > .error-campo { margin-top: 0; } .campo.grilla { gap: var(--sp-1); } .pass-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: calc(var(--campo) - 6px); height: calc(var(--campo) - 6px); display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: var(--texto-3); cursor: pointer; border-radius: var(--r-sm); touch-action: manipulation; transition: color var(--dur-rapido) var(--ease); } .pass-toggle:hover { color: var(--texto); } .pass-toggle:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; } .pass-toggle svg { width: 20px; height: 20px; } .usuario-estado:empty { display: none; } .usuario-estado.ok { color: var(--ok); font-weight: 500; } .usuario-estado.ok::before { content: "✓ "; } /* ── Páginas ────────────────────────────────────────────────────────── */ .pagina { max-width: var(--ancho); margin: 0 auto; padding: var(--sp-6) var(--gutter) var(--sp-7); } .pagina-angosta { max-width: 40rem; } @media (max-width: 480px) { .pagina { padding: var(--sp-5) var(--gutter) var(--sp-6); } } .migas { margin-bottom: var(--sp-2); font-size: var(--fs-sm); } .migas a { display: inline-flex; align-items: center; min-height: var(--control-chico); color: var(--texto-2); text-decoration: none; } .migas a:hover { color: var(--texto); } /* Datos de la cita: una lista con reglas arriba y abajo, sin caja (jerarquía por espacio, no por tarjeta). */ .datos { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-5); padding: var(--sp-4) 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); margin: var(--sp-5) 0; } .datos dt { font-weight: 500; color: var(--texto-2); } .datos dd { margin: 0; } .estado-cita { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); background: var(--acento-suave); border: 1px solid var(--borde-acento); color: var(--acento-texto); } .estado-confirmed { background: var(--ok-suave); border-color: var(--ok); color: var(--ok); } .estado-cancelled, .estado-rejected { background: var(--error-suave); border-color: var(--error-borde); color: var(--error); } .estado-completed { background: var(--ok-suave); border-color: var(--ok); color: var(--ok); } .estado-rescheduled, .estado-no_show { background: var(--superficie-2); border-color: var(--borde-fuerte); color: var(--texto-2); } /* /cita/: las acciones del enlace (un solo botón sólido: el que importa). */ .acciones-cita { border-top: 1px solid var(--borde); padding-top: var(--sp-5); margin-top: var(--sp-5); display: grid; gap: var(--sp-3); } .acciones-cita .eye { margin: 0; } /* Soporte del paciente (soporte.js): «Escribir sobre esta cita» y /soporte/. */ .soporte-cita { border-top: 1px solid var(--borde); padding-top: var(--sp-5); margin-top: var(--sp-5); display: grid; gap: var(--sp-3); } .soporte-cita .eye { margin: 0; } .hilo { list-style: none; margin: var(--sp-4) 0; padding: 0; display: grid; gap: var(--sp-3); } .msj { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); max-width: 92%; } .msj-paciente { justify-self: end; background: var(--acento-suave); border-color: var(--acento-linea); } .msj-antima { border-style: dashed; } .msj-quien { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); color: var(--texto-2); } .msj-cuerpo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .fila-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } @media (max-width: 480px) { .fila-acciones > .btn { flex: 1 1 100%; } } .exito { padding: var(--sp-6) 0; } /* ── Iniciar sesión (Login.jsx de Ayudate: .mini-wrap + .mini-card) ─── */ .mini-wrap { max-width: 520px; } .mini-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5); display: grid; gap: 0; } @media (min-width: 480px) { .mini-card { padding: var(--sp-6); } } .mini-card h1 { font-family: var(--f-titulo); font-weight: 400; font-size: var(--fs-h2); letter-spacing: -0.032em; line-height: 1.15; margin: 0 0 var(--sp-3); text-wrap: balance; } .mini-card > p { color: var(--texto-2); margin: 0 0 var(--sp-2); } /* UI/UX Bloque 5: «Acceso para centros de salud». Etiquetas con el estilo de todos los formularios (Inter 500, --text; antes mono en mayúsculas), asterisco de obligatorio y el error de cada campo debajo de él. */ .mini-card .eye { margin-bottom: var(--sp-2); } .mini-card .nota-req { margin: var(--sp-2) 0 0; } .mini-card .campo { margin-top: var(--sp-4); } .mini-card .lb { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); } .mini-card .btn-block { margin-top: var(--sp-3); } .mini-card .btn-primary { margin-top: var(--sp-4); } .mini-card > .error-campo { margin-top: var(--sp-3); } /* «Olvidé mi contraseña»: .btn.btn-ghost.btn-sm centrado. */ .olvide { justify-self: center; margin: var(--sp-3) auto 0; --btn-fg: var(--muted); --btn-fg-hover: var(--text); } .mini-pie { text-align: center; margin-top: var(--sp-5); color: var(--muted); } .mini-pie a { font-weight: 600; } /* ── Directorio ─────────────────────────────────────────────────────── */ /* Portada (UI/UX Bloque 2): poco texto — etiqueta, título, una línea y dos acciones: «Buscar un centro» (primary, lleva al buscador) y «¿Tiene un centro de salud? Regístrelo» (ghost). */ .dir-portada { padding: var(--sp-6) 0 var(--sp-5); } .dir-portada .titulo-portada { max-width: 18ch; } .dir-portada .bajada { margin: 0 0 var(--sp-5); } .portada-acc { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; } /* El texto y la flecha van en UN solo elemento en línea, unidos por un espacio duro (Bloque 2, 2026-09-26): al partirse el texto en móvil, la flecha queda junto a «Regístrelo» y no suelta contra el borde derecho (antes era otro hijo del flex y se iba al extremo). */ .portada-centro { white-space: normal; text-align: left; justify-content: flex-start; max-width: 100%; } .portada-centro-t { min-width: 0; } @media (max-width: 480px) { .portada-acc > .btn-primary { width: 100%; } } @media (min-width: 960px) { .dir-portada { padding: var(--sp-7) 0 var(--sp-6); } } /* Buscador (UI/UX Bloque 2): el protagonista. Una caja --surface con borde fuerte y controles de 48 px: «¿Qué busca?» con su ícono, provincia, cantón, «Cerca de mí» y «Buscar». En móvil, todo a lo ancho (provincia y cantón lado a lado desde 400 px); desde 720 px, dos filas; desde 1024, una. */ .buscador { display: grid; gap: var(--sp-3) var(--sp-2); align-items: end; padding: var(--sp-3); scroll-margin-top: calc(var(--barra-alto) + var(--sp-4)); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--sombra-1); } .buscador input, .buscador select { min-height: var(--control-grande); } .buscador-q, .buscador-campo { min-width: 0; } /* Etiquetas VISIBLES (UI/UX Bloque 5): el placeholder queda solo como ejemplo. */ .buscador-et { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm); font-weight: 500; color: var(--text); } .buscador-control { position: relative; } .buscador-control input { padding-left: 44px; } .buscador-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--link); pointer-events: none; } .buscador-lugar { display: grid; gap: var(--sp-2); min-width: 0; } .buscador-acc { display: grid; gap: var(--sp-2); } .buscador-acc .btn { width: 100%; } .buscador-nota { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--muted); } @media (min-width: 360px) { .buscador-lugar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 480px) { .buscador-acc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 720px) { .buscador { grid-template-columns: minmax(0, 1fr) auto; padding: var(--sp-4); } .buscador-q { grid-column: 1 / -1; } .buscador-acc { grid-template-columns: auto auto; } .buscador-acc .btn { width: auto; } } @media (min-width: 1024px) { .buscador { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem) auto; } .buscador-q { grid-column: auto; } } .estado-busqueda { font-size: var(--fs-sm); color: var(--texto-2); } .estado-busqueda p { margin: var(--sp-3) 0 0; } .estado-busqueda:empty { display: none; } /* Resultados con filtros (UI/UX Bloque 2). Escritorio (≥ 960 px): los filtros en una columna al costado (16 rem, pegada bajo la barra) y la lista a la derecha. Móvil: la columna no se ve; «Filtrar resultados» (con la insignia de filtros activos) abre el MISMO nodo en un diálogo. */ .dir-cuerpo { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); } .filtros-lat { display: none; } .filtros-tit { font-size: var(--fs-h4); margin: 0 0 var(--sp-3); } .filtros-cont { display: grid; gap: var(--sp-4); align-content: start; } .filtros-n { margin: 0; font-size: var(--fs-sm); color: var(--muted); } .filtros-activos { display: grid; gap: var(--sp-2); justify-items: start; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); } .filtros-activos .fchips { list-style: none; margin: 0; padding: 0; } .fchip-quitar { color: var(--text); background: var(--primary-soft); border-color: var(--primary); } .fchip-quitar span { font-size: var(--fs-body); line-height: 1; margin-left: 2px; } .filtros-limpiar { margin-left: calc(-1 * var(--sp-3)); } .fgrupo { display: grid; gap: var(--sp-2); min-width: 0; } /* En la columna (y en el diálogo) las categorías van una debajo de otra, con el conteo a la derecha. */ .filtros-cont .fgrupo .fchips { flex-direction: column; align-items: stretch; } .filtros-cont .fgrupo .fchip { justify-content: flex-start; text-align: left; border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-3); } .filtros-cont .fgrupo .fchip .cuenta { margin-left: auto; padding-left: var(--sp-2); } .abrir-filtros .insignia { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .abrir-filtros .insignia[hidden] { display: none; } .dialogo-filtros .dialogo-cuerpo { display: grid; gap: var(--sp-4); } .dialogo-filtros-pie { position: sticky; bottom: 0; padding-top: var(--sp-3); background: var(--surface-elevated); } @media (min-width: 960px) { .dir-cuerpo { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; } .filtros-lat { display: block; position: sticky; top: calc(var(--barra-alto) + var(--sp-4)); max-height: calc(100dvh - var(--barra-alto) - var(--sp-6)); overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4); background: var(--background-alt); border: 1px solid var(--border); border-radius: var(--r-md); } .abrir-filtros { display: none; } } .fg-et { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento-texto); min-height: 32px; display: flex; align-items: center; } .fg-vacio { margin: 0; min-height: 32px; display: flex; align-items: center; font-size: var(--fs-xs); color: var(--texto-2); } .cuenta { color: var(--texto-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; margin-right: 6px; vertical-align: middle; background: var(--cat-v); box-shadow: 0 0 0 1px var(--borde-fuerte); } /* Color de categoría (datos): --cat (claro) y --cat-o (oscuro) llegan en línea (formato.js, estiloCat); --cat-v es el que se pinta. Cada par tiene ≥ 3:1 contra los fondos donde se dibuja en su tema (DESIGN_SALUD.md § Puntos de categoría). El punto sin color toma --acento-linea. */ .tarjeta, .fchip-cat, .cat-burbuja, .tc-cat, .serv-cat, .pin-cuerpo { --cat-v: var(--cat, var(--acento)); } .punto { --cat-v: var(--cat, var(--acento-linea)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.tarjeta, .fchip-cat, .cat-burbuja, .tc-cat, .serv-cat, .pin-cuerpo) { --cat-v: var(--cat-o, var(--cat, var(--acento))); } :root:not([data-theme="light"]) .punto { --cat-v: var(--cat-o, var(--cat, var(--acento-linea))); } } :root[data-theme="dark"] :is(.tarjeta, .fchip-cat, .cat-burbuja, .tc-cat, .serv-cat, .pin-cuerpo) { --cat-v: var(--cat-o, var(--cat, var(--acento))); } :root[data-theme="dark"] .punto { --cat-v: var(--cat-o, var(--cat, var(--acento-linea))); } .fchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; } .fchip { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--control-chico); padding: 0 var(--sp-3); border-radius: var(--r-pill); cursor: pointer; border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto-2); font: inherit; font-size: var(--fs-xs); touch-action: manipulation; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease), color var(--dur-rapido) var(--ease); } .fchip .punto { margin-right: 2px; } /* Ícono de categoría en el chip (Bloque 3, 2026-09-26): el MISMO del pin del mapa, pequeño (16 px), alineado con el texto y en el color de la categoría (--cat-v, ≥ 3:1 contra el chip en reposo, al pasar el ratón y elegido, en los dos temas y con contraste reforzado: salud-categorias-contraste.test.js). */ .fchip .fchip-ic { width: 16px; height: 16px; flex: none; color: var(--cat-v); } .fchip:hover { color: var(--texto); border-color: var(--borde-control); background: var(--superficie-2); } .fchip[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--texto-inv); font-weight: 500; } .fchip[aria-pressed="true"] .cuenta { color: inherit; opacity: 0.8; } /* La categoría lleva SU color (datos → --cat en línea): borde en reposo, fondo tenue al elegirla. */ .fchip-cat { border-color: color-mix(in srgb, var(--cat-v) 45%, var(--borde-fuerte)); } .fchip-cat:hover { border-color: var(--cat-v); } .fchip-cat[aria-pressed="true"] { background: color-mix(in srgb, var(--cat-v) 22%, var(--superficie)); border-color: var(--cat-v); color: var(--texto); box-shadow: inset 0 0 0 1px var(--cat-v); } .fchip-cat[aria-pressed="true"] .cuenta { color: var(--texto-2); opacity: 1; } .fchip[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; background: var(--superficie); color: var(--texto-2); border-color: var(--borde); } .fchip-chico { min-height: 28px; padding: 0 9px; font-size: var(--fs-xs); } @media (pointer: coarse), (max-width: 640px) { .fchip { min-height: 44px; } .fchip-chico { min-height: 44px; } } /* Carga sutil: mientras llega la respuesta, la cuadrícula (y la barra) bajan un poco el tono. */ .filtros-cont[aria-busy="true"] .cuenta { opacity: 0.5; } .resultados-grilla[aria-busy="true"] { opacity: 0.6; transition: opacity var(--dur-medio) var(--ease); } /* Cabecera de la lista: «1–9 de 40 ofertas» (mono, como Ayudate) y «Ver en mapa». */ .lista { min-width: 0; padding-bottom: var(--sp-7); } .lista-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; } .lista-acc { display: flex; flex-wrap: wrap; gap: var(--sp-2); } @media (max-width: 480px) { .lista-acc { width: 100%; } .lista-acc .btn { flex: 1 1 auto; white-space: nowrap; padding: 0 var(--sp-3); } } .count { margin: 0; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento-texto); font-variant-numeric: tabular-nums; } .resultados-grilla:focus { outline: none; } /* La grilla: 1 columna en móvil, 2 en tableta, 3 en escritorio (9 por página). */ .tarjetas { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Con los filtros al costado, la lista del directorio tiene ~870 px: dos columnas. */ @media (min-width: 960px) { .dir-cuerpo .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* La tarjeta (TutorCard de Ayudate). `--cat` = color de la categoría (datos). */ .tarjeta { display: flex; flex-direction: column; overflow: hidden; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); transition: border-color var(--dur-rapido) var(--ease), box-shadow var(--dur-rapido) var(--ease); } /* En reposo solo la franja superior lleva el color de la categoría. */ .tarjeta-barra { height: 3px; background: var(--cat-v); } /* Al pasar el ratón: borde entero del color + sombra suave (solo con puntero fino: en táctil no se queda pegado). */ @media (hover: hover) and (pointer: fine) { .tarjeta:hover { border-color: var(--cat-v); box-shadow: 0 0 0 1px var(--cat-v), var(--sombra-2); } } /* Con teclado: lo mismo, solo si el foco es visible (un clic no lo enciende). */ .tarjeta:has(:focus-visible) { border-color: var(--cat-v); box-shadow: 0 0 0 1px var(--cat-v), var(--sombra-2); } .tarjeta-cuerpo { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; min-width: 0; } .tarjeta p { margin: 0; } .av { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-sm); overflow: hidden; background: var(--superficie-2); border: 1px solid var(--borde); } .av img, .av .iniciales { width: 100%; height: 100%; object-fit: cover; } .av .iniciales { font-size: var(--fs-body); } .av-42 { width: 42px; height: 42px; } .tarjeta-et { margin: 0 0 4px; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento-texto); } .tarjeta-desc { flex: 1; } .desc-texto { font-size: var(--fs-sm); color: var(--texto-2); line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .desc-texto.abierta { display: block; -webkit-line-clamp: unset; line-clamp: none; } .ver-mas { font-size: var(--fs-xs); } .ver-mas[hidden] { display: none; } .tarjeta-pie { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-2) var(--sp-3); border-top: 1px solid var(--borde); padding-top: var(--sp-3); margin-top: auto; } .tarjeta-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin: 0; } .tarjeta-precio .monto { font-family: var(--f-titulo); font-weight: 400; font-size: var(--fs-h4); line-height: 1; letter-spacing: -0.035em; color: var(--texto); font-variant-numeric: tabular-nums; } .tarjeta-precio .monto-sin { font-size: var(--fs-body); letter-spacing: -0.01em; color: var(--texto-2); } .tarjeta-precio .u { font-size: var(--fs-xs); color: var(--texto-3); } /* Tarjeta de CENTRO del directorio (UI/UX Bloque 3, tarjeta.js tarjetaCentroHtml). Jerarquía: nombre (h3, --fs-h4) → categorías → ubicación con ícono → servicios que coinciden (secundario, --fs-xs/--fs-sm en --muted) → pie con «Desde ₡X» y «Ver centro». Sin reseñas ni disponibilidad. */ .tc-cabeza { display: flex; gap: var(--sp-3); align-items: center; min-width: 0; } .tc-titulos { min-width: 0; display: grid; gap: 2px; } .tc-nombre { margin: 0; min-width: 0; font-family: var(--f-titulo); font-weight: 500; font-size: var(--fs-h4); line-height: var(--lh-sub); letter-spacing: -0.022em; color: var(--text); overflow-wrap: anywhere; hyphens: auto; } .tc-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); } .tc-cat { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 500; color: color-mix(in srgb, var(--cat-v) 55%, var(--texto)); } .tc-cat .punto { margin-right: var(--sp-1); } .tc-demo { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--warning); } .tc-lugar { display: flex; align-items: flex-start; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; } .tc-ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--link); } .tc-servicios { flex: 1; min-width: 0; } .tc-et { margin: 0 0 var(--sp-1) !important; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); } .tc-servicios ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .tc-servicios li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); min-width: 0; } .tc-serv { min-width: 0; overflow-wrap: anywhere; } .tc-precio { flex: none; color: var(--subtle); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; } .tc-mas { font-size: var(--fs-xs); color: var(--subtle); margin-top: var(--sp-1) !important; } .tc-pie { align-items: center; } .tc-ver { white-space: nowrap; } /* Estados de la lista: carga (esqueletos), vacío y error. */ .resultados-grilla.con-esqueleto[aria-busy="true"] { opacity: 1; } .esqueleto-texto { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); color: var(--muted); font-size: var(--fs-sm); } .esq-tarjeta { pointer-events: none; } .esq { display: block; border-radius: var(--r-sm); background: var(--surface-2); animation: esq-pulso 1.4s var(--ease) infinite; } .esq-av { flex: none; width: 46px; height: 46px; } .esq-tit { flex: 1; height: 20px; } .esq-l { height: 12px; width: 100%; } .esq-l-corta { width: 45%; } .esq-l-media { width: 70%; } .esq-pie { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); border-top: 1px solid var(--border); padding-top: var(--sp-3); margin-top: auto; } .esq-precio { width: 30%; height: 18px; } .esq-btn { width: 96px; height: var(--control-chico); } @keyframes esq-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .estado-error { border-style: solid; border-color: var(--error-border); } .vacio-ic { width: 28px; height: 28px; color: var(--error); margin: 0 auto var(--sp-2); display: block; } .vacio .btn { margin-top: var(--sp-3); } /* Entrada de resultados: fundido corto con un desplazamiento mínimo; una vez, no en bucle. */ .tarjetas.entrar > .tarjeta { animation: tarjeta-entrar var(--dur-medio) var(--ease-out) both; } .tarjetas.entrar > .tarjeta:nth-child(2) { animation-delay: 30ms; } .tarjetas.entrar > .tarjeta:nth-child(3) { animation-delay: 60ms; } .tarjetas.entrar > .tarjeta:nth-child(n+4) { animation-delay: 90ms; } @keyframes tarjeta-entrar { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .chips-titulo { margin-top: var(--sp-2) !important; font-size: var(--fs-xs) !important; } .chips { list-style: none; padding: 0; margin: var(--sp-1) 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); } .chip { min-height: var(--control-chico); padding: 0 var(--sp-3); border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto); font-family: var(--f-mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease), color var(--dur-rapido) var(--ease); } .chip:hover { background: var(--acento-suave); border-color: var(--acento); } .chip.on { background: var(--acento); border-color: var(--acento); color: var(--texto-inv); } /* Paginación (Ayudate): ‹ 1 … 4 5 6 … 10 › */ .pag { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-6); } .pag[hidden] { display: none; } .pbtn { min-width: var(--control); height: var(--control); padding: 0 var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease), color var(--dur-rapido) var(--ease); } .pbtn:hover:not(:disabled) { border-color: var(--acento); color: var(--texto); background: var(--superficie-2); } .pbtn:disabled { opacity: 0.32; cursor: not-allowed; } .pbtn.on { background: var(--acento); border-color: var(--acento); color: var(--texto-inv); font-weight: 600; } .psalto { color: var(--texto-3); padding: 0 3px; } /* La paginación del HTML del servidor (Bloque 6) son enlaces : rastreables y sin JavaScript. */ a.pbtn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } @media (pointer: coarse), (max-width: 640px) { .pbtn { min-width: 44px; height: 44px; } } /* Mapa del directorio: sobre la grilla en escritorio; en móvil, detrás de «Ver en mapa» y a pantalla completa. */ .mapa-caja { display: none; position: relative; margin-bottom: var(--sp-4); } .mapa-cabeza { display: none; } .mapa { height: 360px; border-radius: var(--r-md); border: 1px solid var(--borde); background: var(--superficie-2); z-index: 0; zoom: calc(1 / var(--a11y-zoom)); } .mapa-caja .mapa { height: 260px; } .mapa-aviso { padding: var(--sp-4); } .buscar-area { position: absolute; z-index: 500; top: 12px; left: 50%; transform: translateX(-50%); box-shadow: var(--sombra-2); } .buscar-area[hidden] { display: none; } .mapa-caja.pantalla { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 2500; background: var(--fondo); margin: 0; padding-bottom: env(safe-area-inset-bottom); } .mapa-caja.pantalla .mapa-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--gutter); min-height: var(--barra-alto); border-bottom: 1px solid var(--borde); } .mapa-cabeza h2 { margin: 0; font-size: var(--fs-h4); } .mapa-caja.pantalla .mapa { flex: 1; height: auto; border: 0; border-radius: 0; } .mapa-caja.pantalla .buscar-area { top: calc(var(--barra-alto) + 12px); } @media (min-width: 960px) { .ver-mapa { display: none; } .mapa-caja, .mapa-caja.pantalla { display: block; position: relative; inset: auto; z-index: auto; background: none; padding: 0; margin: 0 0 var(--sp-4); } .mapa-caja.pantalla .mapa-cabeza { display: none; } .mapa-caja.pantalla .mapa { height: 260px; border: 1px solid var(--borde); border-radius: var(--r-md); } .mapa-caja.pantalla .buscar-area { top: 12px; } } .profesional-foto img, .profesional-foto .iniciales { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; } .ficha-foto img, .ficha-foto .iniciales { width: 64px; height: 64px; border-radius: var(--r-md); object-fit: cover; } .iniciales { display: grid; place-items: center; background: var(--superficie-2); color: var(--texto); font-family: var(--f-titulo); font-weight: 500; font-size: var(--fs-lead); } /* ── Cómo funciona (tres pasos) ─────────────────────────────────────── */ .sec { padding: var(--sp-8) 0; border-top: 1px solid var(--borde); scroll-margin-top: var(--barra-alto); } .sec-alt { background: var(--fondo-alt); } .sec .bajada { margin-bottom: var(--sp-6); } /* «Cómo funciona» (tanda TSC): los tres bloques de arriba (qué hace, qué no hace, el precio) y los tres pasos usan EXACTAMENTE la misma grilla (.grilla-como): mismas columnas y mismo espacio entre ellas, así cada bloque queda alineado verticalmente con su paso. Una columna en móvil. */ .grilla-como { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sp-6); row-gap: var(--sp-5); } @media (min-width: 720px) { .grilla-como { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .paso { border-top: 1px solid var(--borde-fuerte); padding: var(--sp-5) 0 0; } .paso-k { display: block; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento-texto); margin-bottom: var(--sp-3); } /* Bloque 3 (2026-09-26): cada paso lleva su ícono en el MISMO cuadro que el bloque de confianza (.confianza-ic), con «PASO 0n» al lado. */ .paso-cab { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); } .paso-cab .paso-k { margin-bottom: 0; } .paso h4 { font-size: var(--fs-h4); margin: 0 0 var(--sp-2); } /* Bloque de confianza (UI/UX Bloque 2, dentro de «Cómo funciona»): qué hace, qué no hace y quién pone el precio, cada uno con su ícono Solar; debajo, «Cómo funciona una solicitud» y los tres pasos. Breve: una línea cada uno. */ .confianza .titulo-sec { margin-bottom: var(--sp-5); } .confianza-lista { margin-bottom: var(--sp-7); } .confianza-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; } .confianza-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--link); } .confianza-ic .ic { width: 24px; height: 24px; } .confianza-item h3 { font-size: var(--fs-h4); margin: 0 0 var(--sp-1); } .confianza-item p { margin: 0; color: var(--muted); max-width: 34ch; } .confianza-sub { font-size: var(--fs-h4); margin: 0 0 var(--sp-4); } .paso p { font-size: var(--fs-body); color: var(--texto-2); margin: 0; line-height: 1.6; max-width: 36ch; } /* /pyp (tanda TSC): los puntos de las Políticas van siempre visibles (sin acordeón). */ .pol-items { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); } .pol-item h3 { font-size: var(--fs-h4); line-height: var(--lh-sub); margin: 0 0 var(--sp-2); } .pol-item p { margin: 0 0 var(--sp-2); color: var(--texto-2); line-height: var(--lh-cuerpo); } .pol-item :last-child { margin-bottom: 0; } /* ── Ficha (UI/UX Bloque 4; tanda 3) ──────────────────────────────────── Migas «Inicio › Categoría › Centro»; cabecera con foto o iniciales, nombre (h1), reseñas reales, categorías, ubicación y contacto. Debajo, dos columnas desde 960 px: el contenido (sobre, servicios, profesionales, ubicación) y, a la derecha, «Solicitar cita» —la única acción sólida— pegada bajo la barra (sticky). En móvil el mismo botón va FIJO abajo (.ficha-cta-fija) y la página reserva su alto (+ safe-area) al final. */ .migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); } .migas li { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; color: var(--muted); } .migas li + li::before { content: "›"; margin-right: var(--sp-1); color: var(--subtle); } .migas [aria-current="page"] { color: var(--text); font-weight: 500; overflow-wrap: anywhere; } @media (pointer: coarse), (max-width: 640px) { .migas a { min-height: 44px; } } .ficha-cabeza { display: grid; gap: var(--sp-4); background: var(--superficie); padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--borde); grid-template-columns: 64px minmax(0, 1fr); align-items: start; } @media (min-width: 480px) { .ficha-cabeza { padding: var(--sp-5); } } /* La portada del centro (Bloque 4 del panel, «Perfil del centro»): una foto ancha 8:3 sobre la cabecera, pegada a ella (la cabecera pierde las esquinas de arriba). Sin portada, nada cambia. */ .ficha-portada { margin: var(--sp-3) 0 0; border: 1px solid var(--borde); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; background: var(--superficie-2); aspect-ratio: 8 / 3; } .ficha-portada img { display: block; width: 100%; height: 100%; object-fit: cover; } .ficha-cabeza.con-portada { border-top-left-radius: 0; border-top-right-radius: 0; } .ficha-cabeza h1 { font-size: var(--fs-h2); font-weight: 500; margin: 0; overflow-wrap: anywhere; hyphens: auto; } .ficha-titulos { min-width: 0; display: grid; gap: var(--sp-2); } .ficha-titulos .cat-burbujas { margin: 0; } .ficha-lugar { display: flex; gap: var(--sp-1); align-items: flex-start; margin: 0; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; } .ficha-lugar .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--link); } .ficha-contacto { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); } .ficha-contacto li { min-width: 0; max-width: 100%; } .ficha-contacto a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--control-chico); font-size: var(--fs-sm); min-width: 0; max-width: 100%; } .ficha-contacto .ic { flex: none; width: 18px; height: 18px; } @media (min-width: 720px) { .ficha-cabeza { grid-template-columns: 88px minmax(0, 1fr); } .ficha-foto img, .ficha-foto .iniciales { width: 88px; height: 88px; font-size: var(--fs-h3); } } /* Reseñas REALES (tarjeta y ficha): estrella + promedio + cantidad; sin reseñas no se pinta nada. */ .resenas { margin: 0; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; } .resenas-v { display: inline-flex; align-items: center; gap: var(--sp-1); } .resenas-v b { color: var(--text); font-weight: 600; } .resenas-ic { width: 16px; height: 16px; flex: none; color: var(--warning); } /* «Solicitar cita»: la caja de la columna lateral (escritorio) o la barra fija (móvil). */ .ficha-cta { display: grid; gap: var(--sp-2); } .ficha-cta-titulo { margin: 0; font-size: var(--fs-h4); } .ficha-cta-nota { margin: 0; font-size: var(--fs-xs); color: var(--subtle); text-align: center; } .ficha-cta .aviso-demo { max-width: 32rem; } .ficha-cuerpo { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); } .ficha-cuerpo section { margin-bottom: var(--sp-5); } .ficha-cuerpo h2 { font-size: var(--fs-h3); } .ficha-cuerpo .ficha-cta-titulo { font-size: var(--fs-h4); } @media (max-width: 959.98px) { /* Sin botón (centro demo o sin JavaScript): el aviso queda en el flujo, arriba del contenido. */ .ficha-lado:not(:has(.ficha-cta-fija)) .ficha-cta { padding: var(--sp-4); border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); } /* Con botón: barra fija abajo, a lo ancho, sobre --surface-elevated; el título y la nota solo para el lector. */ .ficha-cta-fija { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; min-height: var(--cta-fija-alto); padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom)); background: var(--surface-elevated); border-top: 1px solid var(--border-strong); box-shadow: var(--sombra-2); } .ficha-cta-fija .ficha-cta-titulo, .ficha-cta-fija .ficha-cta-nota { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ficha-cta-fija .btn { width: 100%; max-width: 32rem; justify-self: center; } /* El espacio que tapa la barra, al final de la página (el pie sigue entero a la vista). */ body:has(.ficha-cta-fija) .pie { padding-bottom: calc(var(--sp-6) + var(--cta-fija-alto) + env(safe-area-inset-bottom)); } } @media (min-width: 960px) { .ficha-cuerpo { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-6); align-items: start; } .ficha-principal { grid-column: 1; grid-row: 1; min-width: 0; } .ficha-lado { grid-column: 2; grid-row: 1; align-self: stretch; } .ficha-cta { position: sticky; top: calc(var(--barra-alto) + var(--sp-4)); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); } } /* Ubicación: la dirección y «Cómo llegar» (Google Maps y Waze, el mismo botón) y un mapa CHICO al lado. */ .ficha-ubic-cuerpo { display: grid; gap: var(--sp-4); align-items: start; } .ficha-ubic-txt { min-width: 0; } .ficha-ubic-txt .tarjeta-et { margin-top: var(--sp-3); } @media (min-width: 720px) { .ficha-ubic-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .servicios, .profesionales, .contacto, .etiquetas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); } .profesional { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--sp-4); } .profesional h3 { font-size: var(--fs-h4); } /* Servicios de la ficha: una fila por servicio (centro.js servicioFichaHtml). */ .servs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); } .serv { display: grid; gap: var(--sp-3); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--sp-4); transition: border-color var(--dur-rapido) var(--ease); } .serv:has(:focus-visible) { border-color: var(--borde-acento); } .serv p { margin: 0; } .serv-txt { min-width: 0; display: grid; gap: var(--sp-1); align-content: start; } .serv h3 { margin: 0; font-size: var(--fs-h4); font-weight: 500; line-height: var(--lh-sub); overflow-wrap: anywhere; hyphens: auto; } .serv-meta { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; } .serv-cat { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 500; color: color-mix(in srgb, var(--cat-v) 55%, var(--texto)); } .serv .tarjeta-desc { margin-top: var(--sp-1); } .serv-lado { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); border-top: 1px solid var(--borde); padding-top: var(--sp-3); } @media (min-width: 560px) { .serv { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .serv-lado { flex-direction: column; align-items: flex-end; border-top: 0; padding-top: 0; } } .ficha-dir { margin: 0 0 var(--sp-1); } .profesional { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-3); } .profesional p { margin: 0 0 2px; font-size: var(--fs-sm); } .profesional-txt { min-width: 0; } .profesional-txt h3 { margin: 0 0 var(--sp-1); overflow-wrap: anywhere; } .profesional .profesional-bio { color: var(--muted); margin-top: var(--sp-1); overflow-wrap: anywhere; } .insignia { display: inline-flex; align-items: center; gap: 6px; background: var(--ok-suave); color: var(--ok); border: 1px solid var(--ok); font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-sm); } .etiquetas { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .etiquetas li { background: var(--superficie-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm); } .contacto li { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; min-height: 36px; } .dato-et { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento-texto); min-width: 6.5rem; } /* El mapa de la ficha no domina: 12 rem de alto (13 desde 720 px, al lado de la dirección). */ .mapa-chico { height: 12rem; } @media (min-width: 720px) { .mapa-chico { height: 13rem; } } /* ── Diálogo ────────────────────────────────────────────────────────── */ .dialogo-fondo { position: fixed; inset: 0; z-index: 3000; background: var(--velo); display: flex; align-items: flex-end; justify-content: center; } .dialogo { background: var(--superficie-elevada); color: var(--texto); width: 100%; max-height: 92vh; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--borde-fuerte); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sombra-2); padding: 0 var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); zoom: var(--a11y-zoom); } @media (min-width: 640px) { .dialogo-fondo { align-items: center; padding: var(--sp-4); } .dialogo { max-width: 36rem; border-radius: var(--r-lg); padding: 0 var(--sp-5) var(--sp-5); } } .dialogo-cabeza { position: sticky; top: 0; background: var(--superficie-elevada); z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--borde); margin-bottom: var(--sp-3); } .dialogo-titulo { margin: 0; font-size: var(--fs-h3); } .dialogo-titulo:focus { outline: none; } .cita-resumen { background: var(--fondo-2); border-radius: var(--r-sm); padding: var(--sp-3); border: 1px solid var(--borde); font-size: var(--fs-sm); } .pasos { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: flex; flex-wrap: wrap; gap: 2px var(--sp-4); font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; } .pasos li { color: var(--texto-3); } .pasos .actual { color: var(--acento-texto); font-weight: 500; } .pasos .hecho::after { content: " ✓"; } .lista-opciones { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); } .opcion { width: 100%; text-align: left; min-height: var(--control); padding: var(--sp-3) var(--sp-4); display: grid; gap: 2px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); font: inherit; cursor: pointer; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease); } .opcion:hover { background: var(--acento-suave); border-color: var(--acento); } .campo-linea { margin-bottom: var(--sp-3); } /* Horarios y solicitud (cita-modal.js, port de Agenda.jsx de Ayudate). */ @media (min-width: 640px) { .dialogo-cita { max-width: 38rem; } .dialogo-chico { max-width: 28rem; } } .cita-cabeza { display: flex; gap: var(--sp-3); align-items: center; min-width: 0; } .cita-cabeza-txt { min-width: 0; } .cita-sub { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--texto-3); } .cita-servicio { color: var(--acento-texto); font-weight: 500; } .dialogo-cita .eye { margin: var(--sp-5) 0 var(--sp-3); font-weight: 400; font-size: var(--fs-xs); font-family: var(--f-mono); letter-spacing: 0.14em; } .notas { background: var(--fondo-2); border: 1px solid var(--borde); border-left: 2px solid var(--acento); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); } .notas p { margin: 0 0 7px; font-size: var(--fs-sm); color: var(--texto-2); line-height: 1.55; } .notas p:last-child { margin-bottom: 0; } .notas b { color: var(--texto); font-weight: 600; } .calh { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); } .calh span { font-family: var(--f-titulo); font-size: var(--fs-body); font-weight: 500; text-transform: capitalize; letter-spacing: -0.01em; } /* Mes anterior / siguiente: .btn.btn-secondary.btn-icon.btn-sm. */ .cnav > span[aria-hidden="true"] { font-size: var(--fs-lead); } .calm { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cdd { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--texto-3); text-align: center; padding-bottom: 4px; } .cdia { height: var(--control-chico); border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; padding: 0; color: var(--texto-3); font: inherit; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease); } .cdia.hay { background: var(--superficie-2); border-color: var(--borde); color: var(--texto); font-weight: 500; } .cdia.hay:hover { border-color: var(--acento); background: var(--acento-suave); } .cdia:disabled { cursor: not-allowed; opacity: 0.35; } .cdia.on { background: var(--acento); border-color: var(--acento); color: var(--texto-inv); font-weight: 600; opacity: 1; } .cleyenda { font-size: var(--fs-xs); color: var(--texto-3); margin: var(--sp-3) 0 0; line-height: 1.55; } .hchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .hchip { border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie-2); color: var(--texto); padding: var(--sp-2) var(--sp-3); cursor: pointer; text-align: left; font: inherit; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease); } .hchip b { display: block; font-family: var(--f-mono); font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums; } .hchip .hmodo { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: var(--fs-xs); color: var(--texto-3); letter-spacing: 0.02em; } .hchip .hmodo::before { content: ""; width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; background: var(--acento); } .hchip:hover { border-color: var(--acento); } .hchip.on { background: var(--acento); border-color: var(--acento); } .hchip.on b, .hchip.on .hmodo { color: var(--texto-inv); } .hchip.on .hmodo::before { background: var(--texto-inv); } .hchip:disabled { cursor: progress; opacity: 0.6; } .reserva-temp { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); border: 1px solid var(--borde-acento); background: var(--acento-suave); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: 1.5; color: var(--texto-2); } .reserva-temp b { font-family: var(--f-mono); color: var(--acento-texto); font-size: var(--fs-body); font-variant-numeric: tabular-nums; } .reserva-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--acento); flex: 0 0 auto; animation: reserva-pulso 1.6s ease-in-out infinite; } @keyframes reserva-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .form-cita { gap: var(--sp-3); } .form-cita .eye { margin-bottom: 0; } .tel-fila { display: flex; gap: var(--sp-2); } .tel-fila .tel-cod { flex: 0 0 11.5rem; max-width: 45%; } .tel-fila .tel-num { flex: 1 1 auto; min-width: 0; } .resumen-cita { border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); background: var(--fondo-2); } .resumen-cita .row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 6px 0; font-size: var(--fs-sm); color: var(--texto-2); } .resumen-cita .row span:last-child { color: var(--texto); text-align: right; font-variant-numeric: tabular-nums; } .resumen-cita .row.tot { border-top: 1px solid var(--borde-fuerte); margin-top: 8px; padding-top: 12px; font-family: var(--f-mono); font-weight: 500; } .resumen-cita .row.tot span { color: var(--acento-texto); } .resumen-cita .note { font-size: var(--fs-xs); color: var(--texto-3); margin: 10px 0 0; line-height: 1.55; } .resumen-cita .note b { color: var(--texto-2); } .flujo { list-style: none; counter-reset: f; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .flujo li { counter-increment: f; position: relative; padding-left: 30px; font-size: var(--fs-sm); line-height: 1.6; color: var(--texto-2); } .flujo li::before { content: counter(f); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--acento-suave); border: 1px solid var(--borde-acento); color: var(--acento-texto); font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 600; display: grid; place-items: center; } .flujo li b { color: var(--texto); font-weight: 600; } .como-llegar { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .recibo { display: grid; gap: var(--sp-3); padding-bottom: var(--sp-2); } .recibo-titulo { font-family: var(--f-titulo); font-size: var(--fs-h3); font-weight: 500; background: var(--ok-suave); border-left: 3px solid var(--ok); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); } .recibo-titulo:focus { outline: 2px solid var(--foco); } .recibo-titulo.wz-titulo { margin: 0; } .datos-recibo { margin: 0; } .datos-recibo dd { overflow-wrap: anywhere; } /* Google Maps, Waze y «Agregar al calendario» (recibo y /cita). */ .recibo-acc { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; } @media (max-width: 479px) { .recibo-acc .btn { width: 100%; } } .recibo-estado { margin: 0; } .rompe { overflow-wrap: anywhere; } .resumen-cita .row span:last-child { min-width: 0; overflow-wrap: anywhere; } /* ── Solicitar cita en pasos (UI/UX Bloque 4, cita-modal.js) ───────────── Indicador: una lista ordenada; cada paso es un círculo de 28 px con su número (✓ si está listo) unido al anterior por una línea de 2 px. Hecho: sólido --primary con --on-primary (5,02:1); actual: --primary-soft con borde --primary y texto --link; pendiente: borde --border-control (≥ 3:1). Bajo 480 px los nombres quedan solo para el lector de pantalla y la línea «Paso N de M · Nombre» dice dónde está. */ .wz-cabeza { margin-bottom: var(--sp-2); } .wz-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .wz-paso { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--sp-1); min-width: 0; text-align: center; } .wz-paso::before { content: ""; position: absolute; top: 13px; right: calc(50% + 18px); left: calc(-50% + 18px); height: 2px; background: var(--border-strong); border-radius: 1px; } .wz-paso:first-child::before { display: none; } .wz-hecho::before, .wz-actual::before { background: var(--primary); } .wz-n { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-control); background: var(--surface); color: var(--muted); font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease); } .wz-hecho .wz-n { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .wz-actual .wz-n { background: var(--primary-soft); border-color: var(--primary); color: var(--link); } .wz-t { font-size: var(--fs-xs); line-height: 1.3; color: var(--subtle); overflow-wrap: anywhere; } .wz-actual .wz-t { color: var(--text); font-weight: 600; } @media (max-width: 479px) { .wz-t { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } .wz-et { margin: var(--sp-2) 0 0; text-align: center; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); } @media (min-width: 480px) { .wz-et { display: none; } } .wz-titulo { margin: var(--sp-4) 0 var(--sp-3); font-size: var(--fs-h4); font-weight: 500; line-height: var(--lh-sub); } .wz-titulo:focus { outline: none; } .wz-titulo:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; } .wz-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); } .wz-nav:has(> span:only-child) { display: none; } .form-cita .wz-titulo { margin-bottom: 0; } .opcion.on { background: var(--primary-soft); border-color: var(--primary); } [data-paso][hidden] { display: none; } /* ── Toasts (UI/UX Bloque 4, ui.js toast) ──────────────────────────────── Arriba y al centro, por encima de los diálogos (z 3500). Borde izquierdo de 4 px: --success o --error; texto --text sobre --surface (≥ 9:1 en los dos temas); detalle --muted. Entra con un fundido de --dur-medio (sin animación con «Reducir movimiento»). */ .toasts { position: fixed; z-index: 3500; top: calc(env(safe-area-inset-top) + var(--sp-3)); left: 50%; transform: translateX(-50%); width: min(28rem, calc(100vw - 2 * var(--sp-4))); display: grid; gap: var(--sp-2); pointer-events: none; } .toast { pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--sp-3); background: var(--surface-elevated); color: var(--text); border: 1px solid var(--border-strong); border-left: 4px solid var(--success); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4); box-shadow: var(--sombra-2); animation: toast-entra var(--dur-medio) var(--ease-out) both; } .toast-error { border-left-color: var(--error); } .toast .toast-ic { width: 22px; height: 22px; margin-top: 1px; color: var(--success); } .toast-error .toast-ic { color: var(--error); } .toast-txt { min-width: 0; } .toast-t { margin: 0; font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-sub); } .toast-d { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; } .toast-x { margin: -6px 0; } @keyframes toast-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ── Registro ───────────────────────────────────────────────────────── */ .registro { max-width: 56rem; } .bloque { background: var(--superficie); border-radius: var(--r-lg); padding: var(--sp-4); border: 1px solid var(--borde); display: grid; gap: var(--sp-4); } @media (min-width: 640px) { .bloque { padding: var(--sp-5); } } .bloque h2 { font-size: var(--fs-h3); } /* Asistente de registro (UI/UX Bloque 5): indicador .wz-pasos (el del asistente de cita), un paso visible a la vez (los demás quedan en el DOM con [hidden]: nada se pierde) y la navegación «← Atrás» / «Continuar →» abajo. */ .reg-cabeza { margin: var(--sp-5) 0 var(--sp-4); scroll-margin-top: calc(var(--barra-alto) + var(--sp-3)); } .reg-pasos { max-width: 40rem; } .form-registro > .nota-req { margin-bottom: calc(-1 * var(--sp-2)); } .reg-paso[hidden] { display: none; } .reg-paso > .reg-paso-n { margin: 0; } .reg-paso > h2 { margin: calc(-1 * var(--sp-3)) 0 0; } .reg-paso > h2:focus { outline: none; } .reg-paso > h2:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; } .reg-sub { display: grid; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--borde); } .reg-sub > h3 { font-size: var(--fs-h4); margin: 0; } /* Título de grupo o de paso → su texto: --sp-2 (el gap es --sp-4). */ .reg-sub > h3 + .pista, .reg-paso > h2 + .pista { margin-top: calc(-1 * var(--sp-2)); } /* Un paso ya revisado se puede reabrir desde el indicador. */ .reg-ir { display: grid; justify-items: center; align-content: start; gap: var(--sp-1); width: 100%; min-height: 44px; padding: 0; background: none; border: 0; border-radius: var(--r-sm); color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; } .reg-ir:hover .wz-t { color: var(--text); text-decoration: underline; text-decoration-color: var(--acento-linea); } .reg-ir:hover .wz-n { background: var(--primary-hover); border-color: var(--primary-hover); } .reg-ir:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .reg-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); } .reg-nav [data-siguiente] { margin-left: auto; } @media (max-width: 480px) { .reg-nav { flex-direction: column-reverse; align-items: stretch; } .reg-nav > .btn { width: 100%; margin-left: 0; } } /* Resumen de «Finalizar»: un grupo por paso con «Editar». */ .reg-resumen { display: grid; gap: var(--sp-3); } .reg-res-grupo { border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); background: var(--fondo-2); min-width: 0; } .reg-res-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .reg-res-cab h4 { margin: 0; font-size: var(--fs-body); } .reg-res-datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); margin: var(--sp-2) 0 0; font-size: var(--fs-sm); } .reg-res-datos dt { color: var(--muted); font-weight: 500; } .reg-res-datos dd { margin: 0 0 var(--sp-2); color: var(--text); overflow-wrap: anywhere; } @media (min-width: 640px) { .reg-res-datos { grid-template-columns: 11rem minmax(0, 1fr); } .reg-res-datos dd { margin: 0; } } .reg-res-lista { margin: var(--sp-2) 0 0; padding-left: 1.25rem; font-size: var(--fs-sm); color: var(--muted); display: grid; gap: var(--sp-1); } .reg-res-lista b { color: var(--text); font-weight: 600; } .reg-falta { color: var(--error); font-weight: 500; } .repetible { border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--sp-4); margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-4); background: var(--fondo-2); min-width: 0; } .repetible > legend { font-family: var(--f-titulo); font-weight: 500; font-size: var(--fs-body); padding: 0 var(--sp-2); } /* Servicio: el título va DENTRO de la caja, arriba a la izquierda (un legend flotado deja de dibujarse sobre el borde y pasa a ser la primera fila de la grilla). */ .repetible > legend.caja-titulo { float: left; width: 100%; padding: 0; margin: 0; } /* Duración y precio: la misma fila y el mismo tamaño, también en el teléfono; el texto de los dos controles centrado en vertical (misma altura fija, sin relleno arriba/abajo). La etiqueta PARTE en dos líneas si no cabe (antes se cortaba con «…»: «Precio desde (₡) (…» en 360–414 px y en inglés); con subgrid las dos etiquetas comparten fila y los campos quedan a la misma altura aunque solo una etiqueta parta (QA 2026-09-26, tanda 2). */ .servicio-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-3); row-gap: var(--sp-1); align-items: start; } .servicio-fila > .campo { grid-row: span 3; grid-template-rows: subgrid; } .servicio-fila label { align-self: end; overflow-wrap: anywhere; } .servicio-fila input { height: var(--campo); padding-top: 0; padding-bottom: 0; line-height: normal; } .campo-capacidad input { max-width: 8rem; } /* Categorías del centro: burbujas de color (el color viene del catálogo → --cat en línea), selección múltiple. */ .burbujas { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .burbujas:focus { outline: none; } .burbuja { min-height: 40px; padding: 0 14px; font-size: var(--fs-sm); } .burbuja[aria-pressed="true"]::after { content: "✓"; margin-left: 2px; font-weight: 600; } /* La ficha del centro enseña sus categorías con las mismas burbujas, sin botón. */ .cat-burbujas { list-style: none; padding: 0; margin: var(--sp-1) 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); } .cat-burbuja { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--texto); border: 1px solid color-mix(in srgb, var(--cat-v) 45%, var(--borde-fuerte)); background: color-mix(in srgb, var(--cat-v) 12%, var(--superficie)); } .mapa-registro { height: 20rem; cursor: crosshair; } /* Foto del centro / del profesional: vista cuadrada + elegir / quitar. */ .foto-fila { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .foto-vista { width: 72px; height: 72px; border-radius: var(--r-md); overflow: hidden; flex: none; background: var(--superficie-2); border: 1px solid var(--borde); display: grid; place-items: center; } .foto-vista img { width: 100%; height: 100%; object-fit: cover; display: block; } .foto-vacia { font-size: var(--fs-xs); color: var(--texto-3); } .foto-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .campo-foto input[type="file"]:focus-visible + label.btn { outline: 2px solid var(--foco); outline-offset: 2px; } .pin-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); } .pin-estado { margin: var(--sp-1) 0 0; font-weight: 500; } .pin-estado.ok::before { content: "✓ "; } .pin-registro span { display: block; width: 28px; height: 28px; background: var(--pin-activo); border: 3px solid var(--pin-borde); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: var(--sombra-2); } .grilla { display: grid; gap: var(--sp-2); } /* Grilla.jsx de Ayudate: 7 días × 6:00–21:00. Escritorio: arrastrar pinta (o borra, si empieza en una marcada). Móvil: un día a la vez. */ .gwrap { border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); padding: var(--sp-3); display: grid; gap: var(--sp-3); min-width: 0; } .grilla-tabla { border-collapse: separate; border-spacing: 3px; user-select: none; touch-action: none; width: 100%; max-width: 40rem; } .grilla-tabla th { font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 400; padding: 0 4px; color: var(--texto-2); } .grilla-tabla th[scope="row"] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .celda { height: 1.75rem; min-width: 2.5rem; background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--r-xs); cursor: pointer; } .celda.on { background: var(--acento); border-color: var(--acento-activo); } .celda:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; } .grilla-movil { display: none; min-width: 0; } /* La tira de días (7 × 52 px) se desplaza dentro de su caja: la columna de la grilla no crece con ella (en 390 px la página medía 463). */ .gwrap { grid-template-columns: minmax(0, 1fr); } .gdias { display: flex; gap: 5px; overflow-x: auto; padding: 6px 6px 10px 0; overscroll-behavior: contain; scrollbar-width: none; } .gdias::-webkit-scrollbar { display: none; } .gdia { position: relative; flex: 0 0 auto; min-width: 52px; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto-2); font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease); } .gdia.on { background: var(--acento); border-color: var(--acento); color: var(--texto-inv); font-weight: 600; } .gdia i { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--invertido); color: var(--invertido-texto); font-style: normal; font-size: var(--fs-xs); line-height: 20px; text-align: center; } .ghoras { display: flex; flex-direction: column; gap: 6px; } .ghora { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--r-sm); border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; text-align: left; touch-action: manipulation; transition: background-color var(--dur-rapido) var(--ease), border-color var(--dur-rapido) var(--ease); } .ghora:hover { border-color: var(--acento); } .ghh2 { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 500; } .ghv { font-size: var(--fs-xs); color: var(--texto-3); } .ghora.on { background: var(--acento); border-color: var(--acento); } .ghora.on .ghh2, .ghora.on .ghv { color: var(--texto-inv); font-weight: 600; } .gleg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--texto-2); } .gleg-items { display: flex; flex-wrap: wrap; gap: 14px; } .gleg-items span { display: inline-flex; align-items: center; gap: 6px; } .gsw { width: 12px; height: 12px; border-radius: var(--r-xs); display: inline-block; flex: none; background: var(--superficie); border: 1px solid var(--borde-fuerte); } .gsw.on { background: var(--acento); border-color: var(--acento-activo); } .gleg-total { font-variant-numeric: tabular-nums; } /* «Limpiar todo» de la grilla: .btn.btn-ghost.btn-sm al final de la fila. */ .limpiar { margin-left: auto; } @media (max-width: 720px) { .grilla-escritorio { display: none; } .grilla-movil { display: block; } } /* ── Planes ─────────────────────────────────────────────────────────── */ .planes-lista { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: var(--sp-4); } @media (min-width: 860px) { .planes-lista { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .plan { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); } .plan-destacado { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); } .plan-precio { font-family: var(--f-titulo); font-size: var(--fs-h3); font-weight: 500; font-variant-numeric: tabular-nums; } .plan-funciones { padding-left: 1.25rem; margin: 0 0 var(--sp-4); flex: 1; color: var(--texto-2); } .plan-funciones li { margin-bottom: var(--sp-1); } /* «Elija su plan» dentro del registro: cada tarjeta es la etiqueta de su radio. */ .planes-elegir .planes-lista { margin: var(--sp-2) 0; } .plan-opcion { cursor: pointer; height: 100%; transition: border-color var(--dur-rapido) var(--ease), background-color var(--dur-rapido) var(--ease); } .plan-opcion:hover { border-color: var(--borde-acento); } .plan-opcion.elegido { border-color: var(--acento); background: var(--acento-suave); box-shadow: 0 0 0 1px var(--acento); } .plan-opcion:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; } .plan-cabeza { display: flex; align-items: center; gap: var(--sp-2); } .plan-nombre { font-family: var(--f-titulo); font-weight: 500; font-size: var(--fs-h4); } .plan-desc { color: var(--texto-2); font-size: var(--fs-sm); } .planes-elegir .plan-funciones { margin-bottom: 0; font-size: var(--fs-sm); } .sin-cobro { margin: 0; } /* ── /pyp · Políticas y preguntas (UI/UX Bloque 5) ────────────────────── Índice con anclas (a la izquierda y pegado desde 960 px; arriba, en una tira que salta de línea, en móvil) y siete secciones una debajo de otra, cada una con su acordeón. */ .pol-cabeza { padding: var(--sp-4) 0 var(--sp-5); } .pyp-cuerpo { display: grid; gap: var(--sp-5); } @media (min-width: 960px) { .pyp-cuerpo { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-7); align-items: start; } } .pyp-indice { background: var(--background-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); } @media (min-width: 960px) { .pyp-indice { position: sticky; top: calc(var(--barra-alto) + var(--sp-4)); } } .pyp-indice-t { font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); margin: 0 0 var(--sp-2); } .pyp-indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); } @media (min-width: 960px) { .pyp-indice ol { display: grid; gap: 2px; } } .pyp-indice a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--control-chico); padding: 0 var(--sp-2); border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; transition: background-color var(--dur-rapido) var(--ease); } .pyp-indice a:hover { background: var(--surface-2); } .pyp-n { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--acento-texto); font-weight: 400; } .pyp-todas { margin-top: var(--sp-3); } .pyp-sec { padding: var(--sp-6) 0; border-top: 1px solid var(--borde); scroll-margin-top: calc(var(--barra-alto) + var(--sp-3)); } .pyp-sec:first-child { padding-top: 0; border-top: 0; } .pyp-sec:focus { outline: none; } .faqi { scroll-margin-top: calc(var(--barra-alto) + var(--sp-3)); } .pol { max-width: 880px; } .pol-n { display: block; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.16em; color: var(--acento-texto); margin-bottom: 6px; } .pol h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); } .pol p, .pol li { color: var(--texto-2); } .pol b, .pol strong { color: var(--texto); font-weight: 500; } .pol-cita { font-size: var(--fs-body); line-height: 1.65; margin: 0 0 var(--sp-4); padding-left: var(--sp-3); border-left: 2px solid var(--acento-linea); } .ic { width: 22px; height: 22px; display: block; } /* «Sí hace / No hace» en dos columnas: + y − en color (tokens --si / --no). */ .pol-sino { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4); } @media (min-width: 640px) { .pol-sino { grid-template-columns: 1fr 1fr; } } .pol-si, .pol-no { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--sp-4); } .pol-si { border-top: 3px solid var(--si); } .pol-no { border-top: 3px solid var(--no); } .pol-sino-t { font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 var(--sp-3); } .pol-si .pol-sino-t { color: var(--si); } .pol-no .pol-sino-t { color: var(--no); } .check { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); max-width: 76ch; } .check li { position: relative; padding-left: 22px; line-height: 1.55; } .check li::before { content: '+'; position: absolute; left: 0; top: 0; color: var(--si); font-family: var(--f-mono); font-weight: 600; } .check.no li::before { content: '−'; color: var(--no); } .pol-alerta { display: flex; align-items: flex-start; gap: var(--sp-3); background: var(--error-suave); border: 1px solid var(--error-borde); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-3); } .pol-alerta-ic { flex: 0 0 auto; color: var(--error); line-height: 0; } .pol-alerta b { display: block; color: var(--error); font-weight: 500; } .pol-alerta span { display: block; color: var(--texto-2); font-size: var(--fs-sm); margin-top: 2px; } .pol-datos { font-size: var(--fs-sm); color: var(--texto-2); line-height: 1.6; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--fondo-alt); border: 1px solid var(--borde); } .faq { display: flex; flex-direction: column; border-top: 1px solid var(--borde); max-width: 820px; margin: var(--sp-3) 0 var(--sp-4); } .faqi { border-bottom: 1px solid var(--borde); } .faqi h3 { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: normal; } .faqi button { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); width: 100%; text-align: left; padding: var(--sp-4) 0; min-height: 44px; background: none; border: 0; cursor: pointer; color: var(--texto); font-family: var(--f-titulo); font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; touch-action: manipulation; transition: color var(--dur-rapido) var(--ease); } .faqi button:hover, .faqi.on button { color: var(--acento-texto); } .faqi button i { font-style: normal; font-family: var(--f-mono); font-size: var(--fs-h4); color: var(--texto-3); flex: 0 0 auto; line-height: 1.2; display: block; transition: transform var(--dur-medio) var(--ease-out), color var(--dur-rapido) var(--ease); } .faqi.on button i { transform: rotate(45deg); color: var(--acento-texto); } .faqr { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows var(--dur-medio) var(--ease-out), opacity var(--dur-medio) var(--ease-out), visibility 0s linear var(--dur-medio); } .faqi.on .faqr { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows var(--dur-medio) var(--ease-out), opacity var(--dur-medio) var(--ease-out), visibility 0s linear 0s; } .faqr > div { min-height: 0; overflow: hidden; } .faqr p { margin: 0 0 var(--sp-4); font-size: var(--fs-body); color: var(--texto-2); line-height: 1.7; max-width: 66ch; } .faqr .pol-sino { margin-bottom: var(--sp-4); } .faqr b { color: var(--texto); font-weight: 500; } /* ── Pie ────────────────────────────────────────────────────────────── */ .pie { background: var(--fondo-2); border-top: 1px solid var(--borde); color: var(--texto-3); font-size: var(--fs-sm); padding: var(--sp-7) 0 calc(var(--sp-6) + env(safe-area-inset-bottom)); zoom: var(--a11y-zoom); } .pie-lb { display: block; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--acento-texto); margin: var(--sp-2) 0 0; } /* Contacto del pie: .btn.btn-secondary con el ícono de correo. */ .fcanal { font-weight: 500; } /* Emergencias (UI/UX Bloque 2): bloque propio arriba del pie, tranquilo — ícono de teléfono en el acento de la barra, sin rojo ni mayúsculas. */ .pie-emergencia { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-4); margin-bottom: var(--sp-6); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); } .pie-emergencia > .ic { width: 28px; height: 28px; color: var(--link); margin-top: 2px; } .pie-emergencia p { margin: 0; } .pie-emergencia-t { font-family: var(--f-titulo); font-size: var(--fs-h4); font-weight: 500; color: var(--text); line-height: var(--lh-sub); } .pie-emergencia-t a { color: var(--text); font-weight: 600; text-decoration-color: var(--link); white-space: nowrap; } .pie-emergencia .pie-emergencia-s { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-sm); } /* Columnas: Tu Salud Cerca · Pacientes · Centros · Información · Contacto (una columna en móvil, dos desde 560 px, cinco desde 1024 px). */ .pie-cols { display: grid; gap: var(--sp-5) var(--sp-6); padding-bottom: var(--sp-5); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border); } @media (min-width: 560px) { .pie-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie-marca { grid-column: 1 / -1; } } @media (min-width: 1024px) { .pie-cols { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) 1.3fr; } .pie-marca { grid-column: auto; } } .pie-lema { margin: var(--sp-2) 0 0; color: var(--muted); max-width: 30ch; } .pie-tit { font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; color: var(--link); margin: 0 0 var(--sp-2); } .pie-col ul { list-style: none; margin: 0; padding: 0; } .pie-col a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--control-chico); color: var(--muted); text-decoration: none; } .pie-col a:not(.btn):hover { color: var(--text); text-decoration: underline; } .pie-col-txt { margin: 0 0 var(--sp-2); color: var(--muted); } @media (pointer: coarse), (max-width: 640px) { .pie-col a:not(.btn) { min-height: 44px; } } .pie-nota { font-size: var(--fs-xs); color: var(--texto-3); line-height: 1.6; margin: 0 0 var(--sp-2); max-width: 88ch; } .pie-nota b { color: var(--texto-2); font-weight: 500; } .pie-nota a { color: var(--texto-2); } /* ── Leaflet dentro de los tokens ───────────────────────────────────── */ .leaflet-container { font-family: var(--f-cuerpo); font-size: var(--fs-xs); background: var(--superficie-2); } .leaflet-container a { color: var(--acento-texto); } .leaflet-control-attribution { font-size: 11px; } .leaflet-container .leaflet-control-attribution { background: var(--superficie); color: var(--texto-2); opacity: 0.92; } .leaflet-bar { border: 1px solid var(--borde-fuerte) !important; box-shadow: var(--sombra-1) !important; } .leaflet-bar a { width: var(--control) !important; height: var(--control) !important; line-height: var(--control) !important; background: var(--superficie); color: var(--texto); border-bottom-color: var(--borde); } .leaflet-bar a:hover, .leaflet-bar a:focus { background: var(--superficie-2); color: var(--texto); } .leaflet-bar a.leaflet-disabled { background: var(--superficie); color: var(--texto-3); } .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-tooltip { background: var(--superficie-elevada); color: var(--texto); box-shadow: var(--sombra-2); } .leaflet-tooltip { border-color: var(--borde-fuerte); } .leaflet-container a.leaflet-popup-close-button { color: var(--texto-2); } /* Pin de centro del directorio (mapa.js pinCentro): círculo del color de la categoría con su ícono; halo --pin-halo y contorno --pin-contorno (≥ 3:1 con las teselas de cada tema). Resaltado: crece un 20 % (sin mover el ancla). */ .pin-mapa { background: none; border: 0; border-radius: 50%; } .pin-cuerpo { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--cat-v); color: var(--pin-icono); border: 2px solid var(--pin-halo); box-shadow: 0 0 0 1.5px var(--pin-contorno), var(--sombra-1); transition: transform var(--dur-rapido) var(--ease-out), box-shadow var(--dur-rapido) var(--ease); } .pin-ic { width: 18px; height: 18px; } .pin-mapa.pin-activo .pin-cuerpo { transform: scale(1.2); box-shadow: 0 0 0 2.5px var(--pin-contorno), var(--sombra-2); } @media (hover: hover) and (pointer: fine) { .pin-mapa:hover .pin-cuerpo { transform: scale(1.1); } } .pin-mapa:focus { outline: none; } .pin-mapa:focus-visible .pin-cuerpo { box-shadow: 0 0 0 2px var(--pin-contorno), 0 0 0 5px var(--foco); } .pin-popup { display: grid; gap: 2px; font-size: var(--fs-sm); min-width: 10rem; } .pin-popup strong { font-family: var(--f-titulo); font-weight: 500; font-size: var(--fs-body); color: var(--texto); } .pin-popup span { color: var(--texto-2); font-size: var(--fs-xs); } .pin-popup a { margin-top: var(--sp-1); font-weight: 600; } /* «Ver mejor la página» (accesibilidad.js): el COMPONENTE (botón, aviso y panel) vive en a11y.css desde la tanda TSC, para que el panel del centro (/gerencia) use el mismo. Aquí quedan sus EFECTOS en la página pública. */ /* ── Efectos de los ajustes (clases en ) ─────────────────────── */ /* Tamaño: `zoom` en el contenido, el pie y los diálogos, NO en la barra (el zoom rompe position:sticky). El mapa se des-escala para que Leaflet calcule bien el puntero (ver .mapa). */ :root.z70 { --a11y-zoom: 0.7; } :root.z80 { --a11y-zoom: 0.8; } :root.z90 { --a11y-zoom: 0.9; } :root.z110 { --a11y-zoom: 1.1; } :root.z125 { --a11y-zoom: 1.25; } :root.z150 { --a11y-zoom: 1.5; } :root.z175 { --a11y-zoom: 1.75; } main { zoom: var(--a11y-zoom); } /* Visión del color: el filtro va en — en el elemento raíz no crea un bloque contenedor, así lo fijo (barra, mapa a pantalla completa, diálogos) sigue fijo. */ :root.f-protanopia { filter: url(#ay-protanopia); } :root.f-deuteranopia { filter: url(#ay-deuteranopia); } :root.f-tritanopia { filter: url(#ay-tritanopia); } :root.f-grises { filter: url(#ay-grises); } :root.fuente-legible { --f-titulo: 'Atkinson Hyperlegible', 'Inter', system-ui, sans-serif; --f-cuerpo: 'Atkinson Hyperlegible', 'Inter', system-ui, sans-serif; --f-mono: 'Atkinson Hyperlegible', 'Inter', system-ui, sans-serif; } :root.fuente-legible .eye, :root.fuente-legible .paso-k, :root.fuente-legible .pol-n { letter-spacing: 0.04em; } :root.espaciado p, :root.espaciado li, :root.espaciado dd, :root.espaciado .bajada { line-height: 1.8 !important; letter-spacing: 0.06em !important; word-spacing: 0.16em !important; } :root.espaciado p { margin-bottom: 1.4em; } :root.enlaces a:not(.btn):not(.logo) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: currentColor; } :root.enlaces .btn, :root.enlaces .chip, :root.enlaces .fcanal, :root.enlaces .icono-barra, :root.enlaces .enlace, :root.enlaces .opcion { outline: 2px solid var(--acento-texto); outline-offset: 2px; } :root.enlaces .nav-l a::before { content: "› "; } :root.sinmov *, :root.sinmov *::before, :root.sinmov *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }