/* ============================================================================ wedo.css — la marca WeDo aplicada al panel DE DÓNDE SALE: `we do Design System/colors_and_type.css` (BRANDBOOK 2019). Los colores, los radios y las sombras se copian TAL CUAL. Lo que se adapta está marcado con «ADAPTADO» y dice por qué. CÓMO FUNCIONA: no sobrescribe reglas de Tabler — le pasa los valores por sus propias variables (`--tblr-*`). Así una actualización de Tabler no rompe la marca, y no hace falta ni un `!important`. ========================================================================== */ /* ── Nuckle · sólo los cuatro pesos que un panel usa ─────────────────────── */ /* El brandbook trae ocho. Los otros cuatro (Hairline, Thin, ExtraLight, Light) son para titulares de marketing y en una tabla no se leen. */ @font-face { font-family: 'Nuckle'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/nuckle-regular.woff2') format('woff2'); } @font-face { font-family: 'Nuckle'; font-weight: 500; font-style: normal; font-display: swap; src: url('/static/fonts/nuckle-medium.woff2') format('woff2'); } @font-face { font-family: 'Nuckle'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/nuckle-semibold.woff2') format('woff2'); } @font-face { font-family: 'Nuckle'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/nuckle-bold.woff2') format('woff2'); } :root { /* ── Paleta, del brandbook ───────────────────────────────────────────── */ --wedo-blue: #1c7ef4; /* primaria */ --wedo-white: #ffffff; --wedo-lilac: #7b84fc; /* Management */ --wedo-cyan: #2cfcfe; /* Workforce */ --wedo-blue-deep: #065184; /* Aftersales */ --wedo-sky: #17deff; /* Marketing */ /* Neutros (el brandbook los deriva; se conservan) */ --wedo-ink: #0b1b2f; --wedo-fg-1: #0b1b2f; --wedo-fg-2: #334155; /* CONTRASTE-DEL-TEXTO-DE-AYUDA (23-sep). Era #64748b (slate-500) y daba 4.34:1 sobre `--wedo-surface-2`, por debajo del 4.5 que pide WCAG AA para texto normal. No es un token decorativo: Tabler lo usa como `--tblr-secondary`, o sea TODO el texto de ayuda bajo los campos, que además es chico. Medido con el nuevo: 5.43:1 sobre el fondo y 4.96:1 sobre la tarjeta. El tema oscuro ya estaba bien (5.44 y 5.81). */ --wedo-fg-3: #5b6b81; --wedo-line: #e2e8f0; --wedo-surface-1: #ffffff; --wedo-surface-2: #f1f5f9; --wedo-surface-3: #e2eaf6; /* Radios y sombras, del brandbook */ --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px; --sh-1: 0 2px 8px rgba(11,27,47,.06); --sh-2: 0 12px 32px -12px rgba(28,126,244,.25); --sh-3: 0 24px 60px -20px rgba(15,30,60,.25), 0 4px 14px rgba(15,30,60,.08); /* ── ADAPTADO · la escala tipográfica ────────────────────────────────── */ /* El brandbook es de marketing: display 128px, h1 78px, body 18px. En una tabla de leads eso no entra. Se conserva la FAMILIA y la proporción; los tamaños se comprimen a los de un panel. */ --fs-h1: 28px; --lh-h1: 1.2; --ls-h1: -.02em; --fs-h2: 22px; --lh-h2: 1.25; --ls-h2: -.015em; --fs-h3: 18px; --lh-h3: 1.3; --ls-h3: -.01em; --fs-body: 14.5px; --lh-body: 1.5; --fs-caption: 12.5px; --lh-caption:1.45; --ls-caption: .01em; --fs-eyebrow: 11px; --lh-eyebrow: 1.3; --ls-eyebrow: .14em; /* ── Lo que Tabler lee ───────────────────────────────────────────────── */ --tblr-font-sans-serif: 'Nuckle', system-ui, -apple-system, 'Segoe UI', sans-serif; --tblr-primary: var(--wedo-blue); --tblr-primary-rgb: 28, 126, 244; --tblr-link-color: var(--wedo-blue); --tblr-border-radius: var(--r-md); --tblr-border-radius-sm: var(--r-sm); --tblr-border-radius-lg: var(--r-lg); --tblr-border-color: var(--wedo-line); --tblr-body-bg: var(--wedo-surface-2); --tblr-body-color: var(--wedo-fg-1); --tblr-secondary: var(--wedo-fg-3); --tblr-font-size-base: var(--fs-body); } /* ── Modo oscuro ───────────────────────────────────────────────────────── ADAPTADO: el brandbook NO define una paleta oscura. Estos neutros están DERIVADOS del `--wedo-ink`, y el azul se aclara un punto porque #1c7ef4 sobre #0b1b2f pierde contraste en texto chico. Si algún día la marca publica su versión oscura, se reemplaza esto y nada más. */ [data-bs-theme="dark"] { --wedo-fg-1: #e9eef6; --wedo-fg-2: #b7c3d4; --wedo-fg-3: #8697ad; --wedo-line: #1e3050; --wedo-surface-1: #0f2138; /* tarjetas */ --wedo-surface-2: #0b1b2f; /* fondo — el ink del brandbook */ --wedo-surface-3: #16294a; --tblr-primary: #4d9bff; /* aclarado para contraste sobre el ink */ --tblr-primary-rgb: 77, 155, 255; --tblr-link-color: #4d9bff; --tblr-body-bg: var(--wedo-surface-2); --tblr-body-color: var(--wedo-fg-1); --tblr-border-color: var(--wedo-line); } /* ── Lo propio, que Tabler no cubre ──────────────────────────────────────── */ body { font-family: var(--tblr-font-sans-serif); } h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 700; } h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 600; } h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 600; } /* El «eyebrow» del brandbook: la etiqueta chica sobre un título. */ .wedo-eyebrow { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); font-weight: 600; text-transform: uppercase; color: var(--wedo-fg-3); } /* Estado vacío: una tabla sin filas tiene que decir qué hacer, no quedar muda. */ .wedo-vacio { padding: 3rem 1rem; text-align: center; color: var(--wedo-fg-3); } .wedo-vacio .wedo-vacio-icono { font-size: 2.5rem; opacity: .35; margin-bottom: .75rem; } /* El símbolo de la marca en la barra lateral */ .wedo-simbolo { height: 32px; width: auto; } /* Foco visible: se navega el panel con teclado y el outline por defecto de Bootstrap desaparece sobre fondos de color. */ :focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; } /* ── AGREGADO EN F1 · el mapeo que faltaba: las SUPERFICIES ────────────────── F0 mapeó el fondo del documento (`--tblr-body-bg`) pero no la superficie de las tarjetas, la barra lateral y los menús (`--tblr-bg-surface`), que es una variable distinta. Sin esto el modo oscuro quedaba mezclado: el fondo de la página en el ink de la marca y las tarjetas en el gris que trae Tabler de fábrica — dos grises que no son el mismo y se nota en el borde. Va al FINAL del archivo a propósito: en CSS, a igual especificidad gana lo último, así que esto pisa tanto a Tabler como al bloque de arriba sin tocar ni una línea de lo que se escribió en F0. */ :root { --tblr-bg-surface: var(--wedo-surface-1); --tblr-bg-surface-secondary: var(--wedo-surface-2); --tblr-bg-surface-tertiary: var(--wedo-surface-3); --tblr-border-color-translucent: var(--wedo-line); --tblr-secondary-color: var(--wedo-fg-2); --tblr-tertiary-color: var(--wedo-fg-3); --tblr-emphasis-color: var(--wedo-fg-1); --tblr-heading-color: var(--wedo-fg-1); } /* Los valores son los mismos: lo que cambia son los tokens `--wedo-*`, que el bloque oscuro de más arriba ya redefinió. Esta repetición existe porque Tabler declara sus propios valores dentro de SU `[data-bs-theme="dark"]`, y una variable declarada sólo en `:root` no le gana a una declarada en el selector del tema. */ [data-bs-theme="dark"] { --tblr-bg-surface: var(--wedo-surface-1); --tblr-bg-surface-secondary: var(--wedo-surface-2); --tblr-bg-surface-tertiary: var(--wedo-surface-3); --tblr-border-color-translucent: var(--wedo-line); --tblr-secondary-color: var(--wedo-fg-2); --tblr-tertiary-color: var(--wedo-fg-3); --tblr-emphasis-color: var(--wedo-fg-1); --tblr-heading-color: var(--wedo-fg-1); } /* ═══════════════════════════════════════════════════════════════════════════ EL TABLERO NEÓN (24-sep) El usuario pidió llevar el dashboard a un tablero premium: fondo profundo, cifras encendidas, anillos con luz. La pregunta difícil no era el oscuro —ahí el neón sale solo— sino el CLARO: un halo de color sobre blanco se lee como suciedad alrededor de cada forma. LA RESPUESTA ES UN SOLO NÚMERO. `--neon-halo-fuerza` vale 18 en oscuro y **0 en claro**, y lo leen tanto el CSS —dentro de `calc(var(...) * Npx)`, que colapsa a 0px— como el JavaScript del canvas. Así el tema claro no «atenúa» el neón: lo APAGA, y ni una regla ni una línea de script pregunta en qué tema está. El interruptor queda en un lugar auditable. En claro la profundidad viene de otro lado: sombra en DOS TIEMPOS (contacto de 1px + ambiente con spread negativo) más un filo de luz arriba. Eso es lo que el claro recibe a cambio del brillo apagado; sin eso, «sobrevive en claro» querría decir «en claro no cambia nada». NINGÚN COLOR NUEVO: los cinco del neón son los del brandbook que ya estaban arriba —blue, cyan, lilac, sky, blue-deep—. ═══════════════════════════════ */ :root { /* El fondo profundo. La tarjeta NO se oscurece: se oscurece lo que está DETRÁS, y de ahí sale la profundidad. El valor va en HEXADECIMAL y no en `color-mix` a propósito: es `color-mix(in srgb, var(--wedo-surface-2) 94%, var(--wedo-blue))` ya resuelto. El test de contraste lee ESTE archivo y parsea hex; con la función adentro no podría medirlo, y el fondo que ocupa más píxeles de la pantalla quedaría sin certificar. Medido: fg-3 da 4.63:1 — AA. Al 90% cae a 4.41 y rompe, así que el 94 no es estético. */ --wedo-surface-0: #e4eef9; /* La rampa neón, atenuada contra la tinta para que en CLARO cada cifra pase AA sobre blanco. En oscuro (más abajo) va cruda. */ --neon-1: #1667c6; --neon-2: #0f7f80; --neon-3: #4a52c4; --neon-4: #0d7f92; --neon-5: #054370; --neon-halo-fuerza: 0; /* EL interruptor. Lo leen el CSS y el JS. */ --wedo-sombra-rgb: 11, 27, 47; /* el --wedo-ink, para no escribir rgba() sueltos */ --wedo-filo: rgba(255, 255, 255, .85); /* Sombra de tarjeta en DOS TIEMPOS, y ése es todo el truco del claro: contacto de 1px (está apoyada) + ambiente difusa con spread negativo (hay aire debajo). `--sh-1` es un solo tiempo y por eso no levanta nada. */ --neon-halo: 0 1px 1px rgba(var(--wedo-sombra-rgb), .04), 0 8px 24px -14px rgba(var(--wedo-sombra-rgb), .22); --neon-halo-2: 0 2px 4px rgba(var(--wedo-sombra-rgb), .05), 0 18px 40px -18px rgba(var(--wedo-sombra-rgb), .28); --neon-trazo: var(--wedo-line); --neon-lavado: color-mix(in srgb, var(--neon-acento, var(--neon-1)) 5%, transparent); --wedo-linea-suave: color-mix(in srgb, var(--wedo-line) 55%, var(--wedo-surface-1)); /* El plato bajo el porcentaje. OPACO (98%) y no translúcido: con el hue del tenant sorteado en cada carga, el contraste de un % escrito sobre el relleno depende de qué tono salió, y eso no se puede fijar en un test. Sobre el plato el par pasa a ser fg-1 / bg-surface, que el test YA mide. */ --neon-plato: color-mix(in srgb, var(--tblr-bg-surface) 98%, transparent); /* Token propio para la cifra del KPI —y no `var(--neon-1)` escrito en la regla— para que el día que un número no pase AA se baje SÓLO el número, sin tocar los rellenos de los gráficos. */ --neon-cifra: var(--neon-acento, var(--neon-1)); --fs-dato: clamp(1.9rem, 1.2rem + 2.2vw, 2.6rem); --fs-rotulo: 11.5px; --ls-rotulo: .12em; --r-pill: 999px; --tblr-body-bg: var(--wedo-surface-0); } [data-bs-theme="dark"] { /* `color-mix(in srgb, var(--wedo-ink) 75%, #000)` resuelto. Ver arriba por qué va en hex. Medido: fg-3 da 6.21:1. */ --wedo-surface-0: #081423; /* En oscuro la marca va CRUDA: fue diseñada para emitir. El único que se toca es blue-deep, que sobre el ink da 1.94:1 y desaparece. */ --neon-1: var(--wedo-blue); --neon-2: var(--wedo-cyan); --neon-3: var(--wedo-lilac); --neon-4: var(--wedo-sky); --neon-5: color-mix(in srgb, var(--wedo-blue-deep) 50%, var(--wedo-sky)); --neon-halo-fuerza: 18; --wedo-sombra-rgb: 0, 0, 0; /* una sombra de ink sobre ink no existe */ --wedo-filo: rgba(255, 255, 255, .055); /* más y se ve un borde blanco barato */ --neon-trazo: color-mix(in srgb, var(--wedo-cyan) 18%, var(--wedo-line)); --neon-halo: 0 0 0 1px var(--neon-trazo), 0 18px 40px -18px color-mix(in srgb, var(--wedo-cyan) 42%, transparent); --neon-halo-2: 0 0 0 1px var(--neon-trazo), 0 26px 52px -22px color-mix(in srgb, var(--wedo-cyan) 55%, transparent); --neon-lavado: color-mix(in srgb, var(--neon-acento, var(--neon-1)) 14%, transparent); --tblr-body-bg: var(--wedo-surface-0); }