/* ============================================================================ InmoRadar · Design System v1 ---------------------------------------------------------------------------- Tokens-first, dual-mode (light/dark). Refined Dark Pro lineage. Drop this file into your project and add data-theme="light" or "dark" on — or omit and let the theme-toggle.js pick from system preference. ============================================================================ */ /* ─── RESET ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-ui); color: var(--text); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; } img, svg, video { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } /* ─── BRAND TOKENS (mode-agnostic) ───────────────────────────────────────── */ :root { /* Brand */ --brand: #7DA3F0; --brand-deep: #3a5fad; --brand-bright: #5B89E8; /* Premium accent (gold) */ --gold: #d4a017; --gold-bright: #fbbf24; /* Semantic — works on both modes (slightly tuned per mode below) */ --success: #16a35a; --success-bg: rgba(22, 163, 90, 0.12); --warn: #d97706; --warn-bg: rgba(217, 119, 6, 0.12); --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.12); --info: #0891b2; --info-bg: rgba(8, 145, 178, 0.12); /* Font families */ --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-ui: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; /* Type scale */ --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 42px; --fs-4xl: 56px; --fs-5xl: 72px; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 80px; --space-11: 112px; /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* Motion */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --t-fast: 120ms; --t-norm: 200ms; --t-slow: 400ms; /* Container */ --container: 1200px; --nav-height: 64px; } /* ─── DARK MODE (default) ────────────────────────────────────────────────── */ :root, [data-theme="dark"] { --bg: #0a0f1c; --bg-elev: #111827; --surface: #0f1626; --surface-2: #141c2e; --card: #141c2e; --card-elev: #1a2336; --hover: rgba(255,255,255,0.04); --border: rgba(125,163,240,0.12); --border-strong: rgba(125,163,240,0.25); --border-soft: rgba(255,255,255,0.06); --text: #f1f5f9; --text-mute: #94a3b8; --text-dim: #64748b; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 6px 24px rgba(0,0,0,0.35); --shadow-lg: 0 20px 60px rgba(0,0,0,0.55); --shadow-xl: 0 40px 100px rgba(0,0,0,0.65); --shadow-glow: 0 0 60px rgba(125,163,240,0.18); --backdrop: rgba(10,15,28,0.82); --scrim: rgba(0,0,0,0.6); /* Adjusted semantics for dark */ --success: #22c55e; --success-bg: rgba(34, 197, 94, 0.14); --warn: #f59e0b; --warn-bg: rgba(245, 158, 11, 0.14); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.14); --info: #22d3ee; --info-bg: rgba(34, 211, 238, 0.14); --gold: #fbbf24; --gold-bg: rgba(251,191,36,0.12); color-scheme: dark; } /* ─── LIGHT MODE ─────────────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #eceef2; --bg-elev: #f4f5f8; --surface: #e2e5eb; --surface-2: #d6dae3; --card: #ffffff; --card-elev: #ffffff; --hover: rgba(14,23,41,0.06); --border: rgba(14,23,41,0.16); --border-strong: rgba(14,23,41,0.28); --border-soft: rgba(14,23,41,0.09); --text: #0e1729; --text-mute: #5b647a; --text-dim: #8d94a3; --shadow-sm: 0 1px 2px rgba(14,23,41,0.06); --shadow-md: 0 4px 16px rgba(14,23,41,0.06); --shadow-lg: 0 20px 50px rgba(14,23,41,0.08); --shadow-xl: 0 40px 80px rgba(14,23,41,0.10); --shadow-glow: 0 0 60px rgba(58,95,173,0.10); --backdrop: rgba(255,255,255,0.85); --scrim: rgba(14,23,41,0.5); --brand: #3a5fad; --brand-deep: #1e3a8a; --brand-bright: #2563eb; --success: #16a34a; --success-bg: rgba(22, 163, 74, 0.08); --warn: #d97706; --warn-bg: rgba(217, 119, 6, 0.08); --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.08); --info: #0891b2; --info-bg: rgba(8, 145, 178, 0.08); --gold: #b58a2a; --gold-bg: rgba(181, 138, 42, 0.10); color-scheme: light; } /* Apply theme variables on body without breaking 3rd-party islands */ body { background: var(--bg); color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════════ LAYOUT PRIMITIVES ═══════════════════════════════════════════════════════════════════════════ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: 900px; } .container-wide { max-width: 1440px; } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .center { display: flex; align-items: center; justify-content: center; } .grow { flex: 1; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .gap-8 { gap: 40px; } /* ═══════════════════════════════════════════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════════════════════════════════════════ */ .display-1 { font-family: var(--font-display); font-size: clamp(48px, 8vw, 96px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; } .display-2 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.0; } .h1 { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; } .h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 38px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; } .h3 { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .h4 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; } .lead { font-size: 19px; color: var(--text-mute); line-height: 1.55; font-weight: 400; } .body { font-size: 15px; line-height: 1.6; color: var(--text); } .small { font-size: 13px; color: var(--text-mute); } .tiny { font-size: 11px; color: var(--text-dim); } .mono { font-family: var(--font-mono); } .uppercase { text-transform: uppercase; letter-spacing: 0.12em; } .kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); display: inline-flex; align-items: center; gap: 10px; } .kicker::before { content: ''; width: 24px; height: 1px; background: var(--brand); opacity: 0.5; } .text-mute { color: var(--text-mute); } .text-dim { color: var(--text-dim); } .text-brand { color: var(--brand); } .text-gold { color: var(--gold); } .text-success { color: var(--success); } .text-warn { color: var(--warn); } .text-danger { color: var(--danger); } /* Italic accent for serif-like emphasis in display */ .text-accent { color: var(--brand); font-style: italic; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); user-select: none; -webkit-user-select: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn:active:not(:disabled) { transform: scale(0.97); } .btn-primary { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: 0 6px 24px rgba(0,0,0,0.15); } .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 36px rgba(0,0,0,0.2); } [data-theme="light"] .btn-primary { box-shadow: 0 4px 14px rgba(14,23,41,0.18); } .btn-brand { background: var(--brand); color: var(--bg); border-color: var(--brand); box-shadow: 0 6px 24px rgba(125,163,240,0.35); } .btn-brand:hover:not(:disabled) { background: var(--brand-bright); border-color: var(--brand-bright); transform: translateY(-1px); box-shadow: 0 10px 32px rgba(125,163,240,0.45); } .btn-premium { background: linear-gradient(135deg, var(--gold), #f59e0b); color: #1a1a1a; border-color: var(--gold); box-shadow: 0 6px 24px rgba(251,191,36,0.35); font-weight: 700; } .btn-premium:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(251,191,36,0.45); } .btn-secondary { background: var(--card); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover:not(:disabled) { background: var(--card-elev); border-color: var(--brand); } .btn-ghost { background: transparent; color: var(--text); border-color: transparent; } .btn-ghost:hover:not(:disabled) { background: var(--hover); } .btn-danger { background: var(--danger); color: white; border-color: var(--danger); } .btn-danger:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); } /* Sizes */ .btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-sm); } .btn-lg { height: 52px; padding: 0 28px; font-size: 16px; border-radius: var(--radius-md); } /* Icon button */ .btn-icon { width: 40px; height: 40px; padding: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-mute); } .btn-icon:hover { background: var(--card-elev); color: var(--text); border-color: var(--border-strong); } .btn-icon svg { width: 18px; height: 18px; } /* ═══════════════════════════════════════════════════════════════════════════ BADGES & PILLS ═══════════════════════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--surface); color: var(--text-mute); border: 1px solid var(--border); } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; } .badge-brand { background: rgba(125,163,240,0.10); color: var(--brand); border-color: var(--border-strong); } .badge-gold { background: var(--gold-bg); color: var(--gold); border-color: rgba(212,160,23,0.35); } .badge-success { background: var(--success-bg); color: var(--success); } .badge-warn { background: var(--warn-bg); color: var(--warn); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full); font-size: 13px; font-weight: 500; background: var(--card); color: var(--text-mute); border: 1px solid var(--border); } /* ═══════════════════════════════════════════════════════════════════════════ CARDS ═══════════════════════════════════════════════════════════════════════════ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; } .card-elev { background: var(--card-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-md); } .card-interactive { cursor: pointer; transition: border-color var(--t-norm) var(--ease-out), transform var(--t-norm) var(--ease-out), box-shadow var(--t-norm) var(--ease-out); } .card-interactive:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* ═══════════════════════════════════════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════════════════════════════════════ */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-height); background: var(--backdrop); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--border); } .nav-inner { height: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .nav-brand img { height: 48px; width: auto; display: block; } [data-theme="light"] .nav-brand img { /* Logo PNG is dark-mode optimized; wrap with subtle chip in light */ padding: 4px 8px; background: #0e1729; border-radius: 8px; height: 48px; } .nav-links { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; } .nav-link { padding: 8px 14px; border-radius: var(--radius-sm); color: var(--text-mute); transition: color var(--t-fast), background var(--t-fast); cursor: pointer; } .nav-link:hover { color: var(--text); background: var(--hover); } .nav-link.active { color: var(--brand); background: rgba(125,163,240,0.10); } .nav-actions { display: flex; align-items: center; gap: 12px; } /* Theme toggle button */ .theme-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-md); color: var(--text-mute); cursor: pointer; transition: all var(--t-fast); position: fixed; top: 8px; left: 14px; z-index: 9999; box-shadow: var(--shadow-md); } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); } .theme-toggle svg { width: 18px; height: 18px; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } /* ═══════════════════════════════════════════════════════════════════════════ PRODUCT LAYOUT — Sidebar + Main ═══════════════════════════════════════════════════════════════════════════ */ .app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } .sidebar { background: var(--bg-elev); border-right: 1px solid var(--border); padding: 24px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-section { margin-bottom: 24px; } .sidebar-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; padding: 0 12px; margin-bottom: 8px; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-mute); cursor: pointer; transition: all var(--t-fast); position: relative; } .sidebar-link:hover { color: var(--text); background: var(--hover); } .sidebar-link.active { color: var(--brand); background: rgba(125,163,240,0.10); } .sidebar-link.active::before { content: ''; position: absolute; left: -16px; top: 6px; bottom: 6px; width: 3px; background: var(--brand); border-radius: 0 3px 3px 0; } .sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; } .sidebar-link .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } .sidebar-link.active .count { color: var(--brand); } .app-main { display: flex; flex-direction: column; min-width: 0; } .app-topbar { height: 56px; border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--backdrop); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 50; } .app-content { padding: 32px; flex: 1; min-width: 0; } /* ═══════════════════════════════════════════════════════════════════════════ FORMS ═══════════════════════════════════════════════════════════════════════════ */ .field { display: flex; flex-direction: column; gap: 6px; } .label { font-size: 13px; font-weight: 600; color: var(--text); } .help { font-size: 12px; color: var(--text-mute); } .input, .select, .textarea { width: 100%; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 12px 14px; font-size: 15px; color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .input::placeholder, .textarea::placeholder { color: var(--text-dim); } .input:hover, .select:hover, .textarea:hover { border-color: var(--brand); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(125,163,240,0.15); } .input-sm { padding: 8px 12px; font-size: 13px; border-radius: var(--radius-sm); } /* Search input with icon */ .search { position: relative; display: flex; align-items: center; } .search input { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 14px 9px 38px; font-size: 14px; color: var(--text); } .search input::placeholder { color: var(--text-dim); } .search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(125,163,240,0.15); } .search-icon { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--text-dim); pointer-events: none; } .search kbd { position: absolute; right: 8px; font-family: var(--font-mono); font-size: 11px; padding: 3px 6px; background: var(--surface-2); color: var(--text-dim); border-radius: 4px; border: 1px solid var(--border); } /* Toggle / switch */ .switch { position: relative; display: inline-block; width: 38px; height: 22px; } .switch input { opacity: 0; width: 0; height: 0; } .switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--surface-2); border-radius: 22px; transition: background var(--t-fast); border: 1px solid var(--border); } .switch-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; bottom: 2px; background: var(--text); border-radius: 50%; transition: transform var(--t-fast) var(--ease-out); } .switch input:checked + .switch-slider { background: var(--brand); border-color: var(--brand); } .switch input:checked + .switch-slider::before { transform: translateX(16px); background: var(--bg); } /* ═══════════════════════════════════════════════════════════════════════════ TABS ═══════════════════════════════════════════════════════════════════════════ */ .tabs { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; gap: 2px; } .tab { padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-mute); background: transparent; border: none; cursor: pointer; transition: all var(--t-fast); } .tab:hover { color: var(--text); } .tab.active { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); } /* Underline tabs (used inside detail views) */ .tabs-underline { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0; background: none; border-radius: 0; } .tabs-underline .tab { border-radius: 0; padding: 12px 18px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs-underline .tab.active { background: none; border-bottom-color: var(--brand); color: var(--brand); box-shadow: none; } /* ═══════════════════════════════════════════════════════════════════════════ STATS ═══════════════════════════════════════════════════════════════════════════ */ .stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; } .stat-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 8px; } .stat-value { font-family: var(--font-display); font-size: 36px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .stat-delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; margin-left: 8px; } .stat-delta.up { color: var(--success); } .stat-delta.down { color: var(--danger); } /* ═══════════════════════════════════════════════════════════════════════════ TABLE ═══════════════════════════════════════════════════════════════════════════ */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table thead th { text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); } .table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); color: var(--text); } .table tbody tr { transition: background var(--t-fast); } .table tbody tr:hover { background: var(--hover); } .table .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION HEADERS ═══════════════════════════════════════════════════════════════════════════ */ .section-header { text-align: center; margin-bottom: 56px; max-width: 700px; margin-left: auto; margin-right: auto; } .section-header .kicker { margin-bottom: 16px; justify-content: center; } .section-header .kicker::before { display: none; } .section-header h2 { margin: 0 0 12px; } /* ═══════════════════════════════════════════════════════════════════════════ UTILITIES ═══════════════════════════════════════════════════════════════════════════ */ .section { padding: 96px 0; } .section-tight { padding: 64px 0; } .divider { height: 1px; background: var(--border); margin: 24px 0; } .divider-v { width: 1px; background: var(--border); align-self: stretch; } .scroll-area { overflow-y: auto; } .scroll-area::-webkit-scrollbar { width: 8px; height: 8px; } .scroll-area::-webkit-scrollbar-track { background: transparent; } .scroll-area::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } .scroll-area::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* Glow accents (used in hero / featured cards) */ .glow-bg { position: relative; overflow: hidden; } .glow-bg::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse, rgba(125,163,240,0.18) 0%, transparent 60%); pointer-events: none; z-index: 0; } .glow-bg > * { position: relative; z-index: 1; } /* Animated reveal on scroll */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } /* ═══════════════════════════════════════════════════════════════════════════ ACCESSIBILITY HELPERS ═══════════════════════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 960px) { .nav-links { display: none; } .section { padding: 64px 0; } .container { padding: 0 20px; } } /* ── Nav Dropdown global ── */ .nav-dd { box-shadow: var(--shadow-lg); } [data-theme="light"] .nav-dd { background: var(--card) !important; box-shadow: 0 8px 32px rgba(14,23,41,0.14), 0 2px 8px rgba(14,23,41,0.08); border-color: var(--border-strong) !important; } [data-theme="light"] .dd-item { color: var(--text) !important; } [data-theme="light"] .dd-item:hover { background: var(--surface) !important; } /* Theme toggle repositioned — hide nav logo to avoid overlap */ .nav-logo { display: none !important; } /* Space for fixed theme toggle + logo — centered nav links */ nav { padding-left: 60px !important; padding-right: 60px !important; } .nav-links { margin: 0 auto !important; } .crm-tabs { justify-content: center !important; } /* ── Salir button: unified red style across all pages (higher specificity beats page !important) */ button.nav-btn.nav-danger { color: var(--danger) !important; border: 1px solid var(--danger) !important; background: transparent !important; } button.nav-btn.nav-danger:hover { background: rgba(239,68,68,.1) !important; border-color: var(--danger) !important; } /* ── Nav buttons: visible border on all pages (higher specificity + !important) */ button.nav-btn { border: 1px solid var(--border) !important; } button.nav-btn:hover { border-color: var(--border-strong) !important; } /* nav-danger overrides this via even higher specificity: button.nav-btn.nav-danger */ /* ── Ocultar logo fijo en móvil (se solapa con el nav) */ @media (max-width: 768px) { #_inmo-nav-logo { display: none !important; } } /* ═══════════════════════════════════════════════════════ MOBILE RESPONSIVE (max-width: 768px) — no afecta desktop ═══════════════════════════════════════════════════════ */ /* ── Hamburger button base (hidden on desktop) ── */ #_nav-hamburger { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--text); font-size: 1.2rem; line-height: 1; margin-left: auto; flex-shrink: 0; z-index: 1001; } @media (max-width: 768px) { /* ── Nav ── */ /* Quitar backdrop-filter del nav en mobile — si no, position:fixed del menú queda relativo al nav */ nav { padding-left: 8px !important; padding-right: 8px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg) !important; } #_nav-hamburger { display: flex !important; } /* ── Nav links: hidden panel, opens as column ── */ .nav-links { display: none !important; position: fixed !important; top: 56px; left: 0; right: 0; bottom: 0; background: var(--bg, #040a14) !important; border-top: 1px solid var(--border) !important; flex-direction: column !important; align-items: stretch !important; padding: 12px !important; gap: 2px !important; z-index: 99999 !important; overflow-y: auto; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; } .nav-links._nav-open { display: flex !important; } /* ── Nav buttons full width ── */ .nav-links .nav-btn { width: 100% !important; justify-content: flex-start !important; padding: 12px 14px !important; font-size: .9rem !important; border-radius: 8px !important; } .nav-links .nav-group { width: 100% !important; display: flex !important; flex-direction: column !important; } .nav-links .nav-group-btn { width: 100% !important; justify-content: space-between !important; } /* ── Submenús expandidos inline (sin overflow) ── */ .nav-links .nav-dd { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; display: none !important; flex-direction: column !important; padding: 4px 0 4px 16px !important; background: transparent !important; border: none !important; box-shadow: none !important; min-width: 0 !important; width: 100% !important; } .nav-links .nav-group:focus-within .nav-dd, .nav-links .nav-group._open .nav-dd { display: flex !important; } .nav-links .nav-dd .dd-item { padding: 10px 12px !important; border-radius: 6px !important; font-size: .87rem !important; color: var(--text-mute) !important; width: 100% !important; } /* ── Tablas scrollables ── */ .tbl-wrap { overflow: auto !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; } table { display: table !important; min-width: 600px !important; width: max-content !important; border-collapse: collapse; } table td, table th { white-space: nowrap !important; font-size: 0.82rem !important; padding: 8px 10px !important; } /* ── Prevent horizontal overflow ── */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } /* ── Page content padding ── */ .page { padding: 16px 12px 60px !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; } /* ── Fix cards/sections overflowing ── */ .card, section, .section { max-width: 100% !important; box-sizing: border-box !important; } /* Ocultar submenú CRM/Admin en mobile */ .crm-tabs { display: none !important; } .tabs { display: none !important; } } @media (min-width: 769px) { #_nav-hamburger { display: none !important; } }