/* ============================================================ Saldo em Dia v12 — design system Marca: verde claro #69dba0 · verde escuro #18ae8e · navy #123355. Dados: paletas categóricas validadas (dataviz) claro/escuro. Temas: [data-theme="light"|"dark"] no . ============================================================ */ :root, :root[data-theme="light"] { color-scheme: light; /* superfícies e tinta */ --page: #f4f6f4; --surface: #fcfdfc; --ink: #0b0f0d; --ink-2: #4f5651; --muted: #848b85; --hairline: #dfe4df; --border: rgba(11, 15, 13, 0.10); /* marca (verde) + terciária navy */ --accent: #12a377; --accent-strong: #0d8a63; --accent-deep: #0a6b4d; --accent-wash: #e2f5ec; --navy: #123355; /* washes / camadas */ --wash: #eef2ee; --wash-2: #e7ece7; --track: #edf0ed; --line-soft: #eaeeea; --row-hover: #f5f8f5; --input-bg: #ffffff; --muted-fill: #d2d6d2; /* status (reservados) */ --good: #0ca30c; --good-text: #006300; --good-wash: #ddf3dd; --warn: #fab219; --warn-text: #8a5a00; --warn-wash: #fdeeca; --bad: #d03b3b; --bad-text: #a32424; --bad-wash: #fbe4e4; /* série de saldo nos gráficos (azul, nunca verde: verde = receita) */ --viz-balance: #2a78d6; /* sidebar / barras (navy da logo) */ --side-bg: linear-gradient(180deg, #123355, #0d2540); --side-bg-flat: #123355; --side-ink: #a8bccf; --side-active: #ffffff; --side-active-bar: #2fd598; --side-active-bg: rgba(24, 174, 142, 0.22); --side-hover: rgba(255, 255, 255, 0.08); --btn-fg: #ffffff; --tip-bg: #142a20; --tip-fg: #ffffff; --tip-muted: #a9c4b6; --radius: 12px; --radius-s: 8px; --shadow: 0 1px 2px rgba(11, 15, 13, 0.05), 0 4px 16px rgba(11, 15, 13, 0.04); --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } :root[data-theme="dark"] { color-scheme: dark; --page: #101214; --surface: #191c21; --ink: #f0f1ee; --ink-2: #b9bcb4; --muted: #8b8a84; --hairline: #2a2d33; --border: rgba(255, 255, 255, 0.10); --accent: #2fd598; --accent-strong: #12a377; --accent-deep: #17b585; --accent-wash: rgba(24, 174, 142, 0.16); --navy: #4a8fd9; --wash: #22262c; --wash-2: #262a31; --track: #2a2e35; --line-soft: #24272d; --row-hover: #1f2228; --input-bg: #14161a; --muted-fill: #3a3f47; --good: #3da43d; --good-text: #6fd18f; --good-wash: rgba(61, 164, 61, 0.18); --warn: #c79214; --warn-text: #e5c46e; --warn-wash: rgba(199, 146, 20, 0.16); --bad: #e05252; --bad-text: #f09c9c; --bad-wash: rgba(224, 82, 82, 0.16); --viz-balance: #4a8fd9; --side-bg: linear-gradient(180deg, #0e2946, #0a1e33); --side-bg-flat: #0e2946; --side-ink: #93a9bf; --side-active: #ffffff; --side-active-bar: #2fd598; --side-active-bg: rgba(24, 174, 142, 0.24); --side-hover: rgba(255, 255, 255, 0.07); --btn-fg: #06231a; --tip-bg: #262b31; --tip-fg: #f0f1ee; --tip-muted: #a5aaa1; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.30); } * { box-sizing: border-box; } html, body { height: 100%; } body { background: var(--page); color: var(--ink); font-family: var(--font); font-size: 14.5px; line-height: 1.45; margin: 0; } button, input, select { font: inherit; color: inherit; } h1, h2, h3 { line-height: 1.2; margin: 0; } h1 { font-size: clamp(1.2rem, 1.6vw + 0.8rem, 1.45rem); font-weight: 750; letter-spacing: -0.01em; } h2 { font-size: 1rem; font-weight: 700; } .hidden { display: none !important; } /* ---------- Botões ---------- */ .btn { align-items: center; background: var(--accent-strong); border: 0; border-radius: var(--radius-s); color: var(--btn-fg); cursor: pointer; display: inline-flex; font-weight: 650; gap: 8px; justify-content: center; min-height: 40px; padding: 0 16px; transition: background 0.15s, box-shadow 0.15s, transform 0.05s; } .btn:hover:not(:disabled) { background: var(--accent-deep); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { cursor: not-allowed; opacity: 0.5; } .btn svg, .nav svg, .nav-logout svg, .bottom-nav svg, .search svg, .privacy-note svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .btn svg { height: 16px; width: 16px; } .btn.ghost { background: var(--surface); border: 1px solid var(--border); color: var(--ink); } .btn.ghost:hover:not(:disabled) { background: var(--wash); } .btn.success { background: #0a8a0a; color: #fff; } .btn.success:hover:not(:disabled) { background: #087408; } :root[data-theme="dark"] .btn.success { background: #3da43d; color: #06231a; } :root[data-theme="dark"] .btn.success:hover:not(:disabled) { background: #4cb54c; } .btn.small { min-height: 34px; padding: 0 12px; font-size: 0.86rem; } :where(button, input, select, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Shell / sidebar ---------- */ .shell { display: flex; min-height: 100vh; } .sidebar { background: var(--side-bg); display: flex; flex-direction: column; flex-shrink: 0; gap: 6px; padding: 20px 14px; position: sticky; top: 0; height: 100vh; width: 224px; } .brand { align-items: center; display: flex; gap: 10px; padding: 2px 8px 18px; } .brand-logo { display: block; height: 38px; width: auto; } .brand-name { color: #fff; font-size: 1.02rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; } .brand-name strong { color: #69dba0; font-weight: 800; } .nav { display: grid; gap: 4px; } .nav button, .nav-logout { align-items: center; background: transparent; border: 0; border-radius: 9px; color: var(--side-ink); cursor: pointer; display: flex; font-weight: 600; gap: 11px; min-height: 42px; padding: 0 12px; text-align: left; width: 100%; transition: background 0.15s, color 0.15s; } .nav svg, .nav-logout svg { height: 18px; width: 18px; flex-shrink: 0; } .nav button:hover, .nav-logout:hover { background: var(--side-hover); color: #fff; } .nav button.active { background: var(--side-active-bg); color: var(--side-active); position: relative; } .nav button.active::before { background: var(--side-active-bar); border-radius: 999px; content: ""; height: 20px; left: 0; position: absolute; top: 11px; width: 3px; } .sidebar-foot { display: grid; gap: 4px; margin-top: auto; } /* ---------- Mobile bars ---------- */ .mobilebar { align-items: center; background: var(--side-bg); display: none; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; position: sticky; top: 0; z-index: 30; } .mobilebar .brand { padding: 0; } .mobilebar .brand-logo { height: 30px; } .mobilebar-actions { align-items: center; display: flex; gap: 8px; } .mobilebar .btn.ghost { background: transparent; border-color: rgba(255,255,255,0.25); color: #fff; } /* Bottom nav estilo app (iFood/Nubank): fixa, blur, pílula no ativo */ .bottom-nav { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--surface) 90%, transparent); border-top: 1px solid var(--hairline); bottom: 0; box-shadow: 0 -8px 28px rgba(11, 15, 13, 0.10); display: none; gap: 4px; left: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: 30; } .bottom-nav button { align-items: center; background: transparent; border: 0; border-radius: 14px; color: var(--muted); cursor: pointer; display: flex; flex: 1; flex-direction: column; font-size: 0.7rem; font-weight: 650; gap: 3px; min-height: 54px; justify-content: center; padding: 5px 4px; -webkit-tap-highlight-color: transparent; transition: color 0.18s; } .bottom-nav .nav-ico { align-items: center; border-radius: 999px; display: inline-flex; height: 30px; justify-content: center; transition: background 0.18s; width: 56px; } .bottom-nav svg { height: 22px; width: 22px; } .bottom-nav button.active { color: var(--accent-deep); font-weight: 750; } .bottom-nav button.active .nav-ico { background: var(--accent-wash); } :root[data-theme="dark"] .bottom-nav button.active { color: var(--accent); } /* ---------- Conteúdo ---------- */ .content { flex: 1; margin: 0 auto; max-width: 1420px; min-width: 0; padding: clamp(14px, 2.6vw, 26px) clamp(14px, 3vw, 30px) 60px; width: 100%; } .view { display: none; } .view.active { display: block; } .page-head { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-bottom: 18px; } .page-sub { color: var(--ink-2); font-size: 0.9rem; margin: 4px 0 0; } .page-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* ---------- Filtros ---------- */ .filter-bar { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .segmented { background: var(--wash-2); border: 1px solid var(--hairline); border-radius: 10px; display: inline-flex; padding: 3px; } .segmented button { background: transparent; border: 0; border-radius: 7px; color: var(--ink-2); cursor: pointer; font-weight: 650; min-height: 34px; padding: 0 14px; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .segmented button.active { background: var(--surface); box-shadow: 0 1px 3px rgba(11, 11, 11, 0.12); color: var(--ink); } select { appearance: none; background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352514e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 15px; border: 1px solid var(--border); border-radius: var(--radius-s); cursor: pointer; min-height: 40px; min-width: 172px; padding: 0 32px 0 12px; } select:hover { border-color: color-mix(in srgb, var(--ink) 24%, transparent); } :root[data-theme="dark"] select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9bcb4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .search { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); color: var(--muted); display: inline-flex; gap: 8px; min-height: 40px; padding: 0 12px; } .search:focus-within { border-color: var(--accent); } .search svg { height: 16px; width: 16px; flex-shrink: 0; } .search input { background: transparent; border: 0; color: var(--ink); min-width: 0; outline: none; width: 190px; } .search.grow { flex: 1; min-width: 220px; } .search.grow input { width: 100%; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .chip { align-items: center; background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; color: var(--accent-deep); cursor: pointer; display: inline-flex; font-size: 0.82rem; font-weight: 650; gap: 6px; padding: 5px 12px; } .chip:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); } .chip b { font-weight: 800; } .chip .x { font-size: 1rem; line-height: 1; } /* ---------- KPI ---------- */ .kpi-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-bottom: 16px; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; } .kpi header { align-items: center; color: var(--ink-2); display: flex; font-size: 0.84rem; font-weight: 650; justify-content: space-between; } .kpi-dot { border-radius: 999px; display: inline-block; height: 8px; width: 8px; } .kpi-dot.expense { background: var(--bad); } .kpi-dot.income { background: var(--good); } .kpi-dot.balance { background: var(--viz-balance); } .kpi-dot.count { background: var(--muted); } .kpi > strong { font-size: 1.55rem; font-weight: 750; letter-spacing: -0.02em; } .kpi-foot { align-items: center; display: flex; gap: 10px; justify-content: space-between; min-height: 22px; } .kpi-hint { color: var(--muted); font-size: 0.78rem; } .delta { align-items: center; border-radius: 999px; display: inline-flex; font-size: 0.78rem; font-weight: 750; gap: 3px; padding: 2px 9px; white-space: nowrap; } .delta.up-bad, .delta.down-bad { background: var(--bad-wash); color: var(--bad-text); } .delta.up-good, .delta.down-good { background: var(--good-wash); color: var(--good-text); } .delta.flat { background: var(--wash-2); color: var(--ink-2); } .spark { flex-shrink: 0; height: 36px; width: 120px; } .spark polyline { fill: none; stroke: var(--muted-fill); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .spark .spark-fill { fill: color-mix(in srgb, var(--accent) 9%, transparent); stroke: none; } .spark circle { fill: var(--accent); stroke: var(--surface); stroke-width: 2; } /* ---------- Cards / grid ---------- */ .grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); margin-bottom: 16px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 0; min-width: 0; padding: 18px 20px; } section.view > .card { margin-bottom: 16px; } .card-head { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-bottom: 14px; } .card-hint { color: var(--muted); font-size: 0.8rem; } .count-badge { background: var(--wash-2); border-radius: 999px; color: var(--ink-2); font-size: 0.8rem; font-weight: 700; padding: 4px 12px; white-space: nowrap; } .table-tools { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; } /* ---------- Legend ---------- */ .legend { align-items: center; color: var(--ink-2); display: flex; flex-wrap: wrap; font-size: 0.8rem; gap: 14px; } .legend span { align-items: center; display: inline-flex; gap: 6px; } .legend .key.rect { border-radius: 3px; display: inline-block; height: 10px; width: 10px; } .legend .key.line { border-radius: 2px; display: inline-block; height: 3px; width: 14px; } .legend .key.expense { background: var(--bad); } .legend .key.income { background: var(--good); } .legend .key.balance { background: var(--viz-balance); } /* ---------- Donut ---------- */ .card:has(> #donutWrap), .card:has(.donut-wrap) { container-type: inline-size; } .donut-wrap { align-items: center; display: grid; gap: clamp(12px, 2vw, 22px); grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); min-height: 210px; } /* card estreito (3 colunas em ultrawide ou telas médias): legenda desce */ @container (max-width: 430px) { .donut-wrap { grid-template-columns: 1fr; justify-items: center; } .donut-legend { justify-self: stretch; } } .donut-box { aspect-ratio: 1; max-width: 200px; position: relative; width: 100%; } .donut-box svg { height: 100%; width: 100%; } .donut-box path { cursor: pointer; stroke: var(--surface); stroke-width: 2; transition: opacity 0.15s, filter 0.15s; } .donut-box path:hover { filter: brightness(1.08); } .donut-box.has-selection path { opacity: 0.3; } .donut-box.has-selection path.selected { opacity: 1; } .donut-center { align-items: center; display: flex; flex-direction: column; inset: 0; justify-content: center; pointer-events: none; position: absolute; text-align: center; } .donut-center small { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; } .donut-center strong { font-size: 1.05rem; font-weight: 800; } .donut-legend { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; } .donut-legend button { align-items: center; background: transparent; border: 0; border-radius: 7px; cursor: pointer; display: grid; gap: 9px; grid-template-columns: 10px 1fr auto auto; padding: 6px 8px; text-align: left; width: 100%; } .donut-legend button:hover { background: var(--wash); } .donut-legend button.selected { background: var(--accent-wash); } .donut-legend i { border-radius: 3px; display: inline-block; height: 10px; width: 10px; } .donut-legend .dl-name { color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .donut-legend .dl-val { font-size: 0.86rem; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .donut-legend .dl-pct { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; } /* ---------- Trend (colunas mensais) ---------- */ .trend-chart { width: 100%; } .trend-chart svg { display: block; width: 100%; } .trend-chart .grid-line { stroke: var(--hairline); stroke-width: 1; } .trend-chart .baseline { stroke: var(--muted-fill); stroke-width: 1; } .trend-chart .axis-text { fill: var(--muted); font-family: var(--font); font-size: 10.5px; font-variant-numeric: tabular-nums; } .trend-chart .col-exp { fill: var(--bad); } .trend-chart .col-inc { fill: var(--good); } .trend-chart .bal-line { fill: none; stroke: var(--viz-balance); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .trend-chart .bal-dot { fill: var(--viz-balance); stroke: var(--surface); stroke-width: 2; } .trend-chart .hit { cursor: pointer; fill: transparent; } .trend-chart .month-group { transition: opacity 0.15s; } .trend-chart .month-group.dim { opacity: 0.3; } .trend-chart .month-group.hover-lift .col-exp, .trend-chart .month-group.hover-lift .col-inc { filter: brightness(1.1); } /* ---------- Barras horizontais ---------- */ .hbars { display: grid; gap: 4px; } .hbar { align-items: center; background: transparent; border: 0; border-radius: 8px; cursor: pointer; display: grid; gap: 12px; grid-template-columns: minmax(88px, 132px) 1fr minmax(84px, auto); padding: 7px 8px; text-align: left; transition: background 0.15s, opacity 0.15s; width: 100%; } .hbar:hover { background: var(--wash); } .hbar.dim { opacity: 0.35; } .hbar.selected { background: var(--accent-wash); } .hbar .hb-name { color: var(--ink-2); font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbar .hb-track { background: var(--track); border-radius: 0 4px 4px 0; height: 10px; overflow: hidden; } .hbar .hb-fill { background: var(--accent); border-radius: 0 4px 4px 0; display: block; height: 100%; min-width: 2px; } .hbar .hb-val { font-size: 0.86rem; font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; } .hbars .empty, .top-list .empty, .donut-wrap .empty, .trend-chart .empty { color: var(--muted); padding: 18px 4px; } /* ---------- Metas ---------- */ .goals-summary { margin-bottom: 14px; } .goals-total { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; } .goals-total p { color: var(--ink-2); font-size: 0.86rem; margin: 0; } .goals-total p strong { color: var(--ink); } .goal-badge { border-radius: 999px; font-size: 0.78rem; font-weight: 750; padding: 3px 11px; white-space: nowrap; } .goal-badge.good { background: var(--good-wash); color: var(--good-text); } .goal-badge.warn { background: var(--warn-wash); color: var(--warn-text); } .goal-badge.bad { background: var(--bad-wash); color: var(--bad-text); } .goal-badge.muted { background: var(--wash-2); color: var(--ink-2); } .goals-list { display: grid; gap: 12px; } .goal-row { display: grid; gap: 5px; } .goal-top { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 8px; } .goal-top i { border-radius: 3px; display: inline-block; flex-shrink: 0; height: 10px; width: 10px; } .goal-top strong { font-size: 0.88rem; font-weight: 650; } .goal-top small { color: var(--muted); font-size: 0.8rem; margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; } .goal-edit-btn { align-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; display: inline-flex; height: 24px; justify-content: center; padding: 0; width: 24px; } .goal-edit-btn:hover { background: var(--wash); color: var(--ink); } .goal-edit-btn svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 13px; } .goal-meter { background: var(--track); border-radius: 999px; height: 8px; overflow: hidden; } .goal-meter .fill { border-radius: 999px; display: block; height: 100%; transition: width 0.3s; } .goal-meter .fill.good { background: var(--good); } .goal-meter .fill.warn { background: var(--warn); } .goal-meter .fill.bad { background: var(--bad); } .goal-meter .fill.muted { background: var(--muted-fill); } .goal-form { align-items: center; display: flex; gap: 8px; margin-top: 4px; } .goal-form input { border: 1px solid var(--border); border-radius: 7px; min-height: 34px; padding: 0 10px; width: 120px; } .goal-form .btn { min-height: 34px; padding: 0 12px; } /* ---------- Top despesas ---------- */ .top-list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; } .top-list li { align-items: center; border-radius: 8px; display: grid; gap: 12px; grid-template-columns: 24px 1fr auto; padding: 7px 8px; } .top-list li:hover { background: var(--wash); } .top-list .rank { color: var(--muted); font-size: 0.8rem; font-weight: 750; font-variant-numeric: tabular-nums; } .top-list .desc { min-width: 0; } .top-list .desc strong { display: block; font-size: 0.87rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .top-list .desc small { color: var(--muted); font-size: 0.78rem; } .top-list .val { font-variant-numeric: tabular-nums; font-weight: 750; white-space: nowrap; } /* ---------- Tabelas ---------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } table { border-collapse: collapse; min-width: 1080px; width: 100%; } th, td { border-bottom: 1px solid var(--line-soft); padding: 9px 10px; text-align: left; vertical-align: middle; } th { background: var(--surface); color: var(--muted); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.05em; position: sticky; text-transform: uppercase; top: 0; white-space: nowrap; z-index: 1; } tbody tr { transition: background 0.1s; } tbody tr:hover { background: var(--row-hover); } .num { text-align: right; white-space: nowrap; } td.num { font-variant-numeric: tabular-nums; font-weight: 650; } .date-cell { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .amount-cell, .category-cell { white-space: nowrap; } .w-eye { width: 44px; } .expense { color: var(--bad-text); } .income { color: var(--good-text); } .neutral { color: var(--muted); } .type-pill { background: transparent; border: 1px solid currentColor; border-radius: 999px; cursor: pointer; display: inline-block; font-size: 0.76rem; font-weight: 700; min-height: 0; padding: 2px 10px; white-space: nowrap; } .category-chip { background: var(--wash); border: 1px solid transparent; border-radius: 999px; color: var(--ink-2); cursor: pointer; display: inline-block; font-size: 0.76rem; font-weight: 650; min-height: 0; padding: 2px 10px; white-space: nowrap; } .category-chip::before { background: var(--cat-color, var(--muted)); border-radius: 999px; content: ""; display: inline-block; height: 7px; margin-right: 6px; width: 7px; } button.type-pill:hover, button.category-chip:hover { border-color: currentColor; filter: brightness(0.96); } .icon-btn { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 7px; color: var(--accent-deep); cursor: pointer; display: inline-flex; height: 30px; justify-content: center; padding: 0; width: 34px; } .icon-btn:hover { background: var(--accent-wash); } .icon-btn.off { color: var(--muted); } .icon-btn svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 17px; } .excluded-row { background: var(--row-hover); } .excluded-row td:not(:first-child) { opacity: 0.55; } tr.duplicate td { opacity: 0.5; } .dup-badge { background: var(--wash-2); border-radius: 999px; color: var(--ink-2); font-size: 0.7rem; font-weight: 750; margin-left: 8px; padding: 1px 8px; text-transform: uppercase; white-space: nowrap; } /* ---------- Popover tipo/categoria ---------- */ .choice-menu { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 45px rgba(11, 11, 11, 0.18); display: grid; gap: 2px; max-width: 230px; min-width: 185px; padding: 8px; position: fixed; z-index: 60; } .choice-menu strong { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.06em; padding: 4px 9px; text-transform: uppercase; } .choice-menu button { align-items: center; background: transparent; border: 0; border-radius: 7px; cursor: pointer; display: flex; gap: 8px; min-height: 34px; padding: 0 9px; text-align: left; width: 100%; } .choice-menu button i { background: var(--cat-color, transparent); border-radius: 999px; display: inline-block; height: 7px; width: 7px; } .choice-menu button:hover { background: var(--wash); } .choice-menu button.active { background: var(--accent-wash); color: var(--accent-deep); font-weight: 700; } /* ---------- Tooltip ---------- */ .viz-tip { background: var(--tip-bg); border: 1px solid color-mix(in srgb, var(--tip-fg) 12%, transparent); border-radius: 9px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); color: var(--tip-fg); font-size: 0.82rem; max-width: 260px; padding: 9px 12px; pointer-events: none; position: fixed; z-index: 70; } .viz-tip .tip-title { color: var(--tip-muted); display: block; font-size: 0.74rem; font-weight: 650; margin-bottom: 4px; } .viz-tip .tip-row { align-items: center; display: flex; gap: 8px; } .viz-tip .tip-row + .tip-row { margin-top: 3px; } .viz-tip .tip-key { border-radius: 2px; display: inline-block; flex-shrink: 0; height: 3px; width: 12px; } .viz-tip .tip-val { font-variant-numeric: tabular-nums; font-weight: 750; margin-left: auto; } .viz-tip .tip-label { color: var(--tip-muted); } /* ---------- Importar ---------- */ .drop-zone { align-items: center; background: var(--row-hover); border: 1.5px dashed #c0bfb6; border-radius: var(--radius); cursor: pointer; display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 190px; padding: 30px; text-align: center; transition: background 0.15s, border-color 0.15s; } .drop-zone:hover, .drop-zone.dragover { background: var(--accent-wash); border-color: var(--accent); } .drop-zone input { display: none; } .drop-zone strong { color: var(--ink); font-weight: 700; } .drop-zone small { color: var(--muted); } .dz-icon { align-items: center; background: var(--accent-wash); border-radius: 999px; color: var(--accent-deep); display: inline-flex; height: 52px; justify-content: center; margin-bottom: 4px; width: 52px; } .dz-icon svg { fill: none; height: 24px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 24px; } .drop-zone.dragover .dz-icon { background: var(--accent); color: #fff; } .file-list { display: grid; gap: 8px; margin-top: 14px; } .file-item { align-items: center; border: 1px solid var(--hairline); border-radius: 10px; display: grid; gap: 12px; grid-template-columns: auto 1fr auto auto; padding: 10px 12px; } .file-item .fi-icon { align-items: center; background: var(--wash); border-radius: 8px; color: var(--ink-2); display: inline-flex; height: 34px; justify-content: center; width: 34px; } .file-item .fi-icon svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 17px; } .file-item .fi-main { min-width: 0; } .file-item .fi-name { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-item .fi-size { color: var(--muted); font-size: 0.78rem; } .file-status { border-radius: 999px; font-size: 0.78rem; font-weight: 700; padding: 3px 11px; white-space: nowrap; } .file-status.pending { background: var(--wash-2); color: var(--ink-2); } .file-status.working { background: var(--accent-wash); color: var(--accent-deep); } .file-status.success { background: var(--good-wash); color: var(--good-text); } .file-status.error { background: var(--bad-wash); color: var(--bad-text); white-space: normal; } .file-remove { align-items: center; background: transparent; border: 0; border-radius: 7px; color: var(--muted); cursor: pointer; display: inline-flex; font-size: 1.05rem; height: 28px; justify-content: center; line-height: 1; width: 28px; } .file-remove:hover { background: var(--bad-wash); color: var(--bad-text); } .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .message { border-radius: 10px; font-weight: 600; margin-top: 14px; padding: 12px 14px; } .message.error { background: var(--bad-wash); color: var(--bad-text); } .message.success { background: var(--good-wash); color: var(--good-text); } .privacy-note { align-items: center; color: var(--muted); display: flex; font-size: 0.8rem; gap: 7px; margin: 14px 0 0; } .privacy-note svg { flex-shrink: 0; height: 14px; width: 14px; } .stat-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin-bottom: 14px; } .stat { border: 1px solid var(--hairline); border-radius: 10px; padding: 12px 14px; } .stat small { color: var(--muted); display: block; font-size: 0.76rem; font-weight: 650; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .stat strong { display: block; font-size: 1.05rem; overflow-wrap: anywhere; } .stat.good strong { color: var(--good-text); } .stat.muted strong { color: var(--muted); } /* ---------- Login ---------- */ .login-page { align-items: center; background: radial-gradient(720px 420px at 85% -10%, rgba(24, 174, 142, 0.18), transparent 65%), radial-gradient(600px 420px at -10% 110%, rgba(18, 51, 85, 0.14), transparent 60%), var(--page); display: flex; justify-content: center; min-height: 100vh; padding: 24px; } .login-logo { display: block; height: 84px; margin: 0 auto; width: auto; } .login-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 70px rgba(11, 11, 11, 0.12); max-width: 392px; padding: 34px 32px 28px; width: 100%; } .signup-box { max-width: 720px; } .login-brand { align-items: center; display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; text-align: center; } .login-brand h1 { color: var(--ink); font-size: 1.3rem; font-weight: 400; } .login-brand h1 strong { color: var(--accent-deep); font-weight: 800; } .login-brand p { color: var(--ink-2); font-size: 0.88rem; margin: 0; } .login-box label { color: var(--ink-2); display: block; font-size: 0.84rem; font-weight: 650; margin-bottom: 14px; } .login-box .field { margin-top: 6px; position: relative; } .login-box input { background: var(--input-bg); border: 1px solid var(--border); border-radius: 9px; display: block; min-height: 44px; padding: 0 12px; transition: border-color 0.15s, box-shadow 0.15s; width: 100%; } .login-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: none; } .login-box .field input { padding-right: 44px; } .pw-toggle { align-items: center; background: transparent; border: 0; border-radius: 7px; color: var(--muted); cursor: pointer; display: inline-flex; height: 32px; justify-content: center; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; } .pw-toggle:hover { color: var(--ink); } .pw-toggle.on { color: var(--accent-deep); } .pw-toggle svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 17px; } /* ---------- Toggle de tema ---------- */ .theme-toggle { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--side-ink); cursor: pointer; display: flex; font-weight: 600; gap: 11px; min-height: 42px; padding: 0 12px; text-align: left; width: 100%; } .theme-toggle:hover { background: var(--side-hover); color: #fff; } .theme-toggle svg { fill: none; flex-shrink: 0; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; } .theme-toggle .tt-dark, :root[data-theme="dark"] .theme-toggle .tt-light { display: none; } :root[data-theme="dark"] .theme-toggle .tt-dark { display: block; } .mobilebar .theme-toggle { border-color: rgba(255, 255, 255, 0.25); color: #fff; min-height: 34px; padding: 0 9px; width: auto; } .mobilebar .theme-toggle:hover { background: rgba(255, 255, 255, 0.1); } .login-theme { background: transparent; border: 0; border-radius: 9px; color: var(--muted); cursor: pointer; padding: 8px; position: absolute; right: 14px; top: 14px; } .login-theme:hover { color: var(--ink); } .login-theme svg { display: block; fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; } .login-theme .tt-dark, :root[data-theme="dark"] .login-theme .tt-light { display: none; } :root[data-theme="dark"] .login-theme .tt-dark { display: block; } .login-box .btn { margin-top: 6px; min-height: 44px; width: 100%; } .form-grid { display: grid; gap: 0 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid label:first-child, .form-grid label:nth-child(3), .form-grid label:nth-child(7) { grid-column: 1 / -1; } .pw-rules { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 4px 0 16px; padding: 0; } .pw-rules li { background: var(--wash-2); border-radius: 999px; color: var(--ink-2); font-size: 0.76rem; font-weight: 700; padding: 3px 9px; } .pw-rules li.ok { background: var(--good-wash); color: var(--good-text); } .check-row { align-items: flex-start; display: flex !important; gap: 9px; line-height: 1.35; margin-bottom: 10px !important; } .check-row input { min-height: 0; margin-top: 2px; width: auto; } .check-row a, .auth-links a, .legal-doc a, .inline-link, .link-button { background: transparent; border: 0; color: var(--accent-deep); cursor: pointer; font-weight: 700; padding: 0; text-decoration: none; } .check-row a:hover, .auth-links a:hover, .legal-doc a:hover, .inline-link:hover, .link-button:hover { text-decoration: underline; } .auth-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; } .login-error { background: var(--bad-wash); border-radius: 9px; color: var(--bad-text); font-size: 0.86rem; font-weight: 650; margin: 0 0 16px; padding: 11px 13px; } .login-notice { background: var(--good-wash); border-radius: 9px; color: var(--good-text); font-size: 0.86rem; font-weight: 650; margin: 0 0 16px; padding: 11px 13px; } .login-foot { color: var(--muted); font-size: 0.76rem; margin: 22px 0 0; text-align: center; } .auth-modal, .app-modal { align-items: center; background: rgba(7, 14, 20, 0.54); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 100; } .auth-modal[hidden], .app-modal.hidden { display: none; } .auth-modal-panel, .app-modal-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.30); max-height: min(820px, calc(100vh - 34px)); max-width: 560px; overflow: hidden; width: min(100%, 560px); } .legal-modal-panel { max-width: 880px; width: min(100%, 880px); } .auth-modal-head, .app-modal-head { align-items: flex-start; border-bottom: 1px solid var(--line-soft); display: flex; gap: 16px; justify-content: space-between; padding: 18px 20px; } .auth-modal-head p, .app-modal-head p { color: var(--muted); margin: 4px 0 0; } .modal-x { align-items: center; background: var(--wash); border: 0; border-radius: 8px; color: var(--ink-2); cursor: pointer; display: inline-flex; flex-shrink: 0; font-size: 1.2rem; height: 34px; justify-content: center; line-height: 1; width: 34px; } .modal-x:hover { background: var(--bad-wash); color: var(--bad-text); } .legal-modal-body { display: grid; gap: 14px; max-height: min(560px, calc(100vh - 220px)); overflow: auto; padding: 18px 20px; } .legal-modal-body section { border-bottom: 1px solid var(--line-soft); padding-bottom: 13px; } .legal-modal-body section:last-child { border-bottom: 0; padding-bottom: 0; } .legal-modal-body h3 { font-size: 0.96rem; margin: 0 0 5px; } .legal-modal-body p { color: var(--ink-2); margin: 0; } .auth-modal-foot { border-top: 1px solid var(--line-soft); display: flex; justify-content: flex-end; padding: 14px 20px; } .modal-form { display: grid; gap: 14px; padding: 18px 20px 20px; } .modal-form label { color: var(--ink-2); display: grid; font-size: 0.84rem; font-weight: 650; gap: 6px; } .modal-form input { background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-s); min-height: 42px; padding: 0 12px; } .app-modal-panel .message { margin: 0 20px 20px; } /* ---------- Meu Perfil / LGPD ---------- */ .profile-panel { display: none; } .profile-panel.active { display: block; } .profile-form { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .profile-form label { color: var(--ink-2); display: grid; font-size: 0.84rem; font-weight: 650; gap: 6px; } .profile-form input { background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-s); min-height: 40px; padding: 0 12px; } .profile-form input:disabled { color: var(--muted); opacity: 0.85; } .profile-form .btn { align-self: end; min-height: 40px; } .legal-inline { display: grid; gap: 12px; } .legal-inline section { border-bottom: 1px solid var(--line-soft); padding-bottom: 11px; } .legal-inline section:last-child { border-bottom: 0; padding-bottom: 0; } .legal-inline h3, .profile-subtitle { font-size: 0.95rem; margin: 0 0 5px; } .legal-inline p { color: var(--ink-2); margin: 0; } .privacy-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; } .profile-subtitle { margin-top: 18px; } .profile-table { min-width: 760px; } .request-list { display: grid; gap: 8px; } .request-item { align-items: center; border: 1px solid var(--hairline); border-radius: 9px; display: grid; gap: 8px; grid-template-columns: minmax(120px, 1fr) auto auto; padding: 10px 12px; } .request-item span { background: var(--accent-wash); border-radius: 999px; color: var(--accent-deep); font-size: 0.78rem; font-weight: 750; padding: 3px 10px; } .request-item small { color: var(--muted); white-space: nowrap; } .legal-page { background: var(--page); min-height: 100vh; padding: clamp(18px, 4vw, 42px); } .legal-doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 auto; max-width: 860px; padding: clamp(20px, 4vw, 38px); } .legal-doc h1 { margin-top: 16px; } .legal-version { color: var(--muted); font-weight: 700; margin: 8px 0 22px; } .legal-doc section { border-top: 1px solid var(--line-soft); padding: 16px 0; } .legal-doc section:last-child { padding-bottom: 0; } .legal-doc h2 { margin-bottom: 6px; } .legal-doc p { color: var(--ink-2); margin: 0; } /* ---------- Responsivo ---------- Camadas: ≥1200 sidebar completa · 900–1199 rail de ícones · <900 topbar + bottom nav · ≤640 ajustes de densidade · ≤380 micro-telas. Grids KPI/charts/stats são fluidos via auto-fit (sem saltos entre faixas). */ @media (max-width: 1199px) { .sidebar { align-items: center; padding: 18px 10px; width: 72px; } .sidebar .brand { justify-content: center; padding: 2px 0 16px; } .sidebar .brand-name { display: none; } .sidebar .brand-logo { height: 34px; } .nav { justify-items: stretch; width: 100%; } .nav button, .nav-logout, .sidebar .theme-toggle { gap: 0; justify-content: center; padding: 0; } .nav button span, .nav-logout span, .sidebar .theme-toggle span { display: none; } .nav button.active::before { height: 22px; top: 10px; } } @media (max-width: 899px) { .sidebar { display: none; } .mobilebar { display: flex; } .bottom-nav { display: flex; } .content { padding-bottom: 96px; } } @media (max-width: 640px) { .filter-bar select { flex: 1; min-width: 46%; } .segmented { display: flex; width: 100%; } .segmented button { flex: 1; min-width: 0; padding: 0 6px; } .profile-tabs button { font-size: 0.78rem; } #profilePanelLogs .table-wrap { overflow: visible; } #profilePanelLogs .profile-table { display: block; min-width: 0; } #profilePanelLogs .profile-table thead { display: none; } #profilePanelLogs .profile-table tbody { display: grid; gap: 10px; } #profilePanelLogs .profile-table tr { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 8px; padding: 12px; } #profilePanelLogs .profile-table td { border: 0; display: grid; gap: 8px; grid-template-columns: 78px minmax(0, 1fr); overflow-wrap: anywhere; padding: 0; white-space: normal; } #profilePanelLogs .profile-table td::before { color: var(--muted); content: ""; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } #profilePanelLogs .profile-table td:nth-child(1)::before { content: "Data"; } #profilePanelLogs .profile-table td:nth-child(2)::before { content: "Ação"; } #profilePanelLogs .profile-table td:nth-child(3)::before { content: "Status"; } #profilePanelLogs .profile-table td:nth-child(4)::before { content: "IP"; } #profilePanelLogs .profile-table td:nth-child(5)::before { content: "Detalhes"; } .donut-wrap { grid-template-columns: 1fr; justify-items: center; } .donut-legend { justify-self: stretch; } .page-actions { width: 100%; } .page-actions .btn { flex: 1; font-size: 0.9rem; gap: 6px; padding: 0 10px; white-space: nowrap; } .search.grow { width: 100%; } .kpi > strong { font-size: 1.4rem; } .file-item { grid-template-columns: auto 1fr; } .file-item .file-status { grid-column: 2; justify-self: start; } .file-item .file-remove { grid-column: 1; grid-row: 2; } .form-grid { grid-template-columns: 1fr; } .form-grid label { grid-column: 1 / -1; } .request-item { grid-template-columns: 1fr; } .auth-modal, .app-modal { align-items: stretch; padding: 10px; } .auth-modal-panel, .app-modal-panel { max-height: calc(100vh - 20px); } .legal-modal-body { max-height: calc(100vh - 190px); } } @media (max-width: 380px) { body { font-size: 14px; } .segmented button { font-size: 0.82rem; padding: 0 4px; } .filter-bar select { min-width: 100%; } .kpi > strong { font-size: 1.28rem; } .donut-box { height: 170px; width: 170px; } .login-box { padding: 26px 20px 22px; } .goal-top small { font-size: 0.74rem; } .bottom-nav button { font-size: 0.68rem; } } /* Touch: alvos maiores, popover abre por toque (clique já suportado) */ @media (pointer: coarse) { .type-pill, .category-chip { min-height: 30px; padding: 4px 12px; } .icon-btn { height: 38px; width: 42px; } .goal-edit-btn { height: 34px; width: 34px; } .file-remove { height: 36px; width: 36px; } .donut-legend button { padding: 10px 8px; } .hbar { padding: 10px 8px; } } /* Ultrawide: limita leitura confortável, terceira coluna só além de 1600 */ @media (min-width: 1600px) { .content { max-width: 1560px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }