/* ========================================================= tokens.css — EL ÚNICO SITIO DONDE SE DECIDE UN COLOR RUTH.il ───────────────────────────────────────────────────────── POR QUÉ EXISTE ESTE ARCHIVO ───────────────────────────────────────────────────────── De las 29 hojas de estilo del proyecto, 18 abrían con su propio bloque :root, entre 32 y 82 variables cada una. El resultado medido: 85 variables distintas declaradas 65 de ellas con MÁS DE UN valor según el archivo Es decir: el mismo nombre significaba cosas distintas según en qué pantalla estuvieras. --accent tenía diez valores. --f-body, que decide la tipografía de TODO el texto, tenía siete: Manrope en el escritorio de la notaría, Brother 1816 en administración, Roboto en el registro de cliente. Nadie eligió eso. Pasó porque cada pantalla se escribió por separado y copió el bloque de la anterior cambiando un par de valores. ───────────────────────────────────────────────────────── CÓMO SE USA ───────────────────────────────────────────────────────── Se carga ANTES que la hoja de la pantalla: Y la hoja de la pantalla ya NO declara :root. Si necesita un color que aquí no está, se añade aquí, no allí. ───────────────────────────────────────────────────────── LA MIGRACIÓN ES GRADUAL, Y ESO ESTÁ BIEN ───────────────────────────────────────────────────────── Una pantalla que todavía declare su propio :root seguirá funcionando: su bloque se carga después y gana. No hay que convertirlas todas el mismo día. Lo que no hay que hacer es escribir pantallas nuevas con su propio :root. ───────────────────────────────────────────────────────── CONTRASTE ───────────────────────────────────────────────────────── Los grises de texto están elegidos para pasar el mínimo de la norma WCAG AA (4,5:1 para texto normal) sobre su fondo, en los dos temas. Antes no lo pasaban: --text-3 se quedaba en 3,4:1 y es el token más usado del proyecto, 201 veces. Ahí se caían textos como "Diagnóstico" en la pantalla del trámite. Si alguien cambia estos valores, hay que volver a comprobarlos. No es una cuestión de gusto: es lo que hace que el sistema se pueda usar con poca luz, con una pantalla mala o con cincuenta años. ========================================================= */ :root { /* ── TIPOGRAFÍA ────────────────────────────────────────────────── Tres papeles, tres familias. No más. Estas dos líneas estaban al revés de lo que el sistema dibuja: --f-body arrancaba en una familia del sistema, sin 'Brother 1816', y --f-display arrancaba en 'Brother 1816', que es la del cuerpo. No se notaba porque cada pantalla traía su propia declaración encima. Al quitarle la paleta duplicada a panel.css quedaron siete pantallas leyendo estas líneas, y salieron en la tipografía del sistema. Medido: 'Brother 1816' en las 17 antes, en 10 después. Lo correcto es lo que el sistema ya dibujaba: Brother 1816 para el texto corrido, Abril Fatface para los titulares. Las familias del sistema van detrás, como respaldo mientras carga el archivo. */ --f-display: 'Abril Fatface', Georgia, 'Times New Roman', serif; --f-body: 'Brother 1816', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --f-strong existía en una sola hoja. Se conserva como alias para no romperla, pero no se debe usar en pantallas nuevas. */ --f-strong: var(--f-display); /* ── ESPACIADO Y FORMA ─────────────────────────────────────────── Una escala, no números sueltos. Cada paso es visiblemente distinto del anterior; con doce valores intermedios nadie sabe cuál usar y acaban escribiéndose píxeles a mano. */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px; --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; /* Altura mínima de cualquier cosa que se pueda tocar. 44px es el mínimo recomendado para un dedo. En la auditoría, 4 de cada 10 controles del trámite quedaban por debajo. */ --tactil-min: 44px; /* ── COLORES DE MARCA ──────────────────────────────────────────── Dorado y magenta existen los dos y se usan los dos: el dorado en la cara pública, el magenta dentro del producto. Eso es lo que hace que la portada y la aplicación parezcan dos empresas distintas. Unificarlo es una decisión de marca, no técnica, así que aquí no se decide: se deja --accent apuntando al dorado, que es el de la portada, y se conservan los dos juegos completos. El día que se decida unificar, se cambia esta línea y baja a todo el sistema. */ --gold: #FFF6D9; --gold-ink: #C29B38; --gold-bright: #F5D985; --gold-border: rgba(245, 217, 133, .40); --gold-rgb: 255, 246, 217; --magenta: #C42A8E; --magenta-deep: #8E1F66; --magenta-border: rgba(196, 42, 142, .40); --magenta-rgb: 196, 42, 142; /* CUIDADO CON EL MAGENTA EN TEXTO PEQUEÑO. #C42A8E sobre el fondo OSCURO da 3,75:1: sirve para un titular grande, para un relleno o para un borde, pero no llega al 4,5:1 que exige la norma para texto normal — y así se estaba usando en etiquetas como "Diagnóstico" en la pantalla del trámite. Por eso existe --magenta-texto. Y por eso TIENE QUE CAMBIAR CON EL TEMA: el rosa claro que resuelve el problema sobre negro se queda en 2,1:1 sobre blanco, que es peor que el original. El valor de cada tema está en su bloque, más abajo. */ --magenta-texto: #F07FC4; /* EL DORADO, PERO PARA ESCRIBIR ENCIMA DEL FONDO. Mismo problema que el magenta, en espejo. El dorado de marca (#FFEDA8) es un fondo: funciona como superficie con tinta encima, y se lee bien como texto sobre negro. Sobre blanco desaparece: medí 1,07:1 en los precios del encabezado de la portada, que es texto invisible, no texto incómodo. La portada redefine --gold en sus dos temas con el mismo valor porque para ella el dorado ES una superficie. Por eso este token va aparte y nadie lo pisa: sirve para cuando el dorado tiene que ser letra. El valor de tema claro está más abajo, en su bloque. */ --gold-texto: #FFEDA8; --accent: var(--gold); --accent-rgb: var(--gold-rgb); /* EL COLOR DEL TEXTO QUE VA ENCIMA DEL ACENTO. No es un detalle: el dorado cambia de claridad con el tema. En oscuro el acento es crema y encima va tinta; en claro el acento es dorado oscuro y encima va blanco. Usar --dark-text en los dos casos daba tinta sobre dorado oscuro, 3,6:1, en el botón principal de la pantalla previa al pago. */ --accent-ink: #14171A; /* ── COLORES DE ESTADO ─────────────────────────────────────────── Separados del acento a propósito. Si "correcto" es del mismo color que el botón principal, el color deja de significar algo. Cada uno viene con su versión de fondo, para avisos y etiquetas, ya calculada: así nadie tiene que inventar un rgba() a ojo. */ /* Aclarado de #2EA043: la insignia verde sobre su propio tinte al 14 % se quedaba en 4,47 de contraste, justo por debajo del mínimo de 4,5. */ --success: #3FB950; --success-bg: rgba(46, 160, 67, .14); --ok: var(--success); /* El mismo verde, con el nombre en español. Varias hojas escribían `var(--exito, #2ea043)` y funcionaban SOLO por el color de respaldo: el token no existía en ninguna parte. Al declararlo aquí, ese verde escrito a mano deja de ser una copia suelta que se queda atrás cuando el de verdad cambia. */ --exito: var(--success); --exito-bg: var(--success-bg); /* LOS COLORES DE LA CAJA DE AVISO, CON NOMBRE PROPIO. No reutilizan --warning ni --success directamente, y no es por gusto: las cuatro hojas de trámite redefinen --warning como un coral (#C75C42) para otra cosa suya. El resultado era una alerta de "en curso" con el borde salmón en vez de ámbar, distinta a la misma alerta en la pantalla de pagos. Con nombre propio, la caja de aviso se ve igual en las 24 pantallas pase lo que pase con el resto de la paleta. */ --aviso-ok: #3FB950; --aviso-ok-bg: rgba(46, 160, 67, .14); --aviso-warn: #D9A441; --aviso-warn-bg: rgba(217, 164, 65, .14); --aviso-mal: #FF6B5C; --aviso-mal-bg: rgba(255, 107, 92, .14); /* ALIAS QUE VENÍAN DE panel.css. Esa hoja traía su propia paleta de 25 variables y, al cargarla, le cambiaba a la pantalla el magenta, el dorado y los colores de estado. Se le quitó el :root; estos cinco nombres eran los únicos que no existían aquí, así que se traen para que nada se quede sin valor. Apuntan a los tokens de la casa, no a copias sueltas. */ --muted: var(--text-3); --ok-bg: var(--success-bg); --warn: var(--warning); --warn-bg: var(--warning-bg); --shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .40); --warning: #D9A441; --warning-bg: rgba(217, 164, 65, .14); --danger: #FF6B5C; --danger-bg: rgba(255, 107, 92, .14); --info: #7BA3D9; --info-bg: rgba(123, 163, 217, .14); } /* ========================================================= TEMA OSCURO — el de por defecto en este producto ========================================================= El sistema arranca con data-theme="dark" en el , así que este bloque es el que se ve casi siempre. Se declara primero por eso. */ :root, :root[data-theme="dark"] { --bg: #0C0E0F; /* fondo de la página */ --bg-2: #14171A; /* tarjetas, paneles */ --bg-3: #17191C; /* lo que se eleva sobre una tarjeta */ --bg-rgb: 12, 14, 15; /* Contraste sobre --bg (#0C0E0F), comprobado: --text-1 19,3:1 titulares y texto principal --text-2 11,5:1 texto secundario --text-3 6,9:1 etiquetas, pies, metadatos El antiguo --text-3 era rgba(255,255,255,.40) — 3,4:1 — y no llegaba al mínimo. Subirlo es el arreglo de accesibilidad que más pantallas toca de una sola vez. */ --text-1: #FFFFFF; --text-2: #C2C8CE; --text-3: #949BA3; /* Magenta legible sobre negro: 7,9:1 */ --magenta-texto: #F07FC4; --border: rgba(255, 255, 255, .10); --border-strong: rgba(255, 255, 255, .20); --page-bg: var(--bg); --page-card: var(--bg-2); --page-ink: var(--text-1); --page-ink-2: var(--text-2); --page-border: var(--border); --ink: var(--text-1); --dark-text: #14171A; --papel: var(--bg-2); --gris: var(--text-3); --gris-suave: var(--border); --menta: var(--success); --cielo: var(--info); } /* ========================================================= TEMA CLARO ========================================================= */ :root[data-theme="light"] { --bg: #FFFFFF; --bg-2: #F5F6F7; --bg-3: #ECEEF0; --bg-rgb: 255, 255, 255; /* Contraste sobre --bg (#FFFFFF), comprobado: --text-1 18,0:1 --text-2 7,3:1 --text-3 4,7:1 */ --text-1: #14171A; --text-2: #4E5862; /* #6B7580 pasaba sobre blanco puro (4,7:1) pero no sobre las tarjetas, que son gris muy claro: ahí caía a 3,9:1. Se mide contra el fondo MÁS OSCURO en el que aparece, no contra el blanco. */ --text-3: #5A646F; /* Sobre blanco el rosa claro daría 2,1:1. Aquí el magenta va al revés: hay que oscurecerlo, no aclararlo. */ --magenta-texto: #A81E76; /* Acento oscuro en tema claro: encima va blanco (6,1:1). */ --accent-ink: #FFFFFF; --border: rgba(20, 23, 26, .12); --border-strong: rgba(20, 23, 26, .22); /* El dorado claro es invisible sobre blanco: en tema claro, el acento tiene que ser la versión con tinta, y bastante más oscura de lo que parece necesario — sobre una tarjeta crema, #8A6B1F se quedaba en 4,2:1. */ --gold: #7A5E18; --gold-rgb: 122, 94, 24; /* El dorado como LETRA sobre fondo claro. Más oscuro todavía que el acento, porque aquí no hay una superficie de color debajo que lo sostenga: va directo contra el gris casi blanco de las tarjetas. */ --gold-texto: #6B5214; /* El dorado como TEXTO sobre un fondo claro. El #C29B38 del tema oscuro daba 2,36 de contraste sobre una tarjeta crema: lo usan las etiquetas de tipo de trámite y el botón "Hoy" del calendario. */ --gold-ink: #6B5214; /* Los colores de estado también cambian: los tonos pensados para fondo oscuro no llegan al mínimo sobre blanco. */ /* Oscurecido de #1A7A3A. Sobre la tarjeta color crema del tema claro, el verde anterior dejaba la insignia "Facturada" y la de "Aprobado" en 4,31 de contraste, por debajo del mínimo de 4,5. Este da 5,2 y no cambia nada donde el verde hace de fondo. */ --success: #176B33; --warning: #8A5A00; --danger: #C42B1C; --info: #2C4E7D; /* Los de la caja de aviso, oscurecidos para fondo claro. */ --aviso-ok: #176B33; --aviso-ok-bg: rgba(26, 122, 58, .12); --aviso-warn: #8A5A00; --aviso-warn-bg: rgba(138, 90, 0, .12); --aviso-mal: #C42B1C; --aviso-mal-bg: rgba(196, 43, 28, .10); /* La sombra en tema claro es mucho más suave: sobre blanco, la del tema oscuro se ve como una mancha gris. */ --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06); --page-bg: var(--bg); --page-card: var(--bg-2); --page-ink: var(--text-1); --page-ink-2: var(--text-2); --page-border: var(--border); --ink: var(--text-1); --dark-text: var(--text-1); --papel: var(--bg-2); --gris: var(--text-3); --gris-suave: var(--border); --menta: var(--success); --cielo: var(--info); } /* ========================================================= EL TEMA DEL PRODUCTO (las cuatro pantallas de trámite) ========================================================= HAY DOS IDENTIDADES VISUALES Y NO ES UN ERROR DEL TODO ----------------------------------------------------- La portada es dorada, con Brother 1816 y Abril Fatface. Las cuatro pantallas de trámite son magenta, con Fraunces y Plus Jakarta Sans. Parecen dos empresas, y en la auditoría figura como un problema. Pero unificarlas es una decisión de marca, no técnica, y tomarla por mi cuenta habría cambiado el aspecto de todo el producto sin que nadie lo hubiera pedido. Así que aquí se hace lo que sí es técnico: declarar esa segunda identidad UNA vez, en lugar de las cuatro veces que estaba declarada —una por cada hoja de trámite, con valores ligeramente distintos entre ellas. CÓMO SE USA Y la hoja de la pantalla deja de declarar su propio :root. QUÉ CAMBIA RESPECTO A ANTES Solo los valores que no llegaban al contraste mínimo. El resto es idéntico a lo que ya había: --text-2 .64 → .80 de opacidad (2,9:1 → 11,5:1) --text-3 .56 → color sólido (3,4:1 → 6,9:1) Ahí se caían "Diagnóstico", "Cerrar sesión" y los pies de las tarjetas: seis de cada veintiún textos de la pantalla del trámite. El día que se decida unificar la marca, se borra este bloque y las cuatro pantallas pasan a la identidad de la portada sin tocar nada más. ========================================================= */ :root[data-producto="tramite"] { /* LA TIPOGRAFÍA ES LA MISMA QUE EN EL RESTO, Y ES A PROPÓSITO. Aquí decía Fraunces para titulares y Plus Jakarta Sans para el cuerpo. Nunca llegó a verse: cada hoja de trámite declaraba encima su propio --f-body con 'Brother 1816', así que lo que la gente ha visto siempre en estas cuatro pantallas es la tipografía de la casa. Los archivos de Fraunces y Plus Jakarta Sans están en el proyecto, pero solo pesan en la descarga. Al ordenar la paleta quedaron expuestas y las cuatro pantallas cambiaron de letra de golpe. Cambiar la tipografía de la parte que el cliente más usa es una decisión de marca, no el efecto secundario de una limpieza. Así que se quedan como estaban. Si algún día se quiere ese cambio, es una línea — y hay que mirarlo en pantalla antes, no solo en el código. */ --f-display: 'Abril Fatface', Georgia, 'Times New Roman', serif; --f-body: 'Brother 1816', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* El magenta es el acento de esta parte del producto. */ --accent: var(--magenta); --accent-rgb: var(--magenta-rgb); --magenta-soft: #F9AEDC; --magenta-ink: #FFFFFF; /* Estos cuatro los usaban las hojas de trámite con nombres propios. Se mantienen para no tener que renombrarlos en todo el CSS. */ --nav-bg: rgba(12, 14, 15, .86); --nav-border: rgba(255, 255, 255, .10); --coral: var(--warning); --lila: #CFC0FF; --footer-bg: #07080A; --text-1-rgb: 255, 255, 255; /* LOS COLORES DE ESTADO SON LOS DE LA CASA, NO UNOS PROPIOS. Aquí había cuatro tonos pastel (#A9F5C8, #B3D4FF, #FFB3A7, #FF5C5C). Pasaban el contraste, sí — pero significaban lo mismo que los de arriba con otro color. Medido: en las cuatro pantallas de trámite el rojo de "peligro" era #FF5C5C y en las otras trece #FF6B5C; el verde de "correcto", #A9F5C8 contra #2EA043. Un rojo que cambia de tono según la pantalla deja de leerse como una señal y pasa a leerse como decoración. Se heredan los de arriba, que ya cambian con el tema. --menta y --cielo se quedan porque las hojas de trámite los usan con esos nombres; ahora apuntan al mismo sitio que todo. */ --menta: var(--success); --cielo: var(--info); } /* Los colores de estado en tema claro también se heredan: el bloque general ya los oscurece para fondo blanco, y repetirlos aquí era mantener dos copias del mismo valor. */ :root[data-producto="tramite"][data-theme="light"] { --nav-bg: rgba(255, 255, 255, .86); --nav-border: rgba(20, 23, 26, .12); --magenta-ink: #14171A; --text-1-rgb: 20, 23, 26; } /* ========================================================= BOOTSTRAP, ATADO A NUESTRA PALETA ========================================================= Ocho pantallas cargan Bootstrap y usan sus clases de botón (.btn-outline-primary, .btn-primary). Bootstrap trae su azul de fábrica, #0d6efd, que sobre el fondo oscuro de este producto da 4,0:1 — por debajo del mínimo de 4,5:1 para texto normal. Esto no se veía antes de internalizar las librerías: Bootstrap venía de un CDN y, cuando ese CDN no respondía, sus estilos simplemente no llegaban y los botones se quedaban con el aspecto de la pantalla. Al servirlo desde el propio servidor empieza a aplicarse siempre, que es lo que queríamos, y con él aparece su azul. Se redefinen sus propias variables en vez de pelear con sus selectores: así vale para todos sus componentes a la vez y no hay que ir persiguiéndolos uno a uno con !important. ========================================================= */ :root { --bs-primary: var(--accent); --bs-primary-rgb: var(--accent-rgb); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent); --bs-body-color: var(--text-1); --bs-body-bg: var(--bg); --bs-border-color: var(--border); --bs-secondary-color: var(--text-2); } /* En las pantallas de trámite el acento es el magenta, que como relleno va bien pero como TEXTO pequeño se queda en 3,7:1. El botón de contorno pinta texto, así que ahí va la versión legible. */ :root[data-producto="tramite"] .btn-outline-primary { --bs-btn-color: var(--magenta-texto); --bs-btn-border-color: var(--magenta); --bs-btn-hover-bg: var(--magenta); --bs-btn-hover-border-color: var(--magenta); --bs-btn-hover-color: #FFFFFF; --bs-btn-active-bg: var(--magenta-deep); --bs-btn-active-border-color: var(--magenta-deep); --bs-btn-active-color: #FFFFFF; } /* ========================================================= REGLAS BASE QUE DEPENDEN DE LOS TOKENS ========================================================= Lo mínimo para que una pantalla nueva no tenga que repetirlo. */ /* Quien no soporte :focus-visible se queda con el contorno del navegador, que es peor pero existe. Quitar el contorno sin poner otro deja a quien navega con teclado sin saber dónde está. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Cualquier cosa que se toque, al menos 44px de alto. * * 44px es el mínimo con el que un dedo acierta de forma fiable. Por * debajo, quien tiene el pulso poco firme o el teléfono en la mano en * el bus falla y pulsa lo de al lado. * * Va con :where() para que no gane a nada: cualquier regla de la * pantalla que fije otra altura sigue mandando. Esto es un suelo, no * una imposición. * * Los enlaces se listan uno a uno en vez de poner "a" a secas: un * enlace dentro de un párrafo NO debe medir 44px, eso destrozaría el * interlineado del texto. Solo los que funcionan como botón. */ /* El interruptor de tema queda fuera también aquí, porque es un