/* ========================================================================== tokens.css — Identidad visual de VASP (Value Added Solution Partner) Destino: vasp.cl/assets/tokens.css (se carga antes que todo lo demás) Los valores salen de una inspección de hikvision.com/en/products/software/HikCentral-Professional-series/ hecha el 2026-08-25: colores computados reales, tipografía y radios en uso. ADVERTENCIA sobre lo que NO se copió: la página declara --primary:#007bff, --blue, --indigo, --danger, etc. Eso es la paleta por defecto de Bootstrap 4, no la marca Hikvision. Copiarla habría dado un portal genérico con azul de Bootstrap. Los colores de marca son los que están abajo, tomados de lo que la página realmente pinta. ========================================================================== */ /* ========================================================================== Open Sans, servida desde aquí mismo La CSP del portal es `font-src 'self'`: una fuente traída de un CDN NO carga. Durante semanas `--fuente` declaró "Open Sans" sin que existiera /assets/fonts/, así que el portal usó la del sistema sin avisar a nadie — una fuente que falta no da error, sólo cambia de cara. Son dos archivos y no seis porque Open Sans es VARIABLE: un mismo archivo cubre de 300 a 800, y sólo hacen falta los subconjuntos latin y latin-ext. El navegador descarga latin-ext únicamente si la página trae un carácter que lo necesite, que es para lo que sirve unicode-range. Licencia Apache 2.0: se puede servir desde el propio dominio. ========================================================================== */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; /* variable: un archivo, todos los pesos */ font-display: swap; /* el texto se lee mientras llega la fuente */ src: url("/assets/fonts/open-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/assets/fonts/open-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ── Marca ─────────────────────────────────────────────────────────────── */ --hik-rojo: #D7150E; /* rojo Hikvision, el acento dominante */ --hik-rojo-alt: #D71820; /* variante que aparece en algunos módulos */ --hik-rojo-oscuro: #A31009; /* hover / estado activo */ --hik-azul: #094F9C; /* azul corporativo, títulos y enlaces serios */ --hik-celeste: #1AAFFF; /* acento secundario, gráficos e info */ /* ── Superficies ───────────────────────────────────────────────────────── */ --fondo: #FFFFFF; --fondo-alt: #F0F4F8; /* bandas de sección, cabeceras de tabla */ --fondo-hover: #F6F8FB; --borde: #DFE5EC; --borde-fuerte: #C4CDD8; /* ── Texto ─────────────────────────────────────────────────────────────── */ --texto: #212529; /* cuerpo */ --texto-titulo: #333333; /* títulos */ --texto-suave: #4F5B5F; /* secundario, etiquetas */ --texto-tenue: #6C757D; /* metadatos, ayudas */ --texto-inverso: #FFFFFF; /* Fondo del elemento SELECCIONADO en el menú. Gris oscuro y no rojo: el rojo es el filo que lo marca, y si además fuera el fondo, el acento dejaría de ser acento. Bloque gris + texto blanco + filo rojo ancho: tres señales distintas diciendo lo mismo. */ --sel-fondo: #2F3A40; /* ── Estado ────────────────────────────────────────────────────────────── */ /* Ojo: el rojo de marca NO se usa para errores. Si el rojo significa a la vez "Hikvision" y "algo salió mal", el usuario no sabe cuál está leyendo. */ --exito: #1D9E75; --alerta: #E87722; --error: #C0392B; --info: var(--hik-celeste); /* ── Business (idénticos al dashboard interno, para que un gráfico signifique lo mismo en los dos sistemas) ───────────────────────────── */ --biz-cctv: #378ADD; --biz-noncctv: #7F77DD; --biz-new: #E87722; --biz-software: #1D9E75; --biz-thermal: #E84040; --biz-accesorios: #6D6E71; --biz-servicio: #00BCD4; --biz-raw: #A97C50; /* ── Tipografía ────────────────────────────────────────────────────────── */ /* Open Sans es la tipografía del sitio corporativo. Se sirve desde /assets/fonts/ — nunca desde un CDN externo: la CSP sólo permite 'self'. */ --fuente-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --fuente: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --txt-base: 16px; /* cuerpo, igual que el sitio corporativo */ --txt-lh: 1.5; /* 24px sobre 16px */ --txt-sm: 14px; --txt-xs: 12px; --txt-h1: 32px; /* el sitio usa 40px; en un portal de datos pesa demasiado */ --txt-h2: 24px; --txt-h3: 18px; --peso-normal: 400; --peso-semi: 600; --peso-bold: 700; /* ── Forma ─────────────────────────────────────────────────────────────── */ --radio: 3px; /* campos y chips — el radio dominante del sitio */ /* El BOTÓN es una píldora, y no es una licencia de diseño: hikvision.com los pinta así en todas partes, con el radio igual a la mitad de su altura (22px en uno de 44, 16px en uno de 32). Comprobado el 2026-09-02 en la portada y en Support. La marca reserva la forma redondeada para las ACCIONES: sus tarjetas tienen esquina recta (border-radius 0), igual que las de este portal. Por eso el 999px va solo aquí y --radio se queda en 3px para campos y chips. */ --radio-btn: 999px; /* Grosor del acento rojo: el filo que dice «estás aquí» o «mira esto». Estaba a 2px en unos sitios y 3 en otros, según quién escribiera cada regla, y ninguno llegaba a leerse: el acento de una pestaña convive con la regla superior de la tarjeta, que es negra y de ancho completo, y a 2px pierde esa competencia siempre. Un solo valor para todos, y aquí — subirlo o bajarlo es una línea. */ --acento: 4px; --radio-card: 8px; /* tarjetas */ --radio-panel: 16px; /* paneles grandes */ /* ── Elevación ─────────────────────────────────────────────────────────── */ --sombra-sutil: 0 1px 2px rgba(0, 0, 0, .15); --sombra-card: 0 2px 14px rgba(0, 0, 0, .07); --sombra-modal: 0 0 15px rgba(0, 0, 0, .22); /* ── Ritmo ─────────────────────────────────────────────────────────────── */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --alto-header: 64px; /* igual que el sitio corporativo */ --ancho-max: 1200px; } /* ========================================================================== Cómo usar el rojo El sitio corporativo es una página de marketing: ahí el rojo llena bloques enteros y funciona. Un portal de datos es otra cosa — el usuario viene a leer tablas y estados, y una superficie roja compite con el contenido y se confunde con una alerta. Regla para este portal: - Rojo: barra de marca, botón de acción principal, subrayado del tab activo, y poco más. Acentos, no superficies. - Datos: gris y blanco. El color lo aportan los estados y los --biz-*. - Errores: --error (#C0392B), que se distingue del rojo de marca. Contraste verificado: #D7150E sobre blanco = 5.25:1 → cumple WCAG AA para texto normal. Blanco sobre #D7150E, lo mismo. No llega a AAA: no usarlo para texto pequeño de lectura larga. ========================================================================== */