/* AgroPipe — mockup web v3. Guia de estilo: Agropipe-vault/Marca/2026-10-16 Guia de estilo - referência ClickUp.
   Layout: barra lateral clara + cabeçalho fino + conteúdo denso; cores por papel; grade de 4 px.
   Marca: verde #0F4D2E, ouro #C9A962, grafite #212121, fundo #F5F6F4. */
:root {
  /* fundos */
  --fundo: #F5F6F4;
  --superficie: #FFFFFF;
  --sutil: #EEF0ED;
  --sutil-2: #E6E9E5;
  --lateral-fundo: #F0F2EF;
  /* texto */
  --texto: #212121;
  --texto-2: #575B57;
  --texto-3: #646964; /* ≥ 4,5:1 sobre --superficie, --fundo e --sutil */
  /* bordas */
  --linha: #E2E5E1;
  --linha-2: #CED3CD;
  --linha-fraca: #ECEEEB;
  /* destaque (escala trocável) */
  --destaque: #0F4D2E;
  --destaque-hover: #176A41;
  --destaque-txt: #0F4D2E;
  --destaque-medio: #2E8B57;
  --destaque-sutil: #E4EEE7;
  --destaque-bruma: #F0F5F1;
  --sobre-destaque: #FFFFFF;
  /* segunda cor */
  --ouro: #C9A962;
  --ouro-txt: #8C6D2C;
  --ouro-sutil: #F5EEDC;
  --sobre-ouro: #212121;
  /* semânticas */
  --ok: #1E7A46;
  --ok-sutil: #E4EEE7;
  --alerta: #A86A12;
  --alerta-sutil: #FBF0DC;
  --critico: #B42318;
  --critico-sutil: #FCE8E6;
  --contexto: #D8DCD7;
  /* papéis da equipe: administrador (verde da marca), gestor (ouro) e representante (azul-acinzentado) */
  --papel-admin: #0F4D2E; --papel-admin-sutil: #E4EEE7; --papel-admin-txt: #0F4D2E;
  --papel-gestor: #8C6D2C; --papel-gestor-sutil: #F5EEDC; --papel-gestor-txt: #8C6D2C;
  --papel-rep: #3E5C76; --papel-rep-sutil: #E7EDF3; --papel-rep-txt: #34506A;
  /* sombras: anel de 1 px no lugar de borda + 4 níveis */
  --anel: 0 0 0 1px rgba(33, 33, 33, .09);
  --e1: 0 1px 2px rgba(33, 33, 33, .06);
  --e2: 0 1px 3px rgba(33, 33, 33, .10), 0 1px 2px -1px rgba(33, 33, 33, .10);
  --e3: 0 4px 6px -1px rgba(33, 33, 33, .10), 0 2px 4px -2px rgba(33, 33, 33, .10);
  --e4: 0 12px 24px -6px rgba(15, 30, 20, .18), 0 6px 10px -6px rgba(15, 30, 20, .12);
  --sombra: var(--anel), var(--e1);
  --sombra-alta: var(--anel), var(--e4);
  /* forma e medida */
  --r-ctl: 6px;
  --r-painel: 8px;
  --r-cartao: 10px;
  --r-modal: 12px;
  --raio: var(--r-cartao);
  --raio-p: var(--r-painel);
  --lateral: 240px;
  --barra: 48px;
  --faixas: 0px; /* altura das faixas de demonstração e de "vendo como", medida pelo app.js */
  /* tipografia */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* nomes antigos usados no app.js */
  --verde: var(--destaque);
  --verde-claro: var(--destaque-sutil);
  --ouro-claro: var(--ouro-sutil);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #111311; --superficie: #191B19; --sutil: #232623; --sutil-2: #1E211E; --lateral-fundo: #151715;
    --texto: #EDEDEA; --texto-2: #B2B2AC; --texto-3: #90908A;
    --linha: #2D302D; --linha-2: #3A3E3A; --linha-fraca: #232623;
    --destaque: #20784A; --destaque-hover: #26804F; --destaque-txt: #6CC596; --destaque-medio: #4FB27C; --destaque-sutil: #16301F; --destaque-bruma: #132017; --sobre-destaque: #FFFFFF;
    --ouro: #D4B978; --ouro-txt: #D9BE7E; --ouro-sutil: #2E2716; --sobre-ouro: #1A1A1A;
    --ok: #4FB27C; --ok-sutil: #16301F; --alerta: #D9A246; --alerta-sutil: #33270F; --critico: #EA6152; --critico-sutil: #3A1814; --contexto: #3A3E3A;
    --papel-admin: #20784A; --papel-admin-sutil: #16301F; --papel-admin-txt: #6CC596; --papel-gestor: #B8923A; --papel-gestor-sutil: #2E2716; --papel-gestor-txt: #D9BE7E; --papel-rep: #5B7C99; --papel-rep-sutil: #1E2A36; --papel-rep-txt: #9DB7D0;
    --anel: 0 0 0 1px rgba(255, 255, 255, .08); --e1: 0 1px 2px rgba(0, 0, 0, .3); --e4: 0 12px 28px -6px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #111311; --superficie: #191B19; --sutil: #232623; --sutil-2: #1E211E; --lateral-fundo: #151715;
  --texto: #EDEDEA; --texto-2: #B2B2AC; --texto-3: #90908A;
  --linha: #2D302D; --linha-2: #3A3E3A; --linha-fraca: #232623;
  --destaque: #20784A; --destaque-hover: #26804F; --destaque-txt: #6CC596; --destaque-medio: #4FB27C; --destaque-sutil: #16301F; --destaque-bruma: #132017; --sobre-destaque: #FFFFFF;
  --ouro: #D4B978; --ouro-txt: #D9BE7E; --ouro-sutil: #2E2716; --sobre-ouro: #1A1A1A;
  --ok: #4FB27C; --ok-sutil: #16301F; --alerta: #D9A246; --alerta-sutil: #33270F; --critico: #EA6152; --critico-sutil: #3A1814; --contexto: #3A3E3A;
  --papel-admin: #20784A; --papel-admin-sutil: #16301F; --papel-admin-txt: #6CC596; --papel-gestor: #B8923A; --papel-gestor-sutil: #2E2716; --papel-gestor-txt: #D9BE7E; --papel-rep: #5B7C99; --papel-rep-sutil: #1E2A36; --papel-rep-txt: #9DB7D0;
  --anel: 0 0 0 1px rgba(255, 255, 255, .08); --e1: 0 1px 2px rgba(0, 0, 0, .3); --e4: 0 12px 28px -6px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo); color: var(--texto);
  font: 13px/1.45 var(--fonte);
  -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--destaque-medio); outline-offset: 2px; }
svg.ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
i[data-ico] { display: inline-flex; font-style: normal; }
.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: -.01em; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mudo { color: var(--texto-3); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- casca ---------- */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100dvh; transition: grid-template-columns .18s ease; }
.app.sem-transicao, .app.sem-transicao * { transition: none !important; }
.lateral {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 12px;
  background: var(--lateral-fundo); border-right: 1px solid var(--linha); padding: 12px 8px; overflow: hidden;
}
.lateral-topo { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 32px; }
.lateral-marca { display: flex; align-items: center; height: 32px; padding: 0 8px; min-width: 0; }
.lateral-logo { width: 112px; height: auto; display: block; }
.lateral-logo.escuro { display: none; }
.lateral-simbolo { display: none; width: 28px; height: auto; }
.lateral-recolher { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--r-ctl); background: none; color: var(--texto-3); }
.lateral-recolher:hover { background: var(--sutil); color: var(--texto); }
.lateral-recolher svg { transition: transform .18s ease; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lateral-logo.claro, :root:not([data-theme="light"]) .lateral-simbolo.claro { display: none; } :root:not([data-theme="light"]) .lateral-logo.escuro { display: block; } }
:root[data-theme="dark"] .lateral-logo.claro, :root[data-theme="dark"] .lateral-simbolo.claro { display: none; }
:root[data-theme="dark"] .lateral-logo.escuro { display: block; }
.lateral-conta { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; border-radius: var(--r-ctl); }
.lateral-conta:hover { background: var(--sutil); }
.conta-avatar { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--destaque); color: var(--sobre-destaque); font-weight: 700; font-size: 10.5px; flex: none; }
.conta-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.conta-txt b { font-size: 13px; font-weight: 600; }
.conta-txt span { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-secao { font-size: 12px; font-weight: 500; color: var(--texto-3); padding: 8px 8px 2px; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a, .nav-secundario {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 7px;
  color: var(--texto-2); font-weight: 500; font-size: 13.5px; border: 0; background: none; width: 100%; text-align: left; position: relative;
}
.nav a svg, .nav-secundario svg { color: var(--texto-3); }
.nav a span, .nav-secundario span, .conta-txt, .lateral-secao { white-space: nowrap; }
.nav a:hover, .nav-secundario:hover { background: var(--sutil); color: var(--texto); }
.nav a:active, .nav-secundario:active { background: var(--sutil-2); }
.nav a.ativo, .nav-secundario.ativo { background: var(--destaque-sutil); color: var(--destaque-txt); font-weight: 600; }
.nav a.ativo svg, .nav-secundario.ativo svg { color: var(--destaque-txt); }
.nav a .contador { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--texto-3); }
.nav a.ativo .contador { color: var(--destaque-txt); }
.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 1px; }
.nav-secundario { font-size: 13px; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: 0; z-index: 20; height: var(--barra); display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: var(--fundo); border-bottom: 1px solid var(--linha);
}
.territorio { display: flex; align-items: center; gap: 8px; min-width: 0; flex: none; }
.territorio.desabilitado { opacity: .5; }
.territorio.desabilitado .seg { cursor: not-allowed; }
.nota-escopo { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--texto-2); background: var(--sutil); border-radius: 999px; padding: 2px 8px 2px 6px; }
.nota-escopo svg { width: 12px; height: 12px; color: var(--texto-3); }

/* faixa de demonstração (fixa, abaixo do cabeçalho) */
.faixa-demo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; padding: 4px 24px; font-size: 12px; color: var(--texto-2); background: var(--sutil); border-bottom: 1px solid var(--linha); }
.faixa-demo svg { width: 13px; height: 13px; color: var(--alerta); flex: none; }
.faixa-demo-txt { min-width: 0; }
.faixa-demo-txt b { font-weight: 600; color: var(--texto); }
.faixa-demo .btn-texto { min-height: 0; font-size: 12px; margin-left: auto; }
.faixa-demo .btn { height: 24px; font-size: 12px; }
.faixa-demo.confirmando { background: var(--critico-sutil); }
.faixa-demo.confirmando svg { color: var(--critico); }
.faixa-demo .faixa-acoes { display: flex; gap: 6px; margin-left: auto; }
.territorio-rotulo { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-3); font-size: 12px; font-weight: 500; white-space: nowrap; }
.territorio-rotulo svg { width: 14px; height: 14px; }
.segmento { display: inline-flex; background: var(--sutil); border-radius: 7px; padding: 2px; gap: 2px; flex-wrap: nowrap; }
.seg { border: 0; background: none; height: 24px; padding: 0 10px; border-radius: 5px; font-size: 12.5px; font-weight: 500; color: var(--texto-2); white-space: nowrap; }
.seg:hover { color: var(--texto); }
.seg.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--anel), var(--e1); font-weight: 600; }
.segmento.pequeno .seg { height: 22px; padding: 0 8px; font-size: 12px; }
.busca { position: relative; margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 1 340px; min-width: 170px; height: 28px; padding: 0 4px 0 10px; background: var(--superficie); box-shadow: var(--anel), var(--e1); border-radius: 999px; color: var(--texto-3); }
.busca:focus-within { box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.busca input { border: 0; background: none; flex: 1; min-width: 0; color: var(--texto); font-size: 12.5px; }
.busca input:focus-visible { outline: 0; } /* o anel de foco fica no .busca:focus-within */
.busca input::-webkit-search-cancel-button { display: none; }
.atalho { font-size: 11px; color: var(--texto-3); background: var(--sutil); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.busca-resultados { position: absolute; top: 34px; left: 0; right: 0; background: var(--superficie); border-radius: var(--r-painel); box-shadow: var(--sombra-alta); padding: 4px; z-index: 30; max-height: 360px; overflow: auto; }
.busca-item { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--r-ctl); color: var(--texto); }
.busca-item:hover, .busca-item.foco { background: var(--sutil); }
.busca-item small { color: var(--texto-3); display: block; }
.busca-grupo { font-size: 11.5px; font-weight: 500; color: var(--texto-3); padding: 8px 8px 4px; }
.barra-acoes { display: flex; align-items: center; gap: 8px; }
.icone-btn { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-ctl); border: 0; background: none; color: var(--texto-2); }
.icone-btn:hover { background: var(--sutil); color: var(--texto); }
.ponto-aviso { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 2px var(--fundo); }
.usuario { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--destaque); color: var(--sobre-destaque); font-weight: 600; font-size: 11px; }

.conteudo { padding: 20px 24px 32px; min-width: 0; }
.conteudo.cheio { padding: 0; }

/* ---------- blocos comuns ---------- */
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cab-txt { min-width: 0; }
.sobretitulo { font-size: 12px; font-weight: 500; color: var(--texto-3); margin-bottom: 2px; }
.cab h1 { font-size: 20px; font-weight: 600; color: var(--texto); line-height: 1.25; }
.cab p { margin: 4px 0 0; color: var(--texto-2); max-width: 720px; font-size: 13px; }
.cab-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-ctl); border: 0; background: var(--superficie); box-shadow: var(--anel), var(--e1); font-weight: 500; font-size: 12.5px; color: var(--texto); white-space: nowrap; }
.btn:hover { background: var(--sutil); }
.btn svg { width: 14px; height: 14px; color: var(--texto-2); }
.btn-primario { background: var(--destaque); color: var(--sobre-destaque); box-shadow: none; }
.btn-primario svg { color: currentColor; }
.btn-primario:hover { background: var(--destaque-hover); color: var(--sobre-destaque); }
.btn-ouro { background: var(--ouro); color: var(--sobre-ouro); box-shadow: none; }
.btn-ouro svg { color: currentColor; }
.btn-ouro:hover { background: var(--ouro); filter: brightness(1.06); color: var(--sobre-ouro); }
.btn-p { height: 24px; padding: 0 8px; font-size: 12px; }
.btn-texto { border: 0; background: none; color: var(--destaque-txt); font-weight: 500; padding: 0; height: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; }
.btn-texto svg { width: 14px; height: 14px; }
.btn-texto:hover { text-decoration: underline; }

.cartao { background: var(--superficie); border-radius: var(--r-cartao); box-shadow: var(--sombra); padding: 16px; min-width: 0; }
.cartao-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cartao-cab h2 { font-size: 14px; font-weight: 600; }
.cartao-sub { margin: 2px 0 0; font-size: 12px; color: var(--texto-3); max-width: 560px; }
.grade { display: grid; gap: 16px; }
.grade > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
.mt { margin-top: 16px; }

/* atalhos entre as telas de prospecção (Oportunidades · Negociações · Mercado no mapa) */
.abas-visao { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--linha); margin: -4px 0 16px; overflow-x: auto; scrollbar-width: none; }
.abas-visao a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; font-size: 13px; font-weight: 500; color: var(--texto-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas-visao a svg { width: 14px; height: 14px; color: var(--texto-3); }
.abas-visao a:hover { color: var(--texto); }
.abas-visao a.ativo { color: var(--texto); font-weight: 600; border-bottom-color: var(--destaque); }
.abas-visao a.ativo svg { color: var(--destaque-txt); }
.abas-visao .abas-dica { margin-left: auto; font-size: 12px; color: var(--texto-3); white-space: nowrap; padding-left: 12px; }
.painel-lat .abas-visao { margin: -4px -16px 0; padding: 0 12px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { position: relative; background: var(--superficie); border-radius: var(--r-cartao); padding: 12px 14px; box-shadow: var(--sombra); min-width: 0; }
.kpi-rot { font-size: 12px; font-weight: 500; color: var(--texto-2); display: flex; align-items: center; gap: 6px; }
.kpi-rot svg { width: 14px; height: 14px; color: var(--texto-3); }
.kpi-val { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; color: var(--texto); line-height: 1.15; }
.kpi-val small { font-size: 13px; font-weight: 500; color: var(--texto-3); margin-left: 3px; }
.kpi-det { font-size: 12px; color: var(--texto-3); margin-top: 4px; }
/* trilhos de progresso (KPI, tabela, áreas do CAR, etapas da ficha): mesma altura, raio e cor */
.kpi-barra, .barrinha, .barrinha-l, .etapa, .progresso { height: 5px; border-radius: 999px; background: var(--sutil); overflow: hidden; }
.kpi-barra i, .barrinha i, .barrinha-l i, .progresso i { display: block; height: 100%; background: var(--destaque-medio); border-radius: 999px; }
.kpi-barra { margin-top: 10px; }
.kpi.destaque { box-shadow: 0 0 0 1px var(--ouro), var(--e1); }
.kpi.destaque .kpi-rot svg { color: var(--ouro-txt); }
.kpi.destaque .kpi-barra i { background: var(--ouro); }

/* chips, selos e etiquetas de etapa */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 11.5px; font-weight: 500; background: var(--sutil); color: var(--texto-2); white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }
.chip.verde { background: var(--destaque-sutil); color: var(--destaque-txt); }
.chip.ouro { background: var(--ouro-sutil); color: var(--ouro-txt); }
.chip.alerta { background: var(--alerta-sutil); color: var(--alerta); }
.chip.critico { background: var(--critico-sutil); color: var(--critico); }
.chip.contorno { background: none; box-shadow: inset 0 0 0 1px var(--linha-2); }
.etiqueta { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px 0 5px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; background: var(--sutil); color: var(--texto-2); }
.etiqueta .prog { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px currentColor; background: conic-gradient(currentColor calc(var(--p, 0) * 1%), transparent 0); }
.etiqueta.cheia { color: var(--sobre-destaque); }
.etiqueta.e-mapeado { background: none; box-shadow: inset 0 0 0 1px var(--linha-2); color: var(--texto-2); }
.etiqueta.e-contato { background: var(--destaque-sutil); color: var(--destaque-txt); }
.etiqueta.e-visita { background: var(--ouro-sutil); color: var(--ouro-txt); }
.etiqueta.e-proposta { background: var(--destaque); color: var(--sobre-destaque); }
.etiqueta.e-fechado { background: var(--ouro); color: var(--sobre-ouro); }
.etiqueta.e-perdido { background: var(--critico-sutil); color: var(--critico); }
.etiqueta.e-perdido .prog { box-shadow: inset 0 0 0 1.5px currentColor; background: none; }
.score { display: inline-flex; align-items: center; gap: 8px; }
.score-anel { --v: 50; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--destaque-medio) calc(var(--v) * 1%), var(--sutil) 0); position: relative; }
.score-anel::before { content: ""; position: absolute; inset: 3px; background: var(--superficie); border-radius: 50%; }
.score-anel b { position: relative; font-size: 10.5px; font-weight: 600; }
.score-anel.alto { background: conic-gradient(var(--ouro) calc(var(--v) * 1%), var(--sutil) 0); }

