/* ============================================================ ADA - Centralized Theme Variables Todos los componentes (.razor.css) referencian estas variables. Para cambiar el tema, solo modifica los valores aquí. ============================================================ */ :root { /* Brand */ --ada-primary: rgba(249, 0, 128, 0.85); --ada-primary-solid: #f90080; --ada-primary-hover: rgba(249, 0, 128, 0.15); --ada-primary-shadow: rgba(249, 0, 128, 0.2); /* Surfaces */ --ada-surface: #ffffff; --ada-surface-alt: #f8f9fa; --ada-surface-hover: #f0f0f0; --ada-background: #ffffff; /* Borders */ --ada-border: #e9ecef; --ada-border-strong: #dee2e6; /* Text */ --ada-text-primary: #212529; --ada-text-secondary: #6c757d; --ada-text-muted: #495057; --ada-text-inverse: #ffffff; /* Chat bubbles */ --ada-bubble-assistant-bg: #f8f9fa; --ada-bubble-assistant-border: #e9ecef; --ada-bubble-assistant-text: #212529; --ada-bubble-user-bg: linear-gradient(135deg, rgba(249,0,128,0.9) 0%, rgba(200,0,100,0.9) 100%); --ada-bubble-user-text: #ffffff; /* Code blocks */ --ada-code-bg: #1e1e1e; --ada-code-header-bg: #ffffff; --ada-code-border: #e9ecef; --ada-code-text: #d4d4d4; --ada-code-inline-bg: #e9ecef; --ada-code-scrollbar: #5c6370; /* Mermaid */ --ada-mermaid-bg: #ffffff; --ada-mermaid-header: #f8f9fa; /* Shadows */ --ada-shadow-sm: 0 2px 4px rgba(0,0,0,0.08); --ada-shadow-md: 0 2px 8px rgba(0,0,0,0.08); --ada-shadow-lg: 0 4px 20px rgba(0,0,0,0.1); /* Input */ --ada-input-bg: #ffffff; --ada-input-border: #e9ecef; --ada-input-container: rgba(255, 255, 255, 0.9); /* Nav / Sidebar */ --ada-drawer-border: rgba(0,0,0,0.08); /* Tables */ --ada-table-bg: aliceblue; --ada-table-header-bg: #156082; --ada-table-row-even: #c0e6f5; --ada-table-row-hover: #c2fffa; --ada-table-border: #1f1f1f; /* Scrollbar */ --ada-scrollbar-track: rgba(0,0,0,0.1); --ada-scrollbar-thumb: rgba(249, 0, 128, 0.3); --ada-scrollbar-hover: rgba(249, 0, 128, 0.5); /* Misc */ --ada-card-bg: #d9d9d9; --ada-warning-bg: #fff3cd; --ada-warning-border: #ffc107; } /* ============================================================ Dark Mode — se activa con la clase .dark-mode en MudBlazor maneja su propia paleta; estas variables cubren los estilos custom fuera del sistema MudBlazor. ============================================================ */ body.dark-mode { /* Surfaces */ --ada-surface: #1e1e2d; --ada-surface-alt: #151521; --ada-surface-hover: #2a2833; --ada-background: #1a1a27; /* Borders */ --ada-border: #33323e; --ada-border-strong: #292838; /* Text */ --ada-text-primary: #b2b0bf; --ada-text-secondary: #92929f; --ada-text-muted: #92929f; --ada-text-inverse: #1a1a27; /* Chat bubbles */ --ada-bubble-assistant-bg: #2a2833; --ada-bubble-assistant-border: #33323e; --ada-bubble-assistant-text: #b2b0bf; /* Code blocks */ --ada-code-bg: #0d0d0d; --ada-code-header-bg: #1e1e2d; --ada-code-border: #33323e; --ada-code-inline-bg: #2a2833; /* Mermaid */ --ada-mermaid-bg: #1e1e2d; --ada-mermaid-header: #151521; /* Shadows */ --ada-shadow-sm: 0 2px 4px rgba(0,0,0,0.4); --ada-shadow-md: 0 2px 8px rgba(0,0,0,0.4); --ada-shadow-lg: 0 4px 20px rgba(0,0,0,0.4); /* Input */ --ada-input-bg: #1e1e2d; --ada-input-border: #33323e; --ada-input-container: rgba(30, 30, 45, 0.95); /* Nav / Sidebar */ --ada-drawer-border: rgba(255,255,255,0.06); /* Tables */ --ada-table-bg: #1e1e2d; --ada-table-header-bg: #0d3a52; --ada-table-row-even: #1a2a35; --ada-table-row-hover: #1a3040; --ada-table-border: #33323e; /* Scrollbar */ --ada-scrollbar-track: rgba(255,255,255,0.05); --ada-scrollbar-thumb: rgba(249, 0, 128, 0.4); --ada-scrollbar-hover: rgba(249, 0, 128, 0.65); /* Misc */ --ada-card-bg: #2a2833; --ada-warning-bg: #2a2200; --ada-warning-border: #b38600; }