/* ═══════════════════════════════════════════════════════════════════════ 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: claro (la paleta de Ayudate Salud) y oscuro (los tonos EXACTOS de Ayudate tutorías, websitescr/src/estilos/global.js). 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) ───────────────────────────────── */ :root { color-scheme: light; /* primitivos de la paleta de Ayudate Salud */ --salud-50: #F3FBFB; --salud-100: #CDEEEE; --salud-300: #6FD0CC; --salud-500: #1A9E9B; --salud-900: #0C4E4C; /* superficies */ --fondo: var(--salud-50); --fondo-2: #E8F6F6; --superficie: #FFFFFF; --superficie-2: var(--salud-100); --superficie-3: #B9E4E3; /* bordes: decorativo, fuerte y de control (≥ 3:1 contra la superficie) */ --borde: #D3E9E8; --borde-fuerte: #9CCFCD; --borde-control: #5E8C8A; --borde-acento: var(--salud-500); /* texto */ --texto: var(--salud-900); --texto-2: #2E6664; --texto-3: #436E6C; --texto-inv: #04211F; /* acento: botones sólidos llevan --texto-inv encima (5,16:1) */ --acento: var(--salud-500); --acento-hover: #2BB3AF; --acento-activo: var(--salud-300); --acento-texto: #0F7471; --acento-suave: #E2F5F4; --acento-linea: var(--salud-300); --invertido: var(--salud-900); --invertido-texto: var(--salud-50); /* estados */ --foco: var(--salud-900); --error: #A4262C; --error-suave: #FDECEC; --error-borde: #E3A3A6; --ok: #1B6B3A; --ok-suave: #E4F5EA; --velo: rgba(4, 33, 31, 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 neutra (nunca teñida de acento) */ --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 (valores exactos de Ayudate) ─────────────────── Dos veces el mismo bloque: una para quien no eligió y tiene el sistema en oscuro, otra para quien eligió oscuro. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --fondo: #09090B; --fondo-2: #0E0E11; --superficie: #141417; --superficie-2: #1A1A1E; --superficie-3: #212126; --borde: rgba(255, 255, 255, 0.09); --borde-fuerte: rgba(255, 255, 255, 0.15); --borde-control: #6B6B73; --borde-acento: rgba(20, 184, 166, 0.42); --texto: #F8FAFC; --texto-2: #9AA9BA; --texto-3: #7C8B9C; --texto-inv: #04211F; --acento: #14B8A6; --acento-hover: #2DD4BF; --acento-activo: #0D9488; --acento-texto: #67E8F9; --acento-suave: rgba(20, 184, 166, 0.09); --acento-linea: rgba(20, 184, 166, 0.28); --invertido: #F8FAFC; --invertido-texto: #09090B; --foco: #67E8F9; --error: #F87171; --error-suave: rgba(248, 113, 113, 0.09); --error-borde: rgba(248, 113, 113, 0.35); --ok: #2DD4BF; --ok-suave: rgba(45, 212, 191, 0.09); --velo: rgba(0, 0, 0, 0.6); --seleccion: rgba(20, 184, 166, 0.28); --pin-borde: #09090B; --pin-relleno: #14B8A6; --pin-activo: #67E8F9; --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5); --sombra-2: 0 10px 28px -14px rgba(0, 0, 0, 0.8); --sombra-3: 0 28px 64px -24px rgba(0, 0, 0, 0.85); } } :root[data-theme="dark"] { color-scheme: dark; --fondo: #09090B; --fondo-2: #0E0E11; --superficie: #141417; --superficie-2: #1A1A1E; --superficie-3: #212126; --borde: rgba(255, 255, 255, 0.09); --borde-fuerte: rgba(255, 255, 255, 0.15); --borde-control: #6B6B73; --borde-acento: rgba(20, 184, 166, 0.42); --texto: #F8FAFC; --texto-2: #9AA9BA; --texto-3: #7C8B9C; --texto-inv: #04211F; --acento: #14B8A6; --acento-hover: #2DD4BF; --acento-activo: #0D9488; --acento-texto: #67E8F9; --acento-suave: rgba(20, 184, 166, 0.09); --acento-linea: rgba(20, 184, 166, 0.28); --invertido: #F8FAFC; --invertido-texto: #09090B; --foco: #67E8F9; --error: #F87171; --error-suave: rgba(248, 113, 113, 0.09); --error-borde: rgba(248, 113, 113, 0.35); --ok: #2DD4BF; --ok-suave: rgba(45, 212, 191, 0.09); --velo: rgba(0, 0, 0, 0.6); --seleccion: rgba(20, 184, 166, 0.28); --pin-borde: #09090B; --pin-relleno: #14B8A6; --pin-activo: #67E8F9; --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5); --sombra-2: 0 10px 28px -14px rgba(0, 0, 0, 0.8); --sombra-3: 0 28px 64px -24px rgba(0, 0, 0, 0.85); } /* ── Tokens · «Contraste reforzado» (panel de accesibilidad) ─────────── */ :root.contraste:not([data-theme="dark"]) { --fondo: #FFFFFF; --fondo-2: #FFFFFF; --superficie: #FFFFFF; --superficie-2: #E6F4F4; --borde: #0C4E4C; --borde-fuerte: #000000; --borde-control: #000000; --borde-acento: #000000; --texto: #000000; --texto-2: #0B2B2A; --texto-3: #0B2B2A; --acento-texto: #083B3A; } :root.contraste[data-theme="dark"] { --texto: #FFFFFF; --texto-2: #E2E8F0; --texto-3: #CBD5E1; --fondo: #000000; --fondo-2: #080A10; --superficie: #101014; --superficie-2: #16161C; --superficie-3: #1E1E26; --borde: rgba(255, 255, 255, 0.30); --borde-fuerte: rgba(255, 255, 255, 0.48); --borde-control: rgba(255, 255, 255, 0.6); --borde-acento: rgba(103, 232, 249, 0.6); --acento: #2DD4BF; --acento-texto: #A5F3FC; } /* 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%; } a { color: var(--texto); text-decoration: underline; text-decoration-color: var(--acento-linea); text-underline-offset: 0.2em; } a:hover { color: var(--acento-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(--texto-3); 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; } /* ── 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; } .a11y-barra { display: none; } .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; } .a11y-barra { display: inline-grid; } .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(--texto-3); 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); } .buscador { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 12px 14px; box-shadow: var(--sombra-1); margin-bottom: var(--e-4); } .busqueda { display: grid; gap: var(--e-2); } .busqueda label, .busqueda legend { font-size: var(--t-chico); } .combo { position: relative; } .combo-lista { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; left: 0; right: 0; top: 100%; z-index: 800; background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--r-md); box-shadow: var(--sombra-2); max-height: 20rem; overflow: auto; overscroll-behavior: contain; } .combo-lista li { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: 4px 10px; cursor: pointer; border-radius: var(--r-sm); } .combo-lista li[aria-selected="true"], .combo-lista li:hover { background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento); } .combo-tipo { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-3); } .donde-fila { display: grid; gap: var(--e-2); } @media (min-width: 640px) { .donde-fila { grid-template-columns: 1fr 1fr auto; } } @media (min-width: 960px) { .busqueda { grid-template-columns: 1.3fr 1.7fr auto; align-items: end; } } .estado-busqueda { font-size: var(--t-control); color: var(--texto-2); } .estado-busqueda p { margin: var(--e-3) 0 0; } .estado-busqueda strong { color: var(--texto); font-variant-numeric: tabular-nums; } /* Resultados: filtros | (mapa + grilla 3 × 3 + páginas). */ .resultados { display: grid; gap: var(--e-4); padding-bottom: var(--e-7); } .filtros details { background: var(--superficie); border-radius: var(--r-md); padding: 0 var(--e-4); border: 1px solid var(--borde); } .filtros summary { min-height: var(--control); display: flex; align-items: center; font-weight: 500; cursor: pointer; } .filtros [data-facetas] { display: grid; gap: var(--e-3); padding-bottom: var(--e-4); } .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(--acento-linea); box-shadow: 0 0 0 1px var(--borde-fuerte); } /* Bloques de filtro: título que pliega + «Limpiar»; chips con estado presionado. */ .fbloque { border-top: 1px solid var(--borde); padding-top: var(--e-2); } .fbloque:first-child { border-top: 0; padding-top: 0; } .fb-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); } .fb-h { margin: 0; font: inherit; letter-spacing: normal; } .fb-titulo { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--control-chico); padding: 0; background: none; border: 0; cursor: pointer; font-family: var(--f-mono); font-size: var(--t-etiqueta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-3); touch-action: manipulation; transition: color var(--t-rapido) var(--ease); } .fb-titulo:hover { color: var(--texto); } .fb-titulo i { font-style: normal; font-size: 15px; line-height: 1; transition: transform var(--t-medio) var(--ease-out); } .fb-titulo[aria-expanded="true"] i { transform: rotate(45deg); } .fb-limpiar { font-size: var(--t-chico); min-height: 28px; } .fb-cuerpo { padding: var(--e-1) 0 var(--e-2); } .fb-sub { margin: var(--e-1) 0 6px; font-size: var(--t-chico); color: var(--texto-2); } .fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--e-1); } .fchip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--borde); 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:hover { color: var(--texto); border-color: var(--borde-fuerte); 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.75; } .fchip:disabled { opacity: 0.45; cursor: not-allowed; } @media (pointer: coarse), (max-width: 640px) { .fchip { min-height: 44px; } } /* Cabecera de la lista: «1–9 de 40 ofertas» (mono, como Ayudate) y «Ver en mapa». */ .lista { min-width: 0; } .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(--texto-3); 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 { --cat: var(--acento); display: flex; flex-direction: column; overflow: hidden; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); transition: background-color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease); } .tarjeta:hover { border-color: var(--borde-fuerte); } .tarjeta.resaltada { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); } .tarjeta-barra { height: 2px; background: var(--cat); opacity: 0.55; transition: opacity var(--t-rapido) var(--ease); } .tarjeta:hover .tarjeta-barra, .tarjeta.resaltada .tarjeta-barra { opacity: 1; } .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) 55%, var(--texto)); } .tarjeta-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tarjeta-tit h3 { font-family: var(--f-titulo); font-weight: 500; font-size: 19px; margin: 0; letter-spacing: -0.022em; line-height: 1.25; } .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: hidden; text-overflow: ellipsis; white-space: nowrap; } .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(--texto-3); } .tarjeta-espacios .chips { margin: 0; gap: 5px; } .chip-chico { min-height: 30px; padding: 0 8px; font-size: 12px; } @media (pointer: coarse), (max-width: 640px) { .chip-chico { min-height: 40px; } } .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: 3; line-clamp: 3; 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 .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 .u { display: block; margin-top: 6px; 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; } } @media (min-width: 1100px) { .resultados { grid-template-columns: 236px minmax(0, 1fr); column-gap: var(--e-5); align-items: start; } .filtros { position: sticky; top: calc(var(--barra-alto) + 16px); max-height: calc(100vh - var(--barra-alto) - 32px); overflow: auto; overscroll-behavior: contain; } .filtros details { border: 0; padding: 0; background: none; } .filtros details > summary { pointer-events: none; list-style: none; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto); min-height: 0; margin-bottom: var(--e-2); } .filtros details > summary::-webkit-details-marker { display: none; } } .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 .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(--texto-3); 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); } .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; } .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; } /* ── Políticas y preguntas ──────────────────────────────────────────── */ .pol-cabeza { padding: var(--e-4) 0 var(--e-5); } .pol-indice { display: flex; flex-wrap: wrap; gap: 6px var(--e-4); list-style: none; padding: 0; margin: 0 0 var(--e-6); font-size: var(--t-control); } .pol-indice a { color: var(--texto-2); } .pol { max-width: 820px; } .pol section { padding: var(--e-5) 0; border-top: 1px solid var(--borde); scroll-margin-top: calc(var(--barra-alto) + 16px); } .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-3); padding-left: 14px; border-left: 2px solid var(--acento-linea); } .check { list-style: none; padding: 0; margin: 0 0 var(--e-3); 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(--acento-texto); font-family: var(--f-mono); } .check.no li::before { content: '−'; color: var(--error); } .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; width: 26px; height: 26px; border-radius: var(--r-sm); border: 1px solid var(--error-borde); color: var(--error); font-family: var(--f-mono); font-weight: 500; display: grid; place-items: center; line-height: 1; } .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-2); 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(--texto-3); 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; } .a11y-tip { position: fixed; right: 86px; bottom: 22px; z-index: 1190; max-width: 280px; background: var(--superficie); border: 1px solid var(--borde-acento); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--sombra-2); } .a11y-tip[hidden] { display: none; } .a11y-tip b { display: block; color: var(--texto); margin-bottom: 4px; } .a11y-tip span { display: block; color: var(--texto-2); line-height: 1.55; } .a11y-tipx { margin-top: 10px; background: none; border: 0; padding: 0; min-height: 32px; cursor: pointer; font: inherit; color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; } .a11y-tip::after { content: ""; position: absolute; right: -7px; bottom: 22px; width: 12px; height: 12px; background: var(--superficie); border-right: 1px solid var(--borde-acento); border-top: 1px solid var(--borde-acento); transform: rotate(45deg); } @media (max-width: 700px) { .a11y-tip { 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; } }