/* tabelas */
.tabela-wrap { overflow-x: auto; margin: 0 -16px -16px; border-top: 1px solid var(--linha); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-size: 12px; font-weight: 500; color: var(--texto-3); height: 34px; padding: 0 10px; background: var(--superficie); border-bottom: 1px solid var(--linha); white-space: nowrap; position: sticky; top: 0; }
.tabela th.num { text-align: right; }
.tabela th button { border: 0; background: none; padding: 0; font-weight: 500; color: inherit; display: inline-flex; gap: 4px; align-items: center; }
.tabela th button:hover { color: var(--texto); }
.tabela th button.ativo { color: var(--destaque-txt); font-weight: 600; }
.tabela td { height: 36px; padding: 4px 10px; border-bottom: 1px solid var(--linha-fraca); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tbody tr:hover { background: var(--sutil); }
.tabela th:first-child, .tabela td:first-child { padding-left: 16px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 16px; }
.cel-imovel { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cel-imovel b { font-weight: 500; font-size: 13.5px; white-space: nowrap; }
.cel-imovel .mono { color: var(--texto-3); }
.cel-imovel a:hover, .tabela td > b > a:hover { color: var(--destaque-txt); text-decoration: underline; }
.barrinha { display: inline-block; width: 48px; vertical-align: middle; margin-right: 8px; }

/* filtros (chips da barra de ferramentas) */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filtro { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; background: var(--superficie); box-shadow: var(--anel); border-radius: var(--r-ctl); font-size: 12.5px; color: var(--texto-2); }
.filtro svg { width: 14px; height: 14px; color: var(--texto-3); }
.filtro select, .filtro input { border: 0; background: none; font-weight: 600; color: var(--texto); }
.filtro select:focus-visible, .filtro input:focus-visible { outline: 0; }
.filtro:focus-within { box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.filtro select option { background: var(--superficie); color: var(--texto); }
.filtro input[type=range] { accent-color: var(--destaque-medio); width: 100px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); min-height: 28px; cursor: pointer; }
.check input { accent-color: var(--destaque-medio); width: 14px; height: 14px; margin: 0; }
.resumo-lista { margin-left: auto; font-size: 12.5px; color: var(--texto-3); }
.resumo-lista b { color: var(--texto); font-weight: 600; }

/* gráficos: SVG em px reais (o viewBox acompanha a largura medida do cartão), grade discreta, eixos limpos, números tabulares */
.grafico { position: relative; min-width: 0; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico text { font-family: var(--fonte); }
.grafico .g-num { font-variant-numeric: tabular-nums; }
.grafico .g-t1 { fill: var(--texto); }
.grafico .g-t2 { fill: var(--texto-2); }
.grafico .g-t3 { fill: var(--texto-3); }
.grafico .g-grade { stroke: var(--linha-fraca); stroke-width: 1; shape-rendering: crispEdges; }
.grafico .g-base { stroke: var(--linha-2); stroke-width: 1; shape-rendering: crispEdges; }
.grafico .g-guia { stroke: var(--texto-3); stroke-width: 1; opacity: .7; }
.grafico .g-trilho { opacity: .9; }
/* destaque de série ou de coluna: o resto esmaece */
.grafico [data-k], .grafico [data-i] { transition: opacity .15s ease; }
.grafico .g-fora { opacity: .28; }
.grafico .g-fora-i { opacity: .45; }
.grafico .g-alvo { outline: none; cursor: default; }
.grafico .g-alvo:focus-visible { outline: 2px solid var(--destaque-medio); outline-offset: -2px; border-radius: 4px; }
.grafico-vazio { margin: 8px 0 0; padding: 14px 12px; border-radius: var(--r-painel); background: var(--sutil); color: var(--texto-2); font-size: 12.5px; text-align: center; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--texto-2); margin-top: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; transition: opacity .15s ease; border-radius: 4px; }
.legenda span[data-k] { cursor: default; }
.legenda span[data-k]:focus-visible { outline: 2px solid var(--destaque-medio); outline-offset: 2px; }
.legenda span.fora { opacity: .4; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.legenda i.linha { width: 14px; height: 2px; border-radius: 1px; }
.legenda b { font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.legenda.compacta { font-size: 11.5px; gap: 2px 12px; margin-top: 6px; }
/* alternativa acessível: os números em tabela, recolhidos sob o gráfico */
.graf-dados { margin-top: 6px; }
.graf-dados summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--texto-3); min-height: 24px; padding: 0 2px; border-radius: 4px; }
.graf-dados summary::-webkit-details-marker { display: none; }
.graf-dados summary::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin: 0 3px 0 1px; transition: transform .15s; }
.graf-dados[open] summary::before { transform: rotate(45deg); }
.graf-dados summary:hover { color: var(--texto); }
.graf-dados-wrap { overflow-x: auto; margin-top: 4px; border-top: 1px solid var(--linha-fraca); }
.graf-tabela { font-size: 12px; }
.graf-tabela th, .graf-tabela td { height: 28px; padding: 0 8px; }
.graf-tabela th { position: static; }
.graf-tabela th:first-child, .graf-tabela td:first-child { padding-left: 2px; }
.graf-tabela th:last-child, .graf-tabela td:last-child { padding-right: 2px; }
.tip { position: fixed; z-index: 100; pointer-events: none; background: #212121; color: #FFFFFF; border-radius: var(--r-painel); padding: 8px 10px; font-size: 12px; line-height: 1.45; box-shadow: var(--e4); max-width: 280px; font-variant-numeric: tabular-nums; }
.tip b { font-weight: 600; }
.tip .tl { display: flex; justify-content: space-between; gap: 14px; }
.tip .tl span { color: rgba(255, 255, 255, .7); display: inline-flex; align-items: center; }
.tip .tl.forte span { color: #FFFFFF; }
.tip .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; flex: none; }

/* listas de ação */
.lista { display: flex; flex-direction: column; }
.lista-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha-fraca); min-width: 0; }
.lista-item:last-child { border-bottom: 0; }
a.lista-item:hover .lista-txt b { color: var(--destaque-txt); }
.lista-ico { width: 28px; height: 28px; border-radius: 7px; background: var(--destaque-bruma); color: var(--destaque-txt); display: grid; place-items: center; flex: none; }
.lista-ico.ouro { background: var(--ouro-sutil); color: var(--ouro-txt); }
.lista-ico svg { width: 14px; height: 14px; }
.lista-txt { flex: 1; min-width: 0; }
.lista-txt b { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-txt span { font-size: 12px; color: var(--texto-3); }
.lista-lado { text-align: right; font-size: 12px; white-space: nowrap; }
.lista-lado b { display: block; font-weight: 600; }

/* ---------- mercado (mapa cheio) ---------- */
.mercado { position: relative; height: calc(100dvh - var(--barra) - var(--faixas, 0px)); display: grid; grid-template-columns: 320px minmax(0, 1fr); }
.painel-lat { background: var(--superficie); border-right: 1px solid var(--linha); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.painel-lat h1 { font-size: 18px; font-weight: 600; }
.painel-lat .sub { font-size: 12px; color: var(--texto-3); margin-top: 2px; }
.bloco-titulo { font-size: 12px; font-weight: 500; color: var(--texto-3); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.mini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-kpi { background: var(--sutil); border-radius: var(--r-painel); padding: 8px 10px; min-width: 0; }
.mini-kpi span { font-size: 11.5px; color: var(--texto-3); font-weight: 500; }
.mini-kpi b { display: block; font-size: 17px; font-weight: 600; margin-top: 1px; }
.mini-kpi.ouro { background: var(--ouro-sutil); }
.camada { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13px; cursor: pointer; }
.camada input { accent-color: var(--destaque-medio); width: 14px; height: 14px; margin: 0; }
.camada .sw { width: 14px; height: 10px; border-radius: 3px; flex: none; }
.camada small { margin-left: auto; color: var(--texto-3); font-size: 11.5px; }
.rampa { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #e8f0fb, #86b6ef, #3987e5, #1c5cab, #0d366b); margin: 4px 0 4px 22px; }
.rampa-rot { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-3); margin-left: 22px; }
.mapa-area { position: relative; min-width: 0; overflow: hidden; } /* a gaveta fechada (deslocada para fora) não alarga a página */
.mapa { position: absolute; inset: 0; }
.mapa-flutua { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; gap: 8px; }
.mapa-flutua .segmento { background: var(--superficie); box-shadow: var(--sombra); }
.gaveta { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 360px; z-index: 6; background: var(--superficie); border-radius: var(--r-modal); box-shadow: var(--sombra-alta); display: flex; flex-direction: column; overflow: hidden; transform: translateX(calc(100% + 20px)); transition: transform .22s ease; }
.gaveta.aberta { transform: none; }
.gaveta-cab { padding: 14px 16px 10px; border-bottom: 1px solid var(--linha); display: flex; gap: 10px; align-items: flex-start; }
.gaveta-cab h3 { font-size: 15px; font-weight: 600; }
.gaveta-cab .mono { color: var(--texto-3); word-break: break-all; }
.gaveta-fechar { margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: var(--r-ctl); border: 0; background: none; display: grid; place-items: center; color: var(--texto-2); }
.gaveta-fechar:hover { background: var(--sutil); }
.gaveta-corpo { padding: 14px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.gaveta-pe { padding: 10px 16px; border-top: 1px solid var(--linha); display: flex; gap: 8px; }
.gaveta-pe .btn { flex: 1; justify-content: center; }
.linhas-dado { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13px; }
.linhas-dado span { color: var(--texto-3); }
.linhas-dado b { text-align: right; font-weight: 500; }
/* pilhas de composição (uso do solo, declividade, textura, etapas da campanha): mesma altura, raio e espaçador de 2 px */
.barra-pilha, .barra-uso, .barra-classes, .barra-etapas { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--sutil); }
.barra-pilha i, .barra-uso i, .barra-classes i, .barra-etapas i { display: block; height: 100%; min-width: 0; transition: opacity .15s ease; }
.barra-pilha:hover i:not(:hover) { opacity: .45; }
.destaque-ouro { background: var(--ouro-sutil); border-radius: var(--r-painel); padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.destaque-ouro svg { color: var(--ouro-txt); margin-top: 1px; }
.destaque-ouro b { display: block; font-size: 16px; font-weight: 600; }
.destaque-ouro.atrasada { background: var(--critico-sutil); }
.destaque-ouro.atrasada svg { color: var(--critico); }
.maplibregl-ctrl-group { border-radius: var(--r-painel) !important; box-shadow: var(--sombra) !important; }

/* ---------- pipeline (quadro) ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(264px, 1fr); grid-template-columns: repeat(5, minmax(264px, 1fr)) minmax(208px, .72fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.coluna { --tom: var(--linha-2); background: color-mix(in srgb, var(--tom) 9%, var(--fundo)); border-radius: var(--r-cartao); padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 240px; }
.coluna.alvo { outline: 2px dashed var(--destaque-medio); outline-offset: -2px; }
.coluna-cab { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; min-height: 26px; }
.coluna-cab .bola { display: none; }
.coluna-cab .qtd { font-size: 12px; font-weight: 500; color: var(--texto-3); }
.coluna-cab .soma { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.card-op { background: var(--superficie); border-radius: var(--r-cartao); padding: 10px 12px; box-shadow: var(--sombra); cursor: grab; display: flex; flex-direction: column; gap: 8px; }
.card-op:hover { box-shadow: var(--anel), var(--e3); }
.card-op.arrastando { opacity: .45; }
.card-op-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.card-op-top b { font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.card-op-top b a:hover { color: var(--destaque-txt); text-decoration: underline; }
.card-op-top .mono { color: var(--texto-3); display: block; font-family: var(--fonte); font-size: 12px; }
.card-op-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.card-op-pe { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-3); border-top: 1px solid var(--linha-fraca); padding-top: 8px; }
.card-op-pe .valor { margin-left: auto; font-weight: 600; color: var(--texto); font-size: 12.5px; }
.mini-avatar { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 600; color: #FFFFFF; flex: none; box-shadow: 0 0 0 2px var(--superficie); }
.acao-prox { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-2); }
.acao-prox svg { width: 13px; height: 13px; color: var(--texto-3); }
.acao-prox.atrasada, .acao-prox.atrasada svg { color: var(--critico); }

/* ---------- ficha (detalhe com painel de atividade) ---------- */
.migalha { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-3); margin-bottom: 12px; }
.migalha svg { width: 12px; height: 12px; }
.migalha a:hover { color: var(--destaque-txt); }
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0; margin: -20px -24px -32px; min-height: calc(100dvh - var(--barra) - var(--faixas, 0px)); }
.ficha-principal { padding: 20px 32px 40px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ficha-atividade { border-left: 1px solid var(--linha); background: var(--superficie); display: flex; flex-direction: column; min-width: 0; position: sticky; top: var(--barra); height: calc(100dvh - var(--barra) - var(--faixas, 0px)); }
.atv-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--linha); }
.atv-cab h2 { font-size: 14px; font-weight: 600; }
.atv-corpo { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.atv-pe { border-top: 1px solid var(--linha); padding: 10px 12px; }
.ficha-cab { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.ficha-tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-2); height: 24px; padding: 0 8px; border-radius: var(--r-ctl); box-shadow: var(--anel); margin-bottom: 10px; }
.ficha-tipo svg { width: 13px; height: 13px; }
.ficha-cab h1 { font-size: 28px; font-weight: 600; line-height: 1.25; }
.ficha-cab .mono { color: var(--texto-3); font-size: 12px; word-break: break-all; display: block; margin-top: 4px; }
.ficha-selos { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px; }
.ficha-cab .cab-acoes { margin-left: auto; }
.props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; }
.prop { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; min-height: 34px; gap: 8px; }
.prop-rot { display: flex; align-items: center; gap: 8px; color: var(--texto-3); font-size: 13px; }
.prop-rot svg { width: 15px; height: 15px; }
.prop-val { font-size: 13px; font-weight: 500; min-width: 0; }
.prop-val .vazio-txt { color: var(--texto-3); font-weight: 400; }
.secao-tit { font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.secao-tit .cartao-sub { font-weight: 400; margin: 0; }
.divisor { height: 1px; background: var(--linha); border: 0; margin: 0; }
.mapa-ficha { position: relative; height: 340px; border-radius: var(--r-cartao); overflow: hidden; box-shadow: var(--sombra); }
.etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin: 4px 0 6px; }
.etapa.feita { background: var(--destaque-medio); }
.etapa.atual { background: var(--ouro); }
.etapas-rot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; font-size: 11px; color: var(--texto-3); }
.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 14px; }
.tl-item::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 1px; background: var(--linha); }
.tl-item:last-child::before { display: none; }
.tl-ico { width: 24px; height: 24px; border-radius: 50%; background: var(--sutil); color: var(--texto-2); display: grid; place-items: center; }
.tl-ico svg { width: 12px; height: 12px; }
.tl-txt b { font-size: 13px; font-weight: 500; display: block; }
.tl-txt span { font-size: 11.5px; color: var(--texto-3); }
.tl-txt p { margin: 4px 0 0; font-size: 12.5px; color: var(--texto-2); }
.nota-nova { display: flex; gap: 8px; align-items: center; background: var(--fundo); border-radius: var(--r-painel); box-shadow: var(--anel); padding: 6px 6px 6px 10px; }
.nota-nova input { flex: 1; min-width: 0; height: 28px; border: 0; background: none; font-size: 13px; color: var(--texto); }
.nota-nova input:focus-visible { outline: 0; }
.nota-nova:focus-within { box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.bloqueado { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--linha-2); border-radius: var(--r-painel); font-size: 12.5px; color: var(--texto-2); flex-wrap: wrap; }
.bloqueado svg { color: var(--ouro-txt); flex: none; }
.bloqueado span { flex: 1; min-width: 200px; }
.bloqueado .btn { margin-left: auto; }
/* painel de atividade: alterar etapa e registrar atividade */
.atv-etapa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.atv-etapa .campo select { width: 100%; }
.perdido-motivo { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-painel); background: var(--critico-sutil); }
.perdido-motivo .campo input { background: var(--superficie); }
.perdido-motivo .sel-acoes .btn { flex: none; }
.encerrado { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-painel); background: var(--sutil); font-size: 12.5px; font-weight: 500; color: var(--texto-2); }
.encerrado.ganho { background: var(--ouro-sutil); color: var(--ouro-txt); }
.encerrado.perdido { background: var(--critico-sutil); color: var(--critico); }
.form-atv { display: flex; flex-direction: column; gap: 8px; }
.form-atv .campos-2 { margin-top: 0; gap: 8px; }
.form-atv .campo input, .form-atv .campo select { height: 30px; font-weight: 500; }
.form-atv-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.form-atv-pe .mudo { font-size: 11.5px; min-width: 0; }
.form-atv-tit { font-size: 12.5px; font-weight: 600; color: var(--texto); }
@media (min-width: 1181px) { .ficha-atividade .atv-pe { max-height: 52vh; overflow-y: auto; } }

/* ---------- modal / toast ---------- */
.modal-fundo { position: fixed; inset: 0; z-index: 90; background: rgba(10, 20, 14, .45); display: grid; place-items: center; padding: 16px; }
.modal { background: var(--superficie); border-radius: var(--r-modal); width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: var(--sombra-alta); }
.modal-cab { padding: 18px 20px 0; display: flex; align-items: flex-start; gap: 12px; }
.modal-cab h2 { font-size: 16px; font-weight: 600; }
.modal-cab p { margin: 4px 0 0; color: var(--texto-3); font-size: 12.5px; }
.modal-corpo { padding: 16px 20px; }
.modal-pe { padding: 12px 20px 18px; display: flex; gap: 8px; justify-content: flex-end; }
.passos { display: flex; gap: 8px; margin-bottom: 16px; }
.passo { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--texto-3); }
.passo i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sutil); font-style: normal; font-size: 11.5px; flex: none; }
.passo.ativo { color: var(--destaque-txt); }
.passo.ativo i { background: var(--destaque); color: var(--sobre-destaque); }
.passo.feito i { background: var(--destaque-sutil); color: var(--destaque-txt); }
.soltar { border: 1.5px dashed var(--linha-2); border-radius: var(--r-cartao); padding: 32px 20px; text-align: center; color: var(--texto-2); background: var(--fundo); }
.soltar svg { width: 28px; height: 28px; color: var(--destaque-medio); margin-bottom: 8px; }
.soltar b { display: block; font-size: 14px; color: var(--texto); font-weight: 600; }
.arquivo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-painel); box-shadow: var(--anel); margin-top: 12px; }
.arquivo .lista-ico { background: var(--destaque-sutil); }
.mapeamento { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 8px 10px; align-items: center; font-size: 13px; }
.mapeamento .col { background: var(--sutil); border-radius: var(--r-ctl); padding: 6px 10px; font-family: var(--mono); font-size: 12px; }
.mapeamento select { height: 30px; border: 0; box-shadow: var(--anel); border-radius: var(--r-ctl); padding: 0 8px; background: var(--superficie); }
.progresso { margin: 10px 0 4px; }
.progresso i { width: 0; transition: width .3s; }
.resultado-geo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 110; background: #212121; color: #FFFFFF; padding: 10px 14px; border-radius: var(--r-painel); font-size: 13px; font-weight: 500; box-shadow: var(--e4); display: flex; gap: 10px; align-items: center; max-width: calc(100vw - 32px); }
.toast svg { color: #C9A962; }
.toast a, .toast button { color: #C9A962; font-weight: 600; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.toast a:hover, .toast button:hover { text-decoration: underline; }

/* ---------- potencial configurável ---------- */
.pot-sel { height: 28px; flex: none; max-width: 260px; }
.pot-sel svg { color: var(--ouro-txt); }
.pot-sel-rot { font-size: 12px; font-weight: 500; color: var(--texto-3); }
.pot-sel select { min-width: 0; max-width: 170px; text-overflow: ellipsis; cursor: pointer; }
.pot-nota { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 10px; border-radius: var(--r-painel); background: var(--sutil); font-size: 12px; color: var(--texto-2); max-width: 720px; }
.pot-nota svg { width: 14px; height: 14px; color: var(--ouro-txt); flex: none; }
.pot-nota span { min-width: 0; flex: 1; }
.pot-nota .btn-texto { min-height: 0; font-size: 12px; }
.pot-bloco { align-items: flex-start; }
.pot-linhas { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.pot-linhas > span { font-size: 12px; color: var(--texto-2); }
.pot-linhas .btn-texto { min-height: 0; font-size: 12px; }
.pot-linha { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pot-linha + .pot-linha { border-top: 1px solid color-mix(in srgb, var(--ouro-txt) 22%, transparent); padding-top: 8px; }
.pot-linha-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pot-linha-top span { font-weight: 600; font-size: 13px; }
.pot-linha-top .chip { height: 18px; font-style: normal; font-size: 10.5px; background: var(--superficie); }
.destaque-ouro .pot-linha-top b { display: inline; font-size: 16px; white-space: nowrap; }
.pot-linha em { font-style: normal; font-size: 12px; color: var(--texto-2); }
.pot-formula { font-family: var(--fonte); font-size: 12px; color: var(--texto-2); line-height: 1.5; font-variant-numeric: tabular-nums; }
.pot-formula.grande { background: var(--sutil); border-radius: var(--r-painel); padding: 8px 10px; font-size: 12px; }
.th-pot { white-space: nowrap; }
.th-editar { margin-left: 2px; opacity: .45; vertical-align: middle; }
.th-editar svg { width: 12px; height: 12px; }
.th-pot:hover .th-editar, .th-editar:focus-visible { opacity: 1; color: var(--destaque-txt); }
.th-nova { color: var(--destaque-txt) !important; box-shadow: inset 0 0 0 1px var(--linha-2); border-radius: var(--r-ctl); padding: 2px 8px !important; }
.th-nova svg { width: 12px; height: 12px; }
.th-nova:hover { background: var(--destaque-bruma) !important; }
.aviso-equipe { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-painel); background: var(--destaque-bruma); box-shadow: inset 0 0 0 1px var(--destaque-sutil); font-size: 12.5px; color: var(--texto-2); }
.aviso-equipe svg { color: var(--destaque-medio); flex: none; }
.col-pot { display: flex; flex-direction: column; }
.col-pot.principal { box-shadow: 0 0 0 1px var(--ouro), var(--e1); }
.col-pot-tit { display: flex; gap: 12px; align-items: center; min-width: 0; }
.col-pot-pe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; }
.btn-remover:hover { color: var(--critico); }
.btn-remover.confirmar { background: var(--critico-sutil); color: var(--critico); box-shadow: inset 0 0 0 1px var(--critico); }
.col-pot-nova { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 200px; border: 1.5px dashed var(--linha-2); box-shadow: none; background: transparent; color: var(--texto-2); text-align: center; cursor: pointer; font: inherit; }
.col-pot-nova svg { width: 24px; height: 24px; color: var(--destaque-medio); }
.col-pot-nova b { color: var(--texto); font-size: 14px; font-weight: 600; }
.col-pot-nova span { font-size: 12px; color: var(--texto-3); max-width: 300px; }
.col-pot-nova:hover { border-color: var(--destaque-medio); background: var(--destaque-bruma); }
.modal.largo { width: min(940px, 100%); }
.modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.modelo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 0; box-shadow: var(--anel); border-radius: var(--r-cartao); background: var(--superficie); text-align: left; font: inherit; cursor: pointer; }
.modelo .lista-ico { margin-bottom: 6px; }
.modelo b { font-size: 13.5px; font-weight: 600; }
.modelo span:last-child { font-size: 12px; color: var(--texto-3); }
.modelo:hover { box-shadow: 0 0 0 1px var(--destaque-medio); background: var(--destaque-bruma); }
.editor-pot { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--texto-2); }
.campo input, .campo select { height: 32px; border: 0; box-shadow: var(--anel); border-radius: var(--r-ctl); padding: 0 10px; background: var(--superficie); font: inherit; font-size: 13px; font-weight: 500; color: var(--texto); min-width: 0; }
.campo input:focus, .campo select:focus, .entrada:focus-within { outline: 0; box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.campo input.erro { box-shadow: 0 0 0 1px var(--critico); }
.campos-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.entrada { display: flex; align-items: center; gap: 6px; height: 32px; box-shadow: var(--anel); border-radius: var(--r-ctl); padding: 0 10px; background: var(--superficie); }
.entrada input { border: 0 !important; box-shadow: none !important; height: 100%; padding: 0; width: 100%; min-width: 0; text-align: right; font: inherit; font-weight: 600; color: var(--texto); outline: 0; background: none; }
.entrada em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--texto-3); white-space: nowrap; }
.dose { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha-fraca); font-size: 13px; }
.dose b { display: block; font-weight: 600; }
.dose small { display: block; font-size: 11.5px; color: var(--texto-3); }
.pot-sim { background: var(--sutil); border-radius: var(--r-cartao); padding: 14px; align-self: start; position: sticky; top: 0; }
.sim-titulo { font-size: 12px; font-weight: 500; color: var(--ouro-txt); margin-bottom: 8px; }
.sim-grande { background: var(--superficie); border-radius: var(--r-painel); padding: 10px 12px; margin-bottom: 10px; box-shadow: var(--anel); }
.sim-grande span { font-size: 12px; color: var(--texto-2); }
.sim-grande b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.sim-grande b small { font-size: 12.5px; color: var(--texto-3); margin-left: 2px; font-weight: 500; }
.delta { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.delta.sobe { background: var(--ok-sutil); color: var(--ok); }
.delta.desce { background: var(--critico-sutil); color: var(--critico); }
.sim-ex { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linha); font-size: 12.5px; }
.sim-ex span { min-width: 0; }
.sim-ex small { display: block; color: var(--texto-3); font-size: 11.5px; }
.sim-ex > b { white-space: nowrap; font-weight: 600; }

/* ---------- recorte no mapa, filtros por cultura, campanhas ---------- */
.seg svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.mapa-ferr { position: absolute; top: 12px; left: 12px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: calc(100% - 24px); }
.mapa-ferr .segmento { background: var(--superficie); box-shadow: var(--sombra); }
.ferr-dica { background: #212121; color: #FFFFFF; font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: var(--r-ctl); box-shadow: var(--e3); max-width: 320px; }
.sel-card { box-shadow: 0 0 0 1px var(--ouro); background: var(--superficie); border-radius: var(--r-cartao); padding: 12px; }
.sel-card .bloco-titulo { color: var(--ouro-txt); }
.sel-card .btn-texto { min-height: 0; font-size: 12px; }
.sel-card .mini-kpi { background: var(--sutil); }
.sel-card .mini-kpi.ouro { background: var(--ouro-sutil); }
.raio-ctl { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--texto-2); margin-bottom: 10px; }
.raio-ctl input { flex: 1; accent-color: var(--destaque-medio); min-width: 0; }
.raio-ctl b { min-width: 44px; text-align: right; color: var(--texto); font-weight: 600; }
.sel-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.sel-acoes .btn { flex: 1; justify-content: center; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.ativo-contorno { background: var(--destaque-sutil); color: var(--destaque-txt); box-shadow: none; }
.ativo-contorno svg { color: var(--destaque-txt); }
.contador-filtro:not(:empty) { font-size: 11px; background: var(--destaque); color: var(--sobre-destaque); border-radius: 999px; padding: 0 6px; margin-left: 2px; }
.chip-grande { height: 26px; padding: 0 4px 0 8px; font-size: 12px; }
.chip-grande button { border: 0; background: none; padding: 2px; display: grid; place-items: center; color: inherit; }
.painel-filtros { background: var(--superficie); border-radius: var(--r-cartao); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--sombra); }
.faixas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px 16px; }
.faixa { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--texto-2); min-width: 0; }
.faixa small { font-weight: 400; color: var(--texto-3); }
.faixa-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.faixa input, .faixa select { height: 28px; border: 0; box-shadow: var(--anel); border-radius: var(--r-ctl); padding: 0 8px; background: var(--superficie); font: inherit; font-weight: 500; color: var(--texto); min-width: 0; width: 100%; }
.faixa input:focus, .faixa select:focus { outline: 0; box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.painel-filtros-pe { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 12px; }
.painel-filtros-pe .btn-texto { min-height: 0; font-size: 12px; }
.filtros-resumo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.criterio { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--r-painel); background: var(--sutil); font-size: 12.5px; color: var(--texto-2); margin-bottom: 12px; }
.criterio svg { color: var(--destaque-medio); flex: none; margin-top: 2px; }
.criterio > span { flex: 1; min-width: 240px; }
.criterio b { color: var(--texto); font-weight: 600; }
.criterio .btn { flex: none; }
.kpi-det.explica { color: var(--texto-2); line-height: 1.4; }
.camp-aviso { margin-top: 10px; padding: 8px 10px; border-radius: var(--r-painel); background: var(--destaque-bruma); font-size: 12.5px; color: var(--texto-2); }
.camp-aviso b { color: var(--texto); }
.filtros-resumo .resumo-lista { margin-left: 0; flex: 1; min-width: 0; }
.camp-card { display: flex; flex-direction: column; gap: 12px; color: inherit; transition: box-shadow .15s; }
.camp-card:hover { box-shadow: 0 0 0 1px var(--destaque-medio), var(--e2); }
.camp-card .cartao-cab { margin-bottom: 0; }
.chips-crit { display: flex; flex-wrap: wrap; gap: 4px; }
.mt-p { margin-top: 8px; }
.camp-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.camp-nums span { display: block; font-size: 11.5px; color: var(--texto-3); font-weight: 500; }
.camp-nums b { font-size: 16px; font-weight: 600; white-space: nowrap; }
.camp-nums small { font-size: 12px; color: var(--texto-3); }
.barra-etapas { margin-top: 8px; }
.camp-pe { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--texto-3); }
.camp-pe b { color: var(--texto); font-weight: 600; }
.mini-avatar.grande { width: 30px; height: 30px; font-size: 11px; flex: none; }
.resp { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center; color: var(--texto-3); }
.vazio svg { width: 26px; height: 26px; color: var(--destaque-medio); }
.vazio b { color: var(--texto); font-size: 14px; font-weight: 600; }
.camp-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.camp-resumo > div { background: var(--sutil); border-radius: var(--r-painel); padding: 8px 10px; min-width: 0; }
.camp-resumo span { display: block; font-size: 11.5px; color: var(--texto-3); font-weight: 500; }
.camp-resumo b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.aviso-exemplo { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-radius: var(--r-painel); background: var(--alerta-sutil); color: var(--texto); font-size: 12.5px; margin-bottom: 12px; }
.aviso-exemplo svg { color: var(--alerta); flex: none; margin-top: 1px; }
.tabela-culturas { margin: 16px -16px -16px; }
.tabela-culturas td, .tabela-culturas th { height: 30px; }
.sw-cult { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.var { display: block; font-size: 10.5px; font-weight: 600; }
.var.sobe { color: var(--ok); }
.var.desce { color: var(--critico); }

/* ---------- território ---------- */
.terr-lista { display: flex; flex-direction: column; gap: 8px; }
.terr-item { border-radius: var(--r-cartao); box-shadow: var(--anel); background: var(--superficie); overflow: hidden; }
.terr-item.aberto { box-shadow: 0 0 0 1.5px var(--cor), var(--e1); }
.terr-cab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; color: var(--texto); }
.terr-cab:hover { background: var(--sutil); }
.terr-sw { width: 12px; height: 12px; border-radius: 3px; background: var(--cor); flex: none; }
.terr-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.terr-nome b { font-size: 13px; font-weight: 600; }
.terr-nome span { font-size: 11.5px; color: var(--texto-3); }
.terr-num { text-align: right; display: flex; flex-direction: column; flex: none; }
.terr-num b { font-size: 13px; font-weight: 600; }
.terr-num span { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; }
.terr-corpo { padding: 2px 12px 12px; display: flex; flex-direction: column; align-items: stretch; }
.terr-corpo .btn-texto { align-self: flex-start; font-size: 12px; min-height: 24px; margin-top: 6px; }
.terr-legenda { background: var(--superficie); box-shadow: var(--sombra); border-radius: var(--r-painel); padding: 8px 10px; font-size: 12px; color: var(--texto-2); display: flex; flex-direction: column; gap: 4px; }
.terr-legenda b { font-weight: 600; color: var(--texto); }
.terr-legenda span { display: flex; align-items: center; gap: 6px; }
.terr-legenda i { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(90deg, #176B41 50%, #3E5C76 50%); box-shadow: 0 0 0 1.5px var(--superficie); }
.terr-legenda i.fora { background: var(--superficie); box-shadow: 0 0 0 2px #D92D20; }
@media (max-width: 900px) { .terr-legenda { display: none; } }

/* ---------- meu dia ---------- */
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.dia { background: var(--superficie); border-radius: var(--r-cartao); box-shadow: var(--sombra); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dia.hoje { box-shadow: 0 0 0 1.5px var(--destaque-medio), var(--e1); }
.dia-nome { font-size: 11.5px; font-weight: 500; color: var(--texto-3); text-transform: capitalize; }
.dia.hoje .dia-nome { color: var(--destaque-txt); font-weight: 600; }
.dia-num { font-size: 20px; font-weight: 600; line-height: 1.2; }
.dia-qtd { font-size: 12px; color: var(--texto-2); }
.dia-atr { font-size: 11.5px; font-weight: 600; color: var(--critico); }
.dia-pontos { display: flex; align-items: center; gap: 3px; margin-top: 4px; min-height: 8px; }
.dia-pontos i { width: 7px; height: 7px; border-radius: 50%; background: var(--destaque-medio); box-shadow: 0 0 0 1px var(--superficie); }
.dia-pontos i.atr { background: var(--critico); }
.dia-pontos small { font-size: 10px; font-weight: 600; color: var(--texto-3); margin-left: 2px; }
.abas-visao button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; font: inherit; font-size: 13px; font-weight: 500; color: var(--texto-2); border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas-visao button:hover { color: var(--texto); }
.abas-visao button.ativo { color: var(--texto); font-weight: 600; border-bottom-color: var(--destaque); }
.abas-cartao { margin: -4px -16px 4px; padding: 0 12px; }
.aba-n { font-size: 11px; font-weight: 600; color: var(--texto-3); background: var(--sutil); border-radius: 999px; padding: 0 6px; }
.abas-visao button.ativo .aba-n { background: var(--destaque-sutil); color: var(--destaque-txt); }
.trab-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 96px auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linha-fraca); }
.trab-item:last-child { border-bottom: 0; }
.trab-item .lista-txt:hover b { color: var(--destaque-txt); }
.trab-data { font-size: 12px; color: var(--texto-2); text-align: right; white-space: nowrap; }
.trab-data.atr { color: var(--critico); font-weight: 600; }
.trab-acoes { display: flex; gap: 6px; justify-content: flex-end; }
.lista-ico.critico { background: var(--critico-sutil); color: var(--critico); }
.lista-lado .btn-texto { min-height: 0; font-size: 12px; margin-top: 2px; }
@media (max-width: 1180px) { .semana { grid-template-columns: repeat(4, minmax(0, 1fr)); } .trab-item { grid-template-columns: 28px minmax(0, 1fr) auto; } .trab-etapa { display: none; } .trab-acoes { grid-column: 2 / -1; justify-content: flex-start; } }
@media (max-width: 900px) { .semana { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lateral-versao { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--texto-3); padding: 8px 8px 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lateral-versao svg { display: none; width: 14px; height: 14px; }

/* ---------- responsivo ---------- */
@media (max-width: 1280px) {
  .ficha { grid-template-columns: minmax(0, 1fr) 320px; }
  .props { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-21, .g-12, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .territorio-rotulo { display: none; }
  .pot-sel-rot { display: none; }
  .territorio { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .atalho { display: none; }
  .ficha { grid-template-columns: minmax(0, 1fr); margin: -20px -24px -32px; }
  .ficha-atividade { position: static; height: auto; border-left: 0; border-top: 1px solid var(--linha); }
  .atv-corpo { overflow: visible; }
}
@media (max-width: 900px) {
  :root { --barra: 48px; }
  /* a barra lateral sai; a navegação inferior (.nav-inferior, montada pelo app.js conforme o perfil) assume */
  .app { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); transition: none; }
  .lateral { display: none; }
  .barra { padding: 0 16px; gap: 8px; }
  .barra::before { content: ""; width: 22px; height: 20px; flex: none; background: url(../brand/agropipe-simbolo.png) center/contain no-repeat; }
  .territorio { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .busca { display: none; }
  .pot-sel { display: none; }
  .editor-pot { grid-template-columns: minmax(0, 1fr); }
  .pot-sim { position: static; }
  .mapa-ferr { top: 10px; left: 10px; }
  .ferr-dica { max-width: 240px; }
  .conteudo { padding: 16px 16px 24px; }
  .faixa-demo { padding: 4px 16px; }
  .ficha { margin: -16px -16px -24px; }
  .ficha-principal { padding: 16px; }
  .g-2 { grid-template-columns: minmax(0, 1fr); }
  .cab h1 { font-size: 18px; }
  .ficha-cab h1 { font-size: 22px; }
  .prop { grid-template-columns: 120px minmax(0, 1fr); }
  .mercado { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - var(--barra) - var(--faixas, 0px) - 56px - env(safe-area-inset-bottom, 0px)); }
  .painel-lat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; max-height: 46%; border-right: 0; border-top: 1px solid var(--linha); border-radius: var(--r-modal) var(--r-modal) 0 0; box-shadow: var(--sombra-alta); transform: translateY(calc(100% - 60px)); transition: transform .22s; padding-top: 10px; }
  .painel-lat.aberto { transform: none; }
  .painel-lat::before { content: ""; align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--linha-2); flex: none; }
  .gaveta { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 72%; transform: translateY(calc(100% + 20px)); z-index: 8; }
  .mapa-ficha { height: 260px; }
  .ficha-cab .cab-acoes { margin-left: 0; }
  .resultado-geo { grid-template-columns: minmax(0, 1fr); }
  .resumo-lista { margin-left: 0; width: 100%; }
  .abas-visao .abas-dica { display: none; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .kpi-val { font-size: 22px; }
  .kanban { grid-auto-columns: 84%; grid-template-columns: repeat(6, 84%); }
  .passo span { display: none; }
  .campos-2 { grid-template-columns: minmax(0, 1fr); }
  .dose { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .camp-nums, .camp-resumo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- ficha: dossiê do imóvel (mapa 3D, alertas, relevo, solo, clima, infraestrutura, áreas do CAR) ---------- */
.dossie-blocos { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dossie-blocos:empty { display: none; }
.dossie-blocos .grade.g-2 { align-items: stretch; }
.dossie-atual { margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--linha-fraca); font-size: 11.5px; color: var(--texto-3); }
.dossie-nota { margin: 6px 0 0; font-size: 11.5px; }
.secao-tit .cartao-sub { flex: 1; min-width: 0; text-align: right; }
.mapa-ficha .mapa-flutua { top: 10px; right: 10px; }
.chip.ok { background: var(--ok-sutil); color: var(--ok); }
.chip.selo-risco { height: 24px; padding: 0 10px 0 8px; font-size: 12.5px; font-weight: 600; }
.chip.selo-risco svg { width: 13px; height: 13px; }
/* grade de alertas: ícone de estado, total e último registro */
.risco-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.risco-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-painel); background: var(--sutil); min-width: 0; }
.risco-item > div { min-width: 0; }
.risco-item b { display: block; font-size: 13px; font-weight: 600; }
.risco-item span:not(.risco-ico) { display: block; font-size: 12px; color: var(--texto-3); margin-top: 1px; }
.risco-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--superficie); color: var(--texto-3); box-shadow: var(--anel); }
.risco-ico svg { width: 14px; height: 14px; }
.risco-item.ok .risco-ico { background: var(--ok-sutil); color: var(--ok); box-shadow: none; }
.risco-item.alerta .risco-ico { background: var(--alerta-sutil); color: var(--alerta); box-shadow: none; }
.risco-item.critico .risco-ico { background: var(--critico-sutil); color: var(--critico); box-shadow: none; }
.risco-item.critico { box-shadow: inset 0 0 0 1px var(--critico-sutil); }
.risco-item.alerta b { color: var(--texto); }
/* detalhes expansíveis */
.dossie-det { margin-top: 12px; border-top: 1px solid var(--linha-fraca); padding-top: 8px; }
.dossie-det summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--destaque-txt); list-style: none; display: flex; align-items: center; gap: 6px; min-height: 28px; }
.dossie-det summary::-webkit-details-marker { display: none; }
.dossie-det summary::before { content: ""; width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform .15s; }
.dossie-det[open] summary::before { transform: rotate(45deg); }
.dossie-det summary:hover { text-decoration: underline; }
.dossie-det .tabela-wrap { margin: 8px -16px 0; }
.dossie-det .tabela td, .dossie-det .tabela th { height: 32px; font-size: 12.5px; }
.dossie-det .grafico { margin-top: 8px; }
/* barras empilhadas de classes (declividade, textura) e legenda com valor */
.legenda-classes { gap: 4px 14px; }
.legenda-classes span { gap: 5px; }
.legenda-classes small { color: var(--texto-3); font-size: 11.5px; }
.legenda-classes b { font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; margin-left: 2px; }
.mini-kpis.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-kpis.tres b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leitura { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--r-painel); background: var(--destaque-sutil); color: var(--texto); font-size: 13px; }
/* solo */
.solo-profs { display: flex; flex-direction: column; gap: 12px; }
.solo-prof { display: flex; flex-direction: column; gap: 6px; }
.solo-prof-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--texto-3); }
.solo-prof-top b { color: var(--texto); font-weight: 600; font-size: 13px; }
.solo-dados { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--linha-fraca); gap: 8px 12px; align-items: start; }
.solo-dados > span small, .solo-dados > span { font-size: 12.5px; }
.solo-dados small { color: var(--texto-3); font-size: 11.5px; }
.solo-dados b { font-variant-numeric: tabular-nums; }
.solo-dados b em { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--texto-3); }
.argumento { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-painel); background: var(--ouro-sutil); font-size: 13px; color: var(--texto); }
.argumento svg { color: var(--ouro-txt); flex: none; margin-top: 1px; }
.argumento span { font-weight: 600; color: var(--ouro-txt); }
/* água e infraestrutura: lista compacta com várias linhas por item */
.infra-item { align-items: flex-start; }
.infra-item .lista-ico { margin-top: 1px; }
.infra-item .lista-txt b { white-space: normal; }
.infra-item .lista-txt span { display: block; }
/* áreas declaradas: linha de dado com barra relativa */
.linhas-barra { display: flex; flex-direction: column; }
.linha-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--linha-fraca); font-size: 13px; align-items: center; }
.linha-barra:last-child { border-bottom: 0; }
.linha-barra > span { color: var(--texto-2); min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.linha-barra > span .chip { height: 18px; font-size: 10.5px; font-style: normal; }
.linha-barra > b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barrinha-l { grid-column: 1 / -1; }
.barrinha-l i.alerta { background: var(--alerta); }
/* bloco sem dossiê: confirmação inline */
.bloqueado .sel-acoes { margin-left: auto; flex: none; }
.bloqueado .sel-acoes .btn { flex: none; }
@media (max-width: 1180px) { .risco-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .risco-grade { grid-template-columns: minmax(0, 1fr); }
  .mini-kpis.tres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mini-kpis.tres b { white-space: normal; }
  .secao-tit { flex-wrap: wrap; }
  .secao-tit .cartao-sub { flex-basis: 100%; text-align: left; }
  .solo-dados { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .solo-dados b { text-align: left; margin-bottom: 6px; }
  .dossie-det .tabela-wrap { margin: 8px -16px 0; }
}

/* ---------- ficha: titulares do imóvel (exemplo fictício ou consulta paga) ---------- */
.titulares-bloco { min-width: 0; }
.tit-n { font-weight: 500; font-size: 12.5px; color: var(--texto-3); margin-left: 4px; }
.chip.tit-exemplo { height: 24px; padding: 0 10px 0 8px; font-size: 12.5px; font-weight: 600; }
.chip.tit-exemplo svg { width: 13px; height: 13px; }
.tit-nota { margin: -6px 0 12px; font-size: 12px; color: var(--alerta); }
.tit-grade { gap: 10px; }
.tit-cartao { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--sutil); box-shadow: none; border-radius: var(--r-painel); }
.tit-cab { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.tit-cab .lista-ico { background: var(--superficie); box-shadow: var(--anel); }
.tit-cab .lista-ico.ouro { background: var(--ouro-sutil); box-shadow: none; }
.tit-nome { flex: 1; min-width: 0; }
.tit-nome b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.tit-nome > span { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; color: var(--texto-3); }
.tit-nome .mono { font-size: 11.5px; }
.tit-contatos { display: flex; flex-direction: column; border-top: 1px solid var(--linha); }
.tit-contato { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linha); min-width: 0; }
.tit-contato:last-child { border-bottom: 0; }
.tit-contato-ico { display: grid; place-items: center; color: var(--texto-3); }
.tit-contato-ico svg { width: 14px; height: 14px; }
.tit-contato-val { font-size: 13px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.tit-sem { margin: 0; font-size: 12.5px; }
.tit-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 2px; }
.tit-mais { display: flex; justify-content: center; margin-top: 8px; }
.tit-vazio { padding: 24px 16px; }
.tit-secao { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--linha-fraca); }
.tit-secao-tit { font-size: 12.5px; font-weight: 600; color: var(--texto-2); margin-bottom: 2px; }
.tit-matricula .lista-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.tit-matricula .lista-txt b { white-space: normal; overflow: visible; }
.tit-pe { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--linha-fraca); font-size: 11.5px; color: var(--texto-3); }
.tit-pe .btn-texto { font-size: 12px; min-height: 24px; }
#titulares .bloqueado { margin-top: 12px; }
@media (max-width: 900px) {
  .tit-grade { grid-template-columns: minmax(0, 1fr); }
  .tit-nota { margin-top: 0; }
}

/* ---------- acabamento: menu lateral recolhível (≥ 901 px; abaixo disso a barra já é navegação inferior) ---------- */
.nav a > span:not(.contador), .nav-secundario > span { transition: opacity .12s ease; }
.conta-txt { transition: opacity .12s ease; }
@media (min-width: 901px) {
  .app.menu-recolhido { --lateral: 56px; }
  .app.menu-recolhido .lateral { padding: 12px 6px; }
  .app.menu-recolhido .lateral-topo { flex-direction: column; gap: 6px; }
  .app.menu-recolhido .lateral-marca { justify-content: center; padding: 0; width: 100%; }
  .app.menu-recolhido .lateral-logo.claro, .app.menu-recolhido .lateral-logo.escuro { display: none; }
  .app.menu-recolhido .lateral-simbolo.claro { display: block; }
  .app.menu-recolhido .lateral-recolher svg { transform: scaleX(-1); }
  .app.menu-recolhido .lateral-conta { justify-content: center; padding: 0; }
  .app.menu-recolhido .conta-txt { display: none; }
  .app.menu-recolhido .nav a, .app.menu-recolhido .nav-secundario { justify-content: center; gap: 0; padding: 0; width: 44px; margin: 0 auto; }
  .app.menu-recolhido .nav a > span:not(.contador), .app.menu-recolhido .nav-secundario > span { opacity: 0; width: 0; overflow: hidden; flex: none; }
  .app.menu-recolhido .lateral-secao { height: 1px; padding: 0; margin: 6px 10px; background: var(--linha); font-size: 0; color: transparent; overflow: hidden; }
  .app.menu-recolhido .nav a .contador { position: absolute; top: 3px; right: 5px; margin: 0; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--ouro); color: var(--sobre-ouro); font-size: 9.5px; line-height: 14px; text-align: center; }
  .app.menu-recolhido .lateral-versao { justify-content: center; padding: 8px 0 0; }
  .app.menu-recolhido .lateral-versao svg { display: block; }
  .app.menu-recolhido .lateral-versao span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (prefers-color-scheme: dark) and (min-width: 901px) {
  :root:not([data-theme="light"]) .app.menu-recolhido .lateral-simbolo.claro { display: none; }
  :root:not([data-theme="light"]) .app.menu-recolhido .lateral-simbolo.escuro { display: block; }
}
@media (min-width: 901px) {
  :root[data-theme="dark"] .app.menu-recolhido .lateral-simbolo.claro { display: none; }
  :root[data-theme="dark"] .app.menu-recolhido .lateral-simbolo.escuro { display: block; }
}
/* dica ao lado do item recolhido (mesmo #tip dos gráficos, posicionado à direita do ícone) */
.tip.lado { font-weight: 500; padding: 6px 10px; }

