/* ========================================================================= EOS — Sistema de diseño global Aplicado a todos los templates HTML para consistencia visual. Renombrado 28-abr-2026 (era "Cortex Labs"). El archivo conserva el nombre cortex.css y los prefijos cx- de las clases para no romper imports — solo el branding visible al usuario cambió. v1 — abril 2026 ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* --- Paleta principal --- */ --cx-primary: #6d28d9; --cx-primary-light: #a78bfa; --cx-primary-dark: #4c1d95; --cx-primary-pale: #f5f3ff; --cx-primary-grad: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%); --cx-accent: #fbbf24; /* amber del logo */ --cx-accent-dark: #d97706; /* --- Neutrales (warm gray scale) --- */ --cx-bg: #f5f4f0; --cx-bg-alt: #fafaf9; --cx-card: #ffffff; --cx-text: #1c1917; --cx-text-soft: #44403c; --cx-text-mute: #78716c; --cx-text-faint: #a8a29e; --cx-border: #e7e5e4; --cx-border-soft: #f5f5f4; /* --- Semánticos --- */ --cx-success: #15803d; --cx-success-pale: #f0fdf4; --cx-warn: #f59e0b; --cx-warn-pale: #fffbeb; --cx-danger: #dc2626; --cx-danger-pale: #fef2f2; --cx-info: #2563eb; --cx-info-pale: #eff6ff; /* --- Spacing (8pt grid) --- */ --cx-s1: 4px; --cx-s2: 8px; --cx-s3: 12px; --cx-s4: 16px; --cx-s5: 24px; --cx-s6: 32px; --cx-s7: 48px; --cx-s8: 64px; /* --- Radii --- */ --cx-r-sm: 6px; --cx-r-md: 10px; --cx-r-lg: 14px; --cx-r-xl: 20px; --cx-r-pill: 999px; /* --- Shadows --- */ --cx-sh-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --cx-sh-md: 0 4px 12px rgba(15, 23, 42, 0.06); --cx-sh-lg: 0 12px 32px rgba(15, 23, 42, 0.08); --cx-sh-violet: 0 8px 24px rgba(109, 40, 217, 0.18); /* --- Tipografía --- */ --cx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cx-font-mono: 'JetBrains Mono', 'Consolas', monospace; /* --- Transitions --- */ --cx-tr-fast: 0.12s ease; --cx-tr-base: 0.2s ease; --cx-tr-slow: 0.4s ease; } /* ===================== Dark mode tokens ===================== */ /* Activable agregando data-theme="dark" al */ [data-theme="dark"] { --cx-bg: #0f172a; --cx-bg-alt: #1e293b; --cx-card: #1e293b; --cx-text: #f1f5f9; --cx-text-soft: #cbd5e1; --cx-text-mute: #94a3b8; --cx-text-faint: #64748b; --cx-border: #334155; --cx-border-soft: #1e293b; --cx-primary-pale: #1e1b4b; --cx-success-pale: #052e16; --cx-warn-pale: #451a03; --cx-danger-pale: #450a0a; --cx-info-pale: #1e3a8a; } /* ===================== Reset / Base ===================== */ html { -webkit-text-size-adjust: 100%; } body, html { font-family: var(--cx-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Code / monospaced */ code, pre, kbd, samp, .mono, [class*="font-mono"] { font-family: var(--cx-font-mono); } /* Scrollbar moderno */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 5px; } *::-webkit-scrollbar-thumb:hover { background: #a8a29e; } [data-theme="dark"] *::-webkit-scrollbar-thumb { background: #475569; } /* ===================== Selección de texto ===================== */ ::selection { background: rgba(167, 139, 250, 0.3); color: #1c1917; } /* ===================== Component classes (use opt-in) ===================== */ .cx-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; background: var(--cx-primary); color: #fff; border: none; border-radius: var(--cx-r-md); font-family: var(--cx-font); font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--cx-tr-base); text-decoration: none; } .cx-btn:hover { background: var(--cx-primary-dark); transform: translateY(-1px); box-shadow: var(--cx-sh-violet); } .cx-btn-ghost { background: transparent; color: var(--cx-primary); border: 1px solid var(--cx-border); } .cx-btn-ghost:hover { background: var(--cx-primary-pale); border-color: var(--cx-primary-light); color: var(--cx-primary-dark); } .cx-btn-sm { padding: 6px 12px; font-size: 12px; } .cx-card { background: var(--cx-card); border: 1px solid var(--cx-border); border-radius: var(--cx-r-lg); padding: var(--cx-s5); transition: var(--cx-tr-base); } .cx-card:hover { box-shadow: var(--cx-sh-md); border-color: var(--cx-text-faint); } .cx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--cx-r-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.2px; } .cx-chip-success { background: var(--cx-success-pale); color: var(--cx-success); } .cx-chip-warn { background: var(--cx-warn-pale); color: var(--cx-warn); } .cx-chip-danger { background: var(--cx-danger-pale); color: var(--cx-danger); } .cx-chip-info { background: var(--cx-info-pale); color: var(--cx-info); } .cx-chip-violet { background: var(--cx-primary-pale); color: var(--cx-primary); } /* EOS — Header de modulo unificado */ .cx-mod-header { background: var(--cx-card); border-bottom: 1px solid var(--cx-border); padding: 14px 24px; display: flex; align-items: center; gap: 14px; } .cx-mod-header__logo { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; box-shadow: var(--cx-sh-sm); } .cx-mod-header__title { font-size: 17px; font-weight: 700; color: var(--cx-text); letter-spacing: -0.3px; line-height: 1.2; } .cx-mod-header__sub { font-size: 11px; color: var(--cx-text-mute); margin-top: 2px; } .cx-mod-header__sub strong { color: var(--cx-primary); } .cx-mod-header__nav { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* Toggle de dark mode (botoncito redondo) */ .cx-theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cx-border); background: var(--cx-card); color: var(--cx-text-mute); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--cx-tr-base); } .cx-theme-toggle:hover { border-color: var(--cx-primary-light); color: var(--cx-primary); } .cx-theme-toggle svg { width: 18px; height: 18px; } /* ===================== Override sutil de elementos comunes ===================== Sin romper estilos existentes — solo refinamos lo que se ve obviamente default-feo en HTML legacy. */ /* Tablas: renderizar con look EOS */ table.cx-table { width: 100%; border-collapse: collapse; background: var(--cx-card); border: 1px solid var(--cx-border); border-radius: var(--cx-r-md); overflow: hidden; font-size: 13px; } table.cx-table th { background: var(--cx-primary-pale); color: var(--cx-primary-dark); text-align: left; padding: 10px 12px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } table.cx-table td { padding: 9px 12px; border-top: 1px solid var(--cx-border-soft); } table.cx-table tr:hover td { background: var(--cx-bg-alt); } /* Inputs base */ .cx-input { width: 100%; padding: 10px 14px; background: var(--cx-card); border: 1px solid var(--cx-border); border-radius: var(--cx-r-md); font-family: var(--cx-font); font-size: 14px; color: var(--cx-text); transition: var(--cx-tr-base); outline: none; } .cx-input:focus { border-color: var(--cx-primary-light); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15); } /* Animación fade-in útil */ @keyframes cxFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .cx-fade-in { animation: cxFadeIn 0.3s ease both; } /* Skeletons (loading) */ @keyframes cxShimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } .cx-skeleton { background: linear-gradient(90deg, #f5f5f4 0%, #fafaf9 50%, #f5f5f4 100%); background-size: 400px 100%; animation: cxShimmer 1.5s infinite linear; border-radius: var(--cx-r-sm); } [data-theme="dark"] .cx-skeleton { background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%); } /* ===================== Utilidades ===================== */ .cx-hide { display: none !important; } .cx-mt-2 { margin-top: var(--cx-s2); } .cx-mt-4 { margin-top: var(--cx-s4); } .cx-mt-6 { margin-top: var(--cx-s6); } .cx-text-mute { color: var(--cx-text-mute); } .cx-text-soft { color: var(--cx-text-soft); } .cx-text-violet { color: var(--cx-primary); } .cx-shadow { box-shadow: var(--cx-sh-md); } /* ===================== Print ===================== */ @media print { .cx-no-print, .cx-mod-header__nav, .cx-theme-toggle { display: none !important; } }