/* ============================================================ Arketiz — Design tokens ERP de originación: lienzo blanco puro, bordes hairline en vez de sombras, un único acento de marca (Azul Cinético #0033E6), texto en Carbón Grafito (#111827; sin negro puro). Cuatro colores de estado (función, no marca). Tema conmutado por [data-theme="light"|"dark"] en , fijado antes del primer pintado por theme-preload.js. El CLARO es el tema principal; el oscuro queda funcional (toggle). ============================================================ */ :root { /* ---- type --------------------------------------------------- Sans geométrica de alto grosor (identidad Arketiz). El CSP (font-src 'self') no permite Google Fonts: se usa un stack geométrico que degrada por plataforma. Para garantizarla, autohospedar un woff2 en static/fonts/ y declarar @font-face aquí (font-src 'self' ya lo permite). */ --font-sans: "Poppins", "Futura", "Century Gothic", "Bahnschrift", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* ---- kerning ajustado para encabezados (identidad Arketiz) --- */ --tracking-heading: -0.02em; --text-2xs: 11px; --text-2xs-lh: 14px; --text-xs: 12px; --text-xs-lh: 16px; --text-sm: 13px; --text-sm-lh: 18px; --text-base: 14px; --text-base-lh: 20px; --text-lg: 16px; --text-lg-lh: 22px; --text-xl: 20px; --text-xl-lh: 26px; --text-2xl: 24px; --text-2xl-lh: 30px; /* ---- spacing (compact scale, 4px base) ---------------------- */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-9: 32px; --space-10: 40px; /* ---- shape lock ---------------------------------------------- buttons/inputs/table cells = sm, panels/cards = md, badges/chips/avatars = full. No other radii are used. */ --radius-sm: 4px; --radius-md: 6px; --radius-full: 999px; /* ---- layout dims --------------------------------------------- */ --sidebar-w: 240px; --sidebar-w-collapsed: 56px; --topbar-h: 52px; /* ---- z-index scale --------------------------------------------- */ --z-sidebar: 20; --z-topbar: 30; --z-dropdown: 40; --z-modal: 50; --z-toast: 60; /* ---- motion (functional only, no cinematic flourish) ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 180ms; /* ---- brand accent (bloqueado, único: Azul Cinético) ----------- */ --accent: #0033E6; /* Azul Cinético — CTAs y pines del mapa */ --accent-strong: #0026B3; /* variante para hover / estados activos */ --accent-soft-bg: #EAEEFF; --accent-soft-border: #B9C6F7; --accent-fg: #ffffff; /* ---- semantic status colors (function, not brand) -------------- */ --status-success: #15803d; --status-success-bg: #f0fdf4; --status-success-border: #bbf7d0; --status-warning: #a16207; --status-warning-bg: #fefce8; --status-warning-border: #fde68a; --status-danger: #b91c1c; --status-danger-bg: #fef2f2; --status-danger-border: #fecaca; --status-info: #1d4ed8; --status-info-bg: #eff6ff; --status-info-border: #bfdbfe; /* ---- classification tags (project "clase" taxonomy, not status) -- a small fixed categorical palette, distinct from the brand accent and from status colors, matching scoring.py's CLASE_META intent. */ --cat-originacion: #7c3aed; --cat-originacion-bg: #f5f3ff; --cat-originacion-border: #ddd6fe; --cat-licitacion: #1d4ed8; --cat-licitacion-bg: #eff6ff; --cat-licitacion-border: #bfdbfe; --cat-expansion: #0e7490; --cat-expansion-bg: #ecfeff; --cat-expansion-border: #a5f3fc; /* ============ TEMA CLARO (principal) ============ ~80% de la interfaz en Blanco Puro (#FFFFFF); menús laterales y paneles laterales en gris levísimo (#F4F5F7); texto en Carbón Grafito (#111827), sin negro puro. */ --bg-app: #ffffff; /* lienzo: Blanco Puro */ --bg-panel: #ffffff; /* tarjetas/paneles: Blanco Puro */ --bg-panel-2: #f4f5f7; /* superficies secundarias: gris levísimo */ --bg-sidebar: #f4f5f7; /* menús/paneles laterales: gris levísimo */ --bg-hover: #eceef2; --bg-active: #e2e5ea; --bg-scrim: rgb(17 24 39 / 0.4); /* base Carbón Grafito, sin negro puro */ --border: #e5e7eb; --border-strong: #d1d5db; --text-primary: #111827; /* Carbón Grafito */ --text-secondary: #374151; --text-muted: #6b7280; --text-on-accent: #ffffff; --shadow-dropdown: 0 4px 16px rgb(17 24 39 / 0.10), 0 1px 2px rgb(17 24 39 / 0.06); --logo-blend-mode: normal; --logo-filter: none; color-scheme: light; } :root[data-theme="dark"] { --bg-app: #0f1117; --bg-panel: #161922; --bg-panel-2: #1c202b; --bg-sidebar: #12151d; /* menú lateral: superficie más oscura */ --bg-hover: #1f2430; --bg-active: #262c3a; --bg-scrim: rgb(3 7 18 / 0.7); /* casi negro, sin negro puro */ --border: #262c3a; --border-strong: #333b4d; --text-primary: #f4f5f7; --text-secondary: #cbd2df; --text-muted: #8b93a7; --text-on-accent: #ffffff; /* Azul Cinético adaptado a fondo oscuro (más luminoso para contraste) */ --accent: #3b63ff; --accent-strong: #93a9ff; --accent-soft-bg: #131f45; --accent-soft-border: #1e357e; --status-success: #4ade80; --status-success-bg: #0f2116; --status-success-border: #14532d; --status-warning: #eab308; --status-warning-bg: #241d09; --status-warning-border: #713f12; --status-danger: #f87171; --status-danger-bg: #2a1213; --status-danger-border: #7f1d1d; --status-info: #60a5fa; --status-info-bg: #0f1c2e; --status-info-border: #1e3a8a; --cat-originacion: #c4b5fd; --cat-originacion-bg: #241b3d; --cat-originacion-border: #5b21b6; --cat-licitacion: #93c5fd; --cat-licitacion-bg: #10203a; --cat-licitacion-border: #1e40af; --cat-expansion: #67e8f9; --cat-expansion-bg: #082830; --cat-expansion-border: #155e75; --shadow-dropdown: 0 8px 24px rgb(3 7 18 / 0.5), 0 1px 2px rgb(3 7 18 / 0.35); /* El logotipo es un wordmark de texto (sin imagen): sin blend/filtro. */ --logo-blend-mode: normal; --logo-filter: none; color-scheme: dark; } /* graceful no-JS fallback: if data-theme was never set, honor OS pref */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg-app: #0f1117; --bg-panel: #161922; --bg-panel-2: #1c202b; --bg-sidebar: #12151d; --bg-hover: #1f2430; --bg-active: #262c3a; --bg-scrim: rgb(3 7 18 / 0.7); --border: #262c3a; --border-strong: #333b4d; --text-primary: #f4f5f7; --text-secondary: #cbd2df; --text-muted: #8b93a7; --accent: #3b63ff; --accent-strong: #93a9ff; --accent-soft-bg: #131f45; --accent-soft-border: #1e357e; --status-success: #4ade80; --status-success-bg: #0f2116; --status-success-border: #14532d; --status-warning: #eab308; --status-warning-bg: #241d09; --status-warning-border: #713f12; --status-danger: #f87171; --status-danger-bg: #2a1213; --status-danger-border: #7f1d1d; --status-info: #60a5fa; --status-info-bg: #0f1c2e; --status-info-border: #1e3a8a; --cat-originacion: #c4b5fd; --cat-originacion-bg: #241b3d; --cat-originacion-border: #5b21b6; --cat-licitacion: #93c5fd; --cat-licitacion-bg: #10203a; --cat-licitacion-border: #1e40af; --cat-expansion: #67e8f9; --cat-expansion-bg: #082830; --cat-expansion-border: #155e75; --shadow-dropdown: 0 8px 24px rgb(3 7 18 / 0.5), 0 1px 2px rgb(3 7 18 / 0.35); --logo-blend-mode: normal; --logo-filter: none; color-scheme: dark; } }