/* =========================================================
   CRM Unilentes — visão representante
   Mobile-first. Tokens no :root, tema escuro automático.
   ========================================================= */
:root {
  /* Marca: azul Unilentes (#47A8DC), azul-marinho Max HD (#003F7D), grafite do logo (#434041) */
  --bg: #f3f6fa;
  --sup: #ffffff;
  --sup-2: #f6f9fc;
  --tinta: #1d2733;
  --tinta-2: #3d4856;
  --muted: #6a7686;
  --linha: #e3e9f0;
  --marca: #1672b4;
  --marca-esc: #003f7d;
  --marca-claro: #e8f3fb;
  --ciano: #47a8dc;
  --pronta: #47a8dc;
  --surf: #003f7d;
  --perigo: #d0342c;
  --perigo-bg: #fdecea;
  --atencao: #b86e00;
  --atencao-bg: #fff4e0;
  --ok: #148a55;
  --ok-bg: #e5f6ee;
  --op: #6b46d9;
  --op-bg: #efeafd;
  --info: #3d5a80;
  --info-bg: #eaf0f7;
  --sombra: 0 1px 2px rgba(16, 42, 74, .04), 0 2px 10px rgba(16, 42, 74, .05);
  --raio: 14px;
  --raio-p: 9px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0; background: var(--bg); color: var(--tinta);
  font: 15px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; padding-bottom: 84px;
}
a { color: var(--marca); text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.45rem; font-weight: 800; }
h2 { font-size: 1rem; font-weight: 700; }
small { font-size: .78rem; }
b, strong { font-weight: 650; }
.muted { color: var(--muted); }
.ico { flex: none; vertical-align: middle; }
.dir { text-align: right; }
.txt-perigo { color: var(--perigo); font-weight: 650; }
.txt-atencao { color: var(--atencao); font-weight: 600; }
.txt-op { color: var(--op); }
[hidden] { display: none !important; }

/* ---------- topo (claro, com logos) ---------- */
.topo { background: var(--sup); position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--linha); box-shadow: 0 1px 0 rgba(16,42,74,.02); }
.topo-in { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px 16px; }
.marca { display: flex; align-items: center; gap: 12px; flex: none; }
.logo-unilentes { height: 22px; width: auto; display: block; }
.logo-maxhd { height: 28px; width: auto; display: block; }
.divisor { width: 1px; height: 26px; background: var(--linha); }
.topo-area { display: none; flex-direction: column; line-height: 1.15; padding-left: 18px; border-left: 1px solid var(--linha); }
.topo-area small { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.topo-area strong { font-size: .98rem; color: var(--tinta); }
.topo-visao { margin: 0; gap: 1px; }
.topo-visao select { font: inherit; font-size: .98rem; font-weight: 800; color: var(--tinta); background: transparent; border: 0; padding: 0 18px 0 0; margin-left: -2px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; }
.topo-visao select:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 4px; }
.usuario { margin-left: auto; }
.menu-usuario { position: relative; }
.menu-usuario summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 5px 8px 5px 5px; border: 1px solid var(--linha); border-radius: 12px; color: var(--muted); }
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary:hover { border-color: var(--marca); }
.menu-usuario-lista { position: absolute; right: 0; top: calc(100% + 6px); background: var(--sup); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 12px 30px rgba(16,42,74,.12); padding: 6px; min-width: 190px; z-index: 40; }
.menu-usuario-lista a { display: flex; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 8px; color: var(--tinta); font-weight: 550; font-size: .9rem; }
.menu-usuario-lista a:hover { background: var(--sup-2); }
.usuario-txt { display: none; flex-direction: column; line-height: 1.15; color: var(--tinta); }
.usuario-txt small { color: var(--muted); }
.avatar { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--marca-claro); color: var(--marca-esc); font-weight: 800; font-size: .8rem; }
.icone-btn { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: inherit; background: transparent; border: 0; cursor: pointer; }
.icone-btn:hover { background: rgba(127,127,127,.12); }
.menu-topo { display: none; border-top: 1px solid var(--linha); background: var(--sup); }
.menu-topo-in { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 6px; padding: 8px 16px; }
.menu-topo a { color: var(--tinta-2); padding: 8px 14px; border-radius: 10px; display: flex; gap: 8px; align-items: center; font-weight: 650; font-size: .92rem; border: 1px solid transparent; }
.menu-topo a .ico { color: var(--muted); }
.menu-topo a:hover { background: var(--sup-2); }
.menu-topo a.on { background: var(--marca-claro); color: var(--marca-esc); border-color: color-mix(in srgb, var(--marca) 25%, transparent); box-shadow: inset 0 -2px 0 var(--marca); }
.menu-topo a.on .ico { color: var(--marca); }
.busca-topo { display: flex; align-items: center; gap: 8px; background: var(--sup-2); border: 1px solid var(--linha); border-radius: 10px; padding: 0 12px; margin-left: auto; width: 320px; color: var(--muted); }
.busca-topo:focus-within { border-color: var(--marca); }
.busca-topo input { background: none; border: 0; color: var(--tinta); padding: 8px 0; width: 100%; font: inherit; outline: none; }
.faixa-mock { background: var(--atencao-bg); color: var(--atencao); text-align: center; font-size: .78rem; font-weight: 600; padding: 5px 16px; }

