/* ============================================================================ Compupod — Design Tokens ---------------------------------------------------------------------------- Sistema de diseño propio. La ESTRUCTURA (escala tipográfica, rejilla de espaciado, radios, timings de animación) está inspirada en patrones de UI premium probados; la IDENTIDAD (colores de marca + tipografía) es de Compupod. Cómo usar: importa este archivo ANTES de app-repair.css y reemplaza los valores marcados con // MARCA por los hex oficiales de Compupod. ============================================================================ */ :root { /* ---------------------------------------------------------------- COLOR Neutrales: escala de grises coherente (base de toda la UdI). */ --cp-gray-00: #ffffff; --cp-gray-05: #f8f9fa; --cp-gray-10: #f1f3f5; --cp-gray-20: #e6e9ec; --cp-gray-30: #d1d5db; --cp-gray-40: #9aa2ab; --cp-gray-50: #6b7280; --cp-gray-60: #4b5563; --cp-gray-70: #374151; --cp-gray-80: #1f2937; --cp-gray-90: #111827; /* Acento de marca Compupod — azul cielo original del sistema. */ --cp-accent: #0797ca; /* azul cielo (accent histórico del sistema) */ --cp-accent-hover: #087eaa; --cp-accent-soft: #e6f4fa; /* fondo suave del acento (hover de filas) */ --cp-accent-content:#ffffff; /* texto sobre el acento */ /* Estados */ --cp-success: #16a34a; --cp-warning: #d97706; --cp-danger: #dc2626; --cp-danger-soft: #fef2f2; /* Priority queue hierarchy. These colors communicate the final operational order after department policy and SLA risk have both been applied. */ --cp-priority-critical: var(--cp-danger); --cp-priority-critical-hover: color-mix(in srgb, var(--cp-priority-critical) 90%, var(--content-1)); --cp-priority-critical-content: var(--content-inv); --cp-priority-critical-badge: color-mix(in srgb, var(--surface) 18%, transparent); --cp-priority-critical-shadow: 0 0 0 1px rgba(220, 38, 38, .10), 0 8px 24px rgba(220, 38, 38, .24); --cp-priority-high: #f97316; --cp-priority-high-start: #f97316; --cp-priority-high-end: #f59e0b; --cp-priority-high-content: #431407; --cp-priority-high-badge: color-mix(in srgb, var(--surface) 22%, transparent); --cp-priority-high-shadow: 0 0 0 1px rgba(249, 115, 22, .08), 0 4px 14px rgba(249, 115, 22, .20); --cp-priority-medium: #facc15; --cp-priority-medium-start: #fbbf24; --cp-priority-medium-end: #facc15; --cp-priority-medium-content: #78350f; --cp-priority-medium-badge: color-mix(in srgb, var(--cp-priority-medium-content) 10%, transparent); --cp-priority-medium-shadow: 0 0 0 1px rgba(250, 204, 21, .10), 0 2px 8px rgba(180, 83, 9, .12); --cp-my-work-queue-max: 42rem; /* Dashboard-only dark theme primitives. These are applied only within the dashboard so unconverted sections retain their established light UI. */ --cp-dashboard-dark-canvas: #111315; --cp-dashboard-dark-surface: #1a1d21; --cp-dashboard-dark-surface-2: #131518; --cp-dashboard-dark-surface-3: #25292e; --cp-dashboard-dark-surface-hover: #30353b; --cp-dashboard-dark-content-1: #f5f7fa; --cp-dashboard-dark-content-2: #c8cdd3; --cp-dashboard-dark-content-3: #9ca3ab; --cp-dashboard-dark-border-1: #3a4047; --cp-dashboard-dark-border-2: #505861; --cp-dashboard-dark-accent-soft: #1b2329; /* Stable data-series colors. These describe categories, not outcomes. */ --cp-category-regular: #2563a8; /* ---------------------------------------------------- TOKENS SEMÁNTICOS Usa SIEMPRE estos en los componentes, no los primitivos de arriba. */ --surface: var(--cp-gray-00); /* fondo de tarjetas / paneles */ --surface-2: var(--cp-gray-05); /* fondo de la app */ --surface-3: var(--cp-gray-10); /* zonas hundidas / hover sutil*/ --surface-hover: var(--cp-gray-10); --content-1: var(--cp-gray-90); /* texto principal */ --content-2: var(--cp-gray-60); /* texto secundario */ --content-3: var(--cp-gray-50); /* texto terciario / metadatos */ --content-placeholder: #6a7481; /* hints de campos vacíos, legible y apagado */ --content-placeholder-inv: #9aa2ab; /* hints sobre superficies oscuras */ --content-inv: var(--cp-gray-00); /* texto sobre fondos oscuros */ --border-1: var(--cp-gray-20); /* bordes normales */ --border-2: var(--cp-gray-30); /* bordes marcados */ --field-empty-surface: color-mix(in srgb, var(--cp-accent-soft) 48%, var(--surface)); --field-empty-border: color-mix(in srgb, var(--cp-accent) 24%, var(--border-2)); --field-filled-surface: var(--surface); --field-filled-border: var(--border-2); /* ------------------------------------------------------------ TIPOGRAFÍA Fuente libre de alta calidad (misma "grammar" limpia que UIs premium). Carga Inter con o @font-face; si no, cae a la del sistema. */ --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 12px; /* micro: badges, timestamps */ --text-sm: 13px; /* secundario: metadatos, labels */ --text-base: 15px; /* CUERPO — el tamaño base de la app */ --text-lg: 18px; /* subtítulos / títulos de sección */ --text-xl: 22px; /* títulos */ --text-2xl: 28px; /* encabezados grandes */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 900; --leading-tight: 1.25; --leading-body: 1.46; /* interlineado de párrafos / mensajes */ --leading-loose: 1.6; /* --------------------------------------------------------------- ESPACIADO Rejilla de 4px. Usa SOLO estos valores para paddings, gaps y margins. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* --------------------------------------------------------------- RADIOS */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; /* botones, inputs, tarjetas — el radio por defecto */ --radius-lg: 12px; /* modales, contenedores grandes */ --radius-pill: 9999px; --radius-circle: 50%; /* --------------------------------------------------------------- SOMBRAS Patrón premium: borde de 1px + drop suave. Nada de sombras pesadas. */ --shadow-sm: 0 0 0 1px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .08); --shadow-md: 0 0 0 1px rgba(17, 24, 39, .06), 0 4px 12px rgba(17, 24, 39, .10); --shadow-lg: 0 0 0 1px rgba(17, 24, 39, .06), 0 12px 28px rgba(17, 24, 39, .14); /* Anillo de foco accesible (reemplaza al outline azul del navegador) */ --focus-ring: 0 0 0 1px var(--cp-accent), 0 0 0 4px color-mix(in srgb, var(--cp-accent) 25%, transparent); /* --------------------------------------------------------------- MOVIMIENTO La clave de la sensación "premium": micro-interacciones rápidas (80ms) y una curva de easing consistente en todo. */ --dur-micro: 80ms; /* hover de botones/filas — instantáneo */ --dur-fast: 160ms; /* aparición de menús, tooltips */ --dur-base: 200ms; /* transiciones estándar */ --dur-slow: 300ms; /* paneles, modales */ --ease-standard: cubic-bezier(0.36, 0.19, 0.29, 1); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: ease-in-out; /* --------------------------------------------------------------- CAPAS */ --z-base: 1; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; } /* ============================================================================ APLICACIONES BASE (ejemplos listos — bórralos si prefieres solo tokens) ============================================================================ */ /* Respeta a quien pide menos animación (accesibilidad + rendimiento) */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* Foco consistente y premium en toda la app */ .cp :focus-visible, .cp-focus:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Micro-interacción estándar: aplica .cp-interactive a botones/filas/tabs */ .cp-interactive { transition: background-color var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard), box-shadow var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); } .cp-interactive:hover { background-color: var(--surface-hover); } .cp-interactive:active { transform: translateY(0.5px); } /* Aparición suave para menús/popovers/tooltips */ @keyframes cp-pop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .cp-pop-in { animation: cp-pop-in var(--dur-fast) var(--ease-standard); } /* Modal: overlay + tarjeta con entrada sutil */ @keyframes cp-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes cp-card-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } .cp-overlay-in { animation: cp-overlay-in var(--dur-fast) var(--ease-standard); } .cp-card-in { animation: cp-card-in var(--dur-base) var(--ease-standard); } /* Skeleton de carga (percepción de velocidad) */ @keyframes cp-shimmer { 0%,100% { opacity: 1; } 50% { opacity: .55; } } .cp-skeleton { background: var(--surface-3); border-radius: var(--radius-sm); animation: cp-shimmer 1.2s var(--ease-in-out) infinite; }