/* ============================================================
   tokens — tema claro de CRM
   ============================================================ */
:root {
  --bg: #f5f7fa;
  --sup: #ffffff;
  --sup-2: #fbfcfd;
  --painel: #f9fafb;
  --borda: #e4e8ef;
  --borda-forte: #d3dae4;
  --texto: #0f172a;
  --fraco: #667085;
  --fraco-2: #98a2b3;
  --acento: #2563eb;
  --acento-suave: #eff4ff;
  --forte: #12b76a;
  --compra: #32d583;
  --neutro: #f79009;
  --evitar: #f04438;
  --escuro: #0b1220;

  --raio: 14px;
  --raio-sm: 9px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
  --sidebar-l: 236px;
  --toque: 44px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font: 14px/1.55 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.3; }
p { margin: 0; }
a { color: var(--acento); text-decoration: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   estrutura
   ============================================================ */
.app { display: flex; min-height: 100vh; }

.shell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   sidebar
   ============================================================ */
.sidebar {
  width: var(--sidebar-l);
  flex: 0 0 var(--sidebar-l);
  background: var(--sup);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 18px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca { display: flex; align-items: center; gap: 10px; padding: 2px 6px; }

.marca-icone {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(150deg, #1d4ed8, #2563eb);
  color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  flex: 0 0 auto;
}

.marca-texto strong { display: block; font-size: 14px; }
.marca-texto small {
  display: block; font-size: 10px; color: var(--fraco-2);
  text-transform: uppercase; letter-spacing: .7px;
}

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--raio-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--fraco);
  border: 1px solid transparent;
  transition: background .14s ease, color .14s ease;
}

.nav-item:hover { background: var(--painel); color: var(--texto); }
.nav-item.ativo { background: var(--acento-suave); color: var(--acento); border-color: #d8e3ff; }
.nav-icone { width: 18px; text-align: center; font-size: 13px; flex: 0 0 auto; }

.sidebar-rodape {
  margin-top: auto;
  padding: 12px 6px 0;
  border-top: 1px solid var(--borda);
}

.sidebar-rodape p { font-size: 10px; color: var(--fraco-2); line-height: 1.6; }
.selo-fonte {
  display: inline-block; font-size: 9px; text-transform: uppercase;
  letter-spacing: .7px; color: var(--fraco-2); margin-bottom: 5px;
}

/* ============================================================
   topbar
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  min-height: 62px;
  background: var(--sup);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
}

.busca-wrap {
  flex: 1 1 260px;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 0 11px;
  height: 38px;
  transition: border-color .14s, box-shadow .14s;
}

.busca-wrap:focus-within {
  border-color: var(--acento);
  background: var(--sup);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.busca-icone { color: var(--fraco-2); font-size: 15px; }

.busca-wrap input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; outline: none;
  color: var(--texto); font-size: 13px; font-family: inherit;
}

.seletor-classe, .campo-select select {
  background: var(--sup);
  border: 1px solid var(--borda);
  color: var(--texto);
  border-radius: 10px;
  padding: 0 10px;
  height: 38px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.seletor-classe:hover, .campo-select select:hover { border-color: var(--borda-forte); }

.atualizar {
  background: var(--acento);
  border: 1px solid var(--acento);
  color: #fff;
  padding: 0 15px;
  height: 38px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s;
}

.atualizar:hover { background: #1d4ed8; }
.atualizar[disabled] { opacity: .6; cursor: progress; }

.status {
  font-size: 11px;
  color: var(--fraco);
  background: var(--painel);
  border: 1px solid var(--borda);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 330px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   workspace
   ============================================================ */
.workspace {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
}

.pagina-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pagina-topo h1 { font-size: 20px; letter-spacing: -.2px; }
.contador { font-size: 12px; color: var(--fraco); margin-top: 2px; font-variant-numeric: tabular-nums; }

.grade {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  grid-template-areas:
    "mapa tabela"
    "status tabela";
  align-items: start;
}

.card {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra);
}

.card-3d { grid-area: mapa; }
.card-tabela { grid-area: tabela; }
.card-status { grid-area: status; }

.card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card h2 { font-size: 14px; }
.card-sub { font-size: 11px; color: var(--fraco-2); margin-top: 2px; }

.pill {
  font-size: 9px; text-transform: uppercase; letter-spacing: .7px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--painel); border: 1px solid var(--borda);
  color: var(--fraco-2); white-space: nowrap;
}

/* mapa 3D */
.canvas3d {
  height: 340px;
  border-radius: 10px;
  background: var(--escuro);
  border: 1px solid #1e293b;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.canvas3d:active { cursor: grabbing; }

.cores {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding-top: 11px; font-size: 11px; color: var(--fraco);
}

.cor { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.cor[data-rec="COMPRA FORTE"] { background: var(--forte); }
.cor[data-rec="COMPRA"] { background: var(--compra); }
.cor[data-rec="NEUTRO"] { background: var(--neutro); }
.cor[data-rec="EVITAR"] { background: var(--evitar); }
.dica { color: var(--fraco-2); }

/* status */
.lista-status { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 8px; }
.lista-status li { font-size: 11px; color: var(--fraco); padding-left: 14px; position: relative; }
.lista-status li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--acento);
}
.lista-status b { color: var(--texto); font-weight: 600; }
.nota-legal { font-size: 10px; color: var(--fraco-2); border-top: 1px solid var(--borda); padding-top: 10px; }

/* ============================================================
   toolbar
   ============================================================ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 13px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--borda);
}

.campo-inline {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--fraco-2);
}

.campo-inline span { display: flex; gap: 5px; align-items: baseline; }
.campo-inline output { color: var(--texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.campo-inline input[type="range"] { width: 140px; accent-color: var(--acento); height: 20px; }

.chk { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fraco); white-space: nowrap; cursor: pointer; }
.chk input { accent-color: var(--acento); width: 15px; height: 15px; }

/* ============================================================
   tabela
   ============================================================ */
.tabela-cab, .linha {
  display: grid;
  grid-template-columns: 1.5fr .7fr .7fr .7fr .7fr 1.15fr;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
}

.tabela-cab {
  color: var(--fraco-2);
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: .6px;
  padding: 9px 10px;
  background: var(--painel);
  border-radius: 8px;
  margin-top: 10px;
}

.linha {
  padding: 10px;
  border-bottom: 1px solid #eef1f6;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .12s ease;
}

.linha:nth-child(even) { background: #fcfdfe; }
.linha:hover { background: var(--acento-suave); }
.linha .papel { font-weight: 600; letter-spacing: .1px; }

.badge {
  font-size: 10px; font-weight: 600;
  padding: 3px 7px; border-radius: 6px;
  text-align: center; white-space: nowrap;
}

.badge.COMPRA-FORTE { background: #e6f8ef; color: #05603a; }
.badge.COMPRA { background: #eafaf1; color: #027a48; }
.badge.NEUTRO { background: #fef6e7; color: #b54708; }
.badge.EVITAR { background: #fdecea; color: #b42318; }

.paginacao { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 14px; }

.paginacao button {
  background: var(--sup);
  border: 1px solid var(--borda);
  color: var(--texto);
  min-width: 34px; height: 34px;
  padding: 0 9px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.paginacao button:hover:not([disabled]) { border-color: var(--acento); color: var(--acento); }
.paginacao button[disabled] { opacity: .38; cursor: default; }
.paginacao button.atual { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }

/* ============================================================
   dossiê
   ============================================================ */
.dossie {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(760px, 100%);
  background: var(--sup);
  border-left: 1px solid var(--borda);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 24px 70px;
  z-index: 40;
  box-shadow: -24px 0 60px rgba(16, 24, 40, .16);
}

.dossie.oculto { display: none; }

.fechar {
  position: absolute; top: 14px; right: 16px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--fraco);
  font-size: 19px; line-height: 1;
  cursor: pointer;
}

.fechar:hover { color: var(--texto); border-color: var(--borda-forte); }

.dossie h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.3px; }
.dossie h3 { font-size: 13px; margin: 20px 0 9px; }
.dossie .sub { color: var(--fraco); font-size: 12px; margin-bottom: 14px; }

.placar { display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; flex-wrap: wrap; }
.placar .num { font-size: 42px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

.resumo {
  background: var(--painel);
  border-left: 3px solid var(--acento);
  padding: 11px 13px;
  font-size: 13px;
  margin-bottom: 16px;
  border-radius: 0 8px 8px 0;
}

.dossie-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
#radar { height: 290px; background: var(--escuro); border: 1px solid #1e293b; border-radius: 10px; }

.crit { margin-bottom: 12px; }
.crit .topo { display: flex; justify-content: space-between; font-size: 12px; gap: 10px; font-weight: 500; }
.crit .barra { height: 6px; background: #eef1f6; border-radius: 4px; overflow: hidden; margin: 5px 0; }
.crit .barra i { display: block; height: 100%; border-radius: 4px; }
.crit .exp { font-size: 11px; color: var(--fraco); }
.crit .formula { font-size: 10px; color: var(--fraco-2); font-family: ui-monospace, monospace; }

.status-otimo { background: var(--forte); }
.status-parcial { background: var(--neutro); }
.status-fraco { background: #f38744; }
.status-ruim { background: var(--evitar); }
.status-sem-dado { background: #cfd6e0; }

.alerta {
  border-left: 3px solid var(--evitar);
  background: #fef3f2;
  color: #912018;
  padding: 9px 11px;
  font-size: 12px;
  margin-bottom: 12px;
  border-radius: 0 8px 8px 0;
}

.melhora { font-size: 12px; color: var(--fraco); padding-left: 18px; }
.melhora li { margin-bottom: 5px; }

.fonte { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--fraco); margin-bottom: 12px; flex-wrap: wrap; }

.selo { font-size: 9px; padding: 3px 7px; border-radius: 5px; font-weight: 700; letter-spacing: .4px; }
.selo-vivo { background: #e6f8ef; color: #05603a; }
.selo-cache { background: #fef6e7; color: #b54708; }

.mini {
  background: var(--sup);
  border: 1px solid var(--borda);
  color: var(--texto);
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  min-height: 34px;
}

.mini:hover { border-color: var(--acento); color: var(--acento); }
.mini[disabled] { opacity: .55; cursor: progress; }
.mini.destaque { border-color: #c7d7fe; background: var(--acento-suave); color: var(--acento); font-weight: 600; }

.skeleton {
  height: 250px;
  margin-top: 16px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f1f4f8 25%, #e8edf4 37%, #f1f4f8 63%);
  background-size: 400% 100%;
  animation: brilho 1.4s ease infinite;
}

@keyframes brilho {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.ficha { border: 1px solid var(--borda); border-radius: 10px; padding: 11px 13px; margin-bottom: 16px; background: var(--sup-2); }
.ficha h4 { margin: 0 0 9px; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--fraco-2); }
.ficha dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 7px 16px; }
.ficha dl > div { display: flex; gap: 6px; font-size: 12px; }
.ficha dt { color: var(--fraco); min-width: 90px; }
.ficha dd { margin: 0; overflow-wrap: anywhere; }

.tabela-imoveis { font-size: 11px; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.tabela-imoveis .cab { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 7px 9px; background: var(--painel); color: var(--fraco-2); text-transform: uppercase; font-size: 9px; }
.tabela-imoveis .lin { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 6px 9px; border-top: 1px solid var(--borda); }

/* ============================================================
   projeção
   ============================================================ */
.projecao { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 80px; }
.projecao.oculto { display: none; }
.proj-shell { max-width: 1180px; margin: 0 auto; }

.proj-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.proj-ident h2 { margin: 0; font-size: 21px; letter-spacing: -.3px; }
.proj-ident .sub { color: var(--fraco); font-size: 12px; margin-top: 4px; }
.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.proj-tags .tag { font-size: 10px; padding: 3px 8px; border-radius: 6px; background: var(--sup); border: 1px solid var(--borda); color: var(--fraco); }
.proj-tags .tag-alerta { border-color: #fecdca; background: #fef3f2; color: #b42318; }
.proj-acoes { display: flex; align-items: center; gap: 8px; }
.proj-acoes .fechar { position: static; }

.proj-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 12px; }
.proj-presets button {
  background: var(--sup); border: 1px solid var(--borda); color: var(--fraco);
  padding: 8px 15px; border-radius: 999px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.proj-presets button:hover { border-color: var(--acento); color: var(--acento); }
.proj-presets button.ativo { background: var(--acento-suave); border-color: #c7d7fe; color: var(--acento); font-weight: 600; }
.proj-presets .dica { font-size: 11px; }

.proj-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--sup);
}

.proj-filtros label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--fraco-2);
}

.proj-filtros input[type="range"] { width: 100%; accent-color: var(--acento); }
.proj-filtros select { background: var(--sup); border: 1px solid var(--borda); color: var(--texto); padding: 9px; border-radius: 8px; font-size: 13px; font-family: inherit; }
.proj-filtros .out-forte { font-size: 15px; font-weight: 700; color: var(--texto); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.linha-input { display: flex; align-items: center; background: var(--sup); border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.linha-input:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.linha-input .prefixo { padding: 0 10px; font-size: 12px; color: var(--fraco); background: var(--painel); align-self: stretch; display: flex; align-items: center; }
.linha-input input { flex: 1; min-width: 0; background: none; border: 0; color: var(--texto); padding: 9px; font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums; outline: none; }

.chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.chips button { background: var(--painel); border: 1px solid var(--borda); color: var(--fraco); font-size: 10px; padding: 4px 8px; border-radius: 6px; cursor: pointer; text-transform: none; font-family: inherit; }
.chips button:hover { border-color: var(--acento); color: var(--acento); }

.switch-lbl { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 10px; text-transform: none !important; font-size: 12px !important; }
.switch { position: relative; width: 42px; height: 23px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; background: #dfe4ec; border-radius: 20px; transition: .16s; cursor: pointer; }
.switch i::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .16s; box-shadow: 0 1px 2px rgba(16,24,40,.2); }
.switch input:checked + i { background: var(--forte); }
.switch input:checked + i::after { transform: translateX(19px); }

.proj-erro { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 11px 13px; border-left: 3px solid var(--evitar); background: #fef3f2; color: #912018; font-size: 12px; border-radius: 0 8px 8px 0; flex-wrap: wrap; }
.proj-erro.oculto { display: none; }

.proj-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 16px 0; }
.proj-kpis .kpi { background: var(--sup); border: 1px solid var(--borda); border-left: 3px solid var(--borda-forte); border-radius: 10px; padding: 11px 13px; }
.proj-kpis .kpi.destaque { border-left-color: var(--acento); }
.proj-kpis .kpi.bom { border-left-color: var(--forte); }
.proj-kpis .kpi.ruim { border-left-color: var(--evitar); }
.proj-kpis .k { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .7px; color: var(--fraco-2); margin-bottom: 5px; }
.proj-kpis b { display: block; font-size: 23px; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.proj-kpis b small { font-size: 12px; font-weight: 400; color: var(--fraco); }
.proj-kpis .d { display: block; font-size: 10px; color: var(--fraco-2); margin-top: 4px; }

.proj-grafico { position: relative; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); }
.proj-grafico-topo { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px 0; font-size: 11px; color: var(--fraco); flex-wrap: wrap; }
.proj-grafico svg { display: block; width: 100%; height: 340px; cursor: ew-resize; touch-action: none; user-select: none; }
.proj-grafico svg:focus { outline: none; }
.proj-grafico svg .eixo { fill: var(--fraco-2); font-size: 12px; font-variant-numeric: tabular-nums; }

.proj-tip {
  position: absolute; transform: translate(-50%, -112%);
  background: var(--escuro); color: #e6edf3;
  border-radius: 8px; padding: 8px 11px;
  font-size: 11px; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 8px 24px rgba(16,24,40,.28);
  font-variant-numeric: tabular-nums; z-index: 3;
}
.proj-tip b { font-size: 12px; }
.proj-tip.oculto { display: none; }

.proj-historico { margin-top: 18px; }
.proj-historico .hist-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.proj-historico h4 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--fraco-2); }
.proj-historico .dica { font-size: 10px; }
.proj-historico .barras { display: flex; gap: 2px; align-items: flex-end; height: 106px; border-bottom: 1px solid var(--borda); padding-bottom: 1px; }
.proj-historico .barra-h { flex: 1; min-width: 4px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; background: none; border: 0; padding: 0; cursor: pointer; }
.proj-historico .barra-h i { display: block; width: 100%; height: var(--h); border-radius: 3px 3px 0 0; }
.proj-historico .barra-h.tem i { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.proj-historico .barra-h.vazia i { background: #e4e8ef; }
.proj-historico .barra-h:hover i { background: var(--acento); }
.proj-historico .barra-h span { font-size: 9px; color: var(--fraco-2); margin-top: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; height: 12px; }

.proj-calendario { margin-top: 18px; }
.proj-calendario h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--fraco-2); }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 6px; }
.cal-grid > div { background: var(--sup); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.cal-grid span { font-size: 10px; color: var(--fraco); text-transform: capitalize; }
.cal-grid b { font-size: 13px; font-variant-numeric: tabular-nums; }

.proj-nota { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.proj-nota .alerta { margin: 0; }

/* ============================================================
   responsivo — notebook
   ============================================================ */
@media (max-width: 1280px) {
  .grade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "mapa"
      "tabela"
      "status";
  }
  .canvas3d { height: 300px; }
}

/* ============================================================
   responsivo — celular e tablet pequeno
   ============================================================ */
@media (max-width: 1024px) {
  html { scroll-padding-top: 64px; }

  /* sidebar vira barra de abas inferior */
  .sidebar {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border-right: 0;
    border-top: 1px solid var(--borda);
    background: var(--sup);
    z-index: 30;
    box-shadow: 0 -2px 12px rgba(16, 24, 40, .07);
  }

  .marca, .sidebar-rodape { display: none; }

  .nav {
    flex-direction: row;
    flex: 1;
    gap: 0;
  }

  .nav-item {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    border: 0;
    border-radius: 0;
    font-size: 10px;
    font-weight: 500;
    color: var(--fraco);
    min-height: 56px;
  }

  .nav-item.ativo { background: var(--acento-suave); color: var(--acento); border: 0; }
  .nav-icone { font-size: 16px; width: auto; }

  .shell { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

  .topbar { padding: 10px 14px; gap: 8px; }
  .busca-wrap { flex: 1 1 100%; order: 1; height: 40px; }
  .seletor-classe { order: 2; flex: 1 1 0; height: 40px; }
  .atualizar { order: 3; flex: 1 1 0; height: 40px; }
  .status { order: 4; flex: 1 1 100%; max-width: none; text-align: center; }

  .workspace { padding: 14px; gap: 14px; }
  .pagina-topo h1 { font-size: 18px; }

  .card-3d { display: none; }
  .card { padding: 14px; box-shadow: none; }

  .toolbar { gap: 12px; }
  .campo-inline { flex: 1 1 100%; }
  .campo-inline input[type="range"] { width: 100%; height: 28px; }
  .campo-select { flex: 1; }
  .campo-select select { width: 100%; height: 40px; }
  .chk { min-height: 40px; }

  .tabela-cab { display: none; }

  .linha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 13px;
    margin-top: 10px;
    border: 1px solid var(--borda);
    border-radius: 11px;
    background: var(--sup);
    font-size: 14px;
  }

  .linha:nth-child(even) { background: var(--sup); }
  .linha span:nth-child(1) { grid-column: 1 / -1; font-size: 16px; }
  .linha span:nth-child(6) { grid-column: 1 / -1; }
  .linha span:nth-child(6) .badge { display: inline-block; font-size: 11px; padding: 4px 9px; }

  .linha span:nth-child(n+2):nth-child(-n+5)::before {
    display: block;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--fraco-2);
    margin-bottom: 3px;
  }

  .linha span:nth-child(2)::before { content: "score"; }
  .linha span:nth-child(3)::before { content: "P/L"; }
  .linha span:nth-child(4)::before { content: "P/VP"; }
  .linha span:nth-child(5)::before { content: "yield"; }

  .paginacao { justify-content: center; gap: 6px; }
  .paginacao button { min-width: 40px; height: 40px; }

  .dossie { padding: 20px 16px 90px; box-shadow: none; }
  .dossie-grid { grid-template-columns: 1fr; }
  #radar { height: 230px; }
  .tabela-imoveis .cab, .tabela-imoveis .lin { grid-template-columns: repeat(3, 1fr); }

  .projecao { padding: 16px 14px 90px; }
  .proj-grafico svg { height: 250px; }
  .proj-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .proj-kpis b { font-size: 19px; }
  .proj-filtros { grid-template-columns: 1fr; }
  .mini { min-height: 40px; padding: 9px 12px; }
}

@media (max-width: 420px) {
  .linha { grid-template-columns: 1fr; }
  .placar .num { font-size: 36px; }
  .proj-kpis { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   acessibilidade e movimento
   ============================================================ */
.nav-item:focus-visible,
.atualizar:focus-visible,
.mini:focus-visible,
.fechar:focus-visible,
.paginacao button:focus-visible,
.seletor-classe:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Refinamento visual: CRM financeiro futurista + temas
   ============================================================ */
:root {
  color-scheme: light;
  --bg: #f3f6fc;
  --sup: #ffffff;
  --sup-2: #f8faff;
  --painel: #f4f7fc;
  --borda: #dfe6f2;
  --borda-forte: #c8d4e6;
  --texto: #17233b;
  --fraco: #66758e;
  --fraco-2: #8795aa;
  --acento: #4263eb;
  --acento-suave: #edf1ff;
  --forte: #0dbb83;
  --compra: #35c98a;
  --neutro: #f2a93b;
  --evitar: #f05c73;
  --escuro: #0b1220;
  --sombra: 0 8px 26px rgba(35, 54, 92, .055);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080d18;
  --sup: #101827;
  --sup-2: #131e30;
  --painel: #0c1422;
  --borda: #25334a;
  --borda-forte: #344661;
  --texto: #e8efff;
  --fraco: #a0aec5;
  --fraco-2: #7d8da8;
  --acento: #7c9cff;
  --acento-suave: #17284a;
  --forte: #38d9a9;
  --compra: #4adea0;
  --neutro: #f6bd60;
  --evitar: #ff7185;
  --escuro: #060a12;
  --sombra: 0 12px 32px rgba(0, 0, 0, .22);
}
body { background: var(--bg); color: var(--texto); transition: background .2s ease, color .2s ease; }
.sidebar { background: var(--sup); border-color: var(--borda); }
.marca-icone { box-shadow: 0 5px 16px rgba(66, 99, 235, .28); }
.nav-item { min-height: 42px; }
.nav-item.ativo { border-color: color-mix(in srgb, var(--acento) 22%, transparent); }
.topbar { gap: 10px; box-shadow: 0 4px 18px rgba(15, 23, 42, .025); }
.busca-wrap, .seletor-classe, .campo-select select { border-radius: 12px; }
.busca-wrap input::placeholder { color: var(--fraco-2); }
.tema-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 12px; border: 1px solid var(--borda);
  border-radius: 11px; background: var(--sup-2); color: var(--texto);
  font: 600 12px/1 inherit; cursor: pointer; white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.tema-toggle:hover { border-color: var(--acento); transform: translateY(-1px); }
.tema-icone { font-size: 16px; line-height: 1; }
.atualizar { box-shadow: 0 5px 14px rgba(66, 99, 235, .2); border-radius: 11px; }
.workspace { width: 100%; max-width: 1800px; margin: 0 auto; }
.pagina-topo { align-items: center; }
.pagina-topo h1 { letter-spacing: -.035em; font-size: clamp(22px, 2vw, 30px); font-weight: 760; }
.card {
  border: 1px solid var(--borda); border-radius: 18px; background: var(--sup);
  box-shadow: var(--sombra); padding: 20px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: var(--borda-forte); }
.card-topo { gap: 16px; }
.card h2 { letter-spacing: -.015em; }
.toolbar { align-items: center; }
.linha { transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.linha:hover { border-color: color-mix(in srgb, var(--acento) 40%, var(--borda)); }
.badge { border-radius: 999px; }
input, select, button { accent-color: var(--acento); }
button, select, input { max-width: 100%; }
:root[data-theme="dark"] .linha,
:root[data-theme="dark"] .cal-grid > div { background: var(--sup-2); }
:root[data-theme="dark"] .barra-h.vazia i { background: #27364d; }
:root[data-theme="dark"] .proj-presets button,
:root[data-theme="dark"] .chips button { background: var(--sup-2); color: var(--texto); border-color: var(--borda); }
:root[data-theme="dark"] .proj-presets button.ativo { background: var(--acento-suave); color: var(--acento); }
:root[data-theme="dark"] .proj-grafico,
:root[data-theme="dark"] .proj-kpis > div,
:root[data-theme="dark"] .dossie-bloco { background: var(--sup-2); border-color: var(--borda); }
:root[data-theme="dark"] .tabela-imoveis .cab { background: var(--sup-2); }
:root[data-theme="dark"] .projecao,
:root[data-theme="dark"] .dossie { background: var(--bg); color: var(--texto); }
:root[data-theme="dark"] .proj-tip { background: #02050b; }
:root[data-theme="dark"] .nav-item.ativo { border-color: transparent; }
:root[data-theme="dark"] .status { background: var(--sup-2); border-color: var(--borda); }
@media (max-width: 1024px) {
  .topbar { position: relative; padding: 12px 14px; }
  .tema-toggle { order: 3; flex: 1 1 0; }
  .atualizar { order: 4; flex: 1 1 0; }
  .status { order: 5; }
  .workspace { padding: 14px 12px 18px; }
  .card { border-radius: 15px; padding: 15px; }
  .nav-item { min-height: 60px; }
}
@media (max-width: 560px) {
  .topbar { gap: 7px; }
  .busca-wrap { flex-basis: 100%; }
  .seletor-classe { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .tema-toggle, .atualizar { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 0 8px; }
  .tema-texto { font-size: 11px; }
  .status { font-size: 10px; }
  .pagina-topo { align-items: flex-start; }
  .pagina-topo h1 { font-size: 22px; }
  .card-topo { align-items: flex-start; flex-wrap: wrap; }
  .toolbar { align-items: stretch; }
  .toolbar > * { min-width: 0; }
  .dossie, .projecao { inset: 0; width: 100%; max-width: 100%; border-radius: 0; }
  .proj-topo { align-items: flex-start; }
  .proj-acoes { gap: 6px; }
  .proj-presets { flex-wrap: wrap; }
  .proj-presets button { flex: 1 1 28%; }
  .proj-grafico-topo { align-items: flex-start; flex-direction: column; }
  .proj-grafico svg { height: 210px; }
  .proj-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proj-kpis > div { min-width: 0; }
  .proj-kpis b { font-size: clamp(15px, 4.5vw, 20px); overflow-wrap: anywhere; }
  .tabela-imoveis { overflow-x: auto; }
}
@media (max-width: 360px) {
  .tema-icone { display: none; }
  .tema-toggle, .atualizar { font-size: 11px; }
  .proj-kpis { grid-template-columns: 1fr; }
}


/* ============================================================
   Dashboard fit-to-viewport, tabela com scroll interno e loading 3D
   ============================================================ */
@media (min-width: 1025px) {
  html, body { width: 100%; height: 100%; overflow: hidden; }
  .app { height: 100dvh; min-height: 0; overflow: hidden; }
  .sidebar { height: 100dvh; min-height: 0; overflow-y: auto; }
  .shell { height: 100dvh; min-height: 0; overflow: hidden; }
  .topbar { flex: 0 0 auto; }
  .workspace {
    height: calc(100dvh - 62px); min-height: 0; overflow: hidden;
    padding: 14px 18px 16px; gap: 12px;
  }
  .pagina-topo { flex: 0 0 auto; }
  .grade {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
    grid-template-columns: minmax(300px, .88fr) minmax(0, 1.25fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "mapa tabela" "status tabela";
    gap: 12px;
  }
  .card { min-width: 0; min-height: 0; padding: 16px; }
  .card-3d { display: flex; flex-direction: column; overflow: hidden; }
  .canvas3d { height: auto; min-height: 180px; flex: 1 1 auto; }
  .card-status { overflow: auto; }
  .card-tabela {
    display: flex; flex-direction: column; overflow: hidden;
    height: 100%; min-height: 0;
  }
  .toolbar { flex: 0 0 auto; }
  .tabela-cab { flex: 0 0 auto; }
  #linhas {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; scrollbar-gutter: stable;
    border-radius: 8px; scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent;
  }
  #linhas::-webkit-scrollbar { width: 9px; }
  #linhas::-webkit-scrollbar-thumb { background: var(--borda-forte); border: 2px solid transparent; background-clip: padding-box; border-radius: 99px; }
  .paginacao { flex: 0 0 auto; padding-top: 8px; margin-top: 0; }
  .linha { min-height: 43px; }
}

/* Gráfico de dispersão em painel visual próprio */
.card-3d {
  background: linear-gradient(145deg, var(--sup) 0%, var(--sup-2) 100%);
  border-color: color-mix(in srgb, var(--acento) 20%, var(--borda));
}
.card-3d .card-topo { flex: 0 0 auto; }
.canvas3d {
  position: relative; isolation: isolate;
  box-shadow: inset 0 0 36px rgba(40, 100, 190, .12), 0 8px 22px rgba(4, 12, 28, .10);
}
.card-3d .cores { flex: 0 0 auto; gap: 8px 12px; }

/* Botões com dimensões consistentes e paleta financeira */
.atualizar, .tema-toggle, .mini, .paginacao button,
.proj-presets button, .chips button {
  min-height: 42px; font-size: 13px; font-weight: 650;
}
.atualizar { background: #087f5b; border-color: #087f5b; box-shadow: 0 5px 14px rgba(8, 127, 91, .18); }
.atualizar:hover { background: #066b4c; }
.paginacao button.atual { background: #087f5b; border-color: #087f5b; }
:root[data-theme="dark"] .atualizar { background: #0b9b70; border-color: #0b9b70; }
:root[data-theme="dark"] .paginacao button.atual { background: #0b9b70; border-color: #0b9b70; }
.mini { padding: 8px 13px; }

/* Loader 3D para coleta de ativo e cálculo de projeção */
.loader3d-wrap {
  min-height: 220px; width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; padding: 24px 14px;
  text-align: center; border: 1px solid var(--borda); border-radius: 16px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--acento) 9%, var(--sup)) 0%, var(--sup-2) 72%);
  overflow: hidden;
}
.loader3d-wrap strong { font-size: 14px; color: var(--texto); }
.loader3d-wrap p { max-width: 360px; color: var(--fraco); font-size: 12px; }
.loader3d {
  width: 66px; height: 66px; position: relative; margin: 2px 0 8px;
  transform-style: preserve-3d; perspective: 240px; animation: loaderOrbit 4s linear infinite;
}
.loader3d span {
  position: absolute; inset: 7px; border: 2px solid #087f5b; border-radius: 12px;
  box-shadow: 0 0 15px rgba(8,127,91,.18), inset 0 0 12px rgba(8,127,91,.08);
}
.loader3d span:nth-child(1) { transform: rotateX(62deg) rotateZ(0deg); animation: loaderRingA 2s ease-in-out infinite; }
.loader3d span:nth-child(2) { border-color: #e0a126; transform: rotateY(62deg) rotateZ(45deg); animation: loaderRingB 2s ease-in-out infinite; }
.loader3d span:nth-child(3) { border-color: var(--acento); transform: rotateX(62deg) rotateY(62deg) rotateZ(90deg); animation: loaderRingC 2s ease-in-out infinite; }
.loader3d i { position: absolute; width: 11px; height: 11px; border-radius: 50%; left: 28px; top: 28px; background: #087f5b; box-shadow: 0 0 18px rgba(8,127,91,.65); }
.loader3d-track { width: min(260px, 80%); height: 4px; border-radius: 99px; background: var(--borda); overflow: hidden; margin-top: 4px; }
.loader3d-track i { display: block; height: 100%; width: 35%; border-radius: inherit; background: linear-gradient(90deg, #087f5b, #e0a126, var(--acento)); animation: loaderProgress 1.5s ease-in-out infinite; }
@keyframes loaderOrbit { to { transform: rotateY(360deg) rotateX(360deg); } }
@keyframes loaderRingA { 50% { transform: rotateX(80deg) rotateZ(90deg); } }
@keyframes loaderRingB { 50% { transform: rotateY(80deg) rotateZ(135deg); } }
@keyframes loaderRingC { 50% { transform: rotateX(35deg) rotateY(80deg) rotateZ(30deg); } }
@keyframes loaderProgress { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
:root[data-theme="dark"] .loader3d-wrap { background: radial-gradient(ellipse at center, #14283a 0%, var(--sup) 76%); }
@media (max-width: 1024px) {
  html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
  .app, .shell, .workspace { height: auto; min-height: 0; overflow: visible; }
  .card-tabela { display: flex; flex-direction: column; min-height: 0; }
  #linhas { overflow: visible; }
  .card-3d { display: none; }
  .loader3d-wrap { min-height: 190px; }
  .atualizar, .tema-toggle, .mini { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .loader3d, .loader3d span, .loader3d-track i { animation: none !important; }
}