/* ============================================================ Synapse — Tokens de diseño ------------------------------------------------------------ ÚNICO archivo con valores de diseño (colores, tipografía, espacios, radios, sombras, capas). Todo lo demás usa var(--token). Un cambio aquí se propaga a la app, al login y al informe público. Reglas: · Ningún componente usa colores o medidas sueltas. · Los tintes (fondos suaves, bordes de color) se derivan con color-mix() del color base: si cambias --accent o --danger, sus variantes cambian solas. · Los colores que vienen de datos (color del cliente, del avatar) se pasan desde PHP como variable: style="--tone: #hex". Breakpoints (las variables CSS no funcionan dentro de @media, así que se usan estos valores fijos en todos los archivos): sm 600px móvil md 900px tablet / sidebar colapsable lg 1200px escritorio chico ============================================================ */ :root { color-scheme: dark; /* ── Marca ──────────────────────────────────────────────── */ --accent: #E5D3B3; /* crema dorado: textos de marca, cifras */ --accent-strong: #C9A866; /* dorado profundo */ --on-accent: #151515; /* texto sobre fondos dorados */ --gold-gradient: linear-gradient(180deg, #ECDBAE 0%, #DCC38F 50%, #C7A767 100%); /* ── Estados ────────────────────────────────────────────── */ --danger: #E5534B; --warning: #F0A92E; --success: #3FB950; --info: #1FA3E0; /* ── Superficies (de más oscura a más clara) ────────────── */ --bg-base: #080808; /* fondo de página */ --surface-1: #111111; /* botones de icono, columna de actividad */ --surface-2: #1A1A1A; /* paneles laterales */ --surface-3: #222222; /* menús desplegables, popovers, toasts */ --surface-4: #2E2E2E; /* mosaicos de cifras, fondos de conteo */ --surface-5: #3F3F3F; /* círculos de icono, pistas de progreso */ --surface-6: #555555; /* controles tipo píldora, tarjetas internas */ /* Gradientes de superficie */ --card-gradient: linear-gradient(160deg, #2B2B2B 0%, #1C1C1C 55%, #212121 100%); --panel-gradient: linear-gradient(180deg, #242424 0%, #161616 100%); --raised-gradient: linear-gradient(160deg, #5E5E5E 0%, #4A4A4A 100%); --row-gradient: linear-gradient(90deg, #3A3A3A 0%, #2A2A2A 45%, #1D1D1D 100%); --disc-gradient: radial-gradient(circle at 35% 30%, #4E4E4E 0%, var(--surface-5) 70%); /* círculos de icono del menú */ --progress-gradient: linear-gradient(90deg, #EDEDED 0%, var(--info) 55%, var(--success) 100%); /* Capas translúcidas (se apoyan sobre cualquier superficie) */ --bg-glass: rgba(255, 255, 255, 0.03); --bg-hover: rgba(255, 255, 255, 0.05); --bg-input: var(--surface-6); --bg-glass-hover: rgba(255, 255, 255, 0.07); --bg-sunken: rgba(0, 0, 0, 0.25); --gloss: rgba(255, 255, 255, 0.55); /* brillo superior de los botones dorados */ --shade: rgba(0, 0, 0, 0.2); /* sombra interna, fondo de conteos */ --bg-overlay: rgba(0, 0, 0, 0.8); /* ── Bordes ─────────────────────────────────────────────── */ --border: rgba(255, 255, 255, 0.06); --border-light: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.2); --border-focus: color-mix(in srgb, var(--accent) 55%, transparent); --divider: #1F1F1F; /* ── Texto ──────────────────────────────────────────────── */ --text-primary: #FFFFFF; --text-secondary: #A3A3A3; --text-muted: #6E6E6E; --text-faint: #3F3F3F; --text-placeholder: #9C9C9C; /* sobre controles --surface-6 */ /* ── Intensidad de los tintes de color ──────────────────── */ --tint-faint: 6%; /* resaltado apenas visible */ --tint-subtle: 12%; /* fondos de alertas, ítem activo */ --tint-soft: 22%; /* chips y badges */ --tint-line: 40%; /* bordes de color */ /* ── Dominio: prioridad de tareas ───────────────────────── */ --prioridad-alta: var(--danger); --prioridad-media: var(--warning); --prioridad-baja: var(--success); /* ── Dominio: estado de tareas ──────────────────────────── */ --estado-todo: #8C8574; /* gris cálido */ --estado-in-progress: var(--accent); --estado-in-review: var(--info); --estado-done: var(--success); /* ── Dominio: pago de informes ──────────────────────────── */ --pago-en-curso: var(--success); --pago-pendiente: var(--danger); --pago-pagado: var(--text-secondary); /* ── Dominio: presencia del equipo ──────────────────────── */ --presencia-verde: var(--success); --presencia-rojo: var(--danger); --presencia-gris: var(--text-muted); /* ── Dominio: calendario ────────────────────────────────── */ --evento: var(--info); /* ── Gráficas (Chart.js lee estos valores) ──────────────── */ --chart-grid: rgba(255, 255, 255, 0.05); /* Escala crema para gráficas de un solo tono */ --chart-crema-1: #E5D3B3; --chart-crema-2: #BFAE8C; --chart-crema-3: #8F826A; --chart-crema-4: #5E5646; --chart-crema-5: #3E392F; --chart-crema-6: #2A2620; /* ── Tipografía ─────────────────────────────────────────── */ --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace; /* Escala (html = 15px) */ --fs-3xs: 0.6rem; /* 9px contadores diminutos */ --fs-2xs: 0.68rem; /* 10px etiquetas, chips */ --fs-xs: 0.72rem; /* 11px metadatos */ --fs-sm: 0.8rem; /* 12px texto secundario */ --fs-md: 0.87rem; /* 13px texto de interfaz */ --fs-lg: 0.95rem; /* 14px títulos de tarjeta */ --fs-xl: 1.05rem; /* 16px */ --fs-2xl: 1.25rem; /* 19px títulos de sección */ --fs-3xl: 1.6rem; /* 24px títulos de formulario */ --fs-4xl: 2rem; /* 30px cifras de estadísticas */ --fs-5xl: 2.4rem; /* 36px títulos de página */ --fs-6xl: 3rem; /* 45px decorativo */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-none: 1; --lh-tight: 1.3; --lh-base: 1.5; --lh-relaxed: 1.7; --tracking-tight: -0.01em; --tracking-normal: 0.01em; --tracking-wide: 0.03em; --tracking-caps: 0.06em; /* texto en mayúsculas */ /* ── Espaciado (base 4px) ───────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ── Iconos ─────────────────────────────────────────────── */ --icon-xs: 11px; --icon-sm: 14px; --icon-md: 16px; --icon-lg: 18px; --icon-xl: 20px; --icon-2xl: 40px; /* ── Radios ─────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; /* botones de icono, mosaicos */ --radius-lg: 18px; /* tarjetas */ --radius-xl: 22px; /* paneles, sidebar, columnas */ --radius-2xl: 28px; --radius-pill: 999px; --radius-round: 50%; /* ── Sombras y brillos ──────────────────────────────────── */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-xl: 0 18px 48px rgba(0, 0, 0, 0.7); --shadow-2xl: 0 40px 100px rgba(0, 0, 0, 0.85); --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-raised: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); --shadow-glow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); --drop-shadow: 0 4px 24px rgba(0, 0, 0, 0.7); /* para filter: drop-shadow() */ --shadow-drawer-start: 8px 0 40px rgba(0, 0, 0, 0.7); /* ── Movimiento ─────────────────────────────────────────── */ --duration-fast: 0.15s; --duration-base: 0.25s; --duration-slow: 0.4s; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --transition: var(--duration-fast) ease; /* ── Layout ─────────────────────────────────────────────── */ --sidebar-w: 250px; --app-gap: var(--space-5); /* margen del marco y separación sidebar/contenido */ --panel-w: 280px; /* columnas laterales (próximas entregas, agenda) */ --container-lg: 1100px; /* ── Capas (z-index) ────────────────────────────────────── */ --z-sidebar: 100; --z-dropdown: 200; --z-overlay: 300; --z-popover: 350; --z-toast: 400; }