/* ============================================================ * CONEXVA — SKIN VISUAL "MAC GLASS" * ------------------------------------------------------------ * Capa visual sobre el sistema CSS existente (erp.css). * Solo color y tipografía. NO altera estructura ni layout. * * Carga DESPUÉS de erp.css en el . * Override sobre variables nativas de erp.css para que las * referencias `var(--accent)`, `var(--surface)`, etc. usen * la paleta CONEXVA. * ============================================================ */ :root { /* ===== MARCA OFICIAL CONEXVA (no modificar) ===== */ --conexva-blue: #0052CC; --conexva-blue-light: #4A9FD8; --conexva-blue-soft: rgba(0, 82, 204, 0.10); --conexva-blue-tint: rgba(0, 82, 204, 0.04); --conexva-orange: #FF6B35; --conexva-orange-light: #FFB84D; --conexva-orange-soft: rgba(255, 107, 53, 0.12); --conexva-line: #333333; --conexva-tagline: #666666; /* ===== SISTEMA UI - GLASS MAC ===== */ --bg-base: #ecf0f5; --glass-1: rgba(255, 255, 255, 0.55); --glass-2: rgba(255, 255, 255, 0.65); --glass-3: rgba(255, 255, 255, 0.75); --glass-4: rgba(255, 255, 255, 0.85); --glass-tint: rgba(245, 248, 252, 0.7); --hairline: rgba(0, 0, 0, 0.06); --hairline-strong: rgba(0, 0, 0, 0.12); --hairline-glass: rgba(255, 255, 255, 0.6); --text-1: #1d1d1f; --text-2: #424245; --text-3: #6e6e73; --text-4: #a1a1a6; --accent-cnx: #0052CC; --accent-soft-cnx: rgba(0, 82, 204, 0.10); --accent-hover: #003d99; --green-cnx: #30b854; --green-soft-cnx: rgba(48, 184, 84, 0.14); --orange-cnx: #FF6B35; --orange-soft-cnx: rgba(255, 107, 53, 0.12); --red-cnx: #d93b3b; --red-soft-cnx: rgba(217, 59, 59, 0.12); --shadow-1: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-2: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.06); --shadow-3: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.10); --r-xs: 5px; --r-skin-sm: 8px; --r-skin-md: 12px; --r-skin-lg: 16px; --r-xl: 22px; /* ===== OVERRIDE DE VARIABLES NATIVAS DE erp.css ===== */ /* Reapunta los `var(--xxx)` ya usados a la paleta nueva. */ --bg: var(--bg-base); --surface: rgba(255, 255, 255, 0.85); --surface-2: rgba(255, 255, 255, 0.6); --ink: var(--text-1); --ink-soft: var(--text-2); --muted: var(--text-3); --muted-2: var(--text-4); --rule: var(--hairline); --rule-soft: rgba(0, 0, 0, 0.04); --accent: var(--accent-cnx); --accent-soft: var(--accent-soft-cnx); --accent-ink: var(--accent-hover); --green: var(--green-cnx); --green-soft: var(--green-soft-cnx); --orange: var(--orange-cnx); --orange-soft: var(--orange-soft-cnx); --red: var(--red-cnx); --red-soft: var(--red-soft-cnx); --shadow-sm: var(--shadow-1); --shadow-md: var(--shadow-2); --shadow-lg: var(--shadow-3); } /* ===== TIPOGRAFÍA BASE ===== */ html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important; background: var(--bg-base) !important; color: var(--text-1); font-size: 13.5px; line-height: 1.5; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===== WALLPAPER GLASS con paleta CONEXVA ===== */ body::before { content: ''; position: fixed; inset: -50px; background: radial-gradient(ellipse 600px 400px at 8% 12%, rgba(0, 82, 204, 0.22), transparent 60%), radial-gradient(ellipse 500px 500px at 95% 8%, rgba(255, 107, 53, 0.18), transparent 60%), radial-gradient(ellipse 700px 500px at 50% 95%, rgba(74, 159, 216, 0.28), transparent 60%), radial-gradient(ellipse 400px 600px at 85% 70%, rgba(0, 82, 204, 0.14), transparent 60%), radial-gradient(ellipse 500px 400px at 15% 80%, rgba(255, 184, 77, 0.22), transparent 60%), linear-gradient(135deg, #e8eef7 0%, #f3edea 50%, #e9eff5 100%); filter: blur(40px); pointer-events: none; z-index: 0; } /* No tocar el banner trademark ni el footer legal — son fixed/relative * y el wallpaper detrás los hace ver bien sin re-layout. */ body > * { position: relative; z-index: 1; } #cnx-env-banner { z-index: 99999 !important; } /* ============================================================ * SIDEBAR / NAV LATERAL * ============================================================ */ .sidebar, aside.sidebar, nav.sidebar, .shell .sidebar { background: var(--glass-1) !important; backdrop-filter: blur(50px) saturate(200%); -webkit-backdrop-filter: blur(50px) saturate(200%); border-right: 0.5px solid var(--hairline) !important; } .sidebar a, .sidebar .menu-item, .sidebar .nav-link, .submenu a { color: var(--text-2); font-weight: 500; border-radius: var(--r-xs); transition: all 0.12s ease; } .sidebar a:hover, .sidebar .menu-item:hover, .submenu a:hover { background: rgba(255, 255, 255, 0.5); color: var(--text-1); } .sidebar a.active, .sidebar .menu-item.active, .sidebar a.is-active, .submenu a.active { background: rgba(255, 255, 255, 0.9) !important; color: var(--text-1) !important; box-shadow: var(--shadow-1); border: 0.5px solid var(--hairline); } /* ============================================================ * TOPBAR / HEADER SUPERIOR * ============================================================ */ .app-header, header.app-header, .top-row, .wf-header { background: var(--glass-tint) !important; backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-bottom: 0.5px solid var(--hairline); } /* ============================================================ * CARDS / PANELES (clases reales del proyecto) * * NOTA: NO usamos backdrop-filter en cards/panels porque en Chrome * sobre Windows RDP (sin GPU dedicada) cada elemento con backdrop-filter * crea un compositing layer. Cuando hay 5+ tabs cada una con su panel, * el browser puede colgar el render. Conseguimos look glass simulado * con background semi-transparente sólido. Sigue viéndose glass porque * el wallpaper de body::before se nota a través. * ============================================================ */ .card, .panel, .chart-card, .module-card, .config-card, .brand-logo-card, .com-panel, .modal { background: rgba(255, 255, 255, 0.78) !important; border: 0.5px solid var(--hairline) !important; border-radius: var(--r-skin-md) !important; box-shadow: var(--shadow-1) !important; } .card.padded, .panel.padded { padding: 20px 24px; } /* Backdrops de modal/drawer SÍ usan blur — son raros (uno a la vez) y el * efecto glass es dramático ahí. */ .modal-backdrop, .drawer-backdrop { background: rgba(20, 30, 50, 0.45) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ============================================================ * KPIs / MÉTRICAS — sin backdrop-filter por la misma razón * (workflow tiene 5 KPIs visibles → 5 layers extra es demasiado) * ============================================================ */ .wf-kpi, .wf-kpis > div, .kpi { background: rgba(255, 255, 255, 0.72); border: 0.5px solid var(--hairline); border-radius: var(--r-skin-md); box-shadow: var(--shadow-1); } /* Números grandes / valores destacados — solo color, deja que el HTML * o erp.css definan font-family y tamaño como antes */ .display, .t1, .kpi-value, .metric-value, .stat-value, .big-number, .wf-kpi .v { color: var(--text-1); } .caption, .kpi-label, .metric-label, .stat-label, .wf-kpi .label, .muted { font-size: 11px !important; font-weight: 500; color: var(--text-3) !important; letter-spacing: 0; } /* ============================================================ * BOTONES (las clases del proyecto: .btn, .btn-main, .primary) * ============================================================ */ .btn, .btn-arrow, button { font-family: 'Inter', sans-serif !important; font-size: 12.5px; font-weight: 500; border-radius: var(--r-skin-sm) !important; border: 0.5px solid var(--hairline); background: rgba(255, 255, 255, 0.85); color: var(--text-1); padding: 8px 14px; box-shadow: var(--shadow-1); transition: all 0.15s ease; cursor: pointer; } .btn:hover, .btn-arrow:hover, button:hover { background: rgba(255, 255, 255, 0.9); transform: translateY(-1px); box-shadow: var(--shadow-2); } .btn:active, button:active { transform: translateY(0); } /* Variantes del proyecto que ya existen (.btn.ghost, .btn.soft, etc.) */ .btn.ghost { background: transparent; border: 0.5px solid var(--hairline); color: var(--text-2); } .btn.ghost:hover { background: rgba(255, 255, 255, 0.6); color: var(--text-1); } .btn.soft { background: var(--accent-soft-cnx); color: var(--accent-cnx); border-color: rgba(0, 82, 204, 0.18); } .btn.soft:hover { background: rgba(0, 82, 204, 0.18); } /* Botón primario / CTA → azul CONEXVA */ .btn-main, .primary, button.primary, button[type="submit"], input[type="submit"] { background: var(--accent-cnx) !important; color: #fff !important; border-color: var(--accent-cnx) !important; backdrop-filter: none; } .btn-main:hover, .primary:hover, button[type="submit"]:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } .btn.danger { background: var(--red-cnx) !important; color: #fff !important; border-color: var(--red-cnx) !important; } .btn.warn { background: var(--orange-soft-cnx); color: var(--orange-cnx); border-color: rgba(255, 107, 53, 0.25); } .btn.green { background: var(--green-cnx) !important; color: #fff !important; border-color: var(--green-cnx) !important; } /* ============================================================ * INPUTS / FORMULARIOS * ============================================================ */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="tel"], input[type="url"], select, textarea, .input { font-family: 'Inter', sans-serif !important; font-size: 13px; padding: 9px 12px; border: 0.5px solid var(--hairline-strong) !important; border-radius: var(--r-skin-sm) !important; background: rgba(255, 255, 255, 0.7) !important; backdrop-filter: blur(8px); color: var(--text-1); transition: all 0.15s ease; } input:focus, select:focus, textarea:focus, .input:focus { outline: none !important; border-color: var(--accent-cnx) !important; box-shadow: 0 0 0 3px var(--accent-soft-cnx) !important; background: rgba(255, 255, 255, 0.95) !important; } input::placeholder, textarea::placeholder { color: var(--text-4); } label, .field label { font-size: 11px; font-weight: 500; color: var(--text-2); letter-spacing: 0; text-transform: none; } /* ============================================================ * TABLAS — la clase del proyecto es `table.data` y `.tbl` * ============================================================ */ table.data, table.tbl, table { width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; } table.data thead th, table.tbl thead th, table thead th { font-size: 11px !important; font-weight: 600 !important; color: var(--text-3) !important; text-align: left; padding: 11px 18px !important; background: rgba(255, 255, 255, 0.4) !important; border-bottom: 0.5px solid var(--hairline) !important; text-transform: none !important; letter-spacing: 0; } table.data tbody td, table.tbl tbody td, table tbody td { padding: 12px 18px !important; border-bottom: 0.5px solid var(--hairline) !important; font-size: 13px; vertical-align: middle; } table.data tbody tr:hover td, table.tbl tbody tr:hover td, table tbody tr:hover td { background: rgba(255, 255, 255, 0.5) !important; } /* Montos / valores numéricos — sin override de fuente (usa la original) */ .num, .val, .amount, .monto, .valor, .money, td.numeric, td.text-right, td.right { text-align: right; } /* ============================================================ * BADGES / CHIPS — el proyecto usa `.chip` con variantes color * ============================================================ */ .chip, .chip-status, .chip-13, .badge, .tag, .pill { display: inline-flex !important; align-items: center; gap: 5px; font-size: 11px !important; font-weight: 500 !important; padding: 2px 8px !important; border-radius: var(--r-xs) !important; border: 0.5px solid transparent !important; font-family: 'Inter', sans-serif !important; } /* Variantes existentes — re-tintadas */ .chip.green, .chip.facturado, .tone-green, .success, .activo, .completada { background: var(--green-soft-cnx) !important; color: var(--green-cnx) !important; border-color: rgba(48, 184, 84, 0.2) !important; } .chip.amber, .chip.proyeccion, .chip.proyectado, .tone-amber, .warning, .pendiente, .warn { background: var(--orange-soft-cnx) !important; color: var(--orange-cnx) !important; border-color: rgba(255, 107, 53, 0.25) !important; } .chip.red, .chip.gastos, .tone-red, .danger, .error, .vencido { background: var(--red-soft-cnx) !important; color: var(--red-cnx) !important; border-color: rgba(217, 59, 59, 0.2) !important; } .chip.blue, .chip.facturacion, .tone-blue { background: var(--accent-soft-cnx) !important; color: var(--accent-cnx) !important; border-color: rgba(0, 82, 204, 0.2) !important; } .chip.terminado, .chip.slate, .chip.virtual, .tone-slate, .cerrado, .neutral { background: rgba(0, 0, 0, 0.05) !important; color: var(--text-3) !important; border-color: var(--hairline) !important; } .chip.purple, .chip.fxf, .tone-purple { background: #ede9fe !important; color: #7c3aed !important; } .chip.gold, .chip.ka, .tone-gold { background: #fef3c7 !important; color: #b45309 !important; } .chip.orange, .tone-orange { background: var(--orange-soft-cnx) !important; color: var(--orange-cnx) !important; } /* ============================================================ * CÓDIGO / TAGS MONOESPACIADOS * ============================================================ */ code, .code, .mono, .cc-tag, .id-tag { /* Conserva la fuente mono original (IBM Plex Mono que ya carga erp.css) */ font-size: 11px; padding: 2px 7px; background: rgba(0, 0, 0, 0.05); border: 0.5px solid var(--hairline); border-radius: var(--r-xs); color: var(--text-2); } /* ============================================================ * TÍTULOS — sin override de fuente. * Se respeta la tipografía original (erp.css +