/* ---------- acabamento: carregamento ---------- */
/* barra fina de progresso na troca de tela, logo abaixo do cabeçalho */
.progresso-rota { position: sticky; top: var(--barra); z-index: 19; height: 0; }
.progresso-rota::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--destaque); transform-origin: left center; transform: scaleX(var(--p, 0)); opacity: 0; transition: transform .4s cubic-bezier(.1, .7, .3, 1), opacity .15s ease; }
.progresso-rota.ativa::before { opacity: 1; }
.progresso-rota.fim::before { transition: transform .18s ease-out, opacity .2s ease .15s; opacity: 0; }
/* entrada suave do conteúdo a cada rota */
.conteudo.entrando { animation: entrada .16s ease both; }
@keyframes entrada { from { opacity: 0; transform: translateY(4px); } }
@keyframes saida { to { opacity: 0; transform: translateY(4px); } }
/* esqueletos com brilho */
.esq { position: relative; display: block; overflow: hidden; background: var(--sutil); border-radius: var(--r-ctl); }
.esq::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, var(--sutil-2) 50%, transparent 100%); transform: translateX(-100%); animation: esq-brilho 1.4s ease-in-out infinite; }
@keyframes esq-brilho { to { transform: translateX(100%); } }
.esq-linha { height: 12px; width: 100%; border-radius: 4px; }
.esq-linha.curta { width: 40%; }
.esq-linha.media { width: 65%; }
.esq-bloco { height: 96px; border-radius: var(--r-painel); }
.esq-circulo { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.esq-grupo { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.esq-linhas { display: flex; gap: 10px; align-items: flex-start; }
.esq-cartao { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r-painel); box-shadow: var(--anel); }
.esq-mapa { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; transition: opacity .25s ease; }
.esq-mapa.sair { opacity: 0; }
.esq-mapa-rot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; font-size: 12px; font-weight: 500; color: var(--texto-3); white-space: nowrap; }
.esq-dossie { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha-fraca); }
.esq-dossie .risco-grade .esq-cartao { box-shadow: none; background: var(--sutil); }
.esq-tit { margin-top: 12px; }
/* botão em espera e caixa de consulta em andamento */
.spinner { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: gira .7s linear infinite; flex: none; }
@keyframes gira { to { transform: rotate(360deg); } }
.carregando { pointer-events: none; }
.btn.carregando[disabled], .btn-texto.carregando[disabled] { opacity: .85; }
.carregando > svg.ico { display: none; }
.bloqueado.pendente { border-style: solid; border-color: var(--linha); }
.bloqueado.pendente .spinner { color: var(--destaque-txt); }

/* ---------- acabamento: microinterações ---------- */
.btn, .btn-texto, .nav a, .nav-secundario, .lateral-conta, .lateral-recolher, .lista-item, .lista-txt b, .tabela tbody tr, .cartao, .kpi, .camp-card, .modelo, .terr-cab, .seg, .icone-btn, .busca-item, .gaveta-fechar, .chip-grande button, .col-pot-nova, .dossie-det summary, .abas-visao a, .abas-visao button, .tabela th button, .camada, .mini-kpi {
  transition: background-color .12s ease, box-shadow .12s ease, color .12s ease, border-color .12s ease, transform .12s ease, opacity .12s ease;
}
.btn:active:not([disabled]) { transform: translateY(.5px); }
.btn-primario:active:not([disabled]) { filter: brightness(.96); }
.seg:active, .icone-btn:active, .gaveta-fechar:active { background: var(--sutil-2); }
.tabela tbody tr.clicavel:active { background: var(--sutil-2); }
.modelo:active, .col-pot-nova:active { transform: scale(.99); }
/* gráficos: barras crescem, linhas se desenham só na primeira exibição (classe g-anim no svg) */
svg.g-anim .g-barra { transform-box: fill-box; transform-origin: left center; animation: g-cresce-x .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
svg.g-anim .g-barra.g-v { transform-origin: center bottom; animation-name: g-cresce-y; }
svg.g-anim .g-barra.g-trilho { animation-duration: .3s; }
@keyframes g-cresce-x { from { transform: scaleX(0); } }
@keyframes g-cresce-y { from { transform: scaleY(0); } }
svg.g-anim .g-linha { stroke-dasharray: 1; stroke-dashoffset: 1; animation: g-traca .7s ease-out .05s forwards; }
@keyframes g-traca { to { stroke-dashoffset: 0; } }
svg.g-anim .g-surge { animation: g-surge .3s ease .45s both; }
@keyframes g-surge { from { opacity: 0; } }
/* texto dentro da pilha e rótulos de eixo: também entram com a barra */
svg.g-anim text[data-k] { animation: g-surge .3s ease .3s both; }
/* KPIs: a contagem é feita no app.js; aqui só a entrada do cartão */
/* modais: fundo e caixa entram e saem juntos; a classe saindo mantém o nó até o fim da animação */
.modal-fundo.abrindo { animation: fundo-entra .15s ease; }
.modal-fundo.abrindo .modal { animation: modal-entra .16s cubic-bezier(.2, .7, .2, 1); }
.modal-fundo.saindo { animation: fundo-sai .14s ease forwards; pointer-events: none; }
.modal-fundo.saindo .modal { animation: modal-sai .14s ease forwards; }
@keyframes fundo-entra { from { opacity: 0; } }
@keyframes fundo-sai { to { opacity: 0; } }
@keyframes modal-entra { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes modal-sai { to { opacity: 0; transform: translateY(4px) scale(.98); } }
/* gaveta do mercado: desliza e esmaece */
.gaveta { opacity: 0; transition: transform .2s ease, opacity .16s ease; }
.gaveta.aberta { opacity: 1; }
/* toast, dicas e painel de filtros */
.toast:not([hidden]) { animation: toast-entra .16s ease; }
.toast.saindo { animation: toast-sai .14s ease forwards; pointer-events: none; }
@keyframes toast-entra { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-sai { to { opacity: 0; transform: translate(-50%, 6px); } }
.tip:not([hidden]) { animation: tip-entra .12s ease; }
@keyframes tip-entra { from { opacity: 0; transform: scale(.97); } }
.painel-filtros:not([hidden]) { animation: entrada .16s ease; }
.painel-filtros.saindo { animation: saida .14s ease forwards; pointer-events: none; }
/* quadro do pipeline: arrasto, coluna-alvo, local de soltura e pouso */
.card-op { transition: box-shadow .12s ease, transform .12s ease, opacity .12s ease; }
.card-op:active { cursor: grabbing; }
.card-op.arrastando { opacity: 1; box-shadow: var(--anel), var(--e4); transform: rotate(1.5deg) scale(1.02); cursor: grabbing; }
.card-op.fantasma { opacity: .35; transform: none; box-shadow: var(--sombra); }
.coluna { transition: background-color .12s ease, outline-color .12s ease; }
.coluna.alvo { background: color-mix(in srgb, var(--destaque) 7%, var(--fundo)); }
.soltar-aqui { height: 56px; border-radius: var(--r-cartao); border: 1.5px dashed var(--destaque-medio); background: var(--destaque-bruma); animation: entrada .12s ease; }
.card-op.caiu { animation: caiu .24s cubic-bezier(.2, .7, .2, 1); }
@keyframes caiu { from { transform: scale(.96); box-shadow: var(--anel), var(--e3); } }
/* movimento reduzido: sem brilho, sem deslocamento; só troca de estado (a regra global já zera transições e animações) */
@media (prefers-reduced-motion: reduce) {
  .esq::after { display: none; }
  .conteudo.entrando, .painel-filtros:not([hidden]), .toast:not([hidden]), .tip:not([hidden]) { animation: none; }
  .card-op.arrastando { transform: none; }
}

/* ---------- oportunidades: tabela compacta (cabe em 1.440 px com a coluna Risco; rolagem lateral só em telas menores) ---------- */
.tabela-ops th, .tabela-ops td { padding-left: 8px; padding-right: 8px; }
.tabela-ops th { white-space: normal; line-height: 1.2; min-width: 0; }
.tabela-ops th button { text-align: left; }
.tabela-ops .cel-imovel b { white-space: normal; }
.tabela-ops .cel-risco .chip { height: 22px; font-size: 11.5px; padding: 0 6px; }
.tabela-ops .cel-cli { font-size: 12.5px; max-width: 170px; line-height: 1.3; }
.tabela-ops .cel-cli b { display: block; font-weight: 600; white-space: nowrap; }
.tabela-ops .cel-cli .mudo { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.tabela-ops .barrinha { width: 40px; margin-right: 6px; }
.tabela-ops .th-pot button { white-space: nowrap; }

/* ---------- oportunidades: segmentações (filtro salvo) e risco socioambiental ---------- */
.seg-barra { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.seg-barra .filtro { max-width: 100%; min-width: 0; }
.seg-barra .filtro select { max-width: min(60vw, 360px); text-overflow: ellipsis; }
.seg-dica { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--texto-3); min-width: 0; flex: 1 1 260px; }
.seg-dica svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.seg-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: start; margin-bottom: 12px; box-shadow: 0 0 0 1px var(--destaque-medio), var(--e1); }
.seg-cab-txt { min-width: 0; }
.seg-cab-tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg-cab-tit h2 { font-size: 16px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.seg-meta { margin: 4px 0 0; font-size: 12px; color: var(--texto-3); }
.seg-nums { grid-column: 2; grid-row: 1; min-width: 300px; }
.seg-acoes { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 10px; border-top: 1px solid var(--linha-fraca); }
.seg-acoes #seg-sair { margin-left: auto; }
.aviso-exemplo.info { background: var(--sutil); color: var(--texto-2); margin-top: -4px; }
.aviso-exemplo.info svg { color: var(--texto-3); }
.aviso-exemplo.info b { color: var(--texto); }
.sg-filtros { background: var(--sutil); border-radius: var(--r-painel); padding: 10px 12px; }
.sg-rot { display: block; font-size: 11.5px; font-weight: 500; color: var(--texto-3); margin-bottom: 6px; }
.sg-nota { margin: 6px 0 0; font-size: 12px; color: var(--texto-3); }
.campo-erro { font-size: 12px; font-weight: 500; color: var(--critico); }
.campo small { font-weight: 400; color: var(--texto-3); }
.seg-lista .cartao-cab { align-items: flex-start; }
.seg-itens { list-style: none; margin: 0 -16px -16px; padding: 0; border-top: 1px solid var(--linha); }
.seg-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--linha-fraca); }
.seg-item:last-child { border-bottom: 0; }
.seg-item-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.seg-item-txt b { font-weight: 600; }
.seg-item-txt .mudo { font-size: 12px; }
.seg-item-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.seg-item-meta .btn-texto { min-height: 0; font-size: 12px; }
.seg-item-n { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.seg-item-n b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.seg-item-n span { font-size: 11.5px; color: var(--texto-3); }
@media (max-width: 900px) {
  .seg-cab { grid-template-columns: minmax(0, 1fr); }
  .seg-nums { grid-column: 1; grid-row: auto; min-width: 0; }
  .seg-acoes #seg-sair { margin-left: 0; }
}
@media (max-width: 520px) {
  .seg-item { grid-template-columns: 28px minmax(0, 1fr); }
  .seg-item-n { grid-column: 2; flex-direction: row; align-items: baseline; gap: 4px; }
  .seg-item .btn { grid-column: 2; justify-self: start; }
  .seg-barra .filtro select { max-width: 55vw; }
}

/* ---------- equipe e acesso: menu do avatar, faixa "vendo como", etiquetas por papel, Configurações em abas ---------- */
.usuario { border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .02em; transition: box-shadow .12s ease; }
.usuario:hover, .usuario[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3.5px var(--destaque-medio); }
.barra-acoes { position: relative; }
.menu-usuario { position: absolute; top: calc(100% + 8px); right: 0; width: min(320px, calc(100vw - 24px)); background: var(--superficie); border-radius: var(--r-painel); box-shadow: var(--sombra-alta); padding: 6px; z-index: 60; transition: opacity .14s ease, transform .14s ease; }
.menu-usuario:not([hidden]) { animation: entrada .14s ease; }
.menu-usuario.saindo { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.menu-usuario-cab { display: flex; gap: 10px; align-items: center; padding: 8px 8px 10px; border-bottom: 1px solid var(--linha-fraca); min-width: 0; }
.menu-usuario-cab > div { min-width: 0; }
.menu-usuario-cab b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-usuario-cab span { display: block; font-size: 11.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-usuario-sec { font-size: 11.5px; font-weight: 500; color: var(--texto-3); padding: 8px 8px 0; }
.menu-usuario-rot { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); padding: 8px 8px 2px; }
.menu-usuario-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; background: none; border-radius: var(--r-ctl); color: var(--texto); text-align: left; font: inherit; cursor: pointer; min-height: 32px; }
.menu-usuario-item:hover, .menu-usuario-item:focus-visible { background: var(--sutil); outline: 0; }
.menu-usuario-item.atual { background: var(--destaque-bruma); }
.menu-usuario-item > svg { width: 14px; height: 14px; color: var(--destaque-txt); margin-left: auto; flex: none; }
.menu-usuario-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.menu-usuario-txt b { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-usuario-txt small { font-size: 11px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-usuario-pe { border-top: 1px solid var(--linha-fraca); margin-top: 4px; padding-top: 4px; }
.menu-usuario-pe .menu-usuario-item > svg { margin-left: 0; color: var(--texto-3); }
.faixa-vercomo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; padding: 4px 24px; font-size: 12px; color: var(--texto-2); background: var(--destaque-bruma); border-bottom: 1px solid var(--linha); }
.faixa-vercomo svg { width: 13px; height: 13px; color: var(--destaque-txt); flex: none; }
.faixa-vercomo b { color: var(--texto); font-weight: 600; }
.faixa-vercomo .btn-texto { min-height: 0; font-size: 12px; margin-left: auto; }
@media (max-width: 900px) { .faixa-vercomo { padding: 4px 16px; } }
.mini-avatar.media { width: 26px; height: 26px; font-size: 10.5px; }
.mini-avatar.grande { width: 30px; height: 30px; font-size: 11px; }
.etiqueta.perfil-admin { background: var(--papel-admin-sutil); color: var(--papel-admin-txt); }
.etiqueta.perfil-gestor { background: var(--papel-gestor-sutil); color: var(--papel-gestor-txt); }
.etiqueta.perfil-representante { background: var(--papel-rep-sutil); color: var(--papel-rep-txt); }
.etiqueta.perfil-admin, .etiqueta.perfil-gestor, .etiqueta.perfil-representante { padding: 0 7px; }
.chip-fixo { padding-right: 8px; }
.inativo { opacity: .55; cursor: not-allowed; }
.btn.inativo:hover { background: var(--superficie); }
.btn-primario.inativo:hover { background: var(--destaque); }
.sem-acesso { max-width: 560px; margin: 24px auto; }
.sem-acesso .sel-acoes { justify-content: center; }
.abas-cfg { margin-top: -8px; }
.abas-cfg a { white-space: nowrap; }
/* aba Equipe */
.eq-barra .segmento { flex: none; }
.eq-limite { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; border-radius: var(--r-ctl); }
.eq-limite b { color: var(--texto); font-weight: 600; }
.eq-limite .barrinha { width: 72px; display: inline-block; }
.cel-usuario { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cel-usuario b { display: flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.cel-usuario .mudo { display: block; font-size: 12px; }
.tabela-equipe td { font-size: 12.5px; }
.inativo-linha .cel-usuario, .inativo-linha .etiqueta, .inativo-linha .chips-crit, .inativo-linha .resp { opacity: .55; }
.eq-acoes { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.org-wrap { overflow-x: auto; padding: 20px 16px 24px; }
.org, .org ul { display: flex; justify-content: center; padding: 20px 0 0; margin: 0; list-style: none; position: relative; }
.org { padding-top: 0; min-width: max-content; }
.org li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px 8px 0; }
.org > li { padding-top: 0; }
.org li::before, .org li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 20px; border-top: 1px solid var(--linha-2); }
.org li::after { right: auto; left: 50%; border-left: 1px solid var(--linha-2); }
.org li:only-child::before, .org li:only-child::after { display: none; }
.org li:first-child::before, .org li:last-child::after { border: 0 none; }
.org li:last-child::before { border-right: 1px solid var(--linha-2); border-radius: 0 6px 0 0; }
.org li:first-child::after { border-radius: 6px 0 0 0; }
.org ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 20px; border-left: 1px solid var(--linha-2); }
.org > li::before, .org > li::after { display: none; }
.org-card { display: flex; align-items: center; gap: 8px; width: 216px; padding: 8px 10px; background: var(--superficie); border-radius: var(--r-painel); box-shadow: var(--sombra); text-align: left; }
.org-card.clicavel { cursor: pointer; transition: box-shadow .12s ease; }
.org-card.clicavel:hover, .org-card:focus-visible { box-shadow: 0 0 0 1px var(--destaque-medio), var(--e2); outline: 0; }
.org-card.inativo { opacity: .55; cursor: pointer; }
.org-txt { min-width: 0; flex: 1; line-height: 1.25; }
.org-txt b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-txt span { display: block; font-size: 11px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-card .etiqueta { font-size: 9.5px; height: 18px; padding: 0 5px; flex: none; }
.org-card .chip { flex: none; }
@media (max-width: 900px) {
  .org-wrap { overflow: visible; padding: 8px 16px 16px; }
  .org, .org ul { display: block; padding: 0; min-width: 0; }
  .org ul { margin: 6px 0 0 14px; padding-left: 12px; border-left: 1px solid var(--linha-2); }
  .org li { display: block; padding: 6px 0 0; }
  .org li::before, .org li::after, .org ul::before { display: none; }
  .org-card { width: auto; }
}
/* aba Grupos */
.avatares { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avatares-pilha { display: inline-flex; }
.avatares-pilha .mini-avatar { margin-left: -6px; }
.avatares-pilha .mini-avatar:first-child { margin-left: 0; }
.grupo-card { display: flex; flex-direction: column; }
.grupo-card .cartao-cab { margin-bottom: 8px; }
.chip.contorno.mudo { color: var(--texto-3); }
.grupo-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; }
.lista-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.lista-check.uma { grid-template-columns: minmax(0, 1fr); }
.lista-check .check { min-height: 26px; flex-wrap: wrap; }
.lista-check .check .mono { color: var(--texto-3); margin-left: 2px; }
.lista-check .check .chip { margin-left: 2px; }
.entrada-massa { display: flex; gap: 8px; align-items: center; }
.entrada-massa input { flex: 1; min-width: 0; height: 30px; border: 0; box-shadow: var(--anel); border-radius: var(--r-ctl); padding: 0 10px; background: var(--superficie); font: inherit; font-size: 13px; color: var(--texto); }
.entrada-massa input:focus { outline: 0; box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.massa-msg { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 12.5px; }
.massa-msg:empty { display: none; }
.massa-ok { display: flex; gap: 8px; align-items: flex-start; color: var(--texto); }
.massa-ok svg { width: 14px; height: 14px; color: var(--ok); flex: none; margin-top: 1px; }
.massa-ok.mudo svg { color: var(--texto-3); }
.massa-fora { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-painel); background: var(--alerta-sutil); color: var(--texto); flex-wrap: wrap; }
.massa-fora svg { color: var(--alerta); width: 14px; height: 14px; flex: none; margin-top: 1px; }
.massa-fora span { flex: 1; min-width: 0; }
.massa-fora a { color: var(--destaque-txt); font-weight: 500; white-space: nowrap; }
.massa-fora a:hover { text-decoration: underline; }
/* aba Perfis */
.perfil-card { display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--cor-perfil, var(--linha-2)), var(--e1); }
.perfil-card.perfil-admin { --cor-perfil: var(--papel-admin); }
.perfil-card.perfil-gestor { --cor-perfil: var(--papel-gestor); }
.perfil-card.perfil-representante { --cor-perfil: var(--papel-rep); }
.perfil-ico { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--cor-perfil); color: #FFFFFF; flex: none; }
.perfil-ico svg { width: 14px; height: 14px; }
.perfil-txt { margin: 0; font-size: 12.5px; color: var(--texto-2); line-height: 1.45; }
.perfil-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.perfil-lista li { display: flex; gap: 6px; align-items: flex-start; }
.perfil-lista svg { width: 14px; height: 14px; color: var(--ok); flex: none; margin-top: 2px; }
.tabela .centro { text-align: center; }
.tabela-matriz .resp svg { width: 14px; height: 14px; color: var(--texto-3); }
.marca-ok { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok-sutil); color: var(--ok); }
.marca-ok svg { width: 12px; height: 12px; }
/* aba Plano */
.mun-res { display: flex; flex-direction: column; max-height: 240px; overflow: auto; margin-top: 8px; border-radius: var(--r-painel); box-shadow: var(--anel); }
.mun-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; text-align: left; font: inherit; color: var(--texto); border-bottom: 1px solid var(--linha-fraca); cursor: pointer; }
.mun-item:last-child { border-bottom: 0; }
.mun-item:hover, .mun-item.ativo { background: var(--sutil); }
.mun-item:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--destaque-medio); }
.mun-item > svg { width: 14px; height: 14px; color: var(--texto-3); flex: none; }
.mun-item > span { flex: 1; min-width: 0; }
.mun-item b { display: block; font-size: 13px; font-weight: 500; }
.mun-item small { color: var(--texto-3); font-size: 11.5px; }
.mun-item .chip { margin-left: auto; flex: none; }
.mun-detalhe { margin-top: 12px; }
.mun-detalhe small { display: block; font-size: 11.5px; margin-top: 2px; }
@media (max-width: 1180px) and (min-width: 701px) { .grupos-grade, .perfis-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grupo-editor { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .lista-check { grid-template-columns: minmax(0, 1fr); } .eq-limite { margin-left: 0; width: 100%; } .massa-fora a { white-space: normal; } }
/* aba Produtos e potencial: catálogo, interruptor, análise do produto e editor */
.switch { position: relative; width: 34px; height: 20px; border-radius: 999px; border: 0; padding: 0; background: var(--linha-2); cursor: pointer; flex: none; transition: background .15s ease; vertical-align: middle; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--superficie); box-shadow: var(--e2); transition: transform .15s ease; }
.switch[aria-checked="true"] { background: var(--destaque-medio); }
.switch[aria-checked="true"]::after { transform: translateX(14px); }
.switch:hover { filter: brightness(.97); }
.switch:focus-visible { outline: 0; box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.switch.inativo { cursor: not-allowed; opacity: .6; }
.switch-linha { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto); }
.switch-linha > span { min-width: 0; }
.switch-linha b { font-weight: 600; }
.switch-linha small { display: block; font-size: 11.5px; color: var(--texto-3); margin-top: 1px; }
.tabela-prod td { font-size: 12.5px; }
.tabela-prod .grupo-linha td { height: 30px; padding-top: 8px; padding-bottom: 6px; background: var(--sutil-2); border-bottom: 1px solid var(--linha); font-size: 12px; color: var(--texto-2); }
.tabela-prod .grupo-linha td > span { display: inline-flex; align-items: center; gap: 8px; }
.tabela-prod .grupo-linha b { font-weight: 600; color: var(--texto); }
.tabela-prod .grupo-linha svg { width: 13px; height: 13px; color: var(--texto-3); }
.tabela-prod tbody tr.grupo-linha:hover { background: var(--sutil-2); }
.tabela-prod tr.linha-sel td { background: var(--destaque-bruma); box-shadow: inset 2px 0 0 var(--destaque); }
.cel-sub { display: block; font-size: 11.5px; white-space: nowrap; }
.cel-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cel-prod b { display: flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.cel-prod b a { color: inherit; }
.cel-prod .mudo { display: block; font-size: 12px; white-space: nowrap; }
.cel-prod .chip { height: 18px; font-size: 10.5px; }
.prod-acoes { display: inline-flex; gap: 6px; justify-content: flex-end; }
.prod-acoes .btn-remover.confirmar { white-space: nowrap; }
.fora-crit { display: inline-block; min-width: 20px; text-align: center; cursor: help; border-radius: 4px; }
.fora-crit:focus-visible { outline: 0; box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.analise-prod { margin-bottom: 16px; box-shadow: 0 0 0 1px var(--ouro), var(--e1); }
.analise-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mini-kpis.auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mini-kpi > small { display: block; font-size: 11.5px; color: var(--texto-3); margin-top: 2px; }
.mini-kpi b small { font-size: 12px; font-weight: 500; color: var(--texto-3); margin-left: 2px; }
.analise-grade { align-items: start; }
.analise-grade .bloco-titulo .segmento { margin-left: auto; }
.pot-form .bloco-titulo.secao { font-size: 13px; font-weight: 600; color: var(--texto); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha); }
.pot-form .bloco-titulo.secao:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.emb-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px; }
.emb-campos .emb-rot { height: 32px; border: 0; box-shadow: var(--anel); border-radius: var(--r-ctl); padding: 0 10px; background: var(--superficie); font: inherit; font-size: 13px; font-weight: 500; color: var(--texto); min-width: 0; }
.emb-campos .emb-rot:focus { outline: 0; box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.pot-form .campo small { display: block; font-weight: 400; color: var(--texto-3); font-size: 11.5px; }
.crit-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.crit-linha { display: grid; grid-template-columns: 44px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 6px; align-items: center; }
.crit-conj { font-size: 12px; font-weight: 600; color: var(--texto-3); text-align: center; }
.crit-linha select, .crit-linha .entrada { height: 30px; min-width: 0; }
.crit-linha select { border: 0; box-shadow: var(--anel); border-radius: var(--r-ctl); padding: 0 8px; background: var(--superficie); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--texto); }
.crit-linha select:focus { outline: 0; box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.crit-linha .gaveta-fechar { margin-left: 0; }
.crit-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.crit-vazio { margin: 8px 0 0; font-size: 12.5px; color: var(--texto-3); }
.pot-medidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 6px; }
.pot-medida { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pot-medida span { font-size: 11.5px; color: var(--texto-3); }
.destaque-ouro .pot-medida b { display: block; font-size: 13.5px; font-weight: 600; white-space: normal; }
.pot-medida b small { font-size: 11.5px; font-weight: 500; color: var(--texto-3); }
.pot-linha.fora .pot-linha-top span { color: var(--texto-3); font-weight: 500; }
.destaque-ouro .pot-linha.fora .pot-linha-top b { font-size: 14px; }
@media (max-width: 520px) {
  .crit-linha { display: flex; flex-wrap: wrap; }
  .crit-conj { width: 100%; text-align: left; }
  .crit-linha select[data-crit-campo] { width: calc(100% - 34px); }
  .crit-linha [data-crit-op], .crit-linha .entrada, .crit-linha select[data-crit-val] { flex: 1; min-width: 110px; }
  .emb-campos { grid-template-columns: minmax(0, 1fr); }
  .pot-medidas { grid-template-columns: minmax(0, 1fr); }
  .mini-kpis.auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analise-grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- pacote 2 de UX: celular, estados vazios, origem da ficha, "Como calculamos", folhas ---------- */
.so-celular { display: none !important; }

/* "Como calculamos": botão discreto e modal da conta */
.como-calc { min-height: 0; font-size: 12px; font-weight: 500; color: var(--texto-3); gap: 3px; vertical-align: baseline; white-space: nowrap; }
.como-calc svg { width: 13px; height: 13px; }
.como-calc:hover, .como-calc:focus-visible { color: var(--destaque-txt); text-decoration: none; }
.kpi-det .como-calc { display: inline-flex; margin-left: 2px; }
.mini-kpi .como-calc { display: flex; margin-top: 4px; }
.resumo-lista .como-calc { margin-left: 6px; }
.th-info { margin-left: 2px; opacity: .55; vertical-align: middle; border: 0; background: none; padding: 0; color: inherit; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; }
.th-info svg { width: 12px; height: 12px; }
.th-pot:hover .th-info, .th-info:hover, .th-info:focus-visible { opacity: 1; color: var(--destaque-txt); }
.como-modal { width: min(680px, 100%); }
.cc-sel { margin-bottom: 12px; }
.cc-sel select { width: 100%; }
.cc-contexto { font-size: 12.5px; color: var(--texto-2); margin-bottom: 10px; }
.cc-formula { background: var(--sutil); border-radius: var(--r-painel); padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--texto); margin-top: 8px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cc-formula .sg-rot { margin-bottom: 4px; }
.cc-formula b { font-weight: 600; }
.cc-tabela-wrap { margin: 12px 0 0; border-top: 0; border-radius: var(--r-painel); box-shadow: var(--anel); }
.cc-tabela th, .cc-tabela td { height: 32px; font-size: 12.5px; }
.cc-tabela th:first-child, .cc-tabela td:first-child { padding-left: 12px; }
.cc-tabela th:last-child, .cc-tabela td:last-child { padding-right: 12px; }
.cc-tabela th { position: static; }
.cc-total td { background: var(--sutil-2); font-weight: 600; }
.cc-dados { margin-top: 12px; font-size: 12.5px; }
.cc-dados b { font-weight: 500; }
.cc-imoveis { margin: 12px 0 0; font-size: 12.5px; color: var(--texto-2); line-height: 1.5; }
.cc-imoveis b { color: var(--texto); font-weight: 600; }

/* estado vazio por filtro */
.vazio-filtros { padding: 32px 20px; }
.vazio-filtros .chips-crit { justify-content: center; margin-top: 4px; }
.vazio-filtros .btn, .vazio .sel-acoes { margin-top: 10px; }
.vazio .sel-acoes { justify-content: center; }
.vazio .sel-acoes .btn { flex: none; }
.kanban.vazio-quadro { display: block; }
.kanban.vazio-quadro .vazio { background: var(--superficie); border-radius: var(--r-cartao); box-shadow: var(--sombra); }

/* responsável sugerido, visível antes de adicionar ao pipeline */
.resp-sugerido { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--texto-2); text-align: left; line-height: 1.35; }
.resp-sugerido svg { width: 14px; height: 14px; color: var(--texto-3); flex: none; margin-top: 1px; }
.resp-sugerido b { color: var(--texto); font-weight: 600; }
.resp-sugerido small { display: block; font-size: 11.5px; color: var(--texto-3); }
.ficha-resp { flex-basis: 100%; display: flex; justify-content: flex-end; }
.vazio .resp-sugerido { margin-top: 6px; }
.gaveta-corpo .resp-sugerido { padding: 8px 10px; border-radius: var(--r-painel); background: var(--sutil); }
.pot-acoes { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.terr-pot { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border-radius: var(--r-painel); background: var(--ouro-sutil); font-size: 12px; color: var(--texto-2); }
.terr-pot b { font-weight: 600; color: var(--texto); font-size: 13px; }
.terr-pot .como-calc { margin-left: auto; }

/* origem da ficha: voltar para onde ela foi aberta */
.migalha-voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--destaque-txt); font-weight: 500; min-height: 28px; }
.migalha-voltar svg { width: 14px; height: 14px; }
.migalha-voltar:hover { text-decoration: underline; color: var(--destaque-txt); }
.ficha-cab h1:focus { outline: 0; }
.ficha-cab h1:focus-visible { outline: 2px solid var(--destaque-medio); outline-offset: 4px; border-radius: 4px; }
.cab h1[tabindex]:focus { outline: 0; }
.cab h1[tabindex]:focus-visible { outline: 2px solid var(--destaque-medio); outline-offset: 4px; border-radius: 4px; }

/* próxima ação com data livre */
.atv-data-leg { font-size: 11.5px; font-weight: 400; }
.atv-data-leg:empty { display: none; }
.form-atv .campo input[type=date].erro { box-shadow: 0 0 0 1px var(--critico); }

/* ficha: abas Resumo | Atividade e botão flutuante, só quando o painel de atividade cai para baixo */
.ficha-abas { display: none; }
.fab { display: none; }
@media (max-width: 1180px) {
  .ficha-abas { display: flex; gap: 4px; position: sticky; top: var(--barra); z-index: 18; background: var(--fundo); border-bottom: 1px solid var(--linha); padding: 0 24px; }
  .ficha-abas button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; font: inherit; font-size: 13px; font-weight: 500; color: var(--texto-2); border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .ficha-abas button svg { width: 14px; height: 14px; color: var(--texto-3); }
  .ficha-abas button.ativo { color: var(--texto); font-weight: 600; border-bottom-color: var(--destaque); }
  .ficha-abas button.ativo svg { color: var(--destaque-txt); }
  .ficha-abas .aba-n { background: var(--critico-sutil); color: var(--critico); }
  .ficha.aba-atividade .ficha-principal { display: none; }
  .ficha:not(.aba-atividade) .ficha-atividade { display: none; }
  .ficha-atividade { border-top: 0; }
  .fab { display: inline-flex; position: fixed; right: 16px; bottom: 16px; z-index: 35; height: 44px; padding: 0 16px 0 14px; border-radius: 22px; font-size: 13px; box-shadow: var(--e4); }
  .fab svg { width: 16px; height: 16px; }
  .ficha.aba-atividade .fab { display: none; }
}

/* painel lateral dos mapas no celular: botão explícito para abrir e recolher */
.painel-alternar { position: absolute; top: 8px; right: 12px; z-index: 2; align-items: center; gap: 4px; height: 36px; padding: 0 10px 0 12px; border: 0; border-radius: 999px; background: var(--sutil); color: var(--texto); font: inherit; font-size: 12.5px; font-weight: 600; box-shadow: var(--anel); }
.painel-alternar svg { width: 14px; height: 14px; transition: transform .2s ease; transform: rotate(180deg); }
.painel-alternar[aria-expanded="true"] svg { transform: none; }

/* folha (bottom sheet): o mesmo #modal, encostado na base, com puxador e área segura */
.modal-fundo.como-folha { align-items: end; justify-items: stretch; padding: 0; }
.modal-fundo.como-folha .modal { width: 100%; max-width: 100%; border-radius: var(--r-modal) var(--r-modal) 0 0; max-height: min(88dvh, calc(100dvh - 24px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
.modal-fundo.abrindo.como-folha .modal { animation: folha-entra .2s cubic-bezier(.2, .7, .2, 1); }
.modal-fundo.saindo.como-folha .modal { animation: folha-sai .15s ease forwards; }
@keyframes folha-entra { from { transform: translateY(28px); opacity: 0; } }
@keyframes folha-sai { to { transform: translateY(20px); opacity: 0; } }
.folha-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--linha-2); margin: 8px auto 4px; }
.folha-conta { display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; border-bottom: 1px solid var(--linha-fraca); }
.folha-conta-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.folha-conta-txt b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folha-conta-txt span { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folha-lista { display: flex; flex-direction: column; padding: 6px 8px; }
.folha-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 10px; border-radius: var(--r-painel); font: inherit; font-size: 14px; font-weight: 500; color: var(--texto); border: 0; background: none; text-align: left; width: 100%; }
.folha-item svg { width: 18px; height: 18px; color: var(--texto-3); flex: none; }
.folha-item:hover, .folha-item:focus-visible { background: var(--sutil); outline: 0; }
.folha-item.ativo { background: var(--destaque-sutil); color: var(--destaque-txt); }
.folha-item.ativo svg { color: var(--destaque-txt); }
.folha-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px 12px; border-top: 1px solid var(--linha-fraca); font-size: 11.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.folha-pe .btn-texto { font-size: 12px; }
.busca-campo { display: flex; align-items: center; gap: 8px; height: 44px; margin: 4px 12px 8px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--sutil); color: var(--texto-3); }
.busca-campo input { flex: 1; min-width: 0; border: 0; background: none; font-size: 14px; color: var(--texto); outline: 0; }
.busca-campo input::-webkit-search-cancel-button { display: none; }
.busca-campo:focus-within { box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.busca-res-folha { padding: 0 8px 8px; min-height: 120px; }
.busca-dica { margin: 8px 8px 0; font-size: 12.5px; }

/* navegação inferior */
.nav-inferior { display: none; }
@media (max-width: 900px) {
  .nav-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: stretch; height: calc(56px + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px); background: var(--lateral-fundo); border-top: 1px solid var(--linha); }
  .nav-inferior a, .nav-inferior button { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin: 4px 0; padding: 0 2px; border: 0; border-radius: var(--r-painel); background: none; font: inherit; font-size: 10.5px; font-weight: 500; color: var(--texto-2); }
  .nav-inferior span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-inferior svg { width: 20px; height: 20px; color: var(--texto-3); }
  .nav-inferior .ativo { color: var(--destaque-txt); font-weight: 600; }
  .nav-inferior .ativo svg { color: var(--destaque-txt); }
  .nav-inferior a:active, .nav-inferior button:active { background: var(--sutil-2); }
  .nav-inferior .contador { position: absolute; top: 2px; left: calc(50% + 4px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ouro); color: var(--sobre-ouro); font-size: 9.5px; font-weight: 600; line-height: 16px; text-align: center; max-width: none; }
  .toast { bottom: calc(56px + 16px + env(safe-area-inset-bottom, 0px)); }
  .fab { bottom: calc(56px + 12px + env(safe-area-inset-bottom, 0px)); }
  .ficha-abas { padding: 0 16px; }
  .icone-btn.so-celular { display: grid !important; }
  .painel-alternar.so-celular { display: inline-flex !important; }
  .gaveta-pe .resp-sugerido { display: none; }

  /* Meu dia: o trabalho do dia vem antes dos indicadores e da semana; os indicadores viram uma faixa rolável */
  .meudia { display: flex; flex-direction: column; gap: 16px; }
  .meudia .cab { order: 0; margin-bottom: 0; }
  .meudia .md-grade { display: contents; }
  .meudia .md-trabalho { order: 1; }
  .meudia .md-kpis { order: 2; margin-bottom: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin-left: -16px; margin-right: -16px; padding: 2px 16px; scrollbar-width: none; }
  .meudia .md-kpis::-webkit-scrollbar { display: none; }
  .meudia .md-kpis .kpi { flex: 0 0 auto; width: min(72vw, 260px); scroll-snap-align: start; padding: 10px 12px; }
  .meudia .md-kpis .kpi-val { font-size: 20px; }
  .meudia .md-semana { order: 3; }
  .meudia .md-lado { order: 4; }

  /* alvos de toque de pelo menos 40 px (o desktop mantém as medidas densas) */
  .btn, .btn-p { min-height: 40px; height: auto; }
  .btn-texto, .lista-lado .btn-texto, .pot-nota .btn-texto, .sel-card .btn-texto, .terr-corpo .btn-texto, .seg-item-meta .btn-texto, .tit-pe .btn-texto, .pot-linhas .btn-texto, .painel-filtros-pe .btn-texto, .faixa-demo .btn-texto, .faixa-vercomo .btn-texto { min-height: 40px; }
  .como-calc { min-height: 40px; margin-top: -12px; margin-bottom: -12px; }
  .filtro { min-height: 40px; height: auto; }
  .filtro select, .filtro input:not([type=range]) { min-height: 38px; }
  .check, .camada { min-height: 40px; }
  .check input, .camada input { width: 18px; height: 18px; }
  .seg, .segmento.pequeno .seg { min-height: 36px; }
  .chip-grande button { width: 40px; height: 40px; margin: -7px -10px -7px -4px; border-radius: 50%; }
  .lista-item, .trab-item { min-height: 44px; }
  .abas-visao a, .abas-visao button { height: 40px; }
  .tabela th button { min-height: 40px; }
  .tabela td { height: 44px; }
  .th-editar, .th-info { width: 40px; height: 40px; }
  .gaveta-fechar, .icone-btn { width: 40px; height: 40px; }
  .usuario { width: 40px; height: 40px; font-size: 12px; }
  .menu-usuario-item, .busca-item, .mun-item { min-height: 44px; }
  .terr-cab { min-height: 48px; }
  .switch { width: 48px; height: 28px; }
  .switch::after { width: 24px; height: 24px; }
  .switch[aria-checked="true"]::after { transform: translateX(20px); }
  .campo input, .campo select, .entrada, .faixa input, .faixa select, .form-atv .campo input, .form-atv .campo select, .crit-linha select, .crit-linha .entrada, .entrada-massa input, .emb-campos .emb-rot, .mapeamento select, .nota-nova input { height: 40px; }
  .dossie-det summary, .graf-dados summary { min-height: 40px; }
  .modelo { min-height: 56px; }
  .lateral-recolher { display: none; }
}
@media (max-width: 900px) {
  /* faixas do topo: ícone e texto na mesma linha, ação na linha seguinte, sem crescer demais */
  .faixa-demo, .faixa-vercomo { gap: 4px 8px; padding: 6px 16px; }
  .faixa-demo svg, .faixa-vercomo svg { align-self: flex-start; margin-top: 2px; }
  .faixa-demo-txt { flex: 1 1 200px; }
  .faixa-demo .btn-texto, .faixa-vercomo .btn-texto, .faixa-demo .faixa-acoes .btn { min-height: 28px; }
}

