/* ========================================================================== Tunutriplan · Accesibilidad (tema 1.0.24 con el plugin 1.33.0, #2007) Repaso de las opciones de accesibilidad (tamaño del texto, más contraste, reducir movimiento y, nuevo, subrayar los enlaces) en la app, el puesto y la web, en claro y en oscuro, en el ordenador y en el móvil. Va la última (después de los modos oscuros) para poder corregirlos. Las opciones llegan a como data-texto, data-contraste, data-movimiento y data-enlaces (inc/setup.php). ========================================================================== */ /* ---------- Foco visible al navegar con el teclado (WCAG 2.4.7) ---------- Un anillo claro y grueso en todo lo que se puede tocar, también donde la hoja de estilos de un componente lo quitaba. No sale con el ratón ni con el dedo (:focus-visible) ni en lo que recibe el foco por código (tabindex=-1). */ :root { --a11y-foco: #2F5D50; } html.oscuro { --a11y-foco: #9CCBB9; } :where(a, button, input:not([type="checkbox"]):not([type="radio"]), select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"], [role="switch"]):focus-visible { outline: 3px solid var(--a11y-foco) !important; outline-offset: 2px !important; } /* Casillas, radios e interruptores dibujados: el anillo va en lo que se ve. */ :where(.a11y-tam, .tnp-tam, .tnp-seg-tema label, .tnp-buzon-chip) input:focus-visible + span, .a11y-interruptor input:focus-visible + .a11y-pista, .tnp-interruptor input:focus-visible + .tnp-interruptor-pista, .tnp-su-interruptor input:focus-visible + .tnp-su-pista { outline: 3px solid var(--a11y-foco) !important; outline-offset: 2px !important; } /* ---------- Lo enfocado no queda debajo de las barras fijas (WCAG 2.4.11) ---------- En la app, la barra de arriba y la de pestañas (en el móvil, abajo) son fijas: al tabular o seguir un enlace, el navegador deja ese hueco. Con el texto más grande las barras crecen, y el hueco también. */ html:has(body .tabbar) { scroll-padding-top: calc(76px * var(--tnp-z, 1)); } /* En la web, la cabecera fija (.cab) tampoco tapa lo enfocado ni el destino de un ancla (#accesibilidad…). */ html:has(body > .cab, body .cab) { scroll-padding-top: calc(80px * var(--tnp-z, 1)); } @media (max-width: 899px) { html:has(body .tabbar) { scroll-padding-bottom: calc(84px * var(--tnp-z, 1) + env(safe-area-inset-bottom, 0px)); } } /* ---------- Tamaño del texto ---------- La página crece con «zoom»: lo que mide «lo que mide la pantalla» (vw, vh) se divide por el zoom para seguir cabiendo. */ /* El desplegable «Accesibilidad» del puesto se salía por la izquierda en el móvil. */ html[data-texto] .a11y-pop-panel { width: min(340px, calc(100vw / var(--tnp-z) - 24px)); } .a11y-pop-panel { max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; } html[data-texto] .a11y-pop-panel { max-height: calc(100vh / var(--tnp-z) - 90px); } /* En el móvil, con el texto grande, el buscador del puesto se quedaba en la primera fila con 40vw (la regla de base.css ganaba a la del móvil) y echaba el título. */ @media (max-width: 960px) { html[data-texto] .tnp-ws-busca { width: 100%; } /* El desplegable «Accesibilidad» se abre a lo ancho, debajo de la barra (no desde el botón, que en el móvil no siempre está en el borde). */ .tnp-ws-top .a11y-pop { position: static; } .tnp-ws-top .a11y-pop-panel, html[data-texto] .tnp-ws-top .a11y-pop-panel { left: 12px; right: 12px; top: calc(100% + 6px); width: auto; max-width: 420px; margin-left: auto; max-height: calc(100vh / var(--tnp-z, 1) - var(--tnp-ws-top, 120px) / var(--tnp-z, 1) - 24px); } } /* Los tres tamaños («Normal», «Grande», «Muy grande») no caben en una fila con el texto grande. */ html[data-texto] .tnp-seg-tema.tnp-ajuste-tamanos { grid-template-columns: minmax(0, 1fr); border-radius: 20px; } html[data-texto] .tnp-seg-tema.tnp-ajuste-tamanos span { min-height: 44px; } @media (max-width: 380px) { .tnp-ajuste-tamanos .tnp-tam-muy-grande span { font-size: 16.5px; } } /* Los nombres de las recetas no se cortan a las dos líneas con el texto grande. */ html[data-texto] :is(.tnp-dc-tit, .tnp-rc-tit, .tnp-herr-receta-tit, .tnp-el-rec-tit, .tnp-tu-perfil-v, .tnp-tu-herr-txt small) { -webkit-line-clamp: 4; line-clamp: 4; } html[data-texto="muy-grande"] .tnp-dc.is-ahora .tnp-dc-tit { -webkit-line-clamp: 5; line-clamp: 5; } /* 1.40.0 (verifui): en Recetas y en «Más recetas como esta» el nombre va entero (#2020: hasta 6 líneas); la regla de arriba lo dejaba en 4 justo con el texto grande («Gachas de avena con plátano y mantequilla…»). Con la letra más grande, alguna línea más. */ html[data-texto] :is(.tnp-recetario, .tnp-rt-rejilla) .tnp-rc-tit { -webkit-line-clamp: 8; line-clamp: 8; } /* ---------- Más contraste ---------- */ /* En oscuro, el día elegido de la tira de días de la app llevaba letra blanca sobre verde claro (2,4:1; con «Más contraste», 1,8:1). Letra oscura, como los botones verdes en oscuro. */ html.oscuro .tnp-ag-chip.is-sel, html.oscuro .tnp-ag-chip.is-sel * { color: #16201C; } /* En el desplegable del puesto, las opciones no llevan un segundo borde de tarjeta. */ html[data-contraste="alto"] .a11y-pop .a11y-opciones { box-shadow: none; } /* La etiqueta «Borrador» del método (3,4:1). */ .tnp-metodo-borrador { color: #7A4F0E; } html.oscuro .tnp-metodo-borrador { color: #E8B866; } /* Lo mismo que «Más contraste» cuando el dispositivo lo pide (prefers-contrast: more), como ya pasaba con «reducir movimiento»: el interruptor sale puesto y lo explica. Copia de base.css y de los modos oscuros: si cambian allí, cambian aquí. */ @media (prefers-contrast: more) { :root { --carbon: #0F1714; --gris: #3D4A44; --borde: #8A8174; --ambar-oscuro: #8A4A10; --exito: #2E7356; --aviso: #8A5A12; --error: #9A3423; --tnp-texto: #0F1714; --tnp-texto-suave: #3D4A44; --tnp-borde: #8A8174; --tnp-terracota: #8A4A10; --tnp-exito: #2E7356; --tnp-aviso: #8A5A12; --tnp-error: #9A3423; } html.oscuro { --carbon: #FFFFFF; --gris: #D5DED9; --borde: #7D8F86; --verde: #9CCBB9; --verde-hover: #AED6C6; --ambar-oscuro: #F2BE8A; --exito: #7CC7A3; --aviso: #E8B866; --error: #EE9580; --tnp-texto: #FFFFFF; --tnp-texto-suave: #D5DED9; --tnp-borde: #7D8F86; --tnp-verde: #9CCBB9; --tnp-verde-claro: #9CCBB9; --tnp-terracota: #F2BE8A; --tnp-exito: #7CC7A3; --tnp-aviso: #E8B866; --tnp-error: #EE9580; } html :is(.card, .tnp-card, .tnp-tu-plegable, .herr-tarjeta, .esquema-mas-item, .tnp-recipe-card) { box-shadow: 0 0 0 1px var(--borde); } html p a:not(.btn):not(.tnp-btn) { text-decoration: underline; text-underline-offset: 3px; } html .a11y-pop .a11y-opciones { box-shadow: none; } } /* ---------- Subrayar los enlaces (nuevo, data-enlaces="subrayados") ---------- Los enlaces dentro de un texto, siempre subrayados (sin depender del color, WCAG 1.4.1). No los botones, ni los menús, ni las pestañas. */ html[data-enlaces="subrayados"] :is(p, li, td, dd, dt, label, small, figcaption, blockquote, .tnp-nutri-muted, .tnp-celda-sub, .sec) a:not([class*="btn"]):not([role="tab"]):not([role="button"]), html[data-enlaces="subrayados"] .tnp-cu-nombre, html[data-enlaces="subrayados"] .tnp-nutri-back { text-decoration: underline !important; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } html[data-enlaces="subrayados"] :is(nav, .tabbar, .tnp-ws-menu, .tnp-seg, .tnp-nutri-subtabs) a { text-decoration: none !important; } /* 1.0.25 (#2007): tampoco las filas de menú con su icono (Tú › Preguntas frecuentes, Escríbenos, Legal, Recetas guardadas…): son botones de la app, no enlaces de un texto, y subrayadas quedaban unas sí y otras no (las que son