/* ═══════════════════════════════════════════════════════════════════════ AYUDATE SALUD · 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 Ayudate Salud (--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. · Compacto: controles de 36–40 px en escritorio con puntero fino; en pantallas táctiles o angostas los mismos tokens suben a 44 px. · 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 Ayudate Salud */ --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; /* 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; --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-relleno: var(--salud-300); --pin-activo: var(--salud-500); --logo-a: #2FBCA9; --logo-b: #12988A; --logo-figura: #FFFFFF; /* elevación teñida de --salud-900 (nada de negro neutro) */ --sombra-1: 0 1px 2px rgba(12, 78, 76, 0.06); --sombra-2: 0 10px 28px -14px rgba(12, 78, 76, 0.35); --sombra-3: 0 28px 64px -24px rgba(12, 78, 76, 0.4); /* 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; --t-etiqueta: 0.75rem; /* 12 · mono, mayúsculas */ --t-chico: 0.8125rem; /* 13 */ --t-control: 0.875rem; /* 14 */ --t-cuerpo: 0.9375rem; /* 15 */ --t-bajada: 1.0625rem; /* 17 */ --t-h3: 1.125rem; /* 18 */ --t-h2: 1.375rem; /* 22 */ --t-titulo: clamp(1.625rem, 1.15rem + 2vw, 2.5rem); /* 26–40 */ --t-portada: clamp(1.875rem, 1.2rem + 2.8vw, 3rem); /* 30–48 */ /* espacio, radios, controles, movimiento */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --control: 38px; --control-chico: 36px; --barra-alto: 60px; --ancho: 1200px; --ease: cubic-bezier(.2, .6, .35, 1); --ease-out: cubic-bezier(.23, 1, .32, 1); --t-rapido: .14s; --t-medio: .2s; --a11y-zoom: 1; } /* ── Tokens · tema oscuro (paleta teal de Ayudate Salud) ──────────────── Dos veces el mismo bloque: una para quien no eligió y tiene el sistema en oscuro, otra para quien eligió oscuro. Ratios medidos: texto sobre fondo 14,89 · superficie 12,79 · superficie-2 11,08 texto-2 sobre fondo 10,64 · superficie 9,14 · superficie-2 7,92 texto-3 sobre superficie-2 6,17 · acento-texto sobre fondo 9,06 botón (--salud-500) con --texto-inv 5,02 · borde de control 3,50–4,70 barra: texto 16,39 · texto-2 11,72 · acento 9,98 (valores en docs/DESIGN_SALUD.md § Contraste) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --fondo: #0A2322; --fondo-alt: #0D2A29; --fondo-2: #0D2A29; --superficie: #10302F; --superficie-2: #143B39; --superficie-3: #1A4744; --borde: #1E4F4C; --borde-fuerte: #2A625E; --borde-control: #5A938F; --borde-acento: #1A9E9B; --texto: #E6F7F6; --texto-2: #A9D9D6; --texto-3: #8CC2BE; --texto-inv: #0A2322; --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: #E6F7F6; --invertido-texto: #0A2322; --barra-fondo: #061917; --barra-texto: #E6F7F6; --barra-texto-2: #A9D9D6; --barra-texto-3: #8CC2BE; --barra-acento: #6FD0CC; --barra-borde: #1E4F4C; --barra-borde-fuerte: #2A625E; --barra-superficie: #0D2A29; --barra-superficie-2: #143B39; --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); --si: #6FD0CC; --no: #FF9494; --velo: rgba(3, 14, 13, 0.66); --seleccion: rgba(111, 208, 204, 0.3); --pin-borde: #0A2322; --pin-relleno: #1A9E9B; --pin-activo: #6FD0CC; --sombra-1: 0 1px 2px rgba(3, 14, 13, 0.5); --sombra-2: 0 10px 28px -14px rgba(3, 14, 13, 0.8); --sombra-3: 0 28px 64px -24px rgba(3, 14, 13, 0.85); } } :root[data-theme="dark"] { color-scheme: dark; --fondo: #0A2322; --fondo-alt: #0D2A29; --fondo-2: #0D2A29; --superficie: #10302F; --superficie-2: #143B39; --superficie-3: #1A4744; --borde: #1E4F4C; --borde-fuerte: #2A625E; --borde-control: #5A938F; --borde-acento: #1A9E9B; --texto: #E6F7F6; --texto-2: #A9D9D6; --texto-3: #8CC2BE; --texto-inv: #0A2322; --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: #E6F7F6; --invertido-texto: #0A2322; --barra-fondo: #061917; --barra-texto: #E6F7F6; --barra-texto-2: #A9D9D6; --barra-texto-3: #8CC2BE; --barra-acento: #6FD0CC; --barra-borde: #1E4F4C; --barra-borde-fuerte: #2A625E; --barra-superficie: #0D2A29; --barra-superficie-2: #143B39; --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); --si: #6FD0CC; --no: #FF9494; --velo: rgba(3, 14, 13, 0.66); --seleccion: rgba(111, 208, 204, 0.3); --pin-borde: #0A2322; --pin-relleno: #1A9E9B; --pin-activo: #6FD0CC; --sombra-1: 0 1px 2px rgba(3, 14, 13, 0.5); --sombra-2: 0 10px 28px -14px rgba(3, 14, 13, 0.8); --sombra-3: 0 28px 64px -24px rgba(3, 14, 13, 0.85); } /* ── 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; --borde: #0C4E4C; --borde-fuerte: #031716; --borde-control: #031716; --borde-acento: #031716; --texto: #031716; --texto-2: #0B2B2A; --texto-3: #0B2B2A; --acento-texto: #083B3A; } :root.contraste[data-theme="dark"] { --texto: #FFFFFF; --texto-2: #E6F7F6; --texto-3: #CDEEEE; --fondo: #031716; --fondo-alt: #061917; --fondo-2: #061917; --superficie: #0A2322; --superficie-2: #10302F; --superficie-3: #143B39; --borde: rgba(230, 247, 246, 0.3); --borde-fuerte: rgba(230, 247, 246, 0.48); --borde-control: rgba(230, 247, 246, 0.6); --borde-acento: rgba(111, 208, 204, 0.7); --acento: #2BB3AF; --acento-texto: #A9ECE9; } /* 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); } /* 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; } } /* ── 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(--t-cuerpo); line-height: 1.6; 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); } h1, h2, h3 { color: var(--texto); line-height: 1.2; margin: 0 0 var(--e-2); font-family: var(--f-titulo); font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: 1.75rem; } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } p { margin: 0 0 var(--e-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: 4px; } .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: 16px; top: -100px; z-index: 4000; padding: 10px 16px; background: var(--acento); color: var(--texto-inv); font-weight: 600; border-radius: var(--r-sm); text-decoration: none; transition: top var(--t-medio) var(--ease-out); } .saltar:focus { top: 12px; } .sutil { color: var(--texto-2); font-size: var(--t-control); } .bajada { font-size: var(--t-bajada); 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 20px; } @media (max-width: 480px) { .contenedor { padding: 0 16px; } } /* Encabezado de sección: etiqueta mono chica + título grande. */ .eye { display: block; font-family: var(--f-mono); font-size: var(--t-etiqueta); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento-texto); margin: 0 0 var(--e-3); } .titulo-sec { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-titulo); letter-spacing: -0.032em; line-height: 1.12; margin: 0 0 var(--e-4); max-width: 24ch; } .titulo-portada { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-portada); letter-spacing: -0.035em; line-height: 1.06; margin: 0 0 var(--e-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); } .portada-cierre { margin: var(--e-3) 0 0; font-family: var(--f-titulo); font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; color: var(--texto); max-width: 60ch; } /* ── 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: 18px; 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(--t-rapido) var(--ease); } a.logo:hover { opacity: 0.78; } } /* ── Barra superior ─────────────────────────────────────────────────── */ .barra { position: sticky; top: 0; z-index: 1000; background: var(--fondo); border-bottom: 1px solid var(--borde); } .barra-in { display: flex; align-items: center; gap: var(--e-4); height: var(--barra-alto); } .nav-l { display: none; gap: 2px; font-size: var(--t-control); font-weight: 450; min-width: 0; list-style: none; margin: 0; padding: 0; } .nav-l a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 11px; border-radius: var(--r-sm); color: var(--texto-2); text-decoration: none; white-space: nowrap; touch-action: manipulation; transition: color var(--t-rapido) var(--ease), background-color var(--t-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(--e-2); margin-left: auto; } .barra-acc .btn, .nav-m .btn { min-height: var(--control); white-space: nowrap; } .barra-cuenta { display: none; gap: var(--e-2); } .icono-barra { display: inline-grid; place-items: center; width: var(--control); height: var(--control); flex: 0 0 auto; padding: 0; border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); background: var(--superficie); color: var(--texto); cursor: pointer; touch-action: manipulation; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease); } .icono-barra:hover, .icono-barra[aria-expanded="true"] { background: var(--superficie-2); border-color: var(--borde-acento); } .icono-barra svg { width: 18px; height: 18px; } .tema-sol { display: none; } :root[data-theme="dark"] .tema-sol { display: block; } :root[data-theme="dark"] .tema-luna { 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: 12px; z-index: 999; width: min(86vw, 300px); background: var(--fondo-2); 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(--t-medio) var(--ease-out), transform var(--t-medio) var(--ease-out), visibility 0s linear var(--t-medio); } .nav-m.abierto { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-medio) var(--ease-out), transform var(--t-medio) var(--ease-out), visibility 0s linear 0s; } .nav-m-in { display: flex; flex-direction: column; padding: 4px 18px calc(14px + 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: 1rem; 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(--e-2); margin-top: var(--e-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(--t-medio) var(--ease-out), visibility 0s linear var(--t-medio); } .nav-m-velo.abierto { opacity: 1; visibility: visible; transition: opacity var(--t-medio) var(--ease-out), visibility 0s linear 0s; } @media (min-width: 640px) { .barra-cuenta { display: flex; } .nav-m-cuenta { display: none; } } @media (min-width: 1024px) { .nav-l { display: flex; } .hamburguesa, .nav-m, .nav-m-velo { display: none; } } @media (max-width: 400px) { .logo { font-size: 16.5px; } .barra-in { gap: var(--e-2); } } /* ── Botones ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-align: center; min-height: var(--control); padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto); font: inherit; font-size: var(--t-control); font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease); } .btn:hover { background: var(--superficie-2); border-color: var(--borde-acento); color: var(--texto); } .btn:active { background: var(--superficie-3); } .btn:disabled { background: var(--superficie); border-color: var(--borde); color: var(--texto-3); cursor: not-allowed; } .btn-primario, .btn-p { background: var(--acento); border-color: var(--acento); color: var(--texto-inv); font-weight: 600; } .btn-primario:hover, .btn-p:hover { background: var(--acento-hover); border-color: var(--acento-hover); color: var(--texto-inv); } .btn-primario:active, .btn-p:active { background: var(--acento-activo); border-color: var(--acento-activo); } .btn-primario:disabled { background: var(--acento); border-color: var(--acento); color: var(--texto-inv); opacity: 0.6; cursor: progress; } .btn-p .flecha { transition: transform var(--t-rapido) var(--ease-out); } @media (hover: hover) { .btn-p:hover .flecha { transform: translateX(2px); } } .btn-oscuro { background: var(--invertido); border-color: var(--invertido); color: var(--invertido-texto); font-weight: 600; } .btn-oscuro:hover { background: var(--acento); border-color: var(--acento); color: var(--texto-inv); } .btn-secundario { background: var(--superficie); } .btn-secundario[aria-pressed="true"] { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-texto); } .btn-quitar { color: var(--error); border-color: var(--error-borde); } .btn-quitar:hover { color: var(--error); background: var(--error-suave); border-color: var(--error); } .btn-chico { min-height: var(--control-chico); padding: 0 12px; font-size: var(--t-chico); } .btn-grande { min-height: 44px; padding: 0 22px; font-size: 1rem; width: 100%; } @media (min-width: 640px) { .btn-grande { width: auto; min-width: 14rem; } } .btn-icono { display: inline-grid; place-items: center; width: var(--control); height: var(--control); flex: none; padding: 0; border-radius: var(--r-sm); border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto); font-size: 1.375rem; line-height: 1; cursor: pointer; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease); } .btn-icono:hover { background: var(--superficie-2); border-color: var(--borde-acento); } .btn-icono:disabled { opacity: 0.4; cursor: not-allowed; } .enlace { background: none; border: 0; padding: 0 2px; min-height: 32px; font: inherit; cursor: pointer; color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; } .enlace:hover { text-decoration-thickness: 2px; } /* ── Avisos, carga, vacío ───────────────────────────────────────────── */ .aviso { padding: 12px 16px; 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); } .cargando { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-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(--e-5); text-align: center; } .vacio-titulo { font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-h3); } /* ── Formularios ────────────────────────────────────────────────────── */ .form { display: grid; gap: var(--e-4); } .campo { display: grid; gap: var(--e-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(--t-control); color: var(--texto); } legend { padding: 0; margin-bottom: var(--e-1); } .opc, .req { font-weight: 400; color: var(--texto-3); font-size: var(--t-chico); } 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(--control); padding: 6px 12px; font: inherit; font-size: var(--t-cuerpo); color: var(--texto); background-color: var(--superficie); border: 1px solid var(--borde-control); border-radius: var(--r-sm); transition: border-color var(--t-rapido) var(--ease); } input::placeholder, textarea::placeholder { color: var(--texto-3); opacity: 1; } input:hover, select:hover, textarea:hover { border-color: var(--acento); } select:disabled, input:disabled { opacity: 0.6; cursor: not-allowed; } textarea { resize: vertical; } input[type="file"] { font: inherit; font-size: var(--t-control); 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); } .pista { font-size: var(--t-chico); 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(--e-1) 0 0; font-size: var(--t-control); } .error-campo::before { content: "⚠ "; } .campo-check { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--e-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: 10px; min-height: 36px; } .checks label, .faceta label { font-weight: 400; cursor: pointer; flex: 1; min-height: 36px; display: flex; align-items: center; gap: 6px; } @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(--e-4); } } .dos-col { display: grid; gap: var(--e-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(--e-4); } .privacidad summary { min-height: var(--control); display: flex; align-items: center; cursor: pointer; font-weight: 500; } .privacidad p { font-size: var(--t-control); } /* Contraseña con el ojo (CampoPassword.jsx de Ayudate). */ .campo-pass { position: relative; } .campo-pass input { padding-right: 44px; } .pass-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 36px; 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(--t-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(--e-6) 20px var(--e-7); } .pagina-angosta { max-width: 40rem; } @media (max-width: 480px) { .pagina { padding: var(--e-5) 16px var(--e-6); } } .migas { margin-bottom: var(--e-2); font-size: var(--t-control); } .migas a { display: inline-flex; align-items: center; min-height: 36px; color: var(--texto-2); text-decoration: none; } .migas a:hover { color: var(--texto); } .datos { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); background: var(--superficie); padding: var(--e-4); border-radius: var(--r-md); border: 1px solid var(--borde); margin: var(--e-4) 0; } .datos dt { font-weight: 500; color: var(--texto-2); } .datos dd { margin: 0; } .estado-cita { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: var(--t-chico); letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 12px; 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(--e-5); margin-top: var(--e-5); display: grid; gap: var(--e-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(--e-5); margin-top: var(--e-5); display: grid; gap: var(--e-3); } .soporte-cita .eye { margin: 0; } .hilo { list-style: none; margin: var(--e-4) 0; padding: 0; display: grid; gap: var(--e-3); } .msj { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--e-3) var(--e-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(--e-1); font-size: var(--t-chico); color: var(--texto-2); } .msj-cuerpo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .fila-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; } @media (max-width: 480px) { .fila-acciones > .btn { flex: 1 1 100%; } } .exito { padding: var(--e-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(--e-6) var(--e-5); display: grid; gap: 0; } @media (min-width: 480px) { .mini-card { padding: var(--e-6); } } .mini-card h1 { font-family: var(--f-titulo); font-weight: 400; font-size: 1.6875rem; letter-spacing: -0.032em; line-height: 1.15; margin: 0 0 12px; text-wrap: balance; } .mini-card > p { color: var(--texto-2); margin: 0 0 var(--e-2); } .mini-card .lb { display: block; font-family: var(--f-mono); font-size: var(--t-etiqueta); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento-texto); margin: var(--e-4) 0 var(--e-2); } .mini-card .btn-bloque { margin-top: var(--e-3); } .mini-card .btn-p { margin-top: var(--e-4); } .mini-card .error-campo { margin-top: var(--e-3); } .olvide { justify-self: center; background: none; border: 0; padding: 0; margin: var(--e-3) auto 0; min-height: 36px; color: var(--texto-2); font: inherit; font-size: var(--t-control); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .olvide:hover { color: var(--texto); } .mini-pie { text-align: center; margin-top: var(--e-4); } /* ── Directorio ─────────────────────────────────────────────────────── */ .dir-portada { padding: var(--e-5) 0 var(--e-3); } .estado-busqueda { font-size: var(--t-control); color: var(--texto-2); } .estado-busqueda p { margin: var(--e-3) 0 0; } .estado-busqueda:empty { display: none; } /* Barra de filtros (Bloque 2): UNA franja horizontal sobre --fondo-alt (--salud-100 en claro) encima de la cuadrícula. Tres filas en cascada —Categoría, Provincia, Cantón— y «Cerca de mí» al final. */ .fbarra { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); padding: var(--e-4); background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: var(--r-md); } .fgrupo { display: grid; gap: 6px; min-width: 0; } @media (min-width: 720px) { .fgrupo { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; } } .fg-et { font-family: var(--f-mono); font-size: var(--t-etiqueta); 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(--t-chico); color: var(--texto-2); } .fbarra-pie { display: flex; justify-content: flex-end; border-top: 1px solid var(--borde); padding-top: var(--e-3); } .cuenta { color: var(--texto-3); font-size: var(--t-chico); 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 { --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) { --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) { --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: 6px; min-width: 0; } .fchip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; 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(--t-chico); touch-action: manipulation; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease); } .fchip .punto { margin-right: 2px; } .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(--t-etiqueta); } @media (pointer: coarse), (max-width: 640px) { .fchip { min-height: 44px; } .fchip-chico { min-height: 40px; } } /* Carga sutil: mientras llega la respuesta, la cuadrícula (y la barra) bajan un poco el tono. */ .fbarra[aria-busy="true"] .cuenta { opacity: 0.5; } .resultados-grilla[aria-busy="true"] { opacity: 0.6; transition: opacity var(--t-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(--e-7); } .lista-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); flex-wrap: wrap; } .count { margin: 0; font-family: var(--f-mono); font-size: var(--t-etiqueta); 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: 14px; 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)); } } @media (min-width: 1024px) { .tarjetas-ficha { 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(--t-rapido) var(--ease), box-shadow var(--t-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: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; } .tarjeta p { margin: 0; } .tarjeta-meta { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 6px !important; font-family: var(--f-mono); font-size: var(--t-etiqueta); color: var(--texto-3); letter-spacing: 0.03em; } /* Mezclado con --texto: el color de la categoría sigue leyéndose y el texto pasa AA en los dos temas. */ .tarjeta-meta b { font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--cat-v) 55%, var(--texto)); } .tarjeta-meta span { min-width: 0; overflow-wrap: anywhere; } .tarjeta-tit h3 { font-family: var(--f-titulo); font-weight: 500; font-size: 19px; margin: 0; letter-spacing: -0.022em; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; } .tarjeta-centro { display: flex; gap: 12px; align-items: center; min-width: 0; } .tarjeta-centro > div { min-width: 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: 1rem; } .av-42 { width: 42px; height: 42px; } .tarjeta-nombre { display: block; font-family: var(--f-titulo); font-weight: 500; font-size: 16.5px; line-height: 1.25; letter-spacing: -0.02em; color: var(--texto); text-decoration: none; overflow-wrap: anywhere; hyphens: auto; } .tarjeta-nombre:hover { text-decoration: underline; } .tarjeta-sub { font-size: var(--t-chico); color: var(--texto-3); overflow-wrap: anywhere; } .tarjeta-et { margin: 0 0 4px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento-texto); } .tarjeta-desc { flex: 1; } .desc-texto { font-size: 14.5px; 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(--t-chico); min-height: 28px; } .ver-mas[hidden] { display: none; } .tarjeta-conf { font-size: 13.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; } .tarjeta-pie { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 12px; border-top: 1px solid var(--borde); padding-top: 14px; 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: 23px; line-height: 1; letter-spacing: -0.035em; color: var(--texto); font-variant-numeric: tabular-nums; } .tarjeta-precio .monto-sin { font-size: 16px; letter-spacing: -0.01em; color: var(--texto-2); } .tarjeta-precio .u { font-size: 12.5px; color: var(--texto-3); } .tarjeta-acc { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tarjeta-acc .btn { padding: 0 8px; } .chips-titulo { margin-top: var(--e-2) !important; font-size: var(--t-chico) !important; } .chips { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; } .chip { min-height: var(--control-chico); padding: 0 11px; 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(--t-chico); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease), color var(--t-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: 6px; flex-wrap: wrap; margin-top: 28px; } .pag[hidden] { display: none; } .pbtn { min-width: 38px; height: 38px; padding: 0 11px; border-radius: var(--r-sm); border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-2); font: inherit; font-size: var(--t-control); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease), color var(--t-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; } @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(--e-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(--e-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(--e-3); padding: 8px 16px; min-height: var(--barra-alto); border-bottom: 1px solid var(--borde); } .mapa-cabeza h2 { margin: 0; font-size: var(--t-h3); } .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(--e-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: 1.125rem; } /* ── Cómo funciona (tres pasos) ─────────────────────────────────────── */ .sec { padding: var(--e-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(--e-6); } .tres-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-5) 0; } .paso { border-top: 1px solid var(--borde-fuerte); padding: 20px 28px 0 0; } .paso-k { display: block; font-family: var(--f-mono); font-size: var(--t-etiqueta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento-texto); margin-bottom: var(--e-3); } .paso h3 { font-size: 1.15625rem; margin: 0 0 var(--e-2); } .paso p { font-size: var(--t-cuerpo); color: var(--texto-2); margin: 0; line-height: 1.6; max-width: 36ch; } /* ── Ficha ──────────────────────────────────────────────────────────── */ .ficha-cabeza { display: grid; gap: var(--e-4); background: var(--superficie); padding: var(--e-5); border-radius: var(--r-lg); border: 1px solid var(--borde); grid-template-columns: 64px minmax(0, 1fr); } .ficha-cabeza h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 500; } .ficha-cabeza > .btn { grid-column: 1 / -1; } @media (min-width: 720px) { .ficha-cabeza { grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; } .ficha-cabeza > .btn { grid-column: auto; } .ficha-foto img, .ficha-foto .iniciales { width: 88px; height: 88px; font-size: 1.5rem; } } .ficha-cuerpo { display: grid; gap: var(--e-5); margin-top: var(--e-5); } @media (min-width: 960px) { .ficha-cuerpo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } } .ficha-cuerpo section { margin-bottom: var(--e-5); } .ficha-cuerpo h2 { font-size: var(--t-h3); } .servicios, .profesionales, .contacto, .etiquetas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); } .servicio, .profesional { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); padding: 14px 16px; } .servicio h3, .profesional h3 { font-size: 1rem; } .servicio-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--e-4); } .servicio-precio { font-size: var(--t-control); color: var(--texto-2); font-variant-numeric: tabular-nums; } .profesional { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--e-3); } .profesional p { margin: 0 0 2px; font-size: var(--t-control); } .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: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-sm); } .etiquetas { display: flex; flex-wrap: wrap; gap: 6px; } .etiquetas li { background: var(--superficie-2); padding: 4px 10px; border-radius: var(--r-sm); font-size: var(--t-control); } .contacto li { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; min-height: 36px; } .dato-et { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento-texto); min-width: 6.5rem; } .mapa-chico { height: 14rem; margin-bottom: var(--e-2); } /* ── 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); 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-3); padding: 0 var(--e-4) calc(var(--e-4) + env(safe-area-inset-bottom)); zoom: var(--a11y-zoom); } @media (min-width: 640px) { .dialogo-fondo { align-items: center; padding: var(--e-4); } .dialogo { max-width: 36rem; border-radius: var(--r-lg); padding: 0 var(--e-5) var(--e-5); } } .dialogo-cabeza { position: sticky; top: 0; background: var(--superficie); z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) 0; border-bottom: 1px solid var(--borde); margin-bottom: var(--e-3); } .dialogo-titulo { margin: 0; font-size: var(--t-h2); } .dialogo-titulo:focus { outline: none; } .cita-resumen { background: var(--fondo-2); border-radius: var(--r-sm); padding: var(--e-3); border: 1px solid var(--borde); font-size: var(--t-control); } .pasos { list-style: none; padding: 0; margin: 0 0 var(--e-3); display: flex; flex-wrap: wrap; gap: 2px var(--e-4); font-family: var(--f-mono); font-size: 11.5px; 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: 6px; } .opcion { width: 100%; text-align: left; min-height: var(--control); padding: 10px 14px; 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(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease); } .opcion:hover { background: var(--acento-suave); border-color: var(--acento); } .campo-linea { margin-bottom: var(--e-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: 13px; align-items: center; min-width: 0; } .cita-cabeza-txt { min-width: 0; } .cita-sub { margin: 2px 0 0; font-size: var(--t-chico); color: var(--texto-3); } .cita-servicio { color: var(--acento-texto); font-weight: 500; } .dialogo-cita .eye { margin: var(--e-5) 0 var(--e-3); font-weight: 400; font-size: var(--t-etiqueta); 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: 12px 14px; } .notas p { margin: 0 0 7px; font-size: var(--t-control); 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: 12px; } .calh span { font-family: var(--f-titulo); font-size: 16px; font-weight: 500; text-transform: capitalize; letter-spacing: -0.01em; } .cnav { width: var(--control-chico); height: var(--control-chico); border-radius: var(--r-sm); border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto-2); font-size: 17px; line-height: 1; cursor: pointer; transition: border-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease); } .cnav:hover:not(:disabled) { border-color: var(--acento); color: var(--acento-texto); } .cnav:disabled { opacity: 0.35; cursor: not-allowed; } .calm { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cdd { font-family: var(--f-mono); font-size: var(--t-chico); 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(--t-control); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-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(--t-chico); color: var(--texto-3); margin: 12px 0 0; line-height: 1.55; } .hchips { display: flex; flex-wrap: wrap; gap: 8px; } .hchip { border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie-2); color: var(--texto); padding: 9px 13px; cursor: pointer; text-align: left; font: inherit; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease); } .hchip b { display: block; font-family: var(--f-mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .hchip .hmodo { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; 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(--e-4); display: flex; align-items: center; gap: 10px; border: 1px solid var(--borde-acento); background: var(--acento-suave); border-radius: var(--r-md); padding: 12px 16px; font-size: var(--t-control); line-height: 1.5; color: var(--texto-2); } .reserva-temp b { font-family: var(--f-mono); color: var(--acento-texto); font-size: 16px; 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(--e-3); } .form-cita .eye { margin-bottom: 0; } .tel-fila { display: flex; gap: 8px; } .tel-fila .tel-cod { flex: 0 0 11.5rem; max-width: 45%; } .tel-fila .tel-num { flex: 1 1 auto; min-width: 0; } .tel-tope[hidden] { display: none; } .tel-tope { color: var(--error); } .resumen-cita { border: 1px solid var(--borde); border-radius: var(--r-md); padding: 14px 18px; background: var(--fondo-2); } .resumen-cita .row { display: flex; justify-content: space-between; gap: var(--e-4); padding: 6px 0; font-size: var(--t-control); 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(--t-chico); color: var(--texto-3); margin: 10px 0 0; line-height: 1.55; } .resumen-cita .note b { color: var(--texto-2); } .btn-bloque { width: 100%; min-height: 44px; font-size: 1rem; } .flujo { list-style: none; counter-reset: f; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .flujo li { counter-increment: f; position: relative; padding-left: 30px; font-size: var(--t-control); 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: 12px; font-weight: 600; display: grid; place-items: center; } .flujo li b { color: var(--texto); font-weight: 600; } /* «Ver ubicación» y «Cómo llegar». */ .mapa-ubicacion { height: 16rem; margin: var(--e-3) 0; } .como-llegar { display: flex; flex-wrap: wrap; gap: var(--e-2); } .recibo { display: grid; gap: var(--e-3); padding-bottom: var(--e-2); } .recibo-titulo { font-family: var(--f-titulo); font-size: var(--t-h2); font-weight: 500; background: var(--ok-suave); border-left: 3px solid var(--ok); padding: var(--e-3) var(--e-4); border-radius: var(--r-sm); } .recibo-titulo:focus { outline: 2px solid var(--foco); } /* ── Registro ───────────────────────────────────────────────────────── */ .registro { max-width: 56rem; } .bloque { background: var(--superficie); border-radius: var(--r-lg); padding: var(--e-4); border: 1px solid var(--borde); display: grid; gap: var(--e-4); } @media (min-width: 640px) { .bloque { padding: var(--e-5); } } .bloque h2 { font-size: var(--t-h3); } .repetible { border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--e-4); margin: 0 0 var(--e-4); display: grid; gap: var(--e-4); background: var(--fondo-2); min-width: 0; } .repetible > legend { font-family: var(--f-titulo); font-weight: 500; font-size: 1rem; padding: 0 var(--e-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). */ .servicio-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-3); align-items: start; } .servicio-fila label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .servicio-fila input { height: var(--control); 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(--e-2); } .burbujas:focus { outline: none; } .burbuja { min-height: 40px; padding: 0 14px; font-size: var(--t-control); } .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(--e-1) 0; display: flex; flex-wrap: wrap; gap: 6px; } .cat-burbuja { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--t-chico); 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(--e-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(--t-chico); color: var(--texto-3); } .foto-acciones { display: flex; flex-wrap: wrap; gap: var(--e-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(--e-2); margin-top: var(--e-2); } .pin-estado { margin: var(--e-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(--e-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(--e-3); display: grid; gap: var(--e-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: 11.5px; 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: 4px; 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(--t-chico); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-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: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill); background: var(--invertido); color: var(--invertido-texto); font-style: normal; font-size: 11px; line-height: 18px; text-align: center; } .ghoras { display: flex; flex-direction: column; gap: 6px; } .ghora { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); width: 100%; min-height: 44px; padding: 0 var(--e-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(--t-rapido) var(--ease), border-color var(--t-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(--t-chico); 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(--e-2) var(--e-4); font-size: var(--t-chico); 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: 3px; 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 { margin-left: auto; background: none; border: 0; padding: 0 4px; min-height: 36px; color: var(--texto-3); font: inherit; font-size: var(--t-chico); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .limpiar:hover { color: var(--error); } @media (max-width: 720px) { .grilla-escritorio { display: none; } .grilla-movil { display: block; } } /* ── Planes ─────────────────────────────────────────────────────────── */ .planes-lista { list-style: none; padding: 0; margin: var(--e-4) 0; display: grid; gap: var(--e-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(--e-5); display: flex; flex-direction: column; gap: var(--e-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(--t-h2); font-weight: 500; font-variant-numeric: tabular-nums; } .plan-funciones { padding-left: 1.25rem; margin: 0 0 var(--e-4); flex: 1; color: var(--texto-2); } .plan-funciones li { margin-bottom: var(--e-1); } /* «Elija su plan» dentro del registro: cada tarjeta es la etiqueta de su radio. */ .planes-elegir .planes-lista { margin: var(--e-2) 0; } .plan-opcion { cursor: pointer; height: 100%; transition: border-color var(--t-rapido) var(--ease), background-color var(--t-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(--e-2); } .plan-nombre { font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-h3); } .plan-desc { color: var(--texto-2); font-size: var(--t-control); } .planes-elegir .plan-funciones { margin-bottom: 0; font-size: var(--t-control); } .sin-cobro { margin: 0; } /* ── /pyp · Políticas y preguntas (pestañas) ────────────────────────── */ .pol-cabeza { padding: var(--e-4) 0 var(--e-5); } .pyp-cabeza { margin: 0 0 var(--e-5); } .pyp-tabs { position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; border-bottom: 1px solid var(--borde); } .pyp-tabs::-webkit-scrollbar { display: none; } .pyp-tab { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 14px 12px; background: none; border: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; cursor: pointer; white-space: nowrap; font: inherit; font-size: var(--t-control); font-weight: 500; color: var(--texto-2); touch-action: manipulation; transition: color var(--t-rapido) var(--ease), background-color var(--t-rapido) var(--ease); } .pyp-tab:hover { color: var(--texto); background: var(--superficie-2); } .pyp-tab[aria-selected="true"] { color: var(--texto); } .pyp-tab:focus-visible { outline-offset: -2px; } .pyp-n { font-family: var(--f-mono); font-size: var(--t-etiqueta); letter-spacing: 0.12em; color: var(--acento-texto); font-weight: 400; } /* El indicador: una barra bajo la pestaña activa que se desliza (JS pone ancho y posición). */ .pyp-ind { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; border-radius: 3px 3px 0 0; background: var(--acento); pointer-events: none; transition: transform var(--t-medio) var(--ease-out), width var(--t-medio) var(--ease-out); } .pyp-guia { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--e-4); margin: var(--e-2) 0 0; font-size: var(--t-chico); color: var(--texto-2); } .pyp-cuenta { font-family: var(--f-mono); font-size: var(--t-etiqueta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento-texto); font-variant-numeric: tabular-nums; } .pyp-panel[hidden] { display: none; } .pyp-panel:focus-visible { outline-offset: 6px; } .pol { max-width: 880px; } .pol-n { display: block; font-family: var(--f-mono); font-size: var(--t-etiqueta); letter-spacing: 0.16em; color: var(--acento-texto); margin-bottom: 6px; } .pol h2 { font-size: 1.25rem; margin-bottom: var(--e-3); } .pol p, .pol li { color: var(--texto-2); } .pol b, .pol strong { color: var(--texto); font-weight: 500; } .pol-cita { font-size: var(--t-cuerpo); line-height: 1.65; margin: 0 0 var(--e-4); padding-left: 14px; border-left: 2px solid var(--acento-linea); } /* Tarjetas de política: ícono Solar, título corto y 1–2 líneas. */ .pol-tarjetas { list-style: none; padding: 0; margin: 0 0 var(--e-4); display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .pol-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--e-4); display: grid; gap: 6px; align-content: start; } .pol-tarjeta h3 { font-size: 1rem; margin: 0; } .pol-tarjeta p { margin: 0; font-size: var(--t-control); line-height: 1.55; } .pol-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--acento-suave); color: var(--acento-texto); margin-bottom: 4px; } .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(--e-3); margin: 0 0 var(--e-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(--e-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(--t-etiqueta); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 var(--e-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: 9px; 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: 14px; background: var(--error-suave); border: 1px solid var(--error-borde); border-radius: var(--r-md); padding: 14px 16px; margin: 0 0 var(--e-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(--t-control); margin-top: 2px; } .pol-datos { font-size: var(--t-control); color: var(--texto-2); line-height: 1.6; padding: 12px 14px; 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-top: var(--e-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: 20px; width: 100%; text-align: left; padding: 16px 0; min-height: 44px; background: none; border: 0; cursor: pointer; color: var(--texto); font-family: var(--f-titulo); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; touch-action: manipulation; transition: color var(--t-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: 19px; color: var(--texto-3); flex: 0 0 auto; line-height: 1.2; display: block; transition: transform var(--t-medio) var(--ease-out), color var(--t-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(--t-medio) var(--ease-out), opacity var(--t-medio) var(--ease-out), visibility 0s linear var(--t-medio); } .faqi.on .faqr { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows var(--t-medio) var(--ease-out), opacity var(--t-medio) var(--ease-out), visibility 0s linear 0s; } .faqr > div { min-height: 0; overflow: hidden; } .faqr p { margin: 0 0 18px; font-size: var(--t-cuerpo); color: var(--texto-2); line-height: 1.7; max-width: 66ch; } .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(--t-control); padding: var(--e-7) 0 calc(var(--e-6) + env(safe-area-inset-bottom)); zoom: var(--a11y-zoom); } .pie-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-6); flex-wrap: wrap; } .pie-lb { display: block; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--acento-texto); margin: 10px 0 0; } .pie-cont { display: flex; flex-direction: column; gap: 10px; } .pie-cont .pie-lb { margin: 0; } .fcanal { display: inline-flex; align-items: center; gap: 9px; min-height: var(--control); padding: 0 14px; text-decoration: none; color: var(--texto-2); border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease); } .fcanal:hover { color: var(--texto); border-color: var(--borde-acento); background: var(--superficie-2); } .fcanal svg { width: 15px; height: 15px; flex: none; } .pie-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: var(--e-6) 0 var(--e-4); padding: var(--e-4) 0 0; border-top: 1px solid var(--borde); } .pie-nav a { display: inline-flex; align-items: center; min-height: 36px; color: var(--texto-2); text-decoration: none; } .pie-nav a:hover { color: var(--texto); } .pie-nota { font-size: var(--t-chico); color: var(--texto-3); line-height: 1.6; margin: 0 0 6px; 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(--t-chico); 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); 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); } /* ═══════════════════════════════════════════════════════════════════════ «VER MEJOR LA PÁGINA» (accesibilidad.js) — portado de Ayudate ═══════════════════════════════════════════════════════════════════════ */ .a11y-filtros { position: absolute; width: 0; height: 0; overflow: hidden; } .a11y-btn { position: fixed; right: 20px; bottom: 20px; z-index: 1200; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--acento); background: var(--acento); color: var(--texto-inv); cursor: pointer; display: grid; place-items: center; box-shadow: var(--sombra-2); touch-action: manipulation; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease); } .a11y-btn:hover { background: var(--acento-hover); border-color: var(--acento-hover); } .a11y-btn svg { width: 28px; height: 28px; } .a11y-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--superficie); color: var(--acento-texto); font-family: var(--f-mono); font-size: 12px; font-weight: 500; display: grid; place-items: center; border: 1px solid var(--borde-acento); } .a11y-badge[hidden] { display: none; } @media (max-width: 560px) { .a11y-btn { right: 14px; bottom: 14px; width: 48px; height: 48px; } .a11y-btn svg { width: 25px; height: 25px; } } @keyframes latir { 0%, 100% { box-shadow: 0 0 0 0 var(--acento-linea); } 50% { box-shadow: 0 0 0 9px transparent; } } .a11y-btn.llamando { animation: latir 2.4s ease-in-out infinite; } /* Aviso de bienvenida (primera visita), accesibilidad.js. Escritorio: junto al botón flotante, como el .a11y-tip de ayudatetutorias.com pero más compacto (≤ 256 px, 15 px): en 1366×768 solo roza la esquina inferior derecha del mapa y se va a los 5 s. Móvil (≤ 640 px, .a11y-tip-flujo): bloque EN EL FLUJO entre la barra y el contenido — empuja la página, no tapa los filtros —, con «Entendido» y ×. */ .a11y-tip { position: fixed; right: 84px; bottom: 20px; z-index: 1190; max-width: 256px; background: var(--superficie); border: 1px solid var(--borde-acento); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--sombra-2); } .a11y-tip[hidden] { display: none; } .a11y-tip b { display: block; font-size: 0.9375rem; color: var(--texto); margin-bottom: 4px; } .a11y-tip span { display: block; font-size: 0.9375rem; color: var(--texto-2); line-height: 1.5; } .a11y-tipx { margin-top: 8px; background: none; border: 0; padding: 0; min-height: 32px; cursor: pointer; font: inherit; font-size: 0.9375rem; color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; } .a11y-tip::after { content: ""; position: absolute; right: -7px; bottom: 20px; width: 12px; height: 12px; background: var(--superficie); border-right: 1px solid var(--borde-acento); border-top: 1px solid var(--borde-acento); transform: rotate(45deg); } .a11y-tip-flujo { position: relative; right: auto; bottom: auto; z-index: auto; max-width: none; box-shadow: none; margin: 12px 16px 0; padding: 12px 52px 10px 14px; background: var(--acento-suave); } .a11y-tip-flujo::after { display: none; } .a11y-tip-flujo .a11y-tipx { min-height: 44px; margin-top: 2px; } .a11y-tipc { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; color: var(--texto-2); font: inherit; font-size: 1.5rem; line-height: 1; } .a11y-tipc:hover { color: var(--texto); background: var(--superficie-2); } /* Una ventana angosta sin pasar por móvil al cargar (641–700 px): flotante a lo ancho, sobre el botón. */ @media (max-width: 700px) { .a11y-tip:not(.a11y-tip-flujo) { right: 14px; left: 14px; max-width: none; bottom: 76px; } .a11y-tip::after { display: none; } } .a11y-panel { position: fixed; right: 20px; bottom: 86px; z-index: 1210; width: 340px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: var(--r-lg); box-shadow: var(--sombra-3); font-size: var(--t-cuerpo); } .a11y-panel[hidden] { display: none; } @media (max-width: 560px) { .a11y-panel { right: 10px; left: 10px; width: auto; bottom: 72px; } } .a11y-h { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: 16px 18px 12px; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--superficie); z-index: 2; } .a11y-h h2 { font-size: var(--t-h3); margin: 0; } .a11y-sub { margin: 2px 0 0; font-size: var(--t-chico); color: var(--texto-3); } .a11y-b { padding: 14px 18px 18px; } .a11y-grp { margin-bottom: 18px; } .a11y-lb { display: block; font-family: var(--f-mono); font-size: var(--t-etiqueta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento-texto); margin-bottom: 8px; } .a11y-nota { font-size: var(--t-chico); color: var(--texto-3); line-height: 1.5; margin: 8px 0 0; } .a11y-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .a11y-seg button { min-height: 38px; border-radius: var(--r-sm); border: 1px solid var(--borde); background: var(--fondo-2); color: var(--texto-2); font-family: var(--f-mono); font-size: var(--t-chico); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease); } .a11y-seg button:hover { border-color: var(--borde-acento); color: var(--texto); } .a11y-seg button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--texto-inv); font-weight: 500; } .a11y-list { display: flex; flex-direction: column; gap: 5px; } .a11y-op, .a11y-sw { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--borde); background: var(--fondo-2); color: var(--texto-2); cursor: pointer; font: inherit; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease); } .a11y-op b, .a11y-sw b { display: block; color: var(--texto); font-weight: 600; font-size: var(--t-control); } .a11y-op span, .a11y-swl span { display: block; font-size: var(--t-chico); margin-top: 1px; color: var(--texto-3); line-height: 1.45; } .a11y-op:hover, .a11y-sw:hover { border-color: var(--borde-acento); } .a11y-op[aria-pressed="true"], .a11y-sw[aria-checked="true"] { background: var(--acento-suave); border-color: var(--acento); } .a11y-op[aria-pressed="true"] b { color: var(--acento-texto); } .a11y-sw { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; } .a11y-swt { flex: 0 0 auto; width: 34px; height: 19px; border-radius: 10px; background: var(--superficie-3); border: 1px solid var(--borde-control); position: relative; margin-top: 2px; transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease); } .a11y-swt i { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--texto-3); transition: transform var(--t-rapido) var(--ease-out), background-color var(--t-rapido) var(--ease); } .a11y-sw[aria-checked="true"] .a11y-swt { background: var(--acento); border-color: var(--acento); } .a11y-sw[aria-checked="true"] .a11y-swt i { transform: translateX(15px); background: var(--texto-inv); } .a11y-reset { width: 100%; } /* ── 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; } }