/* ---------- proprietários (0.9.0): busca protegida, resultados, painel do proprietário e registro de consultas ---------- */
.dono-busca { padding: 14px 16px; margin-bottom: 16px; }
.dono-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.dono-campo { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--r-ctl); background: var(--superficie); box-shadow: var(--anel); color: var(--texto-3); min-width: 0; }
.dono-campo:focus-within { box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.dono-campo svg { width: 16px; height: 16px; flex: none; }
.dono-campo input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--texto); outline: 0; }
.dono-campo input::-webkit-search-cancel-button { display: none; }
.dono-form .filtro { height: 36px; }
.dono-form .filtro select { max-width: 170px; }
.dono-btn { height: 36px; padding: 0 14px; }
.dono-rodape { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--texto-3); }
.dono-protecao { display: flex; gap: 6px; align-items: flex-start; flex: 1 1 320px; min-width: 0; max-width: 760px; line-height: 1.45; }
.dono-protecao svg { width: 14px; height: 14px; flex: none; color: var(--destaque-medio); margin-top: 2px; }
.dono-cota { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--texto-3); border-radius: var(--r-ctl); padding: 2px 4px; }
.dono-cota:focus-visible { outline: 2px solid var(--destaque-medio); outline-offset: 1px; }
.dono-cota .barrinha { width: 56px; margin: 0; }
.dono-cota.cheia { color: var(--critico); font-weight: 600; }
.dono-cota.cheia .barrinha i { background: var(--critico); }
.dono-aviso { margin-bottom: 0; }
.dono-inicio { padding: 48px 20px; }
.dono-inicio span { max-width: 480px; }
.dono-lista-cartao { padding-top: 12px; }
.dono-resumo { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 0 0 8px; border-bottom: 1px solid var(--linha); }
.dono-resumo .resumo-lista { margin-left: 0; }
.dono-resumo .btn-texto { margin-left: auto; font-size: 12px; }
.dono-lista { display: flex; flex-direction: column; }
.dono-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 32px; gap: 12px; align-items: center; width: calc(100% + 16px); margin: 0 -8px; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--linha-fraca); border-radius: var(--r-ctl); background: none; font: inherit; color: var(--texto); text-align: left; cursor: pointer; min-height: 56px; }
.dono-item:last-child { border-bottom: 0; }
.dono-item:hover { background: var(--sutil); }
.dono-item:hover .dono-nome b { color: var(--destaque-txt); }
.dono-item:focus-visible { outline: 2px solid var(--destaque-medio); outline-offset: -2px; }
.dono-txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dono-txt > b { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.dono-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12px; color: var(--texto-3); }
.dono-meta .mono { font-size: 11.5px; }
.dono-mun { display: inline-flex; align-items: center; gap: 3px; }
.dono-mun svg { width: 12px; height: 12px; }
.dono-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dono-nums { display: grid; grid-template-columns: 84px 128px 200px; gap: 12px; text-align: right; font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.dono-nums b { color: var(--texto); font-weight: 600; font-size: 13px; }
.dono-sit { overflow: hidden; text-overflow: ellipsis; }
.dono-seta { color: var(--texto-3); display: grid; place-items: center; }
.dono-seta svg { width: 16px; height: 16px; }
.dono-mais { display: flex; justify-content: center; padding-top: 14px; }
.dono-fim { text-align: center; font-size: 12px; margin: 12px 0 0; }
.dono-esq { display: flex; flex-direction: column; gap: 10px; }
/* painel do proprietário (modal no desktop, folha no celular) */
.dono-modal { width: min(720px, 100%); }
.dono-cab-txt { min-width: 0; flex: 1; }
.dono-cab-txt .ficha-selos { margin: 0 0 6px; }
.dono-cab-txt h2 { overflow-wrap: anywhere; outline: 0; }
.dono-kpis { margin-bottom: 12px; }
.dono-kpis .mini-kpi b { font-size: 15px; white-space: nowrap; }
.dono-imoveis { border-top: 1px solid var(--linha); }
.dono-im { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 36px; gap: 10px; align-items: center; }
.dono-im-sit { display: flex; justify-content: flex-end; }
.dono-im-score { display: grid; place-items: center; }
.dono-sem-score { font-size: 13px; }
.dono-vazio { padding: 28px 16px; }
.dono-pe { flex-wrap: wrap; }
.sel-card-nome { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 4px; overflow-wrap: anywhere; }
.tit-outros { font-size: 12px; min-height: 24px; }
.tit-outros-vazio { font-size: 12px; align-self: center; }
.tabela-cons .cel-quando { white-space: nowrap; font-size: 12px; }
@media (max-width: 1180px) {
  .dono-nums { grid-template-columns: 76px 112px 160px; }
}
@media (max-width: 900px) {
  .dono-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dono-campo { grid-column: 1 / -1; height: 44px; }
  .dono-form .filtro { min-height: 40px; height: auto; width: 100%; min-width: 0; }
  .dono-form .filtro select { flex: 1; min-width: 0; max-width: none; }
  .dono-btn { grid-column: 1 / -1; justify-content: center; min-height: 44px; }
  .dono-rodape { flex-direction: column; align-items: stretch; }
  .dono-protecao { flex: 0 0 auto; } /* em coluna, a base flexível viraria altura */
  .dono-cota { justify-content: flex-start; min-height: 40px; }
  .dono-item { grid-template-columns: 28px minmax(0, 1fr) 16px; padding: 12px 8px; row-gap: 6px; }
  .dono-item .lista-ico { grid-row: 1; grid-column: 1; }
  .dono-txt { grid-row: 1; grid-column: 2; }
  .dono-nums { grid-row: 2; grid-column: 2; grid-template-columns: auto auto; justify-content: start; text-align: left; white-space: normal; gap: 2px 12px; }
  .dono-sit { grid-column: 1 / -1; }
  .dono-seta { grid-row: 1 / span 2; grid-column: 3; }
  .dono-resumo .btn-texto, .tit-outros { min-height: 40px; }
  .dono-im { grid-template-columns: 28px minmax(0, 1fr) 36px; row-gap: 4px; }
  .dono-im .lista-ico { grid-row: 1; grid-column: 1; }
  .dono-im .lista-txt { grid-row: 1; grid-column: 2; }
  .dono-im .lista-txt span { white-space: normal; }
  .dono-im-sit { grid-row: 2; grid-column: 2; justify-content: flex-start; }
  .dono-im-score { grid-row: 1 / span 2; grid-column: 3; }
  .dono-pe .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- visão do produtor (0.10.0): página do proprietário com resumo, tabela, mapa, uso do solo e relacionamento ---------- */
.vp { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vp .cab, .vp .kpis, .vp .grade { margin-bottom: 0; }
.vp-cab .cab-txt p { margin-top: 8px; }
.vp-selos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.vp-selos .mono { font-size: 12px; color: var(--texto-2); }
.vp-fora { margin: -4px 0 0; }
.vp-kpi-pot .kpi-det .como-calc { display: inline-flex; }
.vp-pilha { height: 8px; border-radius: 4px; margin-top: 10px; }
.vp-legenda { margin-top: 8px; }
.vp-sem-pot { font-size: 12px; margin: 10px 0 0; }
.vp-tabela-cartao .cartao-cab .resumo-lista { margin-left: auto; }
.tabela-produtor .cel-pontos .score { justify-content: flex-end; }
.tabela-produtor .cel-sub { display: block; font-size: 11.5px; }
.vp-mapa { height: 380px; }
.vp-mapa-vazio { padding: 24px 16px; text-align: center; }
.vp-legenda-mapa { margin-top: 10px; }
.vp-negs .lista-lado { white-space: nowrap; }
.vp-atr { color: var(--critico); font-weight: 600; }
.vp-timeline { margin-top: 4px; }
.vp-tl-im { font-size: 12px; min-height: 0; }
.vp-vazio { padding: 24px 12px; }
.vp-contato { padding: 10px 0; border-top: 1px solid var(--linha-fraca); }
.vp-contato:first-of-type { border-top: 0; padding-top: 0; }
.vp-contato-cab { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin-bottom: 4px; }
.vp-contato-cab b { font-size: 13.5px; font-weight: 600; }
.vp-contato-cab .mudo { font-size: 12px; }
.vp-contato-cab .btn-texto { font-size: 12px; min-height: 0; }
.vp-contato .tit-acoes { margin-top: 8px; }
.cc-texto { font-size: 13px; line-height: 1.5; color: var(--texto); }
.cc-texto p { margin: 0 0 10px; }
.cc-texto p:last-child { margin-bottom: 0; }
.cart-produtor { display: flex; width: fit-content; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; min-height: 0; margin-top: 3px; line-height: 1.3; }
.cart-produtor svg { width: 12px; height: 12px; flex: none; }
/* linha de resultado: o nome é o link (estendido pela linha toda) e a prévia abre o painel rápido */
.dono-item { position: relative; cursor: default; }
.dono-nome { color: inherit; }
.dono-nome::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-ctl); }
.dono-nome:focus-visible { outline: 0; }
.dono-item:has(.dono-nome:focus-visible) { outline: 2px solid var(--destaque-medio); outline-offset: -2px; }
.dono-previa { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--r-ctl); background: none; color: var(--texto-3); cursor: pointer; }
.dono-previa:hover, .dono-previa:focus-visible { background: var(--superficie); box-shadow: var(--anel); color: var(--destaque-txt); outline: 0; }
.dono-previa svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .vp-mapa { height: 280px; }
  .vp-cab .cab-acoes { width: 100%; }
  .vp-cab .cab-acoes .btn { flex: 1 1 auto; justify-content: center; }
  .dono-previa { width: 40px; height: 40px; }
  .dono-item { grid-template-columns: 28px minmax(0, 1fr) 40px; }
  .dono-previa { grid-row: 1 / span 2; grid-column: 3; }
  /* a tabela de imóveis vira cartões: cada célula com o rótulo da coluna */
  .tabela-produtor, .tabela-produtor tbody { display: block; }
  .tabela-produtor thead { display: none; }
  .tabela-produtor tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--linha-fraca); }
  .tabela-produtor tbody tr:last-child { border-bottom: 0; }
  .tabela-produtor td { display: block; height: auto; padding: 0; border: 0; text-align: left; min-width: 0; }
  .tabela-produtor td::before { content: attr(data-rot); display: block; font-size: 11px; font-weight: 500; color: var(--texto-3); margin-bottom: 2px; }
  .tabela-produtor td.cel-nome { grid-column: 1 / -1; padding: 0; }
  .tabela-produtor td.cel-nome::before { display: none; }
  .tabela-produtor .cel-pontos .score { justify-content: flex-start; }
  .vp-tl-im, .vp-contato-cab .btn-texto { min-height: 0; }
}

/* ---------- atividades (0.11.0): tipos configuráveis, registro, lembretes, agenda e histórico ---------- */
.atv-ico { color: var(--texto-3); }
.lista-ico.atv-ico { background: color-mix(in srgb, currentColor 14%, transparent); }
.sino-n { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ouro); color: var(--sobre-ouro); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--fundo); }
.sino-n.critico { background: var(--critico); color: #fff; }
.acao-prox .atv-ico svg { width: 13px; height: 13px; color: currentColor; }
.card-op-atv { margin-left: 6px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: var(--r-ctl); background: var(--sutil); color: var(--texto-2); cursor: pointer; flex: none; }
.card-op-atv:hover, .card-op-atv:focus-visible { background: var(--destaque-sutil); color: var(--destaque-txt); outline: 0; }
.card-op-atv svg { width: 14px; height: 14px; }
.tl-res { margin: 4px 0 2px; }
.tl-parts { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 11.5px; color: var(--texto-3); }
.atv-pe-botoes { display: flex; flex-direction: column; gap: 8px; }
.atv-pe-botoes .btn-primario { justify-content: center; }
.atv-tipos-rapidos { display: flex; flex-wrap: wrap; gap: 6px; }
.atv-tipos-rapidos .atv-ico svg { width: 14px; height: 14px; color: currentColor; }
/* registrar atividade */
.modal-atv { width: min(640px, 100%); }
.modal-atv .form-atv { gap: 10px; }
.ma-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.ma-tipo { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--sutil); color: var(--texto-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.ma-tipo svg { width: 14px; height: 14px; color: var(--cor); }
.ma-tipo:hover { background: var(--sutil-2); color: var(--texto); }
.ma-tipo.ativo { background: color-mix(in srgb, var(--cor) 16%, var(--superficie)); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--cor); font-weight: 600; }
.ma-tipo:focus-visible { outline: 2px solid var(--destaque-medio); outline-offset: 1px; }
.ma-parts summary { font-size: 12.5px; font-weight: 500; color: var(--texto-2); cursor: pointer; min-height: 28px; display: flex; align-items: center; }
.ma-parts .lista-check { margin-top: 6px; }
.ma-secao { margin-top: 4px; }
.modal-atv .campos-2 { margin-top: 0; }
.modal-atv input[type=time], .modal-atv input[type=date] { font-variant-numeric: tabular-nums; }
/* central de lembretes */
.lemb-modal { width: min(680px, 100%); }
.lemb-corpo { display: flex; flex-direction: column; gap: 14px; }
.lemb-sec .bloco-titulo { justify-content: flex-start; gap: 8px; }
.lemb-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha-fraca); }
.lemb-item:last-child { border-bottom: 0; }
.lemb-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lemb-tit b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.lemb-tit:hover b { color: var(--destaque-txt); }
.lemb-meta { font-size: 12px; color: var(--texto-3); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.lemb-quando { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); flex-wrap: wrap; }
.lemb-quando svg { width: 13px; height: 13px; color: var(--texto-3); }
.lemb-quando.atr { color: var(--critico); }
.lemb-sel { border: 0; background: var(--sutil); border-radius: var(--r-ctl); font: inherit; font-size: 11.5px; font-weight: 500; color: var(--texto-2); padding: 2px 6px; min-height: 24px; }
.lemb-acoes { display: flex; gap: 6px; align-items: center; }
.lemb-adiar { position: relative; }
.lemb-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 180px; background: var(--superficie); border-radius: var(--r-painel); box-shadow: var(--sombra-alta); padding: 4px; display: flex; flex-direction: column; }
.lemb-menu button { border: 0; background: none; text-align: left; font: inherit; font-size: 12.5px; padding: 6px 8px; border-radius: var(--r-ctl); color: var(--texto); min-height: 32px; cursor: pointer; }
.lemb-menu button:hover, .lemb-menu button:focus-visible { background: var(--sutil); outline: 0; }
.lemb-data { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto-2); padding: 6px 8px; border-top: 1px solid var(--linha-fraca); margin-top: 2px; }
.lemb-data input { height: 30px; border: 0; box-shadow: var(--anel); border-radius: var(--r-ctl); padding: 0 8px; font: inherit; color: var(--texto); background: var(--superficie); }
.lemb-vazio { margin: 0; font-size: 12.5px; }
/* agenda do Meu dia */
.agenda { display: flex; flex-direction: column; gap: 8px; }
.agenda-dia { padding: 8px 0 4px; border-bottom: 1px solid var(--linha-fraca); }
.agenda-dia:last-child { border-bottom: 0; }
.agenda-dia.passado .agenda-cab b, .agenda-dia.passado .agenda-cab span { color: var(--texto-3); }
.agenda-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; }
.agenda-cab b { font-weight: 600; }
.agenda-cab > span { font-size: 12px; color: var(--texto-3); }
.agenda-cab .agenda-n { margin-left: auto; }
.agenda-dia.hoje .agenda-cab b { color: var(--destaque-txt); }
.agenda-item { display: grid; grid-template-columns: 48px 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; }
.agenda-hora { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.agenda-item.atr .agenda-hora { color: var(--critico); }
.agenda-ico { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, currentColor 14%, transparent); }
.agenda-ico svg { width: 14px; height: 14px; }
.agenda-txt { min-width: 0; }
.agenda-txt b { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-txt span { font-size: 12px; color: var(--texto-3); }
.agenda-txt:hover b { color: var(--destaque-txt); }
.agenda-vazio { margin: 0 0 4px; font-size: 12.5px; }
/* histórico de atividades */
.atv-filtros .filtro select { max-width: 180px; }
.chip.atv-chip { background: color-mix(in srgb, var(--cor) 16%, var(--superficie)); color: var(--texto); }
.chip.atv-chip svg { color: var(--cor); }
.tabela-atv .cel-quando { white-space: nowrap; font-size: 12.5px; }
.tabela-atv .cel-resumo { max-width: 360px; font-size: 12.5px; }
.tabela-atv .cel-sub { white-space: normal; }
/* configuração dos tipos */
.ordem-btns { display: inline-flex; gap: 2px; }
.ordem-btns .btn { width: 28px; padding: 0; justify-content: center; }
.ordem-btns [data-dir="-1"] svg { transform: rotate(180deg); }
.tabela-tipos .lista-ico { width: 24px; height: 24px; border-radius: 6px; }
.motivos-lista .chip-grande { height: 30px; }
.mt-icones { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-ctl); background: var(--sutil); color: var(--cor); cursor: pointer; position: relative; }
.mt-ico input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mt-ico svg { width: 16px; height: 16px; }
.mt-ico.ativo { box-shadow: inset 0 0 0 2px var(--cor); background: color-mix(in srgb, var(--cor) 14%, var(--superficie)); }
.mt-ico:has(input:focus-visible) { outline: 2px solid var(--destaque-medio); outline-offset: 1px; }
.mt-cores { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-cor { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--sutil); font-size: 12px; font-weight: 500; color: var(--texto-2); cursor: pointer; position: relative; }
.mt-cor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mt-cor i { width: 14px; height: 14px; border-radius: 50%; background: var(--cor); }
.mt-cor.ativo { box-shadow: inset 0 0 0 1.5px var(--cor); color: var(--texto); }
.mt-cor:has(input:focus-visible) { outline: 2px solid var(--destaque-medio); outline-offset: 1px; }
.mt-res { display: flex; flex-direction: column; gap: 6px; }
.mt-res-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 8px; align-items: center; }
.mt-res-linha input[type=text], .mt-res-linha input:not([type]) { height: 32px; border: 0; box-shadow: var(--anel); border-radius: var(--r-ctl); padding: 0 10px; font: inherit; color: var(--texto); background: var(--superficie); min-width: 0; }
.mt-res-linha input.erro { box-shadow: 0 0 0 1px var(--critico); }
/* tabelas que viram cartões no celular (histórico de atividades e tipos) */
@media (max-width: 900px) {
  .sino-n { top: 4px; right: 4px; }
  .modal-atv .campos-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lemb-item { grid-template-columns: 28px minmax(0, 1fr); }
  .lemb-acoes { grid-column: 2; }
  .lemb-acoes .btn { min-height: 40px; }
  .lemb-sel { min-height: 32px; }
  .lemb-menu { right: auto; left: 0; }
  .agenda-item { grid-template-columns: 48px 28px minmax(0, 1fr); row-gap: 6px; }
  .agenda-item .trab-acoes { grid-column: 3; justify-content: flex-start; }
  .card-op-atv { width: 36px; height: 36px; }
  .ma-tipo { min-height: 40px; }
  .tabela-cartoes, .tabela-cartoes tbody { display: block; }
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--linha-fraca); }
  .tabela-cartoes tbody tr:last-child { border-bottom: 0; }
  .tabela-cartoes td { display: block; height: auto; padding: 0; border: 0; text-align: left; min-width: 0; }
  .tabela-cartoes td::before { content: attr(data-rot); display: block; font-size: 11px; font-weight: 500; color: var(--texto-3); margin-bottom: 2px; }
  .tabela-cartoes td.cel-nome, .tabela-cartoes td.cel-resumo { grid-column: 1 / -1; }
  .tabela-cartoes td.cel-nome::before { display: none; }
  .tabela-atv .cel-resumo { max-width: none; }
  .tabela-cartoes td.centro { text-align: left; }
}

/* ---------- relatórios (0.12.0): galeria, filtros, tabelas, mapa de cobertura, exportação e atalhos no painel ---------- */
.exp-grupo { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.rel-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.rel-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 12px; align-items: center; color: var(--texto); min-height: 96px; }
.rel-card:hover { box-shadow: var(--anel), var(--e3); }
.rel-card:hover h2, .rel-card:focus-visible h2 { color: var(--destaque-txt); }
.rel-card-ico { width: 36px; height: 36px; border-radius: 9px; }
.rel-card-ico svg { width: 18px; height: 18px; }
.rel-card-txt h2 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.rel-card-txt p { margin: 0; font-size: 12.5px; color: var(--texto-3); line-height: 1.4; }
.rel-card-seta { color: var(--texto-3); }
.rel-card-seta svg { width: 16px; height: 16px; }
.rel-filtros .filtro select { max-width: 200px; }
.rel-vazio { padding: 24px 12px; }
.rel-mapa { height: 260px; }
.rel-mapa-leg { margin-top: 10px; }
.rel-total td { border-top: 1px solid var(--linha-2); background: var(--sutil); }
.tabela-rel .cel-sub { display: block; white-space: normal; font-size: 11.5px; }
.rel-atalhos-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rel-atalho { display: grid; grid-template-columns: 28px minmax(0, 1fr) 14px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-painel); background: var(--sutil); color: var(--texto); min-height: 56px; }
.rel-atalho:hover { background: var(--sutil-2); }
.rel-atalho:hover b { color: var(--destaque-txt); }
.rel-atalho b { display: block; font-size: 13px; font-weight: 600; }
.rel-atalho small { display: block; font-size: 11.5px; color: var(--texto-3); line-height: 1.35; }
.rel-atalho > svg { width: 14px; height: 14px; color: var(--texto-3); }
.tabela-agend .cel-sub { display: block; white-space: normal; }
@media (max-width: 1180px) { .rel-atalhos-lista { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .rel-mapa { height: 220px; }
  .exp-grupo { width: 100%; }
  .exp-grupo .btn { flex: 1 1 auto; justify-content: center; }
  .rel-card { min-height: 72px; }
  .tabela-rel td.cel-nome { grid-column: 1 / -1; }
}

/* ---------- importação de clientes (0.13.0): assistente em passos, zona de soltar, mapeamento, validação editável ---------- */
.modal-imp { width: min(960px, 100%); }
.imp-passos { flex-wrap: wrap; }
.imp-soltar { border: 2px dashed var(--linha-2); border-radius: var(--r-cartao); padding: 28px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--texto-3); background: var(--sutil); transition: background-color .12s ease, border-color .12s ease; cursor: pointer; }
.imp-soltar > svg { width: 26px; height: 26px; color: var(--destaque-medio); }
.imp-soltar b { color: var(--texto); font-size: 14px; }
.imp-soltar span { max-width: 460px; font-size: 12.5px; }
.imp-soltar.sobre { background: var(--destaque-sutil); border-color: var(--destaque-medio); }
.imp-soltar:focus-visible { outline: 2px solid var(--destaque-medio); outline-offset: 2px; }
.imp-soltar .sel-acoes { justify-content: center; }
.imp-soltar .sel-acoes .btn { flex: 0 1 auto; cursor: pointer; }
.imp-modelo { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; font-size: 12.5px; }
.imp-modelo .btn-texto { font-size: 12.5px; }
.imp-arquivo { align-items: center; }
.imp-arquivo .lista-txt { flex: 1; }
.imp-intro { font-size: 12.5px; margin: 0 0 12px; }
.imp-mapa, .imp-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px 14px; }
.imp-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--texto-2); min-width: 0; }
.imp-campo select { height: 32px; border: 0; box-shadow: var(--anel); border-radius: var(--r-ctl); padding: 0 8px; background: var(--superficie); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--texto); min-width: 0; }
.imp-campo select:focus { outline: 0; box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.imp-obrig { font-weight: 600; color: var(--ouro-txt); font-size: 11px; }
.imp-previa { margin: 0; border-top: 0; border-radius: var(--r-painel); box-shadow: var(--anel); }
.imp-previa td, .imp-previa th { height: 30px; font-size: 12.5px; white-space: nowrap; }
.imp-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.imp-probs .chip { cursor: pointer; border: 0; font: inherit; font-size: 11.5px; font-weight: 500; min-height: 28px; }
.imp-probs .chip b { font-weight: 600; }
.imp-tabela { margin: 0; border-top: 0; border-radius: var(--r-painel); box-shadow: var(--anel); max-height: 46vh; overflow: auto; }
.imp-tabela td { height: 40px; font-size: 12.5px; }
.imp-cel { height: 28px; border: 0; box-shadow: var(--anel); border-radius: var(--r-ctl); padding: 0 8px; background: var(--superficie); font: inherit; font-size: 12.5px; color: var(--texto); max-width: 100%; }
.imp-cel:focus { outline: 0; box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.imp-bloq td:first-child { box-shadow: inset 3px 0 0 var(--critico); }
.imp-filtros { margin: 0 0 10px; }
.imp-modos .check { align-items: center; }
.imp-fim { padding: 24px 12px 8px; }
.tabela-imp .cel-quando { white-space: nowrap; font-size: 12px; }
@media (max-width: 900px) {
  .imp-resumo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .imp-mapa, .imp-equipe { grid-template-columns: minmax(0, 1fr); }
  .imp-campo select, .imp-cel { min-height: 40px; }
  .imp-tabela { max-height: none; }
  .imp-probs .chip { min-height: 36px; }
  .imp-soltar { padding: 20px 14px; }
  .imp-soltar .sel-acoes .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- primeiro acesso (0.14.0): primeiros passos, assistente, tour contextual e central de ajuda ---------- */
.primeiros { margin-bottom: 16px; }
.primeiros .kpi-barra { margin: 4px 0 10px; }
.primeiros-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 4px 12px; }
.primeiros-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) 14px; gap: 10px; align-items: center; width: 100%; min-height: 48px; padding: 6px 8px; border: 0; border-radius: var(--r-painel); background: none; font: inherit; color: var(--texto); text-align: left; cursor: pointer; }
li.feito .primeiros-item { cursor: default; }
a.primeiros-item:hover, button.primeiros-item:hover { background: var(--sutil); }
.primeiros-item:focus-visible { outline: 2px solid var(--destaque-medio); outline-offset: -2px; }
.primeiros-check { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sutil); color: var(--texto-3); box-shadow: inset 0 0 0 1.5px var(--linha-2); }
.primeiros-check svg { width: 14px; height: 14px; }
.primeiros-check.ok { background: var(--destaque); color: var(--sobre-destaque); box-shadow: none; }
.primeiros-txt { min-width: 0; }
.primeiros-txt b { display: block; font-size: 13px; font-weight: 600; }
.primeiros-txt small { display: block; font-size: 11.5px; color: var(--texto-3); line-height: 1.35; }
li.feito .primeiros-txt b { color: var(--texto-3); text-decoration: line-through; text-decoration-color: var(--linha-2); font-weight: 500; }
.primeiros-item > svg { width: 14px; height: 14px; color: var(--texto-3); }
.onb-modal { width: min(680px, 100%); }
.onb-prog { margin: 10px 20px 0; }
.onb-intro { font-size: 12.5px; margin: 0 0 12px; }
.onb-segmentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.onb-seg { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-painel); background: var(--sutil); cursor: pointer; position: relative; min-height: 56px; }
.onb-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.onb-seg b { font-size: 13px; font-weight: 600; }
.onb-seg small { font-size: 11.5px; color: var(--texto-3); line-height: 1.35; }
.onb-seg.ativo { background: var(--destaque-sutil); box-shadow: inset 0 0 0 1.5px var(--destaque-medio); }
.onb-seg:has(input:focus-visible) { outline: 2px solid var(--destaque-medio); outline-offset: 1px; }
.onb-filiais { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.onb-fim { padding: 16px 12px 12px; }
.tour { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.tour-balao { position: fixed; width: min(360px, calc(100vw - 16px)); background: var(--superficie); color: var(--texto); border-radius: var(--r-modal); box-shadow: var(--sombra-alta); padding: 14px 16px 12px; pointer-events: auto; outline: 0; }
.tour-balao:focus-visible { box-shadow: var(--sombra-alta), 0 0 0 2px var(--destaque-medio); }
.tour-seta { position: absolute; top: -6px; width: 12px; height: 12px; background: var(--superficie); transform: translateX(-50%) rotate(45deg); box-shadow: -1px -1px 1px rgba(33, 33, 33, .08); }
.tour-balao.acima .tour-seta { top: auto; bottom: -6px; box-shadow: 1px 1px 1px rgba(33, 33, 33, .08); }
.tour-passo { font-size: 11.5px; font-weight: 500; color: var(--destaque-txt); margin-bottom: 4px; }
.tour-balao h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.tour-balao p { margin: 0; font-size: 12.5px; color: var(--texto-2); line-height: 1.45; }
.tour-acoes { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.tour-nav { display: inline-flex; gap: 6px; }
.tour-alvo { position: relative; z-index: 79; box-shadow: 0 0 0 3px var(--ouro), 0 0 0 7px color-mix(in srgb, var(--ouro) 25%, transparent) !important; border-radius: var(--r-painel); transition: box-shadow .2s ease; }
.tour-folha .tour-balao { left: 0 !important; right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); top: auto !important; width: 100%; border-radius: var(--r-modal) var(--r-modal) 0 0; padding-bottom: 14px; }
.tour-folha .tour-seta { display: none; }
.ajuda-modal { width: min(640px, 100%); }
.ajuda-busca { margin-bottom: 10px; }
.ajuda-lista { display: flex; flex-direction: column; gap: 4px; max-height: 56vh; overflow: auto; }
.ajuda-item { border-radius: var(--r-painel); background: var(--sutil); padding: 0 12px; }
.ajuda-item summary { cursor: pointer; font-size: 13px; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.ajuda-item p { margin: 0 0 12px; font-size: 12.5px; color: var(--texto-2); line-height: 1.5; }
kbd { font: inherit; font-size: 11px; font-weight: 600; padding: 0 5px; border-radius: 4px; background: var(--sutil); box-shadow: var(--anel); }
.faixa-demo.nova-empresa { background: var(--destaque-sutil); }
@media (max-width: 900px) {
  .primeiros-lista { grid-template-columns: minmax(0, 1fr); }
  .tour-alvo { box-shadow: 0 0 0 2px var(--ouro) !important; }
  .ajuda-lista { max-height: none; }
  .onb-seg { min-height: 48px; }
}
/* primeiros passos compactos (dados de exemplo, falta pouco): uma linha com barra fina */
.primeiros.compacta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; margin-bottom: 12px; }
.primeiros-rot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.primeiros-rot svg { width: 14px; height: 14px; color: var(--destaque-medio); }
.primeiros-rot b { color: var(--texto); font-weight: 600; }
.primeiros.compacta .barrinha { flex: 1 1 120px; margin: 0; width: auto; max-width: 240px; }
.primeiros-acoes { display: inline-flex; gap: 14px; margin-left: auto; }
.primeiros-acoes .btn-texto { font-size: 12px; }
@media (max-width: 900px) { .primeiros-acoes { margin-left: 0; } .primeiros-acoes .btn-texto { min-height: 40px; } }
/* ---------- 0.15.0 créditos de consulta: bloco fechado do titular, menu do avatar, avisos, extrato e cotas ---------- */
.tit-fechado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; padding: 14px 16px; border: 1px dashed var(--linha-2); border-radius: var(--r-painel); background: var(--sutil); }
.tit-fechado > svg { width: 22px; height: 22px; color: var(--ouro-txt); flex: none; }
.tit-fechado-txt { min-width: 0; }
.tit-fechado-txt b { display: block; font-size: 13.5px; font-weight: 600; }
.tit-fechado-txt span { display: block; font-size: 12.5px; color: var(--texto-2); margin-top: 2px; }
.tit-fechado-acao { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; max-width: 320px; }
.tit-fechado-acao small { font-size: 12px; color: var(--texto-3); line-height: 1.35; }
.tit-fechado-acao .sel-acoes { justify-content: flex-end; }
.tit-fechado-acao .btn[disabled] { opacity: .55; cursor: not-allowed; }
.tit-fechado-aviso { display: inline-flex; align-items: center; gap: 6px; color: var(--critico); font-size: 13px; font-weight: 600; }
.tit-fechado-aviso svg { width: 14px; height: 14px; }
.tit-conf-txt { font-size: 12.5px; color: var(--texto-2); }
.tit-fechado-vazio span { color: var(--texto-2); }
.tit-pe > span svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; color: var(--destaque-medio); }
.menu-usuario-cred { display: flex; gap: 8px; align-items: flex-start; padding: 8px 8px 8px; border-bottom: 1px solid var(--linha-fraca); }
.menu-usuario-cred > svg { width: 14px; height: 14px; color: var(--texto-3); flex: none; margin-top: 2px; }
.menu-usuario-cred .menu-usuario-txt b, .menu-usuario-cred .menu-usuario-txt small { white-space: normal; }
.menu-usuario-cred small a { color: var(--destaque-txt); font-weight: 500; }
.aviso-cred { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--r-painel); background: var(--alerta-sutil); color: var(--alerta); font-size: 13px; margin-bottom: 12px; }
.aviso-cred.critico { background: var(--critico-sutil); color: var(--critico); }
.aviso-cred > svg { flex: none; }
.aviso-cred > span { flex: 1 1 240px; min-width: 0; }
.aviso-cred .btn { margin-left: auto; }
.kpi-barra.alerta i { background: var(--alerta); }
.kpi-barra.critica i { background: var(--critico); }
.cred-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.cred-grade .cartao { min-width: 0; }
.cota-input { width: 120px; height: 36px; border: 0; box-shadow: var(--anel); border-radius: var(--r-ctl); padding: 0 10px; background: var(--superficie); font: inherit; font-size: 13px; color: var(--texto); }
.cota-input:focus { outline: 0; box-shadow: 0 0 0 1px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.tabela-cotas .kpi-barra { margin-top: 6px; width: 90px; margin-left: auto; }
.lemb-aviso { text-decoration: none; color: inherit; }
.lemb-aviso > svg { width: 18px; height: 18px; color: var(--alerta); justify-self: center; }
.lemb-aviso.critico > svg { color: var(--critico); }
.lemb-aviso:hover b { color: var(--destaque-txt); }
.lemb-ir svg { width: 14px; height: 14px; color: var(--texto-3); }
.sc-qtd { flex-wrap: wrap; }
.sc-qtd .seg { min-height: 36px; padding: 0 14px; }
.sel-card-nome.mudo { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
.sel-card-nome.mudo svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .tit-fechado { grid-template-columns: auto minmax(0, 1fr); }
  .tit-fechado-acao { grid-column: 1 / -1; align-items: stretch; text-align: left; max-width: none; }
  .tit-fechado-acao .btn { justify-content: center; min-height: 40px; }
  .tit-fechado-acao .sel-acoes { flex-direction: column; }
  .cred-grade { grid-template-columns: minmax(0, 1fr); }
  .aviso-cred .btn { margin-left: 0; min-height: 40px; }
  .cota-input { height: 40px; width: 100%; }
}
/* dossiê: estado honesto da demonstração, com links para os imóveis que já o têm */
.bloqueado span a { color: var(--destaque-txt); font-weight: 500; }
.bloqueado:focus { outline: 0; }
/* ---------- 0.16.0 camadas do Mercado: créditos no painel, lista arrastável, acordeão, legenda, paletas, estilos ---------- */
.aria-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cred-faixa { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-painel); background: var(--sutil); font-size: 12.5px; }
.cred-faixa > svg { width: 16px; height: 16px; color: var(--ouro-txt); flex: none; }
.cred-faixa-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.cred-faixa-txt b { font-weight: 600; }
.cred-faixa-txt small { font-size: 11.5px; color: var(--texto-3); }
.cred-faixa-acao { font-size: 12px; white-space: nowrap; }
.cred-faixa-acao .btn-texto { min-height: 28px; font-size: 12px; }
.cred-faixa.alerta { background: var(--alerta-sutil); }
.cred-faixa.alerta > svg, .cred-faixa.alerta small { color: var(--alerta); }
.cred-faixa.critico { background: var(--critico-sutil); }
.cred-faixa.critico > svg, .cred-faixa.critico b, .cred-faixa.critico small, .cred-faixa.critico .cred-faixa-acao { color: var(--critico); }
.estilos-bloco .campo { gap: 4px; }
.estilo-sujo { font-style: normal; color: var(--alerta); font-weight: 500; }
.estilos-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.estilos-acoes .btn-p { min-height: 28px; }
.lat-camadas .bloco-titulo { gap: 8px; }
.lat-camadas .bloco-titulo .mudo { font-weight: 400; flex: 1; font-size: 11px; }
.camadas-lista { position: relative; display: flex; flex-direction: column; gap: 2px; }
.camada-linha { border-radius: var(--r-painel); }
.camada-linha.expandida { background: var(--sutil); box-shadow: inset 0 0 0 1px var(--linha-fraca); }
.camada-linha.arrastando { opacity: .55; }
.camada-linha.oculta .camada-nome, .camada-linha.oculta .sw { opacity: .5; }
.camada-cab { display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 2px 4px 2px 0; font-size: 13px; }
.camada-cab .sw { width: 14px; height: 10px; border-radius: 3px; flex: none; margin: 0 4px; }
.camada-alca { width: 24px; height: 32px; border: 0; background: none; color: var(--texto-3); display: grid; place-items: center; cursor: grab; touch-action: none; border-radius: var(--r-ctl); flex: none; }
.camada-alca:hover, .camada-alca:focus-visible { background: var(--sutil-2); color: var(--texto); outline: 0; }
.camada-alca:focus-visible { box-shadow: 0 0 0 2px var(--destaque-medio); }
.camada-alca svg { width: 14px; height: 14px; }
.camada-olho { width: 28px; height: 28px; flex: none; }
.camada-olho[aria-pressed="false"] { color: var(--texto-3); }
.camada-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.camada-nome { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camada-desc { font-size: 11px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camada-icones { display: inline-flex; gap: 0; flex: none; }
.camada-icones .icone-btn { width: 28px; height: 28px; color: var(--texto-3); }
.camada-icones .icone-btn svg { width: 14px; height: 14px; }
.camada-eng svg { transition: transform .18s ease; transform: rotate(-90deg); }
.camada-linha.expandida .camada-eng svg { transform: none; }
.camada-icones [aria-expanded="true"] { color: var(--destaque-txt); background: var(--sutil-2); }
.camada-excluir:hover { color: var(--critico); background: var(--critico-sutil); }
.camada-excluir.confirmar { color: var(--critico); background: var(--critico-sutil); box-shadow: inset 0 0 0 1px var(--critico); }
.camada-icones .camada-excluir.confirmar { display: inline-flex; flex-direction: row; align-items: center; width: auto; padding: 0 8px; gap: 4px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.camada-leg { padding: 2px 8px 8px 36px; }
.camada-pers { padding: 4px 10px 10px; border-top: 1px solid var(--linha-fraca); }
.camada-solta { position: absolute; left: 0; right: 0; height: 2px; background: var(--destaque-medio); border-radius: 1px; z-index: 2; pointer-events: none; }
.camada-solta::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--destaque-medio); }
/* legenda do mapa */
.mapa-legenda { position: absolute; left: 12px; bottom: 28px; z-index: 5; max-width: min(280px, calc(100% - 24px)); background: var(--superficie); box-shadow: var(--sombra); border-radius: var(--r-painel); font-size: 12px; }
.leg-alternar { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 32px; padding: 0 10px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--texto); border-radius: var(--r-painel); }
.leg-alternar svg { width: 14px; height: 14px; color: var(--texto-3); }
.leg-alternar svg:last-child { margin-left: auto; transition: transform .18s ease; }
.leg-alternar[aria-expanded="false"] svg:last-child { transform: rotate(-90deg); }
.leg-corpo { padding: 0 10px 10px; max-height: 42vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.leg-cam b { display: block; font-size: 11.5px; font-weight: 600; margin-bottom: 3px; }
.leg-rampa { height: 8px; border-radius: 4px; }
.leg-faixa { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-3); margin-top: 2px; }
.leg-itens { display: flex; flex-direction: column; gap: 1px; }
.leg-item { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 4px; margin: 0 -4px; border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--texto-2); border-radius: 4px; text-align: left; }
button.leg-item:hover, button.leg-item:focus-visible { background: var(--sutil); outline: 0; color: var(--texto); }
.leg-item i { width: 14px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.leg-item i.redondo { width: 10px; height: 10px; border-radius: 50%; }
.leg-item.oculta { color: var(--texto-3); text-decoration: line-through; }
.leg-item.oculta i { opacity: .3; }
/* personalização (acordeão e folha) */
.pers-grade { display: flex; flex-direction: column; gap: 12px; }
.pers-sec { padding: 8px 0 0; border-top: 1px solid var(--linha-fraca); }
.pers-sec:first-child { border-top: 0; padding-top: 4px; }
.pers-sec .bloco-titulo { margin-bottom: 6px; }
.pers-sec .campo { font-size: 11.5px; }
.pers-sec .campo input, .pers-sec .campo select { height: 30px; font-size: 12.5px; }
.pers-sec .campo.mt, .pers-sec .pers-2.mt, .pers-sec .camada.mt { margin-top: 8px; }
.pers-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pers-range span { display: flex; justify-content: space-between; }
.pers-range input[type=range] { width: 100%; height: 24px; margin: 0; accent-color: var(--destaque-medio); box-shadow: none; padding: 0; background: none; }
.pers-nota { margin: 6px 0 0; font-size: 11.5px; color: var(--texto-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pers-nota svg { width: 13px; height: 13px; }
.selo-tipo { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: var(--sutil-2); color: var(--texto-2); }
.selo-tipo.num { background: var(--destaque-sutil); color: var(--destaque-txt); }
.selo-tipo.cat { background: var(--ouro-sutil); color: var(--ouro-txt); }
.paletas-rot { font-size: 11px; color: var(--texto-3); margin: 6px 0 3px; }
.paletas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.paleta { display: flex; flex-direction: column; gap: 3px; padding: 5px 6px; border: 0; border-radius: var(--r-painel); background: var(--superficie); box-shadow: var(--anel); font: inherit; text-align: left; cursor: pointer; min-height: 40px; }
.paleta i { display: block; height: 8px; border-radius: 4px; }
.paleta span { font-size: 11px; color: var(--texto-2); line-height: 1.2; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.paleta em { font-style: normal; font-size: 9.5px; padding: 0 4px; border-radius: 3px; background: var(--destaque-sutil); color: var(--destaque-txt); }
.paleta.ativo { box-shadow: 0 0 0 2px var(--destaque-medio); }
.paleta.ativo span { color: var(--texto); font-weight: 500; }
.paleta:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--destaque-medio), 0 0 0 4px var(--destaque-sutil); }
.cores-sw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cor-sw { width: 24px; height: 24px; border-radius: 50%; border: 0; box-shadow: var(--anel); cursor: pointer; padding: 0; }
.cor-sw.ativo { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--destaque-medio); }
.cor-sw:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--destaque-medio); }
.hist { display: block; width: 100%; height: auto; margin-top: 8px; }
.pers-pe { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linha-fraca); }
.pers-pe .sel-acoes .btn { flex: none; }
.modal.pers .pers-corpo { padding-top: 4px; }
/* titular no cartão do mapa */
.gav-titular { display: flex; flex-direction: column; gap: 6px; }
.gav-titular-acao { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.gav-titular-acao .sel-acoes { width: 100%; }
.gav-tit { display: flex; gap: 8px; align-items: flex-start; }
.gav-tit-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; font-size: 12.5px; }
.gav-tit-txt b { font-weight: 600; overflow-wrap: anywhere; }
.gav-tit-txt small { font-size: 11.5px; color: var(--texto-3); }
.gav-tit-txt a { color: var(--destaque-txt); font-weight: 500; }
.gav-tit-pe { font-size: 11px; display: flex; align-items: center; gap: 4px; }
.gav-tit-pe svg { width: 12px; height: 12px; color: var(--destaque-medio); }
.mapa-aviso { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: var(--sutil); color: var(--texto-2); font-size: 13px; text-align: left; }
.mapa-aviso svg { width: 20px; height: 20px; color: var(--alerta); flex: none; }
.mapa-aviso span { max-width: 420px; }
@media (max-width: 900px) {
  .lat-abas.so-celular { display: inline-flex !important; align-self: flex-start; }
  .lat-abas .seg { min-height: 32px; }
  .painel-lat .lat-estilos { display: none; }
  .painel-lat.aba-estilos .lat-estilos { display: block; }
  .painel-lat.aba-estilos .lat-camadas { display: none; }
  .camada-cab { min-height: 44px; }
  .camada-alca, .camada-olho, .camada-icones .icone-btn { width: 36px; height: 36px; }
  .camada-alca { width: 32px; }
  .mapa-legenda { left: 8px; bottom: 72px; max-width: min(240px, calc(100% - 72px)); }
  .leg-corpo { max-height: 28vh; }
  .paletas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paleta { min-height: 44px; }
  .cor-sw { width: 32px; height: 32px; }
  .pers-sec .campo input, .pers-sec .campo select { height: 40px; }
  .pers-range input[type=range] { height: 36px; }
  .cred-faixa-acao { white-space: normal; }
}
@media (max-width: 900px) { .painel-lat .cred-faixa { order: -1; } /* celular: créditos no topo da folha do painel */ }
/* ---------- 0.17.0 assistente do mapa, concorrentes e área desenhada ---------- */
.assist { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 7; width: min(560px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.assist-form input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--texto); outline: 0; }
.assist-form input::placeholder { color: var(--texto-3); }
.assist-enviar { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--destaque); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.assist-enviar svg { width: 16px; height: 16px; }
.assist-enviar:hover { background: var(--destaque-medio); }
.assist-hist-btn { width: 32px; height: 32px; }
.assist-hist-btn[disabled] { opacity: .4; }
.assist-sugestoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.assist-sug { border: 0; background: var(--superficie); box-shadow: var(--sombra); color: var(--texto-2); font: inherit; font-size: 11.5px; padding: 0 10px; min-height: 28px; border-radius: 999px; cursor: pointer; }
.assist-sug:hover, .assist-sug:focus-visible { color: var(--texto); background: var(--sutil); outline: 0; }
.assist-cartao { background: var(--superficie); border-radius: var(--r-modal); box-shadow: var(--sombra-alta); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.assist-cartao-cab { display: flex; align-items: center; gap: 8px; }
.assist-cartao-cab b { font-size: 13.5px; font-weight: 600; }
.assist-cartao-cab .icone-btn { margin-left: auto; }
.assist-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: var(--sutil-2); color: var(--texto-3); display: inline-flex; align-items: center; gap: 3px; }
.assist-tag.ok { background: var(--destaque-sutil); color: var(--destaque-txt); }
.assist-tag svg { width: 11px; height: 11px; }
.assist-pergunta { font-size: 12px; color: var(--texto-3); }
.assist-pergunta::before { content: "“"; } .assist-pergunta::after { content: "”"; }
.assist-texto { margin: 0; font-size: 13px; line-height: 1.45; }
.assist-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.assist-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 4px 0 8px; border-radius: 999px; background: var(--sutil); font-size: 12px; color: var(--texto); }
.assist-chip > svg { width: 13px; height: 13px; color: var(--texto-3); }
.assist-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--texto-3); display: grid; place-items: center; cursor: pointer; }
.assist-chip button:hover, .assist-chip button:focus-visible { background: var(--sutil-2); color: var(--texto); outline: 0; }
.assist-chip button svg { width: 12px; height: 12px; }
.assist-avisos { margin: 0; padding-left: 18px; font-size: 12px; color: var(--alerta); }
.assist-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.assist-acoes .btn-p { min-height: 30px; }
.assist-pensando { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); }
.assist-hist { display: flex; flex-direction: column; gap: 2px; }
.assist-hist-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0; background: none; font: inherit; padding: 6px 8px; border-radius: var(--r-painel); cursor: pointer; }
.assist-hist-item:hover, .assist-hist-item:focus-visible { background: var(--sutil); outline: 0; }
.assist-hist-item b { font-size: 12.5px; font-weight: 500; }
.assist-hist-item span { font-size: 11.5px; color: var(--texto-3); }
.modal.assist-folha .modal-corpo { display: flex; flex-direction: column; gap: 8px; }
.mini-kpi b small { font-size: 11px; font-weight: 500; color: var(--texto-3); }
.mini-kpi-acao .btn-texto { font-size: 11.5px; min-height: 24px; }
.sel-exp .exp-grupo { width: 100%; }
.sel-exp .exp-grupo .btn { flex: 1; }
.st-rep { gap: 10px; cursor: pointer; }
.st-rep input { accent-color: var(--destaque-medio); margin: 0; width: 16px; height: 16px; }
.mapa-ferr .segmento { flex-wrap: wrap; }
@media (max-width: 900px) {
  .assist { position: fixed; left: 8px; right: 8px; bottom: calc(56px + 8px + env(safe-area-inset-bottom, 0px)); width: auto; transform: none; z-index: 41; }
  .assist-sugestoes { display: none; }
  .assist-form input:focus ~ .assist-sugestoes { display: flex; }
  .assist-form { min-height: 48px; }
  .assist-enviar { width: 40px; height: 40px; }
  .assist-hist-btn { width: 40px; height: 40px; }
  .assist-sug { min-height: 36px; }
  .assist-cartao { max-height: 40vh; }
  .mapa-ferr .segmento .seg { min-height: 36px; }
  .mapa-flutua { top: 58px; }
  .assist { bottom: calc(56px + 68px + env(safe-area-inset-bottom, 0px)); }
  .painel-lat.aberto ~ .mapa-area .assist { display: none; }
  .mapa-legenda { bottom: 190px; }
  .toast { bottom: calc(56px + 72px + env(safe-area-inset-bottom, 0px)); }
}
/* fundo cartográfico indisponível (sem rede ou bloqueado): cor lisa por trás das camadas */
.mapa-base-falhou { background: var(--sutil-2); }
.mapa-flutua .segmento { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) { .mapa-flutua { max-width: calc(100% - 24px); } .mapa-flutua .segmento .seg { min-height: 36px; } }
/* barra do mapa: rótulos longos no desktop, curtos/ícones no celular */
.rot-curto { display: none; }
@media (max-width: 900px) {
  .mapa-ferr .seg .rot-longo, #seg-base .rot-longo, #vp-base .rot-longo { display: none; }
  .rot-curto { display: inline; }
  .mapa-ferr .seg { padding: 0 9px; }
  .mapa-ferr .seg svg { margin: 0; }
  #seg-base .seg { padding: 0 7px; font-size: 11.5px; }
}
/* celular: painel do Mercado e legenda ancorados acima da navegação inferior (a faixa de demonstração não os empurra para fora) */
@media (max-width: 900px) {
  .painel-lat { position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); z-index: 42; }
  .mapa-legenda { position: fixed; left: 8px; bottom: calc(56px + 132px + env(safe-area-inset-bottom, 0px)); z-index: 40; }
}

