/* ═══════════════════════════════════════════════════════════════ SÍGUELO GPS — DESIGN TOKENS v4 · dirección «Industry 5b» Tres capas, para que cambiar el diseño sea editar este archivo y nada más: 1. PRIMITIVAS --p-* La paleta cruda. Nadie las usa directo. 2. SEMÁNTICAS --color-* Qué papel cumple cada color. Se redefinen por tema. 3. ALIAS Los nombres antiguos (--bg, --sky…), apuntando a la capa semántica. La capa 3 existe porque hay ~880 usos de los nombres antiguos repartidos por el proyecto. Así el código actual sigue funcionando sin tocar nada, y lo nuevo puede usar ya los nombres semánticos. ── La dirección ── Wireframe técnico: fondo papel, un solo acento de marca, tipografía condensada en la titulación y monoespaciada en los datos. Los paneles son dibujos de línea —cuadrados, filete de un píxel, con marcas de registro «+» en las esquinas—, no bloques rellenos y redondeados. El botón primario es el único objeto sólido. La navegación es un CAMPO: negro, con el texto reversado. De ahí los tokens --color-field-*, que no existían en v3. ── La paleta sale del logo (2026-09-16) ── Hasta esa fecha el acento era un acero azulado (#2f5d7c) que no tenía nada que ver con la marca. Ahora son los colores del pin de SigueloGPS, medidos sobre el PNG original: #FFD500 cara clara del pin #FFAA00 anillo #FFBF00 cara en sombra #000000 la «S» EL AMARILLO NO SIRVE COMO TEXTO, y eso obliga a separar dos papeles que el acero hacía a la vez: · RELLENO --color-brand-fill amarillo, con texto NEGRO encima (#000 sobre #FFBF00 = 12,7:1) · TINTA --color-brand ocre oscuro para texto, bordes y foco (#8C6200 sobre papel = 4,86:1) Medido: el propio #FFBF00 sobre el papel da 1,48:1, y el mínimo para texto es 4,5. Un enlace amarillo sería invisible. En el tema oscuro el problema desaparece —#FFD500 sobre el fondo da 13:1— y el amarillo hace los dos papeles. Los teñidos (`rgb(var(--p-brand-rgb) / α)`, ~45 sitios) siguen derivando de la primitiva, que ahora es amarillo: salen en amarillo pálido sin tocar ninguno. El AVISO dejó de ser ámbar por lo mismo: a 37° de tono quedaba a 5° del ocre de marca, indistinguible, y además daba 3,86:1 — ya incumplía el mínimo antes del cambio. Ver la escala de estados. ── Temas ── Por defecto, CLARO (v3 era oscuro). Para el oscuro: El oscuro se conserva funcionando, reapuntado al mismo acento acero, pero la dirección visual definida es la clara. ── Marca por cliente ── js/app/09-configuracion.js sobrescribe en tiempo de ejecución el relleno (--p-brand-rgb), su hover, la tinta legible y el color del texto sobre el relleno, que elige negro o blanco según la luminancia. Los atenuados derivan de ahí, así que el sistema sigue el cambio. Orden de carga: 1. tokens.css ← este archivo 2. layout.css 3. components.css 4. views.css 5. responsive.css ═══════════════════════════════════════════════════════════════ */ /* Roboto en rango variable (400..700) y no en pesos sueltos: los titulares piden 600, que Roboto NO tiene como instancia estática — pidiéndolo suelto el navegador lo sintetiza engordando el trazo, y se nota. Con el rango, el 600 existe de verdad. Roboto Mono para los datos. Antes eran una pila del sistema (ui-monospace / Consolas / Menlo): cada máquina mostraba una fuente distinta y ninguna estaba elegida. */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400..700&family=Roboto+Mono:wght@400;500&display=swap'); /* ═══════════════════════════════════════════════════════════════ CAPA 1 — PRIMITIVAS Valores crudos, sin significado asignado. Se guardan como tripletes «R G B» para poder componer transparencias con rgb(var(--x) / .14): así un cambio de marca arrastra también a los atenuados, en vez de dejarlos apuntando al color viejo. ═══════════════════════════════════════════════════════════════ */ :root { /* Neutros — rampa perceptual del sistema Industry, de claro a oscuro. Gobiernan el papel, los filetes y la jerarquía de texto. */ --p-neutral-100-rgb: 245 245 248; /* #f5f5f8 */ --p-neutral-200-rgb: 231 231 234; /* #e7e7ea */ --p-neutral-300-rgb: 212 212 215; /* #d4d4d7 */ --p-neutral-400-rgb: 183 183 186; /* #b7b7ba */ --p-neutral-500-rgb: 152 152 155; /* #98989b */ --p-neutral-600-rgb: 122 122 125; /* #7a7a7d */ --p-neutral-700-rgb: 93 93 96; /* #5d5d60 */ --p-neutral-800-rgb: 66 66 68; /* #424244 */ --p-neutral-900-rgb: 43 43 45; /* #2b2b2d */ /* El suelo y la tinta */ --p-paper-rgb: 242 242 243; /* #f2f2f3 — fondo de trabajo */ --p-paper-2-rgb: 233 233 234; /* #e9e9ea — superficie hundida */ --p-ink-rgb: 29 31 32; /* #1d1f20 — texto de énfasis */ --p-white-rgb: 255 255 255; --p-black-rgb: 0 0 0; /* Relieve. Las dos luces del neumorfismo: una sombra proyectada y un brillo opuesto. Se derivan del papel (#f2f2f3) oscureciéndolo y aclarándolo el mismo tanto, que es lo que hace que la pieza parezca extruida del fondo y no pegada encima. Si cambia --p-paper-rgb, hay que recalcular estas dos o el efecto se rompe. */ --p-relieve-sombra-rgb: 199 199 203; /* #c7c7cb */ --p-relieve-luz-rgb: 255 255 255; /* Marca — los colores del logo. Sobrescribible en runtime para temas por cliente (ver la cabecera). --p-brand-rgb es el RELLENO y la base de todos los teñidos por alfa. */ --p-brand-rgb: 255 191 0; /* #FFBF00 — cara en sombra del pin */ --p-brand-dark-rgb: 255 170 0; /* #FFAA00 — el anillo: hover */ --p-brand-alt-rgb: 230 150 0; /* #E69600 — paso presionado */ --p-brand-light-rgb: 255 213 0; /* #FFD500 — cara clara del pin */ /* Tinta: el amarillo convertido en algo legible sobre el papel. 4,86:1 sobre #f2f2f3 y 5,44:1 sobre blanco. */ --p-brand-ink-rgb: 140 98 0; /* #8C6200 */ /* Qué va ENCIMA del relleno. Negro, como la «S» del logo. */ --p-on-brand-rgb: 0 0 0; /* Rampa del campo de navegación. Antes era acero; ahora es la rampa de grafito que sostiene el negro del logo. Se conservan los nombres --p-steel-* porque los usan layout.css y login.css: renombrarlos sería tocar esos archivos por nada. Los pasos claros ya no son azulados sino neutros cálidos, para no teñir el negro de frío. */ --p-steel-100-rgb: 240 239 236; /* #f0efec */ --p-steel-200-rgb: 214 212 206; /* #d6d4ce — texto secundario sobre el campo */ --p-steel-300-rgb: 168 165 158; /* #a8a59e — texto terciario sobre el campo */ --p-steel-400-rgb: 255 191 0; /* #FFBF00 — la regla de acento del login */ --p-steel-800-rgb: 28 28 28; /* #1c1c1c */ --p-steel-900-rgb: 0 0 0; /* #000000 — el campo, mismo negro que el logo */ /* Estados. Escala ordenada por TONO para que no se confundan entre sí ni con el ocre de marca (42°), y toda por encima de 4,5:1 sobre el papel. Los valores anteriores están en el historial de git; dos de ellos —aviso y aviso fuerte— ya incumplían ese mínimo. éxito 151° 4,77:1 aviso 28° 4,96:1 (era 37° y 3,86:1) aviso fuerte 15° 5,35:1 (era 21° y 4,26:1) peligro 354° 6,07:1 */ --p-green-rgb: 27 122 76; /* #1b7a4c */ --p-red-rgb: 176 32 46; /* #B0202E */ --p-amber-rgb: 168 79 0; /* #A84F00 — el nombre se conserva; ya no es ámbar */ --p-orange-rgb: 178 58 18; /* #B23A12 — severidad intermedia */ /* Los mismos estados en claro, para el tema oscuro. Ver allí. */ --p-green-light-rgb: 76 195 138; /* #4CC38A */ --p-amber-light-rgb: 255 154 61; /* #FF9A3D */ --p-orange-light-rgb: 255 122 77; /* #FF7A4D */ --p-red-light-rgb: 255 107 115; /* #FF6B73 */ /* Acentos de categoría — variedad decorativa: badge de integraciones, iconos de sección. No son estados: no significan éxito ni error. */ --p-purple-rgb: 106 78 140; /* #6a4e8c */ --p-teal-rgb: 30 116 116; /* #1e7474 */ --p-green-deep-rgb: 20 92 58; /* #145c3a */ /* Oscuros, para el tema dark */ --p-dark-rgb: 16 20 23; --p-dark-2-rgb: 22 27 31; --p-dark-3-rgb: 30 36 41; /* ── Compatibilidad con la paleta v3 ── `--p-slate-300-rgb` era el gris con el que se componían filetes y teñidos por alfa; lo usan ~24 sitios repartidos por el validador de cliente, el público, los certificados y varios módulos de js/. Se conserva reapuntado al neutro equivalente, para no tener que reescribirlos todos de golpe. Los dos navy sostienen los dos degradados que quedan en validador-cliente.css. No usar en código nuevo: los reemplazos son --p-neutral-500-rgb y --color-field / --color-field-2. */ --p-slate-300-rgb: var(--p-neutral-500-rgb); --p-navy-900-rgb: var(--p-steel-900-rgb); --p-navy-850-rgb: var(--p-steel-800-rgb); /* ── Interruptor de tema ────────────────────────────────────── Sol y luna. Es el único elemento de la interfaz que NO sigue la paleta del sistema, y es deliberado: representa los dos temas, así que se lee igual esté cual esté activo. Por eso sus valores no dependen de --color-*, y no cambian entre claro y oscuro. Van como primitivas para no dejar literales sueltos en el componente, que es la regla de este archivo. */ --p-switch-track-rgb: 244 244 245; /* #f4f4f5 — carril en claro */ --p-switch-track-on-rgb: 48 49 54; /* #303136 — carril en oscuro */ --p-switch-sun-a-rgb: 255 0 128; /* #ff0080 */ --p-switch-sun-b-rgb: 255 140 0; /* #ff8c00 */ --p-switch-moon-a-rgb: 137 131 247; /* #8983f7 — sombra que talla la luna */ --p-switch-moon-b-rgb: 163 218 251; /* #a3dafb */ } /* ═══════════════════════════════════════════════════════════════ CAPA 2 — SEMÁNTICAS · TEMA CLARO (por defecto) La dirección definida: papel, filete y acero. ═══════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"] { --color-bg: rgb(var(--p-paper-rgb)); --color-bg-alt: rgb(var(--p-paper-2-rgb)); /* Las tarjetas son dibujos de línea: su «superficie» es el propio papel, así que el panel se lee por el filete, no por el relleno. */ --color-surface: rgb(var(--p-paper-rgb)); --color-surface-2: rgb(var(--p-paper-2-rgb)); --color-surface-3: rgb(var(--p-neutral-200-rgb)); /* --color-border es el filete del panel; --color-rule, la regla interior entre filas, que va un paso más clara. */ --color-border: rgb(var(--p-neutral-400-rgb)); --color-border-strong: rgb(var(--p-neutral-500-rgb)); --color-border-heavy: rgb(var(--p-neutral-600-rgb)); --color-rule: rgb(var(--p-neutral-200-rgb)); --color-rule-strong: rgb(var(--p-neutral-300-rgb)); --color-text-strong: rgb(var(--p-ink-rgb)); --color-text: rgb(var(--p-neutral-900-rgb)); --color-text-2: rgb(var(--p-neutral-600-rgb)); --color-text-3: rgb(var(--p-neutral-500-rgb)); --color-text-faint: rgb(var(--p-neutral-400-rgb)); /* En un wireframe no hay cristal: lo que en v3 flotaba traslúcido aquí es papel con filete. Se conservan los nombres porque el login y el portal de cliente los usan. */ --color-surface-glass: rgb(var(--p-ink-rgb) / .02); --color-surface-glass-strong: rgb(var(--p-ink-rgb) / .04); --color-surface-hover: rgb(var(--p-ink-rgb) / .06); /* Hundido: campos de formulario y barras de búsqueda. */ --color-inset: rgb(var(--p-white-rgb) / .5); --color-inset-soft: rgb(var(--p-white-rgb) / .35); --color-inset-subtle: rgb(var(--p-white-rgb) / .2); /* Barra superior, sobre contenido que se desplaza. */ --color-surface-overlay: rgb(var(--p-paper-rgb) / .92); /* Velo tras las modales. */ --color-scrim: rgb(var(--p-steel-900-rgb) / .5); /* ── El campo ── La navegación y las cabeceras reversadas: negro con el texto en papel. No es una «superficie» más: es el único bloque macizo del sistema junto al botón primario. Es negro puro a propósito: el logotipo SVG lleva su propio rectángulo #000000, y sobre el acero de antes se veía como una caja pegada encima. */ --color-field: rgb(var(--p-steel-900-rgb)); --color-field-2: rgb(var(--p-steel-800-rgb)); --color-field-border: rgb(var(--p-white-rgb) / .16); --color-field-hover: rgb(var(--p-white-rgb) / .07); --color-field-active: rgb(var(--p-white-rgb) / .1); --color-on-field: rgb(var(--p-white-rgb)); --color-on-field-2: rgb(var(--p-steel-200-rgb)); --color-on-field-3: rgb(var(--p-steel-300-rgb)); --color-accent-purple: rgb(var(--p-purple-rgb)); --color-accent-purple-dim: rgb(var(--p-purple-rgb) / .12); --color-accent-teal: rgb(var(--p-teal-rgb)); --color-accent-teal-dim: rgb(var(--p-teal-rgb) / .12); --color-success-deep: rgb(var(--p-green-deep-rgb)); /* ── Marca: TINTA ── Para texto, iconos, bordes y el anillo de foco. Es el ocre legible, no el amarillo: ver la cabecera. `-alt` y `-strong` se usan también como color de texto (estadísticas, insignias), así que van a la misma tinta y no al amarillo presionado. */ --color-brand: rgb(var(--p-brand-ink-rgb)); --color-brand-alt: rgb(var(--p-brand-ink-rgb)); --color-brand-hover: rgb(var(--p-brand-ink-rgb)); --color-brand-strong: rgb(var(--p-brand-ink-rgb)); /* ── Marca: RELLENO ── Los bloques macizos: botón primario, indicadores, puntos. Siempre con --color-on-brand encima, nunca con texto de papel. */ --color-brand-fill: rgb(var(--p-brand-rgb)); --color-brand-fill-hover: rgb(var(--p-brand-dark-rgb)); --color-brand-fill-pressed: rgb(var(--p-brand-alt-rgb)); --color-on-brand: rgb(var(--p-on-brand-rgb)); /* Teñidos: amarillo muy rebajado. Un paso más alto que con el acero porque el amarillo es mucho más claro y a .1 apenas se ve. */ --color-brand-dim: rgb(var(--p-brand-rgb) / .16); --color-brand-glow: rgb(var(--p-brand-rgb) / .08); --color-success: rgb(var(--p-green-rgb)); --color-success-dim: rgb(var(--p-green-rgb) / .1); --color-danger: rgb(var(--p-red-rgb)); --color-danger-dim: rgb(var(--p-red-rgb) / .1); --color-warning: rgb(var(--p-amber-rgb)); --color-warning-dim: rgb(var(--p-amber-rgb) / .1); /* Entre aviso y error: el semáforo de estado usa cuatro niveles. */ --color-warning-strong: rgb(var(--p-orange-rgb)); --color-scrollbar: rgb(var(--p-neutral-500-rgb)); --color-scrollbar-hover: rgb(var(--p-neutral-700-rgb)); /* Elevación. El wireframe es plano: sólo lo que de verdad flota —modales, toasts, menús— proyecta, y lo hace poco. */ --shadow-sm: none; --shadow: 0 2px 10px rgb(var(--p-ink-rgb) / .1); --shadow-lg: 0 8px 28px rgb(var(--p-ink-rgb) / .14); --shadow-xl: 0 16px 44px rgb(var(--p-ink-rgb) / .18); /* Relieve de las tarjetas. Radio y profundidad viven aquí y en ningún otro sitio: ajustar el aspecto es tocar estas cuatro líneas. El original de referencia usaba 20px de desplazamiento y 60px de difuminado sobre una tarjeta de 190px. Aquí las tarjetas llegan a ocupar el ancho de la pantalla, y a ese tamaño esa sombra deja de leerse como relieve y pasa a niebla: se reduce a la mitad. */ --radius-card: 18px; --relieve: 8px 8px 18px rgb(var(--p-relieve-sombra-rgb)), -8px -8px 18px rgb(var(--p-relieve-luz-rgb)); --relieve-sm: 5px 5px 12px rgb(var(--p-relieve-sombra-rgb)), -5px -5px 12px rgb(var(--p-relieve-luz-rgb)); --relieve-hundido: inset 5px 5px 12px rgb(var(--p-relieve-sombra-rgb)), inset -5px -5px 12px rgb(var(--p-relieve-luz-rgb)); } /* ═══════════════════════════════════════════════════════════════ CAPA 2 — SEMÁNTICAS · TEMA OSCURO Los mismos papeles, invertidos: el campo pasa a ser el suelo y el papel se convierte en tinta. Nada lo activa hoy —la dirección definida es la clara—, se conserva funcionando por si se retoma. ═══════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { --color-bg: rgb(var(--p-dark-rgb)); --color-bg-alt: rgb(var(--p-dark-2-rgb)); --color-surface: rgb(var(--p-dark-rgb)); --color-surface-2: rgb(var(--p-dark-2-rgb)); --color-surface-3: rgb(var(--p-dark-3-rgb)); --color-border: rgb(var(--p-white-rgb) / .2); --color-border-strong: rgb(var(--p-white-rgb) / .3); --color-border-heavy: rgb(var(--p-white-rgb) / .42); --color-rule: rgb(var(--p-white-rgb) / .1); --color-rule-strong: rgb(var(--p-white-rgb) / .16); /* La rampa de texto sube un escalón respecto al claro. Sobre papel, un gris medio se lee sin esfuerzo; sobre fondo oscuro el mismo gris se apaga, y la interfaz está llena de rótulos pequeños en versalitas y monoespaciada, que es donde antes se perdía. Medido: --color-text-3 pasa de 6,4:1 a 9,3:1 y --color-text-faint de 4,3:1 —por debajo del mínimo AA— a 6,4:1. */ --color-text-strong: rgb(var(--p-white-rgb)); --color-text: rgb(var(--p-neutral-100-rgb)); --color-text-2: rgb(var(--p-neutral-300-rgb)); --color-text-3: rgb(var(--p-neutral-400-rgb)); --color-text-faint: rgb(var(--p-neutral-500-rgb)); --color-surface-glass: rgb(var(--p-white-rgb) / .03); --color-surface-glass-strong: rgb(var(--p-white-rgb) / .05); --color-surface-hover: rgb(var(--p-white-rgb) / .08); --color-inset: rgb(var(--p-black-rgb) / .3); --color-inset-soft: rgb(var(--p-black-rgb) / .22); --color-inset-subtle: rgb(var(--p-black-rgb) / .14); --color-surface-overlay: rgb(var(--p-dark-rgb) / .92); --color-scrim: rgb(var(--p-black-rgb) / .65); --color-field: rgb(var(--p-black-rgb)); --color-field-border: rgb(var(--p-white-rgb) / .14); --color-on-field: rgb(var(--p-white-rgb)); /* Antes el terciario apuntaba a --p-steel-400, que ahora es el amarillo de acento: se reapunta a la rampa neutra para no pintar rótulos. */ --color-on-field-2: rgb(var(--p-steel-200-rgb)); --color-on-field-3: rgb(var(--p-steel-300-rgb)); /* En oscuro el amarillo SÍ se lee como texto (#FFD500 sobre el fondo, 13:1), así que la tinta pasa a ser la cara clara del pin y relleno y tinta vuelven a coincidir. */ --color-brand: rgb(var(--p-brand-rgb)); --color-brand-alt: rgb(var(--p-brand-rgb)); --color-brand-hover: rgb(var(--p-brand-light-rgb)); --color-brand-strong: rgb(var(--p-brand-rgb)); --color-brand-dim: rgb(var(--p-brand-rgb) / .16); --color-brand-glow: rgb(var(--p-brand-rgb) / .08); /* Estados en oscuro: variantes claras propias. Los del tema claro son oscuros a propósito —para leerse sobre papel— y aquí se apagaban. Medido sobre #101417, antes de este cambio: éxito 3,47 · aviso 4,28 · aviso fuerte 3,88 · peligro 2,77 ninguno llegaba al 4,5 del texto. Ahora: 8,4 · 8,8 · 7,2 · 6,7. */ --color-success: rgb(var(--p-green-light-rgb)); --color-success-dim: rgb(var(--p-green-light-rgb) / .14); --color-warning: rgb(var(--p-amber-light-rgb)); --color-warning-dim: rgb(var(--p-amber-light-rgb) / .14); --color-warning-strong: rgb(var(--p-orange-light-rgb)); --color-danger: rgb(var(--p-red-light-rgb)); --color-danger-dim: rgb(var(--p-red-light-rgb) / .14); --color-scrollbar: rgb(var(--p-white-rgb) / .18); --color-scrollbar-hover: rgb(var(--p-white-rgb) / .3); --shadow-sm: none; --shadow: 0 2px 10px rgb(var(--p-black-rgb) / .5); --shadow-lg: 0 8px 28px rgb(var(--p-black-rgb) / .6); --shadow-xl: 0 16px 44px rgb(var(--p-black-rgb) / .7); /* En oscuro el brillo NO puede ser blanco: a esta luminosidad un #ffffff difuminado no lee como luz rasante, lee como halo. La luz pasa a ser el fondo apenas aclarado, y la sombra, negro casi puro. */ --p-relieve-sombra-rgb: 6 8 10; --p-relieve-luz-rgb: 30 36 41; } /* ═══════════════════════════════════════════════════════════════ CAPA 3 — ALIAS DE COMPATIBILIDAD Los nombres que ya usa el proyecto. No añadir nombres nuevos aquí: el código nuevo debería usar directamente los --color-*. ═══════════════════════════════════════════════════════════════ */ :root { --bg: var(--color-bg); --bg2: var(--color-bg-alt); --surface: var(--color-surface); --surface2: var(--color-surface-2); --surface3: var(--color-surface-3); --border: var(--color-border); --border2: var(--color-border-strong); --border3: var(--color-border-heavy); --text: var(--color-text); --text2: var(--color-text-2); --text3: var(--color-text-3); --accent: var(--color-brand); --accent-hover: var(--color-brand-hover); --accent-dim: var(--color-brand-dim); --accent-glow: var(--color-brand-glow); /* components.css usa --sky en vez de --accent; mismo color. */ --sky: var(--color-brand); --sky-dim: var(--color-brand-dim); --sky-glow: var(--color-brand-glow); --indigo: var(--color-brand-strong); --green: var(--color-success); --green-dim: var(--color-success-dim); --red: var(--color-danger); --red-dim: var(--color-danger-dim); --amber: var(--color-warning); --amber-dim: var(--color-warning-dim); } /* ═══════════════════════════════════════════════════════════════ TOKENS NO CROMÁTICOS No dependen del tema. ═══════════════════════════════════════════════════════════════ */ :root { /* Layout */ --sidebar-w: 232px; --topbar-h: 60px; /* Radios. El sistema fue cuadrado hasta el 2026-08-28; con el paso al relieve deja de serlo, porque una sombra que rodea un vértice recto acumula densidad en la esquina y delata el truco. Cambiar el valor aquí cuadra —o redondea— los ~90 usos de golpe. No poner un radio literal en ningún componente. */ --radius: 10px; --radius-sm: 8px; --radius-xs: 6px; --radius-lg: 14px; /* Cápsula. Sólo la usa el botón primario: es lo que lo separa del resto sin recurrir a otro color. `999px` y no `6em` porque el radio no debe crecer con el tamaño de letra — a 6em un botón pequeño deja de ser cápsula. */ --radius-pill: 999px; /* Transición */ --transition: .16s ease; --t: .16s cubic-bezier(.4,0,.2,1); /* Densidad — las variantes están en layout.css (html.densidad-*) */ --row-pad: 11px 18px; --card-pad: 18px; /* Tipografía. La condensada titula y etiqueta; la de texto lee; la monoespaciada es para DATOS —patentes, IMEI, fechas, métricas—, nunca para prosa. */ /* Cuerpo y titulares comparten familia. La jerarquía la lleva el peso y el tamaño, no el ancho: al dejar la condensada, mezclar dos sans parecidas ensuciaría más de lo que distingue. */ --font: 'Roboto', system-ui, sans-serif; --font-heading: 'Roboto', system-ui, sans-serif; --font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; /* Interletrado de las etiquetas versalitas. Tres pasos: cuanto más pequeña la etiqueta, más abierta. */ --track-label: .16em; /* etiquetas de campo, cabeceras de panel */ --track-kicker: .2em; /* antetítulos y rótulos de sección */ --track-micro: .1em; /* dentro de botones y píldoras pequeñas */ } /* ═══════════════════════════════════════════════════════════════ BASE Reset y elementos globales. Vive aquí por herencia de la versión anterior; separarlo a un base.css exigiría tocar el orden de carga de las cuatro páginas. ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font); background: var(--color-bg); color: var(--color-text); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ── Titulación ── Todo lo que titula va en condensada. Se declara aquí para que valga también en las páginas que no cargan components.css. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.08; letter-spacing: .01em; } /* ── Marcas de registro ── El filete de esquina que lleva todo panel del sistema. En el kit original son cuatro ; aquí se dibujan con un pseudoelemento para no tener que sembrar 4 nodos vacíos en cada tarjeta de un index.html de 2.000 líneas. Ocho capas de degradado: por esquina, una barra vertical y una horizontal de 11 px, cruzándose sobre el vértice de la caja. */ .marcas, .login-form-card, .result-main { position: relative; } .marcas::after, .login-form-card::after, .result-main::after { content: ""; position: absolute; inset: -6px; pointer-events: none; z-index: 1; background-repeat: no-repeat; background-image: linear-gradient(var(--color-mark), var(--color-mark)), linear-gradient(var(--color-mark), var(--color-mark)), linear-gradient(var(--color-mark), var(--color-mark)), linear-gradient(var(--color-mark), var(--color-mark)), linear-gradient(var(--color-mark), var(--color-mark)), linear-gradient(var(--color-mark), var(--color-mark)), linear-gradient(var(--color-mark), var(--color-mark)), linear-gradient(var(--color-mark), var(--color-mark)); background-size: 1px 11px, 11px 1px, /* superior izquierda */ 1px 11px, 11px 1px, /* superior derecha */ 1px 11px, 11px 1px, /* inferior izquierda */ 1px 11px, 11px 1px; /* inferior derecha */ background-position: left 5px top 0, left 0 top 5px, right 5px top 0, right 0 top 5px, left 5px bottom 0, left 0 bottom 5px, right 5px bottom 0, right 0 bottom 5px; } :root { --color-mark: rgb(var(--p-ink-rgb) / .55); } :root[data-theme="dark"] { --color-mark: rgb(var(--p-white-rgb) / .45); } /* Sobre el campo acero las marcas se reversan. */ .marcas.sobre-campo { --color-mark: rgb(var(--p-white-rgb) / .5); } /* Scrollbar */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: var(--radius-xs); } ::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-hover); } /* Selección */ ::selection { background: var(--color-brand-dim); color: var(--color-text-strong); } /* Foco de teclado — nunca el anillo azul por defecto del navegador. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; } /* Animaciones globales */ @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } }