/* ============================================================ FLAMINCO — DESIGN TOKENS v1 Reskin de marca, Fase 1. Se aplica ENCIMA de Bootstrap. Orden de carga: bootstrap.css → template (structure/plugins) → design-tokens.css → flaminco-override.css ------------------------------------------------------------ Tema: híbrido por superficie. El tema se declara en o en el contenedor de la superficie: login, dashboard, tienda listados, formularios, POS El shell (sidebar + topbar) es oscuro en ambos temas, y se declara como SCOPE de tema, no como set de fondos:

Así los nav-link, dropdown-menu y badge de adentro heredan --fl-text, --fl-bg-raised y --fl-border del tema oscuro en lugar de resolverlos contra el tema de la página. Densidad: data-density="compact" para POS y tablas largas. ============================================================ */ /* ---------- 1. PALETA DE MARCA (manual, no editar) ---------- */ :root { --fl-brand-black: #0B0B0F; --fl-brand-fuchsia: #FF007A; --fl-brand-fuchsia-dk: #CC0062; --fl-brand-gray: #2A2E35; --fl-brand-white: #F5F7FA; /* Derivados del fucsia. Único hue permitido en la familia. */ --fl-fuchsia-100: #FFD6E9; --fl-fuchsia-300: #FF7AB8; /* texto de acento sobre gris/negro */ --fl-fuchsia-500: #FF007A; --fl-fuchsia-700: #CC0062; --fl-fuchsia-900: #8A0042; /* Rampa neutra. Deriva del gris estructura, no de grises puros. */ --fl-neutral-0: #FFFFFF; --fl-neutral-25: #F5F7FA; --fl-neutral-50: #EDF0F5; --fl-neutral-100: #E1E5EC; --fl-neutral-200: #C9CFDA; --fl-neutral-300: #A8B0BE; --fl-neutral-400: #8A919E; --fl-neutral-500: #6E7681; --fl-neutral-600: #5A6270; --fl-neutral-700: #3A3F48; --fl-neutral-800: #2A2E35; --fl-neutral-850: #1D2027; --fl-neutral-900: #14161B; --fl-neutral-950: #101217; --fl-neutral-999: #0B0B0F; } /* ---------- 2. SEMÁNTICOS ---------- Tres valores por semántico: --fl-{name} relleno / superficie sólida --fl-{name}-on color del texto QUE VA ENCIMA del relleno --fl-{name}-text el semántico usado COMO texto, por tema Regla de polaridad, única señal en todo el sistema: danger es el ÚNICO semántico con texto blanco encima. success, warning e info llevan texto negro encima. El acento de marca (fucsia) también lleva texto negro. ------------------------------------------------------------ */ :root { --fl-success: #00B27A; --fl-success-on: #0B0B0F; /* 7,16:1 */ --fl-warning: #F0B429; --fl-warning-on: #0B0B0F; /* 10,54:1 */ --fl-info: #2B7FFF; --fl-info-on: #0B0B0F; /* 5,22:1 */ --fl-danger: #CC3413; --fl-danger-on: #FFFFFF; /* 5,16:1 — el único blanco */ } /* ---------- 3. TEMA CLARO (default) ---------- Superficies operativas: listados, formularios, POS. */ :root:not([data-theme="dark"]), [data-theme="light"] { --fl-bg: var(--fl-neutral-25); --fl-bg-raised: var(--fl-neutral-0); --fl-bg-sunken: var(--fl-neutral-50); --fl-bg-hover: var(--fl-neutral-50); --fl-bg-selected: var(--fl-accent-subtle,#FFEAF3); /* fucsia al 8%, no un rosa nuevo */ --fl-bg-zebra: var(--fl-neutral-25); /* 1,07 contra #FFFFFF */ --fl-bg-zebra-alt: var(--fl-neutral-50); --fl-table-row-border: var(--fl-neutral-100); --fl-text: var(--fl-neutral-999); --fl-text-muted: var(--fl-neutral-600); --fl-text-subtle: var(--fl-neutral-500); --fl-text-inverse: var(--fl-neutral-25); --fl-text-on-accent: var(--fl-brand-black); --fl-border: var(--fl-neutral-100); --fl-border-strong: var(--fl-neutral-200); --fl-border-input: var(--fl-neutral-200); --fl-accent: var(--fl-fuchsia-500); --fl-accent-rgb: 255,0,122; /* Fase 2: primario como R,G,B para rgba() (lo pisa la CC) */ --fl-accent-hover: var(--fl-fuchsia-700); --fl-accent-active: var(--fl-fuchsia-900); --fl-accent-subtle: rgba(var(--fl-accent-rgb, 255,0,122), 0.10); /* Fucsia COMO TEXTO en claro: el 500 da 3,52:1 sobre #F5F7FA y no cumple. Los links y el texto de acento usan el 700. */ --fl-accent-text: var(--fl-fuchsia-700); /* 5,22:1 */ --fl-secondary: var(--fl-accent-text); /* Fase 2: acento secundario (links de contenido). Default = fucsia-700 (on-brand). */ /* Semánticos como texto sobre fondo claro. Los valores de relleno reprueban acá, así que cada uno tiene su versión oscurecida a mismo hue. */ --fl-success-text: #008259; /* 4,51:1 */ --fl-warning-text: #936A0A; /* 4,54:1 */ --fl-info-text: #0166FF; /* 4,50:1 */ --fl-danger-text: #CC3413; /* 4,81:1 */ /* Fondos tenues para alertas y badges suaves. */ --fl-success-subtle: #E3F7EF; --fl-warning-subtle: #FDF3DC; --fl-info-subtle: #E6F0FF; --fl-danger-subtle: #FBE9E4; --fl-shadow-1: 0 1px 2px rgba(11,11,15,.06); --fl-shadow-2: 0 2px 8px rgba(11,11,15,.08); --fl-shadow-3: 0 8px 24px rgba(11,11,15,.12); } /* ---------- 4. TEMA OSCURO ---------- Cara visible: login, dashboards, comprobante-hero, tienda. */ [data-theme="dark"] { --fl-bg: var(--fl-neutral-999); --fl-bg-raised: var(--fl-neutral-900); --fl-bg-sunken: #08080B; --fl-bg-hover: var(--fl-neutral-850); --fl-bg-selected: #2A0B1C; /* La zebra por diferencia de fondo no funciona en dark: #14161B contra #101217 da 1,04, el mismo 2-3% que hunde a los reskins dark-first. En dark la separación de filas la hace el BORDE (--fl-table-row-border) y la zebra queda apagada por defecto. Si el listado igual necesita bandeado, usar #20242C (1,36). */ --fl-bg-zebra: transparent; --fl-bg-zebra-alt: #20242C; --fl-table-row-border: var(--fl-neutral-800); --fl-text: var(--fl-neutral-25); --fl-text-muted: #B4BAC5; --fl-text-subtle: var(--fl-neutral-400); --fl-text-inverse: var(--fl-neutral-999); --fl-text-on-accent: var(--fl-brand-black); --fl-border: var(--fl-neutral-800); --fl-border-strong: var(--fl-neutral-700); --fl-border-input: var(--fl-neutral-700); --fl-accent: var(--fl-fuchsia-500); --fl-accent-hover: var(--fl-fuchsia-700); --fl-accent-active: var(--fl-fuchsia-900); --fl-accent-subtle: #2A0B1C; --fl-accent-text: var(--fl-fuchsia-500); /* 5,18:1 sobre negro */ /* Sobre cards grises (#2A2E35) el fucsia 500 da 3,59:1: usar el 300. */ --fl-accent-text-on-card: var(--fl-fuchsia-300); /* 5,66:1 */ --fl-success-text: #00D693; --fl-warning-text: #FFC53D; --fl-info-text: #5AA0FF; --fl-danger-text: #FF5B33; --fl-success-subtle: #05261B; --fl-warning-subtle: #2B2007; --fl-info-subtle: #0A1A33; --fl-danger-subtle: #2E0F06; --fl-shadow-1: 0 1px 2px rgba(0,0,0,.4); --fl-shadow-2: 0 2px 8px rgba(0,0,0,.5); --fl-shadow-3: 0 8px 24px rgba(0,0,0,.6); } /* ---------- 5. SHELL ---------- Sidebar y topbar son oscuros en los dos temas: la marca está presente incluso en las pantallas operativas claras. */ /* El shell NO tiene set de fondos propio: el sidebar y el topbar llevan data-theme="dark" en su elemento raíz y todo lo de adentro (nav-link, dropdown-menu, badge, avatar) hereda el tema oscuro. Lo único propio del shell son los tokens del item de navegación, que no existen en el resto del sistema. Se definen en :root porque no dependen del tema: el shell es oscuro siempre. */ :root { --fl-nav-item-h: 40px; --fl-nav-item-hover: var(--fl-neutral-850); --fl-nav-item-active-bg: #2A0B1C; --fl-nav-item-active-mark: var(--fl-fuchsia-500); --fl-nav-group-label: var(--fl-neutral-500); } /* ---------- 6. SERIES DE GRÁFICOS ---------- Para barras, líneas y donut del dashboard y de los tableros. Criterios: ningún hue en el rango magenta del fucsia; hues separados >=40°; orden estable (serie 1 siempre el mismo color). El fucsia NO es una serie: es el resaltado de la serie o sucursal enfocada, y se usa de a uno. Para comparativas entre sucursales usar el orden tal cual; para series con orden semántico propio (ej. método de pago) respetar el orden alfabético del backend para que no baile entre recargas. El color NO es el único canal: la serie 1 y la 2 difieren 1,02 en luminancia, así que impresas en blanco y negro o con daltonismo rojo-verde se funden. Cada serie lleva además patrón y grosor propios (--fl-chart-N-dash / --fl-chart-N-w para líneas, --fl-chart-N-pattern para áreas y donut), y en tabla siempre va el valor numérico al lado de la marca de color. */ :root { --fl-chart-1-dash: none; --fl-chart-1-w: 2.5px; --fl-chart-2-dash: 6px 3px; --fl-chart-2-w: 2px; --fl-chart-3-dash: 2px 3px; --fl-chart-3-w: 2px; --fl-chart-4-dash: 10px 3px 2px 3px; --fl-chart-4-w: 2px; --fl-chart-5-dash: 1px 4px; --fl-chart-5-w: 2.5px; --fl-chart-6-dash: 4px 4px; --fl-chart-6-w: 1.5px; --fl-chart-focus-w: 4px; } :root:not([data-theme="dark"]), [data-theme="light"] { --fl-chart-1: #1F6FEB; --fl-chart-2: #00875A; --fl-chart-3: #B37800; --fl-chart-4: #7C4DFF; --fl-chart-5: #0E9494; --fl-chart-6: #6E7681; --fl-chart-focus: var(--fl-fuchsia-700); --fl-chart-grid: var(--fl-neutral-100); --fl-chart-axis: var(--fl-neutral-500); --fl-chart-label: var(--fl-neutral-999); } [data-theme="dark"] { --fl-chart-1: #5AA0FF; /* azul */ --fl-chart-2: #00D693; /* esmeralda */ --fl-chart-3: #FFC53D; /* ámbar */ --fl-chart-4: #9E7BFF; /* violeta */ --fl-chart-5: #3FD8D8; /* teal */ --fl-chart-6: #8A919E; /* neutro, para "otros" y totales */ --fl-chart-focus: var(--fl-fuchsia-500); --fl-chart-grid: var(--fl-neutral-800); --fl-chart-axis: var(--fl-neutral-400); --fl-chart-label: var(--fl-neutral-25); } /* ---------- 7. TIPOGRAFÍA ---------- Space Grotesk: H1/H2, cifras, métricas, números de tabla. Inter: cuerpo, interfaz, microcopy, formularios. Tabular numbers en todo lo que sea plata o cantidad. */ :root { --fl-font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --fl-font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --fl-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; --fl-fw-regular: 400; --fl-fw-medium: 500; --fl-fw-semibold: 600; --fl-fw-bold: 700; /* Escala. Base 14px: es una app densa, no una landing. */ --fl-fs-3xs: 10px; --fl-lh-3xs: 1.4; /* labels de tabla, uppercase */ --fl-fs-2xs: 11px; --fl-lh-2xs: 1.45; --fl-fs-xs: 12px; --fl-lh-xs: 1.5; /* microcopy, badges */ --fl-fs-sm: 13px; --fl-lh-sm: 1.55; /* celda de tabla compacta */ --fl-fs-base: 14px; --fl-lh-base: 1.6; /* cuerpo, inputs, celdas */ --fl-fs-md: 16px; --fl-lh-md: 1.6; /* precio en POS, subtítulos */ --fl-fs-lg: 18px; --fl-lh-lg: 1.45; --fl-fs-xl: 22px; --fl-lh-xl: 1.3; /* título de card */ --fl-fs-2xl: 26px; --fl-lh-2xl: 1.25; /* H2 */ --fl-fs-3xl: 32px; --fl-lh-3xl: 1.15; /* H1 de pantalla */ --fl-fs-4xl: 40px; --fl-lh-4xl: 1.08; /* métrica de dashboard */ --fl-fs-5xl: 56px; --fl-lh-5xl: 1.02; /* total del POS, hero */ --fl-ls-tight: -0.02em; /* display grande */ --fl-ls-normal: 0; --fl-ls-label: 0.08em; /* labels uppercase */ --fl-num: "tnum" 1, "lnum" 1; /* font-feature-settings para cifras */ } /* ---------- 8. ESPACIADO Y GEOMETRÍA ---------- Escala de 4. Densidad cómoda por defecto; compacta para POS y tablas largas, cambiando solo los tokens de control. */ :root { --fl-sp-1: 4px; --fl-sp-2: 8px; --fl-sp-3: 12px; --fl-sp-4: 16px; --fl-sp-5: 20px; --fl-sp-6: 24px; --fl-sp-8: 32px; --fl-sp-10: 40px; --fl-sp-12: 48px; --fl-sp-16: 64px; /* Radios chicos: la marca es angular, el manual no redondea. */ --fl-radius-0: 0; --fl-radius-sm: 2px; --fl-radius: 4px; --fl-radius-lg: 6px; --fl-radius-pill: 999px; /* solo badges y chips de filtro */ --fl-border-w: 1px; --fl-border-w-strong: 2px; --fl-accent-bar: 3px; /* barra de acento de card / item activo */ /* Densidad cómoda (admin general) */ --fl-control-h: 38px; --fl-control-px: var(--fl-sp-3); --fl-control-fs: var(--fl-fs-base); --fl-row-py: var(--fl-sp-3); --fl-card-p: var(--fl-sp-5); --fl-tap-min: 38px; } [data-density="compact"] { --fl-control-h: 32px; --fl-control-px: var(--fl-sp-2); --fl-control-fs: var(--fl-fs-sm); --fl-row-py: var(--fl-sp-2); --fl-card-p: var(--fl-sp-4); } /* POS táctil: compacto en información, generoso en área de toque. Nunca por debajo de 44px en nada que se toque con el dedo. */ [data-density="touch"] { --fl-control-h: 48px; --fl-control-px: var(--fl-sp-4); --fl-control-fs: var(--fl-fs-md); --fl-row-py: var(--fl-sp-3); --fl-card-p: var(--fl-sp-4); --fl-tap-min: 44px; } /* ---------- 9. ESTADOS ---------- */ :root { --fl-focus-ring: 0 0 0 2px var(--fl-fuchsia-500); --fl-focus-offset: 2px; --fl-disabled-opacity: .45; --fl-transition: 120ms cubic-bezier(.2,0,.2,1); --fl-transition-slow: 200ms cubic-bezier(.2,0,.2,1); } /* ---------- 10. PUENTE A BOOTSTRAP ---------- Lo que se resuelve con variables. Todo lo demás (sidebar y topbar de CorK, nav-tabs, paginación, SweetAlert, plugins de gráficos) tiene sus hex dentro de structure.css / plugins.css compilados y va en flaminco-override.css por especificidad. */ :root { --bs-primary: var(--fl-accent); --bs-primary-rgb: 255, 0, 122; --bs-danger: var(--fl-danger); --bs-success: var(--fl-success); --bs-warning: var(--fl-warning); --bs-info: var(--fl-info); --bs-body-bg: var(--fl-bg); --bs-body-color: var(--fl-text); --bs-body-font-family: var(--fl-font-body); --bs-body-font-size: var(--fl-fs-base); --bs-body-line-height: var(--fl-lh-base); --bs-border-color: var(--fl-border); --bs-border-radius: var(--fl-radius); --bs-border-radius-sm: var(--fl-radius-sm); --bs-border-radius-lg: var(--fl-radius-lg); --bs-secondary-color: var(--fl-text-muted); --bs-tertiary-bg: var(--fl-bg-sunken); --bs-emphasis-color: var(--fl-text); --bs-link-color: var(--fl-accent-text); --bs-link-hover-color: var(--fl-accent-hover); /* Bootstrap pone texto blanco en .btn-primary. Reprueba (3,80:1). */ --bs-btn-color: var(--fl-text-on-accent); }