/** * e-MOTIOM — tokens semánticos para informes (--em-rep-*). * Cargar después de css.css (requiere variables --motiom-*). * Tema activo: data-motiom-em-theme en (mist | blush | dawn | frost | ember). * “default”: sin atributo o preferencia por defecto en localStorage. */ :root { --em-rep-accent: var(--motiom-verde_oscuro2); --em-rep-accent-soft: #52606d; --em-rep-panel-border: var(--motiom-verde_claro3); --em-rep-panel-surface: var(--motiom-verde_claro4); --em-rep-toolbar-divider: rgba(82, 96, 109, 0.22); --em-rep-focus-ring: var(--motiom-verde_oscuro2); --em-rep-focus-bg: rgba(255, 255, 255, 0.42); --em-rep-table-border: #a9d08e; --em-rep-table-filter-bg: #f0f6f4; --em-rep-table-filter-border-bottom: #d9e7e3; --em-rep-table-sort-bg: #e3f3ef; --em-rep-table-sort-border: #a9d08e; --em-rep-table-shadow-rgba: rgba(0, 0, 0, 0.05); --em-rep-muted-text: #52606d; --em-rep-btn-border: #007f6e; --em-rep-btn-bg: #acdfd7; --em-rep-kpi-label: var(--motiom-granate); --em-rep-notice-border: var(--motiom-verde_claro3); --em-rep-notice-bg: var(--motiom-verde_claro4); --em-rep-notice-text: var(--motiom-verde_oscuro2); --em-rep-ge-overlay-wait: rgba(227, 243, 239, 0.72); --em-rep-ge-subtitle-strong: #3d4a5c; --em-rep-danger-text: #b3261e; --em-rep-ge-row-invoiced-bg: var(--motiom-verde_claro4); --em-rep-ge-row-open-bg: var(--extra-motiom-verde_claro5); --em-rep-ge-row-not-invoiced-bg: #ffffff; --em-rep-ge-row-alt-bg: var(--motiom-gris2); --em-rep-ge-row-muted-bg: var(--motiom-gris3); --em-rep-ge-valor-factura-bg: var(--motiom-pastel); --em-rep-ge-inline-field-bg: #eef2f4; --em-rep-ge-inline-field-border: #e2e8f0; --em-rep-ge-inline-field-text: #1f2933; --em-rep-ge-action-accent: var(--motiom-verde_oscuro1); --em-rep-ge-action-muted: var(--motiom-gris1); /* Shell: fondo de página y celdas tabla (casi blanco, tinte suave) */ --em-rep-shell-bg: #f5fffa; --em-rep-table-generic-cell-bg: #fbfffc; --em-rep-table-generic-th-text: var(--motiom-verde_oscuro2); --em-rep-col-sort-icon: var(--motiom-verde_oscuro2); /* Menú lateral izquierdo */ --em-rep-side-menu-bg: var(--motiom-verde_oscuro2); --em-rep-side-menu-muted-text: var(--motiom-gris4); --em-rep-side-menu-section-title: rgba(245, 247, 250, 0.82); --em-rep-side-menu-link-bg: #acdfd7; --em-rep-side-menu-link-hover-bg: var(--motiom-verde_claro1); --em-rep-side-menu-toggle-hover: var(--motiom-verde_claro4); --em-rep-side-menu-footer: rgba(245, 247, 250, 0.6); --em-rep-side-menu-scrollbar-thumb: rgba(255, 255, 255, 0.16); --em-rep-side-menu-scrollbar-thumb-hover: rgba(255, 255, 255, 0.24); --em-rep-menu-toggle-bg-start: var(--motiom-verde_claro3); --em-rep-menu-toggle-bg-end: var(--motiom-verde_claro3); --em-rep-menu-toggle-icon: #ffffff; --em-rep-menu-toggle-focus-ring: rgba(47, 213, 165, 0.5); /* Cabecera app e-MOTIOM */ --em-rep-app-header-bg: rgba(245, 255, 250, 0.95); --em-rep-app-header-border: rgba(22, 130, 135, 0.12); --em-rep-app-header-title: #168287; --em-rep-app-header-subtitle: rgba(0, 92, 74, 0.68); --em-rep-app-header-version: rgba(0, 92, 74, 0.65); --em-rep-app-header-menu-icon-bg: rgba(0, 127, 110, 0.08); --em-rep-app-header-menu-icon-bg-hover: rgba(0, 127, 110, 0.18); --em-rep-app-header-menu-icon-outline: rgba(0, 127, 110, 0.35); --em-rep-app-header-menu-icon-fill: var(--motiom-verde_oscuro2); --em-rep-app-header-menu-link-hover-bg: rgba(107, 205, 178, 0.24); --em-rep-app-header-menu-user-bg: rgba(22, 130, 135, 0.08); /* Tarjeta KPI informativa (.motiom-kpi-info-card, tt-kpi-gate mensaje) */ --em-rep-kpi-info-border: #007f6e; --em-rep-kpi-info-bg: #acdfd7; --em-rep-kpi-info-text: var(--motiom-granate); /* Login e-MOTIOM (logo motiom1.svg vía máscara; botón Entrar puede desviarse del accent) */ --em-rep-login-mark: var(--em-rep-app-header-title); --em-rep-login-submit-bg: var(--em-rep-accent); --em-rep-login-submit-color: var(--motiom-blanco); --em-rep-login-warm-border: var(--em-rep-toolbar-field-border); /* Controles toolbar / pickers (select, botones secundarios, zoom) */ --em-rep-toolbar-field-border: var(--motiom-verde_claro1); --em-rep-toolbar-field-text: var(--motiom-verde_oscuro2); --em-rep-toolbar-field-bg: #ffffff; --em-rep-toolbar-btn-hover-bg: var(--motiom-verde_claro4); --em-rep-toolbar-btn-hover-border: var(--motiom-verde_oscuro2); --em-rep-toolbar-focus-ring: var(--motiom-verde_oscuro2); --em-rep-toolbar-range-accent: rgba(22, 130, 135, 0.55); --em-rep-toolbar-range-track: rgba(0, 0, 0, 0.12); --em-rep-toolbar-range-thumb: rgba(22, 130, 135, 0.78); --em-rep-picker-toggle-active: var(--motiom-verde_oscuro1); --em-rep-picker-label-hover-bg: #e6f4f3; --em-rep-picker-visibility-border: var(--motiom-verde_claro3); --em-rep-picker-visibility-bg: var(--motiom-verde_claro4); --em-rep-picker-visibility-text: var(--motiom-verde_oscuro2); /* Scrollbars (scrollbar-color + WebKit) */ --em-rep-scrollbar-track: rgba(0, 0, 0, 0.06); --em-rep-scrollbar-thumb: rgba(22, 130, 135, 0.35); --em-rep-scrollbar-thumb-hover: rgba(22, 130, 135, 0.52); } html[data-motiom-em-theme="mist"] { --em-rep-accent: #3d5a80; --em-rep-accent-soft: #4a5f78; --em-rep-panel-border: var(--motiom-azul_claro1); --em-rep-panel-surface: #eef4fb; --em-rep-toolbar-divider: rgba(72, 94, 120, 0.22); --em-rep-focus-ring: #3d5a80; --em-rep-table-border: #9eb8d9; --em-rep-table-filter-bg: #f2f6fb; --em-rep-table-filter-border-bottom: #cfddee; --em-rep-table-sort-bg: #e5ecf8; --em-rep-table-sort-border: #8fa8cc; --em-rep-muted-text: #4a5f78; --em-rep-btn-border: var(--motiom-azul_oscuro1); --em-rep-btn-bg: var(--motiom-azul_claro1); --em-rep-notice-border: var(--motiom-azul_claro1); --em-rep-notice-bg: #f4f8fd; --em-rep-notice-text: #3d5a80; --em-rep-ge-overlay-wait: rgba(228, 236, 248, 0.82); --em-rep-ge-row-invoiced-bg: #e8f0fb; --em-rep-ge-row-open-bg: #f4f8fd; --em-rep-shell-bg: #f4f8fc; --em-rep-table-generic-cell-bg: #fafcfe; --em-rep-table-generic-th-text: #3d5a80; --em-rep-col-sort-icon: #3d5a80; --em-rep-side-menu-bg: #3d5a80; --em-rep-side-menu-muted-text: #e8eef4; --em-rep-side-menu-section-title: rgba(255, 255, 255, 0.88); --em-rep-side-menu-link-bg: #c8daf4; --em-rep-side-menu-link-hover-bg: #b0c9ec; --em-rep-side-menu-toggle-hover: #eef4fb; --em-rep-side-menu-footer: rgba(255, 255, 255, 0.58); --em-rep-menu-toggle-bg-start: var(--motiom-azul_claro1); --em-rep-menu-toggle-bg-end: #8eb4e8; --em-rep-menu-toggle-focus-ring: rgba(171, 198, 235, 0.55); --em-rep-app-header-bg: rgba(244, 248, 252, 0.96); --em-rep-app-header-border: rgba(61, 90, 128, 0.14); --em-rep-app-header-title: #3d5a80; --em-rep-app-header-subtitle: rgba(45, 70, 98, 0.72); --em-rep-app-header-version: rgba(45, 70, 98, 0.62); --em-rep-app-header-menu-icon-bg: rgba(61, 90, 128, 0.1); --em-rep-app-header-menu-icon-bg-hover: rgba(61, 90, 128, 0.2); --em-rep-app-header-menu-icon-outline: rgba(61, 90, 128, 0.38); --em-rep-app-header-menu-icon-fill: #3d5a80; --em-rep-app-header-menu-link-hover-bg: rgba(171, 198, 235, 0.38); --em-rep-app-header-menu-user-bg: rgba(61, 90, 128, 0.1); --em-rep-kpi-info-border: #5a7aad; --em-rep-kpi-info-bg: #dce8f8; --em-rep-kpi-info-text: #3a4f6e; --em-rep-toolbar-field-border: #9eb8d9; --em-rep-toolbar-field-text: #3d5a80; --em-rep-toolbar-field-bg: #ffffff; --em-rep-toolbar-btn-hover-bg: #e8f0fb; --em-rep-toolbar-btn-hover-border: #3d5a80; --em-rep-toolbar-focus-ring: #3d5a80; --em-rep-toolbar-range-accent: rgba(61, 90, 128, 0.45); --em-rep-toolbar-range-track: rgba(0, 0, 0, 0.1); --em-rep-toolbar-range-thumb: rgba(61, 90, 128, 0.55); --em-rep-picker-toggle-active: #3d5a80; --em-rep-picker-label-hover-bg: #eef4fb; --em-rep-picker-visibility-border: var(--motiom-azul_claro1); --em-rep-picker-visibility-bg: #f4f8fd; --em-rep-picker-visibility-text: #3d5a80; --em-rep-scrollbar-track: rgba(0, 0, 0, 0.06); --em-rep-scrollbar-thumb: rgba(61, 90, 128, 0.32); --em-rep-scrollbar-thumb-hover: rgba(61, 90, 128, 0.48); } html[data-motiom-em-theme="blush"] { --em-rep-accent: #8b5a6b; --em-rep-accent-soft: #6b4552; --em-rep-panel-border: #e8c9cf; --em-rep-panel-surface: #fdf8f9; --em-rep-toolbar-divider: rgba(140, 90, 107, 0.2); --em-rep-focus-ring: var(--motiom-granate); --em-rep-table-border: #e8c9cf; --em-rep-table-filter-bg: #faf5f6; --em-rep-table-filter-border-bottom: #efd8dc; --em-rep-table-sort-bg: #f5e8ec; --em-rep-table-sort-border: #dcb8c2; --em-rep-muted-text: #6b4552; --em-rep-btn-border: #c98ba0; --em-rep-btn-bg: var(--motiom-pastel); --em-rep-notice-border: var(--motiom-pastel); --em-rep-notice-bg: #fcf5f7; --em-rep-notice-text: #6b4552; --em-rep-ge-overlay-wait: rgba(253, 248, 249, 0.88); --em-rep-ge-row-invoiced-bg: #fcf5f7; --em-rep-ge-row-open-bg: #fffafc; --em-rep-shell-bg: #fefbfc; --em-rep-table-generic-cell-bg: #fffafb; --em-rep-table-generic-th-text: #8b5a6b; --em-rep-col-sort-icon: #8b5a6b; --em-rep-side-menu-bg: #7a4d5e; --em-rep-side-menu-muted-text: #f8eef1; --em-rep-side-menu-section-title: rgba(255, 248, 250, 0.9); --em-rep-side-menu-link-bg: #f0d4dc; --em-rep-side-menu-link-hover-bg: #e8bec9; --em-rep-side-menu-toggle-hover: #fdf4f6; --em-rep-side-menu-footer: rgba(255, 248, 250, 0.58); --em-rep-menu-toggle-bg-start: #f0d4dc; --em-rep-menu-toggle-bg-end: #e8c9cf; --em-rep-menu-toggle-focus-ring: rgba(239, 216, 220, 0.65); --em-rep-app-header-bg: rgba(254, 251, 252, 0.96); --em-rep-app-header-border: rgba(139, 90, 107, 0.14); --em-rep-app-header-title: #8b5a6b; --em-rep-app-header-subtitle: rgba(90, 55, 68, 0.72); --em-rep-app-header-version: rgba(90, 55, 68, 0.62); --em-rep-app-header-menu-icon-bg: rgba(139, 90, 107, 0.1); --em-rep-app-header-menu-icon-bg-hover: rgba(139, 90, 107, 0.2); --em-rep-app-header-menu-icon-outline: rgba(139, 90, 107, 0.38); --em-rep-app-header-menu-icon-fill: #8b5a6b; --em-rep-app-header-menu-link-hover-bg: rgba(232, 201, 207, 0.45); --em-rep-app-header-menu-user-bg: rgba(139, 90, 107, 0.12); --em-rep-kpi-info-border: #c98ba0; --em-rep-kpi-info-bg: #f5e4e9; --em-rep-kpi-info-text: #6b4552; --em-rep-toolbar-field-border: #dcb8c2; --em-rep-toolbar-field-text: #8b5a6b; --em-rep-toolbar-field-bg: #ffffff; --em-rep-toolbar-btn-hover-bg: #fcf5f7; --em-rep-toolbar-btn-hover-border: #8b5a6b; --em-rep-toolbar-focus-ring: #8b5a6b; --em-rep-toolbar-range-accent: rgba(139, 90, 107, 0.45); --em-rep-toolbar-range-track: rgba(140, 90, 107, 0.12); --em-rep-toolbar-range-thumb: rgba(139, 90, 107, 0.5); --em-rep-picker-toggle-active: #9c5d6d; --em-rep-picker-label-hover-bg: #fdf4f6; --em-rep-picker-visibility-border: #e8c9cf; --em-rep-picker-visibility-bg: #fdf8f9; --em-rep-picker-visibility-text: #8b5a6b; --em-rep-scrollbar-track: rgba(139, 90, 107, 0.08); --em-rep-scrollbar-thumb: rgba(139, 90, 107, 0.3); --em-rep-scrollbar-thumb-hover: rgba(139, 90, 107, 0.46); } html[data-motiom-em-theme="dawn"] { --em-rep-accent: var(--motiom-verde_oscuro2); --em-rep-accent-soft: #5c5349; --em-rep-panel-border: var(--motiom-naranja); --em-rep-panel-surface: #fffbf8; --em-rep-toolbar-divider: rgba(180, 130, 90, 0.22); --em-rep-focus-ring: #c17a4a; --em-rep-table-border: #f0d4bc; --em-rep-table-filter-bg: #fffcfa; --em-rep-table-filter-border-bottom: #f0e6df; --em-rep-table-sort-bg: #fff8f5; --em-rep-table-sort-border: #f0d4bc; --em-rep-muted-text: #5c5349; --em-rep-btn-border: #d4946a; --em-rep-btn-bg: var(--motiom-naranja); --em-rep-notice-border: #f6cba8; --em-rep-notice-bg: #fff8f4; --em-rep-notice-text: #5c4033; --em-rep-ge-overlay-wait: rgba(255, 250, 248, 0.88); --em-rep-ge-row-invoiced-bg: #fff7f2; --em-rep-ge-row-open-bg: #fffcfa; --em-rep-shell-bg: #fffcfa; --em-rep-table-generic-cell-bg: #fffcfa; --em-rep-table-generic-th-text: #168287; --em-rep-col-sort-icon: #168287; --em-rep-side-menu-bg: #1a6f66; --em-rep-side-menu-muted-text: #fff5ee; --em-rep-side-menu-section-title: rgba(255, 250, 245, 0.88); --em-rep-side-menu-link-bg: #e8f6f2; --em-rep-side-menu-link-hover-bg: #d4eee7; --em-rep-side-menu-toggle-hover: #f2faf7; --em-rep-side-menu-footer: rgba(255, 250, 245, 0.58); --em-rep-menu-toggle-bg-start: var(--motiom-naranja); --em-rep-menu-toggle-bg-end: #f0a878; --em-rep-menu-toggle-focus-ring: rgba(246, 186, 138, 0.55); --em-rep-app-header-bg: rgba(255, 252, 250, 0.96); --em-rep-app-header-border: rgba(193, 122, 74, 0.18); --em-rep-app-header-title: #168287; --em-rep-app-header-subtitle: rgba(92, 64, 51, 0.72); --em-rep-app-header-version: rgba(92, 64, 51, 0.62); --em-rep-app-header-menu-icon-bg: rgba(193, 122, 74, 0.12); --em-rep-app-header-menu-icon-bg-hover: rgba(193, 122, 74, 0.22); --em-rep-app-header-menu-icon-outline: rgba(193, 122, 74, 0.4); --em-rep-app-header-menu-icon-fill: #168287; --em-rep-app-header-menu-link-hover-bg: rgba(246, 186, 138, 0.32); --em-rep-app-header-menu-user-bg: rgba(193, 122, 74, 0.12); --em-rep-kpi-info-border: #d4946a; --em-rep-kpi-info-bg: #fff2e8; --em-rep-kpi-info-text: #5c4033; --em-rep-toolbar-field-border: #e8c9a8; --em-rep-toolbar-field-text: #168287; --em-rep-toolbar-field-bg: #ffffff; --em-rep-toolbar-btn-hover-bg: #fff8f4; --em-rep-toolbar-btn-hover-border: #d4946a; --em-rep-toolbar-focus-ring: #c17a4a; --em-rep-toolbar-range-accent: rgba(193, 122, 74, 0.55); --em-rep-toolbar-range-track: rgba(180, 130, 90, 0.15); --em-rep-toolbar-range-thumb: rgba(22, 130, 135, 0.65); --em-rep-picker-toggle-active: #007f6e; --em-rep-picker-label-hover-bg: #fff6f0; --em-rep-picker-visibility-border: #f6cba8; --em-rep-picker-visibility-bg: #fffaf6; --em-rep-picker-visibility-text: #168287; --em-rep-scrollbar-track: rgba(193, 122, 74, 0.1); --em-rep-scrollbar-thumb: rgba(22, 130, 135, 0.35); --em-rep-scrollbar-thumb-hover: rgba(193, 122, 74, 0.45); --em-rep-login-submit-bg: #c17a4a; --em-rep-login-submit-color: #ffffff; } /* Verde predominante + superficies blancas (similar al estándar, más limpio) */ html[data-motiom-em-theme="frost"] { --em-rep-accent: var(--motiom-verde_oscuro2); --em-rep-accent-soft: #52606d; --em-rep-panel-border: #d2ebe3; --em-rep-panel-surface: #ffffff; --em-rep-toolbar-divider: rgba(82, 96, 109, 0.16); --em-rep-focus-ring: var(--motiom-verde_oscuro2); --em-rep-table-border: #c8e6d8; --em-rep-table-filter-bg: #ffffff; --em-rep-table-filter-border-bottom: #eaf6f1; --em-rep-table-sort-bg: #f7fcfa; --em-rep-table-sort-border: #bce5d4; --em-rep-muted-text: #52606d; --em-rep-btn-border: #007f6e; --em-rep-btn-bg: #d5f0ea; --em-rep-notice-border: var(--motiom-verde_claro3); --em-rep-notice-bg: #ffffff; --em-rep-notice-text: var(--motiom-verde_oscuro2); --em-rep-ge-overlay-wait: rgba(255, 255, 255, 0.9); --em-rep-ge-row-invoiced-bg: #f6fdfb; --em-rep-ge-row-open-bg: #ffffff; --em-rep-shell-bg: #ffffff; --em-rep-table-generic-cell-bg: #ffffff; --em-rep-table-generic-th-text: var(--motiom-verde_oscuro2); --em-rep-col-sort-icon: var(--motiom-verde_oscuro2); --em-rep-side-menu-bg: var(--motiom-verde_oscuro2); --em-rep-side-menu-muted-text: var(--motiom-gris4); --em-rep-side-menu-section-title: rgba(245, 247, 250, 0.82); --em-rep-side-menu-link-bg: #acdfd7; --em-rep-side-menu-link-hover-bg: var(--motiom-verde_claro1); --em-rep-side-menu-toggle-hover: var(--motiom-verde_claro4); --em-rep-side-menu-footer: rgba(245, 247, 250, 0.6); --em-rep-menu-toggle-bg-start: var(--motiom-verde_claro3); --em-rep-menu-toggle-bg-end: var(--motiom-verde_claro3); --em-rep-menu-toggle-focus-ring: rgba(47, 213, 165, 0.5); --em-rep-app-header-bg: rgba(255, 255, 255, 0.97); --em-rep-app-header-border: rgba(22, 130, 135, 0.1); --em-rep-app-header-title: #168287; --em-rep-app-header-subtitle: rgba(0, 92, 74, 0.68); --em-rep-app-header-version: rgba(0, 92, 74, 0.65); --em-rep-app-header-menu-icon-bg: rgba(0, 127, 110, 0.08); --em-rep-app-header-menu-icon-bg-hover: rgba(0, 127, 110, 0.18); --em-rep-app-header-menu-icon-outline: rgba(0, 127, 110, 0.35); --em-rep-app-header-menu-icon-fill: var(--motiom-verde_oscuro2); --em-rep-app-header-menu-link-hover-bg: rgba(107, 205, 178, 0.24); --em-rep-app-header-menu-user-bg: rgba(22, 130, 135, 0.08); --em-rep-kpi-info-border: #007f6e; --em-rep-kpi-info-bg: #e8f8f4; --em-rep-kpi-info-text: var(--motiom-granate); --em-rep-toolbar-field-border: var(--motiom-verde_claro1); --em-rep-toolbar-field-text: var(--motiom-verde_oscuro2); --em-rep-toolbar-field-bg: #ffffff; --em-rep-toolbar-btn-hover-bg: #eef9f6; --em-rep-toolbar-btn-hover-border: var(--motiom-verde_oscuro2); --em-rep-toolbar-focus-ring: var(--motiom-verde_oscuro2); --em-rep-toolbar-range-accent: rgba(22, 130, 135, 0.48); --em-rep-toolbar-range-track: rgba(0, 0, 0, 0.08); --em-rep-toolbar-range-thumb: rgba(22, 130, 135, 0.62); --em-rep-picker-toggle-active: var(--motiom-verde_oscuro1); --em-rep-picker-label-hover-bg: #f1faf7; --em-rep-picker-visibility-border: var(--motiom-verde_claro3); --em-rep-picker-visibility-bg: #ffffff; --em-rep-picker-visibility-text: var(--motiom-verde_oscuro2); --em-rep-scrollbar-track: rgba(0, 0, 0, 0.05); --em-rep-scrollbar-thumb: rgba(22, 130, 135, 0.26); --em-rep-scrollbar-thumb-hover: rgba(22, 130, 135, 0.42); --em-rep-login-submit-bg: var(--motiom-verde_oscuro2); --em-rep-login-submit-color: var(--motiom-blanco); } /* Verde predominante + matices cálidos Motiom (pastel, granate suave, naranja); lectura general sobre blanco */ html[data-motiom-em-theme="ember"] { --em-rep-accent: var(--motiom-verde_oscuro2); --em-rep-accent-soft: #5c5349; --em-rep-panel-border: #e8d2c8; --em-rep-panel-surface: #ffffff; --em-rep-toolbar-divider: rgba(156, 93, 109, 0.16); --em-rep-focus-ring: #c17a4a; --em-rep-table-border: #e5d6cc; --em-rep-table-filter-bg: #ffffff; --em-rep-table-filter-border-bottom: #ece6e2; --em-rep-table-sort-bg: #f7f9f8; --em-rep-table-sort-border: #e8ddd6; --em-rep-muted-text: #5c5349; --em-rep-btn-border: #c98ba0; --em-rep-btn-bg: var(--motiom-pastel); --em-rep-notice-border: #f0d4bc; --em-rep-notice-bg: #ffffff; --em-rep-notice-text: #4d433f; --em-rep-ge-overlay-wait: rgba(255, 255, 255, 0.9); --em-rep-ge-row-invoiced-bg: #fafbfb; --em-rep-ge-row-open-bg: #ffffff; --em-rep-shell-bg: #ffffff; --em-rep-table-generic-cell-bg: #ffffff; --em-rep-table-generic-th-text: #168287; --em-rep-col-sort-icon: #168287; --em-rep-side-menu-bg: #147a72; --em-rep-side-menu-muted-text: #fff8f5; --em-rep-side-menu-section-title: rgba(255, 252, 250, 0.9); --em-rep-side-menu-link-bg: #e8f6f2; --em-rep-side-menu-link-hover-bg: #d4eee7; --em-rep-side-menu-toggle-hover: #fff5ee; --em-rep-side-menu-footer: rgba(255, 250, 245, 0.58); --em-rep-menu-toggle-bg-start: var(--motiom-verde_claro3); --em-rep-menu-toggle-bg-end: var(--motiom-naranja); --em-rep-menu-toggle-focus-ring: rgba(246, 186, 138, 0.55); --em-rep-app-header-bg: rgba(255, 255, 255, 0.97); --em-rep-app-header-border: rgba(193, 122, 74, 0.14); --em-rep-app-header-title: #168287; --em-rep-app-header-subtitle: rgba(92, 64, 51, 0.7); --em-rep-app-header-version: rgba(92, 64, 51, 0.58); --em-rep-app-header-menu-icon-bg: rgba(156, 93, 109, 0.09); --em-rep-app-header-menu-icon-bg-hover: rgba(156, 93, 109, 0.18); --em-rep-app-header-menu-icon-outline: rgba(193, 122, 74, 0.38); --em-rep-app-header-menu-icon-fill: #168287; --em-rep-app-header-menu-link-hover-bg: rgba(239, 216, 220, 0.42); --em-rep-app-header-menu-user-bg: rgba(22, 130, 135, 0.09); --em-rep-kpi-info-border: #b87a8f; --em-rep-kpi-info-bg: #fceef1; --em-rep-kpi-info-text: #6b4552; --em-rep-toolbar-field-border: #b5d9ce; --em-rep-toolbar-field-text: #168287; --em-rep-toolbar-field-bg: #ffffff; --em-rep-toolbar-btn-hover-bg: #f7f5f4; --em-rep-toolbar-btn-hover-border: #168287; --em-rep-toolbar-focus-ring: #168287; --em-rep-toolbar-range-accent: rgba(193, 122, 74, 0.52); --em-rep-toolbar-range-track: rgba(156, 93, 109, 0.12); --em-rep-toolbar-range-thumb: rgba(22, 130, 135, 0.7); --em-rep-picker-toggle-active: #007f6e; --em-rep-picker-label-hover-bg: #f5f5f4; --em-rep-picker-visibility-border: #e8c9cf; --em-rep-picker-visibility-bg: #ffffff; --em-rep-picker-visibility-text: #168287; --em-rep-scrollbar-track: rgba(156, 93, 109, 0.08); --em-rep-scrollbar-thumb: rgba(22, 130, 135, 0.32); --em-rep-scrollbar-thumb-hover: rgba(193, 122, 74, 0.4); --em-rep-login-warm-border: var(--em-rep-panel-border); } /* Shell UI — body, menú lateral, cabecera app, tablas genéricas, KPI informativo (usa tokens --em-rep-*) */ body { background-color: var(--em-rep-shell-bg); } .side-menu { background: var(--em-rep-side-menu-bg); color: var(--em-rep-side-menu-muted-text); } .side-menu .menu-title, .menu-section-title { color: var(--em-rep-side-menu-section-title); } .menu-section-toggle:hover, .menu-section-toggle:focus-visible { color: var(--em-rep-side-menu-toggle-hover); } .menu-item a { background: var(--em-rep-side-menu-link-bg); } .menu-item a:hover, .menu-item a:focus-visible { background: var(--em-rep-side-menu-link-hover-bg); } .menu-footer, .menu-version-message { color: var(--em-rep-side-menu-footer); } .menu-toggle { background: linear-gradient(135deg, var(--em-rep-menu-toggle-bg-start), var(--em-rep-menu-toggle-bg-end)); color: var(--em-rep-menu-toggle-icon); } .menu-toggle:focus-visible { outline: 3px solid var(--em-rep-menu-toggle-focus-ring); } .side-menu__scroll::-webkit-scrollbar-thumb { background: var(--em-rep-side-menu-scrollbar-thumb); } .side-menu__scroll::-webkit-scrollbar-thumb:hover { background: var(--em-rep-side-menu-scrollbar-thumb-hover); } .app-header { background: var(--em-rep-app-header-bg); border-bottom: 1px solid var(--em-rep-app-header-border); } .app-header__title { color: var(--em-rep-app-header-title); } .app-header__subtitle { color: var(--em-rep-app-header-subtitle); } .app-header__version { color: var(--em-rep-app-header-version); } .app-header .menu-icon { background: var(--em-rep-app-header-menu-icon-bg); } .app-header .menu-icon:hover { background: var(--em-rep-app-header-menu-icon-bg-hover); } .app-header .menu-icon:focus-visible { outline: 3px solid var(--em-rep-app-header-menu-icon-outline); } .app-header .menu-icon svg, .app-header .menu-icon:hover svg, .app-header .menu-icon:focus-visible svg { fill: var(--em-rep-app-header-menu-icon-fill); } .app-header__menu-user { background: var(--em-rep-app-header-menu-user-bg); } .app-header__menu-link:hover, .app-header__menu-link:focus-visible { background: var(--em-rep-app-header-menu-link-hover-bg); color: var(--em-rep-accent); outline: none; } .table_generic th { background-color: var(--em-rep-table-sort-bg); color: var(--em-rep-table-generic-th-text); border-color: var(--em-rep-table-border); } .table_generic td { background-color: var(--em-rep-table-generic-cell-bg); border-color: var(--em-rep-table-border); } .table-sortable .table-sortable-header__icon { color: var(--em-rep-col-sort-icon); } .motiom-kpi-info-card { border-color: var(--em-rep-kpi-info-border); background: var(--em-rep-kpi-info-bg); color: var(--em-rep-kpi-info-text); } /* Scrollbars (scrollbar-color thin + WebKit). También en body/.page-content: el scroll suele estar en .page-content o en wrappers de tabla (shell GE enlaza --em-rep-*). */ html { scrollbar-color: var(--em-rep-scrollbar-thumb) var(--em-rep-scrollbar-track); scrollbar-width: thick; } body { scrollbar-color: var(--em-rep-scrollbar-thumb) var(--em-rep-scrollbar-track); scrollbar-width: thick; } .page-content { scrollbar-color: var(--em-rep-scrollbar-thumb) var(--em-rep-scrollbar-track); scrollbar-width: thick; } html::-webkit-scrollbar, body::-webkit-scrollbar, .page-content::-webkit-scrollbar { width: 10px; height: 10px; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .page-content::-webkit-scrollbar-track { background: var(--em-rep-scrollbar-track); } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .page-content::-webkit-scrollbar-thumb { background: var(--em-rep-scrollbar-thumb); border-radius: 6px; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .page-content::-webkit-scrollbar-thumb:hover { background: var(--em-rep-scrollbar-thumb-hover); } /* Toolbar listados (TT / Huella / Gestión): selects, inputs y botones secundarios del panel */ .motiom-toolbar-table-controls-panel select, .motiom-toolbar-table-controls-panel select.csvcierres-date-input, .motiom-toolbar-table-controls-panel select.motiom-toolbar-input, .motiom-toolbar-table-controls-panel .motiom-toolbar-input[type="text"], .motiom-toolbar-table-controls-panel .motiom-toolbar-input[type="email"], .motiom-toolbar-table-controls-panel .motiom-toolbar-input[type="password"], .motiom-toolbar-table-controls-panel .motiom-toolbar-input[type="number"], .motiom-toolbar-table-controls-panel .motiom-toolbar-input[type="search"] { border-color: var(--em-rep-toolbar-field-border); color: var(--em-rep-toolbar-field-text); background-color: var(--em-rep-toolbar-field-bg); } .motiom-toolbar-table-controls-panel .motiom-action-btn { border-color: var(--em-rep-toolbar-field-border); color: var(--em-rep-toolbar-field-text); background: var(--em-rep-toolbar-field-bg); } .motiom-toolbar-table-controls-panel .motiom-action-btn:hover:not(:disabled) { background: var(--em-rep-toolbar-btn-hover-bg); border-color: var(--em-rep-toolbar-btn-hover-border); } .motiom-toolbar-table-controls-panel .motiom-action-btn:focus-visible { outline: 2px solid var(--em-rep-toolbar-focus-ring); outline-offset: 2px; } .motiom-toolbar-table-controls-panel .motiom-toolbar-range { accent-color: var(--em-rep-toolbar-range-accent); } .motiom-toolbar-table-controls-panel .motiom-toolbar-range::-moz-range-track { background: var(--em-rep-toolbar-range-track); } .motiom-toolbar-table-controls-panel .motiom-toolbar-range::-moz-range-progress { background: var(--em-rep-toolbar-range-accent); } .motiom-toolbar-table-controls-panel .motiom-toolbar-range::-moz-range-thumb { background: var(--em-rep-toolbar-range-thumb); } /* Modales picker (cliente / origen / destino): coherencia con tema */ .comercial-client-picker .motiom-action-btn.motiom-toolbar-action-btn { border-color: var(--em-rep-toolbar-field-border); color: var(--em-rep-toolbar-field-text); background: var(--em-rep-toolbar-field-bg); } .comercial-client-picker .motiom-action-btn.motiom-toolbar-action-btn:hover:not(:disabled) { background: var(--em-rep-toolbar-btn-hover-bg); border-color: var(--em-rep-toolbar-btn-hover-border); } .comercial-client-picker .motiom-action-btn.motiom-toolbar-action-btn:focus-visible { outline: 2px solid var(--em-rep-toolbar-focus-ring); outline-offset: 2px; } .comercial-client-picker .motiom-action-btn.motiom-toolbar-action-btn--icon-only.motiom-picker-show-selected-toggle--active { color: var(--em-rep-picker-toggle-active); } .comercial-client-picker-label:hover { background: var(--em-rep-picker-label-hover-bg); } .comercial-client-visibility-option { border-color: var(--em-rep-picker-visibility-border); background: var(--em-rep-picker-visibility-bg); color: var(--em-rep-picker-visibility-text); } .comercial-client-visibility-option input[type="checkbox"] { accent-color: var(--em-rep-accent); } /* Selector de tema (menú usuario e-MOTIOM) */ .app-header__menu-item--theme-row { padding: 0.35rem 0.75rem 0.5rem; } .app-header__theme-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .app-header__theme-swatch { width: 28px; height: 28px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; background: var(--motiom-blanco); cursor: pointer; box-sizing: border-box; } .app-header__theme-swatch:hover { border-color: var(--em-rep-accent); } .app-header__theme-swatch:focus-visible { outline: 2px solid var(--em-rep-accent); outline-offset: 2px; } .app-header__theme-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--em-rep-accent); border-color: var(--em-rep-accent); } .app-header__theme-swatch-preview { display: block; width: 100%; height: 100%; border-radius: 5px; } .app-header__theme-swatch--default .app-header__theme-swatch-preview { background: linear-gradient(135deg, #168287 0%, #168287 34%, #a9d08e 34%, #a9d08e 67%, #e3f3ef 67%, #e3f3ef 100%); } .app-header__theme-swatch--mist .app-header__theme-swatch-preview { background: linear-gradient(135deg, #3d5a80 0%, #3d5a80 34%, #9eb8d9 34%, #9eb8d9 67%, #eef4fb 67%, #eef4fb 100%); } .app-header__theme-swatch--blush .app-header__theme-swatch-preview { background: linear-gradient(135deg, #8b5a6b 0%, #8b5a6b 34%, #e8c9cf 34%, #e8c9cf 67%, #fdf8f9 67%, #fdf8f9 100%); } .app-header__theme-swatch--dawn .app-header__theme-swatch-preview { background: linear-gradient(135deg, #168287 0%, #168287 30%, #f6ba8a 30%, #f6ba8a 62%, #fff8f2 62%, #fff8f2 100%); } .app-header__theme-swatch--frost .app-header__theme-swatch-preview { background: linear-gradient(135deg, #168287 0%, #168287 28%, #acdfd7 28%, #acdfd7 52%, #ffffff 52%, #ffffff 100%); } .app-header__theme-swatch--ember .app-header__theme-swatch-preview { background: linear-gradient(135deg, #168287 0%, #168287 24%, #efd8dc 24%, #efd8dc 48%, #f6ba8a 48%, #f6ba8a 72%, #fff8f4 72%, #fff8f4 100%); }