/* ===================================================================== SoftaCRM — App stylesheet (admin shell + components) ===================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── DESIGN TOKENS ───────────────────────────────────────────────── */ :root { --bg: oklch(97.5% 0.010 72); --surface: oklch(99.5% 0.004 72); --fg: oklch(18% 0.015 245); --muted: oklch(52% 0.012 220); --border: oklch(91% 0.008 72); --accent: oklch(56% 0.17 255); --accent-hover: oklch(50% 0.18 255); --accent-bg: oklch(56% 0.17 255 / 0.08); --success: oklch(54% 0.16 145); --success-bg: oklch(54% 0.16 145 / 0.10); --warn: oklch(64% 0.16 65); --warn-bg: oklch(64% 0.16 65 / 0.10); --danger: oklch(52% 0.17 25); --danger-bg: oklch(52% 0.17 25 / 0.10); --error: oklch(50% 0.17 25); --sidebar-bg: oklch(16% 0.030 255); --sidebar-fg: oklch(95% 0.006 240); --sidebar-muted: oklch(75% 0.014 240); --sidebar-hover: oklch(100% 0 0 / 0.08); --sidebar-active: oklch(100% 0 0 / 0.13); --sidebar-w: 240px; --topbar-h: 60px; --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', monospace; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; } html, body { height: 100%; font-family: var(--font-body); background: var(--bg); color: var(--fg); overflow: hidden; } a { color: inherit; text-decoration: none; } /* ── ADMIN SHELL ─────────────────────────────────────────────────── */ .app { display: flex; height: 100vh; } /* Sidebar */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-fg); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: width 0.22s cubic-bezier(.4,0,.2,1); z-index: 100; } .sidebar.collapsed { width: 60px; } .sidebar::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(oklch(100% 0 0 / 0.025) 1px, transparent 1px), linear-gradient(90deg, oklch(100% 0 0 / 0.025) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; } .sidebar-glow { position: absolute; top: -80px; right: -60px; width: 240px; height: 240px; background: radial-gradient(circle, oklch(58% 0.18 255 / 0.15), transparent 68%); pointer-events: none; } .sidebar-header { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: var(--topbar-h); border-bottom: 1px solid oklch(100% 0 0 / 0.07); flex-shrink: 0; position: relative; z-index: 1; overflow: hidden; } .logo-mark { width: 32px; height: 32px; flex-shrink: 0; background: var(--accent); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px oklch(56% 0.17 255 / 0.35); } .logo-mark svg { width: 18px; height: 18px; fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .logo-text { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.022em; color: oklch(97% 0.004 240); white-space: nowrap; opacity: 1; transition: opacity 0.15s; } .sidebar.collapsed .logo-text { opacity: 0; pointer-events: none; } .sidebar-toggle { position: absolute; right: 12px; background: none; border: none; cursor: pointer; color: var(--sidebar-muted); padding: 4px; transition: color 0.15s; display: flex; align-items: center; } .sidebar-toggle:hover { color: var(--sidebar-fg); } .sidebar-toggle svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; } .sidebar.collapsed .sidebar-toggle { right: 50%; transform: translateX(50%); } .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 8px; position: relative; z-index: 1; scrollbar-width: none; } .sidebar-nav::-webkit-scrollbar { display: none; } .nav-section-label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: oklch(52% 0.010 240); padding: 10px 8px 4px; white-space: nowrap; overflow: hidden; transition: opacity 0.15s, height 0.15s, padding 0.15s; font-family: var(--font-mono); } .sidebar.collapsed .nav-section-label { opacity: 0; height: 0; padding: 0; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; text-decoration: none; color: var(--sidebar-muted); transition: background 0.13s, color 0.13s; white-space: nowrap; position: relative; margin-bottom: 1px; } .nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-fg); } .nav-item.active { background: var(--sidebar-active); color: var(--sidebar-fg); } .nav-item.active .nav-icon { color: var(--accent); } .nav-item .nav-badge { margin-inline-start: auto; flex-shrink: 0; font-size: 10px; font-weight: 700; background: var(--accent); color: white; padding: 1px 6px; border-radius: 10px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; transition: opacity 0.15s; } .sidebar.collapsed .nav-item .nav-badge { opacity: 0; } .nav-icon { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; } .nav-label { font-size: 13px; font-weight: 500; transition: opacity 0.15s; } .sidebar.collapsed .nav-label { opacity: 0; pointer-events: none; } .sidebar.collapsed .nav-item[data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: oklch(15% 0.025 255); color: oklch(92% 0.01 240); font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: var(--r-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; border: 1px solid oklch(100% 0 0 / 0.08); z-index: 200; } .sidebar.collapsed .nav-item[data-tip]:hover::after { opacity: 1; } .sidebar-user { padding: 10px 8px; border-top: 1px solid oklch(100% 0 0 / 0.07); display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; cursor: pointer; transition: background 0.13s; overflow: hidden; } .sidebar-user:hover { background: var(--sidebar-hover); } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: oklch(44% 0.15 255); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: 700; color: white; font-family: var(--font-mono); } .user-info { overflow: hidden; transition: opacity 0.15s; } .sidebar.collapsed .user-info { opacity: 0; } .user-name { font-size: 13px; font-weight: 600; color: oklch(92% 0.01 240); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 11px; color: var(--sidebar-muted); white-space: nowrap; font-family: var(--font-mono); } /* Main */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { height: var(--topbar-h); flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 16px; } .topbar-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; } .topbar-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .topbar-breadcrumb svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; } .topbar-spacer { flex: 1; } .search-bar { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 12px; height: 34px; width: 240px; transition: border-color 0.15s, box-shadow 0.15s; } .search-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(56% 0.17 255 / 0.10); } .search-bar input { flex: 1; border: none; background: none; font-size: 13px; color: var(--fg); outline: none; font-family: var(--font-body); } .search-bar input::placeholder { color: var(--muted); } .search-bar svg { width: 14px; height: 14px; stroke: var(--muted); stroke-width: 2; fill: none; stroke-linecap: round; flex-shrink: 0; } .search-bar .kbd-hint { font-size: 10px; color: var(--muted); font-family: var(--font-mono); background: var(--border); padding: 1px 5px; border-radius: 3px; } .topbar-icon-btn { width: 34px; height: 34px; border-radius: var(--r-sm); background: none; border: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: background 0.13s, color 0.13s; position: relative; } .topbar-icon-btn:hover { background: var(--bg); color: var(--fg); } .topbar-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; } .notif-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--surface); } .topbar-user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: 20px; cursor: pointer; transition: background 0.13s; background: none; font-family: var(--font-body); } .topbar-user-chip:hover { background: var(--bg); } .chip-avatar { width: 26px; height: 26px; border-radius: 50%; background: oklch(44% 0.15 255); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: white; font-family: var(--font-mono); } .chip-name { font-size: 13px; font-weight: 500; color: var(--fg); } .chip-chevron svg { width: 12px; height: 12px; stroke: var(--muted); stroke-width: 2; fill: none; } /* User dropdown */ .user-dropdown { position: relative; } .user-dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); min-width: 200px; box-shadow: 0 8px 32px oklch(0% 0 0 / 0.08); padding: 6px; display: none; z-index: 200; } .user-dropdown.open .user-dropdown-menu { display: block; } .user-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--fg); cursor: pointer; transition: background 0.13s; background: none; border: none; width: 100%; text-align: left; font-family: var(--font-body); } .user-dropdown-item:hover { background: var(--bg); } .user-dropdown-item.danger { color: var(--danger); } .user-dropdown-item svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; } .user-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; } /* Content */ .content { flex: 1; overflow-y: auto; padding: 24px; } /* Flash messages */ .flash-stack { position: fixed; top: calc(var(--topbar-h) + 12px); right: 24px; z-index: 500; display: flex; flex-direction: column; gap: 8px; max-width: 360px; } .flash { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; box-shadow: 0 8px 32px oklch(0% 0 0 / 0.08); font-size: 13px; line-height: 1.45; animation: flash-in 0.3s cubic-bezier(.4,0,.2,1); } @keyframes flash-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .flash.success { border-color: var(--success); } .flash.success .flash-icon { color: var(--success); } .flash.error { border-color: var(--danger); } .flash.error .flash-icon { color: var(--danger); } .flash-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; } .flash-text { flex: 1; } .flash-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 0; display: flex; } .flash-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; } /* ── PAGE HEADER ─────────────────────────────────────────────────── */ .header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .page-header h1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.025em; } .page-header p { font-size: 13px; color: var(--muted); margin-top: 3px; } .date-range-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-size: 12px; font-weight: 500; cursor: pointer; color: var(--fg); transition: background 0.13s; font-family: var(--font-mono); } .date-range-btn:hover { background: var(--bg); } .date-range-btn svg { width: 13px; height: 13px; stroke: var(--muted); stroke-width: 2; fill: none; stroke-linecap: round; } /* ── KPI CARDS ───────────────────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; } .kpi-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; } .kpi-icon-wrap { width: 38px; height: 38px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; } .kpi-icon-wrap svg { width: 18px; height: 18px; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .kpi-icon-wrap.blue { background: var(--accent-bg); } .kpi-icon-wrap.blue svg { stroke: var(--accent); } .kpi-icon-wrap.green { background: var(--success-bg); } .kpi-icon-wrap.green svg { stroke: var(--success); } .kpi-icon-wrap.orange { background: var(--warn-bg); } .kpi-icon-wrap.orange svg { stroke: var(--warn); } .kpi-icon-wrap.red { background: var(--danger-bg); } .kpi-icon-wrap.red svg { stroke: var(--danger); } .kpi-icon-wrap.purple { background: oklch(94% 0.04 295); } .kpi-icon-wrap.purple svg { stroke: oklch(54% 0.16 295); } .kpi-icon-wrap.gray { background: var(--bg); } .kpi-icon-wrap.gray svg { stroke: var(--muted); } /* Variante compacta — usada por dashboard, contratos, etc. */ .kpi-grid.compact { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; } .kpi-grid.compact .kpi-card { padding: 12px 14px; display: flex; align-items: center; gap: 12px; } .kpi-grid.compact .kpi-icon-wrap { width: 32px; height: 32px; flex-shrink: 0; } .kpi-grid.compact .kpi-icon-wrap svg { width: 16px; height: 16px; } .kpi-grid.compact .kpi-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .kpi-grid.compact .kpi-value { font-size: 18px; font-weight: 700; line-height: 1.1; font-family: var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .kpi-grid.compact .kpi-label { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 900px) { .kpi-grid.compact { grid-template-columns: repeat(2,1fr); } } .kpi-trend { font-size: 11px; font-weight: 600; font-family: var(--font-mono); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 20px; } .kpi-trend.up { color: var(--success); background: var(--success-bg); } .kpi-trend.down { color: var(--danger); background: var(--danger-bg); } .kpi-trend.neutral { color: var(--muted); background: oklch(91% 0.005 200 / 0.5); } .kpi-trend svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } .kpi-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .kpi-label { font-size: 12px; color: var(--muted); margin-top: 4px; } .kpi-sub { font-size: 11px; color: var(--muted); margin-top: 8px; font-family: var(--font-mono); } /* ── CARDS / CHARTS ──────────────────────────────────────────────── */ .charts-grid { display: grid; grid-template-columns: 1fr 340px; gap: 14px; margin-bottom: 20px; } .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .card-subtitle { font-size: 12px; color: var(--muted); margin-top: 2px; } .card-actions { display: flex; gap: 6px; } .chip-btn { font-size: 11px; font-weight: 600; font-family: var(--font-mono); padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); background: none; cursor: pointer; color: var(--muted); transition: background 0.13s, color 0.13s, border-color 0.13s; } .chip-btn.active { background: var(--accent-bg); color: var(--accent); border-color: oklch(56% 0.17 255 / 0.25); } .chip-btn:hover:not(.active) { background: var(--bg); color: var(--fg); } .chart-legend { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-family: var(--font-mono); } .legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .chart-svg { width: 100%; height: 180px; overflow: visible; } .chart-axis-label { font-size: 10px; fill: oklch(52% 0.012 220); font-family: ui-monospace, monospace; } .chart-gridline { stroke: oklch(91% 0.008 72); stroke-width: 1; } .donut-wrap { display: flex; flex-direction: column; gap: 14px; } .donut-center { position: relative; width: 140px; height: 140px; margin: 0 auto; } .donut-center svg { transform: rotate(-90deg); } .donut-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); } .donut-label .val { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .donut-label .sub { font-size: 10px; color: var(--muted); font-family: var(--font-mono); } .donut-items { display: flex; flex-direction: column; gap: 8px; } .donut-item { display: flex; align-items: center; justify-content: space-between; } .donut-item-left { display: flex; align-items: center; gap: 8px; } .donut-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .donut-item-name { font-size: 12px; color: var(--muted); } .donut-item-vals { display: flex; align-items: center; gap: 8px; } .donut-item-count { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-mono); } .donut-item-pct { font-size: 11px; color: var(--muted); font-family: var(--font-mono); } /* ── TABLES ──────────────────────────────────────────────────────── */ .bottom-grid { display: grid; grid-template-columns: 1fr 320px; gap: 14px; } .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .table-card .card-header { padding: 16px 20px 0; } table { width: 100%; border-collapse: collapse; } thead th { padding: 10px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); text-align: start; border-bottom: 1px solid var(--border); background: var(--bg); white-space: nowrap; font-family: var(--font-mono); } tbody tr { transition: background 0.10s; } tbody tr:hover { background: var(--bg); } tbody tr:not(:last-child) { border-bottom: 1px solid oklch(91% 0.005 200 / 0.6); } tbody td { padding: 10px 16px; font-size: 13px; vertical-align: middle; } .project-name { font-weight: 600; font-size: 13px; } .project-client { font-size: 11px; color: var(--muted); margin-top: 1px; font-family: var(--font-mono); } .avatar-stack { display: flex; } .avatar-xs { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); margin-inline-end: -6px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: white; font-family: var(--font-mono); } /* Pills */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; font-family: var(--font-mono); white-space: nowrap; } .pill-dot { width: 5px; height: 5px; border-radius: 50%; } .pill.green { background: var(--success-bg); color: var(--success); } .pill.green .pill-dot { background: var(--success); } .pill.blue { background: var(--accent-bg); color: var(--accent); } .pill.blue .pill-dot { background: var(--accent); } .pill.orange { background: var(--warn-bg); color: var(--warn); } .pill.orange .pill-dot { background: var(--warn); } .pill.red { background: var(--danger-bg); color: var(--danger); } .pill.red .pill-dot { background: var(--danger); } .pill.muted { background: oklch(91% 0.005 200 / 0.5); color: var(--muted); } .pill.muted .pill-dot { background: var(--muted); } .progress-bar-wrap { display: flex; align-items: center; gap: 8px; } .progress-bar { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; min-width: 60px; } .progress-bar-fill { height: 100%; border-radius: 3px; background: var(--accent); } .progress-pct { font-size: 11px; font-weight: 600; color: var(--muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; min-width: 28px; text-align: end; } .amount { font-family: var(--font-mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .table-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--bg); } .table-footer-count { font-size: 12px; color: var(--muted); font-family: var(--font-mono); } .link-btn { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: opacity 0.15s; } .link-btn:hover { opacity: 0.75; } .link-btn svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; } /* Activity */ .activity-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; } .activity-list { display: flex; flex-direction: column; margin-top: 14px; } .activity-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid oklch(91% 0.005 200 / 0.5); } .activity-item:last-child { border-bottom: none; } .activity-dot-wrap { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 3px; } .activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .activity-line { flex: 1; width: 1px; background: var(--border); margin-top: 4px; } .activity-item:last-child .activity-line { display: none; } .activity-text { font-size: 12.5px; line-height: 1.5; } .activity-text strong { font-weight: 600; } .activity-time { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); } .stats-mini { display: flex; flex-direction: column; gap: 0; margin-top: 14px; } .stats-mini-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid oklch(91% 0.005 200 / 0.5); } .stats-mini-item:last-child { border-bottom: none; } .stats-mini-left { display: flex; align-items: center; gap: 8px; } .stats-mini-icon { width: 28px; height: 28px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; } .stats-mini-icon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; } .stats-mini-label { font-size: 12px; color: var(--muted); } .stats-mini-val { font-size: 14px; font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ── BUTTONS ─────────────────────────────────────────────────────── */ .btn-primary { background: var(--accent); color: white; border: none; border-radius: var(--r-sm); padding: 8px 14px; font-size: 13px; font-weight: 600; font-family: var(--font-body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.13s, transform 0.1s; text-decoration: none; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { transform: scale(0.99); } .btn-primary svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .btn-secondary { background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 12px; font-size: 13px; font-weight: 500; font-family: var(--font-body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.13s, border-color 0.13s; text-decoration: none; } .btn-secondary:hover { background: var(--bg); border-color: oklch(78% 0.010 200); } .btn-secondary svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .btn-ghost { background: none; color: var(--muted); border: none; border-radius: var(--r-sm); padding: 6px 10px; font-size: 13px; font-weight: 500; font-family: var(--font-body); cursor: pointer; transition: background 0.13s, color 0.13s; display: inline-flex; align-items: center; gap: 6px; } .btn-ghost:hover { background: var(--bg); color: var(--fg); } .btn-danger { background: var(--danger); color: white; border: none; border-radius: var(--r-sm); padding: 7px 12px; font-size: 13px; font-weight: 600; font-family: var(--font-body); cursor: pointer; transition: background 0.13s; } .btn-danger:hover { filter: brightness(.95); } .btn-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: none; border: 1px solid var(--border); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: background 0.13s, color 0.13s, border-color 0.13s; } .btn-icon:hover { background: var(--bg); color: var(--fg); } .btn-icon.danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); } .btn-icon svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* ── FORMS ───────────────────────────────────────────────────────── */ .form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; margin-bottom: 16px; } .form-section-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; } .form-section-sub { font-size: 12px; color: var(--muted); margin-bottom: 18px; font-family: var(--font-mono); } .form-section-divider { height: 1px; background: var(--border); margin: 20px 0; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .form-grid.cols-1 { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: span 2; } .field { margin-bottom: 14px; } .field-label { display: block; font-size: 13px; font-weight: 500; color: var(--fg); margin-bottom: 6px; } .field-hint { font-size: 11px; color: var(--muted); margin-top: 4px; font-family: var(--font-mono); } .field-error { font-size: 12px; color: var(--danger); margin-top: 4px; } .input, .select, .textarea { width: 100%; min-height: 38px; padding: 8px 12px; font-size: 13px; font-family: var(--font-body); color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .input::placeholder, .textarea::placeholder { color: oklch(72% 0.006 200); } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(56% 0.17 255 / 0.10); } .textarea { min-height: 90px; resize: vertical; font-family: var(--font-body); } .select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .checkbox-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } /* Tabs */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .tab { padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--muted); border: none; background: none; cursor: pointer; font-family: var(--font-body); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.13s, border-color 0.13s; display: inline-flex; align-items: center; gap: 6px; } .tab:hover { color: var(--fg); } .tab.active { color: var(--accent); border-color: var(--accent); } .tab svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── FILTER BAR (reutilizable) ───────────────────────────────────── */ .filter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .filter-search { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 12px; height: 34px; flex: 1; min-width: 180px; transition: border-color 0.15s; } .filter-search:focus-within { border-color: var(--accent); } .filter-search svg { width: 14px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 2; flex-shrink: 0; } .filter-search input { border: none; background: transparent; flex: 1; font-size: 13px; color: var(--fg); outline: none; font-family: var(--font-body); } .filter-search input::placeholder { color: var(--muted); } .filter-select { height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg) url("data:image/svg+xml;utf8,") no-repeat right 10px center; color: var(--fg); font-size: 13px; outline: none; cursor: pointer; appearance: none; font-family: var(--font-body); } .view-toggle { display: flex; gap: 4px; margin-left: auto; } .view-btn { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--r-sm); background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: all 0.13s; } .view-btn.active { background: var(--accent); border-color: var(--accent); color: white; } .view-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; } /* ── TABLE EXTRAS (sort, client cell, row actions, pagination) ──── */ thead th.sortable { cursor: pointer; user-select: none; } thead th.sortable:hover { color: var(--fg); } thead th.sorted { color: var(--accent); } thead th .sort-indicator { opacity: 0.4; font-size: 9px; margin-left: 4px; } thead th.sorted .sort-indicator { opacity: 1; } .client-cell { display: flex; align-items: center; gap: 10px; } .client-avatar { width: 34px; height: 34px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; font-family: var(--font-mono); } .client-name { font-weight: 600; font-size: 13px; } .client-sub { font-size: 11px; color: var(--muted); margin-top: 1px; font-family: var(--font-mono); } .mono { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 13px; } .row-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; } tr:hover .row-actions { opacity: 1; } .row-btn { width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: background 0.13s, color 0.13s; } .row-btn:hover { background: var(--bg); color: var(--accent); } .row-btn.danger:hover { color: var(--danger); } .row-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .page-btns { display: flex; gap: 4px; } .page-btn { min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.13s; font-family: var(--font-mono); } .page-btn:hover { background: var(--bg); } .page-btn.active { background: var(--accent); border-color: var(--accent); color: white; } .page-btn:disabled { opacity: 0.4; cursor: default; } .card-count { font-size: 12px; color: var(--muted); font-family: var(--font-mono); margin-left: 6px; font-weight: 400; } /* Extra purple variant for pill / icon */ .kpi-icon-wrap.purple { background: oklch(54% 0.16 295 / 0.10); } .kpi-icon-wrap.purple svg { stroke: oklch(54% 0.16 295); } .pill.purple { background: oklch(54% 0.16 295 / 0.10); color: oklch(54% 0.16 295); } .pill.purple .pill-dot { background: oklch(54% 0.16 295); } .pill.gray { background: oklch(91% 0.005 200 / 0.6); color: var(--muted); } .pill.gray .pill-dot { background: var(--muted); } /* ── DETAIL PANEL (slide-in desde derecha) ───────────────────────── */ .panel-overlay { position: fixed; inset: 0; background: oklch(0% 0 0 / 0.35); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .panel-overlay.open { opacity: 1; pointer-events: all; } .detail-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: calc(100vw - 40px); background: var(--surface); border-left: 1px solid var(--border); z-index: 201; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; overflow: hidden; } .detail-panel.open { transform: translateX(0); } .panel-head { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .panel-avatar { width: 48px; height: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: white; font-family: var(--font-mono); } .panel-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; } .panel-sub { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .panel-close { margin-left: auto; width: 32px; height: 32px; border: none; background: transparent; border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: background 0.13s; } .panel-close:hover { background: var(--bg); } .panel-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } .panel-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; } .panel-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .pstat { background: var(--bg); border-radius: var(--r-md); padding: 14px; text-align: center; } .pstat-val { font-family: var(--font-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .pstat-label { font-size: 11px; color: var(--muted); margin-top: 3px; font-family: var(--font-mono); } .panel-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 10px; font-family: var(--font-mono); } .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .info-key { font-size: 11px; color: var(--muted); margin-bottom: 2px; font-family: var(--font-mono); } .info-val { font-size: 13px; font-weight: 500; word-break: break-word; } .proj-list { display: flex; flex-direction: column; gap: 8px; } .proj-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--bg); border-radius: var(--r-md); } .proj-name { font-size: 13px; font-weight: 500; } .proj-status-text { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); } .act-list { display: flex; flex-direction: column; gap: 12px; } .act-row { display: flex; align-items: flex-start; gap: 10px; } .act-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; } .act-text { font-size: 12.5px; line-height: 1.5; } .act-time { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); } .panel-foot { border-top: 1px solid var(--border); padding: 14px 24px; display: flex; gap: 8px; justify-content: space-between; align-items: center; background: var(--surface); } /* Lista de contactos dentro del detail panel */ .contact-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; background: var(--surface); transition: border-color 0.15s; } .contact-card:hover { border-color: oklch(78% 0.010 200); } .contact-card + .contact-card { margin-top: 8px; } .contact-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; font-family: var(--font-mono); } .contact-body { flex: 1; min-width: 0; } .contact-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .contact-role { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); } .contact-meta { font-size: 12px; color: var(--muted); margin-top: 4px; word-break: break-word; } .contact-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; } .contact-actions { display: flex; gap: 2px; flex-shrink: 0; } .contact-actions .row-btn { width: 26px; height: 26px; } /* Mini-pill (más chiquito que .pill) para badges en línea con el nombre */ .mini-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 20px; font-size: 10px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .mini-pill.green { background: var(--success-bg); color: var(--success); } .mini-pill.blue { background: var(--accent-bg); color: var(--accent); } .mini-pill.orange { background: var(--warn-bg); color: var(--warn); } .mini-pill.purple { background: oklch(54% 0.16 295 / 0.10); color: oklch(54% 0.16 295); } .mini-pill.muted { background: oklch(91% 0.005 200 / 0.6); color: var(--muted); } /* Bloque informativo sobre password */ .password-info { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; font-size: 12px; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 8px; } .password-info svg { width: 14px; height: 14px; stroke: currentColor; fill: none; flex-shrink: 0; } .password-info .pwd-set { color: var(--success); } .password-info .pwd-notset { color: var(--muted); } /* Toggle scope visible solo si portal_access marcado */ .portal-options { display: none; padding-top: 4px; } .portal-options.show { display: block; } /* ── MODAL WIZARD ────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: oklch(0% 0 0 / 0.45); z-index: 300; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .modal-backdrop.open { opacity: 1; pointer-events: all; } .modal { background: var(--surface); border-radius: var(--r-lg); width: 540px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); box-shadow: 0 20px 60px oklch(0% 0 0 / 0.18); transform: translateY(12px) scale(0.98); transition: transform 0.2s; display: flex; flex-direction: column; overflow: hidden; } .modal.wide { width: 720px; } .modal-backdrop.open .modal { transform: translateY(0) scale(1); } /* Si el contenido del modal va envuelto en
, propagamos el flex para que .modal-body pueda hacer overflow internamente. */ .modal > form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .modal-section { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border); } .modal-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .modal-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--muted); font-family: var(--font-mono); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .modal-section-title::before { content: ''; width: 14px; height: 2px; background: var(--accent); border-radius: 2px; } .modal-head { padding: 20px 24px 0; display: flex; align-items: center; justify-content: space-between; } .modal-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; } .modal-close { width: 32px; height: 32px; border: none; background: transparent; border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: background 0.13s; } .modal-close:hover { background: var(--bg); } .modal-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } .stepper { display: flex; align-items: center; padding: 20px 24px 0; } .step-item { display: flex; align-items: center; gap: 8px; flex: 0; } .step-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; font-family: var(--font-mono); border: 2px solid var(--border); color: var(--muted); background: var(--surface); transition: all 0.2s; } .step-item.active .step-circle { border-color: var(--accent); color: var(--accent); } .step-item.done .step-circle { border-color: var(--success); background: var(--success); color: white; } .step-label { font-size: 12px; font-weight: 600; color: var(--muted); } .step-item.active .step-label { color: var(--accent); } .step-item.done .step-label { color: var(--success); } .step-line { flex: 1; height: 2px; background: var(--border); margin: 0 12px; transition: background 0.2s; } .step-line.done { background: var(--success); } .modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; min-height: 0; } .step-panel { display: none; } .step-panel.active { display: block; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-group { display: flex; flex-direction: column; gap: 5px; } .form-group.full { grid-column: 1 / -1; } .form-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); } .form-input { height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; color: var(--fg); background: var(--bg); outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: var(--font-body); } .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(56% 0.17 255 / 0.10); } .form-input.error { border-color: var(--danger); } .form-error { font-size: 11px; color: var(--danger); display: none; font-family: var(--font-mono); } .form-error.show { display: block; } select.form-input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } /* En dispositivos touch (cualquier ancho) los inputs deben ser >=16px para que iOS no haga zoom automático al enfocar. Cubre celulares en landscape y tablets. */ @media (hover: none) and (pointer: coarse) { .form-input, input.form-input, select.form-input, textarea.form-input { font-size: 16px; } } .confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .confirm-item { background: var(--bg); border-radius: var(--r-md); padding: 12px 14px; } .confirm-key { font-size: 11px; color: var(--muted); margin-bottom: 3px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; } .confirm-val { font-size: 13px; font-weight: 600; word-break: break-word; } .modal-foot { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 10px; } /* ── TOAST ───────────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--fg); color: var(--surface); padding: 10px 18px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; z-index: 500; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); pointer-events: none; white-space: nowrap; box-shadow: 0 8px 24px oklch(0% 0 0 / 0.18); } .toast.show { transform: translateX(-50%) translateY(0); } /* ── CLIENT PROFILE SHELL (página dedicada con sidebar interno) ── */ .client-profile-shell { display: flex; flex-direction: column; min-height: 100%; } .cp-header { display: flex; align-items: center; gap: 14px; padding: 0 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; } .cp-header .cp-avatar { width: 52px; height: 52px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: white; font-family: var(--font-mono); flex-shrink: 0; } .cp-header h1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; } .cp-header .cp-meta { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cp-header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cp-body { display: grid; grid-template-columns: 220px 1fr; gap: 18px; } .cp-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 8px; align-self: flex-start; position: sticky; top: 0; } .cp-sidebar .nav-section-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); padding: 12px 8px 4px; font-family: var(--font-mono); } .cp-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--fg); text-decoration: none; font-size: 13px; font-weight: 500; transition: background 0.13s, color 0.13s; margin-bottom: 1px; position: relative; } .cp-nav-item:hover { background: var(--bg); } .cp-nav-item.active { background: var(--accent-bg); color: var(--accent); } .cp-nav-item.active .cp-nav-icon { color: var(--accent); } .cp-nav-icon { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); } .cp-nav-item.active .cp-nav-icon { color: var(--accent); } .cp-nav-count { margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 700; background: var(--bg); color: var(--muted); padding: 1px 7px; border-radius: 10px; font-family: var(--font-mono); } .cp-nav-item.active .cp-nav-count { background: var(--accent); color: white; } .cp-nav-item.disabled { color: oklch(72% 0.006 200); cursor: not-allowed; pointer-events: none; } .cp-nav-item.disabled .cp-nav-icon { color: oklch(72% 0.006 200); } .cp-soon-pill { margin-left: auto; flex-shrink: 0; font-size: 9px; font-weight: 700; background: oklch(91% 0.005 200 / 0.6); color: var(--muted); padding: 1px 6px; border-radius: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; } .cp-content { min-width: 0; } .cp-section-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; } .cp-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .cp-section-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .cp-section-sub { font-size: 12px; color: var(--muted); margin-top: 3px; font-family: var(--font-mono); } /* Empty state coming-soon */ .cp-soon { padding: 60px 30px; text-align: center; color: var(--muted); } .cp-soon-icon { width: 56px; height: 56px; background: var(--bg); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } .cp-soon-icon svg { width: 24px; height: 24px; stroke: var(--muted); fill: none; stroke-width: 1.75; } .cp-soon h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--fg); margin-bottom: 6px; } .cp-soon p { font-size: 13px; line-height: 1.6; max-width: 360px; margin: 0 auto; } /* Notes */ .note-form { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; margin-bottom: 16px; } .note-form textarea { width: 100%; min-height: 70px; padding: 8px; border: none; background: var(--surface); border-radius: var(--r-sm); resize: vertical; font-family: var(--font-body); font-size: 13px; color: var(--fg); outline: none; } .note-form-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .note-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 10px; transition: border-color 0.15s; } .note-card.pinned { border-color: var(--warn); background: oklch(64% 0.16 65 / 0.05); } .note-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .note-author { font-size: 13px; font-weight: 600; } .note-time { font-size: 11px; color: var(--muted); font-family: var(--font-mono); margin-left: auto; } .note-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; } .note-card:hover .note-actions { opacity: 1; } .note-body { font-size: 13px; line-height: 1.6; color: var(--fg); white-space: pre-wrap; word-break: break-word; } /* Credentials (caja fuerte) */ .cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 1100px) { .cred-grid { grid-template-columns: 1fr; } } .cred-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; transition: border-color 0.15s; } .cred-card:hover { border-color: oklch(78% 0.010 200); } .cred-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .cred-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cred-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; } .cred-label { font-size: 13px; font-weight: 600; } .cred-cat { font-size: 11px; color: var(--muted); font-family: var(--font-mono); margin-top: 2px; } .cred-actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; } .cred-card:hover .cred-actions { opacity: 1; } .cred-fields { display: flex; flex-direction: column; gap: 8px; } .cred-field { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: var(--r-sm); padding: 6px 10px; font-size: 12px; font-family: var(--font-mono); } .cred-field-key { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; min-width: 56px; flex-shrink: 0; } .cred-field-val { flex: 1; word-break: break-all; color: var(--fg); } .cred-field-val.muted { color: var(--muted); } .cred-field-val.is-secret { letter-spacing: 0.15em; } .cred-field-actions { display: flex; gap: 2px; flex-shrink: 0; } .cred-mini-btn { width: 22px; height: 22px; border-radius: 4px; border: none; background: transparent; cursor: pointer; color: var(--muted); display: flex; align-items: center; justify-content: center; transition: background 0.13s, color 0.13s; } .cred-mini-btn:hover { background: var(--surface); color: var(--accent); } .cred-mini-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; } .cred-notes { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); line-height: 1.5; word-break: break-word; } @media (max-width: 900px) { .cp-body { grid-template-columns: 1fr; } .cp-sidebar { position: static; } } /* ── SOPORTE (Tickets) — estilo Linear/GitHub Issues ─────────────── */ /* Tabs (igual que antes) */ .tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .t-tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); padding: 3px; border-radius: var(--r-md); } .t-tab { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-sm); border: none; background: none; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.13s, color 0.13s; font-family: var(--font-body); text-decoration: none; } .t-tab:hover { color: var(--fg); } .t-tab.active { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04); } .t-tab-count { font-family: var(--font-mono); font-size: 10px; padding: 0 6px; border-radius: 8px; background: var(--border); color: var(--muted); font-variant-numeric: tabular-nums; } .t-tab.active .t-tab-count { background: var(--accent-bg); color: var(--accent); } /* ── Lista densa (estilo GitHub Issues) ─────────────────────────── */ .ticket-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .ticket-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; padding: 14px 18px; border-bottom: 1px solid oklch(91% 0.005 200 / 0.6); transition: background 0.10s; text-decoration: none; color: inherit; align-items: center; } .ticket-row:last-child { border-bottom: none; } .ticket-row:hover { background: var(--bg); } .ticket-priority-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ticket-priority-dot.critical { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-bg), 0 0 8px var(--danger); } .ticket-priority-dot.high { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-bg); } .ticket-priority-dot.med { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); } .ticket-priority-dot.low { background: var(--muted); box-shadow: 0 0 0 4px oklch(91% 0.005 200 / 0.5); } .ticket-body { min-width: 0; } .ticket-line-1 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .ticket-id { font-family: var(--font-mono); font-size: 11px; color: var(--muted); font-weight: 600; } .ticket-subject { font-size: 13.5px; font-weight: 600; color: var(--fg); } .ticket-line-2 { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; } .ticket-line-2 .meta-item { display: flex; align-items: center; gap: 5px; } .ticket-line-2 .meta-item svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; } .ticket-line-2 strong { color: var(--fg); font-weight: 600; } .ticket-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .ticket-empty { padding: 60px 20px; text-align: center; color: var(--muted); font-size: 13px; } .ticket-empty-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--bg); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; } .ticket-empty-icon svg { width: 22px; height: 22px; stroke: var(--muted); fill: none; stroke-width: 1.75; } /* Category icon mini */ .cat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-family: var(--font-mono); font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); } .cat-chip svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; } .cat-chip.bug { background: oklch(52% 0.17 25 / 0.08); border-color: oklch(52% 0.17 25 / 0.20); color: var(--danger); } .cat-chip.feature { background: var(--accent-bg); border-color: oklch(56% 0.17 255 / 0.20); color: var(--accent); } .cat-chip.question { background: oklch(54% 0.16 295 / 0.08); border-color: oklch(54% 0.16 295 / 0.20); color: oklch(54% 0.16 295); } .cat-chip.billing { background: var(--warn-bg); border-color: oklch(64% 0.16 65 / 0.20); color: var(--warn); } /* ── Página detalle de ticket (Linear-style) ────────────────────── */ .t-page-header { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .t-page-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); text-decoration: none; width: fit-content; padding: 4px 8px; border-radius: var(--r-sm); transition: background 0.13s, color 0.13s; } .t-page-back:hover { background: var(--bg); color: var(--fg); } .t-page-back svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; } .t-page-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .t-page-title-block { flex: 1; min-width: 0; } .t-page-id { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 4px; } .t-page-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.3; } .t-page-pills { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .t-opened-by { font-size: 12.5px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .t-opened-by strong { color: var(--fg); font-weight: 600; } .t-opened-by .author-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: white; font-family: var(--font-mono); flex-shrink: 0; } /* Layout 2-cols: conversación | sidebar meta */ .t-page-grid { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; } @media (max-width: 1100px) { .t-page-grid { grid-template-columns: 1fr; } } .t-conv { display: flex; flex-direction: column; gap: 0; } /* Mensajes apilados (no chat bubbles) */ .t-msg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 12px; overflow: hidden; } .t-msg-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); } .t-msg-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; font-family: var(--font-mono); flex-shrink: 0; } .t-msg-author { font-size: 13px; font-weight: 600; } .t-msg-role-pill { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 10px; background: var(--bg); color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; font-family: var(--font-mono); border: 1px solid var(--border); } .t-msg-role-pill.staff { background: var(--accent-bg); color: var(--accent); border-color: oklch(56% 0.17 255 / 0.20); } .t-msg-role-pill.client { background: var(--success-bg); color: var(--success); border-color: oklch(54% 0.16 145 / 0.20); } .t-msg-time { margin-left: auto; font-size: 11px; color: var(--muted); font-family: var(--font-mono); } .t-msg-body { padding: 14px 16px; font-size: 13.5px; line-height: 1.6; color: var(--fg); /* NO usar pre-wrap: safe_html() ya hace nl2br(), si dejamos pre-wrap los \n se renderizan DOBLES (uno como
, otro literal). Con `normal` los saltos vienen solo del
/

, que es lo esperado. */ word-break: break-word; } /* En el
dentro del body, evitar collapse extra (para mensajes con muchas líneas tipo firma) */ .t-msg-body p { margin: 0 0 8px; } .t-msg-body p:last-child { margin-bottom: 0; } /* Variante nota interna */ .t-msg.is-internal { background: oklch(64% 0.16 65 / 0.05); border-color: oklch(64% 0.16 65 / 0.30); } .t-msg.is-internal .t-msg-head { background: oklch(64% 0.16 65 / 0.10); border-color: oklch(64% 0.16 65 / 0.25); } .t-msg.is-internal .t-msg-body { color: oklch(35% 0.10 65); } .t-msg-internal-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 10px; background: var(--warn); color: white; text-transform: uppercase; letter-spacing: 0.07em; font-family: var(--font-mono); } .t-msg-internal-badge svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2.5; } /* Reply form abajo de la conversación */ .t-reply { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-top: 14px; } .t-reply-tabs { display: flex; gap: 0; padding: 4px 4px 0; background: var(--bg); border-bottom: 1px solid var(--border); } .t-reply-tab { font-size: 12px; font-weight: 600; padding: 8px 14px; border: none; background: none; color: var(--muted); cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0; font-family: var(--font-body); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 6px; } .t-reply-tab:hover { color: var(--fg); } .t-reply-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--surface); } .t-reply-tab.note.active { color: var(--warn); border-bottom-color: var(--warn); } .t-reply-tab svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; } .t-reply-textarea { width: 100%; min-height: 100px; border: none; padding: 14px 16px; font-family: var(--font-body); font-size: 13.5px; color: var(--fg); background: var(--surface); outline: none; resize: vertical; line-height: 1.5; } .t-reply-actions { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--bg); } .t-reply-hint { font-size: 11px; color: var(--muted); font-family: var(--font-mono); } /* Sidebar derecho de metadata */ .t-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; } .t-side-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; } .t-side-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-family: var(--font-mono); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .t-side-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; } .t-side-row:last-child { margin-bottom: 0; } .t-side-label { font-size: 12px; color: var(--muted); flex-shrink: 0; } .t-side-val { font-size: 12.5px; font-weight: 500; color: var(--fg); text-align: right; min-width: 0; word-break: break-word; } .t-side-val a { color: var(--accent); text-decoration: none; } .t-side-val a:hover { text-decoration: underline; } .t-side-select { width: 100%; appearance: none; font-family: var(--font-body); font-size: 12.5px; padding: 6px 26px 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg) url("data:image/svg+xml;utf8,") no-repeat right 8px center; color: var(--fg); cursor: pointer; } .t-side-actions { display: flex; flex-direction: column; gap: 6px; } .t-side-actions form { margin: 0; } .t-side-actions button { width: 100%; justify-content: center; } .t-sla-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 6px; } .t-sla-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; } .t-sla-bar-fill.green { background: var(--success); } .t-sla-bar-fill.orange { background: var(--warn); } .t-sla-bar-fill.red { background: var(--danger); } /* ── KANBAN (Leads pipeline) ─────────────────────────────────────── */ .kanban-wrapper { flex: 1; overflow-x: scroll; /* siempre visible */ overflow-y: hidden; padding-bottom: 14px; margin: 0 -24px; /* extender al borde del .content para scroll horizontal full */ padding-left: 24px; padding-right: 24px; scrollbar-width: auto; /* Firefox: barra ancha estándar */ scrollbar-color: var(--muted) var(--bg); } .kanban-wrapper::-webkit-scrollbar { height: 14px; background: var(--bg); } .kanban-wrapper::-webkit-scrollbar-track { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; margin: 0 24px; } .kanban-wrapper::-webkit-scrollbar-thumb { background: oklch(75% 0.012 220); border: 2px solid var(--bg); border-radius: 8px; min-width: 60px; } .kanban-wrapper::-webkit-scrollbar-thumb:hover { background: var(--muted); } .kanban-wrapper::-webkit-scrollbar-thumb:active { background: var(--accent); } .kanban-board { display: flex; gap: 12px; min-width: max-content; align-items: flex-start; min-height: 400px; } .kanban-col { width: 268px; flex-shrink: 0; display: flex; flex-direction: column; background: oklch(95.5% 0.008 72); border: 1px solid var(--border); border-radius: var(--r-lg); } .col-header { padding: 12px 14px 10px; border-bottom: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; border-left: 3px solid transparent; flex-shrink: 0; } .col-header.nuevo { border-left-color: var(--muted); } .col-header.contactado { border-left-color: var(--accent); } .col-header.calificado { border-left-color: oklch(54% 0.16 295); } .col-header.propuesta { border-left-color: var(--warn); } .col-header.negociacion { border-left-color: oklch(58% 0.16 35); } .col-header.ganado { border-left-color: var(--success); } .col-header.perdido { border-left-color: var(--danger); } .col-header-top { display: flex; align-items: center; gap: 8px; } .col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .col-dot.nuevo { background: var(--muted); } .col-dot.contactado { background: var(--accent); } .col-dot.calificado { background: oklch(54% 0.16 295); } .col-dot.propuesta { background: var(--warn); } .col-dot.negociacion { background: oklch(58% 0.16 35); } .col-dot.ganado { background: var(--success); } .col-dot.perdido { background: var(--danger); } .col-title { font-size: 13px; font-weight: 600; flex: 1; } .col-count { font-size: 11px; font-weight: 700; background: oklch(91% 0.008 72); color: var(--muted); padding: 1px 7px; border-radius: 10px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .col-value { font-size: 11px; color: var(--muted); margin-top: 5px; font-family: var(--font-mono); } .col-cards { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; max-height: calc(100vh - 360px); scrollbar-width: thin; } .col-cards::-webkit-scrollbar { width: 4px; } .col-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .col-empty { text-align: center; color: var(--muted); font-size: 12px; padding: 20px 10px; } /* Lead card */ .lead-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; cursor: grab; position: relative; transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s; } .lead-card:hover { box-shadow: 0 4px 18px oklch(18% 0.015 245 / 0.10); border-color: oklch(85% 0.010 72); } .lead-card.ganado { background: oklch(99% 0.008 145); border-color: oklch(54% 0.16 145 / 0.20); } .lead-card.perdido { background: oklch(99% 0.008 25); border-color: oklch(52% 0.17 25 / 0.20); } .lead-card.dragging { opacity: 0.5; cursor: grabbing; } .lead-card.sortable-ghost { opacity: 0.3; background: var(--accent-bg); } .lead-card .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 4px; } .lead-card .card-company { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .lead-card .card-contact { font-size: 12px; color: var(--muted); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lead-card .card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .lead-card .card-footer { display: flex; align-items: center; justify-content: space-between; } .lead-card .card-value { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-mono); } .lead-card .card-time { font-size: 11px; color: var(--muted); font-family: var(--font-mono); } .lead-card .card-assignee { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: white; flex-shrink: 0; font-family: var(--font-mono); } /* Priority dot */ .priority-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .priority-dot.alta { background: var(--danger); } .priority-dot.media { background: var(--warn); } .priority-dot.baja { background: var(--success); } /* Pipeline progress bar (en detail panel) */ .pipeline-bar { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; } .pipeline-step { flex: 1; height: 5px; border-radius: 3px; background: var(--border); transition: background 0.2s; } .pipeline-step.done { background: var(--accent); } .pipeline-step.current { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); } .pipeline-step.ganado { background: var(--success); } .pipeline-step.perdido { background: var(--danger); } .pipeline-labels { display: flex; justify-content: space-between; margin-bottom: 14px; } .pipeline-label { font-size: 9.5px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; } /* Timeline activity (en detail panel) */ .timeline { display: flex; flex-direction: column; gap: 0; } .timeline-item { display: flex; gap: 12px; position: relative; padding-bottom: 14px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ''; position: absolute; left: 14px; top: 28px; bottom: 0; width: 1px; background: var(--border); } .timeline-item:last-child::before { display: none; } .timeline-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid var(--border); background: var(--surface); } .timeline-icon svg { width: 12px; height: 12px; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .timeline-icon.note { background: var(--accent-bg); border-color: oklch(56% 0.17 255 / 0.20); } .timeline-icon.note svg { stroke: var(--accent); } .timeline-icon.email { background: oklch(54% 0.16 295 / 0.10); border-color: oklch(54% 0.16 295 / 0.20); } .timeline-icon.email svg { stroke: oklch(54% 0.16 295); } .timeline-icon.call { background: var(--success-bg); border-color: oklch(54% 0.16 145 / 0.20); } .timeline-icon.call svg { stroke: var(--success); } .timeline-icon.stage { background: var(--warn-bg); border-color: oklch(64% 0.16 65 / 0.20); } .timeline-icon.stage svg { stroke: var(--warn); } .timeline-icon.email.failed { background: var(--danger-bg); border-color: oklch(52% 0.17 25 / 0.20); } .timeline-icon.email.failed svg { stroke: var(--danger); } .timeline-content { flex: 1; padding-top: 4px; min-width: 0; } .timeline-text { font-size: 12.5px; color: var(--fg); line-height: 1.45; word-break: break-word; } .timeline-time { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); } /* Estado de apertura de un email, dentro de su propia entrada del timeline */ .tl-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-family: var(--font-mono); line-height: 1.5; border: 1px solid transparent; cursor: default; } .tl-badge.open { background: var(--success-bg); color: var(--success); border-color: oklch(54% 0.16 145 / 0.22); } .tl-badge.unopened { background: var(--bg); color: var(--muted); border-color: var(--border); } .tl-badge.failed { background: var(--danger-bg); color: var(--danger); border-color: oklch(52% 0.17 25 / 0.22); } /* ── DRAGGABLE DASHBOARD CARDS ───────────────────────────────────── */ [data-card-id] { cursor: grab; transition: transform 0.18s, box-shadow 0.18s; } [data-card-id]:active { cursor: grabbing; } [data-card-id].card-chosen { box-shadow: 0 12px 32px oklch(0% 0 0 / 0.12); transform: translateY(-2px); } [data-card-id].card-ghost { opacity: 0.45; background: var(--accent-bg) !important; border: 2px dashed var(--accent) !important; } [data-card-id].card-dragging { transform: rotate(0.5deg); } /* Responsive */ @media (max-width: 1200px) { .kpi-grid { grid-template-columns: repeat(2,1fr); } .charts-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .bottom-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: span 1; } } /* ────────────────────────────────────────────────────────────────── * MOBILE RESPONSIVE — bloque agregado para uso desde celular. * Estrategia: sidebar admin como drawer off-canvas, KPIs/forms stack, * tablas con scroll horizontal, modales fullscreen, padding reducido. * ────────────────────────────────────────────────────────────────── */ /* Burger button — solo visible en mobile */ .sidebar-mobile-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: var(--r-sm); width: 36px; height: 36px; align-items: center; justify-content: center; cursor: pointer; color: var(--fg); margin-right: 4px; } .sidebar-mobile-toggle:hover { background: var(--bg); } /* Backdrop del drawer */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 99; opacity: 0; transition: opacity 0.2s; } .sidebar-backdrop.visible { display: block; opacity: 1; } @media (max-width: 768px) { /* Sidebar admin = drawer off-canvas */ .sidebar { position: fixed; top: 0; left: 0; width: 260px; max-width: 85vw; height: 100dvh; height: 100vh; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(.4,0,.2,1); box-shadow: 4px 0 16px rgba(0,0,0,0.3); } .sidebar.mobile-open { transform: translateX(0); } /* En mobile el "collapsed" desktop NO aplica: el drawer siempre muestra íconos + texto completos. Neutralizamos todas las reglas de icon-only y forzamos el color claro del texto (visible sobre el fondo oscuro). */ .sidebar.collapsed { width: 260px; } .sidebar .nav-label, .sidebar.collapsed .nav-label { opacity: 1 !important; pointer-events: auto !important; color: var(--sidebar-fg) !important; display: inline !important; } .sidebar .nav-item { color: var(--sidebar-fg) !important; } .sidebar.collapsed .logo-text, .sidebar.collapsed .user-info, .sidebar.collapsed .nav-badge { opacity: 1 !important; pointer-events: auto; } .sidebar.collapsed .nav-section-label { opacity: 1 !important; height: auto !important; padding: 10px 8px 4px !important; } /* El tooltip flotante de modo colapsado no debe aparecer en mobile */ .sidebar.collapsed .nav-item[data-tip]::after { display: none !important; } .sidebar-toggle { display: none; } /* oculto el toggle desktop */ /* Main ocupa todo el ancho */ .main { width: 100%; } /* Topbar: mostrar burger, reducir padding */ .sidebar-mobile-toggle { display: inline-flex; } .topbar { padding: 0 12px; gap: 8px; height: 52px; } .topbar-title { font-size: 14px; } .topbar-breadcrumb { display: none; } /* breadcrumb no entra en mobile */ .search-bar { display: none; } /* búsqueda topbar oculta — usar página de búsqueda */ /* Topbar user chip compacto */ .topbar-user-chip { padding: 4px 6px 4px 4px; } .topbar-user-chip .user-info { display: none; } /* solo avatar */ /* Content padding compacto */ .content { padding: 16px 12px !important; } /* Page header */ .page-header h1 { font-size: 20px !important; } .page-header p { font-size: 12.5px !important; } .header-row { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .header-row > div:last-child { width: 100%; flex-wrap: wrap; } /* KPIs: 1 columna */ .kpi-grid, .kpi-grid.compact { grid-template-columns: 1fr !important; gap: 8px !important; } .kpi-card { padding: 14px !important; } .kpi-value { font-size: 22px !important; } /* Forms: 1 columna */ .form-grid, .s-grid, [class*="grid-template-columns"] { grid-template-columns: 1fr !important; } .form-input { font-size: 16px; } /* evita zoom auto en iOS */ /* Tablas: scroll horizontal + reducir padding. Incluye tablas planas (no .data-table) envueltas en contenedores con scroll. */ .table-card { overflow-x: auto; } .data-table { font-size: 12.5px; min-width: max-content; } .data-table th, .data-table td { padding: 8px 10px !important; } /* Cualquier tabla dentro de un wrapper con overflow-x → no comprimir columnas */ .table-card table, .table-wrap table { min-width: max-content; } /* Touch targets: mínimo cómodo para dedos (WCAG ~44px) */ .btn-icon { width: 40px; height: 40px; } .panel-close { min-width: 40px; min-height: 40px; } .task-check, .ops-task-check { width: 22px; height: 22px; } /* Modales: fullscreen */ .modal { width: 100% !important; max-width: 100vw !important; height: 100dvh; height: 100vh; max-height: 100vh !important; border-radius: 0 !important; margin: 0 !important; } .modal-body { padding: 16px !important; } /* Filtros: stack */ .filter-bar, .filters-row { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } /* Botones: full width en headers, no romper layout */ .btn-primary, .btn-ghost { font-size: 13px; padding: 8px 14px; } /* Cards de propuestas/contratos/proyectos */ .pp-grid, .t-page-grid { grid-template-columns: 1fr !important; } /* Sidebar interno de detalles (perfil cliente, ticket) */ .pp-status-block, .t-side-block { width: 100% !important; max-width: none !important; } } @media (max-width: 480px) { /* Aún más compacto en celulares chicos */ .content { padding: 12px 8px !important; } .topbar { padding: 0 8px; } .page-header h1 { font-size: 18px !important; } .data-table { font-size: 12px; } .data-table th, .data-table td { padding: 6px 8px !important; } .kpi-value { font-size: 20px !important; } /* Pills más chicos */ .pill { font-size: 10.5px; padding: 2px 7px; } } /* ────────────────────────────────────────────────────────────────── * Portal cliente — mejoras mobile (ya tiene 768px breakpoint * básico en layouts/portal.php pero le falta refinar) * ────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .cp-shell { grid-template-columns: 1fr !important; } .cp-sidebar { position: static !important; width: 100% !important; height: auto !important; flex-direction: column !important; } .cp-nav { padding: 8px !important; } .cp-nav a { padding: 10px 12px !important; } .cp-bottom { border-top: 1px solid var(--border); padding: 12px !important; } .cp-main { padding: 16px 12px !important; } /* KPIs del portal: apilar en celular */ .portal-kpi-grid { grid-template-columns: 1fr !important; } } @media (max-width: 600px) { .portal-kpi-grid { grid-template-columns: 1fr !important; } } /* ────────────────────────────────────────────────────────────────── * Componentes reutilizables: spinner de carga + empty state * ────────────────────────────────────────────────────────────────── */ .spinner { display: inline-block; width: 22px; height: 22px; border: 2.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } .spinner.sm { width: 16px; height: 16px; border-width: 2px; } @keyframes spin { to { transform: rotate(360deg); } } /* Bloque de carga centrado (reemplaza los "Cargando…" de texto plano) */ .loading-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; color: var(--muted); font-size: 13px; } /* Empty state estándar: icono + título + (opcional) descripción + CTA */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 24px; text-align: center; } .empty-state .empty-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--bg); color: var(--muted); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .empty-state .empty-icon svg { width: 24px; height: 24px; } .empty-state .empty-title { font-size: 14px; font-weight: 600; color: var(--fg); } .empty-state .empty-desc { font-size: 12.5px; color: var(--muted); max-width: 360px; line-height: 1.5; } .empty-state .empty-cta { margin-top: 8px; }