/* faixa de demonstração compacta no celular: uma linha, sem empurrar o conteúdo */
@media (max-width: 900px) {
  .faixa-demo { flex-wrap: nowrap; min-height: 0; padding: 4px 16px; }
  .faixa-demo .faixa-demo-txt { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .faixa-demo svg { align-self: center; margin-top: 0; }
  .faixa-demo.confirmando { flex-wrap: wrap; }
  .faixa-demo.confirmando .faixa-demo-txt { white-space: normal; }
}

/* assistente com "cara de IA" (0.17.1): símbolo do AgroPipe com aura desfocada em movimento e contorno em degradê girando */
@property --assist-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.assist-form {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px 0 8px; border-radius: 999px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--superficie), var(--superficie)) padding-box,
              conic-gradient(from var(--assist-ang), var(--destaque-medio), var(--ouro), #5BA8D8, var(--destaque), var(--destaque-medio)) border-box;
  box-shadow: var(--sombra-alta);
  animation: assist-gira 6s linear infinite;
}
/* brilho difuso do contorno, atrás da barra */
.assist-form::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--assist-ang), var(--destaque-medio), var(--ouro), #5BA8D8, var(--destaque), var(--destaque-medio));
  filter: blur(10px); opacity: .35; animation: assist-gira 6s linear infinite; transition: opacity .2s ease;
}
.assist-form:focus-within::before { opacity: .6; }
.assist-form.pensando, .assist-form.pensando::before { animation-duration: 1.6s; }
.assist-form.pensando::before { opacity: .75; }
@keyframes assist-gira { to { --assist-ang: 360deg; } }

.assist-ico { position: relative; width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.assist-aura {
  position: absolute; inset: 5px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--destaque-medio), var(--ouro), #5BA8D8, var(--destaque-medio));
  filter: blur(5px); opacity: .18; animation: assist-aura 6s linear infinite;
}
.assist-simbolo { position: relative; width: 20px; height: auto; display: block; }
.assist-simbolo.escuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .assist-simbolo.claro { display: none; } :root:not([data-theme="light"]) .assist-simbolo.escuro { display: block; } }
:root[data-theme="dark"] .assist-simbolo.claro { display: none; }
:root[data-theme="dark"] .assist-simbolo.escuro { display: block; }
.assist-form.pensando .assist-aura { animation-duration: 2s; opacity: .4; }
.assist-form.pensando .assist-simbolo { animation: assist-respira 1.6s ease-in-out infinite; }
@keyframes assist-aura { to { transform: rotate(360deg); } }
@keyframes assist-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) {
  .assist-form, .assist-form::before, .assist-aura, .assist-simbolo { animation: none; }
}
@media (max-width: 900px) { .assist-form { min-height: 48px; } }
/* Console admin */
.selo-console { margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--ouro); color: var(--sobre-ouro); flex: none; }
.console .barra-como { display: flex; align-items: center; gap: 8px; min-width: 0; }
.console .barra-como .filtro { height: 30px; }
.console .barra-como select { max-width: 260px; font-size: 12.5px; }
.console .usuario { cursor: default; background: var(--destaque); color: #fff; }
.kpis.kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.var { font-weight: 600; } .var.sobe { color: var(--ok); } .var.desce { color: var(--critico); } .var-nova { color: var(--texto-3); }
.txt-alerta { color: var(--alerta); } .txt-critico { color: var(--critico); } .txt-ok { color: var(--ok); }
.cel-sub { display: block; font-size: 11.5px; white-space: normal; }
.cel-usu { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cel-usu b { font-weight: 500; }
.cel-cred { font-weight: 600; }
.cel-quando { white-space: nowrap; font-size: 12px; }
.cel-antes { max-width: 260px; white-space: normal; font-size: 12.5px; }
.cel-motivo { max-width: 320px; white-space: normal; font-size: 12.5px; color: var(--texto-2); }
.tabela-emp td, .tabela-usu td, .tabela-tit td, .tabela-aud td { font-size: 12.5px; }
.tabela-emp .kpi-barra { margin-top: 4px; width: 110px; }
.acoes-linha { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
.saude-chip { font-weight: 700; min-width: 32px; justify-content: center; }
.g-adm { width: 100%; height: auto; display: block; }
.g-adm .g-linha { stroke: var(--linha); stroke-width: 1; }
.g-adm .g-txt { font-size: 11px; fill: var(--texto-3); }
.barras-h { display: flex; flex-direction: column; gap: 6px; }
.barra-h { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-size: 12.5px; }
.barra-h-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }
.barra-h-trilho { height: 8px; border-radius: 4px; background: var(--sutil); overflow: hidden; }
.barra-h-trilho i { display: block; height: 100%; border-radius: 4px; }
.barra-h b { text-align: right; font-variant-numeric: tabular-nums; }
.atencao { display: flex; flex-direction: column; gap: 2px; }
.atencao-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-painel); color: inherit; text-decoration: none; }
.atencao-item:hover { background: var(--sutil); }
.atencao-item > svg { width: 16px; height: 16px; }
.atencao-item.critico > svg { color: var(--critico); } .atencao-item.alerta > svg { color: var(--alerta); } .atencao-item.info > svg { color: var(--texto-3); }
.atencao-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.atencao-txt b { font-size: 13px; font-weight: 600; } .atencao-txt span { font-size: 12px; color: var(--texto-3); }
.atencao-acao { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--destaque-txt); white-space: nowrap; }
.atencao-acao svg { width: 13px; height: 13px; }
.feed { display: flex; flex-direction: column; }
.feed-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linha-fraca); transition: background .6s ease; }
.feed-item:last-child { border-bottom: 0; }
.feed-item.novo { background: var(--destaque-bruma); animation: feed-novo 1.6s ease forwards; }
@keyframes feed-novo { from { background: var(--destaque-sutil); } to { background: transparent; } }
.feed-ico { width: 28px; height: 28px; border-radius: 7px; background: var(--sutil); display: grid; place-items: center; }
.feed-ico svg { width: 14px; height: 14px; }
.feed-txt { min-width: 0; }
.feed-cab { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; font-size: 12.5px; }
.feed-cab b { font-weight: 600; } .feed-cab time { margin-left: auto; font-size: 11.5px; }
.feed-txt p { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.ponto-online { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-sutil); flex: none; }
.timeline-adm { display: flex; flex-direction: column; gap: 10px; position: relative; padding-left: 18px; }
.timeline-adm::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--linha); }
.tl-adm { position: relative; }
.tl-ponto { position: absolute; left: -18px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--destaque-medio); box-shadow: 0 0 0 2px var(--superficie); }
.tl-txt { font-size: 12.5px; line-height: 1.35; } .tl-txt b { font-weight: 600; } .tl-txt p { margin: 2px 0 0; color: var(--texto-2); }
.gaveta-adm { position: fixed; top: var(--barra); right: 0; bottom: 0; width: min(420px, 100%); z-index: 60; background: var(--superficie); box-shadow: var(--sombra-alta); display: flex; flex-direction: column; animation: entrada .16s ease; }
.gaveta-adm .gaveta-corpo { gap: 14px; }
.form-adm .erro-form { margin: 8px 0 0; color: var(--critico); font-size: 12.5px; }
.form-adm .campo.mt { margin-top: 12px; }
.form-adm .camada { min-height: 32px; font-weight: 400; }
.btn-perigo { background: var(--critico); color: #fff; } .btn-perigo:hover { background: #952016; color: #fff; }
.btn-perigo-contorno { color: var(--critico); box-shadow: inset 0 0 0 1px var(--critico-sutil); } .btn-perigo-contorno:hover { background: var(--critico-sutil); color: var(--critico); }
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.modulos-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.chips-mun .chip-grande { height: 28px; padding: 0 6px 0 8px; font-size: 12.5px; }
.chips-mun .chip-grande button { width: 20px; height: 20px; border: 0; background: none; color: inherit; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.chips-mun .chip-grande button:hover { background: var(--sutil-2); }
.chips-mun .chip-grande button svg { width: 11px; height: 11px; }
.form-nota { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 14px; }
.form-nota .campo { flex: 1; }
.lista-btn { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-painel); padding: 8px; }
.lista-btn:hover, .lista-btn:focus-visible { background: var(--sutil); outline: 0; }
.lista-btn > svg { width: 14px; height: 14px; color: var(--texto-3); }
.limiares { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.limiares .campo input { width: 90px; }
.frases { display: flex; flex-direction: column; gap: 10px; }
.frases-grupo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.frases-grupo > b { font-size: 12px; font-weight: 600; width: 100%; color: var(--texto-2); }
.tabela tr.linha-sel td { background: var(--destaque-bruma); }
.marca-ok svg { width: 16px; height: 16px; color: var(--ok); }
.console .migalha { margin-bottom: 8px; }
.console .cab p .chip, .console .cab p .saude-chip { vertical-align: middle; }
@media (max-width: 1280px) { .kpis.kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .console .barra-como .territorio-rotulo { display: none; }
  .console .barra-como select { max-width: 160px; }
  .kpis.kpis-6, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-21 { grid-template-columns: minmax(0, 1fr); }
  .gaveta-adm { top: 0; width: 100%; }
  .modulos-grade { grid-template-columns: minmax(0, 1fr); }
  .form-nota { flex-direction: column; align-items: stretch; }
  .barra-h { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 40px; }
  .acoes-linha .btn-p { min-height: 36px; }
  .feed-cab time { margin-left: 0; width: 100%; }
}
.faixa-vercomo.suporte { background: var(--ouro-sutil); }
.faixa-vercomo.suporte svg { color: var(--ouro-txt); }
.gaveta-adm[hidden] { display: none; }
.kpi-det .var, .kpi-det .var-nova { display: inline; font-size: inherit; white-space: nowrap; }
.folha-item.inativo, .folha-item[disabled] { color: var(--texto-3); cursor: not-allowed; }
.folha-item.inativo svg { color: var(--texto-3); }
.console .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ---------- 3B: telas de acesso (Entrar, Esqueci minha senha, convite e redefinição) ---------- */
/* tela cheia sobre o app, abaixo do modal (90) e do toast (110); centralizada; rola no celular baixo */
.auth { position: fixed; inset: 0; z-index: 80; overflow: auto; background: var(--fundo); display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.auth-caixa { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.auth-marca img { display: block; height: auto; width: 150px; }
.auth-marca .escuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-marca .claro { display: none; } :root:not([data-theme="light"]) .auth-marca .escuro { display: block; } }
:root[data-theme="dark"] .auth-marca .claro { display: none; }
:root[data-theme="dark"] .auth-marca .escuro { display: block; }
.auth-cartao { width: 100%; background: var(--superficie); border-radius: var(--r-modal); box-shadow: var(--sombra-alta); padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.auth-cartao h1 { font-size: 19px; font-weight: 600; line-height: 1.25; }
.auth-sub { margin: -8px 0 0; font-size: 12.5px; color: var(--texto-3); line-height: 1.5; }
.auth-sub b { color: var(--texto); font-weight: 500; }
.auth-cartao .campo input { height: 36px; font-size: 14px; }
.auth-senha { position: relative; display: flex; }
.auth-senha input { flex: 1; padding-right: 40px; }
.auth-olho { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; border: 0; background: none; border-radius: var(--r-ctl); display: grid; place-items: center; color: var(--texto-3); }
.auth-olho:hover { background: var(--sutil); color: var(--texto); }
.auth-olho svg { width: 16px; height: 16px; }
.auth-codigo input { font-family: var(--mono); font-size: 22px; letter-spacing: .32em; text-align: center; height: 44px; }
.auth-btn { height: 36px; justify-content: center; font-size: 13.5px; margin-top: 2px; }
.auth-aviso { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-painel); font-size: 12.5px; line-height: 1.45; }
.auth-aviso svg { flex: none; margin-top: 1px; }
.auth-aviso.erro { background: var(--critico-sutil); color: var(--critico); }
.auth-aviso.ok { background: var(--destaque-sutil); color: var(--destaque-txt); }
.auth-aviso.nota { background: var(--sutil); color: var(--texto-2); }
.auth-aviso.nota svg { color: var(--ouro-txt); }
.auth-req { list-style: none; margin: -4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto-3); }
.auth-req li { display: flex; align-items: center; gap: 6px; }
.auth-req li svg { width: 14px; height: 14px; color: var(--linha-2); }
.auth-req li.ok { color: var(--destaque-txt); }
.auth-req li.ok svg { color: var(--destaque-medio); }
.auth-pe { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 12.5px; margin-top: 2px; }
.auth-pe a, .auth-pe .btn-texto { color: var(--destaque-txt); font-weight: 500; min-height: 0; }
.auth-pe a:hover { text-decoration: underline; }
.auth-rodape { margin: 0; font-size: 11.5px; color: var(--texto-3); text-align: center; font-variant-numeric: tabular-nums; }
.auth-rodape a { color: var(--destaque-txt); }
.auth-selo { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--sutil); color: var(--texto-2); font-size: 11.5px; font-weight: 500; }
.auth-selo svg { width: 13px; height: 13px; }
@media (max-width: 600px) { .auth { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); align-items: start; } .auth-cartao { padding: 22px 18px 20px; } .auth-marca img { width: 132px; } }

/* ---------- Entrar, Esqueci minha senha, convite, indisponível (v0.23.0): campo da marca ----------
   Fundo verde-profundo da marca nos dois temas (o cartão segue o tema), curvas de nível topográficas muito sutis
   (o campo) e uma malha fina de pontos que só aparece nas bordas (tecnologia). Um traço dourado marca o cartão;
   a assinatura fica ao pé da tela, fora do cartão. Nada se move além da entrada do cartão. */
.auth {
  --auth-campo: radial-gradient(120% 90% at 82% 8%, #17603B 0%, #0F4D2E 42%, #0A3621 100%);
  background: url("../brand/login-curvas.svg") center / cover no-repeat, var(--auth-campo);
  isolation: isolate;
  grid-template-rows: 1fr auto;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth { --auth-campo: radial-gradient(120% 90% at 82% 8%, #12432A 0%, #0B2A1A 45%, #07170F 100%); } }
:root[data-theme="dark"] .auth { --auth-campo: radial-gradient(120% 90% at 82% 8%, #12432A 0%, #0B2A1A 45%, #07170F 100%); }
.auth::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 46%, transparent 35%, #000 100%);
  mask-image: radial-gradient(70% 62% at 50% 46%, transparent 35%, #000 100%);
}
.auth::after {
  content: attr(data-assinatura); align-self: end; padding-top: 28px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-align: center;
  color: rgba(255, 255, 255, .5); pointer-events: none;
}
.auth-caixa { align-self: center; animation: auth-entra .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes auth-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.auth .auth-marca .claro { display: none; }
.auth .auth-marca .escuro { display: block; }
.auth-cartao {
  position: relative; color-scheme: light; border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 28px 64px -24px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .18);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-cartao { color-scheme: dark; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 64px -24px rgba(0, 0, 0, .7); } }
:root[data-theme="dark"] .auth-cartao { color-scheme: dark; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 64px -24px rgba(0, 0, 0, .7); }
.auth-cartao::before { content: ""; position: absolute; top: 0; left: 28px; width: 36px; height: 2px; border-radius: 0 0 2px 2px; background: var(--ouro); }
.auth-selo { height: auto; padding: 0; border-radius: 0; background: none; color: var(--ouro-txt); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.auth-rodape { color: rgba(255, 255, 255, .55); }
.auth-rodape a { color: #fff; }
@media (max-width: 600px) { .auth::after { padding-top: 20px; font-size: 10px; letter-spacing: .12em; } .auth-cartao::before { left: 18px; } }
@media (prefers-reduced-motion: reduce) { .auth-caixa { animation: none; } }

/* faixa do modo conectado */
.faixa-servidor { background: var(--destaque-bruma); border-bottom-color: var(--destaque-sutil); }
.faixa-servidor svg { color: var(--destaque-medio); }
.faixa-servidor b { color: var(--texto); font-weight: 500; }

/* Configurações → Segurança: chave do autenticador em blocos de 4, para digitar à mão */
.chave-2fa { display: block; font-family: var(--mono); font-size: 15px; letter-spacing: .08em; line-height: 1.6; word-break: break-all; padding: 10px 12px; border-radius: var(--r-painel); background: var(--sutil); color: var(--texto); user-select: all; }
.passos-2fa { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--texto-2); }
.passos-2fa b { color: var(--texto); font-weight: 500; }
.campo-codigo { max-width: 200px; }
.campo-codigo input { font-family: var(--mono); font-size: 18px; letter-spacing: .28em; text-align: center; }
.chip-2fa-ok { gap: 6px; }
.erro-inline { margin: 8px 0 0; color: var(--critico); font-size: 12.5px; }

/* lista de usuários reais (Configurações → Usuários) */
.usu-srv-acoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.tabela-usu-srv td { white-space: nowrap; }
.tabela-usu-srv .cel-usuario > div { min-width: 0; }
.tabela-usu-srv .cel-usuario b, .tabela-usu-srv .cel-usuario .mudo { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.form-adm .campo + .campo { margin-top: 12px; }
.form-adm .campo select { font-weight: 500; }

/* Console conectado: botão Sair na barra e membro real no avatar */
.console .barra-acoes .btn-sair { height: 26px; }
.console .barra-acoes .usuario.membro { cursor: default; }
.aud-pag { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 12px 0 0; font-size: 12.5px; color: var(--texto-3); }
.aud-pag .sel-acoes .btn { flex: none; }
.cel-detalhes { font-family: var(--mono); font-size: 11px; color: var(--texto-3); max-width: 320px; white-space: normal; word-break: break-word; }
.filtro input[type="date"] { border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--texto); padding: 0; min-width: 0; }
.filtro input[type="date"]:focus { outline: 0; }

/* 4C2: ficha do cliente no modo conectado — ações de cada vínculo não quebram linha */
.modal .lista-item .lista-lado.eq-acoes { flex: none; flex-wrap: nowrap; gap: 6px; }
/* 4C2: o recorte da carteira (4 segmentos) rola na horizontal no celular em vez de alargar a página */
@media (max-width: 480px) { #seg-cart { max-width: 100%; overflow-x: auto; scrollbar-width: none; } #seg-cart .seg { white-space: nowrap; } }