/* ============================================ GenieACS Modern · CSS minimal y profesional ============================================ */ :root { --bg: #f5f7fa; --surface: #ffffff; --surface-2: #f1f5f9; --surface-hover: #eef2f7; --text: #0f172a; --text-2: #475569; --text-3: #94a3b8; --primary: #2563eb; --primary-hover: #1d4ed8; --primary-bg: #eff6ff; --border: #e2e8f0; --border-strong: #cbd5e1; --success: #059669; --danger: #dc2626; --radius: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 2px rgba(15,23,42,0.04); --shadow: 0 1px 3px rgba(15,23,42,0.06); --header-height: 64px; --sidebar-width: 200px; } @media (prefers-color-scheme: dark) { :root { --bg: #0d1117; --surface: #161b22; --surface-2: #1c2129; --surface-hover: #242a33; --text: #e6edf3; --text-2: #b1bac4; --text-3: #7d8590; --primary: #58a6ff; --primary-hover: #79b8ff; --primary-bg: #1c2e4a; --border: #30363d; --border-strong: #444c56; } } /* === BASE === */ * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; box-sizing: border-box; } html, body { background: var(--bg) !important; color: var(--text) !important; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* === HEADER (logo + tabs + admin/logout) === */ /* La estructura real de GenieACS: contiene un header con todo arriba */ body > * { font-size: 14px; } /* Logo */ img { filter: none; } @media (prefers-color-scheme: dark) { img[src*="logo" i], body > a > img, body img:first-of-type { filter: brightness(2.2) saturate(0.5); } } /* Tabs principales (los amarillos viejos: Overview, Devices, Faults, Admin) */ a[href="#!/overview"], a[href="#!/devices"], a[href="#!/faults"], a[href="#!/admin"], a[href^="#!/"][href$="/"] { background: transparent !important; background-image: none !important; color: var(--text-2) !important; border: 1px solid transparent !important; border-radius: var(--radius) !important; padding: 8px 16px !important; margin: 0 2px !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; transition: all 0.15s ease !important; display: inline-block !important; box-shadow: none !important; } a[href="#!/overview"]:hover, a[href="#!/devices"]:hover, a[href="#!/faults"]:hover, a[href="#!/admin"]:hover { background: var(--surface-hover) !important; color: var(--text) !important; } /* Tab activo — GenieACS suele añadir clase active o estilo inline */ a[href="#!/overview"].active, a[href="#!/devices"].active, a[href="#!/faults"].active, a[href="#!/admin"].active, .active[href^="#!/"] { background: var(--primary) !important; color: white !important; border-color: var(--primary) !important; } /* Login/Logout link arriba derecha */ a[href="#!/login"], a[href="#!/logout"] { color: var(--text-2) !important; font-size: 13px !important; font-weight: 500 !important; padding: 6px 12px !important; border-radius: var(--radius) !important; border: 1px solid var(--border-strong) !important; text-decoration: none !important; background: var(--surface) !important; transition: all 0.15s ease; } a[href="#!/login"]:hover, a[href="#!/logout"]:hover { background: var(--surface-hover) !important; color: var(--text) !important; } /* === SIDEBAR (Presets, Provisions, etc.) === */ a[href="#!/admin/presets"], a[href="#!/admin/provisions"], a[href="#!/admin/virtualParameters"], a[href="#!/admin/files"], a[href="#!/admin/config"], a[href="#!/admin/permissions"], a[href="#!/admin/users"] { background: transparent !important; background-image: none !important; border-radius: var(--radius) !important; padding: 8px 12px !important; margin: 2px 4px !important; color: var(--text-2) !important; font-weight: 500 !important; font-size: 14px !important; display: block !important; text-decoration: none !important; transition: all 0.15s ease; border: 1px solid transparent !important; } a[href^="#!/admin/"]:hover { background: var(--surface-hover) !important; color: var(--text) !important; } a[href^="#!/admin/"].active, a[href^="#!/admin/"][class*="active"] { background: var(--primary-bg) !important; color: var(--primary) !important; font-weight: 600 !important; } /* === TÍTULOS === */ h1, h2, h3, h4 { color: var(--text) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; margin: 0 0 16px 0; } h1 { font-size: 22px !important; } h2 { font-size: 18px !important; } h3 { font-size: 16px !important; } /* === LABELS (FILTER, etc.) === */ b { color: var(--text-2) !important; font-weight: 600 !important; } /* === INPUTS === */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input:not([type]), textarea, select { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; border-radius: var(--radius) !important; padding: 8px 12px !important; font-size: 14px !important; outline: none !important; transition: all 0.15s ease; font-family: inherit !important; } input:focus, textarea:focus, select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; } textarea { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; line-height: 1.6; } input[type="checkbox"] { accent-color: var(--primary); width: 15px !important; height: 15px !important; cursor: pointer; } /* === TABLAS === */ table { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden; box-shadow: var(--shadow-sm); width: 100%; margin: 12px 0; } table th { background: var(--surface-2) !important; color: var(--text-2) !important; font-weight: 600 !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 14px !important; border-bottom: 1px solid var(--border) !important; text-align: left !important; white-space: nowrap; } table th button { background: transparent !important; border: none !important; color: var(--text-3) !important; padding: 2px !important; margin-left: 4px !important; box-shadow: none !important; } table th button:hover { color: var(--text) !important; background: transparent !important; transform: none !important; } table td { padding: 10px 14px !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; font-size: 13px; background: var(--surface); } table tr:last-child td { border-bottom: none !important; } table tbody tr:hover td { background: var(--surface-hover) !important; } /* Links en tablas */ table a { color: var(--primary) !important; text-decoration: none; font-weight: 500; } table a:hover { text-decoration: underline; } /* === BOTONES === */ button, input[type="button"], input[type="submit"] { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; border-radius: var(--radius) !important; padding: 7px 14px !important; font-size: 13px !important; font-weight: 500 !important; font-family: inherit !important; cursor: pointer !important; transition: all 0.15s ease; box-shadow: var(--shadow-sm); margin: 2px 4px 2px 0; } button:hover, input[type="button"]:hover, input[type="submit"]:hover { background: var(--surface-hover) !important; border-color: var(--text-3) !important; } /* === LINKS === */ a { color: var(--primary) !important; text-decoration: none; } a:hover { color: var(--primary-hover) !important; text-decoration: underline; } /* === SCROLLBAR === */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } /* === CÓDIGO === */ pre, code, .CodeMirror { background: var(--surface-2) !important; color: var(--text) !important; border-radius: var(--radius) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; border: 1px solid var(--border); } pre { padding: 12px 16px; line-height: 1.6; } /* === ANIMACIÓN === */ table, [class*="modal"] { animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ FIX FINAL · Header tabs y admin badge ============================================ */ /* Override forzado de los tabs principales */ body a[href^="#!/"]:not([href*="/admin/"]):not([href*="/devices/"]):not([href*="/faults/"]) { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 1px solid transparent !important; border-radius: 6px !important; padding: 8px 18px !important; margin: 0 3px !important; color: #475569 !important; font-weight: 500 !important; font-size: 14px !important; text-decoration: none !important; box-shadow: none !important; transition: all 0.15s ease !important; } body a[href="#!/overview"]:hover, body a[href="#!/devices"]:hover, body a[href="#!/faults"]:hover, body a[href="#!/admin"]:hover { background: #f1f5f9 !important; color: #0f172a !important; } /* Tab activo — el que GenieACS pinta diferente */ body a[href="#!/admin"][class*="active"], body a[href*="#!/"][class*="selected"], body a[href^="#!/"]:is(.active) { background: #2563eb !important; color: white !important; border-color: #2563eb !important; } /* Username "admin" arriba derecha como badge */ body > * > span:has(+ a[href="#!/logout"]), body span:has(+ a[href="#!/logout"]) { background: #f1f5f9 !important; color: #0f172a !important; font-weight: 600 !important; font-size: 13px !important; padding: 6px 12px !important; border-radius: 6px !important; border: 1px solid #e2e8f0 !important; margin-right: 6px !important; display: inline-block !important; } /* Versión bajo el logo — más sutil */ body > * span:not(:has(*)):first-of-type, body img + span, body a:has(img) + span { font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; color: #94a3b8 !important; } /* Modo oscuro overrides */ @media (prefers-color-scheme: dark) { body a[href="#!/overview"], body a[href="#!/devices"], body a[href="#!/faults"], body a[href="#!/admin"] { color: #b1bac4 !important; } body a[href="#!/overview"]:hover, body a[href="#!/devices"]:hover, body a[href="#!/faults"]:hover, body a[href="#!/admin"]:hover { background: #242a33 !important; color: #e6edf3 !important; } body span:has(+ a[href="#!/logout"]) { background: #1c2129 !important; color: #e6edf3 !important; border-color: #30363d !important; } }