:root{
  color-scheme: light dark;
  --bg:#f4f6fa; --panel:#ffffff; --border:#e2e6ee;
  --text:#12233F; --text-body:#33415c; --muted:#727c92;
  --sidebar-bg:#ffffff;
  --blue:#4C8FE0; --green:#3ECB7C; --warning:#eab308;
  --entrada:#0f9d63; --entrada-bg:#e7f8f0;
  --saida:#d64545; --saida-bg:#fdecec;
  --accent:#2F6EC4; --accent-hover:#2764B6;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sidebar-w: 232px;
}

@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0a0a0b; --panel:#17181c; --border:rgba(255,255,255,.09);
    --text:#f1f2f4; --text-body:#c6c9d0; --muted:#8a8f9a;
    --sidebar-bg:#131316;
    --entrada-bg:#10261d; --saida-bg:#2b1717;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"]{
  --bg:#0a0a0b; --panel:#17181c; --border:rgba(255,255,255,.09);
  --text:#f1f2f4; --text-body:#c6c9d0; --muted:#8a8f9a;
  --sidebar-bg:#131316;
  --entrada-bg:#10261d; --saida-bg:#2b1717;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --bg:#f4f6fa; --panel:#ffffff; --border:#e2e6ee;
  --text:#12233F; --text-body:#33415c; --muted:#727c92;
  --sidebar-bg:#ffffff;
  --entrada-bg:#e7f8f0; --saida-bg:#fdecec;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}

* { box-sizing: border-box; }

body{
  margin:0; background:var(--bg); color:var(--text-body);
  font-family:"Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ color:var(--text); }
h1{ margin:0; font-size:1.35rem; font-weight:700; letter-spacing:-0.01em; }
h2{ margin:0 0 1rem; font-size:1.02rem; font-weight:700; }
h3{ margin:0; font-size:.9rem; font-weight:700; }

[hidden]{ display:none !important; }

/* ---------- Login ---------- */
.login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }

/* Tela de carregamento (cobre tudo até o app ficar pronto) */
.loading-screen{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.loading-screen[hidden]{ display:none; }
.loading-box{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.loading-brand{ justify-content:center; }
.loading-brand .mark{ width:44px; height:44px; font-size:1.15rem; border-radius:12px; }
.loading-spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--blue); animation:hub-spin .8s linear infinite; }
@keyframes hub-spin{ to{ transform:rotate(360deg); } }
.loading-text{ color:var(--muted); font-size:.88rem; margin:0; }
.login-card{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  padding:2.1rem 2.2rem; width:100%; max-width:360px; display:flex; flex-direction:column; gap:1.1rem;
}
.login-brand{ justify-content:center; margin-bottom:.5rem; }
.login-brand h1{ font-size:1.4rem; }
.login-card .form-footer{ flex-direction:column; align-items:stretch; gap:.6rem; }
.login-card button[type="submit"]{ align-self:stretch; }

/* ---------- Layout ---------- */
.sidebar{
  position:fixed; top:0; left:0; width:var(--sidebar-w); height:100vh;
  background:var(--sidebar-bg); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:1.3rem 1rem; gap:1.6rem; z-index:50;
}
.brand{ display:flex; align-items:center; gap:.6rem; padding:0 .4rem; }
.brand .mark{
  width:32px; height:32px; border-radius:9px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0;
}
.brand .name{ font-weight:700; font-size:1.05rem; letter-spacing:-0.01em; color:var(--text); }

.sidebar nav{ display:flex; flex-direction:column; gap:.15rem; }
.sidebar nav a.tab-btn{
  display:flex; align-items:center; gap:.65rem; padding:.62rem .7rem; border-radius:9px; color:var(--muted);
  text-decoration:none; font-size:.87rem; font-weight:600; border-left:2px solid transparent; cursor:pointer;
}
.sidebar nav a .ic{ width:18px; display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; }
.sidebar nav a .ic svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; }
.sidebar nav a.active{ background:rgba(76,143,224,.12); color:var(--text); border-left-color:var(--blue); }

.profile-card{
  margin-top:auto; display:flex; align-items:center; gap:.6rem; padding:.55rem; border-radius:11px;
  border:1px solid var(--border); background:transparent; cursor:pointer; text-align:left; width:100%;
}
.avatar{
  width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700;
  background-size:cover; background-position:center;
}
.avatar-lg{ width:64px; height:64px; font-size:1.3rem; }
.profile-card .who{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.profile-card .who b{ font-size:.82rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-card .who small{ color:var(--muted); font-size:.72rem; }

main{
  margin-left:var(--sidebar-w); padding:1.7rem clamp(1rem, 2.2vw, 2.4rem) 3rem; max-width:none;
  display:flex; flex-direction:column; gap:1.3rem; min-width:0;
}

.page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; }
.subtabs-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.page-sub{ color:var(--muted); font-size:.85rem; margin:.25rem 0 0; }
.page-actions{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.page-actions select{ min-width:0; }
.filters-dropdown-wrap{ position:relative; }
.filters-panel{
  position:absolute; top:calc(100% + .4rem); right:0; z-index:50; min-width:230px;
  background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow);
  padding:.8rem .9rem; display:flex; flex-direction:column; gap:.6rem;
}
.filters-panel label{ display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color:var(--muted); font-weight:500; }
.filters-panel select{ padding:.4rem .5rem; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--text); font-size:.85rem; }

.tab-panel{ display:flex; flex-direction:column; gap:1.25rem; }

.subtabs{ display:flex; gap:.4rem; background:var(--panel); border:1px solid var(--border); padding:.3rem; border-radius:10px; width:fit-content; }
.subtab-btn{ padding:.45rem 1.1rem; border:none; background:transparent; color:var(--muted); border-radius:7px; cursor:pointer; font-size:.87rem; font-weight:600; }
.subtab-btn.active{ background:var(--accent); color:#fff; }
.subtab-panel{ display:flex; flex-direction:column; gap:1.25rem; }

/* ---------- Cards / stats ---------- */
.card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:1.4rem 1.6rem; box-shadow:var(--shadow); }
.card-header{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem; }
.card-header h2{ margin:0; }

