/* =========================================================================== RutexMap · Panel de administración — sistema de diseño --------------------------------------------------------------------------- THESIS: el panel es una MESA DE DESPACHO, no un tablero de tarjetas. Todo lo que se decide acá queda asentado: quién puede llevar gente, cuánto cuesta un kilómetro, quién pidió ayuda. La forma que le corresponde es la de un libro de novedades — una hoja continua con renglones y reglas finas — y no la del dashboard SaaS de tarjetas flotando sobre gris que trae el panel de hoy. OWN-WORLD: cromo azul marino FIJO (no se da vuelta con el tema) + hoja de papel que sí se da vuelta + reglas de un pelo en vez de bordes de tarjeta + cifras tabulares en todos lados + el estado como GLIFO + PALABRA + color, en ese orden de importancia. Un solo acento: el azul de marca #06308F. Nombres en español y por FUNCIÓN, no por aspecto: `--rx-tinta-suave`, no `--gris-500`. Si mañana la tinta suave deja de ser gris, el nombre sigue siendo cierto. Prefijo `--rx-` a propósito: si estos tokens conviven un rato con el CSS viejo durante la reconstrucción, no se pisan con `--text` ni `--accent`. Cómo se aplica el tema: → claro forzado → oscuro forzado (sin atributo) → sigue al sistema operativo =========================================================================== */ /* --------------------------------------------------------------------------- 1. ESCALA CRUDA — no usar directamente en un componente. Existe para que los roles semánticos de abajo salgan de una rampa y no de siete azules inventados de a uno. Si necesitás un color en una pantalla, sale de la sección 2. --------------------------------------------------------------------------- */ :root { /* Azul de marca. Los cinco valores vienen tal cual de las apps (design_tokens.dart) para que el panel y el teléfono sean la misma casa. */ --_azul-900: #04226b; /* pressed de día */ --_azul-800: #06308f; /* EL azul de marca */ --_azul-600: #1b57c4; /* relleno de botón DE NOCHE: aguanta letra blanca */ --_azul-400: #5b94ff; /* línea/ícono/texto de noche. Con blanco encima NO */ --_azul-100: #d8e1f7; /* velo de día */ --_azul-950: #17294a; /* velo de noche */ /* Neutros inclinados al azul: no son grises puros, comparten familia con la marca. Un gris neutro al lado del marino se ve sucio. */ --_pizarra-950: #0b1327; /* el cromo */ --_pizarra-900: #141e38; --_pizarra-800: #39414f; --_pizarra-700: #55607a; --_pizarra-600: #5f6980; --_pizarra-400: #a8b0c2; --_pizarra-300: #c3cad9; --_pizarra-200: #dfe3ec; --_pizarra-100: #ebeef4; --_pizarra-050: #f4f6fa; --_tinta: #16171a; /* el negro que no es negro, igual que en las apps */ --_papel: #ffffff; /* Neutros de noche, misma inclinación. El escritorio de noche baja hasta casi negro para que el marino del cromo quede POR ENCIMA de él y el riel siga leyéndose como una pieza distinta. */ --_noche-escritorio: #06080d; --_noche-hoja: #151922; --_noche-hundida: #1b2029; --_noche-realce: #1c2740; --_noche-regla: #262c38; --_noche-regla-fuerte: #39414f; --_noche-tinta: #f1f3f8; /* Semáforo de estado. Deliberadamente desaturado: acá el color no celebra, clasifica. Ver la nota "por qué el panel sí tiene verde" en el README. */ --_verde-dia: #0e6b3e; --_verde-noche: #48b27c; --_ambar-dia: #8a5200; --_ambar-noche: #e0a040; --_rojo-dia: #ba1a1a; /* danger de las apps */ --_rojo-noche: #f2857a; --_rojo-alarma: #a81414; /* fondo de la banda de emergencia, no se da vuelta */ } /* --------------------------------------------------------------------------- 2. COLOR SEMÁNTICO — MODO CLARO (el valor por defecto) --------------------------------------------------------------------------- */ :root { color-scheme: light; /* — El cromo. La barra lateral y la cabecera NO se dan vuelta con el tema. Es el escritorio: el papel que apoyás encima cambia con la luz del día, el mueble no. Es la misma regla de `tinta-fija`/`paper-ink` de las apps: si lo de atrás no se da vuelta, lo de adelante tampoco. */ --rx-cromo: var(--_pizarra-950); --rx-cromo-alto: var(--_pizarra-900); /* hover / item levantado */ --rx-cromo-regla: rgba(255, 255, 255, 0.10); --rx-cromo-tinta: #f2f4f9; /* 16.8:1 sobre el cromo */ --rx-cromo-tinta-suave: #9aa6c2; /* 7.6:1 sobre el cromo */ /* — Los dos suelos. `escritorio` es el fondo de la app; `hoja` es donde vive el contenido. La hoja es blanco PURO a propósito: el contenido más importante del panel son fotos de documentos, y cualquier tinte del fondo miente sobre el color de una cédula. */ --rx-escritorio: var(--_pizarra-100); --rx-hoja: var(--_papel); --rx-hoja-hundida: var(--_pizarra-050); /* campos, zebra, code, thumbs */ --rx-hoja-realce: #f0f4fd; /* fila con hover */ /* Más claro que el velo de marca a propósito: con `accent-tint` entero, el texto tenue de la fila caía a 3,6:1. Una fila elegida no puede costar la legibilidad de la fila elegida. */ --rx-hoja-elegida: #e7eefc; /* fila abierta en el cajón */ /* — Reglas. La separación es una línea de un pelo, no un borde de tarjeta. `regla-fuerte` separa GRUPOS (cabecera de tabla, pie de totales). */ --rx-regla: var(--_pizarra-200); --rx-regla-fuerte: var(--_pizarra-300); /* — Tinta */ --rx-tinta: var(--_tinta); /* 17.5:1 sobre la hoja */ --rx-tinta-suave: var(--_pizarra-700); /* 6.3:1 — texto secundario */ /* 5,5:1 sobre la hoja. La primera versión daba 4,73 y ese margen no alcanzaba: apenas la fila se tiñe (hover, elegida) el mismo gris caía a 4,3. El piso no se mide contra el fondo ideal, se mide contra el fondo PEOR sobre el que ese texto se para. */ --rx-tinta-tenue: var(--_pizarra-600); /* 5.5:1 — metadata, placeholder */ --rx-tinta-inversa: var(--_papel); /* texto sobre relleno oscuro */ /* — Marca. Un solo acento y tres trabajos: DÓNDE ESTÁS (item actual), QUÉ TOCARÍAS (acción principal) y QUÉ ESTÁ VIVO (viaje en curso). Nada más lleva azul. El estado NUNCA es azul salvo cuando "vivo" ES el estado. */ --rx-marca: var(--_azul-800); --rx-marca-solida: var(--_azul-800); /* relleno con letra blanca */ --rx-marca-viva: var(--_azul-900); /* pressed */ --rx-marca-velo: var(--_azul-100); --rx-sobre-marca-velo: var(--_azul-900); --rx-foco: var(--_azul-600); /* 6.6:1 — anillo de teclado */ /* — Estado. Tres canales por estado: glifo, palabra y color. El color es el tercero, nunca el único: 200 filas se escanean por forma antes que por tono, y hay gente que no distingue el verde del ámbar. */ --rx-ok: var(--_verde-dia); --rx-ok-velo: #ddf0e5; --rx-sobre-ok-velo: #0b5531; --rx-espera: var(--_ambar-dia); --rx-espera-velo: #fbebd2; --rx-sobre-espera-velo: #6e4100; --rx-peligro: var(--_rojo-dia); --rx-peligro-velo: #ffdad6; --rx-sobre-peligro-velo: #8c1414; --rx-inerte: var(--_pizarra-700); /* suspendido, deshabilitado */ --rx-inerte-velo: #e5e8ef; --rx-sobre-inerte-velo: #3c465c; /* — Alarma. Es una superficie que NO se da vuelta (roja de día y de noche), porque una emergencia se ve igual a las 3 de la tarde y a las 3 de la mañana. Letra blanca encima: 7.6:1. */ --rx-alarma: var(--_rojo-alarma); --rx-sobre-alarma: #ffffff; --rx-alarma-borde: rgba(255, 255, 255, 0.22); /* — Series del gráfico. Dos y nada más: lo de AHORA en azul de marca, lo de ANTES en un neutro. Un tercer color pide un tercer significado y ese significado no existe. */ --rx-serie-viva: var(--_azul-800); --rx-serie-viva-velo: rgba(6, 48, 143, 0.10); /* 3,5:1 contra la hoja. Una línea que lleva información no es una guía: tiene que verse. El gris de las reglas daba 1,4:1 y la serie anterior directamente no estaba. */ --rx-serie-previa: #7c8aa5; --rx-grafico-guia: var(--_pizarra-200); /* — Superficies flotantes de verdad (menú, cajón, diálogo) */ --rx-flotante: var(--_papel); --rx-velo-modal: rgba(11, 19, 39, 0.45); --rx-esqueleto: linear-gradient( 90deg, var(--_pizarra-100) 0%, var(--_pizarra-050) 50%, var(--_pizarra-100) 100% ); /* — Sombras. La elevación se declara UNA vez: o borde o sombra, nunca las dos (eso es la "tarjeta fantasma"). La hoja no lleva sombra: se despega del escritorio por color y por una regla. Sombra solo para lo que realmente flota. Todas con desplazamiento Y desenfoque, teñidas de marino en vez de negro. */ --rx-sombra-flotante: 0 4px 12px -2px rgba(11, 19, 39, 0.14), 0 2px 4px -2px rgba(11, 19, 39, 0.10); --rx-sombra-cajon: -18px 0 44px -14px rgba(11, 19, 39, 0.24); --rx-sombra-dialogo: 0 24px 60px -20px rgba(11, 19, 39, 0.38); /* — VIDRIO Y PROFUNDIDAD ------------------------------------------------ Pedido de Danilo el 2026-08-30: "que todo se sienta premium, el color es muy opaco, y aparte muy simple, haz algo con difuminación, si quieres le pones liquid glass ahí también". LA REGLA ES LA MISMA QUE YA ESTÁ APROBADA PARA LAS APPS, no una nueva: vidrio SOLO en lo que flota —el riel, la cabecera, el cajón, el diálogo, la paleta—; el contenido se queda OPACO. Una tabla de cifras sobre vidrio es una tabla que cambia de contraste según lo que pase por debajo, y esta es la pantalla donde se leen cédulas y montos. El vidrio necesita algo que refractar: por eso el escritorio deja de ser un color plano y pasa a ser una tela con dos focos muy tenues. Sin eso, desenfocar un fondo liso no produce vidrio — produce el mismo liso. */ /* La tela del escritorio. Dos focos apenas teñidos de marca, sobre el color plano de siempre, que sigue siendo el que se ve si el navegador no soporta gradientes. */ --rx-tela: radial-gradient(1200px 680px at 12% -10%, rgba(6, 48, 143, 0.07), transparent 60%), radial-gradient(900px 560px at 108% 8%, rgba(27, 87, 196, 0.06), transparent 62%); /* Las tres piezas de una superficie de vidrio: el tinte, el desenfoque y el canto que la enciende por arriba. */ --rx-vidrio: rgba(255, 255, 255, 0.72); /* 0,95 y no 0,82: `README.md` § 1 dice que el marino del riel NO se da vuelta —es el mismo `#0B1327` de día y de noche—, pero a 0,82 de opacidad el escritorio CLARO de atrás se filtraba y el riel se leía gris pizarra en vez de marino de marca (medido: ≈ #353C4D de día contra ≈ #0E1322 de noche — dos muebles distintos). A 0,95 sigue refractando un poco —sigue siendo vidrio— y ya no se lava. */ --rx-vidrio-cromo: rgba(11, 19, 39, 0.95); --rx-vidrio-desenfoque: blur(22px) saturate(150%); --rx-vidrio-canto: rgba(255, 255, 255, 0.55); --rx-vidrio-canto-cromo: rgba(255, 255, 255, 0.12); /* La hoja se despega del escritorio con una sombra muy baja además de su regla. Sigue SIN flotar —no es una tarjeta— pero deja de estar pegada. */ --rx-sombra-hoja: 0 1px 2px rgba(11, 19, 39, 0.04), 0 8px 24px -16px rgba(11, 19, 39, 0.18); /* El acento con volumen: el botón de marca y el marcador del riel dejan de ser un color plano. Un solo paso de gradiente, no un degradé de los 2010. */ --rx-marca-relieve: linear-gradient(180deg, #2452f0, var(--_azul-800)); --rx-marca-brillo: 0 6px 18px -8px rgba(6, 48, 143, 0.55); } /* --------------------------------------------------------------------------- 2b. COLOR SEMÁNTICO — MODO OSCURO Se redefinen SOLO los roles que cambian. El bloque se repite dos veces: una para el sistema operativo y otra para la elección explícita, para que el interruptor gane en las dos direcciones. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) { color-scheme: dark; --rx-escritorio: var(--_noche-escritorio); --rx-hoja: var(--_noche-hoja); --rx-hoja-hundida: var(--_noche-hundida); --rx-hoja-realce: #1a2130; --rx-hoja-elegida: var(--_noche-realce); --rx-regla: var(--_noche-regla); --rx-regla-fuerte: var(--_noche-regla-fuerte); --rx-tinta: var(--_noche-tinta); --rx-tinta-suave: var(--_pizarra-400); /* 8.1:1 */ --rx-tinta-tenue: #8a93ab; /* 5.7:1, y 4.8:1 en la fila elegida */ --rx-tinta-inversa: var(--_papel); /* De noche el azul encendido sirve como LÍNEA, ícono y texto; el relleno de un botón con letra blanca baja un escalón a #1B57C4 (6.5:1). Es la regla de las apps y acá vale igual. */ --rx-marca: var(--_azul-400); --rx-marca-solida: var(--_azul-600); --rx-marca-viva: #2f6ad8; --rx-marca-velo: var(--_azul-950); --rx-sobre-marca-velo: #a9c4f5; --rx-foco: var(--_azul-400); /* Los velos de noche son OPACOS, no rgba. Con transparencia el chip de estado cambia de color según la fila sobre la que cae (normal, hover, elegida) y su contraste deja de poder medirse: es un valor distinto en cada fila. Estos cuatro son exactamente ese mismo tinte ya compuesto sobre la hoja, y ahora sí se pueden verificar. */ --rx-ok: var(--_verde-noche); --rx-ok-velo: #1d3130; --rx-sobre-ok-velo: #7fd3a6; /* 7.6:1 */ --rx-espera: var(--_ambar-noche); --rx-espera-velo: #362f27; --rx-sobre-espera-velo: #f0c88a; /* 8.4:1 */ --rx-peligro: var(--_rojo-noche); --rx-peligro-velo: #382a30; --rx-sobre-peligro-velo: #ffb4aa; /* 8.0:1 */ --rx-inerte: var(--_pizarra-400); --rx-inerte-velo: #292e38; --rx-sobre-inerte-velo: #c3cad9; /* 8.3:1 */ --rx-serie-viva: var(--_azul-400); --rx-serie-viva-velo: rgba(91, 148, 255, 0.16); --rx-serie-previa: #6e7893; /* 4,0:1 contra la hoja */ --rx-grafico-guia: var(--_noche-regla); --rx-flotante: #1c2029; --rx-velo-modal: rgba(4, 6, 11, 0.68); --rx-esqueleto: linear-gradient( 90deg, var(--_noche-hundida) 0%, #232937 50%, var(--_noche-hundida) 100% ); --rx-sombra-flotante: 0 4px 14px -2px rgba(0, 0, 0, 0.60), 0 2px 6px -3px rgba(0, 0, 0, 0.50); --rx-sombra-cajon: -18px 0 48px -14px rgba(0, 0, 0, 0.66); --rx-sombra-dialogo: 0 26px 64px -20px rgba(0, 0, 0, 0.72); /* — Vidrio de noche. La tela sube de intensidad porque sobre un fondo oscuro un tinte al 6 % no se ve; el vidrio se vuelve un velo OSCURO en vez de claro, y el canto que lo enciende por arriba es lo único que queda blanco. Sin ese canto, de noche el vidrio es una mancha. */ --rx-tela: radial-gradient(1100px 640px at 10% -12%, rgba(91, 148, 255, 0.10), transparent 62%), radial-gradient(880px 540px at 106% 6%, rgba(27, 87, 196, 0.09), transparent 64%); --rx-vidrio: rgba(20, 30, 56, 0.72); --rx-vidrio-cromo: rgba(8, 13, 27, 0.80); --rx-vidrio-canto: rgba(255, 255, 255, 0.10); --rx-vidrio-canto-cromo: rgba(255, 255, 255, 0.10); --rx-sombra-hoja: 0 1px 2px rgba(0, 0, 0, 0.34), 0 10px 28px -18px rgba(0, 0, 0, 0.60); --rx-marca-relieve: linear-gradient(180deg, #2452f0, #1230a8); --rx-marca-brillo: 0 8px 22px -10px rgba(91, 148, 255, 0.50); } } /* La MISMA lista, para la elección explícita del interruptor. ESTO FALTABA, y era un fallo de verdad: el comentario de arriba dice desde siempre que el bloque se repite dos veces, pero solo estaba el del sistema operativo. O sea que NO HACÍA NADA en una máquina con el sistema en claro — el botón de Oscuro del panel se podía apretar y la pantalla no cambiaba. Solo funcionaba al revés (forzar claro sobre un sistema oscuro), que es justo el caso que nadie prueba. Las dos listas tienen que decir lo mismo. Eso lo comprueba `panel/tokens.test.mjs`, para que no se separen en silencio. */ :root[data-tema='oscuro'] { color-scheme: dark; --rx-escritorio: var(--_noche-escritorio); --rx-hoja: var(--_noche-hoja); --rx-hoja-hundida: var(--_noche-hundida); --rx-hoja-realce: #1a2130; --rx-hoja-elegida: var(--_noche-realce); --rx-regla: var(--_noche-regla); --rx-regla-fuerte: var(--_noche-regla-fuerte); --rx-tinta: var(--_noche-tinta); --rx-tinta-suave: var(--_pizarra-400); /* 8.1:1 */ --rx-tinta-tenue: #8a93ab; /* 5.7:1, y 4.8:1 en la fila elegida */ --rx-tinta-inversa: var(--_papel); /* De noche el azul encendido sirve como LÍNEA, ícono y texto; el relleno de un botón con letra blanca baja un escalón a #1B57C4 (6.5:1). Es la regla de las apps y acá vale igual. */ --rx-marca: var(--_azul-400); --rx-marca-solida: var(--_azul-600); --rx-marca-viva: #2f6ad8; --rx-marca-velo: var(--_azul-950); --rx-sobre-marca-velo: #a9c4f5; --rx-foco: var(--_azul-400); /* Los velos de noche son OPACOS, no rgba. Con transparencia el chip de estado cambia de color según la fila sobre la que cae (normal, hover, elegida) y su contraste deja de poder medirse: es un valor distinto en cada fila. Estos cuatro son exactamente ese mismo tinte ya compuesto sobre la hoja, y ahora sí se pueden verificar. */ --rx-ok: var(--_verde-noche); --rx-ok-velo: #1d3130; --rx-sobre-ok-velo: #7fd3a6; /* 7.6:1 */ --rx-espera: var(--_ambar-noche); --rx-espera-velo: #362f27; --rx-sobre-espera-velo: #f0c88a; /* 8.4:1 */ --rx-peligro: var(--_rojo-noche); --rx-peligro-velo: #382a30; --rx-sobre-peligro-velo: #ffb4aa; /* 8.0:1 */ --rx-inerte: var(--_pizarra-400); --rx-inerte-velo: #292e38; --rx-sobre-inerte-velo: #c3cad9; /* 8.3:1 */ --rx-serie-viva: var(--_azul-400); --rx-serie-viva-velo: rgba(91, 148, 255, 0.16); --rx-serie-previa: #6e7893; /* 4,0:1 contra la hoja */ --rx-grafico-guia: var(--_noche-regla); --rx-flotante: #1c2029; --rx-velo-modal: rgba(4, 6, 11, 0.68); --rx-esqueleto: linear-gradient( 90deg, var(--_noche-hundida) 0%, #232937 50%, var(--_noche-hundida) 100% ); --rx-sombra-flotante: 0 4px 14px -2px rgba(0, 0, 0, 0.60), 0 2px 6px -3px rgba(0, 0, 0, 0.50); --rx-sombra-cajon: -18px 0 48px -14px rgba(0, 0, 0, 0.66); --rx-sombra-dialogo: 0 26px 64px -20px rgba(0, 0, 0, 0.72); /* — Vidrio de noche. La tela sube de intensidad porque sobre un fondo oscuro un tinte al 6 % no se ve; el vidrio se vuelve un velo OSCURO en vez de claro, y el canto que lo enciende por arriba es lo único que queda blanco. Sin ese canto, de noche el vidrio es una mancha. */ --rx-tela: radial-gradient(1100px 640px at 10% -12%, rgba(91, 148, 255, 0.10), transparent 62%), radial-gradient(880px 540px at 106% 6%, rgba(27, 87, 196, 0.09), transparent 64%); --rx-vidrio: rgba(20, 30, 56, 0.72); --rx-vidrio-cromo: rgba(8, 13, 27, 0.80); --rx-vidrio-canto: rgba(255, 255, 255, 0.10); --rx-vidrio-canto-cromo: rgba(255, 255, 255, 0.10); --rx-sombra-hoja: 0 1px 2px rgba(0, 0, 0, 0.34), 0 10px 28px -18px rgba(0, 0, 0, 0.60); --rx-marca-relieve: linear-gradient(180deg, #2452f0, #1230a8); --rx-marca-brillo: 0 8px 22px -10px rgba(91, 148, 255, 0.50); } /* --------------------------------------------------------------------------- 3. TIPOGRAFÍA Una sola familia, Plus Jakarta Sans, la misma de las apps. La jerarquía sale del contraste de PESOS (800 contra 500), igual que en el teléfono; acá los tamaños bajan porque una tabla de 20 filas no es una pantalla de decisión. Escala fija en px, no fluida: el operador trabaja siempre en el mismo monitor y un título que se encoge dentro de un panel se ve peor, no mejor. --------------------------------------------------------------------------- */ :root { --rx-familia: 'Plus Jakarta Sans', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Etiqueta: mayúsculas, tracking abierto. Nunca más de 2-3 palabras. */ --rx-etiqueta: 700 11px/16px var(--rx-familia); --rx-etiqueta-tracking: 0.08em; --rx-menor: 500 12px/16px var(--rx-familia); /* metadata, pie de tabla */ --rx-cuerpo: 500 14px/20px var(--rx-familia); /* el texto del panel */ --rx-lectura: 500 15px/24px var(--rx-familia); /* párrafos, vacíos, ayuda */ --rx-titulo: 700 16px/22px var(--rx-familia); /* título de panel, botón */ --rx-seccion: 700 20px/26px var(--rx-familia); --rx-pantalla: 800 26px/32px var(--rx-familia); /* Cifras. Son el material del panel: siempre tabulares, siempre alineadas a la derecha en una columna, para que la coma decimal caiga en la misma vertical toda la página. */ --rx-numeral: 700 14px/20px var(--rx-familia); /* placa, folio, ETA */ --rx-cifra: 800 30px/34px var(--rx-familia); --rx-cifra-mayor: 800 40px/44px var(--rx-familia); --rx-tracking-titulo: -0.01em; --rx-tracking-cifra: -0.02em; } /* --------------------------------------------------------------------------- 4. ESPACIO Y MEDIDAS Los NOMBRES son los mismos que en DESIGN.md a propósito: el que escribe Flutter y el que escribe CSS tienen que poder decir "xl" y estar hablando de lo mismo. Los VALORES de altura sí bajan — 56px de alto de fila es correcto para un pulgar y desperdicia media pantalla en un monitor. --------------------------------------------------------------------------- */ :root { --rx-xs: 4px; --rx-sm: 8px; --rx-md: 12px; --rx-lg: 16px; --rx-xl: 24px; --rx-xxl: 32px; --rx-xxxl: 48px; --rx-gutter: 24px; /* margen de página en escritorio */ --rx-gutter-angosto: 16px; /* margen de página en teléfono */ --rx-lateral: 248px; /* barra lateral abierta */ --rx-lateral-riel: 72px; /* barra lateral en riel de íconos */ --rx-cabecera: 60px; --rx-cajon: 560px; /* ancho del cajón de la ficha */ --rx-fila: 48px; /* alto de fila de tabla */ --rx-fila-compacta: 40px; --rx-celda-angosta: 6px; /* aire a cada lado de una celda en el teléfono */ --rx-rotulo-largo: 8.5rem; /* piso de un botón que parte su rótulo en el teléfono */ --rx-control: 36px; /* alto de botón/campo en escritorio */ --rx-control-alto: 44px; /* acción principal, y TODO en táctil */ --rx-toque: 44px; /* blanco táctil mínimo */ --rx-medida: 68ch; /* largo de línea de texto corrido */ } /* --------------------------------------------------------------------------- 5. FORMA La misma escalera de radios que las apps (4 / 8 / 12 / 16 / 24 + pastilla). No se agrega un séptimo valor: lo que cambia acá es qué escalón usa cada pieza, no la escalera. xs marcas chicas en línea, barras del gráfico sm botones, campos, chips cuadrados, celdas de foto chicas md paneles, hoja, tarjeta de alerta, miniaturas de documento lg cajón, diálogo xl nada por ahora (reservado) pastilla chips de estado, avatares, botones circulares --------------------------------------------------------------------------- */ :root { --rx-radio-xs: 4px; --rx-radio-sm: 8px; --rx-radio-md: 12px; --rx-radio-lg: 16px; --rx-radio-xl: 24px; --rx-radio-pastilla: 999px; --rx-pelo: 1px; /* el grosor de TODA regla del sistema */ --rx-trazo-icono: 1.6; /* grosor de trazo de los íconos, en 20×20 */ } /* --------------------------------------------------------------------------- 6. MOVIMIENTO El operador está adentro de una tarea: el movimiento informa un cambio de estado y nada más. Nada de entradas coreografiadas al cargar la página. --------------------------------------------------------------------------- */ :root { --rx-tiempo-rapido: 120ms; --rx-tiempo: 180ms; --rx-tiempo-lento: 280ms; --rx-curva: cubic-bezier(0.22, 0.8, 0.24, 1); /* salida exponencial */ --rx-curva-entrada: cubic-bezier(0.4, 0, 0.9, 0.3); } @media (prefers-reduced-motion: reduce) { :root { --rx-tiempo-rapido: 1ms; --rx-tiempo: 1ms; --rx-tiempo-lento: 1ms; } } /* --------------------------------------------------------------------------- 7. CAPAS Un cajón que aparece detrás de la cabecera es un bug que se arregla dos veces si el z-index se escribe a mano cada vez. --------------------------------------------------------------------------- */ :root { --rx-capa-base: 0; --rx-capa-pegajosa: 10; /* cabecera de tabla que se queda arriba */ --rx-capa-cromo: 20; /* barra lateral y cabecera */ --rx-capa-velo: 30; --rx-capa-cajon: 40; --rx-capa-dialogo: 50; --rx-capa-flotante: 60; /* menús, tooltips, aviso de sistema */ } /* --------------------------------------------------------------------------- 8. LO QUE DIBUJA EL NAVEGADOR La selección, el cursor, la barra de scroll y el anillo de foco vienen con valores que no pertenecen a ningún sistema de diseño. Es lo más barato de arreglar y lo que primero delata una página armada en vez de construida. --------------------------------------------------------------------------- */ :root { --rx-foco-grosor: 2px; --rx-foco-sep: 2px; --rx-foco-cromo: var(--_azul-400); /* el anillo sobre el marino del riel */ accent-color: var(--rx-marca); caret-color: var(--rx-marca); scrollbar-color: var(--rx-regla-fuerte) transparent; scrollbar-width: thin; } ::selection { background: var(--rx-marca-velo); color: var(--rx-sobre-marca-velo); } /* El anillo va por `outline` y no por `box-shadow`: el outline respeta solo el radio del elemento (una pastilla se rodea de pastilla, un cuadrado de cuadrado) y no lo recorta un `overflow: hidden` de un padre. */ :focus-visible { outline: var(--rx-foco-grosor) solid var(--rx-foco); outline-offset: var(--rx-foco-sep); }