/** * accesibilidad.css — B21 · el widget de accesibilidad, en TODO el front. * * ══════════════════════════════════════════════════════════════════════════ * QUÉ ES ESTO, EN CRISTIANO * * Un botón redondo, abajo a la derecha, en todas las páginas públicas. Al * pulsarlo salen SEIS ajustes. Lo que la persona elija se queda guardado en * su navegador y sigue puesto al cambiar de página y al volver mañana. * * Esto lo pidió Sergio, que tiene TDAH, Asperger y autismo. Una letra * pequeña o una pantalla que se mueve le paran el trabajo. No es un adorno. * ══════════════════════════════════════════════════════════════════════════ * * ── DÓNDE VIVE LA LÓGICA (y por qué no está duplicada) ──────────────────── * * El widget ya existía DENTRO del panel (`panel-app/src/ui.jsx`, * `WidgetAccesibilidad`). No se ha copiado su código: se ha copiado su * CONTRATO, que es lo único que importa para que las dos piezas sean la * misma cosa: * * · la misma llave de guardado ............ `svh_a11y_v1` * · los mismos seis atributos en `` .. data-svh-letra, -contraste, * -quieto, -subrayar, -espaciado, -foco * · los mismos valores ..................... normal|grande|muy-grande|maxima * y `alto` / `si` * * Como los atributos van en ``, las reglas del panel * (`panel.css:1355-1420`, prefijadas con `.svhp`) SIGUEN funcionando sin * tocar una línea. O sea: este widget manda también sobre el panel. * * Y no puede haber dos botones a la vez: `accesibilidad.js` no se monta si * en la página hay panel (ver su cabecera). Cuando el experto del panel * retire su copia —el diff exacto está en el informe—, se quita esa guarda * y queda UNA sola implementación en todo el proyecto. * * ── CERO `!important` ───────────────────────────────────────────────────── * Ni uno. Woodmart se gana por orden de encolado (esta hoja depende de * `svh-componentes`, así que se imprime después) y, en el caso del anillo * de foco —que Woodmart marca `!important`—, redefiniendo SUS variables. * El porqué está contado en `base.css`. */ /* ═══════════════════════════════════════════════════════════════════ * 1 · LOS SEIS AJUSTES * * Cada uno es un atributo en ``. Ninguno pinta un color nuevo: * todos mueven tokens que `contraste.py` ya vigila, así que ningún * modo puede bajar el contraste por debajo del que ya está medido. * ═══════════════════════════════════════════════════════════════════ */ /* ── 1 · TAMAÑO DE LA LETRA ──────────────────────────────────────── Solo crece el texto. `--svh-escala` multiplica los seis tokens de tipografía (ver `tokens.css`); los espacios y las cajas no se tocan, así que nada se sale de la pantalla ni aparece barra horizontal. */ :root[data-svh-letra='grande'] { --svh-escala: 1.15; } :root[data-svh-letra='muy-grande'] { --svh-escala: 1.30; } :root[data-svh-letra='maxima'] { --svh-escala: 1.50; } /* ── 2 · CONTRASTE ALTO ──────────────────────────────────────────── Los grises de apoyo pasan al color del texto normal, y los bordes decorativos pasan al borde fuerte. Todos son tokens que ya existen y que ya están medidos: el contraste solo puede SUBIR, nunca bajar. Funciona igual en claro y en oscuro porque `--svh-texto` y `--svh-borde` ya cambian solos con el modo. 🔴 AMPLIADO EL 23/08/2026, Y MEDIDO ANTES Y DESPUÉS. Antes esta regla movía SOLO cuatro tokens de gris. Medido en la ficha de creador con `getComputedStyle` sobre el elemento pintado: de 197 textos visibles, **24 seguían por debajo de 4,5:1** y **66 por debajo de 7:1**. O sea, el modo existía pero casi no cambiaba nada. Ahora también se refuerzan el borde, el morado de la marca y los cuatro colores del semáforo. Resultado medido: **0 por debajo de 4,5:1** y solo 2 por debajo de 7:1 (los dos botones del aviso de cookies, que ya cumplen AA con 5,50:1). 119 elementos suben, **0 baja**. Los grises crudos (`--svh-gris-*`) NO se tocan: nadie los usa directamente, y moverlos habría cambiado también fondos. */ :root[data-svh-contraste='alto'] body.svh { --svh-texto-suave: var(--svh-texto); --svh-texto-tenue: var(--svh-texto); --svh-estado-inactivo: var(--svh-texto); --svh-borde-suave: var(--svh-borde); /* El borde normal pasa al color del texto: de 3,09:1 a 18,8:1 en claro. */ --svh-borde: var(--svh-texto); /* El morado de la marca, más oscuro. Sigue llevando texto blanco encima (`--svh-marca-texto` no se toca), así que los botones sólidos SUBEN de contraste, no bajan. */ --svh-marca: #2E1065; --svh-marca-hover: #1E0A44; --svh-foco: #2E1065; /* El semáforo. Mismos significados, tonos más oscuros. */ --svh-estado-ok: #064E3B; --svh-estado-curso: #1E3A8A; --svh-estado-avisa: #78350F; --svh-estado-error: #991B1B; } /* En oscuro el refuerzo va al revés: los tonos se ACLARAN. Se cubren los dos caminos, el del sistema operativo y el del interruptor manual, igual que hace `tokens.css`. */ @media (prefers-color-scheme: dark) { :root[data-svh-contraste='alto']:not([data-tema='claro']) body.svh { --svh-borde: var(--svh-texto); --svh-marca: #EDE9FE; --svh-marca-hover: #F5F3FF; --svh-foco: #EDE9FE; --svh-estado-ok: #A7F3D0; --svh-estado-curso: #BFDBFE; --svh-estado-avisa: #FDE68A; --svh-estado-error: #FECACA; } } :root[data-tema='oscuro'][data-svh-contraste='alto'] body.svh { --svh-borde: var(--svh-texto); --svh-marca: #EDE9FE; --svh-marca-hover: #F5F3FF; --svh-foco: #EDE9FE; --svh-estado-ok: #A7F3D0; --svh-estado-curso: #BFDBFE; --svh-estado-avisa: #FDE68A; --svh-estado-error: #FECACA; } /* Los bordes de las tarjetas y los campos, más gruesos: una línea de 1 px desaparece para mucha gente aunque el color cumpla. */ :root[data-svh-contraste='alto'] .svh :where(input, select, textarea, .svh-tarjeta, .svh-caja) { border-width: 2px; } /* ── 3 · PARAR EL MOVIMIENTO ─────────────────────────────────────── No se pone a 0: un `0s` puede saltarse el evento `transitionend` y dejar componentes a medio camino. 1 ms es instantáneo para el ojo y sigue disparando el evento. Es la receta de la propia WCAG (2.3.3). */ :root[data-svh-quieto='si'] body.svh { --svh-transicion: 1ms; } :root[data-svh-quieto='si'] .svh *, :root[data-svh-quieto='si'] .svh *::before, :root[data-svh-quieto='si'] .svh *::after, :root[data-svh-quieto='si'] .svh-a11y * { animation-duration: 1ms; animation-iteration-count: 1; transition-duration: 1ms; } :root[data-svh-quieto='si'] { scroll-behavior: auto; } /* ── 4 · SUBRAYAR LOS ENLACES ────────────────────────────────────── Criterio 1.4.1: no distinguir un enlace SOLO por el color. Se excluyen los que ya son botones y las tarjetas enteras que son un enlace: ahí el subrayado no informa de nada y ensucia. */ :root[data-svh-subrayar='si'] .svh a:not([class*='boton']):not([class*='tarjeta']) { text-decoration-line: underline; text-underline-offset: 3px; } /* ── 5 · MÁS ESPACIO ENTRE LÍNEAS ────────────────────────────────── Las cuatro medidas exactas del criterio 1.4.12 (Text Spacing) de la WCAG 2.2: interlineado 1,5 · separación entre letras 0,12em · separación entre palabras 0,16em · párrafos a 2em. 🔴 ARREGLADO EL 23/08/2026. POR QUÉ NO BASTABA LA HERENCIA. Antes esto se ponía SOLO en `body.svh` y se confiaba en que bajara solo. No baja: el navegador trae de fábrica `letter-spacing: normal` para `button`, `input`, `select` y `textarea` —los controles de formulario no heredan la tipografía—, y encima el propio tema fija 0,02em y 0,03em en tres sitios (`componentes.css:900, 1140, 1186`), que se queda por debajo del 0,12em que pide el criterio. Medido en la ficha de creador: de 263 textos, **248 cambiaban de separación entre letras y solo 190 de interlineado**. Se pone en CADA elemento (`body.svh *`). Medido después, con los desplegables abiertos: **263 de 263** en letras, **263 de 263** en palabras y **259 de 263** en interlineado. La página NO gana barra horizontal: `scrollWidth` sigue siendo 375 en una pantalla de 375. ⚠️ Y una trampa de medida, para que no vuelva a pasar: Woodmart pone `transition: all .25s` en los enlaces. Si se mide justo después de encender la opción, `getComputedStyle` devuelve el valor de PARTIDA y parece que no ha cambiado nada. Hay que esperar a que termine la transición antes de leer. De ahí salió el «3 de 176» de anoche. */ :root[data-svh-espaciado='si'] body.svh { --svh-alto-linea: 1.9; } :root[data-svh-espaciado='si'] body.svh, :root[data-svh-espaciado='si'] body.svh * { letter-spacing: 0.12em; word-spacing: 0.16em; } :root[data-svh-espaciado='si'] body.svh :where(p, li, dd, dt, figcaption) { margin-block-end: 2em; } /* El interlineado va a una lista de elementos de texto y NO a `*`: puesto en todo, rompe las cajas que se apoyan en `line-height: 1` (los iconos y las muestras de letra del propio widget). Con esta lista llegan 259 de 263. */ :root[data-svh-espaciado='si'] body.svh :where( p, li, dd, dt, figcaption, h1, h2, h3, h4, h5, h6, td, th, caption, blockquote, label, summary, legend, a, span, strong, em, small, time, address, button ) { line-height: 1.9; } /* ── 6 · RESALTAR DÓNDE ESTOY ────────────────────────────────────── El anillo de foco pasa de 3 px a 5 px y se separa más del elemento. Se hace moviendo las variables de Woodmart (ver `base.css`): así vale para TODOS los enlaces, botones y casillas de la web, incluidos los suyos, y sin un solo `!important`. */ :root[data-svh-foco='si'] { --wd-otl-width: 5px; --wd-otl-offset: 3px; } /* Y un halo blanco/negro por fuera, para que el anillo se vea igual sobre un fondo claro que sobre uno oscuro (criterio 2.4.13). */ :root[data-svh-foco='si'] .svh :focus-visible, :root[data-svh-foco='si'] .svh-a11y :focus-visible { box-shadow: 0 0 0 9px var(--svh-fondo); } /* ═══════════════════════════════════════════════════════════════════ * 2 · EL BOTÓN Y LA HOJA * ═══════════════════════════════════════════════════════════════════ */ .svh-a11y { position: fixed; inset-inline-end: 1rem; /* `--svh-a11y-abajo` la mueve `accesibilidad.js` cuando el aviso de cookies está abierto: si no, el aviso tapaba el botón en el móvil justo cuando más falta hace (leer el aviso con la letra grande). */ inset-block-end: var(--svh-a11y-abajo, 1rem); z-index: 99998; /* por debajo del aviso de cookies (99999) */ display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; font-family: var(--svh-fuente-cuerpo, system-ui, sans-serif); } .svh-a11y *, .svh-a11y *::before, .svh-a11y *::after { box-sizing: border-box; } /* ── El botón redondo ──────────────────────────────────────────── */ .svh-a11y__boton { display: inline-flex; align-items: center; justify-content: center; /* 56 px: por encima de los 48 que pide el criterio 2.5.8 y de los 44 de Apple. Se escribe con `min-*` porque un `width` lo pisaría cualquier regla de botón del tema padre. */ min-inline-size: 56px; min-block-size: 56px; padding: 0; color: var(--svh-marca-texto); background: var(--svh-marca); border: 2px solid var(--svh-marca); border-radius: var(--svh-radio-full, 999px); /* 28/08/2026 · F4 · EL ANILLO QUE LO SEPARA DE LO QUE HAY DEBAJO. El botón es morado y flota encima de la página. Cuando cae sobre otro botón morado —«Contactar» en la ficha de creador, medido el 28/08— los dos se ven como UNA SOLA MANCHA y no se entiende dónde acaba uno y empieza el otro. Este anillo de 4 px pintado del color del fondo de la página deja siempre una raya limpia alrededor, esté encima de lo que esté. Va delante de la sombra para que la sombra caiga por fuera. */ box-shadow: 0 0 0 4px var(--svh-fondo), var(--svh-sombra-flotante); cursor: pointer; } .svh-a11y__boton:hover { background: var(--svh-marca-hover); border-color: var(--svh-marca-hover); } .svh-a11y__boton svg { inline-size: 30px; block-size: 30px; display: block; } /* ── La hoja de ajustes ────────────────────────────────────────── */ .svh-a11y__hoja { inline-size: min(21rem, calc(100vw - 2rem)); /* `dvh` y no `vh`: en el móvil la barra del navegador se mete y se sale, y con `vh` la hoja se cortaba por abajo. ⚠️ Y el tope va en PÍXELES, no en `rem`. Primer intento: `40rem`. Medido en la web real: la hoja se quedó en **560 px** y el contenido ocupa **662**, así que «Cerrar» quedaba fuera. El motivo es que aquí la raíz mide 14 px (lo pone Woodmart), no 16, y 40rem × 14 = 560. Un `rem` no vale para medir contra la pantalla: no sabes cuánto vale. Y el hueco disponible se calcula, no se pone a ojo. Debajo de la hoja van: el margen de abajo (`--svh-a11y-abajo`, que crece cuando el aviso de cookies está puesto), el botón redondo (56) y su hueco (8). Arriba se reservan 80 px para la cabecera fija de Woodmart. ⚠️ Un número fijo NO vale, y esto se midió: con `100dvh - 160px`, en un móvil de 375 px con el aviso de cookies abierto, el botón sube a 397 px del suelo y la hoja se salía por arriba —su borde superior quedaba en **-297 px**, o sea el título fuera de la pantalla—. Restando `--svh-a11y-abajo` la hoja se encoge sola y se desplaza por dentro; los dos botones del pie se quedan pegados abajo (ver `.svh-a11y__acciones`). */ max-block-size: calc(100dvh - var(--svh-a11y-abajo, 1rem) - 144px); overflow-y: auto; overscroll-behavior: contain; /* que el scroll no arrastre la página */ padding: 1rem; color: var(--svh-texto); background: var(--svh-fondo-tarjeta); border: 1px solid var(--svh-borde); border-radius: var(--svh-radio-md); box-shadow: var(--svh-sombra-flotante); } .svh-a11y__titulo { margin: 0 0 0.25rem; font-size: var(--svh-txt-cuerpo); font-weight: 700; color: var(--svh-texto); } .svh-a11y__pie { margin: 0 0 0.85rem; font-size: var(--svh-txt-micro); line-height: 1.5; color: var(--svh-texto-suave); } .svh-a11y__grupo { border: 0; padding: 0; margin: 0 0 0.85rem; min-inline-size: 0; /* sin esto un fieldset no se encoge */ } .svh-a11y__grupo legend { padding: 0; margin-block-end: 0.4rem; font-weight: 700; font-size: var(--svh-txt-micro); color: var(--svh-texto); } /* ── Los cuatro tamaños de letra ───────────────────────────────── */ .svh-a11y__letras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; } .svh-a11y__letra { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-block-size: 56px; padding: 0.35rem 0.2rem; background: var(--svh-fondo-suave); border: 2px solid var(--svh-borde); border-radius: var(--svh-radio-sm); cursor: pointer; } /* El radio de verdad sigue ahí, encima y transparente: así el teclado y el lector de pantalla funcionan solos, sin una línea de JavaScript. */ .svh-a11y__letra input { position: absolute; inset: 0; opacity: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; } .svh-a11y__letra b { font-weight: 700; line-height: 1; color: var(--svh-texto); } .svh-a11y__letra span { font-size: 0.6875rem; line-height: 1.2; text-align: center; color: var(--svh-texto-suave); } .svh-a11y__letra:has(input:checked) { background: var(--svh-marca); border-color: var(--svh-marca); } .svh-a11y__letra:has(input:checked) b, .svh-a11y__letra:has(input:checked) span { color: var(--svh-marca-texto); } /* ── Los cinco interruptores ───────────────────────────────────── */ .svh-a11y__opciones { display: grid; gap: 0.2rem; margin-block-end: 0.85rem; } .svh-a11y__opcion { display: flex; align-items: flex-start; gap: 0.6rem; min-block-size: 48px; padding: 0.5rem; border-radius: var(--svh-radio-sm); cursor: pointer; } .svh-a11y__opcion:hover { background: var(--svh-fondo-hundido); } .svh-a11y__opcion input { inline-size: 24px; block-size: 24px; flex: 0 0 auto; margin: 0; accent-color: var(--svh-marca); cursor: pointer; } .svh-a11y__opcion span { font-size: var(--svh-txt-micro); font-weight: 600; color: var(--svh-texto); } .svh-a11y__opcion em { display: block; font-style: normal; font-weight: 400; line-height: 1.45; color: var(--svh-texto-suave); } /* ── Los dos botones del pie de la hoja ──────────────────────────── Pegados abajo (`sticky`): en una pantalla baja la hoja se desplaza por dentro, y sin esto «Cerrar» se iba fuera de la vista. Medido: el contenido son 662 px y en una ventana de 757 px caben 685. */ .svh-a11y__acciones { position: sticky; inset-block-end: -1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.25rem; padding-block: 0.5rem 1rem; background: var(--svh-fondo-tarjeta); } .svh-a11y__accion { flex: 1 1 8rem; min-block-size: 48px; padding: 0.6rem 0.8rem; font: inherit; font-size: var(--svh-txt-micro); font-weight: 600; color: var(--svh-texto); background: transparent; border: 2px solid var(--svh-borde); border-radius: var(--svh-radio-sm); cursor: pointer; } .svh-a11y__accion:hover { background: var(--svh-fondo-hundido); } .svh-a11y__accion--cerrar { color: var(--svh-marca-texto); background: var(--svh-marca); border-color: var(--svh-marca); } .svh-a11y__accion--cerrar:hover { background: var(--svh-marca-hover); border-color: var(--svh-marca-hover); } /* ── El aviso que lee el lector de pantalla ──────────────────────── Se oculta a la vista pero NO al lector: `display:none` o `visibility:hidden` lo callarían, y entonces quien no ve la pantalla no se enteraría de que su ajuste se ha aplicado. */ .svh-a11y__dicho { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── Móvil ───────────────────────────────────────────────────────── A 375 px la hoja ocupa casi todo el ancho; se ancla a los dos lados para que no se salga por la derecha. */ @media (max-width: 480px) { /* 🔴 28/08/2026 · F4 · EL BOTÓN SE PASA A LA DERECHA, COMO EN ESCRITORIO. ANTES estaba a la izquierda, y ahí es donde caen los enlaces y los filtros de casi todas las pantallas. Medido el 28/08 en las 7 pantallas a 375 × 812, contando los píxels de botón o enlace que quedan tapados: tamaño izquierda derecha 56 px 3.586 px² · peor 76 % 2.602 px² · peor 33 % 48 px 2.505 px² · peor 65 % 1.663 px² · peor 33 % El peor caso de la izquierda era «Ver todos» de la portada, tapado al 76 %. A la derecha y con 48 px no se toca. Se elige 48 px y derecha: **−54 % de superficie tapada** y ningún enlace por encima del 33 %. 48 px sigue por encima de los 44 de Apple y de los 24 que pide el criterio 2.5.8 de la WCAG 2.2. La hoja de ajustes se ancla también a la derecha y mantiene su ancho: de un margen al otro, sin salirse. */ .svh-a11y { inset-inline: auto 1rem; align-items: flex-end; } .svh-a11y__hoja { inline-size: calc(100vw - 2rem); } .svh-a11y__boton { min-inline-size: 48px; min-block-size: 48px; } .svh-a11y__boton svg { inline-size: 26px; block-size: 26px; } } /* Quien ya lo pidió en su sistema operativo no tiene que pedirlo aquí. */ @media (prefers-reduced-motion: reduce) { .svh-a11y *, .svh-a11y *::before, .svh-a11y *::after { animation-duration: 1ms; transition-duration: 1ms; } } /* ═══════════════════════════════════════════════════════════════════ * 26/08/2026 · LOS TRES INTERRUPTORES QUE FALTABAN (svh-a11y-widget) * El usuario que los pidió es el dueño: migrañas, fotofobia, TDAH. * No son un adorno. Cero !important, como todo lo de esta hoja. * ═══════════════════════════════════════════════════════════════════ */ /* ── 7 · Colores seguros para daltonismo ───────────────────────────── La pareja verde/rojo del semáforo pasa a azul/naranja (la paleta segura de Okabe-Ito): se distinguen con cualquier tipo de daltonismo. El significado no cambia; el tono sí. Y los enlaces van SIEMPRE subrayados: el color deja de ser la única pista. Contrastes medidos sobre claro: azul 5,0:1 · naranja 5,0:1 · ámbar 5,3:1. */ :root[data-svh-daltonismo='si'] body.svh { --svh-estado-ok: #0072B2; --svh-estado-ok-fondo: #E8F1F8; --svh-estado-error: #B24E00; --svh-estado-error-fondo: #FBEEE0; --svh-estado-avisa: #7A6200; --svh-estado-avisa-fondo: #FDF6D8; } :root[data-svh-daltonismo='si'] .svh a:not(.svh-boton) { text-decoration: underline; } /* En oscuro, los mismos significados con tonos claros. Dos caminos, como siempre: el del sistema y el del interruptor manual. */ @media (prefers-color-scheme: dark) { :root[data-svh-daltonismo='si']:not([data-tema='claro']) body.svh { --svh-estado-ok: #56B4E9; --svh-estado-ok-fondo: #0B2A3D; --svh-estado-error: #F0A05A; --svh-estado-error-fondo: #3A2410; --svh-estado-avisa: #E6C84A; --svh-estado-avisa-fondo: #33290A; } } :root[data-tema='oscuro'][data-svh-daltonismo='si'] body.svh { --svh-estado-ok: #56B4E9; --svh-estado-ok-fondo: #0B2A3D; --svh-estado-error: #F0A05A; --svh-estado-error-fondo: #3A2410; --svh-estado-avisa: #E6C84A; --svh-estado-avisa-fondo: #33290A; } /* ── 8 · Lectura fácil ─────────────────────────────────────────────── MÁS que el espaciado (que ya existe): texto a la izquierda (nunca justificado), sin partir palabras, sin MAYÚSCULAS decorativas y sin cursivas — las cuatro cosas que más cuestan con dislexia. */ :root[data-svh-facil='si'] body.svh { line-height: 1.8; letter-spacing: 0.01em; word-spacing: 0.08em; } :root[data-svh-facil='si'] .svh :where(p, li, dd, figcaption) { text-align: left; hyphens: none; } :root[data-svh-facil='si'] .svh :where(h1, h2, h3, h4, button, .svh-boton) { text-transform: none; } :root[data-svh-facil='si'] .svh :where(em, i, cite) { font-style: normal; } /* ── 9 · Lectura cómoda ────────────────────────────────────────────── Fuera el blanco puro: fondo crema y tinta cálida, para migrañas y fotofobia. SOLO en modo claro a propósito: el oscuro ya es de bajo deslumbramiento, y pisárselo a quien lo eligió sería peor. Contrastes medidos sobre el crema: tinta 11,7:1 · suave 7,1:1 · tenue 4,9:1. Los dos caminos del claro, como en `tokens.css`. */ @media (prefers-color-scheme: light) { :root[data-svh-comodo='si']:not([data-tema='oscuro']) body.svh { --svh-fondo: #F3ECDC; --svh-fondo-tarjeta: #FAF5E8; --svh-fondo-suave: #EEE5D0; --svh-fondo-hundido: #E6DBC2; --svh-texto: #33291A; --svh-texto-suave: #554A35; --svh-texto-tenue: #6E634C; --svh-borde: #B4A784; --svh-borde-suave: #D6CBAE; } } :root[data-tema='claro'][data-svh-comodo='si'] body.svh { --svh-fondo: #F3ECDC; --svh-fondo-tarjeta: #FAF5E8; --svh-fondo-suave: #EEE5D0; --svh-fondo-hundido: #E6DBC2; --svh-texto: #33291A; --svh-texto-suave: #554A35; --svh-texto-tenue: #6E634C; --svh-borde: #B4A784; --svh-borde-suave: #D6CBAE; }