/* Filtros de período do Financeiro (topo) + categoria do extrato */
.fin-filters{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.fin-filters select,
.fin-filters input[type="date"],
.fin-filters input[type="month"],
.fin-filters input[type="week"]{ padding:.4rem .55rem; font-size:.85rem; border-radius:7px; }

.summary-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:1rem; }
.stat{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:1.05rem 1.15rem; box-shadow:var(--shadow); }
.stat .k{ font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.stat .v{ font-size:1.5rem; font-weight:700; margin-top:.35rem; color:var(--text); font-variant-numeric:tabular-nums; }

.summary-box{ border-radius:10px; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.35rem; background:var(--bg); }
.summary-box .label{ font-size:.8rem; color:var(--muted); font-weight:500; }
.summary-box .value{ font-size:1.4rem; font-weight:700; letter-spacing:-0.01em; }
.summary-box.entrada{ background:var(--entrada-bg); } .summary-box.entrada .value{ color:var(--entrada); }
.summary-box.saida{ background:var(--saida-bg); } .summary-box.saida .value{ color:var(--saida); }
.summary-box.previsao{ background:rgba(76,143,224,.08); } .summary-box.previsao .value{ color:var(--blue); }

/* Previsão de entrada (Fase 3) - lista compacta que cabe no layout, sem rolar pro lado */
.previsao-total-label{ font-size:.85rem; color:var(--muted); font-weight:600; }
.previsao-list{ display:flex; flex-direction:column; }
.previsao-row{ display:flex; align-items:center; gap:.6rem .75rem; padding:.55rem .1rem; border-bottom:1px solid var(--border); font-size:.85rem; flex-wrap:wrap; }
.previsao-row:last-child{ border-bottom:none; }
.previsao-row .prev-data{ color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; width:5rem; }
.previsao-row .prev-nomes{ display:flex; flex-direction:column; min-width:0; flex:1 1 140px; }
.previsao-row .prev-cliente{ color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.previsao-row .prev-projeto{ color:var(--muted); font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.previsao-row .prev-valor{ font-weight:700; color:var(--green); font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; margin-left:auto; }
.sit-badge{ font-size:.68rem; font-weight:700; padding:.15rem .5rem; border-radius:999px; white-space:nowrap; flex-shrink:0; }
.sit-badge.sit-previsto{ background:rgba(76,143,224,.15); color:var(--blue); }
.sit-badge.sit-recebido{ background:rgba(62,203,124,.16); color:var(--green); }
.sit-badge.sit-atrasado{ background:rgba(214,69,69,.15); color:var(--saida); }

.overview-cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1.25rem; }
.overview-list{ display:flex; flex-direction:column; gap:.5rem; }
.overview-row{ display:flex; justify-content:space-between; align-items:center; padding:.5rem .1rem; border-bottom:1px solid var(--border); font-size:.85rem; }
.overview-row:last-child{ border-bottom:none; }
.overview-row .t{ color:var(--text); font-weight:600; }
.overview-row .m{ color:var(--muted); font-size:.78rem; }

.charts-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1.25rem; }
.chart-card{ display:flex; flex-direction:column; }
.chart-wrap{ position:relative; height:240px; }

.alerts-banner{ display:flex; flex-direction:column; gap:.6rem; }
.alert-item{ background:color-mix(in srgb, var(--warning) 8%, var(--panel)); border:1px solid color-mix(in srgb, var(--warning) 40%, var(--border)); border-radius:10px; padding:.9rem 1.1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; box-shadow:var(--shadow); }
.alert-item .alert-text{ font-size:.9rem; } .alert-item .alert-text strong{ display:block; margin-bottom:.15rem; }
.alert-actions{ display:flex; gap:.5rem; }
.alert-actions button{ padding:.4rem .9rem; border-radius:7px; border:1px solid var(--border); background:var(--bg); color:var(--text); cursor:pointer; font-size:.85rem; font-weight:600; }
.alert-actions button.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.alert-actions button.danger{ color:var(--saida); }

.btn-secondary{ padding:.6rem 1.2rem; background:transparent; color:var(--text); border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:.87rem; font-weight:600; }
.btn-secondary.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

.progress-bar{ height:12px; border-radius:6px; background:var(--bg); overflow:hidden; margin-bottom:.5rem; }
.progress-fill{ height:100%; background:var(--blue); border-radius:6px; transform-origin:left; animation:crescer var(--dur-lenta) var(--ease-saida) both; }
.progress-text{ font-size:.85rem; color:var(--muted); margin:0 0 1rem; }
.goal-breakdown{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:.6rem; margin-bottom:.75rem; }
.goal-breakdown .item{ background:var(--bg); border-radius:8px; padding:.6rem .7rem; font-size:.8rem; }
.goal-breakdown .item strong{ display:block; font-size:1rem; margin-top:.15rem; }
.suggestion-box{ background:var(--bg); border-radius:10px; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.6rem; }
.suggestion-hint{ font-size:.82rem; color:var(--muted); margin:0; }

.buckets-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.25rem; }
.bucket-total{ background:var(--bg); border-radius:10px; padding:1rem 1.1rem; margin-bottom:.75rem; }
.bucket-total .value{ font-size:1.6rem; font-weight:700; }
.bucket-total-row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:.75rem; }
.bucket-total-row > div{ background:var(--bg); border-radius:10px; padding:1rem 1.1rem; }
.bucket-total-row .label{ display:block; font-size:.8rem; color:var(--muted); font-weight:500; margin-bottom:.3rem; }
.bucket-total-row .value{ font-size:1.25rem; font-weight:700; }
.bucket-ledger{ display:flex; flex-direction:column; gap:.4rem; font-size:.82rem; max-height:180px; overflow-y:auto; }
.bucket-ledger-row{ display:flex; justify-content:space-between; padding:.35rem 0; border-bottom:1px solid var(--border); color:var(--muted); }
.transfer-form{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); gap:.75rem; }
.transfer-form button{ padding:.55rem 1.1rem; background:var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:600; font-size:.9rem; }

.checkbox-label{ flex-direction:row !important; align-items:center; gap:.5rem !important; font-size:.9rem !important; color:var(--text) !important; }
.checkbox-label input[type="checkbox"]{ width:16px; height:16px; }
.recurring-row{ align-items:center; }
.empty-hint{ color:var(--muted); font-size:.85rem; text-align:center; margin:.5rem 0 0; }

.receipt-preview{
  display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border:1px solid var(--border);
  border-radius:8px; background:var(--bg); font-size:.85rem; color:var(--text); margin-top:-.4rem;
}
.receipt-preview img{ width:36px; height:36px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.receipt-preview span:first-of-type{ font-size:1.3rem; flex-shrink:0; }
.receipt-preview #receipt-preview-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; }
.receipt-preview button{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:.9rem; flex-shrink:0; }
.receipt-preview button:hover{ color:var(--saida); }
.receipt-link{ color:var(--blue); text-decoration:none; font-size:.85rem; white-space:nowrap; }
.receipt-link:hover{ text-decoration:underline; }

/* ---------- Forms ---------- */
form{ display:flex; flex-direction:column; gap:.9rem; }
.form-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.inline-form{ display:flex; flex-direction:row; flex-wrap:wrap; gap:.5rem; align-items:center; }
.inline-form input[type="text"]{ flex:2 1 140px; min-width:0; }
.inline-form input[type="date"]{ flex:1 1 110px; min-width:0; }
.inline-form select{ flex:1 1 110px; min-width:0; }
.inline-form button{ padding:.5rem .9rem; background:var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:700; flex-shrink:0; }

label{ display:flex; flex-direction:column; gap:.35rem; font-size:.82rem; color:var(--muted); font-weight:500; flex:1; min-width:140px; }
label.grow{ flex:2; }

input, select, textarea{
  padding:.55rem .7rem; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text);
  font-size:.95rem; font-family:inherit;
}
textarea{ resize:vertical; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--blue); }
input:disabled{ opacity:.65; }

.form-footer{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
button[type="submit"], #modal-file-upload-btn ~ button, .primary-btn{
  align-self:flex-start; padding:.65rem 1.5rem; background:var(--accent); color:#fff; border:none; border-radius:8px;
  cursor:pointer; font-size:.95rem; font-weight:600; transition:background .15s ease;
}
button[type="submit"]:hover, .primary-btn:hover, .inline-form button:hover, .transfer-form button:hover,
#add-task-btn:hover, #add-proposal-btn:hover, .dashboard-link-box button:hover{ background:var(--accent-hover); }
button[type="submit"]:disabled{ opacity:.6; cursor:not-allowed; }
.danger-btn{ padding:.55rem 1.1rem; background:transparent; color:var(--saida); border:1px solid var(--saida); border-radius:8px; cursor:pointer; font-weight:600; font-size:.87rem; }

.form-message{ font-size:.85rem; font-weight:500; }
.form-message.error{ color:var(--saida); }
.form-message.success{ color:var(--entrada); }

#add-task-btn, #add-proposal-btn{
  padding:.6rem 1.2rem; background:var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:700; font-size:.87rem;
}

/* ---------- Tabelas ---------- */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.9rem; }
th, td{ text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--border); white-space:nowrap; }
th{ color:var(--muted); font-weight:500; font-size:.8rem; text-transform:uppercase; letter-spacing:.02em; }
.row-saida td:nth-child(5){ color:var(--saida); font-weight:600; }
.row-entrada td:nth-child(5){ color:var(--entrada); font-weight:600; }
.delete-btn{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:.95rem; padding:.2rem .4rem; border-radius:5px; }
.delete-btn:hover{ color:var(--saida); background:var(--saida-bg); }

/* ---------- Kanban ---------- */
#tab-tarefas, #tab-propostas{ min-height:calc(100vh - 4.7rem); }
#subtab-tarefas-kanban{ flex:1; min-height:0; display:flex; flex-direction:column; }

.kanban{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 1fr); gap:1rem; overflow-x:auto; padding:.3rem .3rem .5rem;
  align-items:stretch; flex:1; min-height:0;
}
.kanban-col{ background:var(--panel); border:2px solid var(--border); border-radius:12px; padding:.85rem; display:flex; flex-direction:column; gap:.6rem; min-height:220px; overflow-y:auto; }
.kanban-col.drag-over{ border-style:dashed; border-color:var(--blue); }
.kanban-col.col-dragging{ opacity:.35; }
.kanban-col-head{ display:flex; justify-content:space-between; align-items:center; gap:.4rem; cursor:grab; }
.kanban-col-head .stage-grip{ color:var(--muted); font-size:.9rem; cursor:grab; flex-shrink:0; }
.kanban-col-head .stage-name{ font-size:.83rem; font-weight:700; color:var(--text); background:transparent; border:none; padding:.1rem; width:100%; }
.kanban-col-head .stage-name:focus{ outline:1px solid var(--blue); border-radius:4px; }
.kanban-col-head .n, .kanban-col-stats .n{ font-size:.68rem; color:var(--muted); background:var(--bg); padding:.15rem .5rem; border-radius:999px; border:1px solid var(--border); flex-shrink:0; }
.kanban-col-head .stage-delete{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:.85rem; flex-shrink:0; }
.kanban-col-head .stage-delete:hover{ color:var(--saida); }
.kanban-col.won .kanban-col-head .stage-name{ color:var(--green); }

.kanban-card{
  background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:.7rem .75rem;
  display:flex; flex-direction:column; gap:.4rem; cursor:grab; border-left:2.5px solid var(--blue);
  min-width:0; overflow:hidden;
}
.kanban-col.won .kanban-card{ border-left-color:var(--green); }
.kanban-card.dragging{ opacity:.4; }
.kanban-card .t{ font-size:.83rem; font-weight:600; color:var(--text); min-width:0; overflow-wrap:break-word; }
.kanban-card .meta{ display:flex; justify-content:space-between; align-items:center; gap:.4rem; min-width:0; }
.kanban-card .card-publisher{ display:flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:600; color:var(--text-body); background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:.2rem .45rem; width:fit-content; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-card .tags-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; }
.chip{ font-size:.66rem; padding:.12rem .45rem; border-radius:6px; font-weight:700; background:rgba(76,143,224,.14); color:var(--blue); white-space:nowrap; flex-shrink:0; }
.kanban-col.won .chip{ background:rgba(62,203,124,.16); color:var(--green); }
.chip.due-warning{ background:rgba(234,179,8,.18); color:var(--warning); }
.chip.due-danger{ background:rgba(214,69,69,.18); color:var(--saida); }
.chip-category{ background:rgba(14,124,123,.13); color:#0E7C7B; }
/* Orçamento publicado pelo cliente. O de valor fechado fica neutro porque é o caso
   comum (85% da Workana); o por hora ganha âmbar pra saltar aos olhos, já que é ele
   que estava sendo lido errado como projeto barato. */
.chip-orcamento{ background:var(--bg); color:var(--text-body); border:1px solid var(--border); }
.chip-orcamento.chip-hora{ background:rgba(234,179,8,.16); color:var(--warning); border-color:transparent; }
.kanban-col.won .chip-orcamento{ background:var(--bg); color:var(--text-body); }
.mini-avatar{ width:19px; height:19px; border-radius:50%; background:var(--panel); border:1px solid var(--border); color:var(--text); font-size:.58rem; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.card-value{ font-size:.78rem; font-weight:700; color:var(--text); }
.kanban-card .prog{ height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.kanban-card .prog i{ display:block; height:100%; background:var(--blue); }
.kanban-col.won .kanban-card .prog i{ background:var(--green); }
.kanban-card .checkpoints-list{ display:flex; flex-direction:column; gap:.15rem; padding-top:.15rem; border-top:1px solid var(--border); }
.kanban-card .checkpoint-row{ display:flex; align-items:baseline; gap:.35rem; font-size:.64rem; }
.kanban-card .checkpoint-row .cp-check{ flex-shrink:0; margin:0; width:11px; height:11px; }
.kanban-card .checkpoint-row .cp-title{ color:var(--text-body); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.kanban-card .checkpoint-row .cp-due{ color:var(--muted); flex-shrink:0; font-size:.6rem; margin-left:auto; }
.kanban-card .checkpoint-row .cp-due.due-warning{ color:var(--warning); font-weight:700; }
.kanban-card .checkpoint-row .cp-due.due-danger{ color:var(--saida); font-weight:700; }
.kanban-card .checkpoint-row.done .cp-title, .kanban-card .checkpoint-row.done .cp-due{ color:var(--muted); text-decoration:line-through; }

.link-with-button{ display:flex; gap:.5rem; align-items:stretch; }
.link-with-button input{ flex:1; min-width:0; }
.link-open-btn{ white-space:nowrap; text-decoration:none; display:flex; align-items:center; padding:.55rem 1rem; font-size:.87rem; }
.link-open-btn.is-disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }
.kanban-card .card-link-btn{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px;
  background:var(--bg); border:1px solid var(--border); color:var(--muted); text-decoration:none; font-size:.75rem; flex-shrink:0;
}
.kanban-card .card-link-btn:hover{ color:var(--blue); border-color:var(--blue); }
.card-stage-select{
  font-size:.72rem; padding:.3rem .4rem; border-radius:6px; border:1px solid var(--border); background:var(--panel);
  color:var(--text); cursor:pointer; width:100%;
}
.col-add{ font-size:.73rem; color:var(--muted); text-align:center; padding:.4rem; border:1px dashed var(--border); border-radius:7px; cursor:pointer; }

/* ---------- Subtarefas (visão em destaque) ---------- */
.subtarefas-list{ display:flex; flex-direction:column; gap:.6rem; }
.subtarefa-row{
  display:flex; align-items:flex-start; gap:.85rem; background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:.85rem 1rem; cursor:pointer; transition:border-color .15s ease;
}
.subtarefa-row:hover{ border-color:var(--blue); }
.subtarefa-row .cp-check{ margin-top:.3rem; width:16px; height:16px; flex-shrink:0; }
.subtarefa-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.subtarefa-title{ font-size:1rem; font-weight:700; color:var(--text); }
.subtarefa-due{ font-size:.8rem; color:var(--muted); }
.subtarefa-due.due-warning{ color:var(--warning); font-weight:700; }
.subtarefa-due.due-danger{ color:var(--saida); font-weight:700; }
.subtarefa-task-chip{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; max-width:320px; flex-shrink:0; }
.subtarefa-task-chip .chip{ min-width:0; max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.subtarefa-row.done .subtarefa-title, .subtarefa-row.done .subtarefa-due{ color:var(--muted); text-decoration:line-through; }

/* ---------- Calendário ---------- */
.calendar-head{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:1rem; }
.calendar-head h2{ margin:0; min-width:180px; text-align:center; }
.calendar-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:.4rem; }
.calendar-dow{ text-align:center; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; padding-bottom:.3rem; }
.calendar-day{
  min-height:84px; min-width:0; border:1px solid var(--border); border-radius:8px; padding:.35rem; background:var(--bg);
  display:flex; flex-direction:column; gap:.25rem; overflow:hidden;
}
.calendar-day.other-month{ opacity:.35; }
.calendar-day.today{ border-color:var(--blue); }
.calendar-day .day-num{ font-size:.72rem; font-weight:700; color:var(--muted); }
.calendar-day.today .day-num{ color:var(--blue); }
.calendar-task{
  font-size:.7rem; padding:.15rem .35rem; border-radius:5px; background:rgba(76,143,224,.14); color:var(--blue);
  cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; max-width:100%;
}

/* ---------- Clientes ---------- */
.clientes-filtros{ display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0 1.1rem; }
.clientes-filtros select{ padding:.45rem .6rem; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); font-size:.85rem; }
.clients-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:1rem; }

/* Clientes separados por status (15/08/2026). O container vira empilhamento de seções e cada
   seção mantém a grade de cards original. */
.clients-grid.grouped{ display:flex; flex-direction:column; gap:1.75rem; }
.clients-status-section{ display:flex; flex-direction:column; gap:.7rem; }
.clients-status-head{
  display:flex; align-items:center; gap:.5rem; margin:0;
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.clients-status-count{
  display:inline-grid; place-items:center; min-width:1.35rem; height:1.35rem; padding:0 .35rem;
  border-radius:999px; background:var(--border); color:var(--text-body);
  font-size:.72rem; font-weight:700; letter-spacing:0;
}
.clients-status-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:1rem; }
.status-dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--muted); flex:none; }
/* A bolinha do título da seção usa a MESMA cor do selo que aparece no card, senão o olho
   lê duas linguagens de cor pro mesmo status (15/08/2026). Ver .status-badge mais abaixo. */
.status-dot.status-iniciar{ background:var(--muted); }
.status-dot.status-executando{ background:var(--blue); }
.status-dot.status-finalizado{ background:var(--green); }
.status-dot.status-cancelado{ background:var(--saida); }
.client-card .name.sem-nome{ color:var(--muted); font-style:italic; font-weight:600; }
.client-card{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.2rem; box-shadow:var(--shadow); cursor:pointer; display:flex; flex-direction:column; gap:.5rem; transition:border-color .15s, transform .15s; }
.client-card:hover{ border-color:var(--blue); transform:translateY(-1px); }
.client-card .cc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
.client-card .name{ font-weight:700; color:var(--text); font-size:1rem; }
.client-card .cc-projeto{ font-size:.82rem; color:var(--text-body); }
.client-card .cc-tags{ display:flex; flex-wrap:wrap; gap:.35rem; }
.client-card .tipo-tag{ font-size:.68rem; font-weight:600; padding:.16rem .5rem; border-radius:6px; background:rgba(76,143,224,.12); color:var(--blue); border:1px solid rgba(76,143,224,.25); }
.client-card .cc-meta{ display:flex; flex-wrap:wrap; gap:.3rem .7rem; font-size:.76rem; color:var(--muted); }
.client-card .cc-resp{ display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--text-body); }
.client-card .meta{ font-size:.8rem; color:var(--muted); }
.client-card .val{ font-size:1.05rem; font-weight:700; color:var(--green); }

/* Selo de status (cliente e projeto) */
.status-badge{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.18rem .5rem; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.status-badge.status-iniciar{ background:rgba(114,124,146,.15); color:var(--muted); }
.status-badge.status-executando{ background:rgba(76,143,224,.15); color:var(--blue); }
.status-badge.status-finalizado{ background:rgba(62,203,124,.16); color:var(--green); }
.status-badge.status-cancelado{ background:rgba(214,69,69,.15); color:var(--saida); }

/* Detalhe do cliente (no lugar do pop-up) */
.detail-head{ align-items:center; }
.detail-head-left{ display:flex; align-items:center; gap:.8rem; min-width:0; flex:1; }
.detail-title-wrap{ display:flex; flex-direction:column; gap:.1rem; flex:1; min-width:0; }
.detail-title-label{ font-size:.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.detail-title-input{ border:none; background:transparent; font-size:1.35rem; font-weight:700; color:var(--text); padding:.1rem .2rem; flex:1; min-width:0; border-bottom:1px dashed transparent; }
.detail-title-input:hover{ border-bottom-color:var(--border); }
.detail-title-input:focus{ outline:none; border-bottom-color:var(--blue); }
.detail-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:1.3rem; margin-top:1rem; }
/* Respiro entre o grid (Dados/Projetos) e o card de Acessos logo abaixo (anexo 2). */
#cliente-detail-view > section.card{ margin-top:1.3rem; }

/* Cartão de projeto dentro do detalhe */
.projetos-list{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:1rem; }
.projeto-card{ background:var(--bg); border:1px solid var(--border); border-radius:11px; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.7rem; }
.projeto-top{ display:flex; align-items:center; gap:.6rem; }
.projeto-top .p-nome{ flex:1; min-width:0; font-weight:600; font-size:.95rem; border:1px solid transparent; background:transparent; color:var(--text); border-radius:6px; padding:.25rem .35rem; }
.projeto-top .p-nome:hover{ border-color:var(--border); }
.projeto-top .p-nome:focus{ outline:none; border-color:var(--blue); background:var(--panel); }
.projeto-progresso{ display:flex; flex-direction:column; gap:.3rem; }
.projeto-progresso .barra{ height:8px; border-radius:5px; background:var(--border); overflow:hidden; }
.projeto-progresso .preenchido{ height:100%; background:var(--green); border-radius:5px; transform-origin:left; animation:crescer var(--dur-lenta) var(--ease-saida) both; }
.projeto-progresso .progresso-label{ font-size:.75rem; color:var(--muted); }
.projeto-progresso.vazio{ font-size:.78rem; color:var(--muted); }
.link-inline{ color:var(--blue); font-weight:600; }
.projeto-campos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:.55rem .7rem; }
.projeto-campos label{ display:flex; flex-direction:column; gap:.2rem; font-size:.7rem; color:var(--muted); font-weight:600; }
/* display:flex acima venceria o atributo hidden; isto faz os campos condicionais
   (parcelas/recorrência) realmente sumirem quando marcados como hidden. */
.projeto-campos label[hidden]{ display:none; }
.projeto-campos input, .projeto-campos select{ padding:.35rem .45rem; border:1px solid var(--border); border-radius:7px; background:var(--panel); color:var(--text); font-size:.82rem; font-weight:400; }
.projeto-acoes{ display:flex; align-items:center; gap:.8rem; }
.projeto-acoes .p-salvar{ padding:.4rem .9rem; }
.danger-link{ background:none; border:none; color:var(--saida); cursor:pointer; font-size:.8rem; font-weight:600; padding:.2rem; }

/* Coleta de acessos (Fase 4): configuração do link no detalhe do cliente */
.coleta-config{ margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--border); }
.coleta-config h3{ margin:0; font-size:.92rem; }
#coleta-editor{ margin-top:.8rem; display:flex; flex-direction:column; gap:.7rem; }
#coleta-editor > label{ display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color:var(--muted); font-weight:600; }
#coleta-editor textarea{ padding:.5rem .6rem; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); font-size:.88rem; font-weight:400; resize:vertical; }
#coleta-campos{ display:flex; flex-direction:column; gap:.5rem; }
.coleta-campo-row{ display:flex; gap:.5rem; align-items:center; }
.coleta-campo-row .cc-sistema{ flex:1 1 45%; min-width:0; }
.coleta-campo-row .cc-url{ flex:1 1 45%; min-width:0; }
.coleta-campo-row input{ padding:.45rem .55rem; border:1px solid var(--border); border-radius:7px; background:var(--panel); color:var(--text); font-size:.85rem; }
.coleta-campo-remove{ background:none; border:none; color:var(--saida); cursor:pointer; font-size:.95rem; flex-shrink:0; }
.coleta-link-box{ background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.8rem .9rem; display:flex; flex-direction:column; gap:.6rem; }
.coleta-link-box > label{ display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color:var(--muted); font-weight:600; }
.coleta-link-row{ display:flex; gap:.5rem; align-items:center; }
.coleta-link-row input{ flex:1; min-width:0; padding:.45rem .55rem; border:1px solid var(--border); border-radius:7px; background:var(--panel); color:var(--text); font-size:.82rem; }
.coleta-link-box .danger-link{ align-self:flex-start; }

