/* ═══════════════════════════════════════════════════════════════════════════════ DALATIC PORTAL - ENTERPRISE DESIGN SYSTEM Estilo: Ultra Corporativo Minimalista Paleta: Deep Blue-Violet + Slate Neutrals Inspiración: Stripe, Linear, Notion Enterprise ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ CSS VARIABLES - DESIGN TOKENS ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ━━━━━ CORE PALETTE: Deep Blue-Violet ━━━━━ */ --dalatic-primary-50: #EEF2FF; --dalatic-primary-100: #E0E7FF; --dalatic-primary-200: #C7D2FE; --dalatic-primary-300: #A5B4FC; --dalatic-primary-400: #818CF8; --dalatic-primary-500: #6366F1; --dalatic-primary-600: #4F46E5; --dalatic-primary-700: #4338CA; --dalatic-primary-800: #3730A3; --dalatic-primary-900: #312E81; --dalatic-primary-950: #1E1B4B; /* ━━━━━ ACCENT: Violet ━━━━━ */ --dalatic-accent-50: #F5F3FF; --dalatic-accent-100: #EDE9FE; --dalatic-accent-200: #DDD6FE; --dalatic-accent-300: #C4B5FD; --dalatic-accent-400: #A78BFA; --dalatic-accent-500: #8B5CF6; --dalatic-accent-600: #7C3AED; --dalatic-accent-700: #6D28D9; --dalatic-accent-800: #5B21B6; --dalatic-accent-900: #4C1D95; /* ━━━━━ NEUTRALS: Refined Slate ━━━━━ */ --rz-white: #FFFFFF; --rz-black: #000000; --rz-base-50: #F8FAFC; --rz-base-100: #F1F5F9; --rz-base-200: #E2E8F0; --rz-base-300: #CBD5E1; --rz-base-400: #94A3B8; --rz-base-500: #64748B; --rz-base-600: #475569; --rz-base-700: #334155; --rz-base-800: #1E293B; --rz-base-900: #0F172A; --rz-base-950: #020617; --rz-base-lighter: #F8FAFC; --rz-base-light: #F1F5F9; --rz-base-dark: #0F172A; --rz-base-darker: #020617; /* ━━━━━ PRIMARY (Indigo Corporate) ━━━━━ */ --rz-primary: #4F46E5; --rz-primary-light: #6366F1; --rz-primary-lighter: rgba(79, 70, 229, 0.06); --rz-primary-dark: #4338CA; --rz-primary-darker: #3730A3; --rz-on-primary: #FFFFFF; --rz-on-primary-lighter: #4F46E5; /* ━━━━━ SECONDARY (Slate Professional) ━━━━━ */ --rz-secondary: #475569; --rz-secondary-light: #64748B; --rz-secondary-lighter: rgba(71, 85, 105, 0.06); --rz-secondary-dark: #334155; --rz-secondary-darker: #1E293B; --rz-on-secondary: #FFFFFF; /* ━━━━━ INFO (Violet Accent) ━━━━━ */ --rz-info: #7C3AED; --rz-info-light: #8B5CF6; --rz-info-lighter: rgba(124, 58, 237, 0.06); --rz-info-dark: #6D28D9; --rz-info-darker: #5B21B6; --rz-on-info: #FFFFFF; /* ━━━━━ SUCCESS (Emerald Muted) ━━━━━ */ --rz-success: #059669; --rz-success-light: #10B981; --rz-success-lighter: rgba(5, 150, 105, 0.06); --rz-success-dark: #047857; --rz-success-darker: #065F46; --rz-on-success: #FFFFFF; /* ━━━━━ WARNING (Muted Amber - Corporate) ━━━━━ */ --rz-warning: #B98900; --rz-warning-light: #D4A017; --rz-warning-lighter: rgba(185, 137, 0, 0.06); --rz-warning-dark: #9A7200; --rz-warning-darker: #7A5A00; --rz-on-warning: #FFFFFF; /* ━━━━━ DANGER (Rose Muted) ━━━━━ */ --rz-danger: #DC2626; --rz-danger-light: #EF4444; --rz-danger-lighter: rgba(220, 38, 38, 0.06); --rz-danger-dark: #B91C1C; --rz-danger-darker: #991B1B; --rz-on-danger: #FFFFFF; /* ━━━━━ SEMANTIC: Tasks & Status ━━━━━ */ --task-todo: #64748B; --task-in-progress: #4F46E5; --task-in-review: #7C3AED; --task-done: #059669; --task-blocked: #DC2626; --task-backlog: #94A3B8; --priority-critical: #DC2626; --priority-high: #D97706; --priority-medium: #4F46E5; --priority-low: #64748B; --type-bug: #DC2626; --type-feature: #7C3AED; --type-improvement: #4F46E5; --type-task: #475569; --type-story: #059669; --type-epic: #4338CA; /* ━━━━━ SEMANTIC: Ticket Status ━━━━━ */ --ticket-new: var(--rz-info); --ticket-open: var(--rz-primary); --ticket-in-progress: #0891B2; --ticket-on-hold: var(--rz-warning); --ticket-pending: #CA8A04; --ticket-resolved: var(--rz-success); --ticket-closed: var(--rz-base-500); --ticket-cancelled: var(--rz-base-400); /* ━━━━━ SEMANTIC: Ticket Priority ━━━━━ */ --ticket-priority-critical: var(--rz-danger-darker); --ticket-priority-urgent: var(--rz-danger); --ticket-priority-high: var(--rz-warning); --ticket-priority-medium: var(--rz-primary); --ticket-priority-low: var(--rz-base-500); /* ━━━━━ TYPOGRAPHY ━━━━━ */ --rz-text-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --rz-text-color: #1E293B; --rz-text-title-color: #0F172A; --rz-text-secondary-color: #64748B; --rz-text-tertiary-color: #94A3B8; --rz-text-disabled-color: #CBD5E1; --rz-text-contrast-color: #FFFFFF; --rz-body-font-size: 0.8125rem; --rz-body-line-height: 1.5; /* ━━━━━ LAYOUT ━━━━━ */ /* Dos planos, los dos neutros: shell (header + sidebar) #F0F0F0 el cromo de la aplicación lienzo y tarjetas blanco todo lo demás Estos tres valores salían de la escala base (Slate) para que un cliente que cambiara su paleta los moviera a la vez. Se dejan de literales a propósito: Slate es una escala FRÍA — su 100 es #F1F5F9 y su 200 #E2E8F0, hsl(213 27% …) — y pegada al primario índigo se lee azulada en el lienzo y morada en el carril. El shell y el lienzo son cromo, no marca: el color del cliente ya se expresa en botones, enlaces, acentos y estados. Así que se quedan neutros pase lo que pase con la paleta. Con el lienzo en blanco, la frontera del carril la dibuja el propio salto a #F0F0F0, y las tarjetas —también blancas— dependen otra vez de su borde para existir. Ese borde ya lo pone `.rz-card` más abajo, así que no hace falta nada más; si en algún momento se quita, las tarjetas desaparecerán sobre el lienzo y el culpable estará aquí. */ /* #F0F0F0 era gris puro (hsl 0 0% 94%): neutro de verdad, pero al lado de un lienzo blanco se leía apagado, casi como una banda desactivada. Este otro mantiene la misma idea —cromo, no marca— con un punto de azul-gris muy bajo (hsl 214 25% 96%): sigue siendo mucho menos frío que Slate 100 (#F1F5F9, hsl 213 27% 96% pero un escalón más oscuro) y no se tiñe de morado junto al primario índigo. Un escalón más claro que el anterior: el carril se separa del lienzo blanco sin pesar. */ --rz-shell-neutral: #F1F3F6; --rz-shell-surface-color: var(--rz-shell-neutral); --rz-body-background-color: #FFFFFF; --rz-base-background-color: #FFFFFF; --rz-layout-body-background-color: #FFFFFF; /* Ancho del carril plegado y sangría de cabecera. Viven juntos porque la hamburguesa del header se centra en el carril a partir de los dos: son una sola decisión de rejilla, no dos números sueltos que hay que acordarse de mover a la vez. */ --rz-rail-collapsed-width: 84px; --rz-header-lead-padding: 12px; /* ━━━━━ HEADER (banda continua, mismo plano que el sidebar) ━━━━━ Era un degradado índigo oscuro. Con el header cruzando todo el ancho, ese degradado partía la pantalla en dos bloques y dejaba la marca flotando sobre un fondo distinto al del menú que la continúa. Header y sidebar comparten ahora superficie: la jerarquía la dan el borde y el contenido, no un color de fondo que compite con la aplicación. */ --rz-header-background-color: var(--rz-shell-surface-color); --rz-header-color: var(--rz-text-color); --rz-header-min-height: 56px; --rz-header-shadow: none; --rz-header-border-color: var(--rz-base-200); --rz-header-hover-background-color: var(--rz-base-200); --rz-header-search-background-color: var(--rz-base-200); /* ━━━━━ SIDEBAR — misma superficie que el header, sin costura ━━━━━ */ --rz-sidebar-background-color: var(--rz-shell-surface-color); /* Los hijos del menu comparten el fondo del carril. Radzen pinta el WRAPPER de cada item de segundo nivel con --rz-panel-menu-item-2nd-level-background-color, que por defecto es blanco. Nunca lo habiamos declarado, asi que al desplegar un grupo los hijos salian en pildoras blancas flotando sobre el gris del rail: se leian como tarjetas y no como continuacion del menu que los contiene. En transparente heredan el carril, y el estado activo o el hover siguen viniendo de sus propios tokens. */ --rz-panel-menu-item-2nd-level-background-color: transparent; --rz-panel-menu-item-3rd-level-background-color: transparent; --rz-sidebar-color: #1E293B; /* 320 y no 240: el árbol de la wiki sangra 24px por nivel, así que a partir del tercero al título le quedaban ~90px y salía cortado ("BIOT · Andalu…"). Con 320 la etiqueta de un nodo de primer nivel dispone de ~170px: la mayoría cabe en una línea y las más largas ("02 · Plataformas de datos") ocupan dos, que es el techo que fija .wk-text. Cortado, ninguna. No se sube más porque el carril se lo quita al contenido, que es donde se trabaja. */ --rz-sidebar-width: 320px; --rz-sidebar-border-inline-end: 1px solid #E2E8F0; /* ━━━━━ PANEL MENU ━━━━━ */ --rz-panel-menu-item-color: #475569; --rz-panel-menu-item-background-color: transparent; --rz-panel-menu-item-hover-color: #1E1B4B; --rz-panel-menu-item-hover-background-color: rgba(79, 70, 229, 0.06); --rz-panel-menu-item-active-color: #4F46E5; --rz-panel-menu-item-active-background-color: rgba(79, 70, 229, 0.08); --rz-panel-menu-item-padding-block: 7px; --rz-panel-menu-item-padding-inline: 10px; --rz-panel-menu-item-border-radius: 6px; --rz-panel-menu-font-size: 0.875rem; --rz-panel-menu-icon-color: #4B5563; --rz-panel-menu-icon-active-color: #1F2937; --rz-panel-menu-icon-size: 20px; --rz-panel-menu-icon-2nd-level-margin-inline: 0 0.5rem; /* ━━━━━ PROFILE MENU ━━━━━ */ --rz-profile-menu-padding-block: 0; --rz-profile-menu-padding-inline: 0; --rz-profile-menu-border: none; --rz-profile-menu-top-item-background-color: transparent; --rz-profile-menu-background-color: var(--rz-base-background-color); --rz-profile-menu-color: var(--rz-text-color); --rz-profile-menu-hover-background-color: rgba(0, 0, 0, 0.04); --rz-profile-menu-item-color: var(--rz-text-secondary-color); --rz-profile-menu-item-hover-color: var(--rz-text-color); /* ━━━━━ BUTTONS ━━━━━ */ --rz-button-border-radius: 8px; --rz-button-padding-inline: 14px; --rz-button-padding-block: 8px; --rz-button-font-size: 0.8125rem; --rz-button-font-weight: 500; --rz-button-hover-bg: color-mix(in srgb, var(--rz-text-color) 8%, transparent); --rz-button-hover-border: var(--rz-base-400); /* ━━━━━ BORDERS ━━━━━ */ --rz-border-radius: 8px; --rz-border-radius-sm: 6px; --rz-border-radius-lg: 12px; --rz-border-radius-xl: 16px; --rz-border-base-200: 1px solid #E2E8F0; --rz-border-base-300: 1px solid #CBD5E1; --rz-border-normal: 1px solid #E2E8F0; --rz-border-hover: 1px solid #CBD5E1; --rz-border-focus: 2px solid var(--rz-primary); /* ━━━━━ SHADOWS (Ultra Subtle) ━━━━━ */ --rz-shadow-0: none; --rz-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03); --rz-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); --rz-shadow-4: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02); --rz-shadow-6: 0 10px 15px rgba(0, 0, 0, 0.04), 0 4px 6px rgba(0, 0, 0, 0.02); --rz-shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.06), 0 8px 10px rgba(0, 0, 0, 0.03); --rz-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.08); --rz-shadow-glow: 0 0 0 3px rgba(79, 70, 229, 0.12); /* ━━━━━ TRANSITIONS ━━━━━ */ --rz-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); --rz-transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1); --rz-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --rz-transition-all: all var(--rz-transition); /* ━━━━━ GRID / DATAGRID ━━━━━ La tabla tomaba prestado su contraste del lienzo: era blanca sobre un lienzo gris y se recortaba sola. Con el lienzo en blanco ese préstamo desaparece y quedaba blanco sobre blanco — la cabecera a #FAFBFC y las separaciones a #F1F5F9 son invisibles ahí. Ahora la rejilla lleva su propio contraste encima, que es lo que debió llevar siempre: un componente no puede depender del color de lo que tiene detrás. */ --rz-grid-background-color: var(--rz-base-background-color); /* Un escalón por encima del lienzo, no al mismo nivel. Cuando el lienzo era blanco, base-100 bastaba para despegar la cabecera; ahora el lienzo ES base-100 y la fila de rótulos se quedó sin contraste contra las filas de datos. Sube a base-200, el mismo plano que el shell: la cabecera de una tabla es cromo, no dato. */ --rz-grid-header-background-color: var(--rz-base-200); --rz-grid-border: var(--rz-border-base-200); --rz-grid-cell-border: 1px solid var(--rz-base-200); --rz-grid-row-hover-background-color: var(--rz-base-100); --rz-grid-cell-font-size: 0.75rem; --rz-grid-cell-padding: 0.375rem 0.625rem; --rz-grid-header-padding: 0.375rem 0.625rem; /* ── Cabecera de rejilla: alto y cuerpo ────────────────────────────────── Las cabeceras salian altisimas y con la letra diminuta, y las dos cosas tenian la misma causa: estabamos peleando con el sitio equivocado. Radzen NO pone el relleno en el (le pone `padding: 0`). Lo pone en un envoltorio interno con `--rz-grid-header-cell-padding`, y el alto real lo manda `--rz-grid-header-line-height`, que por defecto son 24px para un texto de 10px. Como ademas nuestra regla forzaba relleno sobre el propio , se sumaban DOS capas: 6+6 nuestros, 4+4 del envoltorio y 24 de interlineado. De ahi los ~44px de una fila que solo tiene que decir el nombre de seis columnas. Se corrige gobernando los tokens del vendor en vez de añadir capas: 12px de letra (era 10, ilegible en mayusculas), 18px de interlineado (eran 24) y el relleno vertical UNA sola vez, en el envoltorio que de verdad lo aplica. */ --rz-grid-header-font-size: 0.75rem; --rz-grid-header-line-height: 1.125rem; --rz-grid-header-cell-padding: 0.3125rem 0.625rem; --rz-grid-header-font-weight: 600; /* ━━━━━ INPUTS ━━━━━ */ --rz-input-background-color: var(--rz-base-background-color); --rz-input-border: 1px solid #E2E8F0; --rz-input-hover-border: 1px solid #CBD5E1; --rz-input-focus-border: 2px solid var(--rz-primary); --rz-input-border-radius: 8px; --rz-input-padding: 10px 14px; /* ━━━━━ CARDS ━━━━━ */ --rz-card-background-color: var(--rz-base-background-color); --rz-card-border: 1px solid #E2E8F0; --rz-card-shadow: var(--rz-shadow-1); --rz-card-border-radius: 12px; /* ━━━━━ BADGES ━━━━━ */ --rz-badge-border-radius: 6px; --rz-badge-font-weight: 500; --rz-badge-font-size: 0.6875rem; --rz-badge-padding: 4px 8px; /* ━━━━━ SPACING SCALE ━━━━━ */ --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; /* ━━━━━ DASHBOARD TOKENS ━━━━━ */ --portal-dashboard-hero-bg: #FFFFFF; --portal-dashboard-hero-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); --portal-dashboard-hero-orb: none; --portal-dashboard-hero-text: var(--rz-text-title-color); --portal-dashboard-hero-muted: var(--rz-text-secondary-color); --portal-dashboard-hero-subtle: var(--rz-text-tertiary-color); --portal-dashboard-hero-panel-bg: var(--rz-base-50); --portal-dashboard-hero-panel-border: var(--rz-base-200); --portal-dashboard-hero-panel-border-hover: var(--rz-base-300); --portal-dashboard-hero-button-bg: transparent; --portal-dashboard-hero-button-bg-hover: var(--rz-base-50); --portal-dashboard-pill-bg: var(--rz-base-50); --portal-dashboard-pill-border: var(--rz-base-200); --portal-dashboard-pill-text: var(--rz-text-secondary-color); --portal-dashboard-pill-alert-bg: rgba(127, 29, 29, 0.24); --portal-dashboard-pill-alert-border: rgba(248, 113, 113, 0.34); --portal-dashboard-stat-border: var(--rz-base-200); --portal-dashboard-stat-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); --portal-dashboard-stat-shadow-hover: 0 2px 8px rgba(15, 23, 42, 0.07); --portal-dashboard-stat-bg: #FFFFFF; --portal-dashboard-stat-inner-border: transparent; --portal-dashboard-panel-border: var(--rz-base-200); --portal-dashboard-panel-border-hover: var(--rz-base-300); --portal-dashboard-panel-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); --portal-dashboard-panel-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.06); --portal-dashboard-panel-bg: #FFFFFF; --portal-dashboard-panel-inner-border: transparent; --portal-dashboard-item-bg: #FFFFFF; --portal-dashboard-item-bg-hover: var(--rz-base-50); --portal-dashboard-item-border: var(--rz-base-200); --portal-dashboard-item-border-hover: var(--rz-base-300); --portal-dashboard-item-shadow-hover: 0 2px 8px rgba(15, 23, 42, 0.05); --portal-dashboard-item-accent: var(--rz-primary); --portal-dashboard-item-radius: 10px; --portal-dashboard-quick-action-bg: #FFFFFF; --portal-dashboard-quick-action-bg-hover: var(--rz-base-50); --portal-dashboard-quick-action-bg-primary: rgba(79, 70, 229, 0.04); --portal-dashboard-quick-action-bg-accent: rgba(14, 165, 233, 0.04); --portal-dashboard-quick-action-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); --portal-dashboard-quick-action-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.07); --portal-dashboard-quick-action-icon-bg: var(--rz-primary-lighter); --portal-dashboard-overlay-bg: rgba(2, 6, 23, 0.58); --portal-dashboard-modal-shadow: 0 30px 80px rgba(15, 23, 42, 0.28); /* ━━━━━ CONTEXT MENU / FLOATING MENUS ━━━━━ */ --rz-context-menu-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --rz-menu-border: 1px solid var(--rz-base-200); --rz-menu-border-radius: 8px; --rz-menu-background-color: var(--rz-base-background-color); --rz-menu-item-color: var(--rz-text-color); --rz-menu-item-hover-color: var(--rz-text-color); --rz-menu-item-hover-background-color: var(--rz-base-50); --rz-menu-item-border-radius: 4px; --rz-menu-item-padding-block: 0.5rem; --rz-menu-item-padding-inline: 0.75rem; --rz-context-menu-padding-block: 0.25rem; --rz-context-menu-padding-inline: 0; /* ━━━━━ TICKETS REDESIGN TOKENS (LIGHT) ━━━━━ Used by .tk-scope wrapper across the ServiceDesk redesign (TicketList, TicketDetail/Drawer, QueuesAdmin, ShortcutsCheatSheet). The naming follows the design handoff (`--ink`, `--surface`, `--st-*`). Neutrals and brand point to Radzen variables so dark mode flips automatically; status-palette colors (`--tk-st-*`) are designed-tuned and have explicit dark overrides further below. */ --tk-ink: var(--rz-text-title-color); --tk-ink-2: var(--rz-text-color); --tk-ink-dim: var(--rz-text-secondary-color); --tk-ink-faint: var(--rz-text-tertiary-color); --tk-bg: var(--rz-body-background-color); --tk-surface: var(--rz-base-background-color); --tk-surface-2: var(--rz-base-50); --tk-line: var(--rz-base-200); --tk-line-soft: var(--rz-base-100); --tk-line-strong: var(--rz-base-300); --tk-violet: var(--rz-primary); --tk-violet-soft: rgba(79, 70, 229, 0.08); --tk-violet-line: rgba(79, 70, 229, 0.24); --tk-violet-glow: rgba(79, 70, 229, 0.12); /* Status palette (3 hues per state — ink / bg / border) */ --tk-st-new: #5B3DF5; --tk-st-new-bg: #EFEAFF; --tk-st-new-line: #DDD1FF; --tk-st-open: #2563EB; --tk-st-open-bg: #E8F0FF; --tk-st-open-line: #CFDCFF; /* Ámbar de trabajo en curso, no naranja de aviso. El #D97706 anterior tenía la misma saturación que un estado de error y se comía la pantalla desde una píldora de 11px. Mismo tono, la mitad de saturación. */ --tk-st-prog: #A8763C; --tk-st-prog-bg: #F5F1E9; --tk-st-prog-line: #E8DCC7; --tk-st-wait: #64748B; --tk-st-wait-bg: #EEF2F6; --tk-st-wait-line: #DDE3EB; /* Verde de "hecho", no verde de semáforo. El #10B981 anterior era el color más saturado de toda la pantalla y se llevaba la mirada a un estado que precisamente ya no requiere atención. */ --tk-st-done: #4E9B7E; --tk-st-done-bg: #ECF2EF; --tk-st-done-line: #D5E4DC; --tk-st-closed: #94A3B8; --tk-st-closed-bg: #F1F3F7; --tk-st-closed-line:#DDE3EB; /* SLA — visual layer on top of any status */ --tk-st-sla: var(--rz-danger); --tk-st-sla-bg: #FDECEC; --tk-st-sla-line: #F6CDCD; --tk-shadow-sm: var(--rz-shadow-xs); --tk-shadow-md: var(--rz-shadow-4); --tk-radius-sm: var(--rz-border-radius-sm); --tk-radius: var(--rz-border-radius); --tk-radius-lg: var(--rz-border-radius-lg); /* ━━━━━ TICKETS · AVATAR PALETTE (LIGHT) ━━━━━ Stable hash-based color pairs assigned to user avatars in queue cards and the side panel. Each pair is intentional (not a status hue) so the same user always gets the same pill color regardless of context. Dark mode overrides further below soften the bg + lighten the fg. */ --tk-av-default-bg: #E2E6FF; --tk-av-default-fg: #4338CA; --tk-av-amber-bg: #FEF3E2; --tk-av-amber-fg: #92400E; --tk-av-green-bg: #E7F6ED; --tk-av-green-fg: #1E8E3E; --tk-av-rose-bg: #FDECEC; --tk-av-rose-fg: #BE123C; --tk-av-teal-bg: #E0F2F1; --tk-av-teal-fg: #0A7D6E; --tk-av-slate-bg: #EEF2F6; --tk-av-slate-fg: #334155; /* ━━━━━ TICKETS · BUBBLE / NOTE TINTS (LIGHT) ━━━━━ Used by tickets-detail.css for "internal note" (amber) and "client message" (sky-blue) bubbles + tags + composer surfaces. They piggy-back on the status palette but live as separate tokens so future re-tuning does not affect status chips. Dark overrides below. */ --tk-bubble-internal-bg: #FFF8E6; --tk-bubble-internal-line: #F3E1A4; --tk-bubble-internal-fg: #92400E; --tk-bubble-internal-tag: #FFF3C4; --tk-composer-internal-bg: #FFFCEB; --tk-bubble-client-bg: #F6FAFD; --tk-bubble-client-line: #CFE1EE; --tk-bubble-client-fg: #2563EB; --tk-bubble-client-tag-bg: #E8F0FF; --tk-bubble-client-tag-line:#CFDCFF; /* ━━━━━ TICKETS · DIFF (LIGHT) ━━━━━ Visual diff arrows shown in change-log entries (Actividad → Cambios). */ --tk-diff-from-bg: #FDECEC; --tk-diff-from-fg: #9B1C1C; --tk-diff-from-line: #F6CDCD; --tk-diff-from-strike:rgba(192, 48, 48, 0.40); --tk-diff-to-bg: #E7F6ED; --tk-diff-to-fg: #15683A; --tk-diff-to-line: #C5E7D3; --tk-st-done-strike: rgba(16, 185, 129, 0.45); /* ━━━━━ TICKETS · AI SUMMARY GRADIENT (LIGHT) ━━━━━ Soft violet→white wash + violet→cyan accent rail behind the AI summary card on TicketDetail. Dark mode flips both to translucent layers. */ --tk-ai-card-bg: linear-gradient(180deg, #FBFAFF, var(--rz-base-background-color)); --tk-ai-rail: linear-gradient(180deg, #5B6CFF, #22D3EE); --tk-ai-ico-bg: linear-gradient(135deg, #5B6CFF, #8B5CF6); /* ━━━━━ SUPERSHEET REDESIGN TOKENS (LIGHT) ━━━━━ Excel/Sheets-style editor at /datatables/*. The redesign aliases the portal's existing --rz-* and --dalatic-* tokens (single source of truth) and adds 8 type-aware color tokens for column-kind icons, plus a couple of bright variants and a pop-shadow used by floating menus. Layout values (row heights, font stacks) live alongside so the shell and every sub-component pull from the same place. Naming: --ss-* (SuperSheet) prefix. All values reused via var(…) — no hex inside supersheet/*.css. Dark overrides further below. */ /* Semantic aliases — point to the portal tokens (no separate copies) */ --ss-primary: var(--rz-primary); --ss-primary-deep: var(--rz-primary-dark); --ss-primary-soft: var(--dalatic-primary-50); --ss-primary-soft-2: var(--dalatic-primary-100); --ss-primary-border: var(--dalatic-primary-200); --ss-primary-darkest: var(--dalatic-primary-950); --ss-ink: var(--rz-base-900); --ss-ink-2: var(--rz-base-800); --ss-ink-3: var(--rz-base-700); --ss-ink-4: var(--rz-base-600); --ss-muted: var(--rz-base-500); --ss-muted-2: var(--rz-base-400); --ss-surface: var(--rz-base-background-color); --ss-surface-alt: var(--rz-base-50); --ss-surface-2: var(--rz-base-100); --ss-surface-3: var(--rz-base-200); --ss-border: var(--rz-base-200); --ss-border-soft: var(--rz-base-100); --ss-border-strong: var(--rz-base-300); --ss-success: var(--rz-success-light); --ss-success-soft: #ECFDF5; --ss-danger: var(--rz-danger-light); /* Bright variants not present in the muted-corporate palette */ --ss-warning-bright: #F59E0B; --ss-info-sky: #0EA5E9; /* Floating pop shadow (used by dropdowns, header filter, floating toolbar) */ --ss-shadow-sm: var(--rz-shadow-xs); --ss-shadow-md: var(--rz-shadow-4); --ss-shadow-pop: 0 8px 24px -4px rgba(15,23,42,.16), 0 4px 8px -2px rgba(15,23,42,.08); /* Type-icon colors — keyed to the column "kind" (FieldType) on the schema */ --ss-type-num: #059669; --ss-type-text: #0EA5E9; --ss-type-date: #F59E0B; --ss-type-bool: #6366F1; --ss-type-select: #EC4899; --ss-type-link: #8B5CF6; --ss-type-fx: var(--rz-primary); --ss-type-key: #94A3B8; --ss-type-user: #EA580C; /* Typography — Inter for UI, JetBrains Mono for IDs/dates/formulas/numbers */ --ss-font-ui: var(--rz-text-font-family); --ss-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Layout — row heights, border radii (match the design handoff) */ --ss-row-h: 36px; --ss-header-h: 36px; --ss-radius-sm: 4px; --ss-radius: 6px; --ss-radius-md: 8px; } /* ═══════════════════════════════════════════════════════════════════════════════ DARK MODE Supports both Radzen (.rz-dark) and Bootstrap 5.3 ([data-bs-theme="dark"]) ═══════════════════════════════════════════════════════════════════════════════ */ :root.rz-dark, [data-bs-theme="dark"], html[data-bs-theme="dark"] { color-scheme: dark; --rz-text-color: #E2E8F0; --rz-text-title-color: #F8FAFC; --rz-text-secondary-color: #CBD5E1; --rz-text-tertiary-color: #94A3B8; --rz-text-disabled-color: #64748B; --rz-base-50: #0F172A; --rz-base-100: #1E293B; --rz-base-200: #334155; --rz-base-300: #475569; --rz-base-400: #64748B; --rz-base-500: #94A3B8; --rz-base-600: #CBD5E1; --rz-base-700: #E2E8F0; --rz-base-800: #F1F5F9; --rz-base-900: #F8FAFC; --rz-body-background-color: #020617; --rz-base-background-color: #0F172A; --rz-layout-body-background-color: #020617; /* OBLIGATORIO redeclararlo aquí. En claro el shell es un gris neutro literal (--rz-shell-neutral); si el modo oscuro no lo pisa, hereda ese gris claro de :root y el carril sale BLANCO sobre la aplicación oscura. En oscuro la escala base no tiene el problema del matiz frío —sobre un fondo casi negro nadie lee #334155 como morado—, así que aquí sí sale de la escala. */ --rz-shell-surface-color: var(--rz-base-200); /* En oscuro, header y sidebar comparten superficie por el mismo motivo que en claro: si el header lleva su propio degradado, la banda superior se ve como una pieza pegada encima en vez de como el borde de la aplicación. */ --rz-header-background-color: var(--rz-shell-surface-color); --rz-header-color: var(--rz-text-color); --rz-header-shadow: none; --rz-header-border-color: var(--rz-base-200); --rz-header-hover-background-color: var(--rz-base-200); --rz-header-search-background-color: var(--rz-base-200); --rz-sidebar-background-color: var(--rz-shell-surface-color); /* Los hijos del menu comparten el fondo del carril. Radzen pinta el WRAPPER de cada item de segundo nivel con --rz-panel-menu-item-2nd-level-background-color, que por defecto es blanco. Nunca lo habiamos declarado, asi que al desplegar un grupo los hijos salian en pildoras blancas flotando sobre el gris del rail: se leian como tarjetas y no como continuacion del menu que los contiene. En transparente heredan el carril, y el estado activo o el hover siguen viniendo de sus propios tokens. */ --rz-panel-menu-item-2nd-level-background-color: transparent; --rz-panel-menu-item-3rd-level-background-color: transparent; --rz-sidebar-color: #E2E8F0; --rz-sidebar-border-inline-end: 1px solid #1E293B; --rz-panel-menu-item-color: #CBD5E1; --rz-panel-menu-item-hover-color: #F1F5F9; --rz-panel-menu-item-hover-background-color: #1E293B; --rz-panel-menu-item-active-color: #818CF8; --rz-panel-menu-item-active-background-color: rgba(129, 140, 248, 0.08); --rz-panel-menu-icon-color: #9CA3AF; --rz-panel-menu-icon-active-color: #D1D5DB; --rz-profile-menu-background-color: #1E1B4B; --rz-profile-menu-color: #FFFFFF; --rz-profile-menu-hover-background-color: rgba(255, 255, 255, 0.08); --rz-profile-menu-item-color: rgba(255, 255, 255, 0.9); --rz-profile-menu-item-hover-color: #FFFFFF; --rz-border-base-200: 1px solid #1E293B; --rz-border-base-300: 1px solid #334155; --rz-border-normal: 1px solid #334155; --rz-input-border: 1px solid #334155; --rz-card-border: 1px solid #1E293B; --rz-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.2); --rz-shadow-4: 0 4px 6px rgba(0, 0, 0, 0.3); --rz-shadow-6: 0 10px 15px rgba(0, 0, 0, 0.4); --rz-grid-header-background-color: #1E293B; --rz-grid-row-hover-background-color: #1E293B; --rz-primary: #6366F1; --rz-primary-light: #818CF8; --rz-primary-lighter: rgba(99, 102, 241, 0.1); --rz-info: #8B5CF6; --rz-info-lighter: rgba(139, 92, 246, 0.1); /* Secondary color - lighter for dark mode contrast */ --rz-secondary: #94A3B8; --rz-secondary-lighter: rgba(148, 163, 184, 0.15); --rz-button-hover-bg: color-mix(in srgb, var(--rz-text-color) 14%, transparent); --rz-button-hover-border: var(--rz-base-500); --portal-dashboard-hero-bg: var(--rz-base-background-color); --portal-dashboard-hero-shadow: none; --portal-dashboard-hero-orb: none; --portal-dashboard-hero-text: var(--rz-text-title-color); --portal-dashboard-hero-muted: var(--rz-text-secondary-color); --portal-dashboard-hero-subtle: var(--rz-text-tertiary-color); --portal-dashboard-hero-panel-bg: var(--rz-base-100); --portal-dashboard-hero-panel-border: var(--rz-base-200); --portal-dashboard-hero-panel-border-hover: var(--rz-base-300); --portal-dashboard-hero-button-bg: transparent; --portal-dashboard-hero-button-bg-hover: var(--rz-base-100); --portal-dashboard-pill-bg: var(--rz-base-100); --portal-dashboard-pill-border: var(--rz-base-200); --portal-dashboard-pill-text: var(--rz-text-secondary-color); --portal-dashboard-pill-alert-bg: rgba(127, 29, 29, 0.34); --portal-dashboard-pill-alert-border: rgba(248, 113, 113, 0.3); --portal-dashboard-stat-border: var(--rz-base-200); --portal-dashboard-stat-shadow: none; --portal-dashboard-stat-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.16); --portal-dashboard-stat-bg: var(--rz-base-background-color); --portal-dashboard-stat-inner-border: transparent; --portal-dashboard-panel-border: rgba(71, 85, 105, 0.5); --portal-dashboard-panel-border-hover: rgba(129, 140, 248, 0.32); --portal-dashboard-panel-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); --portal-dashboard-panel-shadow-hover: 0 18px 36px rgba(0, 0, 0, 0.24); --portal-dashboard-panel-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(17, 24, 39, 0.96) 100%); --portal-dashboard-panel-inner-border: rgba(148, 163, 184, 0.08); --portal-dashboard-item-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.9) 100%); --portal-dashboard-item-bg-hover: rgba(15, 23, 42, 0.98); --portal-dashboard-item-border: var(--rz-base-200); --portal-dashboard-item-border-hover: rgba(129, 140, 248, 0.28); --portal-dashboard-item-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.24); --portal-dashboard-item-accent: rgba(129, 140, 248, 0.35); --portal-dashboard-item-radius: 18px; --portal-dashboard-quick-action-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(17, 24, 39, 0.98) 100%); --portal-dashboard-quick-action-bg-hover: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%); --portal-dashboard-quick-action-bg-primary: linear-gradient(180deg, rgba(99, 102, 241, 0.16) 0%, rgba(15, 23, 42, 0.98) 100%); --portal-dashboard-quick-action-bg-accent: linear-gradient(180deg, rgba(14, 165, 233, 0.16) 0%, rgba(15, 23, 42, 0.98) 100%); --portal-dashboard-quick-action-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); --portal-dashboard-quick-action-shadow-hover: 0 18px 30px rgba(0, 0, 0, 0.28); --portal-dashboard-quick-action-icon-bg: linear-gradient(180deg, rgba(129, 140, 248, 0.22), rgba(99, 102, 241, 0.12)); --portal-dashboard-overlay-bg: rgba(2, 6, 23, 0.72); --portal-dashboard-modal-shadow: 0 30px 80px rgba(0, 0, 0, 0.44); /* ━━━━━ TICKETS REDESIGN TOKENS (DARK) ━━━━━ Status palette tuned for dark backgrounds: keeps the chip foreground light enough on the soft fill, and uses translucent fills so the chip blends with whatever surface it sits on. Brand/violet glows pick up --rz-primary, which already shifts in dark mode. */ --tk-violet-soft: rgba(99, 102, 241, 0.16); --tk-violet-line: rgba(99, 102, 241, 0.34); --tk-violet-glow: rgba(99, 102, 241, 0.22); --tk-st-new: #B4A2FF; --tk-st-new-bg: rgba(99, 102, 241, 0.18); --tk-st-new-line: rgba(99, 102, 241, 0.36); --tk-st-open: #93B6FF; --tk-st-open-bg: rgba(37, 99, 235, 0.18); --tk-st-open-line: rgba(37, 99, 235, 0.36); --tk-st-prog: #D9B389; --tk-st-prog-bg: rgba(168, 118, 60, 0.20); --tk-st-prog-line: rgba(168, 118, 60, 0.38); --tk-st-wait: #B7C4D5; --tk-st-wait-bg: rgba(100, 116, 139, 0.20); --tk-st-wait-line: rgba(100, 116, 139, 0.36); --tk-st-done: #8FC7B0; --tk-st-done-bg: rgba(78, 155, 126, 0.20); --tk-st-done-line: rgba(78, 155, 126, 0.38); --tk-st-closed: #B7C4D5; --tk-st-closed-bg: rgba(148, 163, 184, 0.18); --tk-st-closed-line:rgba(148, 163, 184, 0.32); --tk-st-sla: #F87171; --tk-st-sla-bg: rgba(220, 38, 38, 0.20); --tk-st-sla-line: rgba(220, 38, 38, 0.40); /* ━━━━━ TICKETS · AVATAR PALETTE (DARK) ━━━━━ Translucent fills + lightened text so the hash-based avatar pairs stay legible against the dark surface without overwhelming it. */ --tk-av-default-bg: rgba(99, 102, 241, 0.20); --tk-av-default-fg: #B4A2FF; --tk-av-amber-bg: rgba(217, 119, 6, 0.20); --tk-av-amber-fg: #FBBF77; --tk-av-green-bg: rgba(16, 185, 129, 0.20); --tk-av-green-fg: #6EE7B7; --tk-av-rose-bg: rgba(220, 38, 38, 0.20); --tk-av-rose-fg: #FCA5A5; --tk-av-teal-bg: rgba(20, 184, 166, 0.20); --tk-av-teal-fg: #5EEAD4; --tk-av-slate-bg: rgba(148, 163, 184, 0.18); --tk-av-slate-fg: #CBD5E1; /* ━━━━━ TICKETS · BUBBLE / NOTE TINTS (DARK) ━━━━━ */ --tk-bubble-internal-bg: rgba(217, 119, 6, 0.14); --tk-bubble-internal-line: rgba(217, 119, 6, 0.32); --tk-bubble-internal-fg: #FBBF77; --tk-bubble-internal-tag: rgba(217, 119, 6, 0.22); --tk-composer-internal-bg: rgba(217, 119, 6, 0.10); --tk-bubble-client-bg: rgba(37, 99, 235, 0.14); --tk-bubble-client-line: rgba(37, 99, 235, 0.32); --tk-bubble-client-fg: #93B6FF; --tk-bubble-client-tag-bg: rgba(37, 99, 235, 0.22); --tk-bubble-client-tag-line:rgba(37, 99, 235, 0.40); /* ━━━━━ TICKETS · DIFF (DARK) ━━━━━ */ --tk-diff-from-bg: rgba(220, 38, 38, 0.18); --tk-diff-from-fg: #FCA5A5; --tk-diff-from-line: rgba(220, 38, 38, 0.36); --tk-diff-from-strike:rgba(248, 113, 113, 0.50); --tk-diff-to-bg: rgba(16, 185, 129, 0.18); --tk-diff-to-fg: #6EE7B7; --tk-diff-to-line: rgba(16, 185, 129, 0.36); --tk-st-done-strike: rgba(110, 231, 183, 0.45); /* ━━━━━ TICKETS · AI SUMMARY GRADIENT (DARK) ━━━━━ Translucent violet wash on the dark surface — keeps the rail vivid while letting the card sit naturally on the dark background. */ --tk-ai-card-bg: linear-gradient(180deg, rgba(99, 102, 241, 0.10), var(--rz-base-background-color)); --tk-ai-rail: linear-gradient(180deg, #818CF8, #22D3EE); --tk-ai-ico-bg: linear-gradient(135deg, #818CF8, #A78BFA); /* ━━━━━ SUPERSHEET REDESIGN TOKENS (DARK) ━━━━━ Most --ss-* tokens cascade from --rz-base-* which already flip in this block; only the floating shadow and the success-soft tint need explicit overrides for dark backgrounds. Type-icon hues stay legible on dark. */ --ss-success-soft: rgba(16, 185, 129, 0.12); --ss-shadow-pop: 0 8px 24px -4px rgba(0,0,0,.55), 0 4px 8px -2px rgba(0,0,0,.32); } /* ━━━━━ DARK MODE: Button Overrides ━━━━━ */ :root.rz-dark, [data-bs-theme="dark"], html[data-bs-theme="dark"] { /* Secondary buttons should have white/light text in dark mode */ --rz-button-secondary-text: #F8FAFC; --rz-button-secondary-border: #475569; --rz-button-secondary-hover-bg: #334155; --rz-button-secondary-hover-border: #64748B; } /* Dark mode button text overrides */ :root.rz-dark .rz-button-secondary, :root.rz-dark .rz-button.rz-variant-filled.rz-secondary, :root.rz-dark .rz-button.rz-variant-flat.rz-secondary, :root.rz-dark .rz-button.rz-variant-outlined, [data-bs-theme="dark"] .rz-button-secondary, [data-bs-theme="dark"] .rz-button.rz-variant-filled.rz-secondary, [data-bs-theme="dark"] .rz-button.rz-variant-flat.rz-secondary, [data-bs-theme="dark"] .rz-button.rz-variant-outlined { color: #F8FAFC !important; border-color: #475569 !important; } :root.rz-dark .rz-button-secondary:hover, :root.rz-dark .rz-button.rz-variant-filled.rz-secondary:hover, :root.rz-dark .rz-button.rz-variant-flat.rz-secondary:hover, :root.rz-dark .rz-button.rz-variant-outlined:hover, [data-bs-theme="dark"] .rz-button-secondary:hover, [data-bs-theme="dark"] .rz-button.rz-variant-filled.rz-secondary:hover, [data-bs-theme="dark"] .rz-button.rz-variant-flat.rz-secondary:hover, [data-bs-theme="dark"] .rz-button.rz-variant-outlined:hover { background: #334155 !important; border-color: #64748B !important; color: #FFFFFF !important; } /* Dark mode light/ghost button text */ :root.rz-dark .rz-button-light, :root.rz-dark .rz-button.rz-variant-text, [data-bs-theme="dark"] .rz-button-light, [data-bs-theme="dark"] .rz-button.rz-variant-text { color: #E2E8F0 !important; } :root.rz-dark .rz-button-light:hover, :root.rz-dark .rz-button.rz-variant-text:hover, [data-bs-theme="dark"] .rz-button-light:hover, [data-bs-theme="dark"] .rz-button.rz-variant-text:hover { background: #1E293B !important; color: #FFFFFF !important; } /* ═══════════════════════════════════════════════════════════════════════════════ GLOBAL TYPOGRAPHY ═══════════════════════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } body { font-family: var(--rz-text-font-family); font-size: var(--rz-body-font-size); line-height: var(--rz-body-line-height); color: var(--rz-text-color); background-color: var(--rz-body-background-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; text-rendering: optimizeLegibility; } /* ━━━━━ BRAND SELECTION COLOR ━━━━━ */ ::selection { background: var(--rz-primary); color: var(--rz-on-primary); } ::-moz-selection { background: var(--rz-primary); color: var(--rz-on-primary); } /* ━━━━━ GLOBAL LINK POLISH ━━━━━ */ a { transition: color var(--rz-transition), opacity var(--rz-transition); } /* ━━━━━ HEADING TYPOGRAPHY - Corporate Style ━━━━━ El !important que llevaban estos font-size SOBRABA y HACÍA DAÑO, las dos cosas a la vez: - Sobraba contra el vendor. theme.css se carga DESPUÉS de material-base.css (ver App.razor), así que a igualdad de especificidad ya ganaba por orden. - Hacía daño contra las páginas. `h3` es (0,0,1), lo más flojo que existe; con !important delante se volvía inbatible salvo escalando a !important también. El detalle de incidencia pedía 11px para `.tk-sec-h` (0,2,0) y se renderizaba a 18px: sus rótulos de sección salían del tamaño de un titular dentro de un cajón lateral, y el título del ticket, que pedía 17px, salía a 22px. Ninguna de las dos hojas estaba mal escrita — la escala global no dejaba a nadie declarar la suya. Sin !important la escala sigue siendo la del portal donde nadie dice otra cosa, y una superficie con sistema tipográfico propio puede declararlo con una simple clase. Medido en la app: 8 encabezados cambian, los 8 buscados. */ h1, .rz-text-h1, .h1 { font-size: 1.75rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--rz-text-title-color); } h2, .rz-text-h2, .h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--rz-text-title-color); } h3, .rz-text-h3, .h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--rz-text-title-color); } h4, .rz-text-h4, .h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--rz-text-title-color); } h5, .rz-text-h5, .h5 { font-size: 0.9375rem; font-weight: 600; line-height: 1.45; color: var(--rz-text-title-color); } h6, .rz-text-h6, .h6 { font-size: 0.875rem; font-weight: 600; line-height: 1.5; color: var(--rz-text-title-color); } /* Contrapeso al punto anterior. El portal escribe sus subtítulos como ``, que Radzen renderiza como
CON la clase .rz-text-subtitle1. Mientras `h6` llevaba !important ganaba al vendor por la fuerza; al quitarlo, la clase (0,1,0) pasaría a ganarle al elemento (0,0,1) y esos subtítulos crecerían de 14px a los 16px de material-base — cinco de ellos sólo en la pantalla de administración de incidencias. Declarando aquí el tamaño que el portal ya venía mostrando, la escala de subtítulos deja de depender de un !important en otra regla. */ .rz-text-subtitle1 { font-size: 0.875rem; } .rz-text-subtitle2 { font-size: 0.8125rem; } /* ═══════════════════════════════════════════════════════════════════════════════ PAGE HEADERS - Enterprise Style ═══════════════════════════════════════════════════════════════════════════════ */ .page-header { margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--rz-base-200); } .page-title { font-size: 1.5rem; font-weight: 600; color: var(--rz-text-title-color); letter-spacing: -0.02em; margin: 0 0 var(--space-2) 0; line-height: 1.3; } .page-subtitle { font-size: 0.9375rem; color: var(--rz-text-secondary-color); margin: 0; line-height: 1.5; } .page-breadcrumb { font-size: 0.8125rem; color: var(--rz-text-tertiary-color); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); } .page-breadcrumb a { color: var(--rz-text-secondary-color); text-decoration: none; transition: color var(--rz-transition); } .page-breadcrumb a:hover { color: var(--rz-primary); } .page-breadcrumb .separator { color: var(--rz-base-300); } /* Section Headers */ .section-header { margin-bottom: var(--space-4); } .section-title { font-size: 0.9375rem; font-weight: 600; color: var(--rz-text-title-color); letter-spacing: -0.01em; margin: 0 0 var(--space-1) 0; } .section-subtitle { font-size: 0.8125rem; color: var(--rz-text-secondary-color); margin: 0; } /* ═══════════════════════════════════════════════════════════════════════════════ LAYOUT GRID - Sidebar full height, header right of sidebar ═══════════════════════════════════════════════════════════════════════════════ */ .rz-layout { grid-template-columns: auto 1fr !important; grid-template-rows: auto 1fr !important; /* Explícito, no heredado: Radzen pinta el layout con su propio color base y dejaba un rectángulo blanco por debajo del lienzo gris. */ background: var(--rz-layout-body-background-color); } /* Shell tipo Adobe: el header cruza TODO el ancho y el sidebar cuelga DEBAJO. Antes el sidebar ocupaba la columna entera (grid-row: 1 / -1) y el header empezaba a su derecha, partido. Con la marca dentro del sidebar, la cabecera quedaba descosida en dos piezas con dos fondos distintos. Ahora la marca vive en el header, pegada al botón de plegar, y la primera fila es una sola banda continua de borde a borde. Es el mismo arreglo que Reporbia. */ .rz-layout > .rz-header { grid-row: 1 !important; grid-column: 1 / -1 !important; } .rz-layout > .rz-sidebar { grid-row: 2 !important; grid-column: 1 !important; } .rz-layout > .rz-body { grid-row: 2 !important; grid-column: 2 !important; /* La esquina donde el lienzo se encuentra con el header y el sidebar va redondeada: el gris del shell asoma por el hueco y el contenido se lee encajado dentro de la aplicación, no pegado a tope contra dos bordes rectos. Solo esa esquina — las otras tres tocan el borde de la ventana. */ border-start-start-radius: 20px; } /* ═══════════════════════════════════════════════════════════════════════════════ HEADER - Deep Indigo Gradient ═══════════════════════════════════════════════════════════════════════════════ */ /* Sin borde inferior a propósito: header y sidebar son la MISMA superficie y una línea entre ellos partiría la esquina superior izquierda justo por donde debe leerse continua. Lo que separa el shell del contenido es el cambio a blanco del lienzo, no un trazo. */ .rz-header { background: var(--rz-header-background-color) !important; box-shadow: var(--rz-header-shadow) !important; color: var(--rz-header-color) !important; min-height: 56px; display: flex; align-items: center; } /* Marca en el header: logo + nombre, con separador antes del buscador. Vivía dentro del sidebar; al cruzar el header todo el ancho tiene que estar aquí, o la primera fila arranca sin identidad. */ .header-brand { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; /* Aire por delante: la marca venia pegada a la hamburguesa, y desde que el boton se centro en el carril de 84px quedaban los dos casi tocandose. */ margin-inline-start: 0.75rem; padding-inline-end: 1rem; margin-inline-end: 0.75rem; } .header-brand-text { font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; white-space: nowrap; } /* Plegar/fijar el sidebar: ahora es lo primero de la banda, en el extremo izquierdo real, no un botón perdido dentro del sidebar. */ .header-rail-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: inherit; opacity: 0.75; } .header-rail-toggle:hover { background: var(--rz-header-hover-background-color); opacity: 1; } :root.rz-dark .rz-header { background: var(--rz-header-background-color) !important; box-shadow: var(--rz-header-shadow) !important; } /* Header icons - always use header color (white on dark header) */ .header-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .rz-header .rz-button.rz-variant-text { color: var(--rz-header-color) !important; background: transparent !important; } .rz-header .rz-button.rz-variant-text:hover { background: transparent !important; color: var(--rz-header-color) !important; opacity: 0.8; } .rz-header .rz-button.rz-variant-text .rz-button-icon, .rz-header .rz-button.rz-variant-text .material-icons { color: var(--rz-header-color) !important; } /* Profile menu in header */ .rz-header .profile-menu-custom, .rz-header .rz-profilemenu { color: var(--rz-header-color) !important; } /* Header icon buttons - clean corporate style without hover background */ .rz-header .header-icon-btn.rz-button, .rz-header .notif-bell-btn.rz-button { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--rz-header-color) !important; padding: 6px !important; min-width: 36px; min-height: 36px; width: 36px; height: 36px; } .rz-header .header-icon-btn.rz-button:hover, .rz-header .header-icon-btn.rz-button:focus, .rz-header .notif-bell-btn.rz-button:hover, .rz-header .notif-bell-btn.rz-button:focus { background: transparent !important; box-shadow: none !important; } .rz-header .header-icon-btn.rz-button:hover .rz-icon, .rz-header .header-icon-btn.rz-button:hover .rzi, .rz-header .notif-bell-btn.rz-button:hover .rz-icon, .rz-header .notif-bell-btn.rz-button:hover .rzi { color: var(--rz-primary) !important; } /* Logo Area */ .header-logo { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; } .header-logo img { height: 28px; width: auto; } /* ═══════════════════════════════════════════════════════════════════════════════ SIDEBAR - Clean & Corporate ═══════════════════════════════════════════════════════════════════════════════ */ .rz-sidebar { background: var(--rz-sidebar-background-color) !important; border-right: 1px solid var(--rz-base-200) !important; transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* Collapsed sidebar - centered icons with refined spacing */ .sidebar-collapsed .rz-navigation-item-link .rzi, .sidebar-collapsed .rz-navigation-item-link .rz-navigation-item-icon, .sidebar-collapsed .rz-navigation-item-link .material-icons { color: var(--rz-panel-menu-icon-color, var(--rz-panel-menu-item-color)) !important; } .sidebar-collapsed .rz-navigation-item-link:hover .rzi, .sidebar-collapsed .rz-navigation-item-link:hover .rz-navigation-item-icon, .sidebar-collapsed .rz-navigation-item-link:hover .material-icons { color: var(--rz-panel-menu-item-active-color) !important; transform: scale(1.12); } .sidebar-collapsed .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi, .sidebar-collapsed .rz-navigation-item-wrapper-active .rz-navigation-item-link .rz-navigation-item-icon, .sidebar-collapsed .rz-navigation-item-wrapper-active .rz-navigation-item-link .material-icons { color: var(--rz-panel-menu-icon-active-color, var(--rz-panel-menu-item-active-color)) !important; } .sidebar-collapsed .rz-navigation-item-wrapper-active .rz-navigation-item-link { background: var(--rz-panel-menu-item-active-background-color) !important; } /* Expanded sidebar icons - use accent color */ .sidebar-expanded .rz-navigation-item-link .rzi, .sidebar-expanded .rz-navigation-item-link .rz-navigation-item-icon, .sidebar-expanded .rz-navigation-item-link .material-icons { color: var(--rz-panel-menu-icon-color, var(--rz-panel-menu-item-color)) !important; font-size: var(--rz-panel-menu-icon-size, 20px) !important; min-width: 22px; text-align: center; } .sidebar-expanded .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi, .sidebar-expanded .rz-navigation-item-wrapper-active .rz-navigation-item-link .rz-navigation-item-icon, .sidebar-expanded .rz-navigation-item-wrapper-active .rz-navigation-item-link .material-icons { color: var(--rz-panel-menu-icon-active-color, var(--rz-panel-menu-item-active-color)) !important; } /* Panel menu item text - darker and more corporate */ .rz-navigation-item-link .rz-navigation-item-text { font-weight: 500; letter-spacing: -0.01em; } .rz-navigation-item-wrapper-active .rz-navigation-item-link .rz-navigation-item-text { font-weight: 600; } /* Panel menu group headers (parent items) — Jira-style section labels */ .rz-navigation-item-link[aria-expanded] .rz-navigation-item-text { font-weight: 600; text-transform: none; letter-spacing: -0.005em; font-size: 0.875rem; } /* Panel menu sub-items — Jira-style almost no indent */ .rz-panel-menu .rz-navigation-menu { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; padding-inline-start: 0 !important; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link { padding-left: 0.75rem !important; padding-inline-start: 0.75rem !important; font-size: 0.8125rem; padding-block: 7px; } /* Project template items: strip all padding from the Radzen link wrapper */ .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link:has(.sidebar-project-item), .rz-navigation-item-link:has(.sidebar-project-item) { padding: 2px 4px !important; padding-inline-start: 4px !important; background: transparent !important; } /* Section label divs inside sub-menus: no extra indent */ .rz-panel-menu .sidebar-section-label { padding-left: 4px; margin-left: 0; } /* Sub-menu list items: remove Radzen default indent */ .rz-panel-menu .rz-navigation-menu .rz-navigation-item { padding-left: 0 !important; margin-left: 0 !important; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link .rzi, .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link .rz-navigation-item-icon, .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link .material-icons { font-size: 16px !important; color: var(--rz-text-secondary-color) !important; } .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-link .rzi, .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-link .rz-navigation-item-icon, .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-link .material-icons { color: var(--rz-panel-menu-icon-active-color, var(--rz-panel-menu-item-active-color)) !important; } /* Panel menu item transitions for smooth hover */ .rz-navigation-item, .rz-navigation-item-link { transition: background-color var(--rz-transition), color var(--rz-transition); } .rz-navigation-item .rzi, .rz-navigation-item .rz-navigation-item-icon, .rz-navigation-item .material-icons, .rz-navigation-item-link .rzi, .rz-navigation-item-link .rz-navigation-item-icon, .rz-navigation-item-link .material-icons { transition: color var(--rz-transition), transform var(--rz-transition-fast); color: var(--rz-panel-menu-icon-color, var(--rz-panel-menu-item-color)); } /* Clean Jira-style: no icon scale on hover */ /* Active menu item indicator */ .rz-panel-menu .rz-navigation-item-wrapper-active { position: relative; } .rz-panel-menu .rz-navigation-item-wrapper-active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 24px; background: linear-gradient(180deg, var(--rz-primary) 0%, var(--dalatic-accent-500, #8B5CF6) 100%); border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(79, 70, 229, 0.3); } /* Active item background with subtle gradient */ .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-link { background: var(--rz-panel-menu-item-active-background-color) !important; color: var(--rz-panel-menu-item-active-color) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ BUTTONS - Enterprise Polish ═══════════════════════════════════════════════════════════════════════════════ */ /* Primary Button */ .rz-button-primary, .rz-button.rz-variant-filled.rz-primary, .rz-button.rz-variant-flat.rz-primary { background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%) !important; border: none !important; color: var(--rz-on-primary) !important; font-weight: 500; letter-spacing: 0.01em; box-shadow: var(--rz-shadow-1); transition: all var(--rz-transition); } .rz-button-primary:hover, .rz-button.rz-variant-filled.rz-primary:hover, .rz-button.rz-variant-flat.rz-primary:hover { background: linear-gradient(135deg, var(--rz-primary-dark) 0%, var(--rz-primary-darker) 100%) !important; box-shadow: var(--rz-shadow-4); transform: translateY(-1px); } .rz-button-primary:active, .rz-button.rz-variant-filled.rz-primary:active, .rz-button.rz-variant-flat.rz-primary:active { background: linear-gradient(135deg, var(--rz-primary-darker) 0%, var(--dalatic-primary-900) 100%) !important; transform: translateY(0); box-shadow: var(--rz-shadow-1); } /* Secondary Button */ .rz-button-secondary, .rz-button.rz-variant-filled.rz-secondary, .rz-button.rz-variant-flat.rz-secondary, .rz-button.rz-variant-outlined { background: transparent !important; border: 1px solid var(--rz-base-300) !important; color: var(--rz-text-color) !important; font-weight: 500; transition: all var(--rz-transition); } .rz-button-secondary:hover, .rz-button.rz-variant-filled.rz-secondary:hover, .rz-button.rz-variant-flat.rz-secondary:hover, .rz-button.rz-variant-outlined:hover { background: var(--rz-button-hover-bg) !important; border-color: var(--rz-button-hover-border) !important; } /* Ghost/Light Button */ .rz-button-light, .rz-button.rz-variant-text { background: transparent !important; border: none !important; color: var(--rz-text-secondary-color) !important; font-weight: 500; } .rz-button-light:hover, .rz-button.rz-variant-text:hover { background: var(--rz-button-hover-bg) !important; color: var(--rz-text-color) !important; } /* Icon Button */ .btn-icon { width: 36px; height: 36px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rz-border-radius); transition: all var(--rz-transition); } .btn-icon-sm { width: 32px; height: 32px; } .btn-icon-lg { width: 40px; height: 40px; } /* ═══════════════════════════════════════════════════════════════════════════════ GLOBAL ICON HOVER STYLES - Smooth & Professional UX ═══════════════════════════════════════════════════════════════════════════════ */ /* Base transition for all Radzen icons inside interactive elements */ .rz-button .rzi, .rz-button .material-icons, .rz-button .rz-button-icon, .btn-icon .rzi, .btn-icon .material-icons, .rz-link .rzi, .rz-link .material-icons, a .rzi, a .material-icons, button .rzi, button .material-icons { transition: color var(--rz-transition), transform var(--rz-transition-fast); } /* Subtle scale effect on hover for icon-only buttons */ .btn-icon:hover .rzi, .btn-icon:hover .material-icons, .rz-button.rz-variant-text:hover .rzi, .rz-button.rz-variant-text:hover .material-icons, .rz-button[style*="padding: 0"]:hover .rzi, .rz-button[style*="padding: 0"]:hover .material-icons { transform: scale(1.08); } /* Icon-only buttons (small action icons) - better hover area and feedback */ .rz-button.rz-variant-flat.rz-light, .rz-button.rz-variant-flat.rz-secondary, .rz-button.rz-variant-text.rz-light, .rz-button.rz-variant-text.rz-secondary, .rz-button.rz-variant-text.rz-base { transition: background-color var(--rz-transition), color var(--rz-transition), box-shadow var(--rz-transition); } .rz-button.rz-variant-flat.rz-light:hover, .rz-button.rz-variant-flat.rz-secondary:hover, .rz-button.rz-variant-text.rz-light:hover, .rz-button.rz-variant-text.rz-secondary:hover, .rz-button.rz-variant-text.rz-base:hover { background-color: var(--rz-base-100) !important; } /* Focus states for keyboard accessibility */ .rz-button:focus-visible .rzi, .rz-button:focus-visible .material-icons, .btn-icon:focus-visible .rzi, .btn-icon:focus-visible .material-icons { transform: scale(1.08); } /* Active/pressed state - subtle shrink for tactile feedback */ .rz-button:active .rzi, .rz-button:active .material-icons, .btn-icon:active .rzi, .btn-icon:active .material-icons { transform: scale(0.95); transition: transform 50ms ease-out; } /* Icon-only menu buttons (three dots) - transparent background, primary color icons */ .rz-menu > .rz-navigation-item-wrapper > .rz-navigation-item-link, .rz-menu .rz-navigation-item-link[aria-haspopup="true"] { background: transparent !important; border: none !important; box-shadow: none !important; transition: background-color var(--rz-transition), transform var(--rz-transition-fast); } .rz-menu > .rz-navigation-item-wrapper > .rz-navigation-item-link .rzi, .rz-menu > .rz-navigation-item-wrapper > .rz-navigation-item-link .material-icons, .rz-menu .rz-navigation-item-link[aria-haspopup="true"] .rzi, .rz-menu .rz-navigation-item-link[aria-haspopup="true"] .material-icons { transition: color var(--rz-transition), transform var(--rz-transition-fast); } .rz-menu > .rz-navigation-item-wrapper > .rz-navigation-item-link:hover, .rz-menu .rz-navigation-item-link[aria-haspopup="true"]:hover { background: var(--rz-base-100) !important; border-radius: var(--rz-border-radius); } .rz-menu > .rz-navigation-item-wrapper > .rz-navigation-item-link:hover .rzi, .rz-menu > .rz-navigation-item-wrapper > .rz-navigation-item-link:hover .material-icons, .rz-menu .rz-navigation-item-link[aria-haspopup="true"]:hover .rzi, .rz-menu .rz-navigation-item-link[aria-haspopup="true"]:hover .material-icons { transform: scale(1.08); color: var(--rz-primary); } /* Light buttons with Text variant - use primary color for icons, not white */ .rz-button.rz-light.rz-variant-text, .rz-button.rz-secondary.rz-variant-text { background: transparent !important; border: none !important; color: var(--rz-text-secondary-color) !important; transition: background-color var(--rz-transition), color var(--rz-transition); } .rz-button.rz-light.rz-variant-text .rz-button-icon, .rz-button.rz-light.rz-variant-text .material-icons, .rz-button.rz-secondary.rz-variant-text .rz-button-icon, .rz-button.rz-secondary.rz-variant-text .material-icons { color: var(--rz-text-secondary-color) !important; transition: color var(--rz-transition), transform var(--rz-transition-fast); } .rz-button.rz-light.rz-variant-text:hover, .rz-button.rz-secondary.rz-variant-text:hover { background: var(--rz-base-100) !important; color: var(--rz-primary) !important; } .rz-button.rz-light.rz-variant-text:hover .rz-button-icon, .rz-button.rz-light.rz-variant-text:hover .material-icons, .rz-button.rz-secondary.rz-variant-text:hover .rz-button-icon, .rz-button.rz-secondary.rz-variant-text:hover .material-icons { color: var(--rz-primary) !important; transform: scale(1.08); } /* ═══════════════════════════════════════════════════════════════════════════════ PROFILE MENU ═══════════════════════════════════════════════════════════════════════════════ */ ul.rz-profilemenu, ul.rz-profile-menu { box-sizing: border-box !important; list-style: none !important; margin: 0 !important; padding: 0 !important; display: inline-block !important; background-color: transparent !important; border: none !important; position: relative !important; z-index: 3 !important; color: var(--rz-profile-menu-color) !important; } .rz-profilemenu .rz-button, .rz-profile-menu .rz-button { background-color: transparent !important; color: var(--rz-profile-menu-item-color) !important; border: none !important; transition: all var(--rz-transition); } .rz-profilemenu .rz-button:hover, .rz-profile-menu .rz-button:hover { background-color: var(--rz-profile-menu-hover-background-color) !important; color: var(--rz-profile-menu-item-hover-color) !important; } .rz-profilemenu .rz-dropdown-panel, .rz-profile-menu .rz-dropdown-panel { background: var(--rz-profile-menu-background-color) !important; border: 1px solid var(--rz-base-200) !important; border-radius: var(--rz-border-radius-lg) !important; overflow: hidden; } /* Animation ONLY on open state — must not override Radzen's .rz-close animation */ .rz-profilemenu .rz-dropdown-panel.rz-open, .rz-profile-menu .rz-dropdown-panel.rz-open { animation: profileMenuSlideIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes profileMenuSlideIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .rz-profilemenu .rz-dropdown-item, .rz-profile-menu .rz-dropdown-item { color: var(--rz-profile-menu-item-color) !important; transition: all var(--rz-transition); } .rz-profilemenu .rz-dropdown-item:hover, .rz-profile-menu .rz-dropdown-item:hover { background: var(--rz-profile-menu-hover-background-color) !important; color: var(--rz-profile-menu-item-hover-color) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ CARDS - Premium Enterprise Surfaces ═══════════════════════════════════════════════════════════════════════════════ */ .rz-card, .card, .dashboard-card { background: var(--rz-card-background-color) !important; border: var(--rz-card-border) !important; border-radius: var(--rz-card-border-radius) !important; box-shadow: var(--rz-shadow-xs) !important; transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .rz-card:hover, .card:hover, .dashboard-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important; border-color: var(--rz-base-300) !important; } .card-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--rz-base-100); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 0.875rem; font-weight: 600; color: var(--rz-text-title-color); margin: 0; } .card-body { padding: var(--space-5); } .card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--rz-base-100); background: var(--rz-base-50); } /* ═══════════════════════════════════════════════════════════════════════════════ STAT CARDS - Dashboard Metrics ═══════════════════════════════════════════════════════════════════════════════ */ .stat-card { background: var(--rz-base-background-color); border: 1px solid var(--rz-base-200); border-radius: var(--rz-border-radius-lg); padding: var(--space-6); position: relative; overflow: hidden; transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); border-color: var(--rz-base-300); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rz-primary) 0%, var(--rz-info) 100%); opacity: 0; transition: opacity var(--rz-transition); } .stat-card:hover::before { opacity: 1; } .stat-card-icon { width: 48px; height: 48px; border-radius: var(--rz-border-radius-lg); display: flex; align-items: center; justify-content: center; background: var(--rz-primary-lighter); color: var(--rz-primary); margin-bottom: var(--space-4); } .stat-card-icon.violet { background: var(--rz-info-lighter); color: var(--rz-info); } .stat-card-icon.success { background: var(--rz-success-lighter); color: var(--rz-success); } .stat-card-icon.warning { background: var(--rz-warning-lighter); color: var(--rz-warning); } .stat-card-value { font-size: 1.625rem; font-weight: 600; color: var(--rz-text-title-color); line-height: 1.1; margin-bottom: var(--space-2); letter-spacing: -0.01em; } .stat-card-label { font-size: 0.8125rem; font-weight: 500; color: var(--rz-text-secondary-color); text-transform: uppercase; letter-spacing: 0.05em; } .stat-card-trend { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 0.8125rem; font-weight: 500; margin-top: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: var(--rz-border-radius-sm); } .stat-card-trend.positive { background: var(--rz-success-lighter); color: var(--rz-success); } .stat-card-trend.negative { background: var(--rz-danger-lighter); color: var(--rz-danger); } /* ═══════════════════════════════════════════════════════════════════════════════ DATA TABLES - Enterprise Grid ═══════════════════════════════════════════════════════════════════════════════ */ .rz-datatable, .rz-data-grid { border: 1px solid var(--rz-base-200) !important; border-radius: var(--rz-border-radius-lg) !important; overflow: hidden; background: var(--rz-base-background-color) !important; width: 100%; max-width: 100%; table-layout: auto; } /* Prevent horizontal overflow on grid wrapper */ .rz-data-grid-data { overflow-x: auto; max-width: 100%; } /* Ensure columns don't exceed container */ .rz-data-grid .rz-grid-table { table-layout: auto; width: 100%; min-width: 100%; } /* La cabecera va por su token, no por --rz-base-50: ese es el gris neutro que usa media aplicación, así que subirlo para que la tabla se lea sobre lienzo blanco habría teñido también menús, píldoras y hovers. El token de rejilla es el que se puede mover sin arrastrar nada más. */ /* OJO con la lista de selectores: `.rz-data-grid .rz-data-grid-header` NO existe en el DOM que genera esta versión de Radzen — comprobado en la app, no encuentra ningún elemento en ninguna pantalla. La cabecera real de un RadzenDataGrid son los de `.rz-grid-table thead`, que es lo que hay que nombrar aquí; si no, esta regla sólo llega al RadzenDataTable y los grids quedan con lo que traiga material-base. El rótulo iba en color secundario sobre fondo claro: se leía como texto deshabilitado. Sube a color de título, que es lo que corresponde a la fila que nombra las columnas. */ .rz-datatable thead tr th, .rz-data-grid .rz-grid-table thead th, .rz-data-grid .rz-data-grid-header { background: var(--rz-grid-header-background-color) !important; color: var(--rz-text-title-color) !important; font-weight: 600 !important; font-size: var(--rz-grid-header-font-size) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border-bottom: 1px solid var(--rz-base-300) !important; } /* El relleno, UNA vez y en el sitio correcto. En el DataTable lo lleva el propio . En el DataGrid NO: Radzen le pone `padding: 0` y se lo da a un envoltorio interno via --rz-grid-header-cell-padding. Poner relleno en los dos era sumar las dos capas y por eso la fila salia al doble de alto. */ .rz-datatable thead tr th { padding: var(--rz-grid-header-padding) !important; } .rz-data-grid .rz-grid-table thead th { padding: 0 !important; } /* El texto del rótulo hereda el interlineado del token, no el 1.5 del body: 24px de interlineado para 12px de letra es lo que estiraba la fila. */ .rz-data-grid .rz-grid-table thead th .rz-column-title { line-height: var(--rz-grid-header-line-height); } .rz-datatable tbody tr td, .rz-data-grid .rz-data-grid-data td { border-bottom: var(--rz-grid-cell-border) !important; padding: var(--rz-grid-cell-padding) !important; font-size: var(--rz-grid-cell-font-size) !important; line-height: 1.4 !important; } /* Force compact text inside DataGrid cells */ .rz-data-grid td .rz-text, .rz-data-grid td .rz-text-body1, .rz-data-grid td .rz-text-body2, .rz-datatable td .rz-text, .rz-datatable td .rz-text-body1, .rz-datatable td .rz-text-body2 { font-size: var(--rz-grid-cell-font-size) !important; line-height: 1.35 !important; margin: 0 !important; } /* Force compact spans and divs in grid cells */ .rz-data-grid td span, .rz-data-grid td div, .rz-datatable td span, .rz-datatable td div { font-size: inherit; } /* Badges inside grids - extra compact */ .rz-data-grid td .rz-badge, .rz-datatable td .rz-badge { font-size: 0.625rem !important; padding: 2px 6px !important; } .rz-datatable tbody tr:last-child td { border-bottom: none !important; } .rz-datatable tbody tr { transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .rz-datatable tbody tr:hover td { background: var(--rz-base-50) !important; } /* DataGrid row polish */ .rz-data-grid .rz-grid-table tbody tr { transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .rz-data-grid .rz-grid-table tbody tr:hover td { background: var(--rz-base-50) !important; } /* Row selection */ .rz-datatable tbody tr.rz-state-selected td { background: var(--rz-primary-lighter) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ DATAGRID COMPACT STYLES - Corporate Density ═══════════════════════════════════════════════════════════════════════════════ */ /* Compact row heights */ .rz-data-grid .rz-grid-table tbody tr { height: auto !important; } /* Filter row compact */ .rz-data-grid .rz-filter-row th { padding: 0.375rem 0.5rem !important; } .rz-data-grid .rz-filter-row .rz-textbox, .rz-data-grid .rz-filter-row .rz-dropdown { font-size: 0.75rem !important; min-height: 28px !important; height: 28px !important; } /* Paginator compact */ .rz-data-grid .rz-paginator, .rz-datatable .rz-paginator { padding: 0.375rem 0.5rem !important; font-size: 0.6875rem !important; gap: 0.25rem !important; } .rz-data-grid .rz-paginator .rz-paginator-page, .rz-data-grid .rz-paginator .rz-paginator-first, .rz-data-grid .rz-paginator .rz-paginator-prev, .rz-data-grid .rz-paginator .rz-paginator-next, .rz-data-grid .rz-paginator .rz-paginator-last, .rz-datatable .rz-paginator .rz-paginator-page, .rz-datatable .rz-paginator .rz-paginator-first, .rz-datatable .rz-paginator .rz-paginator-prev, .rz-datatable .rz-paginator .rz-paginator-next, .rz-datatable .rz-paginator .rz-paginator-last { min-width: 24px !important; height: 24px !important; font-size: 0.6875rem !important; } .rz-data-grid .rz-pager-summary, .rz-datatable .rz-pager-summary { font-size: 0.6875rem !important; } /* Empty message compact */ .rz-data-grid .rz-datatable-emptymessage td { padding: 1.5rem !important; font-size: var(--rz-grid-cell-font-size) !important; } /* Column picker compact */ .rz-data-grid .rz-column-picker-popup { font-size: 0.8125rem !important; } /* Grouping row compact */ .rz-data-grid .rz-group-row td { font-size: var(--rz-grid-cell-font-size) !important; padding: 0.375rem 0.75rem !important; } /* Sortable column icon compact */ .rz-data-grid .rz-sortable-column .rz-cell-sort-icon { font-size: 0.75rem !important; } /* RadzenStack inside grid cells - compact */ .rz-data-grid td .rz-stack, .rz-datatable td .rz-stack { gap: 0.125rem !important; } /* All text content in grid cells */ .rz-data-grid .rz-grid-table td, .rz-data-grid .rz-grid-table td * { font-size: var(--rz-grid-cell-font-size) !important; } /* Exclude icons from font-size override */ .rz-data-grid .rz-grid-table td .rz-icon, .rz-data-grid .rz-grid-table td .material-icons, .rz-data-grid .rz-grid-table td [class*="rz-icon"], .rz-data-grid .rz-grid-table td .rzi { font-size: 14px !important; transition: color var(--rz-transition), transform var(--rz-transition-fast); } /* Grid action buttons hover effect */ .rz-data-grid .rz-grid-table td .rz-button:hover .rz-icon, .rz-data-grid .rz-grid-table td .rz-button:hover .material-icons, .rz-data-grid .rz-grid-table td .rz-button:hover .rzi { transform: scale(1.12); color: var(--rz-primary); } /* ═══════════════════════════════════════════════════════════════════════════════ BADGES - Refined Status Indicators ═══════════════════════════════════════════════════════════════════════════════ */ .badge, .rz-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 6px; border-radius: 9999px; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.01em; text-transform: capitalize; border: none; line-height: 1.3; } /* Status Badges */ .badge-active, .badge-status-active { background: rgba(5, 150, 105, 0.08); color: #059669; } .badge-pending, .badge-status-pending { background: rgba(79, 70, 229, 0.08); color: #4F46E5; } .badge-inactive, .badge-status-inactive { background: var(--rz-base-100); color: var(--rz-base-500); } .badge-warning, .badge-status-suspended { background: rgba(217, 119, 6, 0.08); color: #B45309; } .badge-danger, .badge-status-expired, .badge-status-cancelled { background: rgba(220, 38, 38, 0.08); color: #DC2626; } .badge-info, .badge-status-info { background: rgba(124, 58, 237, 0.08); color: #7C3AED; } /* Type Badges */ .badge-license-type { background: var(--rz-base-100); color: var(--rz-base-600); text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.03em; } /* ═══════════════════════════════════════════════════════════════════════════════ KANBAN / TASK CARDS ═══════════════════════════════════════════════════════════════════════════════ */ .kanban-board { display: flex; gap: var(--space-5); overflow-x: auto; padding-bottom: var(--space-4); } .kanban-column { flex: 0 0 320px; background: var(--rz-base-50); border-radius: var(--rz-border-radius-lg); padding: var(--space-4); border: 1px solid var(--rz-base-200); } .kanban-column-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-2) var(--space-4); } .kanban-column-title { font-weight: 600; font-size: 0.875rem; color: var(--rz-text-title-color); display: flex; align-items: center; gap: var(--space-2); } .kanban-column-count { background: var(--rz-base-200); color: var(--rz-text-secondary-color); padding: 2px 8px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; } .task-card { background: var(--rz-base-background-color); border: 1px solid var(--rz-base-200); border-radius: var(--rz-border-radius); padding: var(--space-4); margin-bottom: var(--space-3); cursor: grab; transition: all var(--rz-transition); box-shadow: var(--rz-shadow-xs); } .task-card:hover { border-color: var(--rz-base-300); box-shadow: var(--rz-shadow-4); transform: translateY(-2px); } .task-card:active { cursor: grabbing; transform: scale(1.02); box-shadow: var(--rz-shadow-lg); } .task-card-key { font-size: 0.75rem; font-weight: 500; color: var(--rz-text-secondary-color); margin-bottom: var(--space-2); } .task-card-title { font-size: 0.875rem; font-weight: 500; color: var(--rz-text-title-color); margin-bottom: var(--space-3); line-height: 1.4; } .task-card-footer { display: flex; align-items: center; justify-content: space-between; } .task-card-assignee { width: 24px; height: 24px; border-radius: 50%; background: var(--rz-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 600; } /* Status colors for column headers */ .kanban-status-todo { border-left: 3px solid var(--rz-base-400); } .kanban-status-in-progress { border-left: 3px solid var(--rz-primary); } .kanban-status-in-review { border-left: 3px solid var(--rz-info); } .kanban-status-done { border-left: 3px solid var(--rz-success); } /* ═══════════════════════════════════════════════════════════════════════════════ FORMS & INPUTS ═══════════════════════════════════════════════════════════════════════════════ */ .rz-textbox, .rz-dropdown, .rz-datepicker, .rz-numeric, input[type="text"]:not(.rz-textbox input):not(.rz-numeric input):not(.rz-datepicker input), input[type="email"]:not(.rz-textbox input), input[type="password"]:not(.rz-textbox input), input[type="number"]:not(.rz-numeric input), textarea, select { border: 1px solid var(--rz-base-300) !important; border-radius: var(--rz-border-radius) !important; background: var(--rz-base-background-color) !important; transition: all var(--rz-transition) !important; font-size: 0.8125rem !important; } .rz-textbox:hover, .rz-dropdown:hover, input:not(.rz-textbox input):not(.rz-numeric input):not(.rz-datepicker input):hover { border-color: var(--rz-base-400) !important; } .rz-textbox:focus, .rz-dropdown:focus, input:not(.rz-textbox input):not(.rz-numeric input):not(.rz-datepicker input):focus { border-left-color: var(--rz-primary) !important; box-shadow: var(--rz-shadow-glow) !important; outline: none !important; } /* Inner inputs inside Radzen wrappers: no border */ .rz-textbox input, .rz-numeric input, .rz-datepicker input, .rz-spinner input { border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; background: transparent !important; } /* Dropdown & Autocomplete popup styling intentionally removed — Radzen 10.x ships its own dropdown-panel styling (positioning, opacity, display toggling via .rz-open/.rz-close), and overriding .rz-dropdown-panel with !important backgrounds or custom animations was interfering with the popup lifecycle in certain layouts (e.g. subagents tab inside the Settings sidebar). Leave the panel entirely to Radzen — the default look is clean and consistent with the rest of the 10.x theme. */ /* User autocomplete panel - wider for user selection */ .rz-autocomplete-panel { min-width: 280px !important; max-width: 350px !important; } .rz-autocomplete-panel .rz-autocomplete-list-item { padding: 0.5rem 0.75rem !important; white-space: normal !important; } /* User option item in autocomplete */ .rz-autocomplete-panel .user-option-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; } .rz-autocomplete-panel .user-option-item .user-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: white; flex-shrink: 0; object-fit: cover; } .rz-autocomplete-panel .user-option-item .user-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .rz-autocomplete-panel .user-option-item .user-name { font-weight: 500; color: var(--rz-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-autocomplete-panel .user-option-item .user-email { font-size: 0.75rem; color: var(--rz-text-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Dropdown item / filter styling also left to Radzen defaults — see comment above. */ /* Form Groups */ .form-group { margin-bottom: var(--space-4); } .form-label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--rz-text-color); margin-bottom: var(--space-1); } .form-label.required::after { content: '*'; color: var(--rz-danger); margin-left: var(--space-1); } .form-hint { font-size: 0.6875rem; color: var(--rz-text-tertiary-color); margin-top: var(--space-1); } /* Form Sections */ .form-section { background: var(--rz-base-background-color); border: 1px solid var(--rz-base-200); border-radius: var(--rz-border-radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); transition: border-color 0.2s ease; } .form-section:focus-within { border-color: var(--rz-primary-light); } .form-section-title { font-size: 0.875rem; font-weight: 600; color: var(--rz-text-title-color); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--rz-base-100); } /* ═══════════════════════════════════════════════════════════════════════════════ AVATARS ═══════════════════════════════════════════════════════════════════════════════ */ .avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.8125rem; background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-info) 100%); color: white; flex-shrink: 0; } .avatar-xs { width: 24px; height: 24px; font-size: 0.625rem; } .avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; } .avatar-md { width: 40px; height: 40px; font-size: 0.875rem; } .avatar-lg { width: 48px; height: 48px; font-size: 1rem; } .avatar-xl { width: 64px; height: 64px; font-size: 1.25rem; } .avatar-group { display: flex; } .avatar-group .avatar { margin-left: -8px; border: 2px solid var(--rz-base-background-color); } .avatar-group .avatar:first-child { margin-left: 0; } /* ═══════════════════════════════════════════════════════════════════════════════ IMPERSONATION BAR - Corporate Violet (not Orange) ═══════════════════════════════════════════════════════════════════════════════ */ .impersonation-bar { background: linear-gradient(90deg, var(--dalatic-accent-600) 0%, var(--dalatic-accent-700) 100%); color: #FFFFFF; padding: var(--space-2) var(--space-6); display: flex; align-items: center; justify-content: center; gap: var(--space-4); font-size: 0.8125rem; font-weight: 500; position: sticky; top: 0; z-index: 1000; } .impersonation-bar button { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: #FFFFFF; padding: var(--space-1) var(--space-4); border-radius: var(--rz-border-radius-sm); cursor: pointer; font-weight: 500; font-size: 0.75rem; transition: all var(--rz-transition); } .impersonation-bar button:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); } /* ═══════════════════════════════════════════════════════════════════════════════ SKELETON LOADING ═══════════════════════════════════════════════════════════════════════════════ */ .skeleton { background: linear-gradient( 90deg, var(--rz-base-200) 0%, var(--rz-base-100) 40%, var(--rz-base-50) 50%, var(--rz-base-100) 60%, var(--rz-base-200) 100% ); background-size: 300% 100%; animation: skeleton-shimmer 1.8s ease-in-out infinite; border-radius: var(--rz-border-radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { height: 1em; margin-bottom: var(--space-2); } .skeleton-text:last-child { width: 60%; } .skeleton-avatar { border-radius: 50%; } .skeleton-card { height: 200px; } /* ═══════════════════════════════════════════════════════════════════════════════ EMPTY STATES ═══════════════════════════════════════════════════════════════════════════════ */ .empty-state { text-align: center; padding: var(--space-12) var(--space-8); } .empty-state-icon { width: 64px; height: 64px; margin: 0 auto var(--space-5); background: var(--rz-base-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--rz-base-400); animation: emptyStatePulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes emptyStatePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.8; } } .empty-state-title { font-size: 1.125rem; font-weight: 600; color: var(--rz-text-title-color); margin-bottom: var(--space-2); } .empty-state-description { font-size: 0.875rem; color: var(--rz-text-secondary-color); max-width: 400px; margin: 0 auto var(--space-6); } /* ═══════════════════════════════════════════════════════════════════════════════ PROGRESS BARS ═══════════════════════════════════════════════════════════════════════════════ */ .rz-progressbar { background: var(--rz-base-200) !important; border-radius: 9999px !important; overflow: hidden; height: 8px !important; } .rz-progressbar-value { background: linear-gradient(90deg, var(--rz-primary) 0%, var(--rz-info) 100%) !important; border-radius: 9999px !important; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .rz-progressbar-value::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%); animation: progressShimmer 2s ease-in-out infinite; } @keyframes progressShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ═══════════════════════════════════════════════════════════════════════════════ TABS ═══════════════════════════════════════════════════════════════════════════════ */ .rz-tabs { border-bottom: 1px solid var(--rz-base-200); } .rz-tabview-nav-link { padding: var(--space-4) var(--space-5) !important; font-weight: 500 !important; color: var(--rz-text-secondary-color) !important; border-bottom: 2px solid transparent !important; transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative; } .rz-tabview-nav-link:hover { color: var(--rz-text-color) !important; background-color: var(--rz-base-50) !important; } .rz-tabview-nav-link.rz-state-active { color: var(--rz-primary) !important; border-bottom-color: var(--rz-primary) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ ALERTS / NOTIFICATIONS ═══════════════════════════════════════════════════════════════════════════════ */ .alert { padding: var(--space-4) var(--space-5); border-radius: var(--rz-border-radius); display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.875rem; } .alert-info { background: var(--rz-base-50); border: 1px solid var(--rz-base-200); color: var(--rz-text-secondary-color); } .alert-success { background: var(--rz-success-lighter); border: 1px solid rgba(5, 150, 105, 0.15); color: var(--rz-success-dark); } .alert-warning { background: var(--rz-base-50); border: 1px solid var(--rz-base-300); color: var(--rz-text-secondary-color); } .alert-danger { background: var(--rz-danger-lighter); border: 1px solid rgba(220, 38, 38, 0.15); color: var(--rz-danger-dark); } /* Radzen Alert component override - corporate minimal style */ .rz-alert { background: var(--rz-base-50) !important; border: 1px solid var(--rz-base-200) !important; color: var(--rz-text-secondary-color) !important; border-radius: var(--rz-border-radius) !important; } .rz-alert.rz-warning { background: var(--rz-base-50) !important; border: 1px solid var(--rz-base-300) !important; color: var(--rz-text-secondary-color) !important; } .rz-alert.rz-info { background: var(--rz-base-50) !important; border: 1px solid var(--rz-base-200) !important; color: var(--rz-text-secondary-color) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ SCROLLBAR - Ultra-minimal auto-fade ═══════════════════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--rz-base-300); border-radius: 9999px; transition: background 0.2s; } ::-webkit-scrollbar-thumb:hover { background: var(--rz-base-400); } /* Firefox thin scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--rz-base-300) transparent; } /* ═══════════════════════════════════════════════════════════════════════════════ PAGE CONTENT ENTRANCE - Smooth fade-in on navigation ═══════════════════════════════════════════════════════════════════════════════ */ .rz-body > .rz-content { animation: contentFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes contentFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════════════════ FOCUS STATES ═══════════════════════════════════════════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; } .rz-button:focus-visible { box-shadow: var(--rz-shadow-glow); } /* ═══════════════════════════════════════════════════════════════════════════════ UTILITY CLASSES ═══════════════════════════════════════════════════════════════════════════════ */ .text-title { color: var(--rz-text-title-color) !important; } .text-primary { color: var(--rz-text-color) !important; } .text-secondary { color: var(--rz-text-secondary-color) !important; } .text-muted { color: var(--rz-text-tertiary-color) !important; } .text-accent { color: var(--rz-primary) !important; } .bg-surface { background-color: var(--rz-base-background-color) !important; } .bg-muted { background-color: var(--rz-base-50) !important; } .border-subtle { border-color: var(--rz-base-200) !important; } .rounded-sm { border-radius: var(--rz-border-radius-sm) !important; } .rounded { border-radius: var(--rz-border-radius) !important; } .rounded-lg { border-radius: var(--rz-border-radius-lg) !important; } .rounded-xl { border-radius: var(--rz-border-radius-xl) !important; } .rounded-full { border-radius: 9999px !important; } .shadow-xs { box-shadow: var(--rz-shadow-xs) !important; } .shadow-sm { box-shadow: var(--rz-shadow-1) !important; } .shadow { box-shadow: var(--rz-shadow-4) !important; } .shadow-lg { box-shadow: var(--rz-shadow-lg) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════════════════════════════════════════════ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .animate-fade-in { animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .animate-slide-in { animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .animate-scale-in { animation: scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* ═══════════════════════════════════════════════════════════════════════════════ LOADING STATES ═══════════════════════════════════════════════════════════════════════════════ */ .loading-container, .chat-loader { display: flex; justify-content: center; align-items: center; } .loading-container { height: 85vh; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .fade-in { animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .slide-in { animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* ═══════════════════════════════════════════════════════════════════════════════ CORPORATE ALIASES (Compatibility Layer) ═══════════════════════════════════════════════════════════════════════════════ */ :root { --corp-primary: var(--rz-primary); --corp-primary-light: var(--rz-primary-light); --corp-primary-dark: var(--rz-primary-dark); --corp-accent: var(--rz-info); --corp-bg-main: var(--rz-base-100); --corp-bg-surface: var(--rz-base-background-color); --corp-bg-card: var(--rz-base-background-color); --corp-border: var(--rz-base-300); --corp-border-light: var(--rz-base-200); --corp-text-primary: var(--rz-text-title-color); --corp-text-secondary: var(--rz-text-secondary-color); --corp-text-muted: var(--rz-text-tertiary-color); --corp-success: var(--rz-success); --corp-success-bg: var(--rz-success-lighter); --corp-warning: var(--rz-warning); --corp-warning-bg: var(--rz-warning-lighter); --corp-danger: var(--rz-danger); --corp-danger-bg: var(--rz-danger-lighter); --corp-info: var(--rz-info); --corp-info-bg: var(--rz-info-lighter); } .border-corp { border: var(--rz-border-normal) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .page-title { font-size: 1.25rem; } .stat-card-value { font-size: 1.375rem; } .kanban-column { flex: 0 0 280px; } } /* ═══════════════════════════════════════════════════════════════════════════════ DALATIC PORTAL - THEME OVERRIDES Este archivo DEBE cargarse DESPUÉS de los estilos de Radzen Material. Proporciona overrides con !important para garantizar que el theme corporativo siempre gane sobre Radzen Material. REGLA: Si Radzen Material compite, pierde. ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ BUTTONS - Force corporate colors over Radzen Material ═══════════════════════════════════════════════════════════════════════════════ */ /* Primary Button - Filled variants only (exclude text/outlined/flat) */ .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat), .rz-button.rz-primary.rz-shade-default:not(.rz-variant-text), .rz-button.rz-primary.rz-shade-light:not(.rz-variant-text), .rz-button.rz-primary.rz-shade-lighter:not(.rz-variant-text), .rz-button.rz-primary.rz-shade-dark:not(.rz-variant-text), .rz-button.rz-primary.rz-shade-darker:not(.rz-variant-text) { background-color: var(--rz-primary) !important; color: var(--rz-on-primary) !important; border-left-color: var(--rz-primary) !important; } .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover:not(:disabled), .rz-button.rz-primary.rz-shade-default:not(.rz-variant-text):hover:not(:disabled) { background-color: var(--rz-primary-dark) !important; border-color: var(--rz-primary-dark) !important; color: var(--rz-on-primary) !important; } .rz-button.rz-primary:focus:not(:disabled), .rz-button.rz-primary:active:not(:disabled) { background-color: var(--rz-primary-darker) !important; border-color: var(--rz-primary-darker) !important; color: var(--rz-on-primary) !important; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2) !important; } /* Info Button - Filled variants only (exclude text/outlined/flat) */ .rz-button.rz-info:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat), .rz-button.rz-info.rz-shade-default:not(.rz-variant-text), .rz-button.rz-info.rz-shade-light:not(.rz-variant-text), .rz-button.rz-info.rz-shade-lighter:not(.rz-variant-text), .rz-button.rz-info.rz-shade-dark:not(.rz-variant-text), .rz-button.rz-info.rz-shade-darker:not(.rz-variant-text) { background-color: var(--rz-info) !important; color: var(--rz-on-info) !important; border-color: var(--rz-info) !important; } .rz-button.rz-info:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover:not(:disabled), .rz-button.rz-info.rz-shade-default:not(.rz-variant-text):hover:not(:disabled) { background-color: var(--rz-info-dark) !important; border-color: var(--rz-info-dark) !important; color: var(--rz-on-info) !important; } .rz-button.rz-info:focus:not(:disabled), .rz-button.rz-info:active:not(:disabled) { background-color: var(--rz-info-darker) !important; border-color: var(--rz-info-darker) !important; color: var(--rz-on-info) !important; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important; } /* Success Button - Filled variants only (exclude text/outlined/flat) */ .rz-button.rz-success:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat), .rz-button.rz-success.rz-shade-default:not(.rz-variant-text), .rz-button.rz-success.rz-shade-light:not(.rz-variant-text), .rz-button.rz-success.rz-shade-lighter:not(.rz-variant-text), .rz-button.rz-success.rz-shade-dark:not(.rz-variant-text), .rz-button.rz-success.rz-shade-darker:not(.rz-variant-text) { background-color: var(--rz-success) !important; color: var(--rz-on-success) !important; border-left-color: var(--rz-success) !important; } .rz-button.rz-success:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover:not(:disabled), .rz-button.rz-success.rz-shade-default:not(.rz-variant-text):hover:not(:disabled) { background-color: var(--rz-success-dark) !important; border-color: var(--rz-success-dark) !important; color: var(--rz-on-success) !important; } /* Warning Button - Filled variants only (exclude text/outlined/flat) */ .rz-button.rz-warning:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat), .rz-button.rz-warning.rz-shade-default:not(.rz-variant-text), .rz-button.rz-warning.rz-shade-light:not(.rz-variant-text), .rz-button.rz-warning.rz-shade-lighter:not(.rz-variant-text), .rz-button.rz-warning.rz-shade-dark:not(.rz-variant-text), .rz-button.rz-warning.rz-shade-darker:not(.rz-variant-text) { background-color: var(--rz-warning) !important; color: var(--rz-on-warning) !important; border-left-color: var(--rz-warning) !important; } .rz-button.rz-warning:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover:not(:disabled), .rz-button.rz-warning.rz-shade-default:not(.rz-variant-text):hover:not(:disabled) { background-color: var(--rz-warning-dark) !important; border-color: var(--rz-warning-dark) !important; color: var(--rz-on-warning) !important; } /* Danger Button - Filled variants only (exclude text/outlined/flat) */ .rz-button.rz-danger:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat), .rz-button.rz-danger.rz-shade-default:not(.rz-variant-text), .rz-button.rz-danger.rz-shade-light:not(.rz-variant-text), .rz-button.rz-danger.rz-shade-lighter:not(.rz-variant-text), .rz-button.rz-danger.rz-shade-dark:not(.rz-variant-text), .rz-button.rz-danger.rz-shade-darker:not(.rz-variant-text) { background-color: var(--rz-danger) !important; color: var(--rz-on-danger) !important; border-left-color: var(--rz-danger) !important; } .rz-button.rz-danger:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover:not(:disabled), .rz-button.rz-danger.rz-shade-default:not(.rz-variant-text):hover:not(:disabled) { background-color: var(--rz-danger-dark) !important; border-color: var(--rz-danger-dark) !important; color: var(--rz-on-danger) !important; } /* Secondary/Light Button - Filled variants only (exclude text/outlined/flat) */ .rz-button.rz-secondary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat), .rz-button.rz-light:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat), .rz-button.rz-secondary.rz-shade-default:not(.rz-variant-text), .rz-button.rz-secondary.rz-shade-light:not(.rz-variant-text), .rz-button.rz-secondary.rz-shade-lighter:not(.rz-variant-text), .rz-button.rz-secondary.rz-shade-dark:not(.rz-variant-text), .rz-button.rz-secondary.rz-shade-darker:not(.rz-variant-text), .rz-button.rz-light.rz-shade-default:not(.rz-variant-text), .rz-button.rz-light.rz-shade-light:not(.rz-variant-text), .rz-button.rz-light.rz-shade-lighter:not(.rz-variant-text), .rz-button.rz-light.rz-shade-dark:not(.rz-variant-text), .rz-button.rz-light.rz-shade-darker:not(.rz-variant-text) { background-color: var(--rz-base-100) !important; color: var(--rz-text-color) !important; border-color: var(--rz-base-300) !important; } .rz-button.rz-secondary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover:not(:disabled), .rz-button.rz-light:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover:not(:disabled), .rz-button.rz-secondary.rz-shade-default:not(.rz-variant-text):hover:not(:disabled), .rz-button.rz-light.rz-shade-default:not(.rz-variant-text):hover:not(:disabled) { background-color: var(--rz-base-200) !important; border-color: var(--rz-base-400) !important; color: var(--rz-text-color) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ BADGES - Force corporate colors ═══════════════════════════════════════════════════════════════════════════════ */ .rz-badge.rz-primary, .rz-badge.rz-shade-default.rz-primary { background-color: var(--rz-primary) !important; color: var(--rz-on-primary) !important; } .rz-badge.rz-info, .rz-badge.rz-shade-default.rz-info { background-color: var(--rz-info) !important; color: var(--rz-on-info) !important; } .rz-badge.rz-success, .rz-badge.rz-shade-default.rz-success { background-color: var(--rz-success) !important; color: var(--rz-on-success) !important; } .rz-badge.rz-warning, .rz-badge.rz-shade-default.rz-warning { background-color: var(--rz-warning) !important; color: var(--rz-on-warning) !important; } .rz-badge.rz-danger, .rz-badge.rz-shade-default.rz-danger { background-color: var(--rz-danger) !important; color: var(--rz-on-danger) !important; } .rz-badge.rz-light, .rz-badge.rz-shade-default.rz-light { background-color: var(--rz-base-100) !important; color: var(--rz-text-color) !important; } /* Light badge with Lighter shade - ensure text contrast */ .rz-badge.rz-shade-lighter.rz-light { background-color: var(--rz-base-200) !important; color: var(--rz-text-color) !important; } /* Lighter shade badges */ .rz-badge.rz-shade-lighter.rz-primary { background-color: var(--rz-primary-lighter) !important; color: var(--rz-primary) !important; } .rz-badge.rz-shade-lighter.rz-info { background-color: var(--rz-info-lighter) !important; color: var(--rz-info) !important; } .rz-badge.rz-shade-lighter.rz-success { background-color: var(--rz-success-lighter) !important; color: var(--rz-success) !important; } .rz-badge.rz-shade-lighter.rz-warning { background-color: var(--rz-warning-lighter) !important; color: var(--rz-warning) !important; } .rz-badge.rz-shade-lighter.rz-danger { background-color: var(--rz-danger-lighter) !important; color: var(--rz-danger) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ ALERTS - Force corporate colors Replace Radzen's faint full-perimeter border with a clean 4px left accent bar — the variant color shows up as an obvious vertical stripe instead of washing out around the edges. ═══════════════════════════════════════════════════════════════════════════════ */ .rz-alert { border: 0 !important; border-left-style: solid !important; border-left-width: 4px !important; border-radius: 6px !important; padding: 0.875rem 1rem !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important; } /* Default shade alerts */ .rz-alert.rz-info, .rz-alert.rz-shade-default.rz-info { background-color: var(--rz-info-lighter) !important; border-left-color: var(--rz-info) !important; color: var(--rz-info-darker) !important; } .rz-alert.rz-info .rz-alert-icon { color: var(--rz-info) !important; } .rz-alert.rz-primary, .rz-alert.rz-shade-default.rz-primary { background-color: var(--rz-primary-lighter) !important; border-left-color: var(--rz-primary) !important; color: var(--rz-primary-darker) !important; } .rz-alert.rz-success, .rz-alert.rz-shade-default.rz-success { background-color: var(--rz-success-lighter) !important; border-left-color: var(--rz-success) !important; color: var(--rz-success-darker) !important; } .rz-alert.rz-warning, .rz-alert.rz-shade-default.rz-warning { background-color: var(--rz-warning-lighter) !important; border-left-color: var(--rz-warning) !important; color: var(--rz-warning-darker) !important; } .rz-alert.rz-danger, .rz-alert.rz-shade-default.rz-danger { background-color: var(--rz-danger-lighter) !important; border-left-color: var(--rz-danger) !important; color: var(--rz-danger-darker) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ ALERTS - Shade Lighter (CRITICAL: Force high contrast text) El Shade.Lighter de Radzen usa fondos muy claros con texto del mismo tono lo que resulta en bajo contraste. Forzamos texto oscuro para legibilidad. ═══════════════════════════════════════════════════════════════════════════════ */ .rz-alert.rz-shade-lighter.rz-info { background-color: var(--rz-info-lighter) !important; border-left-color: var(--rz-info-light) !important; color: var(--rz-info-darker) !important; } .rz-alert.rz-shade-lighter.rz-info .rz-alert-icon { color: var(--rz-info-dark) !important; } .rz-alert.rz-shade-lighter.rz-primary { background-color: var(--rz-primary-lighter) !important; border-left-color: var(--rz-primary-light) !important; color: var(--rz-primary-darker) !important; } .rz-alert.rz-shade-lighter.rz-primary .rz-alert-icon { color: var(--rz-primary-dark) !important; } .rz-alert.rz-shade-lighter.rz-success { background-color: var(--rz-success-lighter) !important; border-left-color: var(--rz-success-light) !important; color: var(--rz-success-darker) !important; } .rz-alert.rz-shade-lighter.rz-success .rz-alert-icon { color: var(--rz-success-dark) !important; } .rz-alert.rz-shade-lighter.rz-warning { background-color: var(--rz-warning-lighter) !important; border-left-color: var(--rz-warning-light) !important; color: var(--rz-warning-darker) !important; } .rz-alert.rz-shade-lighter.rz-warning .rz-alert-icon { color: var(--rz-warning-dark) !important; } .rz-alert.rz-shade-lighter.rz-danger { background-color: var(--rz-danger-lighter) !important; border-left-color: var(--rz-danger-light) !important; color: var(--rz-danger-darker) !important; } .rz-alert.rz-shade-lighter.rz-danger .rz-alert-icon { color: var(--rz-danger-dark) !important; } /* Ensure all text inside Shade.Lighter alerts has proper contrast */ .rz-alert.rz-shade-lighter strong, .rz-alert.rz-shade-lighter small, .rz-alert.rz-shade-lighter span, .rz-alert.rz-shade-lighter p { color: inherit !important; } /* ═══════════════════════════════════════════════════════════════════════════════ PROGRESS BARS - Force corporate colors ═══════════════════════════════════════════════════════════════════════════════ */ .rz-progressbar-value.rz-primary, .rz-progressbar-circular-value.rz-primary { background-color: var(--rz-primary) !important; stroke: var(--rz-primary) !important; } .rz-progressbar-value.rz-info, .rz-progressbar-circular-value.rz-info { background-color: var(--rz-info) !important; stroke: var(--rz-info) !important; } .rz-progressbar-value.rz-success, .rz-progressbar-circular-value.rz-success { background-color: var(--rz-success) !important; stroke: var(--rz-success) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ INPUTS - Force focus colors ═══════════════════════════════════════════════════════════════════════════════ */ .rz-textbox:focus, .rz-textarea:focus, .rz-dropdown:focus, .rz-autocomplete.rz-state-focused, .rz-textbox:focus-within, .rz-inputtext:focus { border-left-color: var(--rz-primary) !important; box-shadow: 0 0 0 2px var(--rz-primary-lighter) !important; outline: none !important; } /* Remove double border on search inputs */ .rz-autocomplete .rz-inputtext, .rz-dropdown .rz-inputtext, .search-input-wrapper .rz-textbox, .rz-textbox-box .rz-inputtext, .corp-search .rz-textbox, .corp-search .rz-inputtext, .corp-search input, .filter-bar .corp-search .rz-textbox, /* Remove inner input border inside wrapper components (prevents double border) */ .rz-textbox input, .rz-textbox .rz-inputtext, .rz-numeric input, .rz-datepicker input, .rz-spinner input { border: none !important; box-shadow: none !important; outline: none !important; background: transparent !important; } .rz-autocomplete, .rz-dropdown, .search-input-wrapper, .rz-textbox-box { border: 1px solid var(--rz-base-300) !important; border-radius: var(--rz-border-radius) !important; } .rz-autocomplete:focus-within, .rz-dropdown:focus-within, .search-input-wrapper:focus-within, .rz-textbox-box:focus-within { border-left-color: var(--rz-primary) !important; box-shadow: 0 0 0 2px var(--rz-primary-lighter) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ DASHBOARD - Brand-aligned homepage refresh ═══════════════════════════════════════════════════════════════════════════════ */ .portal-dashboard { gap: var(--space-5); } .portal-dashboard-hero { position: relative; overflow: hidden; border-radius: var(--rz-border-radius); padding: 1rem 1.1rem; border: 1px solid var(--rz-base-200); color: var(--portal-dashboard-hero-text); background: var(--portal-dashboard-hero-bg); box-shadow: var(--portal-dashboard-hero-shadow); } .portal-dashboard-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 2px; background: var(--rz-primary); border-radius: 0 0 2px 0; } .portal-dashboard-hero__title-row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; } .portal-dashboard-hero__content { min-width: 0; } .portal-dashboard-hero__headline { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .portal-dashboard-hero__eyebrow { margin-bottom: 0.25rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rz-text-tertiary-color); } .portal-dashboard-hero__title { margin: 0; font-size: 1.45rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; } .portal-dashboard-hero__subtitle { margin-top: 0.2rem; font-size: 0.95rem; line-height: 1.35; color: var(--rz-text-title-color); } .portal-dashboard-hero__focus { margin-top: 0.4rem; font-size: 0.8rem; line-height: 1.4; color: var(--rz-text-secondary-color); max-width: 42rem; } .portal-dashboard-hero__badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0.25rem 0.625rem; border-radius: 4px; background: var(--rz-base-50); border: 1px solid var(--rz-base-200); color: var(--rz-text-secondary-color); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .portal-dashboard-hero__badge--muted { background: var(--portal-dashboard-hero-panel-bg); border-color: var(--portal-dashboard-hero-panel-border); } .portal-dashboard-hero__actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.75rem; } .portal-dashboard-hero__spotlight { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 104px; padding: 0.65rem 0.8rem; border-radius: 8px; border: 1px solid var(--portal-dashboard-hero-panel-border); background: var(--portal-dashboard-hero-panel-bg); } .portal-dashboard-hero__spotlight-value { font-size: 1.2rem; font-weight: 700; line-height: 1; color: var(--rz-text-title-color); letter-spacing: -0.03em; } .portal-dashboard-hero__spotlight-label { font-size: 0.64rem; font-weight: 700; line-height: 1.2; color: var(--rz-text-secondary-color); text-transform: uppercase; letter-spacing: 0.08em; } .portal-dashboard-hero__spotlight-caption { margin-top: 0.15rem; font-size: 0.72rem; line-height: 1.35; color: var(--rz-text-tertiary-color); } .portal-dashboard-hero__button { width: auto; min-width: 0; min-height: 40px; padding-inline: 0.9rem !important; justify-content: center; background: var(--portal-dashboard-hero-button-bg) !important; border-color: var(--portal-dashboard-hero-panel-border) !important; color: var(--rz-text-secondary-color) !important; } .portal-dashboard-hero__button:hover, .portal-dashboard-hero__button:focus-visible { background: var(--portal-dashboard-hero-button-bg-hover) !important; border-color: var(--portal-dashboard-hero-panel-border-hover) !important; color: var(--rz-text-color) !important; } .portal-dashboard-hero__meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--rz-base-100); } .portal-dashboard-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--portal-dashboard-pill-border); background: var(--portal-dashboard-pill-bg); color: var(--portal-dashboard-pill-text); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .portal-dashboard-pill--alert { border-color: var(--portal-dashboard-pill-alert-border); background: var(--portal-dashboard-pill-alert-bg); } .portal-dashboard-stats { gap: var(--space-3); } .portal-dashboard-stat-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 0.85rem; min-height: 72px; padding: 0.8rem 0.9rem; border-radius: var(--rz-border-radius); border-color: var(--portal-dashboard-stat-border) !important; background: var(--portal-dashboard-stat-bg) !important; box-shadow: var(--portal-dashboard-stat-shadow) !important; cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; } .portal-dashboard-stat-card::after { content: ''; display: none; } .portal-dashboard-stat-card:hover { transform: translateY(-1px); box-shadow: var(--portal-dashboard-stat-shadow-hover) !important; } .portal-dashboard .stat-card::before { display: none; } .portal-dashboard .stat-icon, .portal-dashboard .stat-icon.success, .portal-dashboard .stat-icon.warning, .portal-dashboard .stat-icon.primary { width: 34px; height: 34px; margin-bottom: 0; border-radius: 8px; background: var(--rz-primary-lighter); color: var(--rz-primary); } .portal-dashboard .stat-icon.danger { background: var(--rz-danger-lighter); color: var(--rz-danger); } .portal-dashboard .stat-value { margin: 0; font-size: 1.05rem; line-height: 1.05; letter-spacing: -0.03em; } .portal-dashboard .stat-label { margin-top: 0.15rem; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; } .portal-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); gap: var(--space-5); } .portal-dashboard-panel { position: relative; border-radius: 12px; padding: 1.15rem 1.2rem; border: 1px solid var(--portal-dashboard-panel-border); background: var(--portal-dashboard-panel-bg); box-shadow: var(--portal-dashboard-panel-shadow); transition: box-shadow 0.15s ease, border-color 0.15s ease; } .portal-dashboard-panel:hover { border-color: var(--portal-dashboard-panel-border-hover); box-shadow: var(--portal-dashboard-panel-shadow-hover); } .portal-dashboard-panel--alert { border-left: 4px solid var(--rz-danger); } .portal-dashboard .section-header { position: relative; z-index: 1; margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--rz-base-100); } .portal-dashboard .section-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; } .portal-dashboard-section-icon { color: var(--rz-primary); } .portal-dashboard-section-icon.danger { color: var(--rz-danger); } .portal-dashboard .task-item, .portal-dashboard .project-mini-card { cursor: pointer; margin-bottom: 0.3rem; border: 1px solid var(--portal-dashboard-item-border); border-radius: 8px; background: var(--portal-dashboard-item-bg); box-shadow: none; transition: background 0.12s ease, border-color 0.12s ease; } .portal-dashboard .task-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.7rem; border-left: 3px solid transparent; min-height: 40px; } .portal-dashboard-task-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; overflow: hidden; white-space: nowrap; } .portal-dashboard-task-body .portal-dashboard-task-title { font-size: 0.8rem; font-weight: 600; line-height: 1.2; color: var(--rz-text-title-color); overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; } .portal-dashboard-task-sub { font-size: 0.7rem; color: var(--rz-text-tertiary-color); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-task-sub + .portal-dashboard-task-sub::before { content: '·'; margin-right: 0.5rem; color: var(--rz-text-disabled-color); } .portal-dashboard-task-main { flex: 1; min-width: 0; } .portal-dashboard-task-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .portal-dashboard-task-copy { min-width: 0; } .portal-dashboard-task-tags { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.25rem; } .portal-dashboard-task-code, .portal-dashboard-task-type { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 18px; padding: 0 0.4rem; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; } .portal-dashboard-task-code { background: var(--rz-base-100); color: var(--rz-text-secondary-color); } .portal-dashboard-task-type { background: var(--rz-primary-lighter); color: var(--rz-primary); } .portal-dashboard-task-title { font-size: 0.82rem; font-weight: 600; line-height: 1.25; color: var(--rz-text-title-color); } .portal-dashboard-task-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; } .portal-dashboard-task-meta-item { font-size: 0.68rem; line-height: 1.25; color: var(--rz-text-secondary-color); } .portal-dashboard-task-meta-item + .portal-dashboard-task-meta-item::before { content: '•'; margin-right: 0.6rem; color: var(--rz-text-tertiary-color); } .portal-dashboard-task-statuses { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; margin-top: 0.05rem; } /* ────────────────────────────────────────────────────────────────────────── Structured skeletons for the dashboard — mirror the final layout so the page doesn't shift when data loads and the breathing room matches the real task/project items. ────────────────────────────────────────────────────────────────────────── */ .pdash-task-skel { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.7rem; margin-bottom: 0.3rem; min-height: 40px; border: 1px solid var(--portal-dashboard-item-border); border-radius: 8px; background: var(--portal-dashboard-item-bg); } .pdash-project-skel { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem; margin-bottom: 0.3rem; border: 1px solid var(--portal-dashboard-item-border); border-radius: 8px; background: var(--portal-dashboard-item-bg); } .pdash-ticket-skel { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.7rem; margin-bottom: 0.3rem; min-height: 40px; border: 1px solid var(--portal-dashboard-item-border); border-radius: 8px; background: var(--portal-dashboard-item-bg); } .pdash-project-skel-body, .pdash-ticket-skel-body { flex: 1; min-width: 0; } .portal-dashboard .task-item .rz-text-caption { display: block; margin-bottom: 0.2rem; line-height: 1.2; } .portal-dashboard .task-item .rz-text-body2 { display: block; line-height: 1.35; } .portal-dashboard .task-item .rz-stack { row-gap: 0.35rem; } .portal-dashboard .task-checkbox { cursor: pointer; flex: 0 0 auto; margin-top: 0.05rem; } .portal-dashboard .task-item:hover, .portal-dashboard .project-mini-card:hover { background: var(--portal-dashboard-item-bg-hover); border-color: var(--portal-dashboard-item-border-hover); box-shadow: var(--portal-dashboard-item-shadow-hover); } .portal-dashboard .task-item.priority-high, .portal-dashboard .task-item.priority-medium, .portal-dashboard .task-item.priority-low { border-left-color: var(--portal-dashboard-item-accent); } .portal-dashboard .task-item.priority-critical, .portal-dashboard .task-item.priority-urgent { border-left-color: var(--rz-danger); } .portal-dashboard .task-checkbox:hover { border-color: var(--rz-primary); background: var(--rz-primary-lighter); } .portal-dashboard-project-avatar { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--rz-white); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; } .portal-dashboard .quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .portal-dashboard-quick-action { display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; gap: 0.95rem; text-align: left; padding: 0.85rem 1rem; min-height: 72px; border: 1px solid var(--portal-dashboard-item-border); border-radius: 10px; background: var(--portal-dashboard-quick-action-bg); color: var(--rz-text-title-color); box-shadow: var(--portal-dashboard-quick-action-shadow); cursor: pointer !important; transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .portal-dashboard-quick-action, .portal-dashboard-quick-action * { cursor: pointer !important; } .portal-dashboard-quick-action:hover { background: var(--portal-dashboard-quick-action-bg-hover); border-color: var(--portal-dashboard-item-border-hover); color: var(--rz-text-title-color); box-shadow: var(--portal-dashboard-quick-action-shadow-hover); } .portal-dashboard-quick-action--primary { background: var(--portal-dashboard-quick-action-bg-primary); } .portal-dashboard-quick-action--accent { background: var(--portal-dashboard-quick-action-bg-accent); } .portal-dashboard-quick-action-main { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; flex: 1; } .portal-dashboard-quick-action-copy { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; padding-top: 0.08rem; } .portal-dashboard-quick-action-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; font-size: 1.05rem; background: var(--portal-dashboard-quick-action-icon-bg); color: var(--rz-primary); } .portal-dashboard-quick-action-label { display: block; min-width: 0; font-size: 0.84rem; font-weight: 600; line-height: 1.2; white-space: normal; } .portal-dashboard-quick-action-meta { display: block; font-size: 0.69rem; line-height: 1.35; color: var(--rz-text-secondary-color); white-space: normal; } .portal-dashboard-quick-action-tail { flex: 0 0 auto; font-size: 1rem; color: var(--rz-text-tertiary-color); margin-top: 0.1rem; transition: transform var(--rz-transition-fast), color var(--rz-transition-fast); } .portal-dashboard-quick-action:hover .portal-dashboard-quick-action-tail { transform: translateX(2px); color: var(--rz-primary); } .portal-dashboard .empty-state { padding: var(--space-6); border: 1px dashed var(--rz-base-300); border-radius: 10px; background: var(--rz-base-50); } .portal-dashboard .empty-state .rz-icon { color: var(--rz-base-400); } .portal-dashboard .ai-summary-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--portal-dashboard-overlay-bg); display: flex; align-items: center; justify-content: center; z-index: 1000; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .portal-dashboard .ai-summary-modal { cursor: default; } .portal-dashboard .ai-summary-modal { background: var(--rz-base-background-color); border-radius: 14px; width: min(680px, 92vw); max-height: 84vh; display: flex; flex-direction: column; box-shadow: var(--portal-dashboard-modal-shadow); } .portal-dashboard .ai-summary-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--rz-base-100); } .portal-dashboard .ai-summary-content { padding: var(--space-6); overflow-y: auto; flex: 1; } .portal-dashboard .ai-summary-text { line-height: 1.7; color: var(--rz-text-color); } .portal-dashboard .ai-summary-text p { margin-bottom: var(--space-3); } .portal-dashboard .ai-summary-text ul, .portal-dashboard .ai-summary-text ol { margin-left: 1.5rem; margin-bottom: var(--space-3); } .portal-dashboard .ai-summary-text li { margin-bottom: var(--space-1); } .portal-dashboard .ai-summary-text strong { color: var(--rz-text-title-color); } @media (max-width: 1200px) { .portal-dashboard-grid { grid-template-columns: 1fr; } .portal-dashboard .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .portal-dashboard-hero { padding: 0.9rem; } .portal-dashboard-hero__title-row { grid-template-columns: 1fr; } .portal-dashboard-hero__actions { justify-content: flex-start; flex-wrap: wrap; } .portal-dashboard .quick-actions { grid-template-columns: 1fr; } .portal-dashboard-task-top { flex-direction: column; gap: 0.75rem; } .portal-dashboard-task-statuses { justify-content: flex-start; } } @media (max-width: 640px) { .portal-dashboard .quick-actions { grid-template-columns: 1fr; } .portal-dashboard-hero__title { font-size: 1.45rem; } .portal-dashboard-hero__actions { flex-direction: column; align-items: stretch; } .portal-dashboard-hero__button { width: 100%; } .portal-dashboard-panel, .portal-dashboard-stat-card { padding: 1rem; } } /* Corp search wrapper - inner input has no border */ .corp-search .rz-textbox, .corp-search .rz-textbox input { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; padding: 0.5rem 0 !important; } .corp-search:focus-within .rz-textbox, .corp-search:focus-within .rz-textbox input { border: none !important; outline: none !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════════════════════ SWITCHES/TOGGLES - Force corporate colors Cómo lo monta Radzen (material-base.css), que es lo que hay que respetar: .rz-switch → la caja exterior .rz-switch-circle → la PISTA, posicionada absolute e inset:0, así que TAPA por completo a .rz-switch .rz-switch-circle::before → el BOTÓN redondo que se desliza El fallo que esto arregla: pintábamos la PISTA de --rz-primary, pero el BOTÓN ya viene de serie en --rz-switch-checked-circle-background-color, que en este tema vale ese MISMO #4F46E5. Pista y botón del mismo color = una pastilla azul maciza con el botón invisible: el interruptor dejaba de leerse como tal y no se distinguía encendido de apagado más que por la posición de nada. Y el color que poníamos en .rz-switch nunca se veía, porque la pista lo tapa. Reglas para no repetirlo: 1. Pista y botón NUNCA del mismo color. El contraste ES el control. 2. Para recolorear el estado encendido se toca la PISTA (.rz-switch-circle), nunca .rz-switch, que queda debajo y no se ve. ═══════════════════════════════════════════════════════════════════════════════ */ /* Pista de 20px en vez de los 14px de Material: con 14 el botón sobresalía por arriba y por abajo y la fila se veía apretada. */ .rz-switch, .rz-switch.rz-switch-checked { width: 2.25rem; min-width: 2.25rem; height: 1.25rem; } /* Botón de 16px con 2px de aire a cada lado, DENTRO de la pista. */ .rz-switch .rz-switch-circle::before { width: 1rem; height: 1rem; margin-block-start: -0.5rem; inset-inline-start: 2px; } /* Apagado: gris neutro. El azul lavado de serie no se distinguía del fondo. */ .rz-switch .rz-switch-circle { background-color: var(--rz-base-300) !important; } /* Encendido: pista corporativa y botón BLANCO — el contraste que faltaba. */ .rz-switch.rz-switch-checked .rz-switch-circle, .rz-switch-checked .rz-switch-circle { background-color: var(--rz-primary) !important; } /* Recorrido explícito: 36 de pista − 16 de botón − 2 de aire a cada lado = 16px. Hay que escribirlo aunque Radzen declare lo mismo: medido en el navegador, su regla acaba desplazando 14px y el botón queda descentrado a la derecha. */ .rz-switch.rz-switch-checked .rz-switch-circle::before, .rz-switch-checked .rz-switch-circle::before { background-color: var(--rz-white, #FFFFFF) !important; transform: translateX(1rem); } /* ═══════════════════════════════════════════════════════════════════════════════ LINKS - Force corporate colors ═══════════════════════════════════════════════════════════════════════════════ */ .rz-link, a.rz-link { color: var(--rz-primary) !important; } .rz-link:hover, a.rz-link:hover { color: var(--rz-primary-dark) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ TABS - Force corporate colors ═══════════════════════════════════════════════════════════════════════════════ */ .rz-tabview-nav .rz-tabview-selected, .rz-tabview-nav .rz-tabview-nav-link.rz-state-active, .rz-tabs .rz-tab.rz-state-active { color: var(--rz-primary) !important; border-bottom-color: var(--rz-primary) !important; } .rz-tabview-ink-bar, .rz-tabs-ink-bar { background-color: var(--rz-primary) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ MENU ITEMS - Force corporate active state ═══════════════════════════════════════════════════════════════════════════════ */ .rz-navigation-item-active, .rz-panelmenu-header.rz-state-active, .rz-menu-item.rz-state-active { background-color: var(--rz-primary-lighter) !important; color: var(--rz-primary) !important; } .rz-navigation-item-active .rz-navigation-item-icon, .rz-panelmenu-header.rz-state-active .rz-menuitem-icon { color: var(--rz-primary) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ CHIPS/TAGS - Force corporate colors ═══════════════════════════════════════════════════════════════════════════════ */ .rz-chip.rz-primary { background-color: var(--rz-primary-lighter) !important; color: var(--rz-primary) !important; } .rz-chip.rz-info { background-color: var(--rz-info-lighter) !important; color: var(--rz-info) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ DIALOG OVERLAY - Frosted backdrop with smooth entrance ═══════════════════════════════════════════════════════════════════════════════ */ .rz-dialog-mask { background-color: rgba(15, 23, 42, 0.45) !important; -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2); animation: overlayFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* Elevated dialog — apply via DialogOptions.CssClass = "dalatic-dialog-elevated" to any modal that must render on top of a side drawer (TaskDetailDialog / TicketDetailDialog → TimeLog) or on top of the fullscreen chat overlay (delete-chat confirmation). Radzen drops the CssClass on the inner `.rz-dialog`, so we lift the surrounding wrapper + the matching mask sibling via `:has()` (Chromium 105+, Firefox 121+ — fine for portal). */ .rz-dialog-wrapper:has(> .rz-dialog.dalatic-dialog-elevated), .rz-dialog-wrapper:has(.rz-dialog.dalatic-dialog-elevated) { z-index: 11500 !important; } .rz-dialog-mask:has(+ .rz-dialog-wrapper .rz-dialog.dalatic-dialog-elevated) { z-index: 11499 !important; } /* Stacked panel — apply via CssClass = "dalatic-dialog-elevated dalatic-dialog-stacked" to a dialog opened FROM a blade, so it lands as a second panel over the first instead of as a card floating in the middle of the screen. Why CSS and not a second OpenSideAsync: Radzen keeps exactly ONE side-dialog slot (`sideDialog`, `sideDialogOptions`, `sideDialogResultTask` — all singular in Radzen.Blazor 11.2.4). A second OpenSideAsync does not stack, it REPLACES: it overwrites the pending result task, so the first blade's `await` never completes and closing the second leaves the user staring at nothing. Modal dialogs, in contrast, are a list and stack as deep as you like — so the panel look is dressed on a modal, which is the mechanism that actually supports it. Narrower than the blade underneath (640 vs 720) and flush right on purpose: the strip of parent left showing is what says "you are one level deeper", the same cue the Azure portal gives. */ .rz-dialog-wrapper:has(> .rz-dialog.dalatic-dialog-stacked), .rz-dialog-wrapper:has(.rz-dialog.dalatic-dialog-stacked) { justify-content: flex-end !important; align-items: stretch !important; padding: 0 !important; } .rz-dialog.dalatic-dialog-stacked { height: 100% !important; max-height: 100% !important; margin: 0 !important; top: 0 !important; left: auto !important; right: 0 !important; border-radius: 0 !important; display: flex; flex-direction: column; box-shadow: -8px 0 24px -12px rgb(0 0 0 / 28%); border-inline-start: 1px solid var(--rz-base-300); animation: dalaticPanelSlideIn 0.18s cubic-bezier(0.4, 0, 0.2, 1); } /* The body scrolls, the header stays: a panel you can read top-to-bottom without losing the title of what you are editing. */ .rz-dialog.dalatic-dialog-stacked > .rz-dialog-content { flex: 1; min-height: 0; overflow-y: auto; } @keyframes dalaticPanelSlideIn { from { transform: translateX(1.5rem); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .rz-dialog.dalatic-dialog-stacked { animation: none; } } /* Radzen popups (calendar, dropdown list, autocomplete) are rendered as body-level siblings of the dialog wrapper and inherit Radzen's default z-index (~1000-1050). When the triggering dialog is `dalatic-dialog-elevated` (z-index 11500) the popup falls behind the dialog — visually "el datepicker no abre". Lift every Radzen overlay popup above the elevated dialog floor. Navigation menus already override at 99999 (see RADZEN NAV section below), tooltips render at body level with their own stack so this doesn't conflict. */ .rz-popup, .rz-datepicker-popup, .rz-dropdown-panel, .rz-autocomplete-panel { z-index: 12000 !important; } @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Dialog entrance animation */ .rz-dialog-wrapper .rz-dialog { animation: dialogSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes dialogSlideIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ═══════════════════════════════════════════════════════════════════════════════ TOOLTIP - Frosted glass corporate styling ═══════════════════════════════════════════════════════════════════════════════ */ .rz-tooltip { background-color: rgba(15, 23, 42, 0.88) !important; color: var(--rz-base-50) !important; -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); border-radius: 6px !important; padding: 6px 10px !important; font-size: 0.75rem !important; font-weight: 500; letter-spacing: 0.01em; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.06) !important; animation: tooltipFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes tooltipFadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════════════════ CHECKBOX/RADIO - Force corporate colors ═══════════════════════════════════════════════════════════════════════════════ */ .rz-checkbox-box.rz-state-active, .rz-checkbox.rz-state-checked .rz-checkbox-box, .rz-radiobutton-box.rz-state-active { background-color: var(--rz-primary) !important; border-left-color: var(--rz-primary) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ DATEPICKER/CALENDAR - Force corporate colors ═══════════════════════════════════════════════════════════════════════════════ */ .rz-datepicker-calendar .rz-state-active, .rz-calendar .rz-state-active, .rz-calendar-day.rz-state-active { background-color: var(--rz-primary) !important; color: var(--rz-on-primary) !important; } .rz-datepicker-today, .rz-calendar-today { color: var(--rz-primary) !important; font-weight: 600 !important; } /* ─────────────────────────────────────────────────────────────────────────── DATEPICKER TRIGGER GLYPH — portal-wide RadzenDatePicker has NO Icon property: it renders the calendar/clock toggle as with NO text, so the glyph comes ONLY from a ::before content rule + the Material Symbols font. RadzenButton icons instead use a text ligature (check), which is why those render while the datepicker trigger showed a stray circle — its ::before glyph wasn't painting (the portal loads Radzen's material-base.css without a full Radzen theme, so the base ::before / --rz-icon-font-family chain was unreliable). Re-assert the glyph + font here so EVERY date picker in the portal (tasks, tickets, invoices, supersheet…) shows its icon. ─────────────────────────────────────────────────────────────────────────── */ .rz-datepicker-trigger .rzi { font-family: "Material Symbols", "Material Symbols Outlined", "Material Icons" !important; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "GRAD" 0, "opsz" 24; } .rz-datepicker-trigger .rzi-calendar::before { content: "calendar_today"; } .rz-datepicker-trigger .rzi-time::before { content: "schedule"; } /* ═══════════════════════════════════════════════════════════════════════════════ SPLITBUTTON - Force corporate colors ═══════════════════════════════════════════════════════════════════════════════ */ .rz-splitbutton .rz-button.rz-primary, .rz-splitbutton.rz-primary .rz-button { background-color: var(--rz-primary) !important; color: var(--rz-on-primary) !important; border-left-color: var(--rz-primary) !important; } .rz-splitbutton .rz-button.rz-secondary, .rz-splitbutton.rz-secondary .rz-button { background-color: var(--rz-base-100) !important; color: var(--rz-text-color) !important; border-color: var(--rz-base-300) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ MODEL DEPLOYMENT DIALOG ═══════════════════════════════════════════════════════════════════════════════ */ .deployment-dialog-shell { max-width: 1220px; margin: 0 auto; padding: 1rem; } .deployment-hero { padding: 1.25rem; border-radius: 20px; border: 1px solid var(--rz-primary-lighter); background: radial-gradient(circle at top right, color-mix(in srgb, var(--rz-primary) 10%, transparent) 0, transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--rz-base-100) 88%, var(--rz-primary) 12%), var(--rz-base-100)); } .deployment-hero__top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; } .deployment-hero__identity { display: flex; gap: 1rem; align-items: flex-start; } .deployment-hero__icon { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--rz-on-primary); background: linear-gradient(135deg, var(--rz-primary), color-mix(in srgb, var(--rz-primary) 60%, var(--rz-base-900))); box-shadow: 0 14px 30px color-mix(in srgb, var(--rz-primary) 18%, transparent); } .deployment-hero__icon-symbol { font-size: 1.6rem; } .deployment-hero__title { margin: 0; } .deployment-hero__subtitle { margin-top: 0.35rem; max-width: 640px; color: var(--rz-text-secondary-color); font-size: 0.92rem; line-height: 1.45; } .deployment-hero__badges { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; } .deployment-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } .overview-card { border: 1px solid var(--rz-border-color); border-radius: 18px; background: var(--rz-base-100); padding: 0.9rem 1rem; min-height: 104px; } .overview-card__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rz-text-secondary-color); margin-bottom: 0.5rem; } .overview-card__value { font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--rz-text-color); } .overview-card__meta { margin-top: 0.35rem; font-size: 0.82rem; color: var(--rz-text-secondary-color); line-height: 1.4; } .deployment-panel { border-radius: 18px; border: 1px solid var(--rz-border-color); box-shadow: none; } .deployment-panel__header { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; margin-bottom: 1rem; } .deployment-panel__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; } .deployment-steps-panel { padding-top: 0.25rem; } .deployment-steps { margin: 0; } .catalog-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 0.75rem; align-items: end; } .catalog-filters__search, .catalog-filters__type { display: grid; gap: 0.35rem; } .catalog-type-selectbar { width: 100%; flex-wrap: wrap; gap: 0.5rem; } .catalog-type-selectbar .rz-button { border-radius: 999px; } .deployment-panel__title { font-weight: 700; margin: 0; } .deployment-panel__subtitle { font-size: 0.85rem; color: var(--rz-text-secondary-color); margin-top: 0.35rem; line-height: 1.45; } .field-row { row-gap: 0.75rem; margin-bottom: 0.5rem; } .provider-guidance { border-radius: 14px; padding: 0.85rem 1rem; background: color-mix(in srgb, var(--rz-base-200) 82%, var(--rz-primary) 18%); border: 1px solid var(--rz-primary-lighter); } .provider-guidance__title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rz-text-secondary-color); margin-bottom: 0.35rem; } .provider-guidance__text { font-size: 0.92rem; line-height: 1.45; } .guided-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .guided-card { border: 1px solid var(--rz-border-color); border-radius: 16px; padding: 1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--rz-base-100) 92%, var(--rz-primary) 8%), var(--rz-base-100)); } .guided-card__eyebrow { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rz-text-secondary-color); margin-bottom: 0.4rem; } .guided-card__title { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; } .guided-card__subtitle { font-size: 0.85rem; color: var(--rz-text-secondary-color); line-height: 1.4; margin-bottom: 0.85rem; } .catalog-shell { display: grid; gap: 1rem; } .catalog-section { display: grid; gap: 0.85rem; } .catalog-section__header { display: flex; align-items: flex-start; gap: 0.85rem; } .catalog-section__icon { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--rz-primary); background: var(--rz-primary-lighter); } .catalog-section__title { font-size: 1rem; font-weight: 700; color: var(--rz-text-color); } .catalog-section__subtitle { margin-top: 0.2rem; color: var(--rz-text-secondary-color); font-size: 0.85rem; line-height: 1.45; } .catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .catalog-card { -webkit-appearance: none; appearance: none; text-align: left; cursor: pointer; width: 100%; display: grid; gap: 0.75rem; padding: 1rem; border: 1px solid var(--rz-border-color); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--rz-base-100) 93%, var(--rz-primary) 7%), var(--rz-base-100)); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .catalog-card:hover, .catalog-card:focus-visible { border-color: var(--rz-primary-light); transform: translateY(-1px); box-shadow: 0 16px 30px color-mix(in srgb, var(--rz-primary) 10%, transparent); } .catalog-card--selected { border-color: var(--rz-primary); box-shadow: 0 18px 36px color-mix(in srgb, var(--rz-primary) 14%, transparent); } .catalog-card__top { display: flex; flex-direction: column; gap: 0.35rem; } .catalog-card__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .catalog-card__title { font-size: 1rem; font-weight: 700; color: var(--rz-text-color); } .catalog-card__summary { font-size: 0.86rem; line-height: 1.45; color: var(--rz-text-secondary-color); } .catalog-card__meta { font-size: 0.8rem; color: var(--rz-text-secondary-color); } .catalog-card__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; } .selected-model-strip { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border-radius: 16px; border: 1px solid var(--rz-primary-lighter); background: linear-gradient(180deg, color-mix(in srgb, var(--rz-base-100) 88%, var(--rz-primary) 12%), var(--rz-base-100)); } .selected-model-strip__identity { display: flex; align-items: center; gap: 0.85rem; } .selected-model-strip__icon { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--rz-primary); background: var(--rz-primary-lighter); } .selected-model-strip__title { font-size: 1rem; font-weight: 700; } .selected-model-strip__subtitle { margin-top: 0.2rem; font-size: 0.84rem; color: var(--rz-text-secondary-color); } .selected-model-strip__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; } .account-mode-toggle { display: flex; flex-wrap: wrap; gap: 0.5rem; } .deployment-type-grid, .capacity-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .deployment-type-option { -webkit-appearance: none; appearance: none; cursor: pointer; width: 100%; display: grid; gap: 0.25rem; text-align: left; padding: 0.9rem 1rem; border-radius: 16px; border: 1px solid var(--rz-border-color); background: var(--rz-base-100); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .deployment-type-option:hover, .deployment-type-option:focus-visible { border-color: var(--rz-primary-light); } .deployment-type-option--selected { border-color: var(--rz-primary); box-shadow: 0 0 0 1px var(--rz-primary-lighter); background: color-mix(in srgb, var(--rz-base-100) 90%, var(--rz-primary) 10%); } .deployment-type-option__title { font-weight: 700; color: var(--rz-text-color); } .deployment-type-option__summary { font-size: 0.8rem; line-height: 1.45; color: var(--rz-text-secondary-color); } .tokens-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .agent-quota-section { padding: 1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--rz-base-200) 86%, var(--rz-primary) 14%), var(--rz-base-200)); border: 1px solid var(--rz-primary-lighter); border-radius: 16px; margin-top: 1rem; } .quota-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; gap: 0.75rem; } .quota-values { display: flex; justify-content: space-between; font-size: 0.85rem; margin-top: 0.5rem; color: var(--rz-text-secondary-color); gap: 0.75rem; } .deployment-footer { position: sticky; bottom: 0; z-index: 2; padding: 0.9rem 1rem; border: 1px solid var(--rz-border-color); border-radius: 18px; background: color-mix(in srgb, var(--rz-base-100) 92%, var(--rz-white) 8%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .deployment-footer__summary, .deployment-caption-muted { font-size: 0.85rem; color: var(--rz-text-secondary-color); } .deployment-caption-danger { color: var(--rz-danger); } @media (max-width: 900px) { .deployment-hero__top, .deployment-hero__identity, .selected-model-strip { flex-direction: column; } .deployment-hero__badges { justify-content: flex-start; } .deployment-panel__actions { width: 100%; justify-content: flex-start; } .catalog-filters { grid-template-columns: 1fr; } .deployment-overview-grid, .guided-grid, .catalog-grid, .deployment-type-grid, .capacity-overview-grid, .tokens-grid { grid-template-columns: 1fr; } .selected-model-strip__actions { width: 100%; justify-content: flex-start; } } /* SplitButton (variant text) - primary icon, no white background */ .rz-splitbutton.rz-variant-text .rz-button, .rz-splitbutton.rz-variant-text .rz-splitbutton-menubutton { background: transparent !important; color: var(--rz-primary) !important; border-color: transparent !important; } /* ═══════════════════════════════════════════════════════════════════════════════ DATAGRID - Force corporate header and selection colors ═══════════════════════════════════════════════════════════════════════════════ */ .rz-grid-table .rz-state-highlight, .rz-data-grid-row.rz-state-highlight { background-color: var(--rz-primary-lighter) !important; } .rz-sortable-column.rz-state-sorted { color: var(--rz-primary) !important; } .rz-paginator .rz-state-active { background-color: var(--rz-primary) !important; color: var(--rz-on-primary) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ NOTIFICATION/TOAST - Polished corporate entrance Estructura de Radzen, que es donde estaba el error: .rz-notification → CONTENEDOR position:fixed que agrupa TODOS los avisos. Es más alto que cualquiera de ellos y no debe verse. .rz-notification-item-wrapper → un aviso .rz-notification-item → LA TARJETA Lo que había: backdrop-filter, box-shadow y border-radius aplicados al CONTENEDOR. Como es más alto que la tarjeta, el desenfoque y la sombra asomaban por encima y por debajo — los halos borrosos. La animación también colgaba de ahí, así que corría UNA vez al montar el contenedor y los avisos siguientes entraban sin animar. Y las dos reglas .rz-info no llegaban a aplicarse nunca: la clase que pone Radzen es .rz-notification-info, y el border-left-color no pintaba nada porque no había ni estilo ni ancho de borde. Reglas para no repetirlo: 1. Todo lo VISUAL va en .rz-notification-item. El contenedor solo posiciona. 2. Las clases de estado son .rz-notification-{success,info,warn,error}. 3. Fondos y textos por token (--rz-notification-container-background-color, --rz-text-color): clavar #FFF rompe el modo oscuro. ═══════════════════════════════════════════════════════════════════════════════ */ /* CONTENEDOR: solo posiciona. Nada visible. */ .rz-notification { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; animation: none; } /* Cada aviso entra por su cuenta, no el grupo entero. */ .rz-notification-item-wrapper { background-color: transparent !important; margin: 0 0 0.75rem 0; animation: toastSlideIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(24px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } } /* LA TARJETA: fondo del tema, carril de color y sombra propia y acotada. */ .rz-notification-item { background-color: var(--rz-notification-container-background-color) !important; color: var(--rz-text-color) !important; border-radius: var(--rz-border-radius) !important; border-inline-start: 3px solid var(--dlt-notification-accent, var(--rz-primary)) !important; box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 12px 24px -6px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05) !important; padding: 0.875rem 1rem !important; align-items: flex-start !important; } /* Color de estado: una sola variable que tiñe carril e icono a la vez. */ .rz-notification-success .rz-notification-item { --dlt-notification-accent: var(--rz-success); } .rz-notification-info .rz-notification-item { --dlt-notification-accent: var(--rz-info); } .rz-notification-warn .rz-notification-item { --dlt-notification-accent: var(--rz-warning); } .rz-notification-error .rz-notification-item { --dlt-notification-accent: var(--rz-danger); } .rz-notification-item .rz-notification-icon { color: var(--dlt-notification-accent) !important; font-size: 1.25rem; line-height: 1.4; } /* El texto se lee en color de texto, no en el color de estado: teñir la frase entera de verde la hacía menos legible y más ruidosa. El estado lo dan el carril y el icono. */ .rz-notification-title { color: var(--rz-text-color); font-weight: 600; line-height: 1.35; } .rz-notification-detail { color: var(--rz-text-secondary-color); font-size: 0.8125rem; line-height: 1.45; margin-block-start: 0.125rem; } .rz-notification-close { color: var(--rz-text-secondary-color) !important; opacity: 0.6; } .rz-notification-close:hover { opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════════════ CARD HOVER STATES - Force consistent behavior ═══════════════════════════════════════════════════════════════════════════════ */ .rz-card:hover { border-color: var(--rz-base-300) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ OUTLINE BUTTONS - Force corporate outline colors ═══════════════════════════════════════════════════════════════════════════════ */ .rz-button.rz-variant-outlined.rz-primary { background-color: transparent !important; color: var(--rz-primary) !important; border-left-color: var(--rz-primary) !important; } .rz-button.rz-variant-outlined.rz-primary:hover:not(:disabled) { background-color: var(--rz-primary-lighter) !important; } .rz-button.rz-variant-outlined.rz-info { background-color: transparent !important; color: var(--rz-info) !important; border-color: var(--rz-info) !important; } .rz-button.rz-variant-outlined.rz-info:hover:not(:disabled) { background-color: var(--rz-info-lighter) !important; } .rz-button.rz-variant-outlined.rz-success { background-color: transparent !important; color: var(--rz-success) !important; border-left-color: var(--rz-success) !important; } .rz-button.rz-variant-outlined.rz-danger { background-color: transparent !important; color: var(--rz-danger) !important; border-left-color: var(--rz-danger) !important; } .rz-button.rz-variant-outlined.rz-danger:hover:not(:disabled) { background-color: var(--rz-danger-lighter) !important; } .rz-button.rz-variant-outlined.rz-warning { background-color: transparent !important; color: var(--rz-warning) !important; border-left-color: var(--rz-warning) !important; } .rz-button.rz-variant-outlined.rz-warning:hover:not(:disabled) { background-color: var(--rz-warning-lighter) !important; } .rz-button.rz-variant-outlined.rz-success:hover:not(:disabled) { background-color: var(--rz-success-lighter) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ TEXT BUTTONS - Force corporate text colors ═══════════════════════════════════════════════════════════════════════════════ */ .rz-button.rz-variant-text.rz-primary { color: var(--rz-primary) !important; } .rz-button.rz-variant-text.rz-primary:hover:not(:disabled) { background-color: var(--rz-primary-lighter) !important; } .rz-button.rz-variant-text.rz-info { color: var(--rz-info) !important; } .rz-button.rz-variant-text.rz-info:hover:not(:disabled) { background-color: var(--rz-info-lighter) !important; } .rz-button.rz-variant-text.rz-danger { color: var(--rz-danger) !important; } .rz-button.rz-variant-text.rz-danger:hover:not(:disabled) { background-color: var(--rz-danger-lighter) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ KNOWLEDGE BASE MENU - Confluence-style navigation ═══════════════════════════════════════════════════════════════════════════════ */ /* Menu item container with hover actions */ .kb-menu-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-right: 0.25rem; } .kb-menu-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Hide actions by default, show on hover */ .kb-menu-actions { opacity: 0; transition: opacity 0.15s ease; min-width: 24px; height: 24px; padding: 0 !important; margin-left: auto; cursor: pointer; display: inline-flex; align-items: center; } .kb-menu-item:hover .kb-menu-actions, .kb-menu-actions:focus, .rz-navigation-item-wrapper:hover .kb-menu-actions { opacity: 1; } /* Three dots button - gray by default, primary on hover */ .kb-more-btn.rz-button { color: var(--rz-text-tertiary-color) !important; background: transparent !important; padding: 2px !important; min-width: auto !important; } .kb-more-btn.rz-button:hover, .kb-menu-actions:hover .kb-more-btn.rz-button { color: var(--rz-primary) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ REJILLA DEL NAV — una sola para el menú del portal y el árbol de la wiki ═══════════════════════════════════════════════════════════════════════════════ Regla: el icono de un hijo cae bajo la PRIMERA LETRA de su padre. Con la caja de icono de 16px y 8px de hueco, eso fija el paso de sangría en 24px y ya no queda ninguna medida al gusto. Va con !important y con las x escritas nivel a nivel porque Radzen resuelve la sangría con tres piezas distintas —margen del wrapper, padding del enlace y posición del
    — y sus propias reglas ganaban a las de aquí. Los números salen de medir el DOM: el
      de cada nivel arranca en x=10, así que el padding del enlace es la única variable que hace falta. nivel 0 → icono 20, texto 44 nivel 1 → icono 44, texto 68 (44 = donde empieza el texto del nivel 0) nivel 2 → icono 68, texto 92 ═══════════════════════════════════════════════════════════════════════════════ */ .rz-sidebar { --nav-icon: 16px; --nav-gap: 8px; --nav-step: 24px; /* = icono + hueco */ --nav-ul-x: 10px; /* dónde arranca el
        de cualquier nivel */ } .rz-sidebar .rz-navigation-item-icon { width: var(--nav-icon) !important; min-width: var(--nav-icon) !important; font-size: var(--nav-icon) !important; margin-right: var(--nav-gap) !important; } .rz-sidebar .rz-navigation-item-wrapper { margin-left: 0 !important; } /* Nivel 0 */ .rz-sidebar .rz-navigation-item-link { padding-left: calc(20px - var(--nav-ul-x)) !important; } /* Nivel 1 */ .rz-sidebar .rz-expander-content > .rz-navigation-menu .rz-navigation-item-link { padding-left: calc(20px + var(--nav-step) - var(--nav-ul-x)) !important; } /* Nivel 2 */ .rz-sidebar .rz-expander-content .rz-expander-content > .rz-navigation-menu .rz-navigation-item-link { padding-left: calc(20px + var(--nav-step) * 2 - var(--nav-ul-x)) !important; } /* Línea guía del nav (handoff §3): «sangría por nivel con hairline vertical a la izquierda del grupo hijo». No es sólo de la wiki — vale para TODO el menú, así que se cuelga del
          anidado que Radzen genera dentro de cada expander. Cada nivel dibuja la suya, de modo que en profundidad se ven varias líneas paralelas y se lee de un vistazo de qué cuelga cada fila. La x se calcula para que caiga a la izquierda del icono de la fila hija (icono a 30px, ul a 10px ⇒ 10px dentro del ul). */ .rz-sidebar .rz-expander-content > .rz-navigation-menu { position: relative; } .rz-sidebar .rz-expander-content > .rz-navigation-menu::before { content: ""; position: absolute; top: 0; bottom: 0; /* Centro del icono del PADRE (nivel 0: icono en 20 ⇒ centro en 28; el
            del grupo arranca en 10). */ left: calc(20px + var(--nav-icon) / 2 - var(--nav-ul-x)); width: 1px; background: var(--rz-base-300); pointer-events: none; } /* Un nivel más adentro, el padre está un paso a la derecha. */ .rz-sidebar .rz-expander-content .rz-expander-content > .rz-navigation-menu::before { left: calc(20px + var(--nav-step) + var(--nav-icon) / 2 - var(--nav-ul-x)); } /* Plegado no hay jerarquía que mostrar: sólo iconos. */ .rz-sidebar:not(.rz-sidebar-expanded) .rz-expander-content > .rz-navigation-menu::before, .sidebar-collapsed .rz-expander-content > .rz-navigation-menu::before { display: none; } /* Árbol de la wiki dentro del nav (handoff §3). KbTreeNode se cuelga del ChildContent de un RadzenPanelMenuItem, que es un
              con su propio padding y marcas de lista. Se neutralizan aquí para que la única sangría sea la del handoff —12px por nivel, vía --wk-depth— y el hairline del grupo hijo caiga donde debe. */ .kb-tree-host { list-style: none; /* El árbol vive dentro del expander de «Wiki», o sea en el nivel 1: su fila de profundidad 0 debe arrancar donde arrancan los iconos de ese nivel. Como el
                ya está desplazado 10px, se descuenta esa parte. */ padding: 0 4px 0 calc(20px + var(--nav-step) - var(--nav-ul-x)); margin: 0; } /* Sidebar plegado: el árbol entero desaparece, como el resto de etiquetas. */ .sidebar-collapsed .kb-tree-host { display: none; } /* ── App context menu (.dlt-ctx-*) ─────────────────────────────────── Menu contextual propio, mismo patron que el de SuperSheet (.ss-col-ctx-* en dynamic-tables.css): overlay fijo + menu absoluto dentro. No hereda nada de .rz-context-menu, que es justo lo que pintaba bordes que no encajaban. Vive en theme.css, y no en un .razor.css, porque el consumidor (el arbol del sidebar) renderiza el overlay fuera de su propio scope. */ .dlt-ctx-overlay { position: fixed; inset: 0; z-index: 10050; /* Por encima del sidebar y de los popups del menu. */ background: transparent; } .dlt-ctx-menu { background: var(--rz-base-background-color); border: 1px solid var(--rz-base-300); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); min-width: 220px; padding: 4px 0; font-size: 13px; color: var(--rz-text-color); -webkit-user-select: none; user-select: none; } .dlt-ctx-item { display: flex; align-items: center; gap: 8px; padding: 6px 14px; cursor: pointer; white-space: nowrap; border: none; background: none; width: 100%; text-align: left; color: inherit; font: inherit; line-height: 1.4; } .dlt-ctx-item:hover { background: var(--rz-base-100); } .dlt-ctx-item:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: -2px; } .dlt-ctx-item.danger { color: var(--rz-danger); } .dlt-ctx-item.danger:hover { background: var(--rz-danger-lighter); } .dlt-ctx-icon { font-size: 16px; color: var(--rz-text-secondary-color); width: 16px; flex-shrink: 0; line-height: 1; } .dlt-ctx-item.danger .dlt-ctx-icon { color: var(--rz-danger); } .dlt-ctx-separator { height: 1px; background: var(--rz-base-200); margin: 4px 0; } /* ── Context menu ──────────────────────────────────────────────────── The outer .rz-context-menu IS the visible card; inner list inherits from it. All appearance is controlled via CSS variables in :root so Radzen's own selectors pick up the values without !important fights. */ .rz-context-menu { background: var(--rz-base-background-color) !important; border: 1px solid var(--rz-base-200) !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; overflow: hidden !important; padding: 4px 0 !important; min-width: 180px; } .rz-context-menu .rz-menu, .rz-context-menu .rz-navigation-menu { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; min-width: unset; } .rz-context-menu .rz-navigation-item > .rz-navigation-item-link { border-radius: 0; margin: 0; padding: 7px 12px; gap: 8px; font-size: 0.8125rem; color: var(--rz-text-color) !important; background: transparent !important; } .rz-context-menu .rz-navigation-item > .rz-navigation-item-link:hover { background: var(--rz-base-50) !important; color: var(--rz-text-color) !important; } .rz-context-menu .rz-navigation-item--disabled > .rz-navigation-item-link { opacity: 0.38; pointer-events: none; } /* Separator — matches both items with class="separator" and items whose link has data-value starting with "separator" (Radzen doesn't auto-add the class, so we target by value attribute as a fallback). */ .rz-context-menu .rz-navigation-item.separator, .rz-context-menu .rz-navigation-item:has(> .rz-navigation-item-link[data-value^="separator"]) { border-top: 1px solid var(--rz-base-200); margin: 3px 0; pointer-events: none; } .rz-context-menu .rz-navigation-item:has(> .rz-navigation-item-link[data-value^="separator"]) > .rz-navigation-item-link { display: none; } /* Icons */ .rz-context-menu .rz-navigation-item-link .rzi { font-size: 1rem; color: var(--rz-text-secondary-color); } /* Delete item in red */ .rz-context-menu .rz-navigation-item-link[data-value="delete"], .rz-context-menu .rz-menu-item[data-value="delete"] { color: var(--rz-danger) !important; } .rz-context-menu .rz-navigation-item-link[data-value="delete"] .rzi, .rz-context-menu .rz-navigation-item-link[data-value="delete"] .material-icons { color: var(--rz-danger) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ DIALOG STYLES - Professional, minimalist dialogs ═══════════════════════════════════════════════════════════════════════════════ */ /* Smaller dialog fonts and padding */ .rz-dialog-wrapper .rz-dialog-title { font-size: 0.9rem; font-weight: 600; padding: 0.75rem 1rem; } .rz-dialog-wrapper .rz-dialog-content { padding: 0.875rem 1rem; font-size: 0.8rem; } /* Detail sections for dialogs */ .detail-section { margin-bottom: 0.875rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rz-base-200); } .detail-section:last-child { border-bottom: none; margin-bottom: 0; } .detail-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--rz-text-tertiary-color); margin-bottom: 0.125rem; } .detail-value { font-size: 0.8rem; font-weight: 500; color: var(--rz-text-color); line-height: 1.3; } .detail-value.empty { color: var(--rz-text-tertiary-color); font-style: italic; } /* Link sections for external integrations */ .link-section { background: var(--rz-base-100); border-radius: 6px; padding: 0.75rem; margin-bottom: 0.625rem; } .link-section:last-child { margin-bottom: 0; } /* Selectable cards */ .match-card { background: white; border: 1px solid var(--rz-base-300); border-radius: 4px; padding: 0.5rem 0.625rem; cursor: pointer; transition: all 0.15s ease; } .match-card:hover { border-color: var(--rz-primary); background: var(--rz-primary-lighter); } .match-card.selected { border-color: var(--rz-primary); background: var(--rz-primary-lighter); box-shadow: 0 0 0 2px rgba(var(--rz-primary-rgb), 0.15); } /* Compact badges */ .badge-sm { display: inline-flex; align-items: center; padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .badge-iaas { background: #e0f2fe; color: #0369a1; } .badge-saas { background: #f0fdf4; color: #15803d; } .badge-paas { background: #fef3c7; color: #b45309; } .badge-success { background: #dcfce7; color: #15803d; } .badge-warning { background: #fef3c7; color: #b45309; } .badge-info { background: #dbeafe; color: #1d4ed8; } .badge-danger { background: #fee2e2; color: #dc2626; } /* Small avatars */ .user-avatar-sm { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.55rem; flex-shrink: 0; } /* Item rows for lists in dialogs */ .item-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; background: var(--rz-base-100); border-radius: 4px; border: 1px solid var(--rz-base-200); } .item-row:hover { border-color: var(--rz-base-300); } .item-row-content { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .item-row-title { font-size: 0.7rem; font-weight: 500; color: var(--rz-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-row-subtitle { font-size: 0.55rem; color: var(--rz-text-tertiary-color); } /* Totals bar */ .totals-bar { display: flex; justify-content: flex-end; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; background: var(--rz-base-100); border-radius: 4px; } .total-label { font-size: 0.65rem; color: var(--rz-text-secondary-color); } .total-value { font-size: 0.85rem; font-weight: 700; color: var(--rz-primary); } .total-value small { font-size: 0.6rem; font-weight: 500; color: var(--rz-text-tertiary-color); } /* Empty states */ .empty-state { text-align: center; padding: 1.25rem; color: var(--rz-text-tertiary-color); font-size: 0.7rem; } /* Smaller Radzen components in dialogs */ .detail-dialog-layout .rz-tabview-nav .rz-tabview-title { font-size: 0.7rem; padding: 0.375rem 0.625rem; } .detail-dialog-layout .rz-badge { font-size: 0.6rem; padding: 0.1rem 0.35rem; } .detail-dialog-layout .rz-alert { font-size: 0.7rem; padding: 0.375rem 0.625rem; } /* ═══════════════════════════════════════════════════════════════════════════════ RADZEN TEXT COMPACT - Global text component overrides ═══════════════════════════════════════════════════════════════════════════════ */ /* Body text styles (RadzenText TextStyle.Body1/Body2) */ .rz-text.rz-text-body1 { font-size: 0.8125rem !important; line-height: 1.45 !important; } .rz-text.rz-text-body2 { font-size: 0.75rem !important; line-height: 1.4 !important; } /* Caption/Overline styles */ .rz-text.rz-text-caption { font-size: 0.6875rem !important; line-height: 1.35 !important; } .rz-text.rz-text-overline { font-size: 0.625rem !important; line-height: 1.3 !important; letter-spacing: 0.08em !important; } /* Subtitle styles */ .rz-text.rz-text-subtitle1 { font-size: 0.875rem !important; line-height: 1.4 !important; } .rz-text.rz-text-subtitle2 { font-size: 0.8125rem !important; line-height: 1.35 !important; } /* Button compact */ .rz-button { font-size: 0.8125rem !important; padding: 0.5rem 0.875rem !important; } .rz-button.rz-button-sm { font-size: 0.75rem !important; padding: 0.375rem 0.625rem !important; } .rz-button.rz-button-xs { font-size: 0.6875rem !important; padding: 0.25rem 0.5rem !important; } /* Tabs compact */ .rz-tabview-nav .rz-tabview-title { font-size: 0.8125rem !important; padding: 0.5rem 0.75rem !important; } /* Email settings tabs */ .email-settings-tabs .rz-tabview-nav .rz-tabview-title, .email-settings-tabs .rz-tabview-nav .rz-tabview-nav-link { font-size: 0.78rem !important; font-weight: 600; } .email-settings-tabs .rz-tabview-nav .rzi { display: none !important; } /* Menu items compact */ .rz-menu-item, .rz-panelmenu-content .rz-menuitem { font-size: 0.8125rem !important; } /* Dropdown items compact */ .rz-dropdown-item { font-size: 0.8125rem !important; padding: 0.5rem 0.75rem !important; } /* Listbox items compact */ .rz-listbox-item { font-size: 0.8125rem !important; padding: 0.5rem 0.75rem !important; } /* Checkbox/Radio labels compact */ .rz-chkbox-label, .rz-radiobutton-label { font-size: 0.8125rem !important; } /* ═══════════════════════════════════════════════════════════════════════════════ GLOBAL POPUP/DROPDOWN FIXES Asegurar que los menús contextuales se muestren correctamente sobre diálogos ═══════════════════════════════════════════════════════════════════════════════ */ /* Radzen navigation menu popup - must be above everything */ body > .rz-popup.rz-navigation-menu, .rz-popup.rz-navigation-menu { background: var(--rz-base-background-color, #ffffff) !important; border: 1px solid var(--rz-base-200, #e2e8f0) !important; border-radius: 8px !important; z-index: 99999 !important; opacity: 1 !important; } /* Animation ONLY on open state — must not override Radzen's .rz-close animation */ body > .rz-popup.rz-navigation-menu.rz-open, .rz-popup.rz-navigation-menu.rz-open { animation: contextMenuIn 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes contextMenuIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } body > .rz-popup.rz-navigation-menu .rz-navigation-item-wrapper, .rz-popup.rz-navigation-menu .rz-navigation-item-wrapper { background: var(--rz-base-background-color, #ffffff) !important; } body > .rz-popup.rz-navigation-menu .rz-navigation-item-link, .rz-popup.rz-navigation-menu .rz-navigation-item-link { background: var(--rz-base-background-color, #ffffff) !important; padding: 0.5rem 1rem !important; } body > .rz-popup.rz-navigation-menu .rz-navigation-item-link:hover, .rz-popup.rz-navigation-menu .rz-navigation-item-link:hover { background: var(--rz-base-100, #f1f5f9) !important; } /* ═══════════════════════════════════════════════════════════════════════════ MAIN LAYOUT - PROFILE MENU + HEADER ACTIONS + CUSTOM MENU (movido desde MainLayout.razor) ═══════════════════════════════════════════════════════════════════════════ */ .profile-menu-custom .rz-profile-menu-button { background: transparent !important; border: 1px solid var(--rz-base-300) !important; border-radius: var(--rz-border-radius) !important; padding: 0.35rem 0.75rem !important; transition: all 0.2s ease !important; } .profile-menu-custom .rz-profile-menu-button:hover { background: var(--rz-base-200) !important; border-left-color: var(--rz-primary) !important; } .header-actions .rz-button, .header-actions .rz-button .rz-button-text, .header-actions .rz-button .rz-button-icon { color: var(--rz-on-primary, #ffffff) !important; background: transparent !important; } .header-actions .rz-button:hover, .header-actions .rz-button:focus, .header-actions .rz-button:focus-visible { background: transparent !important; color: var(--rz-on-primary, #ffffff) !important; opacity: 0.8; } .header-actions .rz-button:hover .rz-button-text, .header-actions .rz-button:hover .rz-button-icon { color: var(--rz-on-primary, #ffffff) !important; } /* Dropdown del perfil */ .rz-profile-menu-popup { background: var(--rz-panel-background-color) !important; border: 1px solid var(--rz-base-300) !important; box-shadow: var(--rz-shadow-6) !important; border-radius: var(--rz-border-radius) !important; } .rz-profile-menu-popup .rz-navigation-item { color: var(--rz-text-color) !important; padding: 0.75rem 1rem !important; } .rz-profile-menu-popup .rz-navigation-item:hover { background: var(--rz-base-200) !important; color: var(--rz-primary) !important; } .rz-profile-menu-popup .rz-navigation-item-icon { color: var(--rz-text-secondary-color) !important; } .rz-profile-menu-popup .rz-navigation-item:hover .rz-navigation-item-icon { color: var(--rz-primary) !important; } /* Loading container */ .loading-container { display: flex; justify-content: center; align-items: center; height: 100vh; } /* ═══════════════════════════════════════════════════════════════════════════════ SIDEBAR CORPORATE - Holded-style navigation ═══════════════════════════════════════════════════════════════════════════════ */ /* Sidebar corporate container */ .sidebar-corporate { display: flex; flex-direction: column; transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } /* Hover area wrapper fills entire sidebar */ .sidebar-hover-area { display: flex; flex-direction: column; height: 100%; min-height: 0; } .sidebar-corporate.sidebar-collapsed { width: 64px !important; } /* Del token, no de un literal. Había TRES sitios diciendo el ancho del carril —este `!important`, el estilo en línea de MainLayout y `--rz-sidebar-width`— y sólo mandaba éste, así que cambiar el token no hacía absolutamente nada. Ahora los tres apuntan al mismo valor y se ajusta en un único sitio. */ .sidebar-corporate.sidebar-expanded { width: var(--rz-sidebar-width, 320px) !important; } .sidebar-corporate .rz-panel-menu { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.5rem 0.625rem; scrollbar-width: thin; scrollbar-color: transparent transparent; } .sidebar-corporate .rz-panel-menu:hover { scrollbar-color: var(--rz-base-300) transparent; } .sidebar-corporate .rz-panel-menu::-webkit-scrollbar { width: 4px; } .sidebar-corporate .rz-panel-menu::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } .sidebar-corporate .rz-panel-menu:hover::-webkit-scrollbar-thumb { background: var(--rz-base-300); } /* Sidebar Header: logo + collapse arrow on ONE row — Jira-style clean. `flex-wrap: nowrap` + the fixed height are load-bearing: the toggle must never drop to a second line and grow an empty band under the brand. */ .sidebar-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 0.5rem; padding: 0 0.75rem; border-bottom: 1px solid var(--rz-base-100); min-height: 48px; height: 48px; flex-shrink: 0; overflow: hidden; } .sidebar-brand { display: flex; align-items: center; gap: 0.625rem; min-width: 0; flex: 1; } .sidebar-brand-text { font-weight: 700; font-size: 0.9375rem; color: var(--rz-text-title-color); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-brand-collapsed { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 28px; } /* Collapsed rail: the logo and the expand toggle share the SAME 28px slot, so the header stays a single 48px row and no extra band is needed for the arrow. */ .sidebar-rail-logo { display: flex; align-items: center; justify-content: center; transition: opacity 0.15s ease; } .sidebar-collapse-btn-rail { position: absolute; inset: 0; margin: auto; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .sidebar-header:hover .sidebar-rail-logo { opacity: 0; } .sidebar-header:hover .sidebar-collapse-btn-rail, .sidebar-collapse-btn-rail:focus-visible { opacity: 1; pointer-events: auto; } /* Touch devices never fire hover, and there the rail has no other way back to the expanded menu — show the toggle permanently and drop the logo from the slot. */ @media (hover: none) { .sidebar-rail-logo { display: none; } .sidebar-collapse-btn-rail { opacity: 1; pointer-events: auto; } } /* Collapse/Expand arrow button - Holded style */ .sidebar-collapse-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--rz-base-300); border-radius: 50%; background: var(--rz-base-background-color); color: var(--rz-text-secondary-color); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; padding: 0; outline: none; box-shadow: var(--rz-shadow-xs); } .sidebar-collapse-btn:hover { background: var(--rz-primary-lighter); border-color: var(--rz-primary); color: var(--rz-primary); box-shadow: var(--rz-shadow-1); } .sidebar-collapse-btn:active { transform: scale(0.92); } .sidebar-collapse-btn .rzi, .sidebar-collapse-btn .material-icons { font-size: 18px !important; } /* Dark mode collapse button */ :root.rz-dark .sidebar-collapse-btn, [data-bs-theme="dark"] .sidebar-collapse-btn { background: var(--rz-base-100); border-color: var(--rz-base-300); color: var(--rz-text-secondary-color); } :root.rz-dark .sidebar-collapse-btn:hover, [data-bs-theme="dark"] .sidebar-collapse-btn:hover { background: rgba(99, 102, 241, 0.15); border-color: var(--rz-primary); color: var(--rz-primary-light); } :root.rz-dark .sidebar-brand-text, [data-bs-theme="dark"] .sidebar-brand-text { color: var(--rz-text-title-color); } :root.rz-dark .sidebar-header, [data-bs-theme="dark"] .sidebar-header { border-bottom-color: var(--rz-base-200); } /* Sidebar Footer: Configure menu - appears on hover */ .sidebar-footer { flex-shrink: 0; border-top: 1px solid var(--rz-base-200); padding: 0.25rem 0.5rem; opacity: 0; transition: opacity 0.2s ease; } .sidebar-corporate:hover .sidebar-footer { opacity: 1; } /* Always visible on mobile/touch */ @media (hover: none) { .sidebar-footer { opacity: 1; } } .sidebar-config-btn { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border: none; border-radius: var(--rz-panel-menu-item-border-radius, 8px); background: transparent; color: var(--rz-text-tertiary-color); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.15s ease; outline: none; text-align: left; } .sidebar-config-btn:hover { background: var(--rz-panel-menu-item-hover-background-color); color: var(--rz-primary); } .sidebar-config-btn .rzi, .sidebar-config-btn .material-icons { font-size: 20px; color: inherit; transition: transform 0.15s ease; } .sidebar-config-btn:hover .rzi, .sidebar-config-btn:hover .material-icons { transform: rotate(45deg); } :root.rz-dark .sidebar-footer, [data-bs-theme="dark"] .sidebar-footer { border-top-color: var(--rz-base-200); } :root.rz-dark .sidebar-config-btn:hover, [data-bs-theme="dark"] .sidebar-config-btn:hover { background: var(--rz-panel-menu-item-hover-background-color); color: var(--rz-primary-light); } /* ═══════════════════════════════════════════════════════════════════════════════ SIDEBAR SECTION LABELS — "Recientes" / "Todos los proyectos" dividers ═══════════════════════════════════════════════════════════════════════════════ */ .sidebar-section-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rz-text-tertiary-color); padding: 10px 10px 4px; margin: 0; line-height: 1; -webkit-user-select: none; user-select: none; } .sidebar-section-label-separator { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--rz-base-100); } /* Empty-state placeholder shown below the "Recientes" label when the user hasn't opened any project yet. Kept tiny and discrete so the menu still feels intentional (not like an empty / broken panel). */ .sidebar-empty-hint { padding: 4px 10px 8px; font-size: 0.72rem; font-style: italic; color: var(--rz-text-tertiary-color); line-height: 1.3; } :root.rz-dark .sidebar-section-label, [data-bs-theme="dark"] .sidebar-section-label { color: var(--rz-text-tertiary-color); } :root.rz-dark .sidebar-section-label-separator, [data-bs-theme="dark"] .sidebar-section-label-separator { border-top-color: var(--rz-base-200); } /* ═══════════════════════════════════════════════════════════════════════════════ SIDEBAR PROJECT ITEMS - Jira-style minimalist project shortcuts ═══════════════════════════════════════════════════════════════════════════════ */ /* Scrollable container for the full projects list in the sidebar submenu. Caps height so long project lists don't push the rest of the menu off-screen. */ .sidebar-projects-scroll { max-height: 340px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; } .sidebar-projects-scroll::-webkit-scrollbar { width: 6px; } .sidebar-projects-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--rz-text-tertiary-color) 30%, transparent); border-radius: 4px; } .sidebar-project-item { display: flex; align-items: center; gap: 10px; padding: 5px 8px; margin: 1px 0; border-radius: 6px; cursor: pointer; transition: background-color 0.15s ease; } .sidebar-project-item:hover { background: var(--rz-base-100); } .sidebar-project-avatar { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .sidebar-project-initials { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; letter-spacing: 0.3px; transition: transform 0.15s ease; } .sidebar-project-item:hover .sidebar-project-initials { transform: scale(1.06); } .sidebar-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--rz-text-color); font-weight: 400; line-height: 1.4; } .sidebar-project-active-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rz-primary); flex-shrink: 0; margin-left: auto; } .sidebar-project-recent-indicator { width: 5px; height: 5px; border-radius: 50%; background: var(--rz-base-300); flex-shrink: 0; margin-left: auto; opacity: 0.6; } /* Current project — subtle highlight, no border */ .sidebar-project-current { background: rgba(79, 70, 229, 0.06); } .sidebar-project-current:hover { background: rgba(79, 70, 229, 0.10); } .sidebar-project-current .sidebar-project-name { font-weight: 500; color: var(--rz-primary); } /* Recently visited — almost invisible differentiation */ .sidebar-project-recent { background: transparent; } .sidebar-project-recent .sidebar-project-name { font-weight: 400; color: var(--rz-text-color); } /* Dark mode */ :root.rz-dark .sidebar-project-current, [data-bs-theme="dark"] .sidebar-project-current { background: rgba(79, 70, 229, 0.10); } :root.rz-dark .sidebar-project-current .sidebar-project-name, [data-bs-theme="dark"] .sidebar-project-current .sidebar-project-name { color: var(--rz-primary-light); } :root.rz-dark .sidebar-project-item:hover, [data-bs-theme="dark"] .sidebar-project-item:hover { background: rgba(255,255,255,0.05); } /* Collapsed sidebar: compact icon-only layout (no header shown when collapsed) */ /* Hide popup submenus when sidebar is collapsed (icon-only mode) */ body:has(.sidebar-collapsed) > .rz-popup.rz-navigation-menu { display: none !important; } .sidebar-collapsed .rz-panel-menu { padding: 0.25rem; } /* Collapsed: panel menu items centered */ .sidebar-collapsed .rz-navigation-item-link { justify-content: center !important; padding: 0.625rem !important; border-radius: 10px; margin: 1px 0; } .sidebar-collapsed .rz-navigation-item-link .rzi, .sidebar-collapsed .rz-navigation-item-link .material-icons { font-size: 18px !important; margin: 0 !important; } /* Collapsed: config button centered */ .sidebar-collapsed .sidebar-config-btn { justify-content: center; padding: 0.5rem; } /* ─── Collapsed rail = icons only, never truncated words ─────────────────────── Radzen drops its own `.rz-navigation-item-text` span under MenuItemDisplayStyle.Icon, but items that render through a