/* ========================================================================== CONCRETO · concreto-tokens.css Design tokens del sistema de diseño Concreto. -------------------------------------------------------------------------- Fuente de verdad: MarketplaceFrontend/src/styles.scss (espejado en Concreto-Sistema-Diseno/concreto-core.css). NO editar valores; añadir tokens nuevos solo como adición claramente comentada. Documentación: Concreto-Migracion-Diseno/00-SISTEMA-DISENO.md ========================================================================== */ :root { /* ---- Color · marca (nombres reales del app) ---- */ --main-yellow: #F9F43F; /* Amarillo Brillante — acción / acento */ --main-gray: #98A1A2; /* Gris Celeste — PRIMARIO (superficie/texto) */ --secondary-blue: #02366A; /* Azul medio — hover, énfasis, foco */ --third-dark-blue: #02223D; /* Azul Negro — texto, navbar, bandas oscuras */ --dark-blue: #02223D; /* alias de --third-dark-blue */ --secondary-light: #EFEDF9; /* Lila/lavanda — fondos de sección suaves */ --third-blue-green: #529198; /* Azul Verde — acento, gradientes */ --third-white: #FFFFFF; --landing-background: rgb(237, 237, 237); --whatsapp-green: #25D366; /* ---- Alias --c-* (capa portable) ---- */ --c-yellow: var(--main-yellow); --c-yellow-700: #D8D400; --c-yellow-300: #FDFBA6; --c-gray-celeste: var(--main-gray); --c-navy: var(--secondary-blue); --c-navy-black: var(--third-dark-blue); --c-teal: var(--third-blue-green); --c-lila: var(--secondary-light); --c-white: #FFFFFF; --c-green-wa: var(--whatsapp-green); --c-green-wa-700: #1EBE5A; /* ---- Escala neutral ---- */ --c-ink: #0F1B2D; --c-ink-soft: #44525F; --c-muted: #6B7785; --c-line: #E2E6EC; --c-line-strong: #CBD2DA; --c-surface: #FFFFFF; --c-surface-2: #F4F6F9; --c-surface-3: var(--c-lila); /* ---- Estados semánticos (success SIEMPRE verde, no azul) ---- */ --c-success: #1E9E5A; --c-success-700: #157A43; /* verde oscuro — fondo de botón sólido (blanco AA) */ --c-success-bg: #E6F6EE; --c-warning: #E0A100; --c-warning-bg: #FFF6DD; --c-danger: #D92D20; --c-danger-bg: #FEE2E2; --c-info: var(--c-navy); --c-info-bg: #E7EFF8; /* ---- Paleta de gráficas (Chart.js) ---- Colores de MARCA (cero azul Bootstrap #0d6efd). Fuente única: la lee static/js/concreto-charts.js y la expone a todos los charts. Para series únicas usar --chart-1 (teal); para multi-serie, --chart-1..8 en orden. --chart-line = línea de tendencia/acumulado (amarillo, contrasta con teal). */ --chart-1: var(--c-teal); /* primaria (serie única) */ --chart-2: var(--main-yellow); --chart-3: var(--c-success); --chart-4: var(--c-warning); --chart-5: var(--c-danger); --chart-6: var(--c-gray-celeste); --chart-7: #7FB5BB; /* teal claro (derivado) */ --chart-8: var(--c-yellow-300); --chart-line: var(--main-yellow); /* tendencia / % acumulado */ --chart-grid: rgba(255, 255, 255, .08); --chart-tick: var(--c-ink); /* en tema oscuro resuelve a texto claro */ /* ---- Campos de formulario ---- */ --field-bg: var(--third-white); --field-border: #d7dde4; --field-border-focus: var(--secondary-blue); --field-ring-focus: rgba(2, 54, 106, 0.14); --field-placeholder: #aab4bd; --field-label: #33424d; --field-error: #d92d20; --field-ring-error: rgba(217, 45, 32, 0.12); /* ---- Tipografía ---- Hanken Grotesk = fallback del styleguide; inofensivo si no se carga. */ --font-sans: "Mundial", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.25rem; /* 20 */ --fs-lg: 1.5625rem; /* 25 */ --fs-xl: 1.9375rem; /* 31 */ --fs-2xl: 2.4375rem; /* 39 */ --fs-3xl: 3.0625rem; /* 49 */ --fw-thin: 300; --fw-regular: 400; --fw-medium: 500; --fw-demi: 600; --fw-bold: 600; /* antes 700 — se bajó el bold general (Mundial se veía muy grueso en KPIs/títulos) */ --fw-heavy: 700; /* peso pesado real, por si se necesita puntual */ --lh-tight: 1.15; --lh-base: 1.6; /* ---- Espaciado (base 4px) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; /* ---- Radios ---- */ --radius-sm: 6px; --radius-md: 10px; /* TODOS los botones */ --radius-lg: 16px; --radius-card: 16px; /* alias semántico = lg */ --radius-pill: 9999px; /* ---- Sombras (suaves, tinte navy; nunca negras duras) ---- */ --shadow-xs: 0 1px 2px rgba(2, 34, 61, .06); --shadow-sm: 0 2px 10px rgba(0, 0, 0, .03); --shadow-md: 0 10px 30px rgba(0, 0, 0, .08); /* Sombra de card con profundidad en capas (referencia Marketplace) — da relieve a las tarjetas sobre el navy sin recurrir a bordes duros. */ --shadow-card: 0 4px 16px rgba(0, 0, 0, .10), 0 1.5px 4px rgba(0, 0, 0, .08); --shadow-lg: 0 20px 40px -15px rgba(2, 34, 61, .25); --shadow-xl: 0 24px 50px -20px rgba(2, 54, 106, .10); --shadow-focus: 0 0 0 3px var(--field-ring-focus); /* ---- Movimiento ---- */ --transition: all .3s ease; --transition-fast: all .2s ease; --transition-slow: all .5s ease-out; --reveal-dur: .6s; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --hover-lift: -2px; /* ---- z-index ---- */ --z-sticky: 100; --z-fab: 800; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* ---- Layout ---- */ --container: 1200px; } /* ========================================================================== TEMA OSCURO (modo por defecto del proyecto) Se activa con data-theme="dark" en el de base_concreto.html. No hay light mode todavía. ========================================================================== */ [data-theme="dark"] { --c-ink: #EAF0F6; --c-ink-soft: #B9C4D0; --c-muted: #8A97A6; --c-line: rgba(255,255,255,.12); --c-line-strong: rgba(255,255,255,.22); --c-surface: #0B2138; --c-surface-2: #02223D; --c-surface-3: #0E2A47; } [data-theme="dark"] body { background: var(--c-navy-black); color: var(--c-ink); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--c-white); }