/* ---------- Tema (configurações) ---------- */
.theme-options{ display:flex; gap:.6rem; }
.theme-opt{ padding:.55rem 1.1rem; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); cursor:pointer; font-weight:600; font-size:.87rem; }
.theme-opt.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---------- Modais ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(8,10,14,.55); display:flex; align-items:center; justify-content:center; z-index:200; padding:1rem; }
.modal{ background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); width:100%; max-width:560px; max-height:94vh; overflow-y:auto; overflow-x:hidden; }
.modal-sm{ max-width:400px; }
.modal-lg{ max-width:820px; }
.import-preview-table{ width:100%; border-collapse:collapse; font-size:.82rem; }
.import-preview-table th{ text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--border); color:var(--muted); font-size:.72rem; text-transform:uppercase; }
.import-preview-table td{ padding:.4rem .5rem; border-bottom:1px solid var(--border); vertical-align:top; }
.import-preview-table tr.excluded{ opacity:.4; }
.import-preview-table select, .import-preview-table input[type="date"]{ font-size:.8rem; padding:.2rem .3rem; }
.import-preview-title{ max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.import-preview-new{ color:var(--green); font-size:.68rem; font-weight:700; }
.import-preview-warn{ color:#f59e0b; font-size:.7rem; }
.import-preview-checkpoints{ font-size:.72rem; color:var(--muted); }
button.danger{ padding:.65rem 1.5rem; background:var(--saida); color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:.95rem; font-weight:600; }
button.danger:disabled{ background:var(--border); color:var(--muted); cursor:not-allowed; }
.history-item{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.history-item .info{ font-size:.85rem; }
.history-item .info small{ display:block; color:var(--muted); margin-top:.1rem; }
.import-dropzone{
  margin-top:.9rem; border:2px dashed var(--border); border-radius:10px; padding:1.6rem 1rem;
  display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center;
  transition:border-color .15s ease, background .15s ease;
}
.import-dropzone p{ margin:0; }
.import-dropzone.dragover{ border-color:var(--blue); background:rgba(76,143,224,.08); }
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.2rem; border-bottom:1px solid var(--border); }
.modal-title-input{ border:none; background:transparent; font-size:1.05rem; font-weight:700; color:var(--text); padding:0; flex:1; }
.modal-title-input:focus{ outline:none; }
.modal-title-static{ font-size:1.05rem; font-weight:700; color:var(--text); }
.modal-close{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:1rem; }
.modal-body{ padding:1rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:.85rem; }
.modal-body textarea{ min-height:60px; }
.modal-section{ border-top:1px solid var(--border); padding-top:.8rem; display:flex; flex-direction:column; gap:.5rem; }
.modal-section-head{ display:flex; justify-content:space-between; align-items:center; }
.modal-footer{ border-top:1px solid var(--border); padding-top:1rem; display:flex; justify-content:flex-end; gap:.6rem; }

#modal-checkpoints-list.checkpoints-list{ display:flex; flex-direction:column; gap:.4rem; }
#modal-checkpoints-list .checkpoint-row{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; padding:.35rem 0; }
#modal-checkpoints-list .checkpoint-row.done .cp-title{ text-decoration:line-through; color:var(--muted); }
#modal-checkpoints-list .checkpoint-row .cp-title{ flex:1; color:var(--text); }
#modal-checkpoints-list .checkpoint-row .cp-due{ font-size:.72rem; color:var(--muted); }
#modal-checkpoints-list .checkpoint-row .cp-remove{ background:none; border:none; color:var(--muted); cursor:pointer; }
#modal-checkpoints-list .checkpoint-row .cp-remove:hover{ color:var(--saida); }

.files-list{ display:flex; flex-direction:column; gap:.4rem; }
.file-row{ display:flex; align-items:center; justify-content:space-between; font-size:.85rem; padding:.3rem 0; }
.file-row a{ color:var(--blue); text-decoration:none; }
.file-row a:hover{ text-decoration:underline; }
.file-row .file-remove{ background:none; border:none; color:var(--muted); cursor:pointer; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; top:1.2rem; right:1.2rem; background:var(--panel); border:1px solid var(--border);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow:var(--shadow); border-radius:8px; padding:.8rem 1.2rem;
  font-size:.9rem; font-weight:500; z-index:300; opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:all .2s ease; color:var(--text);
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.error{ border-color:color-mix(in srgb, var(--saida) 55%, var(--border)); background:color-mix(in srgb, var(--saida) 6%, var(--panel)); }
.toast.success{ border-color:color-mix(in srgb, var(--entrada) 55%, var(--border)); background:color-mix(in srgb, var(--entrada) 6%, var(--panel)); }

@media (max-width: 980px){
  .sidebar{ width:72px; padding:1.1rem .5rem; }
  .sidebar .name, .sidebar nav a span:not(.ic), .profile-card .who{ display:none; }
  main{ margin-left:72px; }
  .charts-row, .buckets-row{ grid-template-columns:1fr; }
  .overview-cols{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .summary-grid{ grid-template-columns:1fr 1fr; }
  .goal-breakdown, .bucket-total-row{ grid-template-columns:1fr; }
}

/* ---------- Funil de Propostas (Painel) ---------- */
.funnel{ display:flex; flex-direction:column; align-items:center; gap:0; }
.funnel svg{ width:100%; max-width:460px; height:auto; }
.funnel-band-label{ fill:#fff; font-size:13px; font-weight:700; }
.funnel-band-count{ fill:#fff; font-size:12px; font-weight:600; opacity:.9; font-variant-numeric:tabular-nums; }
.funnel-conversion{ font-size:.8rem; color:var(--muted); text-align:center; margin:.6rem 0 0; }

/* ---------- Acessos ---------- */
.muted-link{ color:var(--muted); text-decoration:none; font-size:.78rem; }
.muted-link:hover{ text-decoration:underline; }
.secret-cell{ display:inline-flex; align-items:center; gap:.4rem; font-family:monospace; }
.secret-toggle{ background:none; border:none; cursor:pointer; color:var(--muted); font-size:.85rem; padding:0; line-height:1; }
.secret-toggle:hover{ color:var(--text); }
.icon-btn{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:.9rem; }
.icon-btn:hover{ color:var(--saida); }
.table-actions{ text-align:right; white-space:nowrap; }
.obs-cell{ max-width:220px; white-space:normal; color:var(--text-body); font-size:.82rem; }

/* ---------- Dashboards (aba) ---------- */
.dashboard-client-picker{ display:flex; flex-direction:column; gap:.3rem; font-size:.82rem; font-weight:600; color:var(--muted); max-width:360px; margin-bottom:1.2rem; }
.dashboard-client-picker select{ padding:.6rem .7rem; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); font-size:.9rem; font-weight:500; }
#tab-dashboards .card{ margin-bottom:1.1rem; }

/* ---------- Métricas descobertas (upload + gerenciamento) ---------- */
.metric-defs-list{ display:flex; flex-direction:column; gap:.5rem; margin:.6rem 0; }
.metric-def-row{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border:1px solid var(--border);
  border-radius:9px; background:var(--bg); flex-wrap:wrap;
}
.metric-def-row.excluded{ opacity:.5; }
.metric-def-row .name{ flex:1; min-width:140px; display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; color:var(--text); }
.metric-def-row .name small{ font-weight:400; color:var(--muted); font-size:.72rem; }
.metric-def-row .badge-new{ font-size:.66rem; font-weight:700; color:var(--blue); background:rgba(76,143,224,.14); padding:.1rem .4rem; border-radius:5px; text-transform:uppercase; }
.metric-def-row select{ padding:.35rem .6rem; border:1px solid var(--border); border-radius:6px; background:var(--panel); color:var(--text); font-size:.78rem; }
.metric-def-row .agg-value{ font-size:.82rem; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; min-width:70px; text-align:right; }
.metric-def-selects{ display:flex; gap:.4rem; flex-wrap:wrap; }

.dashboard-link-box{ font-size:.85rem; color:var(--muted); }
.dashboard-link-box .link-row{ display:flex; align-items:center; gap:.5rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:.55rem .7rem; }
.dashboard-link-box .link-row input{ flex:1; border:none; background:transparent; color:var(--text); font-size:.82rem; }
.dashboard-link-box button{ padding:.4rem .8rem; background:var(--accent); color:#fff; border:none; border-radius:7px; cursor:pointer; font-size:.78rem; font-weight:600; flex-shrink:0; }

.metrics-upload-drop{
  display:flex; align-items:center; justify-content:center; text-align:center; padding:1.2rem;
  border:1.5px dashed var(--border); border-radius:10px; cursor:pointer; color:var(--muted); font-size:.85rem;
  margin:.5rem 0; background:var(--bg);
}
.metrics-upload-drop:hover{ border-color:var(--blue); color:var(--text); }
.metrics-match-info{ font-size:.76rem; color:var(--muted); margin:.5rem 0; display:flex; flex-direction:column; gap:.15rem; }
.metrics-match-info .no-match{ color:var(--saida); }

.metrics-history{ margin-top:1rem; }
.metrics-history table{ width:100%; border-collapse:collapse; font-size:.8rem; }
.metrics-history th, .metrics-history td{ text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--border); }
.metrics-history th{ color:var(--muted); font-weight:600; font-size:.72rem; text-transform:uppercase; }

/* Célula com botão de copiar (usuário e senha nos Acessos) */
.copy-cell { display: inline-flex; align-items: center; gap: 6px; }
.copy-btn { opacity: .55; transition: opacity .15s; }
.copy-btn:hover { opacity: 1; }
.secret-cell .copy-btn { margin-left: 2px; }

/* Nota do funil: quantas propostas ficaram de fora da contagem */
.funnel-note { margin-top: 4px; font-size: 12px; color: var(--muted); text-align: center; }

/* Acessos dentro do card do cliente: cada credencial num bloco com rótulos,
   em vez de tudo espremido numa linha só. */
.acesso-secao-acoes { display: flex; gap: 8px; }

.acesso-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface-2, transparent);
}
.acesso-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acesso-titulo { display: flex; align-items: center; gap: 8px; }
.acesso-acoes { display: flex; gap: 4px; flex-shrink: 0; }
.acesso-url { display: block; margin: 2px 0 8px; font-size: 12px; word-break: break-all; }

/* Rótulo com largura fixa alinha os valores em coluna, mesmo com textos de
   tamanhos diferentes. */
.acesso-campo { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.acesso-rotulo {
  flex: 0 0 84px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.acesso-valor { flex: 1; min-width: 0; word-break: break-word; }

/* Total em R$ no cabeçalho de cada coluna do kanban, ao lado da contagem */
/* Total da coluna com o mesmo formato de pílula da contagem, só que verde,
   pra ler como um par e não como dois elementos soltos. */
.kanban-col-head .col-total, .kanban-col-stats .col-total {
  font-size: .68rem; font-weight: 700; color: var(--green);
  background: var(--bg); padding: .15rem .5rem; border-radius: 999px;
  border: 1px solid var(--border); flex-shrink: 0; white-space: nowrap;
}

/* Contagem dos projetos por hora da coluna. Mesma pílula do total, em âmbar, porque
   fica ao lado dele e precisa ler como "isto aqui é de outra natureza", não como
   mais um dinheiro somado. */
.kanban-col-stats .col-hora {
  font-size: .68rem; font-weight: 700; color: var(--warning);
  background: var(--bg); padding: .15rem .5rem; border-radius: 999px;
  border: 1px solid var(--border); flex-shrink: 0; white-space: nowrap;
}

/* Quadro de Rejeitados: colunas fixas, sem renomear nem arrastar */
.rejeitado-col .stage-name-fixo { flex: 1; font-weight: 600; font-size: 13px; }
.rejeitado-card { cursor: default; }
.rejeitado-card .chip.motivo {
  background: rgba(239, 68, 68, .12);
  color: #f87171;
  font-size: 11px;
}

/* Cabeçalho da coluna em duas linhas: o nome ocupa a linha inteira e a contagem
   com o total vão embaixo. Antes disputavam espaço e o nome saía cortado
   ("Enviar propos", "Aguardando"). */
.kanban-col-stats { display: flex; align-items: center; gap: .4rem; margin: -.2rem 0 .1rem .2rem; }

/* Barra lateral retrátil: o toggle guarda a escolha e o conteúdo acompanha,
   senão sobraria uma faixa vazia à esquerda. */
.sidebar-toggle {
  margin-left: auto; background: none; border: 1px solid var(--border);
  color: var(--muted); border-radius: 6px; width: 22px; height: 22px;
  cursor: pointer; line-height: 1; flex-shrink: 0; font-size: .9rem;
}
.sidebar-toggle:hover { color: var(--text); border-color: var(--blue); }

body.sidebar-collapsed .sidebar { width: var(--sidebar-w-min, 62px); padding-left: .5rem; padding-right: .5rem; }
body.sidebar-collapsed .sidebar .brand .name,
body.sidebar-collapsed .sidebar nav a span:not(.ic),
body.sidebar-collapsed .profile-card .who,
body.sidebar-collapsed .profile-card .who { display: none; }
body.sidebar-collapsed .sidebar nav a { justify-content: center; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .sidebar .brand { justify-content: center; padding: 0; }
body.sidebar-collapsed .sidebar-toggle { position: absolute; top: 1.35rem; right: -11px; background: var(--sidebar-bg); }
body.sidebar-collapsed main { margin-left: var(--sidebar-w-min, 62px); }

/* Perfil na barra reduzida: só o avatar, centralizado. O seletor anterior
   continuava aparecendo espremido embaixo da foto. */
body.sidebar-collapsed .profile-card { justify-content: center; padding-left: 0; padding-right: 0; }

/* Motivo da rejeição usa o mesmo formato de chip dos outros cards */
.chip-motivo { background: rgba(239, 68, 68, .14); color: #f87171; }

/* Botão de mandar pro funil, discreto até o hover */
.btn-promover {
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 6px; padding: .1rem .4rem; font-size: .66rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.btn-promover:hover { color: var(--blue); border-color: var(--blue); }

/* Caixas de leitura do modal do candidato rejeitado */
.readonly-box {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: .6rem .75rem; font-size: .85rem; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
.readonly-box.descricao { max-height: 340px; overflow-y: auto; line-height: 1.5; }

/* Barra de busca de proposta por link */
.proposal-search { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap; }
.proposal-search input {
  flex: 1; min-width: 260px; padding: .5rem .7rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit;
}
.proposal-search input:focus { outline: 1px solid var(--blue); }
.form-message.ok { color: var(--green); }
.form-message.warn { color: #fbbf24; }

/* Funil como barras horizontais por etapa (substitui o SVG em triângulo) */
.funnel-bars { display: flex; flex-direction: column; gap: 0; }
.funnel-row { padding: .1rem 0; }
.funnel-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .25rem; }
.funnel-stage { font-size: .84rem; font-weight: 600; color: var(--text); }
.funnel-row-nums { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.funnel-row-nums b { color: var(--text); }
.funnel-track { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; height: 26px; overflow: hidden; }
/* Barra centrada: margin auto faz o preenchimento partir do meio e crescer para
   os dois lados conforme a porcentagem aumenta, em vez de sair da esquerda. */
.funnel-bar { height: 100%; margin: 0 auto; background: var(--blue); border-radius: 6px; min-width: 3px; transform-origin:center; animation:crescer var(--dur-lenta) var(--ease-saida) both; }
.funnel-bar.won { background: var(--green); }
/* Pílula escura semitransparente atrás da porcentagem, pra ela não se perder na
   cor do fundo quando a barra é curta. */
.funnel-bar-pct { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: .72rem; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); padding: .1rem .45rem; border-radius: 999px; }
.funnel-conv { font-size: .72rem; color: var(--muted); text-align: center; padding: .15rem 0; }
.funnel-conversion { margin-top: .7rem; text-align: center; font-size: .9rem; color: var(--text); }
.funnel-conversion b { color: var(--green); }

/* ============================================================
   Camada de movimento (15/08/2026)
   O André relatou cortes secos e sensação de travamento. Duas causas:
   1) quase nenhum elemento interativo tinha transição, então todo estado mudava
      de um quadro pro outro;
   2) toda ação faz PATCH + recarrega a lista inteira, e nada na tela avisava
      que havia algo em andamento.
   Aqui ficam os tokens de tempo/curva, as transições padrão e a barra de atividade.
   ============================================================ */
:root{
  --dur-rapida:120ms;
  --dur-media:220ms;
  --dur-lenta:340ms;
  --ease-saida: cubic-bezier(.16,1,.3,1);
  --ease-suave: cubic-bezier(.4,0,.2,1);
}

/* Barra fina de progresso no topo enquanto existe requisição em voo. */
.activity-bar{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--blue), var(--green));
  opacity:0; z-index:9999; pointer-events:none;
  transition:transform var(--dur-lenta) var(--ease-saida), opacity var(--dur-media) var(--ease-suave);
}
.activity-bar.ativa{ opacity:1; transform:scaleX(.85); }

/* Cursor de espera só depois de um tempinho, pra ação rápida não piscar o cursor. */
body.app-busy{ cursor:progress; }

/* Transições padrão dos elementos interativos. Só propriedades baratas de compor
   (cor, sombra, transform, opacidade), pra não custar layout. */
button, .btn-secondary, .primary-btn, .danger-btn, .danger-link,
.tab, .nav-item, .chip, .client-card, .proposal-card, .task-card, .card,
input, select, textarea, .status-badge, .tipo-tag{
  transition:
    background-color var(--dur-rapida) var(--ease-suave),
    border-color var(--dur-rapida) var(--ease-suave),
    color var(--dur-rapida) var(--ease-suave),
    box-shadow var(--dur-media) var(--ease-suave),
    transform var(--dur-rapida) var(--ease-saida),
    opacity var(--dur-rapida) var(--ease-suave);
}

button:active, .primary-btn:active, .btn-secondary:active, .danger-btn:active{ transform:translateY(1px); }
button:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

/* Foco visível e consistente para teclado. */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .client-card:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

.client-card:hover{ transform:translateY(-2px); }

/* Entrada suave das seções e cards renderizados por JS. */
@keyframes surgir{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@keyframes crescer{ from{ transform:scaleX(0); } }
.clients-status-section, .funnel-row{ animation:surgir var(--dur-media) var(--ease-saida) both; }

/* Modal e toast com entrada/saída suaves em vez de aparecer de uma vez. */
.toast{ transition:opacity var(--dur-media) var(--ease-suave), transform var(--dur-media) var(--ease-saida); }

/* Quem pediu menos movimento no sistema recebe menos movimento. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .activity-bar{ transition:opacity .01ms !important; }
}

/* Etapas do kanban que compõem cada banda do funil (15/08/2026). O kanban tem muitas etapas,
   então mostrar a composição evita que o agrupamento vire caixa-preta. */
.funnel-compoe{ font-size:.68rem; color:var(--muted); margin:.1rem 0 .3rem; line-height:1.35; }

/* Datas na miniatura do cliente (15/08/2026): fechamento e entrega, ou o selo de recorrente. */
.cc-datas{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.1rem; }
.cc-data{
  font-size:.7rem; color:var(--muted); background:var(--bg);
  border:1px solid var(--border); border-radius:6px; padding:.15rem .4rem; white-space:nowrap;
}
.cc-data b{ color:var(--text-body); font-weight:600; }
.cc-data.cc-recorrente{
  background:rgba(76,143,224,.14); border-color:rgba(76,143,224,.35); color:var(--blue); font-weight:700;
}
/* Caixa de seleção do projeto recorrente: alinha o texto com a caixa, sem virar coluna. */
.projeto-campos label.p-check{ flex-direction:row; align-items:center; gap:.45rem; }
.projeto-campos label.p-check input{ width:auto; margin:0; }


/* ============================================================
   TAREFAS (17/08/2026, terceira rodada: design)
   As duas primeiras versões acertaram a informação e erraram a forma. Aqui o alvo é
   respiro e silêncio: a tela mostra muita coisa, então quase tudo precisa ficar quieto
   pra o que importa aparecer.

   Três regras que guiam todo o bloco:
   1. Controle só ganha moldura quando o mouse chega nele. Campo com borda o tempo todo
      transforma uma lista de trabalho num formulário gigante.
   2. Uma cor por significado. Borda esquerda da linha = STATUS. Cor do prazo = URGÊNCIA.
      Cor da prioridade = ORDEM. Elas nunca disputam o mesmo pixel.
   3. Hierarquia por peso e tamanho, não por caixa. Quase não há borda interna: o que
      separa as coisas é espaço.
   ============================================================ */

/* ---- Faixa de foco ----
   Antes o rótulo e o número eram <span> dentro de .stat, que espera bloco: os dois
   colavam na mesma linha ("ATRASADAS0"). Agora o cartão é uma grade própria, com o
   número grande em cima e o rótulo embaixo, e a cor só aparece no número. */
.tar-foco{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:.6rem; margin-bottom:1.1rem;
}
.tar-foco-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:.1rem;
  padding:.75rem .95rem; cursor:pointer; text-align:left;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  transition:border-color .14s ease, background .14s ease, transform .14s ease;
}
.tar-foco-item:hover{ border-color:var(--blue); transform:translateY(-1px); }
.tar-foco-n{
  font-size:1.45rem; font-weight:700; line-height:1.1; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.tar-foco-k{
  font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted);
}
.foco-danger .tar-foco-n{ color:var(--saida); }
.foco-warning .tar-foco-n{ color:var(--warning); }
.foco-green .tar-foco-n{ color:var(--green); }
/* Zero não merece cor: pintar de vermelho um zero de atrasadas é alarme falso. */
.tar-foco-item.zerado .tar-foco-n{ color:var(--muted); opacity:.5; }
.tar-foco-item.ativo{ border-color:var(--blue); background:rgba(76,143,224,.07); box-shadow:inset 0 0 0 1px rgba(76,143,224,.25); }

/* ---- Barra de escopo e controles ---- */
.tar-n{
  display:inline-block; margin-left:.4rem; padding:.02rem .38rem; border-radius:999px;
  background:rgba(0,0,0,.10); font-size:.7rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.subtab-btn.active .tar-n{ background:rgba(255,255,255,.25); }
.tar-toolbar{ flex-wrap:wrap; gap:.45rem; align-items:center; }
.tar-toolbar select{ font-size:.8rem; }
.tar-busca{
  min-width:190px; padding:.42rem .7rem; border:1px solid var(--border); border-radius:9px;
  background:var(--panel); color:var(--text); font-size:.83rem;
}
.tar-busca:focus{ outline:none; border-color:var(--blue); }
.tar-toggle-concluidas{
  display:flex; align-items:center; gap:.35rem; font-size:.8rem;
  color:var(--muted); white-space:nowrap; cursor:pointer;
}

/* ---- Grupo ---- */
.tar-grupos{ display:flex; flex-direction:column; gap:.7rem; }
.tar-grupo{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow);
}
.tar-grupo-head{
  display:flex; align-items:center; gap:.55rem; padding:.7rem .95rem;
  cursor:pointer; position:sticky; top:0; z-index:3;
  background:var(--panel); transition:background .14s ease;
}
.tar-grupo-head:hover{ background:var(--bg); }
.tar-caret{ font-size:.62rem; color:var(--muted); transition:transform .16s ease; }
.tar-grupo.fechado .tar-caret{ transform:rotate(-90deg); }
.tar-grupo.fechado .tar-grupo-corpo{ display:none; }
.tar-grupo-nome{ font-weight:600; color:var(--text); font-size:.92rem; letter-spacing:-.005em; }
.tar-grupo-n{
  font-size:.7rem; font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.tar-atrasadas{
  font-size:.68rem; font-weight:700; color:var(--saida);
  background:rgba(214,69,69,.12); border-radius:999px; padding:.1rem .5rem;
}
.tar-prog{ margin-left:auto; width:64px; height:4px; background:var(--border); border-radius:99px; overflow:hidden; flex-shrink:0; }
.tar-prog i{ display:block; height:100%; background:var(--green); border-radius:99px; transform-origin:left; animation:crescer var(--dur-lenta) var(--ease-saida) both; }

.status-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.status-dot.st-iniciar{ background:#9aa3ae; }
.status-dot.st-executando{ background:var(--blue); }
.status-dot.st-aguardando{ background:var(--warning); }
.status-dot.st-concluido{ background:var(--green); }

/* ---- A tabela ----
   Grade declarada uma vez e usada pelo cabeçalho e pelas linhas: mexer numa mexe na
   outra, então elas nunca desalinham. */
.tar-cabecalho, .tar-linha{
  display:grid;
  grid-template-columns: 28px minmax(210px,1fr) 128px 40px 118px 96px 128px 116px minmax(130px,.85fr) 74px;
  align-items:center; gap:.5rem;
}
.tar-cabecalho{
  padding:.5rem .95rem .45rem; background:transparent;
  border-bottom:1px solid var(--border); position:sticky; top:44px; z-index:2;
  backdrop-filter:blur(6px);
}
.tar-cabecalho .tc{
  font-size:.63rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
}
.tar-linha{
  padding:.3rem .95rem; border-left:2px solid transparent; min-height:42px;
  transition:background .12s ease;
}
.tar-linha + .tar-linha{ box-shadow:inset 0 1px 0 rgba(128,128,128,.09); }
.tar-linha:hover{ background:var(--bg); }
.tar-linha.st-iniciar{ border-left-color:#9aa3ae; }
.tar-linha.st-executando{ border-left-color:var(--blue); }
.tar-linha.st-aguardando{ border-left-color:var(--warning); }
.tar-linha.st-concluido{ border-left-color:var(--green); }
.tar-linha.feita{ opacity:.5; }
.tar-linha.feita .tar-titulo{ text-decoration:line-through; }
.tc{ min-width:0; }
.tc-acoes{ display:flex; align-items:center; justify-content:flex-end; gap:.3rem; }
.tc-cliente, .tc-projeto{
  font-size:.76rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tc-projeto .vazio{ opacity:.35; }

/* ---- Faixa (segundo nível) ---- */
.tar-faixa{ padding:.1rem 0 .3rem; }
.tar-faixa-head{ display:flex; align-items:center; gap:.4rem; padding:.6rem .95rem .3rem; }
.tar-faixa-nome{
  font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.tar-faixa-n{ font-size:.66rem; font-weight:700; color:var(--muted); opacity:.7; font-variant-numeric:tabular-nums; }

/* ---- Célula: concluir ---- */
.tar-check{
  width:17px; height:17px; border-radius:50%; border:1.5px solid var(--border);
  background:transparent; cursor:pointer; color:transparent; font-size:.62rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.tar-check:hover{ border-color:var(--green); color:var(--green); }
.tar-linha.feita .tar-check{ background:var(--green); border-color:var(--green); color:#fff; }

/* ---- Célula: título, agora um botão que abre a tarefa ---- */
.tar-titulo{
  display:block; width:100%; text-align:left; border:0; background:transparent;
  color:var(--text); font-size:.845rem; font-weight:500; font-family:inherit;
  padding:.2rem 0; cursor:pointer; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .12s ease;
}
.tar-titulo:hover{ color:var(--blue); }
.tar-sub{ display:block; font-size:.65rem; color:var(--warning); }
.tar-sub.alerta{ color:var(--saida); font-weight:700; }

/* ---- Células editáveis: sem moldura até o mouse chegar ----
   É o que separa "lista de trabalho" de "formulário": o controle existe, mas fica
   invisível enquanto não é procurado. */
.tar-status, .tar-prio{
  width:100%; font-size:.68rem; font-weight:600; padding:.22rem .45rem;
  border-radius:7px; border:1px solid transparent; background:transparent;
  color:var(--muted); cursor:pointer; font-family:inherit;
  appearance:none; -webkit-appearance:none; text-align:left;
  transition:border-color .12s ease, background .12s ease;
}
.tar-status:hover, .tar-prio:hover{ border-color:var(--border); background:var(--panel); }
.tar-status:focus, .tar-prio:focus{ outline:none; border-color:var(--blue); background:var(--panel); }
.tar-status.st-executando{ color:var(--blue); }
.tar-status.st-aguardando{ color:var(--warning); }
.tar-status.st-concluido{ color:var(--green); }
.tar-prio.prio-alta{ color:var(--saida); font-weight:700; }
.tar-prio.prio-media{ color:var(--muted); }
.tar-prio.prio-baixa{ color:var(--muted); opacity:.55; }

.tar-prazo, .tar-obs{
  width:100%; border:1px solid transparent; background:transparent; color:var(--muted);
  font-size:.75rem; padding:.2rem .35rem; border-radius:7px; font-family:inherit;
  transition:border-color .12s ease, background .12s ease;
}
.tar-prazo:hover, .tar-obs:hover{ border-color:var(--border); background:var(--panel); }
.tar-prazo:focus, .tar-obs:focus{ outline:none; border-color:var(--blue); background:var(--panel); }
.tar-prazo.atrasada{ color:var(--saida); font-weight:700; }
.tar-prazo.hoje{ color:var(--warning); font-weight:700; }
.tar-obs{ text-overflow:ellipsis; }
.tar-obs::placeholder{ opacity:.3; }

.tar-avatar{
  width:21px; height:21px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg); color:var(--muted); font-size:.56rem; font-weight:700;
  cursor:pointer; padding:0; transition:border-color .12s ease, color .12s ease;
}
.tar-avatar:hover{ border-color:var(--blue); color:var(--blue); }
.tar-avatar.vazio{ border-style:dashed; opacity:.55; }
.tar-anexo{ font-size:.66rem; color:var(--muted); white-space:nowrap; }

/* ---- Criar por digitação ----
   Fica quase invisível até receber o foco, pra não competir com as tarefas reais. */
.tar-criar{ padding:.1rem .95rem .3rem 1.55rem; }
.tar-criar-solto{ padding:1rem 0 0; }
.tar-nova{
  width:100%; border:1px solid transparent; background:transparent; color:var(--text);
  font-size:.79rem; padding:.35rem .5rem; border-radius:8px; font-family:inherit;
  transition:border-color .12s ease, background .12s ease;
}
.tar-nova:hover{ border-color:var(--border); }
.tar-nova:focus{ border-color:var(--blue); outline:none; background:var(--panel); }
.tar-nova::placeholder{ color:var(--muted); opacity:.5; }

.tar-vazio{ text-align:left; }
.tar-sem-tarefas{ padding:1.6rem 0; color:var(--muted); }
.link-inline{ background:none; border:0; color:var(--blue); cursor:pointer; font:inherit; text-decoration:underline; padding:0; }

/* ---- Responsivo: some o contexto, fica a ação ---- */
@media (max-width: 1280px){
  .tar-cabecalho, .tar-linha{ grid-template-columns: 28px minmax(190px,1fr) 124px 40px 114px 92px 124px 64px; }
  .tar-cabecalho .tc-projeto, .tar-linha .tc-projeto,
  .tar-cabecalho .tc-obs, .tar-linha .tc-obs{ display:none; }
}
@media (max-width: 1020px){
  .tar-cabecalho, .tar-linha{ grid-template-columns: 28px minmax(160px,1fr) 120px 40px 112px 60px; }
  .tar-cabecalho .tc-prio, .tar-linha .tc-prio,
  .tar-cabecalho .tc-cliente, .tar-linha .tc-cliente{ display:none; }
}
@media (max-width: 720px){
  .tar-foco{ grid-template-columns:repeat(2,1fr); }
  .tar-cabecalho{ display:none; }
  .tar-linha{
    grid-template-columns: 24px 1fr auto;
    grid-template-areas: "check nome acoes" ". meta meta";
    row-gap:.2rem; padding:.55rem .8rem;
  }
  .tc-check{ grid-area:check; } .tc-nome{ grid-area:nome; } .tc-acoes{ grid-area:acoes; }
  .tc-status, .tc-resp, .tc-prazo, .tc-prio, .tc-cliente{ grid-area:meta; display:inline-flex; width:auto; }
  .tc-projeto, .tc-obs{ display:none; }
  .tar-status, .tar-prio{ width:auto; }
  .tar-titulo{ white-space:normal; }
}

/* Parceiros (20/08/2026): agência parceira vira status próprio. O selo é preenchido em navy,
   e não uma tinta clara como as etapas, porque "parceiro" é um tipo de cliente, não um ponto
   do ciclo iniciar → executando → finalizado. O cliente dela é um cliente comum; só mora
   dentro do card da agência em vez de na grade. */
.status-badge.status-parceiro{ background:var(--text); color:var(--panel); }
.status-dot.status-parceiro{ background:var(--text); }
.parceiro-clientes{ margin-bottom:1rem; }
.cliente-pai-crumb{ font-size:.78rem; color:var(--muted); padding:.25rem .6rem; border:1px dashed var(--border); border-radius:999px; white-space:nowrap; align-self:center; }

/* ============================================================
   Impeccable (21/08/2026): numeros, movimento e a lista do parceiro
   ============================================================ */
/* Numero alinha em coluna quando os algarismos tem a mesma largura. */
.val, .value, .stat .v, .summary-box .value, .pc-val, .cc-data, .tc-prazo, .agg-value, .tar-foco-n, .pc-resumo b{ font-variant-numeric:tabular-nums; }

/* Lista aparece como lista: cada card chega um tiquinho depois do anterior, com teto. */
.clients-status-grid > .client-card{ animation:surgir var(--dur-media) var(--ease-saida) both; animation-delay:calc(var(--i, 0) * 28ms); }
#cliente-detail-view:not([hidden]) .card{ animation:surgir var(--dur-media) var(--ease-saida) both; }

/* Troca lista ↔ detalhe com View Transitions: saida mais rapida que a entrada. */
::view-transition-old(root){ animation-duration:var(--dur-rapida); }
::view-transition-new(root){ animation-duration:var(--dur-media); animation-timing-function:var(--ease-saida); }

/* Clientes do parceiro: linhas, nao cards dentro de card. Resumo em cima, sem moldura;
   a hierarquia vem do peso e do espaco. */
.pc-resumo{ display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem; padding:.1rem 0 .95rem; margin-bottom:.35rem; border-bottom:1px solid var(--border); }
.pc-resumo:empty{ display:none; }
.pc-resumo div{ display:flex; flex-direction:column; gap:.1rem; }
.pc-resumo b{ font-size:1.2rem; font-weight:700; color:var(--text); line-height:1.1; }
.pc-resumo span{ font-size:.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.pc-lista{ display:flex; flex-direction:column; margin-bottom:.9rem; }
.pc-row{
  display:grid; grid-template-columns:30px minmax(0,1fr) auto auto 110px 14px; align-items:center; gap:.8rem;
  padding:.7rem .35rem; border-bottom:1px solid var(--border); cursor:pointer; border-radius:8px;
  transition:background var(--dur-rapida) var(--ease-suave);
  animation:surgir var(--dur-media) var(--ease-saida) both; animation-delay:calc(var(--i, 0) * 28ms);
}
.pc-row:last-child{ border-bottom:0; }
.pc-row:hover{ background:var(--bg); }
.pc-row:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pc-ini{ width:30px; height:30px; border-radius:50%; background:var(--bg); border:1px solid var(--border); display:grid; place-items:center; font-size:.72rem; font-weight:700; color:var(--text-body); }
.pc-nome{ font-weight:600; color:var(--text); font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-sub{ font-size:.76rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-val{ text-align:right; font-weight:700; color:var(--green); font-size:.92rem; }
.pc-val.vazio{ color:var(--muted); font-weight:500; }
.pc-chev{ color:var(--muted); font-size:1rem; line-height:1; }
.pc-row .cc-resp{ font-size:.78rem; }
@media (max-width:640px){
  .pc-row{ grid-template-columns:30px minmax(0,1fr) auto 14px; }
  .pc-row .cc-resp, .pc-row .pc-val{ display:none; }
}
.pc-nova{ width:100%; border:1px dashed var(--border); background:transparent; color:var(--text); font-size:.86rem; padding:.55rem .7rem; border-radius:8px; font-family:inherit; }
.pc-nova:focus{ border-style:solid; border-color:var(--accent); outline:none; background:var(--panel); }
.pc-nova::placeholder{ color:var(--muted); opacity:.7; }