/* ---------- menu inferior (celular) ---------- */
.menu-baixo { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--sup); border-top: 1px solid var(--linha); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
.menu-baixo a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: .7rem; font-weight: 600; padding: 4px; border-radius: 10px; }
.menu-baixo a.on { color: var(--marca); background: var(--marca-claro); }
.menu-baixo .mb-acao { color: #fff; background: var(--marca); margin: 0 6px; }

/* ---------- página ---------- */
.pagina { max-width: 1280px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); min-width: 0; }
.card.sem-pad { padding: 0; overflow: hidden; }
.card-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.card-cab h2 { display: flex; align-items: center; gap: 8px; }
.card-cab h2 .ico { color: var(--marca); }
.grade-2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.pag-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pag-cab p { margin: 4px 0 0; }
.sub-tit { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 10px; font-weight: 700; }
.link { font-weight: 600; font-size: .88rem; }
.vazio { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vazio-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--marca-claro); color: var(--marca); }
.vazio-mini { padding: 10px 0; margin: 0; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border-radius: var(--raio-p); border: 1px solid var(--linha); background: var(--sup); color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--marca); }
.btn-primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn-primario:hover { filter: brightness(1.08); }
.btn-whats { background: #1faa59; border-color: #1faa59; color: #fff; }
.btn-p { padding: 7px 11px; font-size: .85rem; }
.btn-g { padding: 13px 22px; font-size: 1rem; }
.btn-bloco { width: 100%; }

/* ---------- selos, tags, chips ---------- */
.selo { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: var(--info-bg); color: var(--info); }
.st-ok { background: var(--ok-bg); color: var(--ok); }
.st-atencao { background: var(--atencao-bg); color: var(--atencao); }
.st-perigo { background: var(--perigo-bg); color: var(--perigo); }
.st-neutro { background: var(--sup-2); color: var(--muted); border: 1px solid var(--linha); }
.selo-op { background: var(--op-bg); color: var(--op); }
.selo-classe { background: var(--marca-claro); color: var(--marca); }
.cat-premium { background: linear-gradient(135deg, #1b1f3b, #3c2f6b); color: #f6d77a; }
.cat-ouro { background: #fbefc9; color: #8a6200; }
.cat-prata { background: #e7ebf0; color: #4b5668; }
.cat-padrao { background: var(--sup-2); color: var(--muted); border: 1px solid var(--linha); }
.tag { font-size: .72rem; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--sup-2); color: var(--tinta-2); border: 1px solid var(--linha); white-space: nowrap; }
.tag-pronta { color: var(--pronta); border-color: color-mix(in srgb, var(--pronta) 35%, transparent); }
.tag-surf { color: var(--surf); border-color: color-mix(in srgb, var(--surf) 35%, transparent); }
.var { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: .8rem; }
.var.sobe { color: var(--ok); } .var.desce { color: var(--perigo); } .var.neutro { color: var(--muted); font-weight: 600; }
.bolinha { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--op); vertical-align: middle; }
.bolinha.perigo { background: var(--perigo); }

/* ---------- KPIs ---------- */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--sombra); min-width: 0; }
.kpi-rot { font-size: .76rem; color: var(--muted); font-weight: 600; }
.kpi strong { font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi strong small { font-size: .9rem; color: var(--muted); font-weight: 600; }
.kpi-sub { font-size: .76rem; color: var(--muted); display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.kpi-destaque { background: var(--marca-claro); border-color: color-mix(in srgb, var(--marca) 30%, var(--linha)); border-left: 4px solid var(--marca); grid-column: 1 / -1; }
.kpi-destaque strong { color: var(--marca-esc); }
.kpi-destaque strong { font-size: 1.7rem; }
.kpi-perigo { border-color: color-mix(in srgb, var(--perigo) 40%, var(--linha)); }
.kpi-perigo strong { color: var(--perigo); }
.kpi-atencao strong { color: var(--atencao); }

/* ---------- cliente: topo ---------- */
.cli-topo { display: flex; flex-direction: column; gap: 14px; }
.cli-id { display: flex; gap: 14px; align-items: flex-start; }
.cli-avatar { width: 52px; height: 52px; border-radius: 14px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: var(--marca-esc); background: var(--marca-claro); border: 1px solid color-mix(in srgb, var(--marca) 25%, transparent); }
.cli-avatar.p { width: 36px; height: 36px; border-radius: 10px; font-size: .78rem; }
.cli-linha1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cli-nome p { margin: 6px 0 0; font-size: .86rem; }
.cli-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ancoras { position: sticky; top: 56px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px; margin: -8px 0; background: var(--bg); scrollbar-width: none; }
.ancoras::-webkit-scrollbar { display: none; }
.ancoras a { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--sup); border: 1px solid var(--linha); color: var(--tinta-2); font-size: .82rem; font-weight: 600; }
.ancoras a:hover { border-color: var(--marca); color: var(--marca); }

/* ---------- alertas ---------- */
.bloco-tit { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .95rem; }
.alertas { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.alerta { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; background: var(--sup); border: 1px solid var(--linha); border-left-width: 4px; }
.alerta strong { display: block; font-size: .9rem; }
.alerta small { color: var(--muted); }
.alerta-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.al-perigo { border-left-color: var(--perigo); } .al-perigo .alerta-ico { background: var(--perigo-bg); color: var(--perigo); }
.al-atencao { border-left-color: var(--atencao); } .al-atencao .alerta-ico { background: var(--atencao-bg); color: var(--atencao); }
.al-oportunidade { border-left-color: var(--op); } .al-oportunidade .alerta-ico { background: var(--op-bg); color: var(--op); }
.al-info { border-left-color: var(--info); } .al-info .alerta-ico { background: var(--info-bg); color: var(--info); }

/* ---------- gráfico ---------- */
.graf { width: 100%; height: auto; display: block; }
.graf-grade { stroke: var(--linha); stroke-dasharray: 3 4; }
.graf-barra { fill: var(--marca); opacity: .85; }
.graf-barra.baixa { fill: var(--atencao); }
.graf-barra.recente { opacity: 1; }
g:hover .graf-barra { opacity: 1; filter: brightness(1.1); }
.graf-val, .graf-media-txt { paint-order: stroke; stroke: var(--sup); stroke-width: 4px; stroke-linejoin: round; }
.graf-val { font-size: 11px; font-weight: 700; fill: var(--tinta-2); text-anchor: middle; }
.graf-mes { font-size: 11px; fill: var(--muted); text-anchor: middle; }
.graf-media { stroke: var(--op); stroke-width: 1.5; stroke-dasharray: 6 4; }
.graf-media-txt { font-size: 11px; font-weight: 700; fill: var(--op); }
.leg-media { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.leg-media i { display: inline-block; width: 18px; border-top: 2px dashed var(--op); }
.leg-media i.baixa { width: 10px; height: 10px; border: 0; border-radius: 3px; background: var(--atencao); margin-left: 6px; }
.spark polyline { fill: none; stroke: var(--marca); stroke-width: 1.6; }

/* ---------- tabelas ---------- */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.tabela th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela.compacta td, .tabela.compacta th { padding: 5px 8px; font-size: .78rem; }
.tabela th.dir, .tabela td.dir { text-align: right; }
.carteira tbody tr { cursor: pointer; }
.carteira tbody tr:hover { background: var(--sup-2); }
.cli-cel { display: flex; align-items: center; gap: 10px; color: var(--tinta); min-width: 210px; }
.cli-cel span:last-child { display: flex; flex-direction: column; }
.prod { display: flex; flex-direction: column; gap: 2px; min-width: 190px; }
.prod .muted { font-size: .76rem; }
.mini-barra { height: 4px; border-radius: 4px; background: var(--sup-2); overflow: hidden; margin-top: 3px; max-width: 220px; }
.mini-barra i { display: block; height: 100%; background: var(--marca); border-radius: 4px; }

/* ---------- pronta x surfaçada ---------- */
.split-barra { display: flex; height: 14px; border-radius: 8px; overflow: hidden; gap: 2px; }
.split-barra span { display: block; height: 100%; }
.sp-pronta { background: var(--pronta); }
.sp-surf { background: var(--surf); }
.split-leg { display: flex; justify-content: space-between; margin-top: 8px; font-size: .82rem; font-weight: 600; }
.split-leg i, .tipo-rot i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tipos { display: grid; gap: 10px; margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
.tipo-card { border: 1px solid var(--linha); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 3px; background: var(--sup-2); }
.tipo-rot { font-size: .8rem; font-weight: 700; color: var(--tinta-2); }
.tipo-card strong { font-size: 1.25rem; font-weight: 800; }
.tipo-card strong small { font-size: .8rem; color: var(--muted); font-weight: 600; }
.tipo-card .muted, .tipo-var { font-size: .8rem; }
.tipo-var { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ---------- marcas ---------- */
.marcas { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.marca-card { border: 1px solid var(--linha); border-radius: 12px; padding: 13px; background: var(--sup); }
.marca-card p { margin: 10px 0 0; font-size: .82rem; }
.marca-queda { border-color: color-mix(in srgb, var(--perigo) 35%, var(--linha)); background: color-mix(in srgb, var(--perigo-bg) 45%, var(--sup)); }
.marca-zero { border-style: dashed; border-color: color-mix(in srgb, var(--op) 45%, var(--linha)); }
.marca-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.marca-num { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.marca-num div { display: flex; flex-direction: column; }
.marca-num small { color: var(--muted); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.marca-num b { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.marca-num span { font-size: .74rem; color: var(--muted); }
.marca-alerta { color: var(--perigo); font-weight: 650; display: flex; gap: 5px; align-items: center; }
.marca-ok { color: var(--ok); font-weight: 650; display: flex; gap: 5px; align-items: center; }

/* ---------- abas ---------- */
.abas { display: flex; gap: 4px; background: var(--sup-2); border: 1px solid var(--linha); padding: 3px; border-radius: 10px; overflow-x: auto; max-width: 100%; }
.abas button { border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); padding: 6px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.abas button.on { background: var(--sup); color: var(--tinta); box-shadow: var(--sombra); }
.abas .cont { font-style: normal; background: var(--perigo); color: #fff; border-radius: 999px; font-size: .68rem; padding: 0 6px; }
.aba-painel { display: none; }
.aba-painel.on { display: block; }

/* ---------- pacotes, financeiro ---------- */
.mini-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.mini-kpis div { background: var(--sup-2); border: 1px solid var(--linha); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; }
.mini-kpis b { font-size: 1.02rem; white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; }
.mini-kpis span { font-size: .74rem; color: var(--muted); }
.mk-alerta { border-color: color-mix(in srgb, var(--op) 45%, var(--linha)) !important; } .mk-alerta b { color: var(--op); }
.mk-perigo { border-color: color-mix(in srgb, var(--perigo) 45%, var(--linha)) !important; } .mk-perigo b { color: var(--perigo); }
.pacote { border: 1px solid var(--linha); border-radius: 12px; padding: 13px; margin-top: 10px; }
.pac-vencido { opacity: .6; }
.pac-cab { display: flex; flex-direction: column; gap: 8px; }
.pac-cab > div:first-child { display: flex; flex-direction: column; }
.pac-cab .muted { font-size: .78rem; }
.pac-selos { display: flex; gap: 6px; flex-wrap: wrap; }
.pac-total { margin: 12px 0 6px; display: flex; flex-direction: column; gap: 6px; font-size: .84rem; }
.progresso { height: 9px; background: var(--sup-2); border: 1px solid var(--linha); border-radius: 99px; overflow: hidden; display: block; }
.progresso i { display: block; height: 100%; background: var(--marca); border-radius: 99px; }
.progresso.cheio i { background: var(--op); }
.progresso.fino { height: 5px; border: 0; background: var(--linha); }
.progresso.inline { display: inline-block; width: 60px; vertical-align: middle; }
.pac-itens { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 9px; }
.pac-itens li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: .82rem; }
.pac-itens .progresso { grid-column: 1 / -1; }
.pac-item-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.limite { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: .8rem; }

/* ---------- linha do tempo (visitas) ---------- */
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.visita { display: grid; grid-template-columns: 14px 1fr; gap: 12px; position: relative; padding-bottom: 18px; }
.visita:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--linha); }
.visita-ponto { width: 14px; height: 14px; border-radius: 50%; margin-top: 3px; border: 3px solid var(--sup); box-shadow: 0 0 0 1px var(--linha); padding: 0; }
.visita-ponto.st-ok { background: var(--ok); } .visita-ponto.st-atencao { background: var(--atencao); } .visita-ponto.st-perigo { background: var(--perigo); } .visita-ponto.st-neutro { background: var(--muted); }
.visita-cab { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.visita-cli { font-weight: 700; }
.visita-corpo p { margin: 7px 0; font-size: .9rem; color: var(--tinta-2); }
.visita-prox { display: flex; gap: 6px; background: var(--marca-claro); padding: 8px 10px; border-radius: 9px; font-size: .84rem !important; }
.visita-prox .ico { color: var(--marca); margin-top: 2px; }

/* ---------- listas (início) ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista li + li { border-top: 1px solid var(--linha); }
.lista-item { display: flex; align-items: center; gap: 12px; padding: 10px 2px; color: var(--tinta); }
.lista-item:hover { background: var(--sup-2); }
.lista-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lista-txt small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-box { width: 44px; height: 46px; flex: none; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--sup-2); border: 1px solid var(--linha); line-height: 1.05; }
.data-box b { font-size: 1.05rem; }
.data-box small { text-transform: uppercase; color: var(--muted); font-size: .64rem; font-weight: 700; }
.data-box.proximo { background: var(--atencao-bg); border-color: transparent; }
.data-box.atrasado { background: var(--perigo-bg); border-color: transparent; color: var(--perigo); }

/* ---------- início ---------- */
.boas-vindas { display: flex; flex-direction: column; gap: 14px; }
.boas-vindas p { margin: 0 0 2px; }
.busca-grande { display: flex; align-items: center; gap: 10px; background: var(--sup); border: 1.5px solid var(--linha); border-radius: 14px; padding: 6px 6px 6px 14px; box-shadow: var(--sombra); color: var(--muted); }
.busca-grande:focus-within { border-color: var(--marca); }
.busca-grande input { flex: 1; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--tinta); outline: none; min-width: 0; padding: 8px 0; }
.kpis-4, .kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- filtros ---------- */
.filtros { display: flex; flex-direction: column; gap: 10px; }
.busca-campo { display: flex; align-items: center; gap: 8px; background: var(--sup); border: 1px solid var(--linha); border-radius: 10px; padding: 0 12px; color: var(--muted); max-width: 420px; }
.busca-campo input, .busca-campo select { flex: 1; border: 0; background: none; font: inherit; color: var(--tinta); padding: 10px 0; outline: none; min-width: 0; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chip { flex: none; border: 1px solid var(--linha); background: var(--sup); color: var(--tinta-2); padding: 7px 12px; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.chip i { font-style: normal; background: var(--sup-2); border-radius: 99px; padding: 0 7px; font-size: .74rem; color: var(--muted); }
.chip.on { background: var(--marca); border-color: var(--marca); color: #fff; }
.chip.on i { background: rgba(255,255,255,.2); color: #fff; }

/* ---------- formulários ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 650; color: var(--tinta-2); }
.form input, .form select, .form textarea, .nota-form textarea {
  font: inherit; font-weight: 400; font-size: 1rem; color: var(--tinta); background: var(--sup); border: 1px solid var(--linha); border-radius: 10px; padding: 11px 12px; width: 100%; outline: none;
}
.form input:focus, .form select:focus, .form textarea:focus, .nota-form textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-claro); }
.form-linha { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.opcoes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes legend { font-size: .84rem; font-weight: 650; color: var(--tinta-2); margin-bottom: 8px; padding: 0; }
.opcao { flex-direction: row !important; }
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao span { display: block; padding: 9px 14px; border: 1px solid var(--linha); border-radius: 999px; background: var(--sup); font-weight: 600; font-size: .88rem; cursor: pointer; color: var(--tinta-2); }
.opcao input:checked + span { background: var(--marca); border-color: var(--marca); color: #fff; }
.opcao input:focus-visible + span { box-shadow: 0 0 0 3px var(--marca-claro); }
.res-0 input:checked + span { background: var(--ok); border-color: var(--ok); }
.res-1 input:checked + span { background: var(--atencao); border-color: var(--atencao); }
.res-3 input:checked + span { background: var(--perigo); border-color: var(--perigo); }
.ditado { position: relative; }
.ditado textarea { padding-bottom: 54px; resize: vertical; }
.mic { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--marca); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.mic.gravando { background: var(--perigo); animation: pulso 1.2s infinite; }
@keyframes pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(208,52,44,.45); } 50% { box-shadow: 0 0 0 8px rgba(208,52,44,0); } }
.form-acoes { display: flex; justify-content: flex-end; }
.form-acoes .btn { width: 100%; }
.aviso { padding: 10px 12px; border-radius: 10px; font-size: .88rem; font-weight: 600; }
.aviso-perigo { background: var(--perigo-bg); color: var(--perigo); }

/* ---------- modal ---------- */
.modal { border: 0; padding: 0; border-radius: 18px; width: min(720px, calc(100vw - 20px)); max-height: calc(100vh - 30px); background: var(--sup); color: var(--tinta); box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.modal::backdrop { background: rgba(8, 15, 30, .55); backdrop-filter: blur(2px); }
.modal-cab { position: sticky; top: 0; background: var(--sup); display: flex; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--linha); z-index: 1; }
.modal-cab .muted { font-size: .78rem; }
.modal-corpo { padding: 6px 18px 22px; }
.ficha-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ficha-grade > div { background: var(--sup-2); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ficha-grade small { color: var(--muted); font-weight: 600; }
.ficha-grade .muted { font-size: .76rem; }
.contatos { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.contato { display: flex; gap: 11px; align-items: center; padding: 9px 11px; border: 1px solid var(--linha); border-radius: 10px; color: var(--tinta); font-size: .9rem; }
.contato .ico { color: var(--marca); }
.contato span { display: flex; flex-direction: column; min-width: 0; word-break: break-word; }
.contato small { color: var(--muted); font-weight: 600; }
a.contato:hover { border-color: var(--marca); }
.partic { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.partic li { display: flex; gap: 8px; font-size: .9rem; }
.partic .ico { color: var(--ok); margin-top: 2px; }
.obs-erp { margin-top: 12px; background: var(--atencao-bg); border-radius: 10px; padding: 10px 12px; font-size: .88rem; display: flex; flex-direction: column; gap: 2px; }
.obs-erp small { color: var(--atencao); font-weight: 700; }
.nota-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.notas { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.notas li { border-left: 3px solid var(--marca); background: var(--sup-2); padding: 8px 12px; border-radius: 0 10px 10px 0; }
.notas p { margin: 0 0 3px; font-size: .9rem; }

/* ---------- toast, FAB ---------- */
.toast { display: flex; gap: 8px; align-items: center; background: var(--ok-bg); color: var(--ok); font-weight: 650; padding: 11px 14px; border-radius: 12px; font-size: .9rem; }
.fab { display: none;  position: fixed; right: 16px; bottom: 82px; width: 56px; height: 56px; border-radius: 18px; background: var(--marca); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(23,71,201,.45); z-index: 25; }

/* ---------- telas de acesso (login, primeiro acesso, senha) ---------- */
.tela-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 0; background: var(--bg); }
.auth-lado { display: none; }
.auth-form { display: grid; place-items: center; padding: 28px 16px; }
.auth-caixa { width: 100%; max-width: 440px; background: var(--sup); border: 1px solid var(--linha); border-radius: 20px; padding: 28px 24px; box-shadow: 0 20px 50px rgba(16,42,74,.08); display: flex; flex-direction: column; gap: 12px; }
.auth-caixa h1 { font-size: 1.45rem; }
.auth-caixa > p { margin: -4px 0 4px; }
.auth-marcas { display: flex; align-items: center; gap: 14px; }
.auth-marcas.so-celular { margin-bottom: 10px; }
.auth-marcas .logo-unilentes { height: 24px; } .auth-marcas .logo-maxhd { height: 32px; }
.eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--marca); }
.pequeno { font-size: .82rem; }
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 44px; }
.ver-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); padding: 6px; cursor: pointer; border-radius: 6px; }
.ver-senha:hover { color: var(--marca); }
.check { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 500 !important; background: var(--sup-2); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; }
.check input { width: auto !important; margin-top: 3px; }
.aviso-ok { background: var(--ok-bg); color: var(--ok); }
@media (min-width: 960px) {
  .tela-auth { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .auth-lado { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px 56px;
    background: radial-gradient(700px 420px at 0% 0%, rgba(71,168,220,.22), transparent 60%), radial-gradient(600px 400px at 100% 100%, rgba(0,63,125,.10), transparent 60%), var(--sup); border-right: 1px solid var(--linha); }
  .auth-lado .auth-marcas .logo-unilentes { height: 30px; } .auth-lado .auth-marcas .logo-maxhd { height: 40px; }
  .auth-texto { max-width: 470px; display: flex; flex-direction: column; gap: 14px; }
  .auth-texto h2 { font-size: 2rem; line-height: 1.15; font-weight: 800; color: var(--marca-esc); text-wrap: balance; }
  .auth-texto ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 12px; }
  .auth-texto li { display: flex; gap: 12px; align-items: center; color: var(--tinta-2); font-weight: 550; }
  .auth-texto li .ico { color: var(--marca); background: var(--marca-claro); border-radius: 9px; padding: 7px; width: 34px; height: 34px; }
  .auth-marcas.so-celular { display: none; }
  .auth-caixa { box-shadow: none; border: 0; background: transparent; }
}
.dica { font-size: .78rem; color: var(--muted); text-align: center; margin: 0; background: var(--sup-2); padding: 8px; border-radius: 8px; }

/* ---------- KPIs com faixa colorida (padrão claro) ---------- */
.kpi { border-left: 4px solid var(--linha); }
.kpi .kpi-rot { text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; font-weight: 800; }
.faixa-azul { border-left-color: var(--marca); } .faixa-ciano { border-left-color: var(--ciano); } .faixa-verde { border-left-color: var(--ok); }
.faixa-ambar { border-left-color: var(--atencao); } .faixa-vermelho { border-left-color: var(--perigo); } .faixa-roxo { border-left-color: var(--op); }
.faixa-grafite { border-left-color: #434041; } .faixa-marinho { border-left-color: var(--marca-esc); }

/* ---------- diretoria ---------- */
.card-cab.pad { padding: 16px 16px 0; }
.card-cab p { margin: 2px 0 0; }
.linha-link { cursor: pointer; } .linha-link:hover { background: var(--sup-2); }
.pos { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.regioes { display: flex; flex-direction: column; gap: 16px; }
.regiao { display: flex; flex-direction: column; gap: 6px; }
.regiao-cab { display: flex; align-items: center; gap: 10px; }
.regiao-cab .var { margin-left: auto; }
.uf { width: 36px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--marca-claro); color: var(--marca-esc); font-size: .85rem; }
.barra-h { position: relative; height: 28px; background: var(--sup-2); border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.barra-h i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--ciano), var(--marca)); border-radius: 7px; }
.barra-h span { position: relative; font-size: .8rem; font-weight: 700; padding: 0 10px; line-height: 26px; color: var(--tinta); mix-blend-mode: normal; text-shadow: 0 0 6px var(--sup); }
.busca-grande.compacta { width: 100%; max-width: 380px; padding: 2px 12px; }
.filtro-rep .busca-campo { width: 280px; }

/* ---------- usuários ---------- */
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.acoes-linha form { margin: 0; }
.btn-perigo-txt { color: var(--perigo); }
.linha-inativa td { opacity: .55; }
.perfil-representante { background: var(--marca-claro); color: var(--marca-esc); }
.perfil-diretoria { background: var(--op-bg); color: var(--op); }
.perfil-admin { background: #ecebea; color: #434041; }
.senha-card { display: flex; flex-direction: column; gap: 12px; border-left: 4px solid var(--ok); }
.senha-card p { margin: 4px 0 0; }
.senha-dados { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.senha-dados span { display: flex; flex-direction: column; }
.senha-dados small { color: var(--muted); font-weight: 600; }
.senha-dados code { font-size: 1.15rem; font-weight: 700; background: var(--sup-2); border: 1px dashed var(--linha); padding: 4px 10px; border-radius: 8px; letter-spacing: .05em; }
.perfis { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.perfil-op { position: relative; }
.perfil-op input { position: absolute; opacity: 0; }
.perfil-op span { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1.5px solid var(--linha); border-radius: 12px; cursor: pointer; height: 100%; color: var(--tinta); }
.perfil-op span .ico { color: var(--marca); }
.perfil-op small { color: var(--muted); font-weight: 500; font-size: .8rem; }
.perfil-op input:checked + span { border-color: var(--marca); background: var(--marca-claro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 15%, transparent); }
.perfil-op input:focus-visible + span { outline: 2px solid var(--marca); }
.bloco-rep { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: var(--sup-2); border: 1px solid var(--linha); }
.form-usuario .form-acoes { gap: 8px; }
@media (min-width: 640px) {
  .perfis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-linha.meio { grid-template-columns: 1fr 1fr; }
  .senha-card { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* =========================================================
   Telas maiores
   ========================================================= */
@media (min-width: 640px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-destaque { grid-column: auto; }
  .kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alertas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tipos { grid-template-columns: 1fr 1fr; }
  .marcas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cli-acoes { display: flex; flex-wrap: wrap; }
  .pac-cab { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .pac-selos { justify-content: flex-end; }
  .form-linha { grid-template-columns: 2fr 1fr; }
  .form-acoes .btn { width: auto; }
  .contatos { grid-template-columns: 1fr 1fr; }
  .ficha-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtros { flex-direction: row; align-items: center; }
  .busca-campo { flex: none; width: 320px; }
  .boas-vindas { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .busca-grande { width: 520px; }
}
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .menu-baixo, .fab { display: none;  display: none; }
  .menu-topo { display: block; }
  .usuario-txt, .topo-area { display: flex; }
  .pagina { padding: 22px 24px 40px; gap: 18px; }
  .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kpi-destaque { grid-column: span 1; }
  .kpi-destaque strong { font-size: 1.32rem; }
  .kpi strong { white-space: nowrap; }
  .alertas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade-2 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .marcas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cli-topo { flex-direction: row; justify-content: space-between; align-items: center; }
  .cli-acoes { flex-wrap: nowrap; }
  .ancoras { top: 116px; }
  h1 { font-size: 1.6rem; }
}
@media (min-width: 1024px) and (max-width: 1240px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cli-topo { flex-direction: column; align-items: stretch; }
}
@media print {
  .topo, .menu-baixo, .fab, .ancoras, .cli-acoes, .faixa-mock { display: none !important; }
  body { background: #fff; }
}
@media (max-width: 420px) {
  .logo-unilentes { height: 18px; } .logo-maxhd { height: 23px; } .marca { gap: 9px; }
  .menu-usuario summary { padding: 3px; } .menu-usuario summary > .ico { display: none; }
}

/* ---------- aguardando APIs ---------- */
.aguardando { display: flex; gap: 16px; align-items: flex-start; border-style: dashed; background: var(--sup-2); }
.aguardando h2 { margin-bottom: 6px; }
.aguardando p { margin: 0; max-width: 80ch; }
.faixa-sgo { background: var(--marca-claro); color: var(--marca-esc); text-align: center; font-size: .78rem; font-weight: 600; padding: 5px 16px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.faixa-sgo form { margin: 0; }
.faixa-sgo button { border: 0; background: none; color: var(--marca); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }
.cat-vip { background: linear-gradient(135deg, #1b1f3b, #3c2f6b); color: #f6d77a; }
.cat-sem-categoria { background: var(--sup-2); color: var(--muted); border: 1px dashed var(--linha); }
.cat-diamante { background: linear-gradient(135deg, #0b3d6b, #1672b4); color: #e8f6ff; }
.cat-bronze { background: #f3e1cf; color: #8a4b14; }
.busca-form { margin: 0; }
.aviso-lista { margin: 0; padding: 12px 16px; border-top: 1px solid var(--linha); background: var(--sup-2); color: var(--muted); font-size: .85rem; }

/* ---------- pop-up "fora da carteira" ---------- */
.modal-alerta { width: min(440px, calc(100vw - 24px)); }
.alerta-pop { padding: 28px 24px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.alerta-pop h2 { font-size: 1.15rem; text-wrap: balance; }
.alerta-pop p { margin: 0; }
.alerta-pop-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--info-bg); color: var(--info); }
.alerta-pop-ico.atencao { background: var(--atencao-bg); color: var(--atencao); }
.alerta-pop-cli { display: flex; flex-direction: column; gap: 2px; background: var(--sup-2); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 16px; width: 100%; }
.alerta-pop .btn { margin-top: 6px; }

/* ---------- visitas: agenda, edição ---------- */
.st-agenda { background: var(--marca-claro); color: var(--marca-esc); }
.visita-ponto.st-agenda { background: var(--marca); }
.visita-agendada .visita-corpo { background: var(--marca-claro); border-radius: 10px; padding: 8px 10px; }
.visita-editar { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--linha); background: var(--sup); }
.visita-editar:hover { border-color: var(--marca); }
.form-acoes { gap: 10px; align-items: center; flex-wrap: wrap; }
.form-acoes .espaco { flex: 1; }
@media (min-width: 640px) { .form-linha.tres { grid-template-columns: 2fr 1fr 1fr; } }

/* ---------- logo CRM unilentes (símbolo Unilentes + "CRM" no estilo HD) ---------- */
.logo-crm { display: inline-flex; align-items: center; gap: 10px; color: #434041; text-decoration: none; }
.logo-simbolo { width: 46px; height: auto; display: block; flex: none; }
.logo-tx { display: flex; flex-direction: column; line-height: 1; }
.logo-nome { font-size: 1.32rem; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; color: #434041; }
.logo-crm-hd { font-style: italic; font-weight: 900; padding-right: 2px; background: linear-gradient(100deg, #2fc6f4, #1b8fe0 45%, #1846c6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-sub { font-size: .6rem; font-weight: 700; letter-spacing: .24em; color: var(--muted); margin-top: 4px; }
.auth-lado .logo-simbolo { width: 64px; } .auth-lado .logo-nome { font-size: 1.85rem; } .auth-lado .logo-sub { font-size: .7rem; }
.auth-marcas.so-celular .logo-simbolo { width: 52px; } .auth-marcas.so-celular .logo-nome { font-size: 1.5rem; }
@media (max-width: 420px) { .logo-simbolo { width: 38px; } .logo-nome { font-size: 1.12rem; } .logo-sub { font-size: .55rem; } }

/* ---------- cards e chips clicáveis ---------- */
a.kpi-link { color: inherit; text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; position: relative; }
a.kpi-link:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,42,74,.10); border-color: color-mix(in srgb, var(--marca) 35%, var(--linha)); }
a.kpi-link:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
a.kpi-link::after { content: "Ver clientes →"; position: absolute; right: 14px; bottom: 12px; font-size: .7rem; font-weight: 700; color: var(--marca); opacity: 0; transition: opacity .12s ease; }
a.kpi-link:hover::after { opacity: 1; }
a.chip { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { a.kpi-link { transition: none; } a.kpi-link:hover { transform: none; } }

/* ---------- formulário de visita + histórico ao lado ---------- */
.visita-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.painel-historico { order: -1; transition: opacity .15s; }
.painel-historico.carregando { opacity: .5; }
.hist { display: flex; flex-direction: column; gap: 12px; }
.hist-cab { display: flex; flex-direction: column; gap: 2px; }
.hist-cab h2 { display: flex; gap: 8px; align-items: center; }
.hist-cab h2 .ico { color: var(--marca); }
.hist-cab .muted { font-size: .82rem; }
.hist-vazio { margin: 0; font-size: .9rem; }
.hist-ultima { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; background: var(--sup-2); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; }
.hist-ultima strong { font-size: .92rem; }
.hist-ultima p { margin: 2px 0 0; font-size: .9rem; color: var(--tinta-2); }
.hist-pendente { display: flex; flex-direction: column; gap: 4px; background: var(--atencao-bg); border-left: 4px solid var(--atencao); border-radius: 0 12px 12px 0; padding: 10px 14px; }
.hist-pendente .eyebrow { color: var(--atencao); display: flex; gap: 6px; align-items: center; }
.hist-pendente.atrasado { background: var(--perigo-bg); border-left-color: var(--perigo); }
.hist-pendente.atrasado .eyebrow { color: var(--perigo); }
.hist-pendente small { color: var(--tinta-2); }
.hist-bloco { display: flex; flex-direction: column; gap: 6px; }
.hist-bloco .eyebrow { color: var(--muted); }
.hist-linha { display: flex; gap: 6px; align-items: center; font-size: .86rem; }
.hist-linha .ico { color: var(--marca); }
.hist-item { border: 1px solid var(--linha); border-radius: 10px; padding: 8px 12px; font-size: .86rem; }
.hist-item summary { cursor: pointer; }
.hist-item p { margin: 6px 0 0; }
@media (min-width: 1024px) {
  .visita-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  .painel-historico { order: 0; position: sticky; top: 132px; max-height: calc(100vh - 150px); overflow: auto; }
}
.usar-combinado { align-self: flex-start; margin: 4px 0 2px; background: var(--sup); }

/* roteiro da visita (planejado ao agendar) */
.campo-roteiro > span { display: flex; gap: 6px; align-items: center; }
.campo-roteiro > span .ico { color: var(--marca); }
.campo-roteiro.planejado { background: var(--marca-claro); border-radius: 12px; padding: 10px 12px; }
.campo-roteiro.planejado textarea { background: #fff; }
.visita-roteiro { display: flex; gap: 6px; font-size: .86rem !important; color: var(--tinta-2); border-left: 3px solid var(--marca); padding-left: 8px; }
.visita-roteiro .ico { color: var(--marca); margin-top: 2px; }
.hist-roteiro { font-size: .84rem; color: var(--tinta-2); border-left: 3px solid var(--marca); padding-left: 8px; margin: 0; }
.hist-resumo-tit { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.visita-editar.registrar { background: var(--marca); color: #fff; border-radius: 999px; padding: 3px 10px; }
.visita-editar.registrar .ico { color: #fff; }

/* ---------- garantias (Painel de Garantia) ---------- */
.st-info { background: var(--info-bg); color: var(--info); }
.gar-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.gar { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra); }
.gar-aberta { border-left: 4px solid var(--marca); }
.card .gar { box-shadow: none; }
.gar-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.gar-cab > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gar-pedido { font-size: 1.02rem; }
.gar-cli { font-weight: 600; color: var(--marca); font-size: .88rem; }
.gar-cab small { font-size: .78rem; }
.gar-info { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .86rem; color: var(--tinta-2); }
.gar-passos { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.gar-passos li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.gar-passos li::before { content: ''; position: absolute; top: 7px; left: -50%; width: 100%; height: 3px; background: var(--linha); z-index: 0; }
.gar-passos li:first-child::before { display: none; }
.gar-passos li span { width: 16px; height: 16px; border-radius: 50%; background: var(--sup); border: 3px solid var(--linha); position: relative; z-index: 1; }
.gar-passos li small { font-size: .7rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.gar-passos li.feito span { background: var(--ok); border-color: var(--ok); }
.gar-passos li.feito::before, .gar-passos li.atual::before { background: var(--ok); }
.gar-passos li.feito small { color: var(--tinta-2); }
.gar-passos li.atual span { background: #fff; border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-claro); }
.gar-passos li.atual small { color: var(--marca); font-weight: 800; }
.gar-passos li.erro span { background: var(--perigo); border-color: var(--perigo); }
.gar-passos li.erro::before { background: var(--ok); }
.gar-passos li.erro small { color: var(--perigo); font-weight: 800; }
.gar-passos li.fora { opacity: .35; }
.gar-aviso { margin: 0; font-size: .86rem; padding: 8px 12px; border-radius: 10px; background: var(--info-bg); color: var(--tinta); }
.gar-aviso.ok { background: var(--ok-bg); }
.gar-aviso.atencao { background: var(--atencao-bg); }
.gar-aviso.perigo { background: var(--perigo-bg); }
.gar-aviso small { color: var(--tinta-2); }
.gar-busca-info { margin: 12px 0 0; font-size: .9rem; }
.filtros + .kpis, .filtros + .gar-busca-info { margin-top: 14px; }
.kpis + .chips { margin-top: 14px; }
@media (min-width: 900px) { .gar-lista { display: grid; grid-template-columns: 1fr 1fr; } .card .gar-lista { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 900px) { .gar-busca .busca-campo { width: 480px; max-width: 480px; } }
@media (max-width: 600px) { .gar-cab { flex-direction: column-reverse; align-items: flex-start; } .gar-passos li small { font-size: .62rem; } }

/* ---------- vendas (pedidos do SGO) ---------- */
.aviso-faixa { display: flex; gap: 8px; align-items: center; background: var(--atencao-bg); color: var(--atencao); border-radius: 12px; padding: 10px 14px; font-size: .86rem; font-weight: 600; margin-bottom: 14px; }
.mix-barra { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--sup-2); margin: 4px 0 12px; }
.mix-barra i { display: block; height: 100%; }
.cat-pontinho { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.pedidos-lista { display: flex; flex-direction: column; }
.ped { border-bottom: 1px solid var(--linha); }
.ped:last-child { border-bottom: 0; }
.ped > summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 4px; cursor: pointer; }
.ped > summary::-webkit-details-marker { display: none; }
.ped > summary:hover { background: var(--sup-2); }
.ped-id { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .9rem; }
.ped-id small { color: var(--muted); }
.ped-valor { text-align: right; font-weight: 800; color: var(--marca-esc); }
.ped-valor small { display: block; font-weight: 500; color: var(--muted); font-size: .74rem; }
.ped-itens { margin: 0 0 10px; padding: 8px 12px; background: var(--sup-2); border-radius: 10px; font-size: .82rem; }
.ped-itens table { width: 100%; border-collapse: collapse; }
.ped-itens td { padding: 4px 6px; border-bottom: 1px dashed var(--linha); }
.ped-itens tr:last-child td { border-bottom: 0; }
.ped-sit-A { background: var(--atencao-bg); color: var(--atencao); } .ped-sit-F, .ped-sit-B { background: var(--ok-bg); color: var(--ok); } .ped-sit-C { background: var(--perigo-bg); color: var(--perigo); } .ped-sit-G { background: var(--op-bg); color: var(--op); }
.regiao-cab .uf.cidade { width: auto; min-width: 0; height: auto; padding: 0; background: none; color: var(--tinta); font-size: .9rem; }
.regiao-cab:has(.cidade) { flex-wrap: wrap; }

/* ---- Raio X (RFV) ---- */
.rx-filtro { display: flex; align-items: center; gap: 8px; margin: 0; }
.rx-filtro select { font: inherit; font-size: .88rem; padding: 8px 10px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--sup); color: var(--tinta); }
.rx-segs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rx-seg { --sc: var(--marca); display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--sup); border: 1px solid var(--linha); border-top: 4px solid var(--sc); border-radius: var(--raio); box-shadow: var(--sombra); color: var(--tinta); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.rx-seg:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,42,74,.1); }
.rx-seg.on { background: color-mix(in srgb, var(--sc) 7%, var(--sup)); border-color: color-mix(in srgb, var(--sc) 45%, var(--linha)); }
.rx-seg-cod { font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: var(--sc); font-variant-numeric: tabular-nums; }
.rx-seg-nome { font-size: .98rem; }
.rx-seg strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.rx-seg strong small { font-size: .8rem; color: var(--muted); font-weight: 600; }
.rx-seg-bar { height: 6px; border-radius: 99px; background: var(--sup-2); overflow: hidden; }
.rx-seg-bar i { display: block; height: 100%; background: var(--sc); border-radius: 99px; }
.rx-seg-num { font-size: .76rem; color: var(--muted); }
.rx-seg-num b { color: var(--tinta-2); }
.rx-seg-estr { font-size: .78rem; color: var(--tinta-2); border-top: 1px dashed var(--linha); padding-top: 8px; margin-top: 2px; }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rx-kpis { margin-bottom: 10px; }
.rx-kpis .kpi { box-shadow: none; padding: 10px 12px; }
.rx-kpis .kpi strong { font-size: 1.15rem; }
.rx-novo { fill: var(--marca); } .rx-novo.parcial { fill: color-mix(in srgb, var(--marca) 55%, #fff); }
.rx-volta { fill: color-mix(in srgb, var(--ciano) 35%, #fff); }
.leg-media i.rx-l-novo, .leg-media i.rx-l-volta { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin: 0 4px 0 8px; vertical-align: -1px; border: 0; }
.leg-media i.rx-l-novo { background: var(--marca); } .leg-media i.rx-l-volta { background: color-mix(in srgb, var(--ciano) 35%, #fff); }
.rx-obs { margin: 8px 0 0; }
.rx-mapa { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.rx-eixo-y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .72rem; color: var(--muted); font-weight: 600; text-align: center; }
.rx-eixo-x { grid-column: 2; font-size: .72rem; color: var(--muted); font-weight: 600; text-align: center; }
.rx-mapa table { width: 100%; border-collapse: separate; border-spacing: 4px; font-variant-numeric: tabular-nums; }
.rx-mapa th { font-size: .74rem; color: var(--muted); font-weight: 700; width: 22px; }
.rx-mapa td { --a: .1; background: color-mix(in srgb, var(--marca) calc(var(--a) * 100%), var(--sup-2)); border-radius: 8px; height: 44px; text-align: center; font-weight: 700; font-size: .9rem; color: var(--tinta); }
.rx-mapa td.esc { color: #fff; }
.rx-cidades { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-cidades .chip { cursor: default; }
.rx-nota { display: inline-flex; gap: 3px; }
.rx-nota i { font-style: normal; width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font-size: .76rem; font-weight: 800; color: #fff; }
.rx-nota .n5 { background: #15803d; } .rx-nota .n4 { background: #4d9f3a; } .rx-nota .n3 { background: #c9a227; } .rx-nota .n2 { background: #d9822b; } .rx-nota .n1 { background: #c0392b; }
@media (max-width: 700px) { .kpis-3 { grid-template-columns: 1fr; } }
.nowrap { white-space: nowrap; }
small.bloco { display: block; }