/* * design-system.css * Tokens centralizados de diseño del AdminCenter. Cargar PRIMERO en _Layout.cshtml * para que las variables estén disponibles a todos los demás CSS. * * Convenciones: * - Colores: --color-* * - Spacing: --space-* (basado en 4px) * - Radius: --radius-* * - Shadow: --shadow-* * - Z-index: --z-* (escala estricta, NO usar valores literales) * - Transitions: --transition-* */ :root { /* ===== COLORES BASE ===== */ --color-primary: #0f172a; --color-primary-light: #1e293b; --color-primary-hover: #334155; --color-accent: #3b82f6; --color-accent-light: #60a5fa; --color-accent-dark: #2563eb; --color-highlight: #8b5cf6; /* ===== COLORES SEMÁNTICOS ===== */ --color-success: #10b981; --color-success-light: #d1fae5; --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-danger: #ef4444; --color-danger-light: #fee2e2; --color-info: #06b6d4; --color-info-light: #cffafe; /* ===== SUPERFICIES ===== */ --color-bg: #f1f5f9; --color-bg-alt: #e2e8f0; --color-card: #ffffff; --color-text: #0f172a; --color-text-secondary: #475569; --color-text-muted: #94a3b8; --color-border: #e2e8f0; --color-border-light: #f1f5f9; /* Compatibilidad con el azul legacy (mantener temporalmente) */ --legacy-primary: #001433; --legacy-secondary: #172C4D; --legacy-accent: #337ab7; --legacy-accent-light: #699dc5; /* ===== SPACING (escala 4px) ===== */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; /* ===== RADIUS ===== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ===== SHADOWS ===== */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04); /* ===== Z-INDEX (escala unificada) ===== * Reglas: * --z-base: contenido normal (cards, tablas) * --z-sticky: header, sidebar fijos * --z-overlay: backdrops de modales * --z-modal: modales y diálogos * --z-alert: notificaciones/toasts (encima de modales) * --z-loader: spinners y pantallas de carga (lo más arriba) * --z-tooltip: tooltips siempre visibles */ --z-base: 1; --z-content: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 800; --z-modal: 1000; --z-alert: 5000; --z-tooltip: 7000; --z-loader: 9000; /* ===== TRANSITIONS ===== */ --transition-fast: 0.15s ease-out; --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* ===== TIPOGRAFÍA ===== */ --font-family-base: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-family-mono: 'Cascadia Code', 'Consolas', monospace; --font-size-xs: 0.72rem; --font-size-sm: 0.82rem; --font-size-base: 0.92rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem; } /* ===== TEMA OSCURO ===== */ /* Activado por via DarkMode.js. Sobrescribe los tokens de superficies y texto; los componentes que usan var(--color-*) adaptan automáticamente. CSS legacy con colores hardcoded necesita override puntual abajo. */ [data-theme="dark"] { --color-bg: #0f172a; --color-bg-alt: #1e293b; --color-card: #1e293b; --color-text: #e2e8f0; --color-text-secondary: #cbd5e1; --color-text-muted: #94a3b8; --color-border: #334155; --color-border-light: #1e293b; } /* Overrides directos sobre clases legacy que no usan las variables. */ [data-theme="dark"] body, [data-theme="dark"] .contDasboard { background-color: var(--color-bg) !important; color: var(--color-text); } [data-theme="dark"] .ContenedorListEntity, [data-theme="dark"] .contNewEntyti, [data-theme="dark"] .x_panel, [data-theme="dark"] .kpi-card, [data-theme="dark"] .chart-card { background-color: var(--color-card) !important; color: var(--color-text); border-color: var(--color-border) !important; } [data-theme="dark"] .table-app, [data-theme="dark"] .table-app td, [data-theme="dark"] .table-app th { background-color: var(--color-card) !important; color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .row-header-app, [data-theme="dark"] .cell-header-app { background-color: var(--color-primary-light) !important; color: var(--color-text) !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-control-Filtro, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="date"], [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: #0f172a; color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .row-app:hover td { background-color: rgba(59, 130, 246, 0.08); } /* ===== HEADER FIX ===== * .alfnal originalmente tenia width:35px (solo cabia el avatar). * Ahora aloja search + toggle + avatar — lo convertimos en flex container. */ .headerlayoaut .alfnal { width: auto !important; float: right; display: flex; align-items: center; gap: var(--space-md); height: 50px; } /* Panel "Opciones de usuario" debe estar sobre el header y la barra de búsqueda */ .sidebar-options { z-index: 99999 !important; } .headerlayoaut .div2usuario { margin-top: 0; flex-shrink: 0; } .headerlayoaut .theme-toggle { color: #fff; border-color: rgba(255,255,255,0.3); } .headerlayoaut .theme-toggle:hover { background: rgba(255,255,255,0.1); } /* ===== GLOBAL SEARCH ===== */ .global-search { position: relative; display: inline-block; } .global-search-input { width: 240px; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md); background: rgba(255,255,255,0.08); color: #fff; font-size: var(--font-size-sm); outline: none; transition: var(--transition); } .global-search-input::placeholder { color: rgba(255,255,255,0.5); } .global-search-input:focus { background: rgba(255,255,255,0.15); border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); width: 280px; } .global-search-results { position: absolute; top: calc(100% + 6px); right: 0; width: 360px; max-height: 420px; overflow-y: auto; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); display: none; } .global-search-results.open { display: block; } .global-search-group { border-bottom: 1px solid var(--color-border-light); padding: 6px 0; } .global-search-group:last-child { border-bottom: none; } .global-search-group-title { padding: 4px 12px; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); font-weight: 600; } .global-search-item { display: block; padding: 8px 12px; text-decoration: none; color: var(--color-text); transition: var(--transition-fast); } .global-search-item:hover { background: rgba(59, 130, 246, 0.08); text-decoration: none; color: var(--color-text); } .global-search-item-title { display: block; font-weight: 500; } .global-search-item-sub { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); } .global-search-empty { padding: 16px; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); } /* Toggle UI */ .theme-toggle { cursor: pointer; background: transparent; border: 1px solid var(--color-border); color: var(--color-text); padding: 6px 10px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); transition: var(--transition); } .theme-toggle:hover { background: var(--color-bg-alt); } /* ===== ACCESIBILIDAD ===== */ /* Texto solo para lectores de pantalla — usar en u otros elementos donde el texto no debe verse pero sí ser leído. */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* hereda estilos de la celda header (los CSS legacy sólo estilizaban ). */ .table-app th.cell-header-app { text-align: left; font-weight: 600; background: inherit; } /* ===== OVERRIDES Z-INDEX EN ARCHIVOS LEGACY ===== * Sobreescribimos los valores hardcoded antiguos sin tener que editar 20+ archivos. * Cuando se refactore cada CSS, eliminar la línea correspondiente de acá. */ /* PreLoader: era 2147000000 (gigantesco) — bajamos a la escala unificada */ .progreso, .progreso .modal-dialog { z-index: var(--z-loader) !important; } /* Modales generales: alinear con --z-modal */ .modal, .modal-backdrop { z-index: var(--z-modal); } .modal-backdrop { z-index: var(--z-overlay); } /* Sidebar opciones: estaban en 1111/1113 — el sidebar siempre por encima del contenido pero debajo de modales */ .opcioneslistpage, .opcioneslistpageForm { z-index: var(--z-sticky); } /* Tabla sticky headers */ .table-app thead { z-index: var(--z-dropdown); }