/* ============================================================= ClickPalm Design System — Color Tokens & Typography Version: 1.0 | Namespace: --color-widget-* / --color-cp-* Dark mode: add class="dark" to ============================================================= */ /* ── Fuentes del sistema (se deduplicarán si ya están cargadas) */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&family=Readex+Pro:wght@300;400;500;600;700&display=swap'); /* ============================================================= MODO CLARO — :root ============================================================= */ :root { /* ── 1. Verde corporativo (widget) ── */ --color-widget-primary: #004629; --color-widget-primary-light: #015D37; --color-widget-primary-lighter:#10B981; --color-widget-primary-bg: #f0fdf4; --color-widget-primary-border: #94D6B1; /* ── 2. Fondos de superficie ── */ --color-widget-bg: #FFFFFF; --color-widget-bg-alt: #f9fafb; --color-widget-bg-hover: #f3f4f6; /* ── 3. Bordes ── */ --color-widget-border: #e5e7eb; --color-widget-border-strong: #d1d5db; /* ── 4. Texto ── */ --color-widget-text: #004629; --color-widget-text-muted: #57636C; /* ── 5. Glass / Decoración ── */ --color-cp-glass-bg: rgba(255, 255, 255, 0.72); --color-cp-glass-border: rgba(0, 80, 40, 0.11); --color-cp-glass-shimmer: rgba(0, 100, 60, 0.08); /* ── 6. Acentos de marca ── */ --color-cp-lime: #059669; --color-cp-sage: #047857; --color-cp-mint: #004629; /* ── 7. Página forestal ── */ --color-cp-forest-root: #f4fdf7; --color-cp-forest-surface: #edf9f1; --color-cp-forest-card: #ffffff; /* ── 8. Líneas decorativas ── */ --color-cp-grid-line: rgba(0, 80, 40, 0.025); --color-cp-topo-line: rgba(0, 80, 40, 0.04); /* ── 9. Gradientes de página ── */ --color-cp-page-grad-1: rgba(187, 247, 208, 0.35); --color-cp-page-grad-2: rgba(167, 243, 208, 0.20); /* ── 10. Estados / Semáforos ── */ --color-widget-success-active: #059669; --color-widget-warning: #d97706; --color-widget-warning-soft: rgba(217, 119, 6, 0.12); --color-widget-danger: #dc2626; --color-widget-active: #10B981; --color-widget-inactive: #6b7280; --color-widget-secondary: #64748b; /* ── 11. Header gradiente de tabla ── */ --color-widget-header-from: #015D37; --color-widget-header-to: #004629; /* ── 12. Tipografía ── */ --font-cp-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-cp-heading: 'Outfit', 'Inter', system-ui, sans-serif; --font-cp-body: 'Inter', system-ui, sans-serif; --font-cp-data: 'Readex Pro', 'Inter', system-ui, sans-serif; /* ── 13. Panel (glassmorphism — dropdown / paneles flotantes) ── */ --color-panel-bg: rgba(255, 255, 255, 0.98); --color-panel-border: rgba(0, 80, 40, 0.12); --color-panel-header-bg: rgba(0, 70, 41, 0.05); --color-panel-header-border: rgba(0, 80, 40, 0.09); --color-panel-shadow: 0 16px 48px rgba(0, 80, 40, 0.10), 0 0 0 1px rgba(0, 80, 40, 0.04); /* ── 14. Items dentro de panel (lista de zonas, etc.) ── */ --color-panel-item-bg: rgba(0, 70, 41, 0.03); --color-panel-item-border: rgba(0, 80, 40, 0.07); --color-panel-item-hover-bg: rgba(16, 185, 129, 0.06); --color-panel-item-hover-border: rgba(16, 185, 129, 0.18); --color-panel-item-active-bg: rgba(16, 185, 129, 0.09); --color-panel-item-active-accent:#10B981; /* ── 15. Iconos de acento ── */ --color-panel-accent-icon: #059669; /* ── 16. Stats cards ── */ --color-panel-stats-bg: rgba(0, 70, 41, 0.04); --color-panel-stats-border: rgba(16, 185, 129, 0.10); --color-panel-stats-value: #004629; /* ── 17. Botón minimizar panel ── */ --color-panel-minimize-bg: rgba(0, 70, 41, 0.06); --color-panel-minimize-border: rgba(0, 80, 40, 0.10); --color-panel-minimize-color: rgba(0, 46, 29, 0.55); /* ── 18. Controles (zoom / visualization bars) ── */ --color-ctrl-wrap-bg: rgba(255, 255, 255, 0.82); --color-ctrl-wrap-border: rgba(0, 80, 40, 0.12); --color-ctrl-bg: rgba(0, 70, 41, 0.04); --color-ctrl-border: rgba(0, 80, 40, 0.12); --color-ctrl-color: #1a1a1a; --color-ctrl-hover-bg: rgba(16, 185, 129, 0.09); --color-ctrl-hover-border: rgba(16, 185, 129, 0.32); --color-ctrl-hover-color: #047857; --color-ctrl-active-bg: rgba(16, 185, 129, 0.16); --color-ctrl-active-border: rgba(16, 185, 129, 0.48); --color-ctrl-active-color: #047857; /* ── 19. Controles de fecha ── */ --color-date-btn-bg: #ffffff; --color-date-btn-text: #1a1a1a; --color-date-btn-icon-bg: rgba(16, 185, 129, 0.10); /* ── 20. Popups de mapa ── */ --color-popup-header-from: #10B981; --color-popup-header-to: #059669; --color-popup-body-bg: #ffffff; --color-popup-stat-bg: #f8f9fa; --color-popup-stat-hover: #e9ecef; --color-popup-stat-text: #333333; --color-popup-stat-label: #666666; --color-popup-divider: rgba(224, 224, 224, 0.7); /* ── 21. Overlay de advertencia (zoom-warning, etc.) ── */ --color-overlay-bg: #ffffff; --color-overlay-text: #333333; --color-overlay-muted: #666666; --color-overlay-close-hover: #f5f5f5; } /* ============================================================= MODO OSCURO — .dark en ============================================================= */ .dark { /* ── 1. Verde corporativo ── */ --color-widget-primary: #aad0b3; --color-widget-primary-light: #1e3f2a; --color-widget-primary-lighter:#9dd761; --color-widget-primary-bg: rgba(30, 63, 42, 0.6); --color-widget-primary-border: rgba(76, 175, 80, 0.3); /* ── 2. Fondos de superficie ── */ --color-widget-bg: #0A1C12; --color-widget-bg-alt: #0f2318; --color-widget-bg-hover: #1a3b28; /* ── 3. Bordes ── */ --color-widget-border: rgba(76, 175, 80, 0.22); --color-widget-border-strong: rgba(76, 175, 80, 0.38); /* ── 4. Texto ── */ --color-widget-text: #e2e3df; --color-widget-text-muted: #c2c8c0; /* ── 5. Glass ── */ --color-cp-glass-bg: rgba(30, 63, 42, 0.6); --color-cp-glass-border: rgba(76, 175, 80, 0.3); --color-cp-glass-shimmer: rgba(157, 215, 97, 0.2); /* ── 6. Acentos de marca ── */ --color-cp-lime: #9dd761; --color-cp-sage: #88d899; --color-cp-mint: #aad0b3; /* ── 7. Página forestal ── */ --color-cp-forest-root: #0A1C12; --color-cp-forest-surface: #121412; --color-cp-forest-card: #1e3f2a; /* ── 8. Líneas decorativas ── */ --color-cp-grid-line: rgba(76, 175, 80, 0.05); --color-cp-topo-line: rgba(76, 175, 80, 0.08); /* ── 9. Gradientes de página ── */ --color-cp-page-grad-1: rgba(30, 63, 42, 0.4); --color-cp-page-grad-2: rgba(14, 32, 22, 0.3); /* ── 10. Estados ── */ --color-widget-success-active: #9dd761; --color-widget-warning: #fbbf24; --color-widget-warning-soft: rgba(251, 191, 36, 0.15); --color-widget-danger: #f87171; --color-widget-active: #9dd761; --color-widget-inactive: #9ca3af; --color-widget-secondary: #94a3b8; /* ── 11. Header gradiente ── */ --color-widget-header-from: #1e3f2a; --color-widget-header-to: #0A1C12; /* ── 13. Panel ── */ --color-panel-bg: rgba(8, 16, 12, 0.97); --color-panel-border: rgba(74, 222, 128, 0.15); --color-panel-header-bg: rgba(0, 0, 0, 0.25); --color-panel-header-border: rgba(74, 222, 128, 0.12); --color-panel-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03); /* ── 14. Items ── */ --color-panel-item-bg: rgba(255, 255, 255, 0.04); --color-panel-item-border: rgba(255, 255, 255, 0.06); --color-panel-item-hover-bg: rgba(74, 222, 128, 0.07); --color-panel-item-hover-border: rgba(74, 222, 128, 0.20); --color-panel-item-active-bg: rgba(74, 222, 128, 0.10); --color-panel-item-active-accent:#4ade80; /* ── 15. Iconos ── */ --color-panel-accent-icon: #4ade80; /* ── 16. Stats ── */ --color-panel-stats-bg: rgba(255, 255, 255, 0.05); --color-panel-stats-border: rgba(74, 222, 128, 0.10); --color-panel-stats-value: #4ade80; /* ── 17. Minimize ── */ --color-panel-minimize-bg: rgba(255, 255, 255, 0.06); --color-panel-minimize-border: rgba(255, 255, 255, 0.10); --color-panel-minimize-color: rgba(255, 255, 255, 0.60); /* ── 18. Controles ── */ --color-ctrl-wrap-bg: rgba(9, 21, 12, 0.85); --color-ctrl-wrap-border: rgba(255, 255, 255, 0.07); --color-ctrl-bg: rgba(255, 255, 255, 0.04); --color-ctrl-border: rgba(255, 255, 255, 0.08); --color-ctrl-color: rgba(255, 255, 255, 0.45); --color-ctrl-hover-bg: rgba(22, 163, 74, 0.10); --color-ctrl-hover-border: rgba(22, 163, 74, 0.35); --color-ctrl-hover-color: #86efac; --color-ctrl-active-bg: rgba(22, 163, 74, 0.18); --color-ctrl-active-border: rgba(22, 163, 74, 0.50); --color-ctrl-active-color: #86efac; /* ── 19. Fecha ── */ --color-date-btn-bg: rgba(8, 16, 12, 0.92); --color-date-btn-text: rgba(255, 255, 255, 0.88); --color-date-btn-icon-bg: rgba(74, 222, 128, 0.10); /* ── 20. Popups ── */ --color-popup-header-from: #1e3f2a; --color-popup-header-to: #0A1C12; --color-popup-body-bg: #0f2318; --color-popup-stat-bg: rgba(255, 255, 255, 0.05); --color-popup-stat-hover: rgba(255, 255, 255, 0.08); --color-popup-stat-text: rgba(255, 255, 255, 0.88); --color-popup-stat-label: rgba(255, 255, 255, 0.50); --color-popup-divider: rgba(74, 222, 128, 0.12); /* ── 21. Overlay ── */ --color-overlay-bg: #0f2318; --color-overlay-text: rgba(255, 255, 255, 0.88); --color-overlay-muted: rgba(255, 255, 255, 0.55); --color-overlay-close-hover: rgba(255, 255, 255, 0.06); }