@font-face{font-family:"Creato Display";src:url("./assets/fonts/creato-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Creato Display";src:url("./assets/fonts/creato-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Creato Display";src:url("./assets/fonts/creato-700.woff") format("woff");font-weight:600 800;font-style:normal;font-display:swap} @font-face{font-family:"Jolly Club";src:url("./assets/fonts/jolly-club.woff") format("woff");font-weight:400;font-style:normal;font-display:swap} :root { --canvas: #fbfbf8; --surface: #ffffff; --muted-surface: #f5f7f5; --text: #202124; --muted: #6b6f76; --subtle: #9e9e9e; --border: #d9e2ea; --blue: #0a4bff; --blue-soft: #eef3ff; --green: #08a84e; --green-soft: #eaf8f0; --red: #dc3d43; --red-soft: #fff0f1; --yellow: #e7a600; --yellow-soft: #fff6d9; --purple: #7559e7; --purple-soft: #f2efff; --sidebar: 264px; --radius: 14px; font-family: "Creato Display", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--canvas); font-synthesis: none; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; background: var(--canvas); } body.auth-locked { overflow: hidden; } body.auth-locked .login-screen { display: grid; } button, input, select { font: inherit; } button { cursor: pointer; } img { display: block; } [hidden] { display: none !important; } .login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(48px, 1fr) minmax(720px, 62.5vw) minmax(48px, 1fr); grid-template-rows: minmax(54px, 9.26vh) minmax(540px, 1fr) minmax(54px, 9.26vh); gap: 2px 4px; background: #dfe6ed; overflow: hidden; } .login-tile { background: #fbfbf8; border-radius: 20px; } .login-tile-top-left { grid-area: 1 / 1; } .login-tile-top-center { grid-area: 1 / 2; } .login-tile-top-right { grid-area: 1 / 3; } .login-tile-middle-left { grid-area: 2 / 1; } .login-tile-middle-right { grid-area: 2 / 3; } .login-tile-bottom-left { grid-area: 3 / 1; } .login-tile-bottom-center { grid-area: 3 / 2; } .login-tile-bottom-right { grid-area: 3 / 3; } .login-tile-top-left, .login-tile-top-right, .login-tile-bottom-left, .login-tile-bottom-right { background-color: #fbfbf8; background-image: repeating-linear-gradient(105deg, transparent 0 11px, rgba(223,230,237,.62) 11px 12px); } .login-center { grid-area: 2 / 2; min-width: 0; display: grid; grid-template-columns: 1fr .9832fr; gap: 10px; padding: 10px 0 10px 10px; border-radius: 20px; overflow: hidden; background: linear-gradient(104deg, #fbfbf8 56%, #dce6ff 100%); } .login-form-side { min-width: 0; display: grid; place-items: center; padding: clamp(18px, 2.1vw, 40px); overflow: hidden; } .login-card { width: min(381px, 66%); display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.05vw, 20px); } .login-mark { width: clamp(30px, 2.45vw, 47px); height: auto; max-height: 75px; object-fit: contain; } .login-heading { text-align: center; } .login-heading h1 { margin: 0; white-space: nowrap; color: #1f1f1f; font-size: clamp(20px, 1.667vw, 32px); line-height: 1.25; letter-spacing: -1px; font-weight: 700; } .login-heading h1 .jolly-letter { font-family: "Jolly Club", "Segoe UI", sans-serif; font-size: calc(1em + 7px); font-weight: 400; } .login-heading h1 span:last-child { color: #0048ff; } .login-heading p { margin: 0; color: #5f5f5f; font-size: clamp(10px, .833vw, 16px); line-height: 1.2; } .google-login { width: 100%; height: clamp(32px, 2.604vw, 50px); display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.04vw, 20px); border: 1px solid #dfe6ed; border-radius: 20px; background: transparent; color: #1f1f1f; font-size: clamp(10px, .833vw, 16px); } .google-login img { width: clamp(16px, 1.3vw, 25px); height: auto; } .login-divider { width: 100%; display: flex; align-items: center; gap: 10px; color: #9e9e9e; } .login-divider span { flex: 1; height: 1px; background: #9e9e9e; } .login-divider p { margin: 0; white-space: nowrap; font-size: clamp(9px, .729vw, 14px); } .login-fields { width: 100%; display: grid; gap: clamp(8px, .52vw, 10px); } .login-field { display: grid; gap: clamp(5px, .52vw, 10px); color: #1f1f1f; font-size: clamp(10px, .833vw, 16px); } .login-field input { width: 100%; height: clamp(34px, 2.604vw, 50px); border: 1px solid #dfe6ed; border-radius: 6px; background: #fbfbf8; color: #1f1f1f; padding: 0 clamp(12px, 1.04vw, 20px); outline: none; font-size: clamp(9px, .729vw, 14px); } .login-field input:focus { border-color: #0048ff; box-shadow: 0 0 0 3px rgba(0,72,255,.1); } .login-field input::placeholder { color: #9e9e9e; } .login-submit { width: 100%; height: clamp(34px, 2.604vw, 50px); border: 0; border-radius: 20px; background: #0048ff; color: white; font-size: clamp(10px, .833vw, 16px); font-weight: 500; transition: background .18s ease, color .18s ease; } .login-submit:disabled { cursor: not-allowed; background: #cbd3db; color: #9e9e9e; } .login-card small { margin-top: -10px; color: #9e9e9e; text-align: center; font-size: clamp(7px, .521vw, 10px); line-height: 1.2; white-space: nowrap; } .login-card small a { color: inherit; } .login-preview { position: relative; min-width: 0; overflow: hidden; } .login-preview img { position: absolute; top: 1%; left: 8.53%; width: 249.9%; height: auto; max-width: none; filter: drop-shadow(0 8px 23px rgba(0,0,0,.07)); } .app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); } .sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 24px 22px; border-right: 1px solid var(--border); background: var(--canvas); display: flex; flex-direction: column; gap: 18px; z-index: 20; } .brand { display: flex; align-items: center; gap: 9px; font-size: 25px; letter-spacing: -1.2px; } .brand span i { font-family: "Jolly Club", "Segoe UI", sans-serif; font-size: 31px; font-style: normal; font-weight: 400; } .brand img { object-fit: contain; } .sidebar-close { display: none; } .search { height: 42px; border: 1px solid var(--border); border-radius: 9px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--surface); } .search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); } .search input::placeholder { color: var(--subtle); } .search kbd { white-space: nowrap; color: var(--subtle); background: #e9edf0; border-radius: 7px; padding: 3px 7px; font-size: 10px; } .nav { display: grid; gap: 3px; overflow-y: auto; } .nav p { margin: 10px 8px 4px; color: var(--subtle); font-size: 12px; } .nav-item { width: 100%; min-height: 38px; border: 0; background: transparent; color: var(--text); border-radius: 9px; display: flex; align-items: center; gap: 11px; padding: 9px 10px; text-align: left; } .nav-item img { width: 18px; height: 18px; } .nav-item:hover { background: #f0f3f6; } .nav-item.active { color: var(--blue); font-weight: 600; background: linear-gradient(90deg, var(--canvas), #8dacff); } .account { margin-top: auto; min-height: 54px; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 9px; display: flex; gap: 10px; align-items: center; text-align: left; } .account > span:last-child { display: grid; gap: 2px; } .account strong { font-size: 12px; } .account small { font-size: 10px; color: var(--muted); } .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: white; font-size: 10px; font-weight: 600; flex: none; } .main { min-width: 0; } .mobile-menu { display: none; } .page-head { min-height: 150px; padding: 26px 40px 22px; background: var(--surface); display: flex; align-items: center; gap: 24px; border-bottom: 1px solid #f0f1ef; } .page-title { min-width: 0; } .breadcrumb { margin: 0 0 8px; color: var(--muted); font-size: 12px; } .page-title h1 { margin: 0; font-size: 32px; line-height: 1; letter-spacing: -1.2px; font-weight: 400; } .page-title h1::first-letter { font-family: "Jolly Club", "Segoe UI", sans-serif; font-size: 39px; } .page-title > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 14px; } .head-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; } .page-content { padding: 24px 40px 42px; display: grid; gap: 18px; max-width: 1650px; margin: 0 auto; } .btn { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); padding: 10px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; } .btn:hover { border-color: #bac7d2; transform: translateY(-1px); } .btn.primary { border-color: var(--blue); background: var(--blue); color: white; } .btn.income { border-color: var(--blue); background: var(--blue); color: white; } .btn.expense { border-color: var(--red-soft); background: var(--red-soft); color: var(--red); } .btn img { width: 16px; height: 16px; } .card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 18px; min-width: 0; } .card h2, .card h3 { margin: 0; font-weight: 500; } .card h2 { font-size: 18px; } .card h3 { font-size: 15px; } .card-sub { color: var(--muted); font-size: 12px; margin: 6px 0 0; } .section-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .section-heading h2 { font-size: 18px; font-weight: 500; margin: 0; } .section-heading .btn { margin-left: auto; } .value { font-size: clamp(24px, 3vw, 35px); letter-spacing: -1.2px; margin: 12px 0 5px; } .green { color: var(--green); } .red { color: var(--red); } .blue { color: var(--blue); } .purple { color: var(--purple); } .pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-size: 11px; color: var(--muted); background: #f3f5f4; white-space: nowrap; } .pill.active, .pill.blue { color: var(--blue); background: var(--blue-soft); } .pill.green { color: var(--green); background: var(--green-soft); } .pill.red { color: var(--red); background: var(--red-soft); } .pill.yellow { color: var(--yellow); background: var(--yellow-soft); } .pills { display: flex; gap: 7px; flex-wrap: wrap; } .summary-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 14px; } .balance-actions { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; } .metric-top { display: flex; align-items: center; gap: 11px; } .metric-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); } .metric-icon img { width: 18px; height: 18px; } .metric-number { font-size: 22px; font-weight: 600; margin-top: 3px; } .spark { height: 48px; display: flex; align-items: end; gap: 6px; margin-top: 13px; border-top: 1px solid var(--border); padding-top: 9px; } .spark span { width: 14px; border-radius: 4px 4px 2px 2px; background: var(--blue-soft); } .spark.green span { background: var(--green-soft); } .spark.red span { background: var(--red-soft); } .wallet-grid, .project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .wallet-card { min-height: 140px; } .wallet-head { display: flex; align-items: center; gap: 10px; } .wallet-head > div:nth-child(2) { flex: 1; } .wallet-head img { width: 18px; height: 18px; } .wallet-type { color: var(--muted); font-size: 11px; margin-top: 2px; } .wallet-amount { font-size: 21px; margin: 15px 0 4px; } .planning-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; } .goals { display: grid; gap: 12px; } .goal { padding: 12px; border-radius: 11px; background: var(--muted-surface); } .goal-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 13px; } .progress { height: 7px; margin: 9px 0 6px; background: #e5eaf0; border-radius: 99px; overflow: hidden; } .progress > span { display: block; height: 100%; border-radius: inherit; background: var(--green); } .progress.blue > span { background: var(--blue); } .totals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .totals-grid .card { min-height: 228px; } .overview-grid { display: grid; grid-template-columns: 2.15fr 1fr; gap: 14px; } .chart { height: 220px; display: flex; align-items: end; gap: clamp(5px, 1vw, 15px); padding: 20px 8px 0; overflow: hidden; } .month { flex: 1; min-width: 30px; height: 100%; display: grid; grid-template-rows: 1fr 18px; align-items: end; gap: 5px; text-align: center; color: var(--muted); font-size: 10px; } .bars { height: 100%; display: flex; justify-content: center; align-items: end; gap: 5px; } .bar { width: clamp(10px, 1.5vw, 24px); background: var(--green); border-radius: 6px 6px 2px 2px; } .bar.out { background: var(--blue); } .category-list { display: grid; gap: 14px; margin-top: 15px; } .category { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 9px; align-items: center; font-size: 12px; } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); } .table-wrap { overflow: auto; } table { width: 100%; border-collapse: collapse; min-width: 780px; } th, td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: 12px; } th { background: var(--muted-surface); color: var(--muted); font-weight: 500; } td:nth-last-child(1), th:nth-last-child(1) { text-align: right; } .tabs { display: flex; width: fit-content; max-width: 100%; border: 1px solid var(--border); border-radius: 11px; overflow: auto; background: white; } .tab { min-width: 145px; border: 0; border-bottom: 2px solid transparent; background: white; color: var(--muted); padding: 12px 18px; } .tab.active { color: var(--blue); background: var(--blue-soft); border-bottom-color: var(--blue); } .relationship-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .activity-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; } .activity-chart { height: 240px; display: flex; align-items: end; gap: 12px; padding-top: 28px; } .activity-chart span { flex: 1; border-radius: 8px 8px 2px 2px; background: var(--blue-soft); } .activity-chart span:last-child { background: var(--blue); } .channel-list, .next-list { display: grid; gap: 10px; margin-top: 14px; } .list-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .list-row:last-child { border-bottom: 0; } .list-row > span:nth-child(2) { flex: 1; } .project-card { padding: 14px; } .project-cover { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; object-fit: cover; margin: 12px 0; } .project-client { display: flex; align-items: center; gap: 9px; } .project-client > span:nth-child(2) { flex: 1; } .project-card h2 { font-size: 20px; margin: 10px 0; } .meta-list { display: grid; gap: 7px; color: var(--muted); font-size: 12px; margin-top: 13px; } .project-detail { display: grid; gap: 18px; } .project-banner { width: 100%; height: 230px; object-fit: cover; border-radius: 18px; } .project-columns { display: grid; grid-template-columns: 1fr 380px; gap: 16px; } .project-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .step { padding: 13px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 12px; } .step.current { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); } .placeholder { min-height: 520px; display: grid; place-items: center; text-align: center; } .placeholder .card { max-width: 520px; } .modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(16, 21, 31, .42); backdrop-filter: blur(4px); } .modal { position: relative; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--border); border-radius: 18px; background: white; padding: 24px; box-shadow: 0 28px 80px rgba(0,0,0,.18); } .modal-close { position: absolute; top: 18px; right: 18px; border: 0; color: var(--muted); background: transparent; } .modal h2 { font-size: 24px; font-weight: 500; margin: 0 70px 5px 0; } .modal > p, .modal-copy { color: var(--muted); font-size: 13px; } .modal-form { display: grid; gap: 15px; margin-top: 22px; } .field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; } .field input, .field select { width: 100%; height: 44px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--text); padding: 0 12px; outline: none; } .field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; } .segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; } .segmented button { border: 0; border-bottom: 2px solid transparent; padding: 12px; background: white; color: var(--muted); } .segmented button.active { color: var(--blue); background: var(--blue-soft); border-bottom-color: var(--blue); } .toast { position: fixed; right: 24px; bottom: 24px; z-index: 110; padding: 13px 16px; color: white; border-radius: 10px; background: #151821; box-shadow: 0 12px 40px rgba(0,0,0,.22); } @media (max-width: 1180px) { :root { --sidebar: 230px; } .summary-grid { grid-template-columns: 1.4fr 1fr 1fr; } .summary-grid > :last-child { grid-column: span 1; } .wallet-grid, .project-grid { grid-template-columns: repeat(2, 1fr); } .planning-grid, .overview-grid { grid-template-columns: 1fr; } .project-columns { grid-template-columns: 1fr; } } @media (max-width: 820px) { .login-screen { grid-template-columns: 12px 1fr 12px; grid-template-rows: 24px 1fr 24px; gap: 2px; overflow: auto; } .login-center { grid-template-columns: 1fr; padding: 10px; min-height: calc(100vh - 52px); } .login-form-side { padding: 28px 18px; } .login-card { width: min(381px, 92%); gap: 16px; } .login-mark { width: 40px; } .login-heading h1 { font-size: 28px; } .login-heading p, .google-login, .login-field { font-size: 14px; } .login-divider p { font-size: 12px; } .login-field input { height: 48px; font-size: 13px; } .login-submit, .google-login { height: 48px; } .login-card small { margin-top: -6px; font-size: 9px; white-space: normal; } .login-preview { display: none; } .app-shell { grid-template-columns: 1fr; } .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: min(300px, 88vw); transition: transform .2s ease; box-shadow: 20px 0 60px rgba(0,0,0,.12); } .sidebar.open { transform: translateX(0); } .sidebar-close { display: block; position: absolute; top: 18px; right: 18px; border: 0; background: transparent; color: var(--muted); } .mobile-menu { display: block; position: fixed; z-index: 18; right: 16px; bottom: 16px; border: 0; border-radius: 99px; background: var(--blue); color: white; padding: 13px 18px; box-shadow: 0 10px 32px rgba(10,75,255,.3); } .page-head { padding: 24px 20px; min-height: 170px; align-items: flex-start; flex-direction: column; } .head-actions { margin-left: 0; } .page-content { padding: 20px; } .summary-grid, .relationship-stats { grid-template-columns: 1fr 1fr; } .summary-grid > :first-child { grid-column: 1 / -1; } .activity-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .summary-grid, .wallet-grid, .project-grid, .relationship-stats, .totals-grid { grid-template-columns: 1fr; } .summary-grid > :first-child { grid-column: auto; } .tabs { width: 100%; } .tab { min-width: 130px; } .project-steps { grid-template-columns: 1fr; } .chart { gap: 4px; } .month { min-width: 21px; } } /* Nexus OS — aplicação reconstruída a partir do novo modelo do Figma */ @media (min-width: 821px) { :root { --sidebar: 312px; } } .app-shell { background: #fbfbf8; } .sidebar { padding: 34px 40px 24px; gap: 14px; border-color: #dfe6ed; transition: width .2s ease, padding .2s ease; } .sidebar .brand { font-size: 30px; } .sidebar .brand img { width: 25px; height: 42px; } .sidebar-tools { height: 28px; display: flex; align-items: center; gap: 10px; } .sidebar-tools span { flex: 1; } .sidebar-tools button { position: relative; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; border-radius: 6px; } .sidebar-tools button:hover { background: #eef3ff; } .sidebar-tools img { width: 18px; height: 18px; } .sidebar-tools b { position: absolute; top: -3px; right: -3px; min-width: 13px; height: 13px; display: grid; place-items: center; border-radius: 20px; color: white; background: #0a4bff; font-size: 8px; } .sidebar .search { height: 44px; border-radius: 8px; } .nav { gap: 2px; } .nav p { margin: 9px 0 3px; font-size: 12px; } .nav-item { min-height: 38px; border-radius: 8px; padding: 8px 10px; font-size: 14px; } .nav-item.active { color: #0a4bff; font-weight: 400; background: linear-gradient(90deg,#eef3ff,#74a0ff); } .project-subnav { display: grid; gap: 2px; padding: 2px 0 3px 26px; } .project-subnav button { min-height: 31px; border: 0; background: transparent; display: grid; grid-template-columns: 8px 1fr auto; gap: 7px; align-items: center; padding: 4px 7px; color: #51555b; font-size: 11px; text-align: left; border-radius: 7px; } .project-subnav button:hover { background: #f1f4f8; } .project-subnav small { color: #9e9e9e; } .status-dot { width: 7px; height: 7px; border-radius: 50%; } .green-dot { background:#08a84e; }.yellow-dot{background:#e7a600}.red-dot{background:#dc3d43} .account { min-height: 60px; border-radius: 10px; } .account > span:nth-of-type(2) { display:flex !important; flex-direction:column; gap:2px; min-width:0; } .account > span:nth-of-type(2) strong { display:block; white-space:nowrap; } .account > span:nth-of-type(2) small { display:block; color:#6b6f76; } .account img { width: 16px; margin-left: auto; } .account .account-copy { display:grid !important; grid-template-columns:1fr; align-content:center; gap:3px; flex:1; min-width:0; line-height:1.1; } .account .account-copy strong,.account .account-copy small { display:block !important; width:100%; margin:0; } .sidebar.collapsed { width: 84px; padding-left: 22px; padding-right: 22px; } .sidebar.collapsed .brand span,.sidebar.collapsed .search,.sidebar.collapsed .nav p,.sidebar.collapsed .nav-item:not(.active),.sidebar.collapsed .nav-item{font-size:0}.sidebar.collapsed .nav-item img{width:20px;height:20px}.sidebar.collapsed .sidebar-tools span,.sidebar.collapsed .sidebar-tools button:not(:first-child),.sidebar.collapsed .account>span:last-of-type,.sidebar.collapsed .account>img,.sidebar.collapsed .project-subnav{display:none}.sidebar.collapsed+.main{margin-left:calc(84px - var(--sidebar))} .page-head { min-height: 172px; padding: 36px 40px 26px; align-items: center; background: white; border-bottom: 1px solid #eef1f3; } .page-title h1 { font-size: 32px; font-weight: 400; letter-spacing: -1px; } .page-title h1::first-letter { font-family: inherit; font-size: inherit; } .title-initial { font-family: "Jolly Club","Segoe UI",sans-serif; font-size: 39px; font-weight: 400; } .page-title>p:last-child { font-size: 14px; } .breadcrumb span { color: #b8bcc1; padding: 0 5px; } .page-content { max-width: none; padding: 24px 40px 44px; gap: 20px; } .card { border-color: #dfe6ed; border-radius: 12px; box-shadow: none; } .card h2 { font-size: 17px; font-weight: 500; } .btn { min-height: 38px; border-color: #dfe6ed; border-radius: 8px; background: white; font-size: 12px; } .btn img { width: 16px; height: 16px; } .btn.primary { background:#0a4bff;border-color:#0a4bff; } .btn.expense { color:#dc3d43;background:#fff0f1;border-color:#fff0f1; } .icon-btn { min-width: 38px; padding: 8px; } .wide { width:100%; } .soft-button { color:#0a4bff;background:#eef3ff;border-color:#eef3ff; } .pill { border-radius: 999px; padding: 4px 8px; font-size: 10px; border:0; } .avatar.soft { background:#eef3ff;color:#0a4bff; } .section-heading { margin: 0; } .section-heading h2 { font-size: 18px; } /* Página inicial */ .welcome { height: 250px; display:grid; place-content:center; text-align:center; } .welcome h1 { margin:0;font-size:40px;font-weight:400; }.welcome p{font-size:14px}.home-wrap{width:min(1112px,calc(100% - 80px));margin:0 auto 60px;display:grid;gap:20px}.rhythm-card{display:grid;grid-template-columns:1.15fr repeat(3,1fr);gap:42px;align-items:center;padding:28px 36px}.rhythm-card>div:first-child{display:grid;gap:8px}.rhythm-card strong{color:#0a4bff;font-size:22px}.rhythm-card small{font-size:10px;color:#7d8288}.rhythm-metric{display:grid;grid-template-columns:auto 1fr;gap:5px 12px}.rhythm-metric small{grid-column:1/-1}.rhythm-metric b,.rhythm-days>b{font-size:24px;color:#0a4bff}.rhythm-metric span{align-self:center;color:#9e9e9e;font-size:10px}.rhythm-metric i{grid-column:1/-1;height:7px;background:#dfe6ed;border-radius:8px;overflow:hidden}.rhythm-metric em{display:block;height:100%;background:#0a4bff}.rhythm-card>.rhythm-metric,.rhythm-card>.rhythm-days{align-self:start}.rhythm-card>div:first-child{align-self:center}.rhythm-days{display:grid;gap:5px;align-content:start}.rhythm-days div{display:flex;gap:10px;margin-top:6px}.rhythm-days span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#edf0f2;color:#9e9e9e;font-size:9px}.rhythm-days span.done{color:white;background:#0a4bff;font-size:13px;font-weight:700}.priority-card{min-height:160px;padding:30px;display:flex;align-items:center;gap:20px;color:white;background:#0a4bff;border-radius:10px}.priority-card>div{flex:1}.priority-card small{font-size:10px;opacity:.7}.priority-card h2{margin:16px 0 6px;font-size:22px}.priority-card p{font-size:11px;opacity:.75}.priority-card .btn{min-width:150px}.home-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}.agenda-list{min-height:390px}.agenda-row{display:grid;grid-template-columns:70px 1fr;gap:15px;padding:26px 0;border-bottom:1px solid #e8edf1}.agenda-row>b{font-size:11px}.agenda-row span,.contact-row span:last-child{display:grid;gap:4px}.agenda-row small,.contact-row small{color:#9e9e9e;font-size:10px}.contact-row{display:flex;gap:12px;align-items:center;padding:11px;border:1px solid #e8edf1;border-radius:9px;margin-top:12px}.contact-photo{width:42px;height:42px;border-radius:50%;background:#aaa;flex:none} /* Pomodoro */ .pomodoro-page{padding-top:68px}.seg-tabs{display:flex;width:320px;border:1px solid #dfe6ed;border-radius:8px;overflow:hidden}.seg-tabs button{width:33.333%;height:60px;border:0;border-right:1px solid #e9edf1;background:white}.seg-tabs button.active{color:#0a4bff;border-bottom:3px solid #0a4bff}.focus-layout{display:grid;grid-template-columns:1fr 360px;gap:20px}.focus-stage{min-height:560px;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:54px 70px}.focus-info{position:absolute;top:58px;left:26%;display:grid;text-align:center;gap:10px}.focus-task{max-width:380px;padding:26px;color:white;background:#191919;border-radius:12px}.focus-task h2{font-size:20px;margin:18px 0 6px}.focus-task p{font-size:12px;color:#c7c7c7}.focus-task hr{border:0;border-top:1px solid #3a3a3a;margin:20px 0}.focus-task>div{display:flex;gap:12px}.focus-task .btn{flex:1}.timer-ring{width:300px;height:300px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#0a4bff 0 73%,#e6e4df 73%);position:relative}.timer-ring:after{content:"";position:absolute;inset:18px;border-radius:50%;background:#fff}.timer-ring>div{z-index:1;display:grid;text-align:center}.timer-ring b{font-size:60px}.timer-ring span{font-size:11px;color:#777}.focus-stats{position:absolute;left:25%;bottom:50px;width:64%;height:72px;border:1px solid #dfe6ed;border-radius:10px;display:flex;align-items:center;justify-content:space-around}.focus-stats span{display:grid;text-align:center;font-size:10px;color:#8a8f94}.focus-stats b{font-size:16px;color:#202124}.queue{min-height:560px;display:flex;flex-direction:column}.queue>div{display:grid;grid-template-columns:24px 1fr auto;gap:12px;padding:18px 0;border-bottom:1px solid #e4e8eb;font-size:12px}.queue>div small{color:#9e9e9e}.queue .btn{margin-top:auto} /* Agenda */ .agenda-page{padding-top:68px}.agenda-toolbar{display:grid;grid-template-columns:auto auto auto auto 1fr auto auto;gap:12px;align-items:center}.agenda-toolbar h2{font-size:28px;font-weight:400;margin:0}.nav-arrow{border:0;background:transparent;font-size:27px}.calendar-layout{display:grid;grid-template-columns:280px 1fr;gap:20px}.calendar-layout>aside{display:grid;align-content:start;gap:12px;border-right:1px solid #dfe6ed;padding-right:20px}.mini-calendar{padding:16px}.mini-calendar div{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:16px}.mini-calendar span{height:22px;display:grid;place-items:center;font-size:9px}.mini-calendar span.active{border-radius:50%;color:#0a4bff;background:#eef3ff}.calendar-layout aside h3{display:flex;margin:4px 0;font-size:13px}.calendar-layout aside h3 button{margin-left:auto;border:0;background:none}.calendar-layout aside label{font-size:12px}.week-grid{border:1px solid #dfe6ed;border-radius:10px;overflow:hidden}.week-head,.week-row{display:grid;grid-template-columns:62px repeat(7,1fr)}.week-head>*{padding:14px 8px;text-align:center;border-right:1px solid #dfe6ed;font-size:11px}.week-row{height:70px}.week-row>b{padding:12px;font-size:11px;border-right:1px solid #dfe6ed}.week-row>span{position:relative;border-right:1px solid #dfe6ed;border-top:1px solid #dfe6ed}.event{position:absolute;inset:0;padding:10px;color:white;font-size:9px;font-style:normal}.event.coral{background:#ff7f83}.event.purple{background:#8c76ef} /* Relações */ .relationships-page{padding-top:0}.module-tabs{display:flex;width:800px;max-width:100%;height:58px;border:1px solid #dfe6ed;border-radius:10px;overflow:hidden;background:white}.module-tabs button{flex:1;display:flex;gap:10px;align-items:center;justify-content:center;border:0;border-right:1px solid #dfe6ed;background:white;color:#666;font-size:13px}.module-tabs button.active{color:#0a4bff;background:#eef3ff;border-bottom:2px solid #0a4bff}.module-tabs img{width:17px;height:17px}.module-tabs.small{height:45px;width:auto}.module-tabs.small button{min-width:150px;padding:0 20px}.rel-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.rel-kpis article{display:flex;gap:14px;align-items:center}.rel-kpis article>div{display:grid}.rel-kpis b{font-size:24px}.rel-kpis em{font-size:10px;font-style:normal}.rel-overview{display:grid;grid-template-columns:2.2fr 1fr;gap:20px}.rel-overview>article{min-height:520px}.rel-overview>aside{display:grid;gap:20px}.activity-bars{height:360px;display:flex;align-items:end;gap:8%;padding:80px 20px 0}.activity-bars>span{position:relative;flex:1;border-radius:8px 8px 3px 3px;background:#eef3ff}.activity-bars>span.active{background:#0a4bff}.activity-bars small{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);font-size:9px}.channel-row{display:flex;gap:12px;align-items:center;margin-top:16px}.channel-row>span{width:32px;height:32px;display:grid;place-items:center;color:#0a4bff;background:#eef3ff;border-radius:8px}.channel-row div{display:grid}.channel-row small{color:#08a84e}.next-action{display:grid;grid-template-columns:45px 1fr;padding:11px 0}.next-action b{color:#0a4bff;font-size:10px}.board-head{display:flex;gap:20px;align-items:center;margin-top:28px}.board-head>div:first-child{flex:1}.board-head h2{font-size:18px;margin:0}.board-head p{margin:5px 0 0;color:#6b6f76;font-size:11px}.board-actions{display:flex;gap:10px}.view-tabs{display:flex;border:1px solid #dfe6ed;border-radius:9px;overflow:hidden}.view-tabs button{min-width:140px;height:44px;display:flex;gap:8px;align-items:center;justify-content:center;border:0;border-right:1px solid #dfe6ed;background:white;color:#666}.view-tabs button.active{color:#0a4bff;background:#eef3ff;border-bottom:2px solid #0a4bff}.view-tabs.compact{width:550px;margin:14px 0}.view-tabs.compact button{min-width:auto;flex:1}.kanban-board{display:grid;grid-template-columns:repeat(4,minmax(250px,1fr));gap:14px;overflow:auto}.kanban-board.pipeline-board{grid-template-columns:repeat(5,minmax(245px,1fr))}.kanban-column{min-height:620px;padding:14px;border:1px solid #dfe6ed;border-radius:12px;background:#fbfbf8}.kanban-column>header{display:flex;align-items:center;min-height:30px}.kanban-column h3{margin:0;display:flex;gap:8px;font-size:13px}.kanban-column h3 small{color:#0a4bff}.kanban-column>header .pill{margin-left:auto}.add-contact{width:100%;height:40px;margin:5px 0 14px;display:flex;align-items:center;gap:8px;padding:0 13px;border:1px solid #dfe6ed;border-radius:8px;color:#0a4bff;background:#eef3ff}.add-contact img{width:16px}.crm-card,.deal-card{padding:16px;margin-bottom:14px;border:1px solid #dfe6ed;border-radius:10px;background:white}.crm-title{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.crm-title span{display:grid}.crm-title small{color:#777;font-size:9px}.crm-title button,.deal-card button,.project-card header button,.wallet-card header button{border:0;background:transparent}.crm-progress{display:flex;margin:18px 0 8px;font-size:10px}.crm-progress b{margin-left:auto;color:#0a4bff}.crm-card>i{display:block;height:6px;background:#dfe6ed;border-radius:6px;overflow:hidden}.crm-card>i em{display:block;height:100%;background:#08a84e}.crm-card ul{list-style:none;padding:0;margin:12px 0;font-size:10px}.crm-card li:before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;border:1px solid #dfe6ed;border-radius:50%;vertical-align:-2px}.crm-card li.done:before{border-color:#08a84e;background:#08a84e}.deal-card>div{display:flex}.deal-card>div button{margin-left:auto}.deal-card>strong{display:block;margin:10px 0;color:#0a4bff}.deal-card>small{display:block;margin-bottom:9px;color:#777;font-size:10px}.inbox-shell{display:grid;grid-template-columns:475px 1fr;min-height:760px;border:1px solid #dfe6ed;border-radius:14px;overflow:hidden;background:white}.conversation-list{border-right:1px solid #dfe6ed;padding:18px}.conversation-list header,.chat-panel header{display:flex;align-items:center;gap:10px}.conversation-list header>div{flex:1;display:grid}.conversation-list header small{color:#777}.inbox-search{height:40px;margin:14px 0;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #dfe6ed;border-radius:8px}.inbox-search input{width:100%;border:0;outline:0}.contact-tabs{display:flex;border:1px solid #dfe6ed;border-radius:8px;overflow:hidden}.contact-tabs button{flex:1;height:54px;border:0;border-right:1px solid #dfe6ed;background:white;color:#666}.contact-tabs button.active{color:#0a4bff;background:#eef3ff;border-bottom:2px solid #0a4bff}.channel-filters{display:flex;gap:8px;margin:12px 0}.channel-filters button{border:0;background:white;color:#777;font-size:9px}.channel-filters button.active{color:#0a4bff;background:#eef3ff;padding:7px 12px;border-radius:8px}.conversation-item{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:14px;border:0;background:white;text-align:left;border-radius:8px}.conversation-item.active{background:#eef3ff}.conversation-item span:nth-child(2){display:grid}.conversation-item small{font-size:9px;color:#777}.conversation-item time{align-self:start;font-size:9px;color:#777}.conversation-item em{position:absolute;right:12px;bottom:10px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;color:white;background:#0a4bff;font-size:9px}.chat-panel{display:grid;grid-template-rows:68px 1fr 62px}.chat-panel>header{padding:12px 18px;border-bottom:1px solid #dfe6ed}.chat-panel>header>div{display:grid}.chat-panel>header>div small{color:#08a84e}.chat-panel>header>span{flex:1}.messages{padding:28px;position:relative}.messages>time,.messages>small{display:block;text-align:center;color:#777;font-size:9px}.messages p{max-width:48%;padding:14px;border-radius:10px;font-size:12px}.messages .sent{margin-left:auto;color:white;background:#0a4bff}.messages .received{background:white;border:1px solid #dfe6ed}.message-composer{display:flex;gap:10px;padding:10px 16px;border-top:1px solid #dfe6ed}.message-composer input{flex:1;border:1px solid #dfe6ed;border-radius:8px;padding:0 12px} /* Projetos */ .project-toolbar{display:flex;gap:20px}.project-toolbar>div:last-child{margin-left:auto;display:flex;gap:10px}.project-kpis,.strategy-kpis,.integration-kpis,.content-kpis,.work-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.project-kpis article,.strategy-kpis article,.integration-kpis article,.content-kpis article,.work-kpis article{display:grid;gap:5px;min-height:86px}.project-kpis b,.strategy-kpis b,.integration-kpis b,.content-kpis b,.work-kpis b{font-size:24px;font-weight:500}.project-kpis small,.strategy-kpis small,.integration-kpis small,.content-kpis small,.work-kpis small{color:#777}.project-grid{grid-template-columns:repeat(3,1fr);gap:18px}.project-card{cursor:pointer}.project-card header{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center}.project-card header span:nth-child(2){display:grid}.project-card header small{font-size:9px;color:#777}.project-card>img{width:100%;height:230px;object-fit:cover;border-radius:10px;margin:16px 0}.project-card h2{font-size:22px}.project-card ul{list-style:none;padding:0;display:grid;gap:8px;color:#666;font-size:11px}.project-detail-page{padding:28px 40px}.project-banner{position:relative;height:220px}.project-banner img{width:100%;height:100%;object-fit:cover;border-radius:14px}.project-banner button{position:absolute;right:22px;top:18px}.project-identity{display:flex;gap:14px;align-items:center;padding:20px 0}.project-identity>div{display:grid}.project-identity h1{margin:4px 0;font-size:28px}.project-identity a{color:#0a4bff;font-size:11px}.project-identity>span{flex:1}.project-detail-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;margin-top:20px}.project-detail-grid main,.project-detail-grid aside{display:grid;gap:18px;align-content:start}.project-progress>i,.saving-row i{display:block;height:7px;border-radius:8px;background:#dfe6ed;overflow:hidden}.project-progress>i em,.saving-row i em{display:block;height:100%;background:#08a84e}.project-progress>div{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}.project-progress>div span{min-height:64px;padding:10px;border:1px solid #dfe6ed;border-radius:9px;display:grid;align-content:center;gap:6px;color:#777;font-size:10px}.project-progress>div span b{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#f4f5f6}.project-progress>div span.done b{color:white;background:#08a84e}.project-progress>div span.active{color:#0a4bff;border-color:#0a4bff;background:#eef3ff}.project-progress>div span.active b{color:white;background:#0a4bff}.two-col{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}.task-line,.access-line,.stage-line{display:flex;gap:10px;align-items:center;padding:10px 0}.task-line>b,.access-line>b,.stage-line>b{flex:1;display:grid}.task-line small,.access-line small,.stage-line small{color:#9e9e9e;font-size:9px}.task-line>span:first-child,.stage-line>span:first-child{width:32px;height:32px;display:grid;place-items:center;color:#0a4bff;background:#eef3ff;border-radius:8px}.chat-note{padding:10px;background:#f4f5f6;border-radius:8px;font-size:10px}.project-detail-grid aside input{width:100%;height:38px;border:1px solid #dfe6ed;border-radius:7px;padding:0 10px} /* Trabalho e Conteúdo */ .work-board{grid-template-columns:repeat(4,1fr)}.work-card{min-height:110px;padding:18px;margin-bottom:14px;border:1px solid #dfe6ed;border-radius:10px;background:white;display:grid;align-content:start;gap:16px}.work-card small{font-size:10px}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}.editorial-week{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px}.editorial-week>div{min-height:510px;padding:12px;border:1px solid #dfe6ed;border-radius:9px;display:grid;align-content:start;gap:12px}.editorial-week span{padding:7px;border-radius:7px;background:#fff6d9;font-size:10px}.editorial-week span.blue{color:#0a4bff;background:#eef3ff}.content-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:16px 0}.content-row>span{width:34px;height:34px;border-radius:50%;background:#e5eaee}.content-row b{display:grid}.content-row small{font-size:9px;color:#777}.content-row time{color:#0a4bff;font-size:9px} /* Financeiro */ .finance-summary{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:14px}.balance{display:flex;gap:14px}.balance>div:first-child{flex:1}.balance h2{display:flex;align-items:center;gap:8px}.balance strong{display:block;font-size:36px;font-weight:400;margin:12px 0}.balance>div:last-child{display:flex;align-items:end;gap:8px}.finance-metric{display:grid;align-content:start}.finance-metric>b{font-size:22px}.finance-metric>i{height:48px;display:flex;gap:6px;align-items:end;border-top:1px solid #e6eaf0;padding-top:8px;margin-top:8px}.finance-metric em{flex:1;background:#eef3ff;border-radius:3px}.finance-metric:nth-child(2) em{background:#eaf8f0}.finance-metric:nth-child(3) em{background:#fff0f1}.wallet-grid{grid-template-columns:repeat(3,1fr)}.wallet-card header{display:grid;grid-template-columns:auto 1fr auto;gap:9px}.wallet-card header span{display:grid}.wallet-card header small{font-size:9px;color:#777}.wallet-card>strong{display:block;margin-top:18px;font-size:22px}.planning-grid{grid-template-columns:1.65fr .7fr .7fr}.saving-row{display:grid;grid-template-columns:1fr auto;gap:7px;padding:12px;border-radius:8px;background:#f7f8f7;margin-top:10px}.saving-row i,.saving-row small{grid-column:1/-1}.saving-row small{color:#777}.total-card{display:grid;align-content:start;gap:14px}.total-card>b{font-size:24px;font-weight:400}.finance-chart{height:250px;display:flex;align-items:end;gap:14px}.finance-chart>span{height:100%;flex:1;display:flex;gap:4px;align-items:end;position:relative;padding-bottom:22px}.finance-chart i,.finance-chart em{flex:1;background:#08a84e;border-radius:5px 5px 0 0}.finance-chart em{background:#0a4bff}.finance-chart small{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}.split-totals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.split-totals span{padding:15px;border-radius:8px;background:#eaf8f0;display:grid}.split-totals span:last-child{background:#fff0f1}.category-line{display:grid;grid-template-columns:8px 1fr auto;gap:8px;padding:9px 0}.category-line i{width:7px;height:7px;border-radius:50%;background:#0a4bff}.transactions{min-height:310px} /* Estratégia, integrações e configurações */ .strategy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.strategy-grid article>strong{display:block;font-size:22px;margin:14px 0}.objective-row{display:flex;gap:10px;align-items:center;padding:12px 0}.objective-row>span{width:34px;height:34px;border-radius:50%;background:#e5eaee}.objective-row>b{display:grid;flex:1}.objective-row small{color:#9e9e9e;font-size:9px}.priorities>div{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}.priorities>div span{display:grid;min-height:100px;padding:20px;border:1px solid #dfe6ed;border-radius:9px}.priorities small{color:#9e9e9e;margin-top:12px}.integration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.integration-grid article{min-height:220px}.integration-grid header{display:flex;gap:12px;align-items:center}.integration-grid header>span{width:40px;height:40px;display:grid;place-items:center;color:#0a4bff;background:#eef3ff;border-radius:9px}.integration-grid h2{margin:0}.integration-grid p{margin:5px 0;color:#777}.integration-grid>.card>.pill{margin:18px 0}.integration-grid>.card>small{display:block;color:#9e9e9e}.settings-page{grid-template-columns:300px 1fr;align-items:start}.settings-page>aside{display:grid;gap:5px}.settings-page>aside h2{margin:0 0 8px}.settings-page>aside button{height:42px;border:0;background:white;text-align:left;padding:0 12px;border-radius:8px}.settings-page>aside button.active{color:#0a4bff;background:#eef3ff}.settings-page main{display:grid;gap:16px}.profile-card>div:last-child{display:flex;align-items:center;gap:15px}.profile-card>div:last-child>span{display:grid}.preference-card>div{display:flex;padding:16px 0}.preference-card>div span{margin-left:auto;color:#777}.danger-card h2{color:#dc3d43}.danger-card .btn{margin-right:8px} @media(max-width:1250px){:root{--sidebar:250px}.sidebar{padding-left:24px;padding-right:24px}.home-wrap{width:calc(100% - 40px)}.rhythm-card{gap:18px}.focus-layout{grid-template-columns:1fr}.focus-stage{min-height:600px}.queue{min-height:300px}.rel-overview,.content-grid,.overview-grid{grid-template-columns:1fr}.project-grid{grid-template-columns:repeat(2,1fr)}.finance-summary{grid-template-columns:repeat(3,1fr)}.finance-summary>.balance{grid-column:1/-1}.planning-grid{grid-template-columns:1fr 1fr}.planning-grid>:first-child{grid-column:1/-1}.inbox-shell{grid-template-columns:380px 1fr}.kanban-board{grid-template-columns:repeat(4,270px)}.project-detail-grid{grid-template-columns:1fr}.strategy-grid,.integration-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:820px){.sidebar{padding:28px 22px}.page-head{padding:24px 20px}.page-content,.project-detail-page{padding:20px}.home-wrap{width:calc(100% - 24px)}.welcome{height:190px}.welcome h1{font-size:30px}.rhythm-card{grid-template-columns:1fr 1fr}.priority-card{align-items:flex-start;flex-direction:column}.home-grid,.focus-stage,.calendar-layout,.rel-overview,.content-grid,.inbox-shell,.project-detail-grid,.two-col,.settings-page{grid-template-columns:1fr}.focus-stage{padding:30px;display:flex;flex-direction:column;gap:40px}.focus-info,.focus-stats{position:static;width:100%}.calendar-layout>aside{border-right:0}.week-grid{overflow:auto}.week-head,.week-row{min-width:850px}.rel-kpis,.project-kpis,.strategy-kpis,.integration-kpis,.content-kpis,.work-kpis,.finance-summary,.wallet-grid,.strategy-grid,.integration-grid,.project-grid{grid-template-columns:1fr 1fr}.module-tabs{width:100%;overflow:auto}.module-tabs button{min-width:140px}.board-head{align-items:stretch;flex-direction:column}.board-actions{overflow:auto}.inbox-shell{display:block}.conversation-list{border-right:0}.chat-panel{min-height:620px}.project-detail-page .module-tabs{margin-bottom:18px}.planning-grid{grid-template-columns:1fr}.planning-grid>*{grid-column:auto!important}.work-board{grid-template-columns:repeat(4,260px)}.editorial-week{overflow:auto}.editorial-week>div{min-width:180px}.project-progress>div{grid-template-columns:1fr}.finance-chart{gap:6px}} @media(max-width:560px){.rel-kpis,.project-kpis,.strategy-kpis,.integration-kpis,.content-kpis,.work-kpis,.finance-summary,.wallet-grid,.strategy-grid,.integration-grid,.project-grid{grid-template-columns:1fr}.rhythm-card{grid-template-columns:1fr}.page-title h1{font-size:27px}.title-initial{font-size:34px}.project-toolbar{display:grid}.project-toolbar>div:last-child{margin:0}.module-tabs.small button{min-width:125px}.messages p{max-width:86%}.message-composer .icon-btn:nth-last-of-type(1){display:none}.project-card>img{height:180px}.balance{display:grid}.balance>div:last-child{align-items:start}.overview-grid{grid-template-columns:1fr}.priorities>div{grid-template-columns:1fr}} /* ===== Nexus OS · app real (2026-10-14) ===== */ [hidden]{display:none!important} .muted{color:var(--muted)} .pad{padding:16px} .spacer{flex:1} /* Login, cadastro e recuperação */ .login-notice{margin:-6px 0 4px;padding:10px 12px;border-radius:9px;font-size:12px;line-height:1.45;background:var(--blue-soft);color:#1f3c99} .login-notice.error{background:var(--red-soft);color:#a3252b} .login-notice.success{background:var(--green-soft);color:#05753a} .login-terms{display:flex;gap:8px;align-items:flex-start;font-size:11px;color:var(--muted);line-height:1.4;cursor:pointer} .login-terms input{margin-top:2px;accent-color:var(--blue)} .login-terms a{color:var(--blue)} .login-links{display:flex;justify-content:space-between;gap:12px;margin-top:-6px} .link-button{border:0;background:none;padding:4px 0;color:var(--blue);font-size:12px;cursor:pointer} .link-button:hover{text-decoration:underline} /* Estados */ .page-loading{padding:80px 20px;text-align:center;color:var(--muted);font-size:13px} .empty-state{display:grid;justify-items:center;gap:6px;padding:36px 20px;text-align:center;border:1px dashed var(--border);border-radius:12px;background:var(--muted-surface)} .empty-state strong{font-size:15px;font-weight:600} .empty-state p{margin:0 0 8px;color:var(--muted);font-size:12px;max-width:420px} .page-content>.empty-state{margin-top:24px;padding:60px 20px} .notice-card{display:flex;gap:18px;align-items:center;padding:18px 22px;border:1px solid #f0d58a;border-radius:10px;background:var(--yellow-soft)} .notice-card>div{flex:1} .notice-card strong{font-size:14px} .notice-card p{margin:4px 0 0;font-size:12px;color:#6b5a1f} .toast.error{background:#a3252b} /* Formulários */ .field textarea{width:100%;border:1px solid var(--border);border-radius:10px;background:white;color:var(--text);padding:10px 12px;font:inherit;font-size:13px;resize:vertical;outline:none} .field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .form-error{margin:0;padding:10px 12px;border-radius:9px;background:var(--red-soft);color:#a3252b;font-size:12px} .modal{max-height:calc(100vh - 48px);overflow:auto} .modal-actions{align-items:center} /* Itens clicáveis que antes eram estáticos */ button.agenda-row,button.contact-row,button.crm-card,button.work-card,button.deal-card,button.next-action,button.queue-item{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer} button.agenda-row{border:0;border-bottom:1px solid #e8edf1;background:none} button.agenda-row span{display:grid;gap:4px} button.agenda-row small{color:#9e9e9e;font-size:10px} button.contact-row{background:white} button.crm-card:hover,button.work-card:hover,button.deal-card:hover,button.contact-row:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(10,75,255,.08)} .crm-title{display:flex;gap:10px;align-items:center;margin-bottom:10px} .crm-title span{display:grid;gap:2px} .crm-title small{color:#777;font-size:10px} .crm-last{margin:0 0 10px;font-size:11px;color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .crm-card .tags,.deal-card .pill{margin-top:4px} .work-card .muted{font-size:11px} button.next-action{border:0;background:none} button.next-action span{font-size:12px} .queue-item{display:grid;grid-template-columns:24px 1fr auto;gap:12px;padding:16px 8px;border:0;border-bottom:1px solid #e4e8eb;background:none;font-size:12px;border-radius:6px} .queue-item small{color:#9e9e9e} .queue-item.active{background:var(--blue-soft);color:var(--blue)} .timer-ring{background:conic-gradient(#0a4bff 0 var(--progress,0%),#e6e4df var(--progress,0%))} .focus-task>div{flex-wrap:wrap} /* Agenda */ .mini-calendar div{gap:4px} .mini-calendar button{height:26px;border:0;border-radius:6px;background:none;font-size:10px;cursor:pointer;color:var(--text)} .mini-calendar button.muted{color:#c3c7cc} .mini-calendar button.in-week{background:var(--muted-surface)} .mini-calendar button.active{border-radius:50%;color:#0a4bff;background:#eef3ff;font-weight:600} .side-note{padding:16px;display:grid;gap:6px} .side-note p{margin:0;font-size:12px} .week-head{position:sticky;top:0;z-index:3;background:white} .week-head b.today{color:var(--blue)} .week-row>span{cursor:pointer} .week-row>span:hover{background:#fafcff} .event{z-index:2;overflow:hidden;border-radius:6px;cursor:pointer;line-height:1.3} .event.blue{background:#4c7dff}.event.green{background:#2fb36b}.event.yellow{background:#e7a600} /* Conversas */ .messages{overflow:auto;max-height:640px} .messages p small{display:block;margin-top:6px;font-size:9px;opacity:.7} .message-composer select{border:1px solid #dfe6ed;border-radius:8px;padding:0 8px;background:white;font:inherit;font-size:12px} .contact-tabs b{margin-left:4px;font-size:10px;color:var(--muted)} /* Configurações */ .settings-real{display:grid;gap:20px;max-width:880px} .settings-real .card{padding:24px} .profile-id{display:flex;gap:14px;align-items:center} .profile-id span{display:grid;gap:3px;flex:1} .profile-id small{color:var(--muted)} .danger-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} @media(max-width:820px){ .field-row{grid-template-columns:1fr} .notice-card{flex-direction:column;align-items:flex-start} .login-links{flex-direction:column;align-items:center;gap:2px} } #toast-stack{position:fixed;right:24px;bottom:24px;z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none} #toast-stack .toast{position:static;max-width:min(420px,calc(100vw - 48px))} .chat-panel header .avatar,.conversation-item .avatar,.crm-title .avatar,.profile-id .avatar,.contact-row .avatar{flex:none;width:36px;height:36px;padding:0;display:grid;place-items:center} .cap{text-transform:capitalize} @media(max-width:820px){#toast-stack{left:16px;right:16px;bottom:16px;align-items:stretch}} /* ===== Nexus OS · fidelidade ao Figma (2026-10-14, etapa 1) ===== */ :root{--cal-blue:#4c7dff;--cal-green:#2fb36b;--cal-purple:#8c76ef;--cal-coral:#ff7f83;--cal-yellow:#e7a600} .red{color:var(--red)} span.yellow,b.yellow,small.yellow,strong.yellow{background:none} .blue{color:var(--blue)} .cap-first::first-letter{text-transform:uppercase} .card-empty{margin:14px 0 0;color:var(--muted);font-size:12px} .card-empty.center{text-align:center;margin-top:24px} .small{font-size:11px} .breadcrumb img{width:13px;height:13px;vertical-align:-2px} /* Botões quadrados (engrenagem, buscar, •••) */ .square-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:white;color:var(--text);cursor:pointer;font-size:14px;flex:none} .square-btn img{width:18px;height:18px} .square-btn.primary{background:var(--blue);border-color:var(--blue);color:white} .square-btn:disabled{opacity:.45;cursor:not-allowed} /* Popovers */ .popover{position:fixed;z-index:130;background:white;border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 50px rgba(16,21,31,.16);padding:8px;min-width:220px} .create-pop,.account-pop{display:grid} .create-pop button,.account-pop>button{display:flex;gap:10px;align-items:center;height:40px;padding:0 12px;border:0;background:none;border-radius:8px;font-size:13px;text-align:left;cursor:pointer;color:var(--text)} .create-pop button:hover,.account-pop>button:hover{background:var(--muted-surface)} .create-pop img,.account-pop img{width:16px;height:16px} .account-pop{width:264px;padding:12px} .acc-head{display:flex;gap:12px;align-items:center;padding:6px 6px 14px;border-bottom:1px solid var(--border);margin-bottom:6px} .acc-head span:last-child{display:grid} .acc-head small{color:var(--muted);font-size:11px} .acc-theme{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 12px;font-size:13px;border-bottom:1px solid var(--border);margin-bottom:6px} .acc-logout{color:var(--muted)!important} .switch{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--muted)} .switch input{position:absolute;opacity:0;width:1px;height:1px} .switch i{width:34px;height:20px;border-radius:20px;background:#dfe3e8;position:relative;transition:.2s} .switch i:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s} .switch input:checked+i{background:var(--blue)} .switch input:checked+i:after{left:16px} .switch input:focus-visible+i{outline:2px solid var(--blue);outline-offset:2px} /* Notificações */ .notif-pop{width:min(520px,calc(100vw - 24px));padding:0;overflow:hidden} .notif-pop header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 10px} .notif-pop h3{margin:0;font-size:18px;font-weight:500;display:flex;gap:8px;align-items:center} .notif-tabs{display:flex;gap:6px;padding:4px 20px 12px;border-bottom:1px solid var(--border)} .notif-tabs button{border:0;background:none;padding:8px 14px;border-radius:8px;font-size:12px;color:var(--muted);cursor:pointer} .notif-tabs button.active{background:var(--blue-soft);color:var(--blue)} .notif-list{max-height:380px;overflow:auto;padding:0 12px} .notif-item{width:100%;display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:14px 8px;border:0;border-bottom:1px solid var(--border);background:none;text-align:left;cursor:pointer;color:var(--text)} .notif-item:last-child{border-bottom:0} .notif-item:hover{background:var(--muted-surface)} .notif-item>span:nth-child(2){display:grid;gap:3px} .notif-item b{font-size:13px;font-weight:500} .notif-item small{font-size:11px;color:var(--muted)} .notif-item time{font-size:10px;color:var(--subtle)} .notif-item i{font-style:normal;color:var(--muted);font-size:18px} .notif-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:white;font-size:15px} .notif-icon.red{background:#e5484d}.notif-icon.yellow{background:#e7a600}.notif-icon.green{background:#08a84e}.notif-icon.blue{background:#0a4bff} .notif-footer{width:100%;display:flex;justify-content:space-between;padding:16px 20px;border:0;border-top:1px solid var(--border);background:none;color:var(--blue);font-size:12px;cursor:pointer} .notif-empty{display:grid;gap:4px;text-align:center;padding:40px 10px} .notif-empty small{color:var(--muted)} .notif-center{padding:8px 16px} /* Hoje */ .rhythm-days span.done{color:white;background:#0a4bff;font-size:13px;font-weight:700} .rhythm-days span.missed{color:white;background:#e5484d} .rhythm-days>b.warn,.rhythm-metric.warn b{color:#e7a600} .rhythm-metric.warn em{background:#e7a600} .contact-photo{display:grid;place-items:center;color:white;font-size:11px;font-weight:600} button.contact-row{width:100%} /* Pomodoro */ .pomo-toolbar{display:flex;justify-content:space-between;align-items:center} .timer-ring{border:0;cursor:pointer;font:inherit;color:inherit;padding:0} .timer-ring:focus-visible{outline:3px solid var(--blue-soft);outline-offset:6px} .timer-ring span#timer-hint{font-size:11px;color:#777} .focus-task .session-goal{color:white;font-size:13px} .focus-task .btn{flex:1} .focus-task .btn:not(.primary){background:white;color:#202124} /* Agenda */ .agenda-toolbar{grid-template-columns:auto auto auto auto 1fr auto auto} .select-btn select{height:44px;padding:0 34px 0 14px;border:1px solid var(--border);border-radius:10px;background:white;font:inherit;font-size:13px;cursor:pointer} .mini-head{display:flex;justify-content:space-between;align-items:center} .mini-head button{border:0;background:none;cursor:pointer;color:var(--muted);padding:0 4px} .mini-calendar .mini-letters,.mini-calendar .mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-top:12px} .mini-letters small{text-align:center;font-size:9px;color:var(--muted)} .mini-grid button{height:26px;margin:2px 0;border:0;background:none;font-size:10px;cursor:pointer;color:var(--text);border-radius:0} .mini-grid button.muted{color:#c3c7cc} .mini-grid button.in-range{background:var(--blue);color:white} .mini-grid button.range-start{border-radius:14px 0 0 14px} .mini-grid button.range-end{border-radius:0 14px 14px 0} .mini-grid button.range-start.range-end{border-radius:14px} .mini-grid button.today:not(.in-range){background:var(--blue-soft);color:var(--blue);border-radius:50%;font-weight:600} .mini-grid button.today.in-range{box-shadow:inset 0 0 0 2px white;font-weight:700} .calendar-layout aside h3 button{font-size:18px;cursor:pointer} .calendar-list{display:grid;gap:4px} .cal-item{display:flex;align-items:center;justify-content:space-between} .cal-item label{display:flex;gap:10px;align-items:center;font-size:12px;cursor:pointer;padding:5px 0} .cal-item input{appearance:none;width:16px;height:16px;border:1px solid var(--border);border-radius:4px;display:grid;place-items:center;cursor:pointer;margin:0} .cal-item input:checked{background:var(--cal,var(--blue));border-color:var(--cal,var(--blue))} .cal-item input:checked:after{content:"✓";color:white;font-size:10px} .cal-item button{border:0;background:none;color:var(--muted);cursor:pointer;opacity:0} .cal-item:hover button,.cal-item button:focus{opacity:1} .link-card{display:flex;justify-content:space-between;align-items:center;height:42px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:white;font-size:12px;cursor:pointer;color:var(--text)} .link-card span{font-size:18px} .week-head,.week-row{grid-template-columns:62px repeat(var(--cols,7),1fr)} .week-head>*{line-height:1.4} .week-row>b{font-weight:600;color:#333} .event{padding:8px 10px;font-size:9px} .event b{font-weight:500} .event em{position:absolute;top:6px;right:8px;font-style:normal;opacity:.8} .now-line{position:absolute;left:0;right:0;height:2px;background:#e5484d;z-index:3;pointer-events:none} .now-line:before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:#e5484d} /* Relacionamentos */ .metric-icon.glyph{color:var(--blue);font-weight:600;font-size:14px} .brand-badge{color:white!important;font-size:10px;font-weight:700} .brand-badge.ig{background:linear-gradient(135deg,#f58529,#dd2a7b 50%,#8134af)!important} .brand-badge.wa{background:#25d366!important} .brand-badge.li{background:#0a66c2!important} .brand-badge.em{background:#ea4335!important} .brand-badge.ph,.brand-badge.ot{background:#6b6f76!important} button.next-action span{display:grid} button.next-action small{color:var(--muted);font-size:10px} .ico-columns,.ico-list,.ico-table{display:inline-block;width:15px;height:13px;border:1.6px solid currentColor;border-radius:2px;position:relative} .ico-columns{background:linear-gradient(90deg,transparent 30%,currentColor 30% 38%,transparent 38% 62%,currentColor 62% 70%,transparent 70%)} .ico-list{border:0;background:repeating-linear-gradient(180deg,currentColor 0 1.6px,transparent 1.6px 5px)} .ico-table{background:linear-gradient(90deg,transparent 45%,currentColor 45% 55%,transparent 55%),linear-gradient(180deg,transparent 45%,currentColor 45% 55%,transparent 55%)} .prospect-head{margin-top:28px} .prospect-head .view-tabs{flex:none} .prospect-head .view-tabs button{min-width:120px} .prospect-head>div:first-child{flex:none} .prospect-head .board-actions{margin-left:auto} .board-actions{display:flex;gap:10px} .filter-line{font-size:12px;color:var(--muted);margin:12px 0} .kanban-board{margin-top:20px} .crm-card{cursor:pointer} .crm-card:hover{border-color:var(--blue)} .crm-title button{margin-left:auto;border:0;background:none;cursor:pointer;color:#555} .crm-card li{cursor:pointer;padding:3px 0} .crm-card li:hover{color:var(--blue)} .crm-card .tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .owners{margin-left:auto;display:flex} .avatar.tiny{width:22px;height:22px;font-size:8px} .avatar.has-photo{padding:0;overflow:hidden;background:none} .avatar.has-photo img{width:100%;height:100%;object-fit:cover} .empty-actions{display:flex;gap:10px} .choice-list{display:grid;gap:12px;margin:20px 0} .choice{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:10px;cursor:pointer} .choice span{display:grid;gap:2px} .choice small{color:var(--muted);font-size:11px} .choice:has(input:checked){border-color:var(--blue);background:var(--blue-soft)} .dropzone{display:grid;justify-items:center;gap:8px;margin:20px 0 14px;padding:34px 20px;border:1.5px dashed var(--border);border-radius:14px;background:var(--canvas);text-align:center;cursor:pointer} .dropzone.over{border-color:var(--blue);background:var(--blue-soft)} .dropzone .up{font-size:26px;color:var(--blue)} .dropzone small{color:var(--muted);font-size:11px} .import-status{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:14px 16px;margin-bottom:14px;border-radius:10px;background:var(--blue-soft)} .import-status small{grid-column:1} .import-status strong{grid-row:1/3;grid-column:2;align-self:center;color:var(--green)} .field.checks{border:0;padding:0;margin:0;display:grid;gap:6px} .field.checks label{display:flex;gap:8px;align-items:center;color:var(--text);font-size:13px} .pipeline-sub{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .filter-chips{display:flex;gap:8px;flex-wrap:wrap} .filter-chips button{border:1px solid var(--border);background:white;border-radius:8px;padding:8px 10px;font-size:11px;color:#555;cursor:pointer} .kanban-board.pipeline-board{grid-template-columns:repeat(var(--stages,5),minmax(230px,1fr))} .kanban-column h3 span[data-edit-stage]{cursor:pointer} .deal-card{cursor:pointer} .deal-card:hover{border-color:var(--blue)} .deal-card>div b{font-size:13px} .deal-card>div button{border:0;background:none;cursor:pointer;color:#555} .list-view{display:grid;padding:8px 18px;margin-top:20px} .list-view .list-row{border:0;border-bottom:1px solid var(--border);background:none;text-align:left;cursor:pointer;padding:12px 4px;font:inherit;color:inherit;width:100%} .list-view .list-row:hover{background:var(--muted-surface)} .list-view .list-row span{display:grid} .list-view .list-row small{color:var(--muted);font-size:11px} .list-view .list-row .time{width:50px;color:var(--blue);font-size:12px} .group-title{font-size:12px;color:var(--muted);margin:16px 0 4px;font-weight:500} section.table-wrap{margin-top:20px;padding:0} section.table-wrap th,section.table-wrap td{padding:12px 16px;text-align:left;font-size:12px;border-bottom:1px solid var(--border)} section.table-wrap th{color:var(--muted);font-weight:500} section.table-wrap tbody tr{cursor:pointer} section.table-wrap tbody tr:hover{background:var(--muted-surface)} .conversation-scroll{max-height:560px;overflow:auto} .contact-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer} .contact-tabs img{width:16px;height:16px} .chat-panel>header{gap:8px} .chat-panel>header small{color:#08a84e} .msg-search{height:40px;border:1px solid var(--border);border-radius:8px;padding:0 10px;font:inherit;font-size:12px} .message-composer{align-items:center} .message-composer .square-btn{width:38px;height:38px} .message-composer input{height:38px} /* Trabalho */ .kanban-column.drop{outline:2px dashed var(--blue);outline-offset:-4px} .work-board .work-card{cursor:grab} /* Configurações */ .settings-page>aside button{cursor:pointer} .inline-input{border:1px solid transparent;border-radius:8px;padding:4px 6px;margin-left:-6px;font:inherit;font-size:18px;font-weight:600;background:none;color:var(--text);width:min(360px,100%)} .inline-input:hover,.inline-input:focus{border-color:var(--border);outline:none;background:white} .avatar.big{width:64px;height:64px;font-size:18px} .photo-actions{display:flex!important;gap:8px;margin-top:8px} .photo-actions .btn{cursor:pointer} .preference-card select{margin-left:auto;border:0;background:none;color:#777;font:inherit;font-size:13px;text-align:right;cursor:pointer} .preference-card>div{align-items:center} .preference-card .switch{margin-left:auto} .plan-box{display:grid;gap:4px;padding:16px;border:1px solid var(--border);border-radius:10px;margin:10px 0} /* Tema escuro */ html.theme-dark{background:#111} html.theme-dark body{filter:invert(.9) hue-rotate(180deg)} html.theme-dark img,html.theme-dark .avatar.has-photo,html.theme-dark .brand-badge,html.theme-dark .notif-icon,html.theme-dark .event{filter:invert(1) hue-rotate(180deg)} @media(max-width:820px){ .prospect-head{flex-direction:column;align-items:stretch} .prospect-head .view-tabs{overflow:auto} .board-actions{flex-wrap:wrap} .notif-pop{left:12px!important} } .breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .mini-calendar .mini-head{display:flex;justify-content:space-between;align-items:center;margin:0;gap:8px} .mini-calendar .mini-head strong{font-size:13px} .mini-calendar .mini-head span{display:flex;gap:2px} .view-tabs button{font-size:13px} .add-contact{font-size:12px} .work-kpis b{color:var(--blue)} .work-kpis p{font-size:11px;color:var(--muted)} .notif-pop h3 .pill{font-size:10px} /* Pomodoro — layout conforme Figma (Desktop - Pomodoro) */ .pomodoro-page .focus-layout{grid-template-columns:1fr 344px;align-items:stretch} .pomodoro-page .focus-stage{display:grid;grid-template-columns:347px 323px;grid-template-rows:auto 1fr auto;grid-template-areas:"info ring" "task ring" "stats stats";column-gap:78px;row-gap:36px;justify-content:center;align-content:center;padding:52px 30px;min-height:530px;background:#fffefb;border-color:#e6e1d8;border-radius:16px} .pomodoro-page .focus-info{grid-area:info;position:static;display:grid;justify-items:start;gap:11px;text-align:left;width:auto} .pomodoro-page .focus-info small{font-size:9px;color:#918b84;letter-spacing:.02em} .pomodoro-page .focus-info .pill{width:142px;height:28px;justify-content:center;border-radius:8px;font-size:10px;background:#eaf0ff;color:#0048ff} .pomodoro-page .focus-task{grid-area:task;align-self:start;max-width:none;width:347px;padding:18px;border-radius:14px;background:#171717} .pomodoro-page .focus-task>small{font-size:9px;color:#b8b3ac} .pomodoro-page .focus-task h2{font-size:18px;margin:20px 0 10px;color:#fffdf9} .pomodoro-page .focus-task>p{font-size:11px;color:#cfcac3} .pomodoro-page .focus-task hr{border-top-color:#353535;margin:22px 0 20px} .pomodoro-page .focus-task .session-goal{font-size:12px;color:#fffdf9;margin:6px 0 14px} .pomodoro-page .focus-task>div{gap:12px;flex-wrap:nowrap} .pomodoro-page .focus-task .btn{height:28px;min-height:0;padding:0 10px;font-size:9px;border-radius:7px} .pomodoro-page .timer-ring{grid-area:ring;align-self:start;width:322px;height:322px;margin-top:4px} .pomodoro-page .timer-ring:after{inset:16px;background:#fffefb} .pomodoro-page .timer-ring b{font-size:58px;color:#1f1f1f} .pomodoro-page .timer-ring span#timer-hint{color:#68645f} .pomodoro-page .focus-stats{grid-area:stats;position:static;width:auto;height:auto;margin-top:-4px;padding:16px 18px;justify-content:center;gap:69px;background:#fffefb;border-color:#e6e1d8;border-radius:12px} .pomodoro-page .focus-stats strong{font-size:13px;color:#1f1f1f} .pomodoro-page .focus-stats span{text-align:left;font-size:10px;color:#68645f} .pomodoro-page .focus-stats b{font-size:17px;color:#1f1f1f} .pomodoro-page .queue{background:#fffefb;border-color:#e6e1d8;border-radius:14px;padding:14px 18px} .pomodoro-page .queue h2{font-size:14px;margin-bottom:12px} .pomodoro-page .queue-item{grid-template-columns:28px 1fr auto;padding:15px 0;border-radius:0;border-bottom-color:#e6e1d8;font-size:11px} .pomodoro-page .queue-item b{font-size:10px;color:#918b84} .pomodoro-page .queue-item small{font-size:9px;color:#918b84} .pomodoro-page .queue-item.active{background:none;color:#0048ff} .pomodoro-page .queue .btn{background:#eaf0ff;color:#0048ff;border:0;height:39px;font-size:9px} @media (max-width:1180px){ .pomodoro-page .focus-layout{grid-template-columns:1fr} .pomodoro-page .focus-stage{grid-template-columns:1fr;grid-template-areas:"info" "ring" "task" "stats";justify-items:center;padding:30px 18px} .pomodoro-page .focus-task{width:100%;max-width:380px} .pomodoro-page .timer-ring{width:260px;height:260px} .pomodoro-page .focus-stats{flex-wrap:wrap;gap:20px;width:100%} } /* Tipografia de títulos (design system): semibold; inicial em Jolly Club, sempre 7px maior */ .page-title h1,.welcome h1,#login-title{font-weight:600;letter-spacing:-.5px} .page-title h1{font-size:26px} .title-initial,.jolly-letter{font-family:"Jolly Club","Segoe UI",sans-serif;font-size:calc(1em + 7px);font-weight:400;letter-spacing:0} /* Pomodoro — seletor de duração e botão de ajustes (Figma) */ .pomodoro-page .seg-tabs{width:auto;gap:1px;background:#fbfbf8;border:1px solid #dfe6ed;border-radius:6px} .pomodoro-page .seg-tabs button{width:100px;height:60px;border:0;background:#fff;color:#000;font-size:16px} .pomodoro-page .seg-tabs button.active{background:#fbfbf8;color:#000;border-bottom:2px solid #0048ff} .pomodoro-page .pomo-toolbar .square-btn{width:60px;height:60px;border:0;border-radius:0;background:#fff} .pomodoro-page .pomo-toolbar .square-btn img{width:24px;height:24px} /* Escala tipográfica do Pomodoro: 11 (rótulos) · 13 (texto) · 16 (abas) · 20 (destaques) · 26 (título) · 58 (timer) */ .pomodoro-page .focus-info small,.pomodoro-page .focus-task>small{font-size:11px;letter-spacing:.04em} .pomodoro-page .focus-info .pill{width:auto;padding:0 16px;height:30px;font-size:12px} .pomodoro-page .focus-task{padding:22px} .pomodoro-page .focus-task h2{font-size:22px;font-weight:600;margin:18px 0 8px} .pomodoro-page .focus-task>p{font-size:13px} .pomodoro-page .focus-task .session-goal{font-size:14px} .pomodoro-page .focus-task .btn{height:36px;font-size:13px} .pomodoro-page .timer-ring span#timer-hint{font-size:13px} .pomodoro-page .focus-stats strong{font-size:16px} .pomodoro-page .focus-stats span{font-size:12px} .pomodoro-page .focus-stats b{font-size:20px} .pomodoro-page .queue h2{font-size:16px;font-weight:600} .pomodoro-page .queue-item{font-size:14px} .pomodoro-page .queue-item b{font-size:12px} .pomodoro-page .queue-item small{font-size:12px} .pomodoro-page .queue .btn{font-size:13px} .pomodoro-page .focus-stage{grid-template-columns:380px 323px} .pomodoro-page .focus-task{width:380px} /* Relacionamentos — conforme Figma (Desktop - Relacionamentos / Prospecção) */ .relationships-page .module-tabs{width:762px;height:56px;margin-top:8px;border-radius:10px} .relationships-page .module-tabs button{min-width:0;font-size:15px;color:#5f5f5f;border-bottom:3px solid transparent} .relationships-page .module-tabs button.active{color:#0048ff;font-weight:500;background:#eef3ff;border-bottom:3px solid #0048ff} .relationships-page .module-tabs img,.relationships-page .module-tabs .ico-columns{width:18px;height:18px} .view-switch{display:flex;gap:12px;align-items:stretch} .prospect-head .view-tabs{border-radius:10px;overflow:hidden} .prospect-head .view-tabs button{min-width:132px;width:132px;height:44px;gap:7px;font-size:14px;color:#5f5f5f;border-bottom:3px solid transparent} .prospect-head .view-tabs button:last-child{border-right:0} .prospect-head .view-tabs button.active{color:#0048ff;font-weight:500;background:#eef3ff;border-bottom:3px solid #0048ff} .prospect-head .view-tabs img,.prospect-head .view-tabs [class^=ico-]{width:16px;height:16px} .add-view{display:flex;gap:8px;align-items:center;padding:0 14px;border:0;border-radius:10px;background:#fff;color:#1f1f1f;font:inherit;font-size:14px;font-weight:500;cursor:pointer} .add-view img{width:16px;height:16px} .add-view:hover{background:#eef3ff} .relationships-page .board-actions{gap:8px} .relationships-page .board-actions .btn{height:42px;min-height:0;padding:0 14px;border-radius:10px;font-size:14px;font-weight:500;gap:8px} .relationships-page .kanban-board{gap:14px} .relationships-page .kanban-column{padding:14px;border-radius:14px;background:#fbfbf8} .relationships-page .kanban-column>header{margin-bottom:12px} .relationships-page .kanban-column h3{font-size:14px;font-weight:700;color:#1f1f1f} .relationships-page .kanban-column>header .pill{font-size:11px;font-weight:700;padding:4px 8px;border-radius:8px} .relationships-page .add-contact{height:auto;margin:0 0 12px;padding:10px 14px;background:transparent;border-radius:8px;font-size:13px;font-weight:500;color:#0048ff} .relationships-page .crm-card{display:flex;flex-direction:column;gap:12px;min-height:240px;margin:0 0 12px;padding:16px;border-radius:12px} .relationships-page .crm-title{margin:0;gap:10px} .relationships-page .crm-title .avatar{width:36px;height:36px;border-radius:8px;background:#eef3ff;color:#0048ff;font-size:11px;font-weight:700} .relationships-page .crm-title b{font-size:15px;font-weight:700;color:#1f1f1f} .relationships-page .crm-title small{font-size:11px;color:#5f5f5f} .relationships-page .crm-title button{font-size:15px;font-weight:700;color:#5f5f5f;letter-spacing:1px} .relationships-page .crm-progress{margin:0;font-size:11px} .relationships-page .crm-progress span{font-weight:500;color:#5f5f5f} .relationships-page .crm-progress b{font-weight:700;color:#0048ff} .relationships-page .crm-card>i{width:87%;margin-top:-6px;background:#dfe6ed} .relationships-page .crm-card>i em{background:#00a63e;border-radius:6px} .relationships-page .crm-card ul{margin:0;display:grid;gap:6px;font-size:11px;font-weight:500;color:#5f5f5f} .relationships-page .crm-card li{padding:0;display:flex;align-items:center} .relationships-page .crm-card li.done{color:#1f1f1f} .relationships-page .crm-card li:before{width:14px;height:14px;margin-right:8px;flex:none} .relationships-page .crm-card li.done:before{border-color:#00a63e;background:#00a63e} .relationships-page .crm-card .tags{margin:0} .relationships-page .crm-card .tags .pill{font-size:11px} .relationships-page .owners .avatar.tiny{width:24px;height:24px;font-size:8px;font-weight:700;background:#dfe6ed;color:#1f1f1f;border:2px solid #fff} /* Agenda — minicalendário conforme Figma */ .agenda-page .mini-calendar{padding:17px 13px;background:#fbfbf8;border:1px solid #dfe6ed;border-radius:6px} .agenda-page .mini-calendar .mini-head strong{font-size:14px;font-weight:700;color:#171717} .agenda-page .mini-calendar .mini-head button{font-size:13px;color:#676b70} .agenda-page .mini-calendar .mini-letters{margin-top:20px} .agenda-page .mini-letters small{font-size:9px;font-weight:500;color:#8b8f93} .agenda-page .mini-calendar .mini-grid{margin-top:10px;row-gap:6px;user-select:none;touch-action:none} .agenda-page .mini-grid button{height:28px;margin:0;padding:0;display:grid;place-items:center;font-size:10px;color:#343434;border-radius:0;box-shadow:none} .agenda-page .mini-grid button i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:50%} .agenda-page .mini-grid button.muted{color:#b5b5b5} .agenda-page .mini-grid button:hover:not(.in-range) i{background:#eef3ff} .agenda-page .mini-grid button.in-range{background:#0048ff;color:#fff;font-weight:700} .agenda-page .mini-grid button.range-start{border-radius:14px 0 0 14px} .agenda-page .mini-grid button.range-end{border-radius:0 14px 14px 0} .agenda-page .mini-grid button.range-start.range-end{border-radius:14px} .agenda-page .mini-grid button.today,.agenda-page .mini-grid button.today.in-range{box-shadow:none;background-clip:padding-box} .agenda-page .mini-grid button.today:not(.in-range){background:none} .agenda-page .mini-grid button.today i{background:#eef3ff;color:#0048ff;font-weight:700} /* Agenda — seleção arrastando e criação rápida */ .week-grid{position:relative} .week-row>span{user-select:none} .slot-selection{position:absolute;z-index:4;padding:6px 8px;border-radius:6px;background:#0048ff;color:#fff;box-shadow:0 6px 18px rgba(0,72,255,.25);pointer-events:none;overflow:hidden;display:grid;align-content:start;gap:2px;font-size:11px;line-height:1.25} .slot-selection b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .slot-selection small{font-size:10px;opacity:.9} .quick-pop{position:fixed;z-index:60;width:420px;max-width:calc(100vw - 24px);padding:12px 22px 18px;background:#fff;border:1px solid #dfe6ed;border-radius:16px;box-shadow:0 18px 50px rgba(15,23,42,.18);display:grid;gap:12px;font-size:13px;color:#1f1f1f} .quick-pop header{display:flex;justify-content:space-between;align-items:center;height:24px} .qp-grip{width:28px;height:4px;border-radius:4px;background:#dfe6ed} .qp-close{border:0;background:none;font-size:15px;color:#5f5f5f;cursor:pointer;width:28px;height:28px;border-radius:50%} .qp-close:hover{background:#f1f4f7} .qp-title{border:0;border-bottom:2px solid #dfe6ed;padding:4px 0 8px;margin-left:34px;font:inherit;font-size:22px;font-weight:500;color:#1f1f1f;background:none;outline:none} .qp-title:focus{border-bottom-color:#0048ff} .qp-title::placeholder{color:#9e9e9e;font-weight:400} .qp-tabs{display:flex;gap:6px;margin-left:34px} .qp-tabs button{height:32px;padding:0 14px;border:0;border-radius:8px;background:none;font:inherit;font-size:13px;color:#5f5f5f;cursor:pointer} .qp-tabs button.active{background:#eef3ff;color:#0048ff;font-weight:500} .qp-row{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:start} .qp-row>img,.qp-row>svg{margin-top:2px;opacity:.75} .qp-row b{font-weight:500} .qp-row small{display:block;margin-top:3px;font-size:11px;color:#8b8f93} .qp-time{display:inline-flex;align-items:center;gap:6px;margin-left:8px} .qp-time input{border:1px solid transparent;border-radius:6px;padding:2px 4px;font:inherit;font-size:13px;color:#1f1f1f;background:#f6f8fa} .qp-time input:focus{border-color:#0048ff;outline:none;background:#fff} .qp-time em{font-style:normal;color:#8b8f93} .qp-row input:not([type=time]),.qp-row textarea,.qp-row select{width:100%;border:0;border-radius:6px;padding:4px 6px;margin:-4px 0;font:inherit;font-size:13px;color:#1f1f1f;background:none;resize:none} .qp-row input:not([type=time]):hover,.qp-row textarea:hover,.qp-row select:hover{background:#f6f8fa} .qp-row input:not([type=time]):focus,.qp-row textarea:focus,.qp-row select:focus{outline:none;background:#f6f8fa} .qp-dot{width:10px;height:10px;border-radius:50%;margin-top:5px} .quick-pop.is-task .qp-event{display:none} .quick-pop footer{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:4px} .quick-pop footer .btn{min-width:96px;height:38px;border-radius:10px} .qp-more{font-size:13px} html.theme-dark .slot-selection{filter:invert(1) hue-rotate(180deg)} /* Trabalho — quadro no mesmo padrão do kanban de Relacionamentos (Figma) */ .work-page .work-board{grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px} .work-page .kanban-column{min-height:520px;padding:14px;border-radius:14px;background:#fbfbf8} .work-page .kanban-column>header{margin-bottom:12px} .work-page .kanban-column h3{font-size:14px;font-weight:700;color:#1f1f1f} .work-page .kanban-column>header .pill{font-size:11px;font-weight:700;padding:4px 8px;border-radius:8px} .work-page .add-contact{height:auto;margin:0 0 12px;padding:10px 14px;background:transparent;border-radius:8px;font-size:13px;font-weight:500;color:#0048ff;cursor:pointer} .work-page .add-contact:hover{background:#eef3ff} .work-page .work-card{min-height:92px;margin:0 0 12px;padding:16px;border-radius:12px;gap:8px} .work-page .work-card b{font-size:14px;font-weight:500;color:#1f1f1f} .work-page .work-card small{font-size:12px} .work-page .kanban-column.drop{background:#eef3ff} @media (max-width:1180px){.work-page .work-board{grid-template-columns:repeat(4,260px);overflow-x:auto}} .work-page .work-card small.yellow{color:#e7a600} .work-page .work-card small.red,.work-page .work-card .red{color:#e5484d} .work-page .work-card small.muted{color:#9e9e9e} /* Pipeline — conforme Figma (Desktop - Relacionamentos / Pipeline) */ .relationships-page .pipeline-sub{margin:14px 0 18px} .relationships-page .view-tabs.compact{width:auto;margin:0;border-radius:10px;overflow:hidden} .relationships-page .view-tabs.compact button{width:108px;min-width:108px;flex:none;height:36px;gap:7px;font-size:13px;color:#5f5f5f;border-bottom:3px solid transparent} .relationships-page .view-tabs.compact button:last-child{width:auto;padding:0 18px;border-right:0} .relationships-page .view-tabs.compact button.active{color:#0048ff;font-weight:500;background:#eef3ff;border-bottom:3px solid #0048ff} .relationships-page .view-tabs.compact [class^=ico-]{width:14px;height:12px} .relationships-page .filter-chips{gap:4px} .relationships-page .filter-chips button{border:0;background:#fff;border-radius:6px;padding:9px 10px;font-size:11px;color:#5f5f5f} .relationships-page .filter-chips button:hover{background:#eef3ff;color:#0048ff} .relationships-page .board-head h2{font-size:18px;font-weight:600} .relationships-page .board-head p{font-size:12px;color:#5f5f5f} .relationships-page .kanban-column h3 small{font-size:11px;font-weight:500;color:#0048ff} .relationships-page .deal-card{display:grid;gap:8px;min-height:150px;align-content:start;margin:0 0 12px;padding:14px 16px;border-radius:12px} .relationships-page .deal-card>div b{font-size:14px;font-weight:600;color:#1f1f1f} .relationships-page .deal-card>div button{font-size:15px;font-weight:700;color:#5f5f5f} .relationships-page .deal-card>strong{margin:0;font-size:13px;font-weight:500;color:#0048ff} .relationships-page .deal-card>small{margin:0;font-size:11px;color:#5f5f5f} .relationships-page .deal-card .pill{justify-self:start;margin-top:4px;font-size:11px;border-radius:6px;padding:4px 8px} /* Contatos / conversas — conforme Figma */ .relationships-page .inbox-shell{margin-top:24px;border-radius:14px} .relationships-page .conversation-list{padding:16px 16px 8px} .relationships-page .conversation-list header h2{margin:0;font-size:18px;font-weight:600} .relationships-page .conversation-list header small{font-size:11px;color:#5f5f5f} .relationships-page .conversation-list header .btn{width:36px;height:36px;min-height:0;padding:0;border-radius:8px} .relationships-page .inbox-search{height:38px;margin:12px 0;font-size:12px;border-radius:8px} .relationships-page .inbox-search input{font:inherit;font-size:12px;background:none} .relationships-page .contact-tabs{border-radius:10px} .relationships-page .contact-tabs button{height:54px;font-size:15px;color:#5f5f5f;border-bottom:3px solid transparent} .relationships-page .contact-tabs button.active{color:#0048ff;font-weight:500;border-bottom:3px solid #0048ff} .relationships-page .channel-filters{margin:12px 0} .relationships-page .channel-filters button{font-size:11px;padding:7px 11px;border-radius:6px} .relationships-page .conversation-item{min-height:64px;padding:12px;margin-bottom:2px;border-radius:10px} .relationships-page .conversation-item .avatar{width:34px;height:34px;border-radius:8px;background:#eef3ff;color:#0048ff;font-size:11px;font-weight:700} .relationships-page .conversation-item b{font-size:13px;font-weight:600;color:#1f1f1f} .relationships-page .conversation-item small{font-size:11px;color:#5f5f5f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px} .relationships-page .conversation-item time{font-size:10px;color:#8b8f93} .relationships-page .conversation-item em{width:16px;height:16px;font-size:9px;font-style:normal} .relationships-page .chat-panel header{padding:14px 16px} .relationships-page .chat-panel header .avatar{border-radius:50%;background:#eef3ff;color:#0048ff;font-size:11px;font-weight:700} .relationships-page .chat-panel header b{font-size:15px;font-weight:600} .relationships-page .chat-panel header small{font-size:11px} .relationships-page .messages p{font-size:13px;line-height:1.35} /* Relacionamentos / Visão geral — conforme Figma */ .relationships-page .rel-kpis{margin-top:24px} .relationships-page .rel-kpis em{font-style:normal;font-size:11px} .relationships-page .rel-kpis em.blue{color:#0048ff} .relationships-page .rel-kpis em.green{color:#00a63e} .relationships-page .rel-kpis em.yellow{color:#e7a600} .relationships-page .rel-kpis small{font-size:12px;color:#1f1f1f} .relationships-page .rel-kpis b{font-size:26px;font-weight:600} .relationships-page .rel-overview h2{font-size:17px;font-weight:600} .relationships-page .rel-overview .card-sub{font-size:12px;color:#5f5f5f} .relationships-page .channel-row{gap:12px;padding:6px 0} .relationships-page .channel-row b{font-size:13px;font-weight:500;color:#1f1f1f} .relationships-page .channel-row small{display:block;font-size:11px} .relationships-page .channel-row small.ch-off{color:#9e9e9e} .relationships-page .channel-row .brand-badge{width:30px;height:30px;border-radius:8px;font-size:9px} .relationships-page .next-action b{font-size:12px;font-weight:600;color:#0048ff} .relationships-page .next-action span{font-size:13px} .relationships-page .message-composer input{font-size:13px} /* Configurações — conforme Figma */ .settings-page>aside{min-height:660px;align-content:start} .settings-page>aside h2{font-size:17px;font-weight:600;margin-bottom:8px} .settings-page>aside button{font-size:13px;height:46px;padding:0 12px;border-radius:8px} .settings-page main h2{font-size:17px;font-weight:600} .settings-page .profile-card .section-heading{justify-content:flex-start;gap:16px} .settings-page .profile-card .section-heading .btn{min-width:110px;height:34px} .settings-page .profile-card .inline-input{font-size:17px;font-weight:600} .settings-page .profile-card small{font-size:12px} .settings-page .preference-card>div{min-height:47px} .settings-page .preference-card b{font-size:13px;font-weight:400;color:#1f1f1f} .settings-page .preference-card select{font-size:12px;color:#5f5f5f} .settings-page .danger-card h2{color:#e5484d} .settings-page .danger-card p{font-size:12px;color:#5f5f5f} .settings-page .danger-card .btn{min-width:110px;height:34px;font-size:12px} .settings-page .profile-card .section-heading{display:flex;justify-content:flex-start}.settings-page .profile-card .section-heading .btn{margin-left:0} .notif-pop header h3{font-size:18px;font-weight:600} /* ============ Etapa 2 ============ */ .project-subnav button i{width:6px;height:6px;border-radius:50%;background:var(--green)} .project-subnav button i.yellow{background:var(--yellow)}.project-subnav button i.red{background:var(--red)} .project-subnav button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .project-subnav button em{font-style:normal;font-size:10px;color:#6b6f76} .project-subnav button.active{background:var(--blue-soft);color:var(--blue)} .btn.out-soft{color:var(--red);background:var(--red-soft);border-color:var(--red-soft)} .btn svg,.view-tabs svg{flex:none} .dots{border:0;background:transparent;color:#6b6f76;cursor:pointer;font-size:12px;letter-spacing:1px;padding:4px 6px;border-radius:6px} .dots:hover{background:#f1f4f8} .green{color:var(--green)}.yellow{color:var(--yellow)}.purple{color:var(--purple)} i.bar{display:block;height:7px;border-radius:8px;background:#e6ebef;overflow:hidden;width:auto} i.bar em{display:block;height:100%;background:var(--green);border-radius:8px} i.bar em.blue{background:var(--blue)} .section-heading.left .btn{margin-left:0} .section-heading.left .chip-tabs{margin-left:4px} .chip-tabs{display:flex;gap:6px;flex-wrap:wrap} .chip-tabs button{border:0;border-radius:999px;padding:5px 9px;font-size:10px;background:#f3f5f4;color:#6b6f76;cursor:pointer} .chip-tabs button.active{background:var(--blue-soft);color:var(--blue)} .chip-tabs button.in:not(.active){color:var(--green);background:var(--green-soft)} .chip-tabs button.out:not(.active){color:var(--red);background:var(--red-soft)} .chip-tabs.big button{font-size:12px;padding:8px 14px} .link-button{border:0;background:none;color:var(--blue);cursor:pointer;padding:0;font-size:12px} /* Projetos — lista */ .projects-page .board-head{margin-top:0} .projects-page .board-head>.view-tabs{flex:none;background:white} .projects-page .board-actions{margin-left:auto} .projects-page .view-tabs button{min-width:auto;padding:0 18px;height:42px} .projects-page .view-tabs svg{width:15px;height:15px} .proj-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .proj-kpis article{display:grid;gap:4px;padding:16px 16px 14px} .proj-kpis b{font-size:24px;font-weight:400;line-height:1.1} .proj-kpis b.blue{color:var(--blue)}.proj-kpis b.yellow{color:var(--yellow)}.proj-kpis b.red{color:var(--red)}.proj-kpis b.green{color:var(--green)} .proj-kpis small{font-size:11px;color:#6b6f76} .projects-page .project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .projects-page .project-card{padding:14px;cursor:pointer;transition:border-color .15s} .projects-page .project-card:hover{border-color:#b9c9ff} .projects-page .project-card header{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center} .projects-page .project-card header .avatar{width:36px;height:36px;border-radius:8px;font-size:11px} .projects-page .project-card header div{display:grid;min-width:0} .projects-page .project-card header b{font-size:13px;font-weight:500} .projects-page .project-card header small{font-size:10px;color:#777} .project-cover{width:100%;aspect-ratio:auto;height:auto;margin:12px 0;border-radius:10px;overflow:hidden;background:#e9e6ff} .projects-page .project-cover{height:220px} .project-cover img{width:100%;height:100%;object-fit:cover;display:block} .projects-page .project-card h3{font-size:20px;font-weight:400;margin:4px 0 10px;letter-spacing:-.3px} .projects-page .tags{display:flex;gap:6px;flex-wrap:wrap} .projects-page .tags .pill{font-size:10px;padding:5px 9px} .projects-page .tags .pill:nth-child(2).blue{color:var(--purple);background:var(--purple-soft)} .project-meta{list-style:none;padding:0;margin:14px 0 4px;display:grid;gap:7px;color:#5f646a;font-size:11px} .project-meta li{display:flex;gap:8px;align-items:center} .project-meta svg{width:13px;height:13px;color:#6b6f76} /* Projetos — detalhe */ .project-detail{gap:16px} .pd-cover{position:relative;height:200px;border-radius:14px;overflow:hidden;background:#e9e6ff} .pd-cover img{width:100%;height:100%;object-fit:cover;display:block} .pd-cover .btn{position:absolute;right:18px;top:16px} .pd-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .pd-head>.avatar{width:54px;height:54px;font-size:12px} .pd-head>div{display:grid;gap:2px;min-width:0} .pd-head small.blue{font-size:11px} .pd-head h1{margin:0;font-size:26px;font-weight:400;letter-spacing:-.5px} .pd-head p{margin:2px 0 0;font-size:11px;color:#6b6f76} .pd-head .grow{flex:1} .pd-head .link-button{font-size:11px;color:#6b6f76;justify-self:start} .pd-tabs{width:max-content;max-width:100%;overflow:auto;background:white} .pd-tabs button{min-width:auto;padding:0 18px;height:42px} .pd-tabs em{font-style:normal;font-size:10px;background:var(--red-soft);color:var(--red);border-radius:999px;padding:1px 6px} .pd-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start} .pd-main,.pd-side{display:grid;gap:14px;align-content:start} .pd-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} .pd-progress .bar{margin:16px 0 12px;max-width:640px} .stage-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .stage-steps button{min-height:52px;display:grid;justify-items:start;gap:6px;padding:9px 10px;border:1px solid #dfe6ed;border-radius:8px;background:#fafafa;color:#6b6f76;font-size:10px;cursor:pointer;text-align:left} .stage-steps button span{width:18px;height:18px;border-radius:50%;border:1px solid #cfd6dc;background:white;display:grid;place-items:center;color:white} .stage-steps button span svg{width:11px;height:11px} .stage-steps button.done span{background:var(--green);border-color:var(--green)} .stage-steps button.current{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)} .stage-steps button.current span{background:var(--blue);border-color:var(--blue)} .pend-row,.member-row,.next-step{display:flex;gap:10px;align-items:center;padding:8px 0} .pend-row>span:nth-child(2),.member-row>span:not(.avatar),.next-step>span:last-child{flex:1;display:grid;min-width:0} .pend-row b,.member-row b,.next-step b{font-size:12px;font-weight:500} .pend-row small,.member-row small,.next-step small{font-size:10px;color:#777} .pend-icon,.next-step>span:first-child{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--blue-soft);color:var(--blue)} .pend-icon svg,.next-step svg{width:14px;height:14px} .next-step>span.now{background:var(--blue-soft)} .member-row .avatar{width:28px;height:28px;font-size:9px} .row-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .pd-two .card>.btn{margin-top:10px} .pd-chat .chat-list{display:grid;gap:8px;max-height:320px;overflow:auto;margin:12px 0} .pd-chat .chat-list p{margin:0;justify-self:start;max-width:92%;padding:8px 10px;border-radius:8px;background:#f4f5f6;font-size:11px;display:grid;gap:3px} .pd-chat .chat-list p.client{background:var(--blue-soft)} .pd-chat .chat-list p small{font-size:9px;color:#777} .chat-input{display:flex;gap:8px} .chat-input input{flex:1;min-width:0;height:38px;border:1px solid #dfe6ed;border-radius:8px;padding:0 10px;font:inherit;font-size:12px} .chat-input .square-btn{width:38px;height:38px} .chat-input .square-btn svg{width:15px} .pd-list .section-heading{flex-wrap:wrap} .inline-add{display:flex;gap:8px;margin-left:auto} .inline-add input{height:38px;border:1px solid #dfe6ed;border-radius:8px;padding:0 10px;font:inherit;font-size:12px;min-width:220px} .pd-list .list-row{width:100%;border:0;border-bottom:1px solid #eef1f3;background:none;text-align:left;cursor:pointer;font:inherit} .pd-list .list-row>span:nth-child(2){display:grid} .pd-list .list-row small{font-size:10px;color:#777} .task-check{width:20px;height:20px;border:1px solid #cfd6dc;border-radius:6px;display:grid;place-items:center;color:white;flex:none} .task-check.done{background:var(--green);border-color:var(--green)} .task-check svg{width:12px} .folder-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .folder-card{display:grid;gap:6px;justify-items:start;text-align:left;cursor:pointer;font:inherit;color:inherit} .folder-card b{font-size:13px;font-weight:500;margin-top:6px} .folder-card small{font-size:10px;color:#777} .folder-card.new{border-style:dashed;color:var(--blue)} .upload-btn{margin-left:auto;cursor:pointer} .file-table,.tx-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:11px} .file-table th,.tx-table th{text-align:left;font-weight:400;color:#6b6f76;background:#f7f8f8;padding:8px} .file-table td,.tx-table td{padding:10px 8px;border-bottom:1px solid #eef1f3} .file-table a{color:var(--text)} .switch.small i{width:28px;height:16px}.switch.small i:after{width:12px;height:12px}.switch.small input:checked+i:after{left:14px} /* Assistente de projeto e capa */ .wizard>header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .wizard>header h2{margin:0} .wz-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0} .wz-steps span{display:flex;gap:8px;align-items:center;padding:10px;border-radius:8px;background:#f5f6f6;color:#6b6f76;font-size:12px} .wz-steps i{width:22px;height:22px;border-radius:50%;border:1px solid #cfd6dc;display:grid;place-items:center;font-style:normal;font-size:11px;background:white} .wz-steps .active{background:var(--blue-soft);color:var(--blue)} .wz-steps .active i{background:var(--blue);border-color:var(--blue);color:white} .wz-steps .done i{background:var(--green);border-color:var(--green);color:white} .wz-q{font-size:16px;font-weight:500;margin:4px 0 12px} .wz-choice{width:100%;display:flex;gap:14px;align-items:center;padding:18px 16px;margin-bottom:12px;border:1px solid #dfe6ed;border-radius:10px;background:white;text-align:left;cursor:pointer;font:inherit;color:inherit} .wz-choice>span:first-child{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:8px;background:white;color:var(--blue)} .wz-choice>span:last-child{display:grid;gap:3px} .wz-choice b{font-weight:500;font-size:14px}.wz-choice small{font-size:11px;color:#6b6f76} .wz-choice.active{border-color:var(--blue);background:var(--blue-soft)} .wz-choice:disabled{opacity:.55;cursor:not-allowed} .wz-results{display:grid;gap:6px;margin-top:8px;max-height:220px;overflow:auto} .wz-results button{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid #eef1f3;border-radius:8px;background:white;text-align:left;cursor:pointer;font:inherit} .wz-results button.active{border-color:var(--blue);background:var(--blue-soft)} .wz-results span:last-child{display:grid}.wz-results small{font-size:10px;color:#777} .wz-members .field-row{align-items:end} .wz-summary{padding:14px;border-radius:10px;background:#f6f7f6;font-size:12px} .wz-summary p{margin:4px 0} .cover-tabs{margin:14px 0} .cover-tabs button{flex:1;min-width:auto} .cover-pick{width:100%;cursor:pointer;margin-bottom:12px} .cover-crop{height:300px;border:2px solid var(--blue);border-radius:10px;overflow:hidden;cursor:grab;touch-action:none;background:#eee} .cover-crop:active{cursor:grabbing} .cover-crop img{width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none} .cover-zoom{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px;color:#6b6f76} .cover-zoom label{display:flex;gap:10px;align-items:center} .share-box{display:flex;gap:8px;margin:14px 0} .share-box input{flex:1;min-width:0;height:40px;border:1px solid #dfe6ed;border-radius:8px;padding:0 10px;font:inherit;font-size:12px} .seg-two{display:grid;grid-template-columns:1fr 1fr;border:1px solid #dfe6ed;border-radius:9px;overflow:hidden} .seg-two button{height:42px;border:0;background:white;color:#666;display:flex;gap:8px;align-items:center;justify-content:center;cursor:pointer;font:inherit;font-size:13px} .seg-two button+button{border-left:1px solid #dfe6ed} .seg-two button.active{background:var(--blue-soft);color:var(--blue);box-shadow:inset 0 -2px var(--blue)} .seg-two.in button.active{background:var(--green-soft);color:var(--green);box-shadow:inset 0 -2px var(--green)} .seg-two.out button.active{background:var(--red-soft);color:var(--red);box-shadow:inset 0 -2px var(--red)} /* Conteúdo */ .content-page .section-heading .btn{margin-left:0} .content-grid2{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start} .nav-pair{display:flex;gap:6px;align-items:center;margin-left:auto;font-size:11px;color:#6b6f76} .nav-arrow{width:28px;height:28px;border:1px solid #dfe6ed;border-radius:7px;background:white;cursor:pointer} .editorial-week{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:8px;margin-top:14px} .ed-day{min-height:380px;border:1px solid #e3e8ed;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;cursor:pointer} .ed-day:hover{background:#fbfcff} .ed-day.today{border-color:#b9c9ff} .ed-day>small{font-size:10px;color:#6b6f76;font-weight:500} .ed-item{display:grid;gap:5px;justify-items:start;padding:8px;border:1px solid #eef1f3;border-radius:8px;background:white;text-align:left;cursor:pointer;font:inherit} .ed-item b{font-size:12px;font-weight:500}.ed-item small{font-size:9px;color:#777} .up-row{width:100%;display:flex;gap:10px;align-items:center;padding:10px 4px;border:0;border-bottom:1px solid #f0f2f4;background:none;text-align:left;cursor:pointer;font:inherit} .up-row>span:nth-child(2){flex:1;display:grid} .up-row b{font-size:12px;font-weight:500}.up-row small{font-size:10px;color:#777} .up-row em{font-style:normal;font-size:10px;color:var(--blue)} .dot-avatar{width:24px;height:24px;border-radius:50%;background:#e2e7ec;flex:none} .dot-avatar.blue{background:#cfdcff}.dot-avatar.green{background:#cdeedb}.dot-avatar.yellow{background:#ffe9a8}.dot-avatar.red{background:#ffd3d5} .sub-h{font-size:13px;font-weight:500;margin:18px 0 4px} /* Financeiro */ .finance-page{gap:16px} .fin-top{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:14px} .fin-balance{display:grid;align-content:start;gap:6px} .fin-title{display:flex;gap:8px;align-items:center} .fin-title b{font-size:14px;font-weight:500} .fin-balance strong{font-size:30px;font-weight:400;letter-spacing:-.5px;margin-top:6px} .fin-balance>small{font-size:11px;color:#6b6f76} .fin-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap} .fin-actions svg{width:14px} .fin-stat>div{display:flex;gap:10px;align-items:center;padding-bottom:10px;border-bottom:1px solid #eef1f3} .fin-stat>div>span:last-child{display:grid} .fin-stat small{font-size:10px;color:#6b6f76} .fin-stat b{font-size:18px;font-weight:400} .fin-stat p{font-size:11px;color:#6b6f76;margin:10px 0 0} .fin-ic{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--blue-soft);color:var(--blue)} .fin-ic svg{width:15px} .fin-ic.green{background:var(--green-soft);color:var(--green)}.fin-ic.red{background:var(--red-soft);color:var(--red)}.fin-ic.purple{background:var(--purple-soft);color:var(--purple)} .finance-page .spark{height:auto;border:0;padding:0;margin-top:12px;display:flex;gap:6px;align-items:end} .finance-page .spark i{width:16px;border-radius:3px;background:var(--blue-soft)} .finance-page .spark i.green{background:var(--green-soft)}.finance-page .spark i.red{background:var(--red-soft)}.finance-page .spark i.blue{background:#dfe7ff} .finance-page .wallet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .finance-page .wallet-card{min-height:auto;display:grid;gap:4px} .finance-page .wallet-card header{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center} .finance-page .wallet-card header span:nth-child(2){display:grid} .finance-page .wallet-card header b{font-size:13px;font-weight:500} .finance-page .wallet-card header small{font-size:9px;color:#777} .finance-page .wallet-card>strong{font-size:20px;font-weight:400;margin-top:12px} .finance-page .wallet-card>small{font-size:10px} .empty-wallet{grid-column:1/-1;justify-items:start} .fin-mid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:14px} .plan-row{width:100%;display:flex;gap:12px;align-items:center;padding:14px;margin-top:10px;border:0;border-radius:9px;background:#f6f7f7;text-align:left;cursor:pointer;font:inherit} .plan-row>span:nth-child(2){flex:1;display:grid;gap:7px} .plan-row b{font-size:12px;font-weight:500}.plan-row small{font-size:10px;color:#777} .fin-stat.tall{display:grid;align-content:start;gap:6px} .fin-stat.tall b{font-size:22px} .fin-stat.tall p{margin:0;font-size:10px} .fin-charts{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:14px} .fin-overview .section-heading{flex-wrap:wrap} .year-bars{height:200px;display:flex;align-items:end;gap:10px;margin-top:20px} .year-bars>div{flex:1;height:100%;display:flex;align-items:end;justify-content:center;gap:4px;position:relative;padding-bottom:18px} .year-bars i{width:min(20px,40%);min-height:2px;border-radius:5px 5px 0 0;background:var(--green)} .year-bars i.blue{background:var(--blue)} .year-bars small{position:absolute;bottom:0;font-size:9px;color:#777} .split-boxes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0} .split-boxes>div{padding:14px;border-radius:8px;display:grid;gap:4px} .split-boxes .green{background:var(--green-soft)}.split-boxes .red{background:var(--red-soft)} .split-boxes small{font-size:10px}.split-boxes b{font-size:17px;font-weight:400} .cat-row{display:grid;grid-template-columns:8px 1fr auto auto;gap:10px;align-items:center;padding:9px 0;font-size:11px} .cat-row i{width:7px;height:7px;border-radius:50%;background:var(--blue)} .cat-row i.purple{background:var(--purple)}.cat-row i.yellow{background:var(--yellow)}.cat-row i.green{background:var(--green)}.cat-row i.coral{background:#ff7f83}.cat-row i.gray{background:#888} .cat-row b{font-weight:400} .tx-table tbody tr{cursor:pointer} .tx-table tbody tr:hover{background:#fafbfc} .tx-table td.green{color:var(--green)}.tx-table td.red{color:var(--red)} /* Estratégia */ .strategy-page .section-heading .btn,.integrations-page .section-heading .btn{margin-left:0} .objective-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .objective-card header{display:flex;justify-content:space-between;align-items:center} .objective-card h3{font-size:16px;font-weight:500;margin:12px 0 6px} .objective-card>strong{display:block;font-size:20px;font-weight:500;margin-bottom:10px} .objective-card>strong.yellow{color:var(--yellow)} .kr-row{width:100%;display:flex;gap:12px;align-items:center;padding:10px;border:0;background:none;text-align:left;cursor:pointer;font:inherit;border-radius:8px} .kr-row:hover{background:#f7f8f8} .kr-row>span:nth-child(2){flex:1;display:grid} .kr-row b{font-size:12px;font-weight:500}.kr-row small{font-size:10px;color:#777} .kr-row em{font-style:normal;font-size:10px}.kr-row em.muted{color:#9e9e9e} .kr-ring{--p:0;width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--blue) calc(var(--p)*1%),#e3e8ec 0)} .kr-ring i{width:24px;height:24px;border-radius:50%;background:white;display:grid;place-items:center;font-style:normal;font-size:8px;color:#555} .add-kr{margin-top:8px} .prio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px} .prio-card{min-height:80px;display:grid;align-content:start;gap:8px;padding:16px;border:1px solid #dfe6ed;border-radius:9px;background:white;text-align:left;cursor:pointer;font:inherit} .prio-card b{font-size:13px;font-weight:500}.prio-card small{font-size:10px;color:#9e9e9e} /* Integrações */ .integration-grid2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .int-card{display:grid;gap:10px;align-content:start;justify-items:start;min-height:170px} .int-card header{display:flex;gap:12px;align-items:center} .int-card header span:last-child{display:grid} .int-card header b{font-size:14px;font-weight:500}.int-card header small{font-size:11px;color:#6b6f76} .int-logo{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;background:var(--blue-soft);color:var(--blue);font-weight:600} .int-card p{margin:0;font-size:11px;color:#8a8f94} @media(max-width:1250px){ .projects-page .project-grid,.objective-grid,.integration-grid2,.finance-page .wallet-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .pd-grid,.content-grid2,.fin-charts{grid-template-columns:1fr} .fin-top{grid-template-columns:repeat(3,1fr)}.fin-top>.fin-balance{grid-column:1/-1} .fin-mid{grid-template-columns:1fr 1fr}.fin-mid>.fin-plans{grid-column:1/-1} .folder-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:820px){ .proj-kpis{grid-template-columns:1fr 1fr} .pd-two,.stage-steps,.prio-grid{grid-template-columns:1fr} .editorial-week{overflow:auto;grid-template-columns:repeat(5,170px)} .fin-top,.fin-mid{grid-template-columns:1fr} .folder-grid{grid-template-columns:1fr 1fr} .wz-steps{grid-template-columns:1fr 1fr} .file-table,.tx-table{display:block;overflow:auto;white-space:nowrap} .inline-add{margin-left:0;width:100%}.inline-add input{flex:1;min-width:0} } @media(max-width:560px){ .projects-page .project-grid,.objective-grid,.integration-grid2,.finance-page .wallet-grid,.proj-kpis{grid-template-columns:1fr} .pd-cover{height:140px} } .wizard>header .pill{margin-right:64px;margin-top:4px} .wz-results b{font-size:13px;font-weight:500}