/* ========================================================================= Revest Dashboard · DataCrazy Desktop-first · Inter · paleta pedra/mineral ========================================================================= */ /* ---------- Design tokens ---------- */ :root { /* paleta principal */ --bg: #f4f1ec; --bg-elev: #ffffff; --bg-soft: #ece7de; --text: #1a1a1a; --text-muted: #6b6457; --text-subtle: #7d7668; --border: #e0d9cc; --border-strong: #c9c0ae; /* accent ocre (Revest Pedras) */ --accent: #8b6f47; --accent-weak: #ead9bf; --accent-strong: #6e5636; /* semânticas */ --ok: #2d7a4a; --ok-bg: #dff3e5; --warn: #a85f07; --warn-bg: #fdecd2; --crit: #a8302a; --crit-bg: #f9dedc; --info: #2e6aaa; --info-bg: #dce9f6; /* tipografia fluida */ --text-xs: clamp(0.7rem, 0.68rem + 0.1vw, 0.75rem); --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); --text-base: clamp(0.9rem, 0.87rem + 0.15vw, 0.9375rem); --text-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --text-lg: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem); --text-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem); --text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.1rem); /* raios e sombras */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.09); /* espaçamentos */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* chart/palette */ --chart-stroke: #8b6f47; --chart-fill: rgba(139, 111, 71, 0.15); } /* ---------- Reset leve ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Pico overrides — vamos usar nossos tokens */ main.container, body > main { padding: 0; max-width: none; } button, input, select { font-family: inherit; } a { color: var(--accent-strong); text-decoration: none; } a:hover { text-decoration: underline; } /* Alpine cloak — esconde DOM não-hidratado (evita flash de {{ ... }}). display:none derruba a árvore inteira sob . Alpine remove o atributo assim que termina alpine:init. */ [x-cloak] { display: none !important; } /* ---------- Header ---------- Altura FIXA (não min-height) pra que o `last-sync` mudando texto ("atualizando…" ⇄ "última sync: há 1s") não cause re-wrap e empurre o `main.grid` 24px pra baixo (fonte principal do CLS 0.65 no mobile). flex-wrap removido; se espaço faltar, `last-sync` overflow-fica-na-linha. */ .app-header { background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: nowrap; height: 72px; min-height: 72px; } .app-header .brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; flex: 1 1 auto; } .app-header h1 { font-size: var(--text-lg); font-weight: 700; margin: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header .subtitle { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header .brand-mark { width: 36px; height: 36px; border-radius: 6px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; } .last-sync { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: 6px; min-width: 160px; justify-content: flex-end; flex-shrink: 0; white-space: nowrap; overflow: hidden; } .last-sync > span:last-child { overflow: hidden; text-overflow: ellipsis; } .last-sync .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; } .last-sync.is-refreshing .dot { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .last-sync.is-refreshing .dot { animation: none; } } /* ---------- Filters bar ---------- */ .filters-bar { background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: var(--sp-3) var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; position: sticky; top: 0; z-index: 10; min-height: 60px; } .filters-bar label { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .filters-bar .filter-group { display: flex; align-items: center; gap: 6px; } .filters-bar select, .filters-bar input { height: 34px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--text); font-size: var(--text-sm); min-width: 120px; } .filters-bar .period-tabs { display: inline-flex; background: var(--bg-soft); border-radius: var(--radius-sm); padding: 2px; } .filters-bar .period-tabs button { background: transparent; border: 0; padding: 6px 12px; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); border-radius: 3px; cursor: pointer; } .filters-bar .period-tabs button.active { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .filters-bar .spacer { flex: 1 1 auto; } .btn { height: 34px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--text); font-size: var(--text-sm); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 120ms, border-color 120ms; } .btn:hover { background: var(--bg-soft); } .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--bg-soft); } .btn.sm { height: 28px; padding: 0 10px; font-size: var(--text-xs); } /* ---------- Grid principal ---------- */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); padding: var(--sp-5); max-width: 1600px; margin: 0 auto; } .block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-card); display: flex; flex-direction: column; min-width: 0; } .block header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); border: 0; padding: 0; background: transparent; } .block h2 { font-size: var(--text-md); font-weight: 600; margin: 0; color: var(--text); letter-spacing: -0.01em; } .block .block-sub { font-size: var(--text-xs); color: var(--text-subtle); margin-top: 2px; min-height: 1.2em; } .block .block-actions { display: flex; gap: 6px; align-items: center; } .span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } /* ---------- Alertas (bloco 1) ---------- Altura reservada: 5 alertas típicos (título + msg de até 2 linhas) = ~90px cada. 5*90 + 4*8(gap) = 482px. Aumento no mobile onde texto quebra mais. */ .alerts-list { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 320px; } .alert { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); border-left: 4px solid; background: var(--bg-soft); font-size: var(--text-sm); min-height: 54px; } .alert .icon { font-size: 18px; line-height: 1; flex-shrink: 0; } .alert .text-wrap { flex: 1 1 auto; min-width: 0; } .alert .title { font-weight: 600; color: var(--text); margin-bottom: 2px; } .alert .msg { color: var(--text-muted); font-size: var(--text-xs); } .alert .count { font-weight: 700; font-variant-numeric: tabular-nums; } .alert.sev-crit { background: var(--crit-bg); border-color: var(--crit); } .alert.sev-warn { background: var(--warn-bg); border-color: var(--warn); } .alert.sev-info { background: var(--info-bg); border-color: var(--info); } .alert.sev-ok { background: var(--ok-bg); border-color: var(--ok); } /* ---------- Cards KPI (bloco 2) ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); /* 2 rows * 96px + gap ≈ 204px. Evita salto quando overview chega. */ min-height: 204px; } .kpi-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 96px; } .kpi-card .label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi-card .value { font-size: var(--text-xl); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; min-height: 1.2em; } .kpi-card .delta { font-size: var(--text-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; min-height: 1em; } .kpi-card .delta.up { color: var(--ok); } .kpi-card .delta.down { color: var(--crit); } .kpi-card .delta.flat { color: var(--text-subtle); } /* ---------- Tabelas ---------- */ .dtable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .dtable thead th { text-align: left; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg-soft); position: sticky; top: 0; z-index: 1; cursor: default; } .dtable thead th.sortable { cursor: pointer; user-select: none; } .dtable thead th.sortable:hover { color: var(--text); } .dtable thead th .sort-ind { color: var(--text-subtle); margin-left: 4px; } .dtable tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text); font-variant-numeric: tabular-nums; } .dtable tbody tr:hover { background: var(--bg-soft); } .dtable tbody tr.selectable { cursor: pointer; } .dtable tbody tr.is-selected { background: var(--accent-weak); } .dtable .numeric { text-align: right; } .dtable .bad { color: var(--crit); font-weight: 600; } .dtable .warn { color: var(--warn); font-weight: 600; } .dtable .good { color: var(--ok); font-weight: 600; } .table-scroll { overflow: auto; max-height: 100%; border-radius: var(--radius-sm); contain: size layout; min-height: 200px; } .cold-leads-scroll { max-height: 360px; contain: size layout; min-height: 240px; } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; background: var(--bg-soft); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.crit { background: var(--crit-bg); color: var(--crit); } .badge.info { background: var(--info-bg); color: var(--info); } .badge.neutral { background: var(--bg-soft); color: var(--text-muted); } /* ---------- Tag dot (cor da tag) ---------- */ .tag-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 6px; } /* ---------- Chart wrappers ---------- */ .chart-wrap { position: relative; width: 100%; contain: strict; } .chart-wrap.h-280 { height: 280px; min-height: 280px; } .chart-wrap.h-200 { height: 200px; min-height: 200px; } .chart-wrap.h-160 { height: 160px; min-height: 160px; } .chart-wrap.h-120 { height: 120px; min-height: 120px; } .chart-wrap > canvas { max-width: 100%; max-height: 100%; height: 100% !important; width: 100% !important; aspect-ratio: auto !important; } /* ---------- SLA block (bloco 7) ---------- */ .sla-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); min-height: 58px; } .sla-metric { background: var(--bg-soft); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); text-align: center; min-height: 58px; } .sla-metric .p-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; } .sla-metric .p-value { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); min-height: 1.2em; } .sla-note { font-size: var(--text-xs); color: var(--text-muted); font-style: italic; margin-bottom: var(--sp-2); } /* ---------- Backlog (bloco 8) ---------- 12 items típicos * ~60px + gaps = ~720px. Mas viewport scroll fica em max-height 400px, então só reserva 400px. */ .backlog-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-2); height: 400px; max-height: 400px; min-height: 400px; } .backlog-item { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev); transition: background 120ms; min-height: 56px; } .backlog-item:hover { background: var(--bg-soft); } .backlog-item .b-contact { font-weight: 600; color: var(--text); font-size: var(--text-sm); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .backlog-item .b-meta { font-size: var(--text-xs); color: var(--text-muted); } .backlog-item .b-actions { align-self: center; display: flex; gap: 4px; flex-direction: column; align-items: flex-end; } .backlog-item .b-wait { font-size: var(--text-xs); margin-bottom: 4px; } /* ---------- Data Quality Score (bloco 12) ---------- */ .dq-list { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 240px; } .dq-item { min-height: 32px; } .dq-item .dq-label { display: flex; justify-content: space-between; font-size: var(--text-sm); margin-bottom: 4px; color: var(--text); } .dq-item .dq-label .dq-pct { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); } .dq-bar { width: 100%; height: 8px; background: var(--bg-soft); border-radius: 4px; overflow: hidden; } .dq-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 280ms ease-out; } .dq-bar-fill.warn { background: var(--warn); } .dq-bar-fill.crit { background: var(--crit); } @media (prefers-reduced-motion: reduce) { .dq-bar-fill { transition: none; } } /* ---------- Loading / empty ---------- */ .skeleton { background: linear-gradient(90deg, var(--bg-soft) 0%, var(--border) 50%, var(--bg-soft) 100%); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; border-radius: var(--radius-sm); height: 14px; min-width: 40px; display: inline-block; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background: var(--bg-soft); } } .empty { padding: var(--sp-4); text-align: center; color: var(--text-subtle); font-size: var(--text-sm); font-style: italic; } /* ---------- Footer ---------- */ .app-footer { text-align: center; padding: var(--sp-4) var(--sp-5); color: var(--text-subtle); font-size: var(--text-xs); border-top: 1px solid var(--border); margin-top: var(--sp-4); } /* ---------- Min-heights para evitar CLS (blocos) ---------- */ .block { min-height: 220px; } .block.span-4 { min-height: 240px; } .block.has-chart { min-height: 380px; } .block.has-chart-sm { min-height: 220px; } .block.has-backlog { min-height: 500px; } .block.has-sla { min-height: 520px; } .block.has-alerts { min-height: 500px; } /* 5 alerts populados ocupam ~470px + header */ /* ---------- Responsive ---------- */ @media (max-width: 1279px) { .grid { grid-template-columns: repeat(2, 1fr); } .span-3, .span-4 { grid-column: span 2; } .kpi-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 767px) { .grid { grid-template-columns: 1fr; padding: var(--sp-3); gap: var(--sp-3); } .span-1, .span-2, .span-3, .span-4 { grid-column: span 1; } .kpi-grid { grid-template-columns: repeat(2, 1fr); min-height: 404px; /* 4 rows * ~96 + gaps */ } /* Mobile: texto de alertas quebra em 2-3 linhas (tela estreita), item chega a 90px. Reserva 5*90 + gaps ≈ 470px pra evitar shift quando 5 alerts populam. */ .alerts-list { min-height: 470px; } .block.has-alerts { min-height: 544px; } /* 5 alerts * ~90px + header + padding no mobile */ /* Mobile header: esconde subtitle+last-sync inteiros. */ .app-header { padding: var(--sp-3); height: 60px; min-height: 60px; gap: var(--sp-2); } .app-header .subtitle { display: none; } .last-sync { display: none; } .filters-bar { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); min-height: 56px; } .filters-bar label { display: none; } .block { padding: var(--sp-3); } .sla-metrics { grid-template-columns: repeat(3, 1fr); } .backlog-list { height: 400px; max-height: 400px; min-height: 400px; } .mobile-hide { display: none; } /* Touch targets ≥44×44px (WCAG 2.2 SC 2.5.5) */ .btn, .btn.sm, .period-tabs button, .filters-bar .period-tabs button, .block-actions button, a.link-crm, button.csv-btn, .filter-select, select.filter-select, .dtable thead th.sortable { min-height: 44px; padding: 10px 16px; font-size: var(--text-sm); } .btn.sm { min-width: 44px; } .period-tabs button { min-width: 44px; padding: 10px 14px; } .filters-bar select { height: auto; min-height: 44px; } a.link-crm { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* ---------- Utilities ---------- */ .flex { display: flex; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .flex-1 { flex: 1 1 auto; } .mt-auto { margin-top: auto; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tnum { font-variant-numeric: tabular-nums; } .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; }