dmolinari/SIG-CM2.0
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9c05167788420ed62ec71a0317146cd170da7c1a
SIG-CM2.0/src/web/src/index.css
dmolinari 9c05167788 chore(web): agregar tokens warning-bg y warning-border al Design System 
Tokens usados en banner de advertencia fiscal (ADM-009). Incluye variante
light (amber claro) y dark (amber oscuro), mapeados en @theme inline de Tailwind.
2026-04-17 18:55:16 -03:00

343 lines
14 KiB
CSS
Raw Blame History

@import "tailwindcss";
@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@fontsource/jetbrains-mono/400.css";
/* ================================================================
SIG-CM 2.0 Design System v2.0 — Tokens
Source of truth: Obsidian/02-ARQUITECTURA-y-TECH-STACK/2.14 🎨 Design System.md
Brand: #008fbe (logo) + violet accent → tech sophistication
Style: dark-first elegante, glassmorphism, multi-layer shadows
================================================================ */
@layer base {
:root {
/* ── Brand cyan (logo #008fbe) ──────────────────────────── */
--brand-50: oklch(0.972 0.013 220);
--brand-100: oklch(0.935 0.035 220);
--brand-200: oklch(0.870 0.072 220);
--brand-300: oklch(0.780 0.108 220);
--brand-400: oklch(0.700 0.135 220);
--brand-500: oklch(0.625 0.130 220); /* logo #008fbe */
--brand-600: oklch(0.530 0.135 222);
--brand-700: oklch(0.440 0.115 224);
--brand-800: oklch(0.350 0.085 226);
--brand-900: oklch(0.270 0.060 228);
--brand-950: oklch(0.190 0.040 230);
/* ── Violet accent (combo tech con brand cyan) ──────────── */
--accent-violet-400: oklch(0.700 0.180 280);
--accent-violet-500: oklch(0.620 0.200 280);
--accent-violet-600: oklch(0.530 0.205 280);
/* ── Neutral (slate con shift sutil hacia azul/violeta) ── */
--neutral-50: oklch(0.985 0.004 250);
--neutral-100: oklch(0.962 0.007 250);
--neutral-200: oklch(0.910 0.012 250);
--neutral-300: oklch(0.835 0.018 250);
--neutral-400: oklch(0.680 0.022 250);
--neutral-500: oklch(0.540 0.025 250);
--neutral-600: oklch(0.435 0.025 250);
--neutral-700: oklch(0.345 0.022 250);
--neutral-800: oklch(0.250 0.020 250);
--neutral-900: oklch(0.185 0.015 250);
--neutral-950: oklch(0.130 0.013 250);
/* ── Semantic ──────────────────────────────────────────── */
--success: oklch(0.640 0.155 145);
--success-foreground: oklch(0.990 0.000 0);
--warning: oklch(0.760 0.150 75);
--warning-foreground: oklch(0.220 0.050 75);
--warning-bg: oklch(0.970 0.040 80); /* banner bg — usado en fiscal ADM-009 */
--warning-border: oklch(0.870 0.090 78); /* border del banner warning */
/* ── shadcn semantic mapping (LIGHT) ─────────────────── */
--background: oklch(0.962 0.006 250); /* slate cool — pop con cards white */
--foreground: var(--neutral-900);
--card: oklch(1 0 0); /* pure white — máximo contraste */
--card-foreground: var(--neutral-900);
--popover: oklch(1 0 0);
--popover-foreground: var(--neutral-900);
--primary: var(--brand-600); /* WCAG AA on white */
--primary-foreground: oklch(0.990 0.000 0);
--secondary: var(--neutral-100);
--secondary-foreground: var(--neutral-800);
--muted: var(--neutral-100);
--muted-foreground: var(--neutral-500);
--accent: var(--brand-50);
--accent-foreground: var(--brand-700);
--destructive: oklch(0.600 0.220 25);
--destructive-foreground: oklch(0.990 0.000 0);
--border: var(--neutral-200);
--input: oklch(1 0 0); /* WHITE inputs en light, no gris */
--input-border: var(--neutral-300); /* border más prominente */
--ring: var(--brand-500);
/* ── Glass surfaces (backdrop-blur) ───────────────────── */
--glass-bg: oklch(1 0 0 / 0.7);
--glass-border: oklch(1 0 0 / 0.4);
/* ── Gradient backgrounds (hero, login) ───────────────── */
--gradient-mesh:
radial-gradient(at 100% 0%, oklch(0.625 0.130 220 / 0.12) 0px, transparent 50%),
radial-gradient(at 0% 100%, oklch(0.620 0.200 280 / 0.10) 0px, transparent 50%),
radial-gradient(at 50% 50%, oklch(0.700 0.135 220 / 0.05) 0px, transparent 60%);
/* ── Shadows (multi-layer para depth real) ────────────── */
--shadow-sm: 0 1px 2px 0 oklch(0.185 0.015 250 / 0.05);
--shadow: 0 1px 3px 0 oklch(0.185 0.015 250 / 0.08), 0 1px 2px -1px oklch(0.185 0.015 250 / 0.06);
--shadow-md: 0 4px 8px -2px oklch(0.185 0.015 250 / 0.08), 0 2px 4px -2px oklch(0.185 0.015 250 / 0.04);
--shadow-lg: 0 12px 24px -6px oklch(0.185 0.015 250 / 0.12), 0 4px 8px -3px oklch(0.185 0.015 250 / 0.06);
--shadow-xl: 0 24px 48px -12px oklch(0.185 0.015 250 / 0.18), 0 8px 16px -8px oklch(0.185 0.015 250 / 0.08);
--shadow-glow: 0 0 0 1px oklch(0.625 0.130 220 / 0.10), 0 0 24px -4px oklch(0.625 0.130 220 / 0.20);
/* ── Spacing & shape ───────────────────────────────────── */
--radius: 0.625rem; /* 10px */
/* ── Typography ────────────────────────────────────────── */
--font-sans: "Inter", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}
.dark {
/* Background con shift sutil hacia violet → "tech" feel */
--background: oklch(0.130 0.018 252); /* deep slate-violet — más oscuro para contraste */
--foreground: var(--neutral-50);
--card: oklch(0.220 0.024 252); /* elevación visual marcada — pop sobre bg */
--card-foreground: var(--neutral-50);
--popover: oklch(0.245 0.024 252); /* dropdowns/popovers más elevados aún */
--popover-foreground: var(--neutral-50);
--primary: var(--brand-400); /* brighter en dark, "neon" feel */
--primary-foreground: oklch(0.130 0.013 250);
--secondary: oklch(0.255 0.022 252);
--secondary-foreground: var(--neutral-100);
--muted: oklch(0.245 0.022 252);
--muted-foreground: var(--neutral-400);
--accent: oklch(0.275 0.032 252);
--accent-foreground: var(--brand-300);
--destructive: oklch(0.580 0.190 25);
--destructive-foreground: oklch(0.990 0.000 0);
--warning-bg: oklch(0.220 0.055 72); /* banner bg dark mode — warm amber sutil */
--warning-border: oklch(0.380 0.090 74);
--border: oklch(1 0 0 / 0.10); /* sutil glass-style border */
--input: oklch(0.245 0.022 252); /* elevado, mismo nivel que muted */
--input-border: oklch(1 0 0 / 0.14);
--ring: var(--brand-400);
/* Glass para dark */
--glass-bg: oklch(0.180 0.020 252 / 0.6);
--glass-border: oklch(1 0 0 / 0.10);
/* Gradient mesh dark mode — más vibrante */
--gradient-mesh:
radial-gradient(at 100% 0%, oklch(0.625 0.130 220 / 0.20) 0px, transparent 50%),
radial-gradient(at 0% 100%, oklch(0.620 0.200 280 / 0.18) 0px, transparent 50%),
radial-gradient(at 50% 50%, oklch(0.700 0.135 220 / 0.08) 0px, transparent 60%);
/* Shadows más intensas en dark */
--shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.30);
--shadow: 0 2px 4px 0 oklch(0 0 0 / 0.40), 0 1px 2px -1px oklch(0 0 0 / 0.30);
--shadow-md: 0 4px 8px -2px oklch(0 0 0 / 0.40), 0 2px 4px -2px oklch(0 0 0 / 0.30);
--shadow-lg: 0 12px 24px -6px oklch(0 0 0 / 0.50), 0 4px 8px -3px oklch(0 0 0 / 0.30);
--shadow-xl: 0 24px 48px -12px oklch(0 0 0 / 0.60), 0 8px 16px -8px oklch(0 0 0 / 0.30);
--shadow-glow: 0 0 0 1px oklch(0.700 0.135 220 / 0.30), 0 0 32px -4px oklch(0.700 0.135 220 / 0.40);
}
}
@layer base {
* {
border-color: var(--border);
}
html {
color-scheme: light dark;
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#root {
min-height: 100svh;
}
::selection {
background-color: var(--brand-200);
color: var(--brand-900);
}
.dark ::selection {
background-color: var(--brand-700);
color: var(--brand-50);
}
*:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: -0.015em;
}
code, pre, kbd, samp {
font-family: var(--font-mono);
}
/* ── Browser autofill (Chrome/Safari): forzar tokens del DS ──
Sin esto, autofill aplica bg amarillo + texto blanco que se ve horrible
y rompe contraste con cualquier paleta. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: var(--foreground) !important;
-webkit-box-shadow: 0 0 0 1000px var(--input) inset !important;
caret-color: var(--foreground) !important;
transition: background-color 5000s ease-in-out 0s;
}
}
/* ================================================================
Glass surface utility
Uso: <div className="glass">…</div>
================================================================ */
@layer components {
.glass {
background-color: var(--glass-bg);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--glass-border);
}
.gradient-mesh {
background-image: var(--gradient-mesh);
}
/* Grid texture overlay — usar como fondo decorativo en surfaces grandes
Light: 2.5% opacity (sutil pero visible). Dark: 5% (más presente) */
.grid-bg {
background-image:
linear-gradient(to right, currentColor 1px, transparent 1px),
linear-gradient(to bottom, currentColor 1px, transparent 1px);
background-size: 56px 56px;
color: var(--neutral-500);
opacity: 0.07;
}
.dark .grid-bg {
color: var(--neutral-400);
opacity: 0.10;
}
/* Surface utility — para contenedores que no usan <Card> (ej: tablas, listas)
Mismo treatment visual: bg elevado + border + shadow */
.surface {
background-color: var(--card);
color: var(--card-foreground);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
}
/* Brand glow para focus en inputs críticos */
.focus-glow:focus-visible {
box-shadow: var(--shadow-glow);
outline: none;
}
}
/* ================================================================
Tailwind 4 inline theme — utilidades disponibles globalmente
================================================================ */
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-input-border: var(--input-border);
--color-ring: var(--ring);
/* Brand */
--color-brand-50: var(--brand-50);
--color-brand-100: var(--brand-100);
--color-brand-200: var(--brand-200);
--color-brand-300: var(--brand-300);
--color-brand-400: var(--brand-400);
--color-brand-500: var(--brand-500);
--color-brand-600: var(--brand-600);
--color-brand-700: var(--brand-700);
--color-brand-800: var(--brand-800);
--color-brand-900: var(--brand-900);
--color-brand-950: var(--brand-950);
/* Violet accent */
--color-violet-400: var(--accent-violet-400);
--color-violet-500: var(--accent-violet-500);
--color-violet-600: var(--accent-violet-600);
/* Semantic */
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-warning-bg: var(--warning-bg);
--color-warning-border: var(--warning-border);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-glow: var(--shadow-glow);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
}
Reference in New Issue View Git Blame Copy Permalink