/* CRM Forca de Vendas - identidade corporativa telecom B2B.
   Toda a identidade mora nas variaveis abaixo, preparada para troca futura de marca. */
:root {
  --brand: #b3261e;            /* acento institucional */
  --brand-strong: #8f1d17;
  --nav-bg: #14181f;           /* sidebar grafite */
  --nav-ink: #c6ccd6;
  --nav-active: #ffffff;
  --surface: #f4f5f7;
  --card: #ffffff;
  /* Cinzas escurecidos em 09/09/2026. O --ink-3 antigo (#8a93a1) dava 2,9:1 sobre o
     branco do cartao -- abaixo do minimo de 4,5:1 que a WCAG pede para texto pequeno --
     e era justamente ele que carregava a dica embaixo de cada numero do Painel. Numa
     sala de reuniao, com projetor e luz acesa, essas linhas sumiam.
     Os tres novos passam em AA sobre branco e sobre o cinza do fundo. */
  --ink: #12181f;              /* texto primario   14,9:1 */
  --ink-2: #2f3742;            /* texto secundario 11,1:1 */
  --ink-3: #59616d;            /* texto apagado     6,3:1, era 2,9:1 */
  --line: #e3e6ea;
  --seq: #345d8a;              /* matiz unico para barras de magnitude */
  --seq-soft: #e5edf5;
  --ok: #1c7c43;  --ok-soft: #e2f2e8;
  --warn: #9a6a00; --warn-soft: #fdf3d8;
  --bad: #b3261e;  --bad-soft: #fbe9e7;
  --info-soft: #e8eef5;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .08);
  font-size: 15px;
}
* { box-sizing: border-box; margin: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--surface); color: var(--ink); }
a { color: var(--seq); text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); }

/* ---------- login ---------- */
/* O cartao era um bloco branco opaco no meio do video: o fundo ficava so na moldura e as
   duas coisas nao se falavam. Agora ele e VIDRO ESCURO, deixando a cena passar por tras
   com desfoque. O texto vira claro sobre escuro, que e o unico jeito de o video aparecer
   inteiro sem comer a legibilidade. */
.login-wrap { min-height: 100vh; display: grid; place-items: center;
  background: #05070c; padding: 16px; }
.login-card { width: 100%; max-width: 400px; padding: 38px 34px; border-radius: 20px;
  background: rgba(10, 15, 24, .62);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(150, 200, 255, .16);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07);
  color: #e8eef7; }
.login-card h1 { font-size: 30px; letter-spacing: 3px; text-transform: uppercase;
  font-weight: 600; color: #fff; line-height: 1; }
/* Marca em coluna e centralizada: com o simbolo grande em cima, o nome ganha o peso de
   marca em vez de virar cabecalho de formulario. */
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-bottom: 6px; text-align: center; }
.login-brand .logo { width: 92px; height: 92px; display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(74,146,255,.26), rgba(74,146,255,0) 68%);
  color: #7fc0ff; }
.login-tag { display: block; font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: #7f97b3; margin-top: 8px; white-space: nowrap; }
.login-sub { color: #8ea6c2; font-size: 13px; margin: 14px 0 24px; text-align: center; }
/* Campos escuros: caixa branca sobre vidro escuro voltaria a furar o fundo. */
.login-card label { color: #93a9c4; font-size: 12px; letter-spacing: .3px; }
/* .field input tem a mesma especificidade e vem antes, entao a regra do login precisa
   alcancar .field para valer. Sem isso o campo continuava branco e furava o vidro. */
.login-card .field input, .login-card input { background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(150, 200, 255, .20); color: #eef4fb; border-radius: 10px;
  padding: 11px 13px; }
.login-card .field input:focus, .login-card input:focus { border-color: rgba(125, 196, 255, .6);
  outline: 2px solid rgba(125, 196, 255, .16); outline-offset: 0;
  background: rgba(255, 255, 255, .11); }
.login-card input::placeholder { color: #5f7793; }
.login-card .field { margin-bottom: 14px; }
.login-card .btn.primary { background: var(--brand); border-color: var(--brand);
  box-shadow: 0 6px 20px rgba(179, 38, 30, .38); letter-spacing: .4px; }
.login-card .muted { color: #7f97b3; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
/* A sidebar NAO rola inteira: quem rola e a lista de itens, dentro dela.
   Antes a rolagem era da sidebar toda e o rodape ficava no fim do conteudo, portanto
   abaixo da dobra: num 1280x720 o Gerente Regional, que tem 17 itens, nao via
   "Auditoria", "Administracao" nem o botao Sair. */
.sidebar { background: var(--nav-bg); color: var(--nav-ink); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* A lista de itens e a unica coisa que rola. */
.sidebar .nav-rola { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; }

/* O rodape e irmao da lista, e nao parte dela: fica sempre no fim, sem cobrir item
   nenhum. A primeira tentativa usou position:sticky, que faz o rodape FLUTUAR sobre o
   conteudo -- e com fundo opaco ele passou a esconder justamente o "Auditoria" que
   deveria ajudar a alcancar. Trocar de camada nao resolve espaco: quem resolve e tirar
   o rodape da area rolavel. */
.sidebar .foot { flex: 0 0 auto; padding-top: 10px; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.10); }

.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; color: #fff; font-weight: 700; font-size: 16px; }
.sidebar .brand .logo { width: 32px; height: 32px; border-radius: 9px; background: var(--brand);
  color: #fff; display: grid; place-items: center; }
.sidebar .brand { letter-spacing: .6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--nav-ink); font-size: 14px; border: 0; background: none; width: 100%; text-align: left; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: var(--brand); color: var(--nav-active); font-weight: 600; }
/* o icone agora e SVG desenhado, nao emoji: precisa de caixa, nao de alinhamento
   de texto, e herda a cor do item para acender junto no estado ativo */
.nav-item .ico { width: 18px; height: 18px; flex: none; display: block; }
.nav-item .ico svg { width: 18px; height: 18px; display: block; }
.mobile-nav .ico svg { width: 20px; height: 20px; display: block; }
.nav-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6b7484; padding: 14px 12px 4px; }
.sidebar .foot { margin-top: auto; padding: 10px 12px; font-size: 12px; color: #6b7484; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.topbar .search { flex: 1; max-width: 480px; position: relative; }
.topbar .search input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.topbar .search .ico { position: absolute; left: 11px; top: 9px; color: var(--ink-3); }
.search-results { position: absolute; top: 42px; left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); max-height: 380px; overflow-y: auto; z-index: 50; }
.search-results .item { padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.search-results .item:hover { background: var(--surface); }
.userchip { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.userchip .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--seq); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.userchip .who { line-height: 1.15; }
.userchip .who b { font-size: 13.5px; display: block; }
.userchip .who span { font-size: 11.5px; color: var(--ink-3); }
.bell { position: relative; border: 1px solid var(--line); background: var(--card); border-radius: 8px; width: 38px; height: 38px; font-size: 16px; }
.bell .dot { position: absolute; top: -5px; right: -5px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 999px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 3px; }
.notif-panel { position: absolute; right: 18px; top: 58px; width: 360px; max-width: calc(100vw - 24px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.16); z-index: 60; max-height: 65vh; overflow-y: auto; }
.notif-panel .head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
.notif { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.notif.unread { background: var(--info-soft); }
.notif small { color: var(--ink-3); display: block; margin-top: 3px; }

.content { padding: 22px; max-width: 1280px; width: 100%; margin: 0 auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.page-head h2 { font-size: 21px; }
.page-head .spacer { flex: 1; }

/* ---------- componentes ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card .card-head { padding: 13px 16px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.card .card-body { padding: 16px; }
.grid { display: grid; gap: 14px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 8px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: var(--surface); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-strong); }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--seq); outline-offset: -1px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.form-grid .wide { grid-column: 1 / -1; }

.error-msg { background: var(--bad-soft); color: var(--bad); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 12px; }

/* tabela */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: left; padding: 10px 12px; color: var(--ink-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--line); white-space: nowrap; cursor: pointer; user-select: none; }
table.data th.nosort { cursor: default; }
table.data td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:hover { background: #f8fafc; }
table.data tbody tr.clickable { cursor: pointer; }
.pager { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.pager .spacer { flex: 1; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--info-soft); color: var(--ink-2); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.seq { background: var(--seq-soft); color: var(--seq); }

/* stat tiles (dashboard) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow); }
.tile .label { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.tile .value { font-size: 27px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; }
.tile .value small { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.tile.alert .value { color: var(--bad); }
.tile.good .value { color: var(--ok); }
.tile.clickable { cursor: pointer; }
.tile.clickable:hover { border-color: var(--seq); }

/* barras de magnitude: um unico matiz, rotulo em tinta */
.barlist .row { display: grid; grid-template-columns: 130px 1fr 46px; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.barlist .row .name { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barlist .bar { height: 14px; background: var(--seq); border-radius: 0 4px 4px 0; min-width: 2px; }
.barlist .track { background: var(--seq-soft); border-radius: 0 4px 4px 0; }
.barlist .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* filtros */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.filters .field { margin-bottom: 0; min-width: 140px; flex: 0 1 170px; }
.filters .field.grow { flex: 1 1 220px; }

/* ficha da empresa */
.company-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.company-head h2 { font-size: 20px; }
.company-head .meta { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tab { border: 0; background: none; padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.timeline { list-style: none; }
.timeline li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--line); margin-left: 8px; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--seq); }
.timeline li:last-child { border-left-color: transparent; }
.timeline .when { font-size: 12px; color: var(--ink-3); }
.timeline .what { font-size: 14px; margin: 2px 0; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 7px 12px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { font-weight: 500; }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(10,14,20,.5); display: grid; place-items: center; z-index: 100; padding: 14px; }
.modal { background: var(--card); border-radius: 14px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal .m-head { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 16px; }
.modal .m-body { padding: 18px; }
.modal .m-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.x-btn { border: 0; background: none; font-size: 20px; color: var(--ink-3); }

/* toast */
#toast-root { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--nav-bg); color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 340px; }
.toast.err { background: var(--brand-strong); }

.empty { text-align: center; color: var(--ink-3); padding: 28px 10px; font-size: 13.5px; }
.muted { color: var(--ink-3); font-size: 12.5px; }
.mono { font-variant-numeric: tabular-nums; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 4px 0; }
.chk input { width: 16px; height: 16px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

/* funil kanban */
.funil-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.funil-col { background: #eceff3; border-radius: var(--radius); min-width: 250px; flex: 1 0 250px; padding: 8px; }
.funil-col.drag-over { background: var(--seq-soft); outline: 2px dashed var(--seq); }
.funil-col-head { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px 10px; font-size: 13.5px; }
.funil-col-head .muted { font-size: 12px; }
.funil-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.funil-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px; cursor: grab; box-shadow: var(--shadow); }
.funil-card:active { cursor: grabbing; }
.funil-card:hover { border-color: var(--seq); }

/* import steps */
.steps { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.step { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-3); }
.step.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.step.done { background: var(--ok-soft); border-color: var(--ok-soft); color: var(--ok); }

/* Titulo de secao dentro de uma aba fundida da ficha. Marca a divisao que a aba
   deixou de fazer, para os blocos empilhados nao virarem uma parede unica. */
.secao-ficha { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); margin: 22px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line); }
.secao-ficha:first-child { margin-top: 4px; }

/* Menu do usuario: lista de atalhos em coluna, com alvo grande o suficiente para o dedo. */
.menu-usuario { display: grid; gap: 6px; }
.menu-usuario .btn { justify-content: flex-start; text-align: left; padding: 10px 12px; }

/* ---------- mobile ---------- */
.mobile-nav { display: none; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .content { padding: 14px; padding-bottom: 84px; }
  .topbar { padding: 10px 12px; }
  .userchip .who { display: none; }
  .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--nav-bg); z-index: 80; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .mobile-nav button { flex: 1; border: 0; background: none; color: var(--nav-ink); font-size: 10.5px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; border-radius: 8px; }
  .mobile-nav button .ico { font-size: 19px; }
  .mobile-nav button.active { color: #fff; }
  .mobile-nav button.active .ico { color: var(--brand); }
  .kv { grid-template-columns: 110px 1fr; }
  .filters .field { flex: 1 1 46%; min-width: 0; }
  table.data th, table.data td { padding: 8px 8px; }
  .hide-m { display: none !important; }
  /* Rolagem lateral em faixa de navegacao esconde alvo: o que sai da borda deixa de
     existir para quem nao adivinha que precisa arrastar. Mesmo apertadas, as cinco
     abas dao 444px numa tela de 375. Entao elas quebram em duas linhas: ocupa alguns
     pixels de altura e, em troca, nenhuma aba fica fora da vista. */
  .tabs { flex-wrap: wrap; overflow-x: visible; gap: 2px 4px; }
  .tab { padding: 8px 10px; font-size: 12.5px; }
}

/* Carregamento: consulta em 3,2 milhoes leva segundos e a tela precisa dizer isso. */
.carregando { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 46px 10px; color: var(--ink-2); }
.carregando .demora { font-size: 12.5px; min-height: 16px; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* Barra de selecao: fica acima da tabela, onde o vendedor esta olhando ao marcar. */
.sel-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 10px;
  background: var(--info-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.sel-bar b { color: var(--ink); font-size: 13.5px; }

/* ---- lista de buscas do LinkedIn ---- */
.ll-list { display: flex; flex-direction: column; gap: 8px; }
.ll-item { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit; background: var(--card); transition: .12s; }
.ll-item:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.ll-num { width: 24px; height: 24px; border-radius: 50%; background: var(--seq); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ll-go { font-size: 12px; color: var(--brand); font-weight: 600; white-space: nowrap; }
.ll-conf { margin-top: 14px; padding: 10px 12px; border-left: 3px solid var(--warn);
  background: var(--warn-soft); border-radius: 0 var(--radius) var(--radius) 0; font-size: 13px; }
.ll-nota { margin-top: 8px; font-size: 12px; color: var(--ink-3); }

/* ---- registro do perfil do LinkedIn ---- */
.ll-achado { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-radius: var(--radius); background: var(--ok-soft);
  border-left: 3px solid var(--ok); }
.ll-semperfil { padding: 10px 12px; border-radius: var(--radius); background: var(--surface);
  border-left: 3px solid var(--ink-3); font-size: 13px; }
.ll-reg { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ll-reg label { display: block; margin-bottom: 6px; font-size: 13px; }
.ll-input { width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 13px; background: var(--card); color: var(--ink); }
.ll-input:focus { outline: 2px solid var(--seq); outline-offset: -1px; border-color: var(--seq); }
.ll-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* estado no proprio botao da ficha, para o GN nao abrir o modal so para descobrir o estado */
.btn.ok { border-color: var(--ok); color: var(--ok); }
.btn.off { color: var(--ink-3); }

/* ---------- fundo em video, so na tela de acesso ---------- */
/* O video fica atras de tudo e NAO recebe clique. object-fit cover preenche qualquer
   proporcao sem distorcer, do celular do GN ao monitor do escritorio.
   Nada aqui toca nas telas de trabalho: dentro do CRM o fundo e liso, porque movimento
   atras de tabela de empresa atrapalha a leitura e cansa em oito horas de uso. */
#fundo-video { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover;
  z-index: -2; pointer-events: none; }
body.com-fundo { background: #05070c; }
/* Veu escuro em gradiente, mais denso onde o cartao fica: assim a cena continua visivel
   nas bordas e o centro ganha contraste para o texto, sem apagar o video inteiro. */
body.com-fundo::before { content: ''; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(5,7,12,.72) 0%, rgba(5,7,12,.45) 45%, rgba(5,7,12,.72) 100%);
  pointer-events: none; }
/* Sem video, o veu quase some: ele existe para dar contraste sobre a cena filmada, e
   sobre o desenho so apagaria o desenho. */
body.fundo-estatico::before { background: radial-gradient(ellipse at 50% 50%,
  rgba(5,7,12,.30) 0%, rgba(5,7,12,.10) 45%, rgba(5,7,12,.45) 100%); }
/* o wrap perde o gradiente proprio: quem faz o contraste agora e o cartao de vidro */
body.com-fundo .login-wrap { background: transparent; }
@media (prefers-reduced-motion: reduce) { #fundo-video { display: none; } }

/* FUNDO ESTATICO: o olho desenhado, para a tela de login nunca ficar preta.
   Vale quando o video nao entra (economia de dados, 2G, "reduzir movimento") e tambem
   quando ele entra mas nao toca (autoplay bloqueado, codec recusado, rede caida no meio).
   E vetor num data URI: nao pesa, nao pede rede e nao se move -- exatamente o que quem
   ligou "reduzir movimento" pediu. Sai de cena sozinho quando o video comeca a rodar. */
body.fundo-estatico::after {
  content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    /* brilho da iris, atras do cartao */
    radial-gradient(circle at 50% 46%, rgba(96,170,255,.26) 0%, rgba(96,170,255,.10) 22%, rgba(5,7,12,0) 52%),
    /* o olho, grande o bastante para as bordas aparecerem em volta do cartao */
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 170'>\
<defs><radialGradient id='i' cx='50%25' cy='50%25'>\
<stop offset='0%25' stop-color='%23bfe0ff' stop-opacity='.95'/>\
<stop offset='55%25' stop-color='%234da3ff' stop-opacity='.55'/>\
<stop offset='100%25' stop-color='%231b3b66' stop-opacity='.18'/>\
</radialGradient></defs>\
<g fill='none' stroke='%236fb6ff' stroke-width='3' stroke-linecap='round' opacity='.62'>\
<path d='M14 85 C 74 16, 226 16, 286 85 C 226 154, 74 154, 14 85 Z'/>\
<path d='M150 122 L150 160'/>\
<path d='M186 112 C 208 140, 240 150, 268 148'/>\
<path d='M114 112 C 92 140, 60 150, 32 148'/>\
</g>\
<circle cx='150' cy='85' r='42' fill='url(%23i)'/>\
<circle cx='150' cy='85' r='42' fill='none' stroke='%236fb6ff' stroke-width='3' opacity='.62'/>\
<circle cx='150' cy='85' r='16' fill='%230a1626' opacity='.85'/>\
</svg>") center 44% / min(88vw, 780px) no-repeat,
    #05070c;
}

/* ---- seletor de DDD com varios ao mesmo tempo ---- */
/* A regiao de um coordenador quase nunca e um DDD so ("Aline atende 14 e 16"), entao o
   seletor precisa acumular. Botao em grade em vez de <select multiple>, que no desktop
   exige segurar Ctrl e no celular abre uma lista impossivel de operar com o polegar. */
.ddd-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ddd-btn { display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  min-width: 58px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; transition: .12s; }
.ddd-btn span { font-size: 10px; font-weight: 400; color: var(--ink-3); }
.ddd-btn:hover { border-color: var(--seq); }
.ddd-btn.on { background: var(--seq); border-color: var(--seq); color: #fff; }
.ddd-btn.on span { color: rgba(255,255,255,.8); }
.ddd-btn.limpa { min-width: 0; justify-content: center; color: var(--ink-2); font-weight: 400; }
.field.wide { flex: 1 1 100%; }

/* ==================== identidade Hórus: shell mais ousado ==================== */
/* O layout anterior era correto e sem personalidade: sidebar chapada, tiles todos iguais e
   cards de contorno fino. As mudancas abaixo atacam hierarquia, nao decoracao: o que o GN
   precisa achar em meio segundo passa a ter peso visual, e o resto recua. */

/* --- sidebar: o olho de dados ---
   O fundo e a referencia da marca traduzida: digito escorrendo, do qual o olho
   emerge. A chuva mora num canvas atras de tudo e nao recebe clique. O veu por
   cima existe porque sem ele o nome do item disputa com o fundo, e quem tem que
   ganhar essa disputa e sempre o texto. */
.sidebar { background: #080b11; position: relative; overflow: hidden;
  border-right: 1px solid rgba(120, 170, 230, .09); }
#chuva-dado { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; }
/* O veu antigo ia de 60% a 96% de opacidade e apagava a rede quase por completo:
   o Fabrisio olhou a barra e disse que nao tinha mudado nada. Agora ele e leve e
   uniforme, so o suficiente para o texto do menu ganhar do fundo.
   Quem protege a leitura de verdade e a sombra atras do proprio texto, logo
   abaixo, que escurece so o que esta atras da palavra em vez de apagar a tela. */
.sidebar::after { content: ''; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; background: rgba(8, 11, 17, .20); }
.sidebar > * { position: relative; z-index: 2; }
/* halo escuro colado no texto: mantem o contraste sem esconder a rede */
.sidebar .nav-item, .sidebar .nav-sec, .sidebar .brand, .sidebar .foot {
  text-shadow: 0 0 8px rgba(5, 8, 15, .95), 0 0 3px rgba(5, 8, 15, .95); }
.sidebar .nav-item .ico svg { filter: drop-shadow(0 0 5px rgba(5, 8, 15, .95)); }

/* a marca perde a caixa vermelha: o olho azul E a marca agora */
.sidebar .brand { gap: 11px; padding: 6px 10px 20px; }
.sidebar .brand .logo { width: 38px; height: 38px; border-radius: 0;
  background: none; box-shadow: none; }
/* nome e contexto empilhados: a marca ganha assinatura sem ocupar outra linha do menu */
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand-txt span { font-size: 9.5px; letter-spacing: 2.2px; text-transform: uppercase;
  color: #6b7f99; font-weight: 500; margin-top: 3px; }
.nav-sec { font-size: 9.5px; letter-spacing: 2px; color: #566a85; }
.nav-item { border-radius: 10px; transition: .14s; }
.nav-item:hover { background: rgba(150, 200, 255, .08); transform: translateX(2px); }
/* barra de acento no item ativo: diz onde voce esta sem depender so do preenchimento */
.nav-item.active { background: linear-gradient(90deg, rgba(179,38,30,.95), rgba(179,38,30,.72));
  box-shadow: 0 3px 12px rgba(179, 38, 30, .32); position: relative; }
.nav-item.active::before { content: ''; position: absolute; left: -12px; top: 50%;
  transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: #fff; }

/* --- topo da pagina: titulo com presenca --- */
.page-head h2 { font-size: 25px; letter-spacing: -.4px; font-weight: 700; }
.topbar { border-bottom: 1px solid var(--line); }

/* --- tiles: o numero e o protagonista --- */
.tiles { gap: 12px; }
.tile { padding: 16px 18px 17px; border-radius: 14px; position: relative; overflow: hidden;
  transition: .16s; }
/* faixa superior colorida: separa os tiles a distancia, sem precisar ler o rotulo */
.tile::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--seq); opacity: .85; }
.tile.good::after { background: var(--ok); }
.tile.alert::after { background: var(--bad); }
.tile .label { font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; }
.tile .value { font-size: 34px; font-weight: 800; letter-spacing: -1.2px; margin-top: 6px; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 24, 40, .12); }

/* --- cards: cabecalho com peso --- */
.card { border-radius: 14px; }
.card-head { font-size: 13.5px; font-weight: 700; letter-spacing: .2px; }
/* acao primaria com volume, para o "+ Novo cliente" nao competir de igual com os outros */
.btn.primary { box-shadow: 0 4px 14px rgba(179, 38, 30, .28); font-weight: 600; }
.btn.primary:hover { box-shadow: 0 6px 18px rgba(179, 38, 30, .38); }

/* ============================================================================
   HÓRUS — tema Íris
   ============================================================================
   O conceito nao e "modo escuro por moda". O olho enxerga porque a iris recebe
   luz enquanto a periferia recua: e o contraste entre os dois que cria foco.
   A interface anterior era o oposto disso, com tudo branco e igualmente
   iluminado, entao nada tinha prioridade e o GN varria a tela inteira para
   achar um numero.
   Aqui o ambiente escurece e a LUZ VAI PARA O DADO. Card, numero e acao
   primaria brilham; moldura, fundo e rotulo somem para o fundo.
   Vale como camada: troca as variaveis e umas poucas superficies, sem tocar em
   nenhuma tela. Desligar e trocar uma classe no body.
   ============================================================================ */
body.iris {
  --surface: #070a10;          /* periferia: quase preto, levemente azulado */
  --card: #111823;             /* superficie que carrega dado */
  --ink: #eef3fa;              /* texto que precisa ser lido de longe */
  --ink-2: #a9bad0;
  --ink-3: #6d829c;            /* rotulo: presente, nunca protagonista */
  --line: #1e2a3a;
  --nav-bg: #05080d;
  --nav-ink: #90a5bf;
  --seq: #4aa8ff;              /* ciano da iris: o azul que o olho do video tem */
  --seq-soft: #10243a;
  --ok: #2fd08a;   --ok-soft: #0c2a1e;
  --warn: #f0b429; --warn-soft: #2c2110;
  --bad: #ff5f52;  --bad-soft: #2e1210;
  --info-soft: #10243a;
  --shadow: 0 2px 10px rgba(0, 0, 0, .5);
  background:
    radial-gradient(1100px 620px at 68% -8%, rgba(74, 168, 255, .10), transparent 60%),
    radial-gradient(760px 460px at 8% 108%, rgba(179, 38, 30, .10), transparent 62%),
    var(--surface);
  background-attachment: fixed;
}

/* --- superficies: borda luminosa em vez de sombra --- */
/* Sombra some no escuro, entao a separacao vem de uma linha clara no topo, como
   luz batendo na quina da superficie. */
body.iris .card, body.iris .tile {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 60%), var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.35);
}
body.iris .card-head { border-bottom-color: var(--line); color: #cfe0f5; }

/* --- o numero recebe a luz --- */
body.iris .tile .value { color: #fff; text-shadow: 0 0 26px rgba(74, 168, 255, .35); }
body.iris .tile.good .value { color: var(--ok); text-shadow: 0 0 26px rgba(47, 208, 138, .3); }
body.iris .tile.alert .value { color: var(--bad); text-shadow: 0 0 26px rgba(255, 95, 82, .32); }
body.iris .tile::after { opacity: 1; box-shadow: 0 0 14px currentColor; }

/* --- navegacao: a periferia --- */
body.iris .sidebar { background: linear-gradient(180deg, #05080d, #03050a);
  border-right: 1px solid rgba(74, 168, 255, .10); }
body.iris .nav-item.active { background: linear-gradient(90deg, rgba(179,38,30,.9), rgba(179,38,30,.55));
  box-shadow: 0 0 22px rgba(179, 38, 30, .35); }
body.iris .nav-item:hover { background: rgba(74, 168, 255, .10); color: #fff; }
body.iris .topbar { background: rgba(7, 10, 16, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); }

/* --- entradas e botoes --- */
body.iris .field input, body.iris .field select, body.iris .field textarea,
body.iris .search input {
  background: rgba(255, 255, 255, .05); border-color: var(--line); color: var(--ink); }
body.iris .field input::placeholder, body.iris .search input::placeholder { color: #56698260; }
body.iris .btn { background: rgba(255, 255, 255, .06); border-color: var(--line); color: var(--ink); }
body.iris .btn:hover { border-color: var(--seq); background: rgba(74, 168, 255, .12); }
body.iris .btn.primary { background: linear-gradient(180deg, #c8362d, var(--brand));
  border-color: transparent; color: #fff; box-shadow: 0 4px 18px rgba(179, 38, 30, .45); }
body.iris .btn.small { background: rgba(255,255,255,.05); }

/* --- tabela: linha do dado, nao grade de planilha --- */
body.iris table.data th { background: rgba(255, 255, 255, .03); color: #93a9c4;
  border-bottom-color: var(--line); }
body.iris table.data td { border-bottom-color: rgba(30, 42, 58, .7); }
body.iris table.data tbody tr:hover { background: rgba(74, 168, 255, .07); }
body.iris .badge { background: rgba(255,255,255,.07); color: var(--ink-2); }
body.iris .modal { background: #111823; color: var(--ink); border: 1px solid var(--line); }
body.iris .modal-back { background: rgba(3, 5, 10, .72); backdrop-filter: blur(6px); }
body.iris .empty, body.iris .muted { color: var(--ink-3); }
body.iris .mobile-nav { background: rgba(5, 8, 13, .95); border-top: 1px solid var(--line); }

/* Contagem ao lado do rotulo do filtro rapido. Discreta: o rotulo continua sendo o
   que se le, o numero e conferencia. */
.chip-n { opacity: .62; font-variant-numeric: tabular-nums; font-weight: 400; }
/* Filtro que devolve quase toda a base. Clicar nele deixa a tela quase igual, e sem
   este aviso o usuario conclui que o filtro esta quebrado. */
.chip-n-larga { opacity: .95; color: var(--warn); }
.chip-n-zero { opacity: .95; color: var(--ink-3); text-decoration: line-through; }

/* ---------- barra de filtros em gaveta ---------- */
/* Os 40 chips soltos poluiam a carteira. Agora vivem atras de um botao, e o que esta
   ligado aparece como etiqueta na barra, para nunca se filtrar sem saber. */
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  background: var(--surface); border: 1px solid var(--seq); color: var(--ink);
  padding: 5px 8px 5px 11px; border-radius: 20px; }
.etiqueta .x { border: 0; background: none; color: var(--ink-3); font-size: 16px;
  line-height: 1; padding: 0 2px; cursor: pointer; }
.etiqueta .x:hover { color: var(--bad); }
.gaveta { margin-bottom: 12px; }

/* O atributo hidden do HTML e display:none, mas qualquer regra com display perde a
   disputa de especificidade e o elemento reaparece. Aconteceu com o campo de DDD, que
   e .filters .field { display:flex } e ficava visivel mesmo escondido. */
[hidden] { display: none !important; }

/* Itens da venda: uma linha por produto, com quantidade e valor proprios. Alvo grande
   porque o GN fecha venda no celular, em pe, na porta do cliente. A linha desmarcada
   fica apagada mas VISIVEL, para ele enxergar o que deixou de fora sem precisar rolar. */
.itens-venda { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.iv-head, .iv-nat-head, .iv-linha { display: grid;
  grid-template-columns: minmax(150px, 1.7fr) .8fr 1.2fr; gap: 8px;
  align-items: center; padding: 8px 10px; }
.iv-head, .iv-nat-head { background: var(--surface); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
.iv-head span:not(:first-child), .iv-nat-head span:not(:first-child) { text-align: right; }
.iv-linha { border-top: 1px solid var(--line); opacity: .5; transition: opacity .12s; }
.iv-linha.on { opacity: 1; background: var(--ok-soft); }
.iv-prod { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 14px; }
.iv-prod input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ok); }

/* Um bloco por produto, com as tres naturezas dentro. Renovacao e incremento sao
   negocios diferentes e precisam de linha propria; o bloco fica fechado ate o produto
   ser marcado, senao a tela abriria com doze campos vazios. */
.iv-prod-bloco { border-top: 1px solid var(--line); }
.iv-prod-bloco:first-child { border-top: none; }
.iv-prod-bloco > .iv-prod { padding: 10px 12px; }
.iv-naturezas { display: none; background: var(--surface); }
.iv-prod-bloco.on > .iv-prod { font-weight: 600; }
.iv-prod-bloco.on .iv-naturezas { display: block; }
.iv-nat { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  font-size: 13.5px; padding-left: 16px; }
.iv-nat input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--ok); }
.iv-nat small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.iv-linha input[type=number] { width: 100%; text-align: right; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--card);
  font-variant-numeric: tabular-nums; }

/* Fora da telefonia movel nao ha natureza: o que se pergunta e o NOME DO PRODUTO.
   Link de internet, licenca e servico avancado nao se portam nem se habilitam, e a
   linha vira uma so, com o campo de texto no lugar das tres opcoes. */
.iv-head-produto span:first-child { padding-left: 40px; }
.iv-linha-produto .iv-nat { flex: 1; min-width: 0; }
.iv-linha-produto input[type=text] { flex: 1; min-width: 0; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--card); font-size: 13.5px; }
.iv-linha-produto input[type=text]:focus { outline: 2px solid var(--ok); outline-offset: -1px; }
@media (max-width: 620px) {
  .iv-head { display: none; }
  .iv-linha { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .iv-prod { grid-column: 1 / -1; }
}

/* Numero em tabela alinha a direita, senao a coluna nao se le de cima a baixo. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.linha-total td { border-top: 2px solid var(--line); background: var(--surface); }

/* Resumo do que esta em jogo, no proprio card do funil. */
.funil-itens { font-size: 11.5px; color: var(--ink-2); margin-top: 6px;
  padding: 4px 7px; background: var(--surface); border-radius: 6px; }
.funil-itens.vazio { color: var(--ink-3); font-style: italic; }

/* Fechar venda e um BOTAO no card, nao um arrasto: o quadro nunca desenhou coluna de
   Ganho, entao arrastar jamais chegava la. Ver o comentario em routes['funil']. */
/* Tres botoes lado a lado num card de 130px quebravam "Fechar venda" em duas linhas.
   A acao principal fica sozinha em cima, em largura cheia, e as outras duas dividem
   a linha de baixo: alem de caber, deixa claro qual e o caminho esperado. */
.funil-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.funil-acoes .btn { font-size: 12px; padding: 5px 6px; white-space: nowrap; }
.funil-acoes .btn.ok { grid-column: 1 / -1; }
/* O seletor de etapa ocupa a linha inteira e vem antes dos botoes: e a acao mais
   frequente do card, e a unica que funciona no toque do GN em campo. */
.funil-acoes .funil-mover { grid-column: 1 / -1; width: 100%; font-size: 12px;
  padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--ink); cursor: pointer; }
.funil-acoes .funil-mover:hover { border-color: var(--seq); }
.btn.small.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); font-weight: 600; }
.iv-prod span { display: flex; flex-direction: column; line-height: 1.15; }
.iv-prod small { font-size: 11px; color: var(--ink-3); font-weight: 400; }

/* Registrar venda e o desfecho do atendimento: destaque proprio, verde, para nao se
   perder entre "Mensagem pronta" e "Iniciar cadencia". */
.btn.vender { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); font-weight: 600; }
.btn.vender:hover { background: var(--ok); color: #fff; }

/* Historico do cliente na tela de atendimento: quem pega um cliente que ja passou por
   outro vendedor precisa ver o que foi conversado sem trocar de tela. */
.hist-cli { margin-bottom: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); }
.hist-cli summary { cursor: pointer; font-size: 14px; }
.hist-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.hist-lista li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.hist-lista li.alem { display: none; }
.hist-lista .when { font-size: 11.5px; color: var(--ink-3); margin-bottom: 2px; }

/* ---------- NUMEROS DA REGIONAL, EM GRAFICO ----------
   Decisao registrada no cofre: material executivo e grafico e numero grande, nao texto.
   Nenhuma biblioteca: SVG e div, com as cores saindo das variaveis do tema. */
.regional .card-head { background: var(--info-soft); font-weight: 700; }
.graf-tit { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); font-weight: 600; margin-bottom: 10px; }

/* Funil: barra em div, nao SVG. O numero fica ESCRITO em cima da barra, porque grafico
   sem rotulo obriga a estimar pixel, e quem cobra meta precisa do valor exato. */
.graf-funil { display: flex; flex-direction: column; gap: 14px; }
.gf-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.gf-nome { font-size: 13px; font-weight: 600; }
.gf-val { font-size: 15px; font-weight: 700; }
.gf-track { height: 14px; background: var(--surface); border-radius: 3px; overflow: hidden; }
.gf-bar { height: 100%; border-radius: 3px; }

/* barra empilhada por produto */
.graf-leg { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.graf-leg .leg { display: inline-flex; align-items: center; gap: 6px; }
.graf-leg i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }


/* Coordenacao que abre em vendedores. A seta e o cursor dizem que a linha e clicavel;
   sem isso ninguem descobre que da para abrir. */
tr.abrivel { cursor: pointer; }
tr.abrivel:hover { background: var(--surface); }
tr.abrivel .seta { color: var(--ink-3); font-size: 11px; }
tr.filho td { background: var(--surface); font-size: 13px; }
tr.filho .filho-nome { padding-left: 26px; color: var(--ink-2); }

/* Aviso de substituicao: a regra de um proximo passo por cliente cancela o anterior, e
   sem dizer isso o vendedor conclui que o CRM perdeu a tarefa dele. */
.aviso-sub { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--ink);
  border-radius: var(--radius); padding: 10px 13px; margin-bottom: 14px; font-size: 13.5px; }

/* Quem nao registrou nada no dia fica apagado, mas presente: sumir da lista se leria
   como "nao existe", e zero e a conversa que o coordenador precisa ter. */
tr.parado td { opacity: .5; }

/* ---- Funcionalidades novas ---- */

/* Proximo passo no card do funil. O estado "sem" e o unico que grita: negocio com data
   marcada e informacao de apoio e fica discreto, negocio sem nada agendado precisa
   incomodar, porque e ele que some do radar. */
.funil-proxima { margin-top: 6px; font-size: 12px; color: var(--muted); }
.funil-proxima.sem { margin-top: 8px; }
.funil-proxima.sem .btn {
  width: 100%; background: #fff4e5; border-color: #f0b429; color: #8a5a00; font-weight: 600;
}
.funil-proxima.sem .btn:hover { background: #ffe9c7; }

/* Faixa do que mudou desde a ultima visita, no topo da ficha */
.mudancas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mudancas .chip-mud {
  background: #eef6ff; border: 1px solid #b9d8ff; color: #14509e;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.mudancas .chip-mud.alerta { background: #fff4e5; border-color: #f0b429; color: #8a5a00; }
.mudancas .chip-mud.bom { background: #eaf7ee; border-color: #9ad5ac; color: #1c6b34; }

/* Painel de chaves em Administracao */
.feats-lista { display: flex; flex-direction: column; gap: 2px; }
.feat-linha {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.feat-linha:last-child { border-bottom: none; }
.feat-linha .nome { font-size: 14px; }
.feat-linha .estado { font-size: 12px; font-weight: 600; }
.feat-linha .estado.on { color: #1c6b34; }
.feat-linha .estado.off { color: var(--muted); }

/* ---- Filtros em grupos ----
   Trinta e poucos botoes numa parede unica escondiam o principal: que eles COMBINAM.
   O titulo em cima de cada bloco e o que transforma "procurar um botao" em "montar um
   recorte". */
.fgrupo { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fgrupo:last-child { border-bottom: none; padding-bottom: 0; }
.fgrupo-tit {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.fgrupo-n {
  background: var(--primaria, #c00); color: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 11px; letter-spacing: 0; text-transform: none;
}

/* Faixa do recorte pronto, no topo da carteira: diz o que esta valendo e o que fazer
   com isso, sem precisar abrir a gaveta de novo. */
.recorte {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #eef6ff; border: 1px solid #b9d8ff; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px;
}
.recorte .n { font-size: 20px; font-weight: 700; color: #14509e; }
.recorte .txt { flex: 1 1 260px; font-size: 13px; color: #14509e; }

/* ---------- PAINEL DE NEGOCIOS DO DASHBOARD ----------
   Modelo pedido pelo Fabrisio, inspirado num painel de RD Station. Tudo aqui usa as
   variaveis do tema, entao continua funcionando no modo escuro e numa troca de marca. */
/* Uma faixa unica dividida em quatro, e nao quatro cartoes soltos: no painel de
   referencia os numeros vivem dentro do mesmo retangulo branco, o que os le como um
   conjunto ("como foi o periodo") em vez de quatro avisos independentes. */
.kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden;
}
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-card { padding: 16px 18px; text-align: center; border-right: 1px solid var(--line); }
.kpi-card:last-child { border-right: none; }
@media (max-width: 900px) {
  .kpi-card:nth-child(2n) { border-right: none; }
  .kpi-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.kpi-num { font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-rot { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.kpi-var { font-size: 11.5px; margin-top: 3px; color: var(--ink-3); }
.kpi-var.kpi-ok { color: var(--ok); }
.kpi-var.kpi-ruim { color: var(--bad); }

.graf { width: 100%; height: auto; display: block; }
.graf-grade { stroke: var(--line); stroke-width: 1; }
.graf-eixo { fill: var(--ink-3); font-size: 11px; }
.graf-linha { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.graf-ponto { fill: var(--card); stroke: var(--ink-2); stroke-width: 1.5; }
.graf-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.graf-leg i.linha { width: 14px; height: 0; border-top: 2px dashed var(--ink-2); border-radius: 0; }

/* Motivo de perda: barra horizontal empilhada, uma linha por mes. */
.barras-h { display: flex; flex-direction: column; gap: 10px; }
.bh-linha { display: flex; align-items: center; gap: 10px; }
.bh-rot { width: 54px; font-size: 12px; color: var(--ink-2); flex: none; }
.bh-track { flex: 1; display: flex; height: 18px; background: var(--surface); border-radius: 4px; overflow: hidden; }
.bh-parte { height: 100%; }
.bh-num { width: 32px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }

/* Barra de proporcao dentro de celula de tabela. */
.tbar { height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; margin-bottom: 4px; max-width: 160px; }
.tbar span { display: block; height: 100%; background: var(--seq); border-radius: 3px; }

.rosca-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rosca { width: 168px; height: 168px; flex: none; }
.rosca-leg { flex: 1 1 180px; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.rosca-leg > div { display: flex; align-items: center; gap: 7px; }
.rosca-leg i { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.rosca-leg .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- BARRA DE FILTROS DO PAINEL ----------
   Formato do painel de referencia: cada filtro num bloco proprio, rotulo em cima do
   campo. O bloco la e azul chapado; aqui usa o azul do tema, senao a tela passaria a ter
   duas identidades visuais brigando na mesma dobra. */
.filtro-barra { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin-bottom: 14px; }
.fb-bloco { background: var(--seq); border-radius: 10px; padding: 8px 12px 10px; }
.fb-bloco label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: #fff; opacity: .92; margin-bottom: 5px; }
.fb-linha { display: flex; gap: 6px; }
.fb-campo {
  font-family: inherit; font-size: 13px; color: var(--ink); background: var(--card);
  border: 1px solid transparent; border-radius: 7px; padding: 5px 8px; max-width: 165px;
}
.fb-campo:focus { outline: 2px solid #fff; outline-offset: 1px; }
.fb-modo { max-width: 104px; }
/* O icone nativo do calendario nasce escuro e some no tema Iris. */
body.iris .fb-campo::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.65); }
/* O recorte aplicado, escrito por extenso: percentual de variacao sem base declarada e
   adivinhacao, e o modelo nao tem onde dizer isso. */
.fb-resumo { display: flex; flex-direction: column; justify-content: center;
  font-size: 12.5px; color: var(--ink-2); padding: 4px 2px; }
.fb-resumo span { color: var(--ink-3); font-size: 11.5px; }
@media (max-width: 700px) {
  /* No celular cada filtro ocupa a largura toda. Os campos internos precisam poder
     encolher (min-width: 0) ou o bloco de Periodo, que tem dois seletores de data lado a
     lado, empurra a barra para fora da tela. */
  .filtro-barra { flex-direction: column; }
  .fb-bloco { width: 100%; }
  .fb-linha { flex-wrap: wrap; }
  .fb-campo, .fb-modo { flex: 1 1 120px; min-width: 0; max-width: none; }
}

/* Analitico que abre com dois cliques no valor do ranking.
   cursor POINTER, e nao zoom-in: a lupa promete ampliar a propria tela, que e outra
   coisa. O gesto aqui e clicar num numero para abrir a lista por tras dele, e o cursor
   tem de dizer "isto responde ao clique".
   user-select: none tira o efeito de o duplo clique selecionar o texto do numero, que
   piscava azul e fazia parecer que o gesto tinha falhado.
   touch-action: manipulation desliga o zoom por duplo toque no celular, senao o mesmo
   gesto que abre o analitico ampliava a pagina junto. */
.abre-analitico {
  cursor: pointer; text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.abre-analitico:hover { color: var(--seq); }
/* Alvo maior onde o recorte esta num numero solto dentro da celula: sem isto a area
   valida e so a largura do texto, e em "8" isso e um alvo de nove pixels. */
td.abre-analitico, th.abre-analitico { padding-top: 12px; padding-bottom: 12px; }
/* .pb-b entra na lista de excecoes: ele JA e uma area grande de clique (a barra inteira),
   e o inline-block daqui desmontava o grid de duas colunas dele -- span e numero viravam
   blocos empilhados, o numero caia embaixo da barra e a linha seguinte o cortava.
   
   A regra existe para dar alvo clicavel a numero pequeno solto no texto; barra de grafico
   nao precisa dela e nao pode pagar o preco. */
.abre-analitico:not(.fk):not(td):not(th):not(tr):not(.pb-b) {
  display: inline-block; padding: 3px 6px; margin: -3px -6px; border-radius: 6px;
}
/* O cartao inteiro responde, e o realce diz ate onde vai o alvo. */
.fk.abre-analitico:hover, td.abre-analitico:hover, tr.abre-analitico:hover > td {
  background: var(--seq-soft);
}
.an-topo { display: flex; gap: 26px; margin-bottom: 12px; flex-wrap: wrap; }
.an-topo .an-num { font-size: 22px; font-weight: 700; margin-right: 6px; font-variant-numeric: tabular-nums; }

/* ---------- FAIXA DE INDICADORES DO DASHBOARD ----------
   Uma tira so, no lugar de nove cartoes com numero de 34 px. O painel de referencia que
   o Fabrisio escolheu poe os indicadores em linha, discretos, e reserva a tela para
   grafico. O numero continua sendo o maior elemento da celula, so nao domina a pagina. */
.faixa-kpi {
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden; margin-bottom: 16px;
}
/* Coluna fixa por faixa de largura em vez de auto-fit: sao NOVE indicadores, e o
   auto-fit escolhia oito colunas, deixando um sozinho numa segunda linha vazia. Com
   cinco e tres a quebra fica 5+4 e 3+3+3, que e o que se ve como bloco e nao como sobra. */
@media (min-width: 700px)  { .faixa-kpi { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .faixa-kpi { grid-template-columns: repeat(5, 1fr); } }
.fk { padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fk b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.fk b.bom { color: var(--ok); }
.fk b.ruim { color: var(--bad); }
.fk span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-3); margin-top: 3px; }
.fk.clickable { cursor: pointer; }
.fk.clickable:hover { background: var(--surface); }

/* Etapas do volume gerado: era numero de 40 px, virou tabela com barra e percentual. */
/* A tabela de etapas rola dentro do proprio card quando a tela e estreita. Sem isto ela
   estourava o card-body em alguns pixels no celular e a ultima coluna ficava cortada. */
.etapas { width: 100%; border-collapse: collapse; font-size: 13.5px; display: block;
  overflow-x: auto; }
.etapas tbody, .etapas thead, .etapas tfoot { display: table; width: 100%; min-width: 260px; }
.etapas td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.etapas tfoot td { border-bottom: none; border-top: 2px solid var(--line); }
.etapas .et-rot { width: 30%; }
.etapas .et-n { text-align: right; width: 70px; font-weight: 600; }
.etapas .et-pct { text-align: right; width: 66px; color: var(--ink-2); }
.etapas .tbar { height: 10px; }
@media (max-width: 700px) { .etapas .et-barra { display: none; } }

/* Renovacao x incremento: o incremento abre em portabilidade e linha nova. */
.nat-tab thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); padding: 0 8px 6px; font-weight: 600; }
.nat-filho td:first-child { padding-left: 18px; color: var(--ink-2); font-size: 12.5px; }
.nat-ramo { color: var(--ink-3); margin-right: 2px; }

/* Selo de natureza dentro da celula: R = renovacao, I = incremento, ? = sem registro.
   Curto de proposito -- a coluna ja e estreita e o detalhe fica no title. */
.nat-selos { display: flex; gap: 4px; justify-content: flex-end; margin-top: 3px; flex-wrap: wrap; }
.nat-selo { font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  font-variant-numeric: tabular-nums; cursor: help; }
.nat-selo.renov { background: var(--seq-soft); color: var(--seq); }
.nat-selo.incr { background: var(--ok-soft); color: var(--ok); }
.nat-selo.sem { background: var(--surface); color: var(--ink-3); }
/* Tres cores porque sao tres metas diferentes: renovacao segura a base, aquisicao traz
   cliente que nao era nosso e incremento faz crescer quem ja era. Aquisicao usa o tom de
   destaque -- e o numero que a operacao persegue. */
.nat-selo.aquis { background: var(--warn-soft, #fdf0dc); color: var(--warn, #b8720b); }
/* Cabecalho do grupo dentro do editor de itens: "Cliente novo" x "Ja e Claro" */
.iv-nat-grupo { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); padding: 9px 10px 3px; }

/* Botao de atalho dentro do bloco de filtro (7 / 30 / 90 dias). */
.fb-preset { cursor: pointer; font-weight: 600; }
.fb-preset.on { background: var(--seq-soft); color: var(--seq); border-color: var(--seq); }
.fb-resumo a { color: var(--seq); }

/* Janela da base analitica: tabela larga que rola dentro do modal, sem empurrar a pagina. */
.an-tabela { max-height: 60vh; overflow: auto; }
.an-tabela table { font-size: 12.5px; }
.an-tabela th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.an-tabela td { white-space: nowrap; }
.an-tabela td.an-largo { white-space: normal; min-width: 190px; }
.an-topo { align-items: center; }

/* Campo que barrou o salvamento. A borda vermelha mais o pulso levam o olho ate ele:
   no celular o toast aparece longe do campo e a pessoa nao acha o que corrigir. */
.falta-campo { border-color: var(--bad) !important; background: #fff6f6 !important; }
.falta-campo:focus { outline: 2px solid var(--bad); outline-offset: 1px; }
@keyframes pulso-falta { 0% { box-shadow: 0 0 0 0 rgba(200,30,30,.35); } 100% { box-shadow: 0 0 0 7px rgba(200,30,30,0); } }
.falta-campo { animation: pulso-falta .5s ease-out 2; }

/* Fechado x em jogo, produto a produto.

   Barra horizontal porque os nomes sao longos ("Solucoes digitais") e na vertical
   viram texto de lado. A escala e comum a todos os produtos e aos tres lados: barra
   normalizada pelo proprio maximo faria 2 links parecerem tanto quanto 227 linhas. */
.graf-prod { display: flex; flex-direction: column; gap: 16px; }
.gp-prod { display: flex; flex-direction: column; gap: 5px; }
.gp-nome { font-weight: 600; font-size: 13.5px; }
.gp-nome small { font-weight: 400; color: var(--ink-3); margin-left: 6px; font-size: 11.5px; }
.gp-linha { display: grid; grid-template-columns: 128px 1fr 62px; gap: 10px; align-items: center; }
.gp-lado { font-size: 12px; color: var(--ink-2); }
.gp-trilho { background: var(--surface); border-radius: 5px; height: 17px; overflow: hidden; }
.gp-barra { display: flex; height: 100%; border-radius: 5px; overflow: hidden; min-width: 2px;
  transition: width .2s; }
.gp-barra i { display: block; height: 100%; }
.gp-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.gp-aviso { font-size: 11.5px; color: var(--ink-3); padding-left: 138px; line-height: 1.4; }
@media (max-width: 620px) {
  .gp-linha { grid-template-columns: 96px 1fr 48px; gap: 7px; }
  .gp-lado { font-size: 11px; }
  .gp-aviso { padding-left: 0; }
}

/* Legenda com hachura, para o "em negociação" do gráfico por vendedor. A hachura
   diz "ainda não é seu" sem gastar uma cor nova: as cores ja estao ocupadas pelos
   produtos, e repetir uma delas com outro significado confundiria os dois eixos. */
.graf-leg i.hachura { background: repeating-linear-gradient(45deg,
  var(--ink-2) 0 3px, transparent 3px 6px); border: 1px solid var(--ink-2); }

/* Rosca de fechamento por produto e natureza.

   Dois cards lado a lado no desktop, empilhados no celular. O buraco do meio guarda
   o total: numa pizza cheia ele viraria mais um numero solto ao lado do desenho. */
.rosca-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.rosca-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rosca-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rosca { width: 180px; height: 180px; flex: none; }
.rosca-total { font-size: 30px; font-weight: 700; fill: var(--ink); }
.rosca-sub { font-size: 11px; fill: var(--ink-3); }
.rosca-leg { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 2px; }
.rl-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3);
  font-weight: 600; margin: 8px 0 3px; display: flex; align-items: baseline; gap: 8px; }
.rl-grupo:first-child { margin-top: 0; }
.rl-incr { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ok); font-size: 11.5px; }
.rl-item { display: grid; grid-template-columns: 11px 1fr auto 34px; gap: 8px; align-items: center;
  font-size: 13px; padding: 1px 0; }
.rl-item i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.rl-rot { color: var(--ink-2); }
.rl-item b { font-variant-numeric: tabular-nums; }
.rl-pct { text-align: right; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rosca-vazia { color: var(--ink-3); padding: 26px 0; text-align: center; font-size: 13.5px; }
@media (max-width: 900px) { .rosca-par { grid-template-columns: 1fr; } }

/* ============================ PAINEL ============================
   Tela de gestao desenhada para quem nao gosta de computador, e para ser lida de longe
   num projetor. Numero grande, rotulo curto embaixo, e uma frase explicando o que ele
   significa -- porque numero sozinho obriga quem le a adivinhar a definicao. */

.pn-filtro { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px; }
.pn-f-bloco { display: flex; flex-direction: column; gap: 8px; }
.pn-f-bloco > label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); }
.pn-botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Botao de periodo grande de proposito: alvo de clique confortavel para quem tem menos
   firmeza no mouse, e legivel sem esforco. */
.pn-bt { border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .12s; }
.pn-bt:hover { border-color: var(--brand); color: var(--brand); }
.pn-bt.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pn-sel { border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 8px; padding: 9px 12px; font-size: 14px; min-width: 190px; }
.pn-datas { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.pn-datas input { border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 8px; padding: 7px 10px; font-size: 14px; }
.pn-contexto { font-size: 14px; color: var(--ink-2); margin: 0 0 16px; }
.pn-contexto .muted { font-size: 12.5px; }

/* Os cartoes: seis numeros e nada mais. */
/* Tres colunas por linha, e nao "quantas couberem": com auto-fit os seis cartoes caiam
   como 5 + 1, e o ultimo ficava sozinho parecendo sobra. Duas linhas de tres se leem como
   bloco e cabem no projetor. */
/* Quatro colunas: com oito cartoes dao duas linhas cheias. Em tres davam 3+3+2 e a
   ultima linha ficava pela metade, o que o olho le como "faltou alguma coisa". */
/* CADA BLOCO OCUPA A LARGURA DO QUE ELE TEM, e os tres ficam lado a lado.
   Passei por duas versoes erradas antes desta, e as duas erravam pelo mesmo motivo:
   tratar os oito cartoes como uma grade unica quando eles sao 2 + 3 + 3.
     - quatro colunas fixas deixava tres buracos, um em cada bloco incompleto
     - auto-fit tirava os buracos esticando dois cartoes para meia tela cada
   O certo e o bloco de dois valer dois e o de tres valer tres: cada um cresce na
   proporcao do que carrega, e os oito cartoes cabem numa linha so sem sobra nenhuma.
   Quando a tela estreita, um bloco inteiro desce -- e desce COMPLETO, porque a grade
   interna dele tem exatamente o numero de colunas dos seus cartoes. Buraco deixa de ser
   possivel por construcao, e nao por acerto de largura. */
.pn-grupos { display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 4px 22px; margin-bottom: 18px; }
/* O grupo e uma coluna que estica: assim o grid de cartoes ocupa toda a altura
   disponivel e TODO cartao da linha fica da mesma altura, mesmo quando a dica de um
   deles ocupa tres linhas e a do vizinho ocupa uma. Sem isto, cada bloco tem a altura do
   proprio texto e a base dos cartoes fica em degraus. */
.pn-grupo { flex: var(--n, 3) 1 calc(var(--n, 3) * 190px); min-width: 0;
  display: flex; flex-direction: column; }
.pn-cartoes { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr);
  gap: 12px; margin-bottom: 14px; flex: 1; }
/* a dica fica colada no rodape do cartao, e nao flutuando no meio do espaco esticado */
.pn-card { display: flex; flex-direction: column; }
.pn-dica { margin-top: auto; padding-top: 4px; }
/* No celular a proporcao nao ajuda: dois cartoes lado a lado ja e o limite do que se le
   sem apertar os olhos, e o bloco inteiro passa a ocupar a largura da tela. */
@media (max-width: 760px) {
  .pn-grupo { flex: 1 1 100%; }
  .pn-cartoes { grid-template-columns: repeat(2, 1fr); }
}

/* O rotulo do bloco. Pequeno e em caixa alta de proposito: ele orienta, nao compete
   com os numeros -- num painel o que tem de saltar aos olhos e o numero. */
.pn-secao { font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin: 4px 0 9px;
  display: flex; align-items: center; gap: 10px; }
/* o fio que segue o rotulo ate a margem separa os blocos sem custar altura */
.pn-secao::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pn-card {
  /* Eram DUAS variaveis erradas, e por isso o cartao nunca foi um cartao.
     --surface (#f4f5f7) e a cor do FUNDO da pagina: cartao pintado com ela desaparece
     dentro do proprio fundo. E --linha nao existe -- a variavel do projeto se chama
     --line -- entao a borda tambem nunca foi desenhada. O que aparecia na tela era um
     numero solto no cinza, e foi assim desde que a tela nasceu.
     Agora e branco sobre o cinza, com borda e um respiro de sombra. */
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 16px 14px;
  box-shadow: 0 1px 2px rgba(18, 24, 31, .04);
  transition: box-shadow .12s, border-color .12s;
}
/* Dois cliques em qualquer numero abrem a base analitica dele, e o cartao precisa
   parecer clicavel antes de alguem descobrir isso por acaso. */
.pn-card[data-analitico] { cursor: pointer; }
.pn-card[data-analitico]:hover { border-color: var(--ink-3);
  box-shadow: 0 2px 8px rgba(18, 24, 31, .09); }
.pn-card.destaque { border-color: var(--ok); background: var(--ok-soft); }
.pn-num { font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
/* Dinheiro tem "R$" e separador, entao ocupa o dobro de um numero puro. Sem reduzir, o
   ticket medio quebrava a linha entre o cifrao e o valor. */
.pn-num.dinheiro { font-size: 27px; }
.pn-card.destaque .pn-num { color: var(--ok); }
.pn-rot { font-size: 13.5px; font-weight: 700; margin-top: 6px; color: var(--ink-2); }
.pn-dica { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }

.pn-bloco { margin-bottom: 16px; }
.pn-sub { font-size: 13px; color: var(--ink-3); margin: 0 0 12px; }
.pn-legenda { font-weight: 400; font-size: 12px; color: var(--ink-3); margin-left: auto; }
.pn-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin: 0 4px 0 10px; vertical-align: -1px; }
.pn-legenda i.ok { background: var(--ok); } .pn-legenda i.seq { background: var(--seq); }

/* Barra horizontal: comparar comprimento a partir de uma linha-base e o que o olho faz
   melhor. Rosca obrigaria a estimar angulo, que e justamente o que da errado com quem
   olha rapido. */
/* TRES COLUNAS FIXAS: rotulo | barra | numero.
   
   A primeira versao punha barra e numero num flex, e o numero nao tinha protecao contra
   encolher: quando a barra chegava perto de 100% da largura, o <b> era espremido a zero,
   quebrava para a linha de baixo e a altura fixa de 22px cortava ele pela metade. Na
   tela do Fabrisio davam para ver "179", "60", "100" pendurados embaixo das barras,
   cortados.
   
   Com o numero em COLUNA PROPRIA ele nao disputa espaco com a barra -- e ganha de
   brinde o alinhamento vertical: os valores ficam um embaixo do outro e se comparam
   sem o olho precisar viajar. */
.pb-linha { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center;
  padding: 6px 0; }
.pb-rot { font-size: 13.5px; font-weight: 600; text-align: right; color: var(--ink-2);
  line-height: 1.25; }
.pb-barras { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pb-b { display: grid; grid-template-columns: 1fr 96px; gap: 10px; align-items: center;
  min-height: 20px; }
.pb-b > span { display: block; height: 16px; border-radius: 4px; min-width: 3px;
  transition: width .25s; }
/* flex-shrink nao se aplica em grid, e a coluna de 96px e fixa: o numero nunca encolhe
   nem quebra, por construcao e nao por sorte de largura. */
.pb-b > b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: left; }
.pb-b.abre-analitico { cursor: pointer; border-radius: 4px; }
.pb-b.abre-analitico:hover { background: var(--surface); }
/* Valor em dinheiro e mais largo que contagem: "R$ 1.348,80" nao cabe em 96px. */
.pb-b.dinheiro { grid-template-columns: 1fr 128px; }
/* A palavra ao lado do numero ("fechadas", "em negociação") em peso normal: quem manda
   na leitura e o numero, e a palavra so tira a duvida de qual barra e qual. */
.pb-un { font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.pb-b:has(.pb-un) { grid-template-columns: 1fr 132px; }

.pn-nat { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pn-nat-tit { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px; }
.pn-tab td, .pn-tab th { font-size: 13.5px; }
.pn-tab th small { display: block; font-weight: 400; font-size: 10.5px; opacity: .7; }

/* NUMERO CENTRALIZADO NESTA TABELA, e nao a direita como no resto do sistema.
   A regra geral do projeto alinha numero a direita, que e o certo quando as colunas sao
   estreitas: as casas ficam uma sobre a outra e da para comparar a olho. Aqui as colunas
   sao largas para caber "EMPRESAS TRABALHADAS" e "EM NEGOCIACAO" no cabecalho, e um
   numero de um digito encostado na borda direita fica a meia tela do titulo dele --
   o olho perde a coluna no meio do caminho.
   O cabecalho vai junto: centralizar so o numero apenas trocaria de lugar o
   desalinhamento. */
.pn-tab td.num, .pn-tab th.num { text-align: center; }
/* a seta de ordenacao acompanha o titulo centralizado, em vez de flutuar na borda */
.pn-tab th.num.pn-ord.asc::after, .pn-tab th.num.pn-ord.desc::after {
  position: absolute; left: 50%; transform: translateX(-50%); margin: 2px 0 0; }
.pn-tab th.num.pn-ord { padding-bottom: 16px; }
.pn-linha-coord { cursor: pointer; }
.pn-linha-coord:hover { background: var(--surface); }

@media (max-width: 720px) {
  .pb-linha { grid-template-columns: 1fr; gap: 3px; }
  .pb-rot { text-align: left; }
  .pb-b { grid-template-columns: 1fr 84px; }
  .pb-b.dinheiro { grid-template-columns: 1fr 110px; }
  .pn-num { font-size: 30px; }
  .pn-sel { min-width: 0; width: 100%; }
}
/* A conta na cara: "100 + 8 + 30 + 92 = 230". Quem olha confere sozinho, e a tela deixa
   de precisar de confianca. Foi o que faltava quando a quebra mostrava 138 embaixo de um
   total de 230. */
.pn-nat-soma { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.pn-nat-soma b { color: var(--ink); font-size: 14px; }
.pn-nat-soma .ruim { color: var(--bad); font-weight: 600; }
/* O cartao que cobra acao tem borda propria: os outros descrevem, este acusa. */
.pn-card.alerta { border-color: var(--bad); box-shadow: inset 3px 0 0 var(--bad); }
.pn-card.alerta .pn-num { color: var(--bad); }
.pn-link-quadro { font-weight: 600; }

/* ---- previsao: a conta na cara, parte por parte ---- */
.fc-linha { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fc-parte { flex: 1; min-width: 170px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); }
.fc-parte.destaque { border-color: var(--ok); background: var(--ok-soft, var(--surface)); }
.fc-num { font-size: 25px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.fc-parte.destaque .fc-num { color: var(--ok); }
.fc-rot { font-size: 13px; font-weight: 700; margin-top: 3px; }
.fc-dica { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; }
.fc-mais { font-size: 22px; font-weight: 700; color: var(--ink-3); }
@media (max-width: 760px) { .fc-mais { display: none; } }
/* A linha de natureza recuada sob o produto: quem le percebe que e detalhe do de cima
   sem precisar de titulo separado. */
.fc-tab th small { display: block; font-weight: 400; font-size: 10.5px; opacity: .7; }
.fc-tab .fc-prod td { border-top: 1px solid var(--line); }
.fc-tab .fc-nat td { font-size: 12.5px; color: var(--ink-2); border-top: none; padding-top: 3px; padding-bottom: 3px; }
.fc-tab .fc-nat td:first-child { padding-left: 18px; }

/* Dez usos de var(--linha) viraram var(--line) em 10/09/2026. A variavel --linha nunca
   existiu neste arquivo: onde ela aparecia, a borda simplesmente nao era desenhada, em
   silencio -- CSS com nome errado nao da erro, so nao pinta. Pegos ao descobrir que o
   cartao do Painel nunca teve caixa. */

/* ---- ordenar a tabela do painel ---- */
/* A seta so aparece na coluna ORDENADA. Seta em todas as colunas vira ruido: o olho
   procura a diferenca, e se todas tem a mesma marca nao ha diferenca para achar. */
.pn-ord { cursor: pointer; user-select: none; position: relative; }
.pn-ord:hover { color: var(--ink); }
.pn-ord.asc::after, .pn-ord.desc::after {
  content: ''; display: inline-block; margin-left: 5px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  vertical-align: middle;
}
.pn-ord.desc::after { border-top: 5px solid var(--brand); }
.pn-ord.asc::after { border-bottom: 5px solid var(--brand); }

/* ---- ficha de atendimento: seis cards num so ---- */
/*
   O objetivo aqui e caber na tela sem rolagem, e o que ocupava espaco nao era o campo:
   era a moldura. Seis cards davam seis bordas, seis cabecalhos de 40 px e seis respiros
   internos -- mais moldura do que conteudo. Cada numero abaixo foi reduzido ate o ponto
   em que o campo ainda e clicavel com o dedo e o rotulo ainda passa em contraste AA.
*/
.ficha-compacta .card-body { padding: 12px 14px 6px; }

/* DUAS FAIXAS, AGRUPADAS POR SENTIDO.
   Passei por dois layouts errados antes deste, e cada um errou de um jeito:
     grade de tres colunas  cada linha ficava com a altura do bloco mais alto, e o menor
                            deixava um buraco do tamanho da diferenca
     colunas fluidas        acabaram com o buraco e misturaram os blocos: "Telefonia
                            movel" e "Internet fixa" empilhados na mesma coluna liam como
                            se fossem uma coisa so
   O que faltava nos dois era AGRUPAR. Cadastro em cima, produtos embaixo -- duas
   perguntas diferentes, duas faixas. */

/* Quem e o cliente: dados da empresa e decisor lado a lado. A empresa tem oito campos e
   o decisor seis, entao 1,2fr contra 1fr deixa as duas com o mesmo numero de linhas. */
.fc-faixa { display: grid; gap: 12px 22px; align-items: start; }
.fc-cadastro { grid-template-columns: 1.2fr 1fr; }

/* O que ele tem hoje: os quatro produtos em colunas IGUAIS.
   Os quatro perguntam quase o mesmo -- operadora, valor mensal, vencimento -- e lado a
   lado com a mesma largura eles ficam comparaveis campo a campo, que e como o vendedor
   olha para decidir o que ofertar. */
.fc-produtos { grid-template-columns: repeat(4, 1fr); margin-bottom: 2px; }

/* O CADASTRO TAMBEM PRECISA CABER, e ele estava gastando altura a toa.
   A grade base pede 180 px por coluna e reserva a linha inteira para campo "wide". Numa
   faixa de 800 px isso dava tres colunas com um campo largo cortando cada linha ao meio:
   "Porte" ficava sozinho, "Endereco" tomava a linha toda e a secao ganhava duas linhas
   que nao precisava.
   Aqui a coluna cai para 150 px e SO a razao social continua larga -- ela e a unica que
   de fato nao cabe em meia coluna. Endereco e e-mail passam a dividir a linha com o
   vizinho, e a faixa perde duas linhas inteiras. */
.fc-cadastro .form-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fc-cadastro .field.wide { grid-column: span 2; }
.fc-cadastro .field.wide:first-child { grid-column: 1 / -1; }
/* coluna estreita: um campo por linha, senao o rotulo quebra em duas */
.fc-produtos .form-grid { grid-template-columns: 1fr; }
.fc-produtos .field.wide { grid-column: auto; }

/* O rotulo da faixa separa as duas sem custar uma borda inteira. */
.fc-faixa-rot { font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin: 14px 0 9px;
  display: flex; align-items: center; gap: 10px; }
.fc-faixa-rot::after { content: ''; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 1250px) {
  .fc-produtos { grid-template-columns: repeat(2, 1fr); }
  .fc-produtos .form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .fc-cadastro, .fc-produtos { grid-template-columns: 1fr; }
  .fc-produtos .form-grid { grid-template-columns: 1fr 1fr; }
}

/* A secao nao tem borda propria: o que a separa da vizinha e o titulo e o espaco. Borda
   dentro de card ja com borda desenha caixa dentro de caixa, que e o que se quis tirar. */
.fc-sec { min-width: 0; }
.fc-sec > h4 { margin: 0 0 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.fc-sec > h4 .badge { text-transform: none; letter-spacing: 0; font-weight: 700; }

/* Campos menores: o rotulo cai de 13 para 11,5 px e o espaco entre linhas de 14 para 9.
   A altura do input fica em 34 px, que continua confortavel para toque. */
.ficha-compacta .form-grid { gap: 7px 10px; }
.ficha-compacta .field > label { font-size: 11px; margin-bottom: 2px; }
.ficha-compacta .field input,
.ficha-compacta .field select { padding: 5px 8px; font-size: 13px; height: 30px; }
.ficha-compacta .field textarea { padding: 6px 8px; font-size: 13px; }
.ficha-compacta .muted { font-size: 10.5px; margin-top: 4px; line-height: 1.3; }

/* AS SETE CAIXAS DE "TIPOS QUE O CLIENTE JA USA" EM DUAS COLUNAS.
   Empilhadas, elas sozinhas ocupavam sete linhas -- mais altura que a secao inteira de
   Internet fixa. Sao rotulos de uma palavra: cabem duas por linha com folga, e a lista
   passa de sete linhas para quatro. */
.ficha-compacta .fc-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px;
  margin-top: 5px; }
.ficha-compacta .chk { font-size: 12px; margin-bottom: 0; gap: 5px; }
.ficha-compacta .fc-tipos-rot { font-size: 10.5px; color: var(--ink-3); margin: 6px 0 2px; }

/* ---- cartoes compactos do Painel ---- */
/*
   NENHUM TEXTO QUEBRA LINHA AQUI. "Nao deixe quebrar linhas" (11/09/2026).
   A versao anterior tinha dica de dez palavras embaixo do numero e ela virava duas
   linhas, empurrando a altura de um cartao e desalinhando a faixa inteira. Cartao que
   muda de altura conforme o texto nao e cartao, e paragrafo com numero em cima.

   A trava e dupla: os textos sao curtos por construcao no app.js, e aqui todo um deles e
   `nowrap` com reticencia. Assim um texto maior que alguem escreva depois corta, e nao
   quebra o alinhamento.

   repeat(4, 1fr) e nao auto-fit: sao exatamente quatro, como no modelo, e auto-fit
   deixaria cinco caberem no dia em que alguem acrescentasse um quinto sem perceber.
*/
.mini-faixa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 14px; }
@media (max-width: 1000px) { .mini-faixa { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mini-faixa { grid-template-columns: 1fr; } }

.mini { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; cursor: pointer; min-width: 0; transition: border-color .12s; }
.mini:hover { border-color: var(--brand); }
/* so o cartao que cobra acao ganha borda propria: se varios chamam, nenhum chama */
.mini.alerta { border-color: var(--bad); }

.mn-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mn-rot { font-size: 12px; font-weight: 700; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* circulo com o icone, como no modelo. 28px: acima disso compete com o numero */
.mn-ico { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; }
.mn-ico svg { width: 15px; height: 15px; }
.mn-ico.seq      { background: var(--seq-soft); color: var(--seq); }
.mn-ico.verde    { background: var(--ok-soft);  color: var(--ok); }
.mn-ico.vermelho { background: #fde8e8;         color: var(--bad); }
.mn-ico.ambar    { background: #fdf0dc;         color: #9a6400; }

.mn-num { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--ink); }

/* uma linha so, sempre: a faixa inteira depende desta altura ser constante */
.mn-pe { display: flex; align-items: baseline; gap: 7px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; }
/* verde e vermelho sao DIRECAO, nao juizo: quem le sabe que mais proposta e bom e mais
   negocio fora do prazo e ruim -- o cartao nao precisa opinar */
.mn-var { font-size: 12px; font-weight: 700; color: var(--ink-3); flex: 0 0 auto; }
.mn-var.sobe { color: var(--ok); }
.mn-var.desce { color: var(--bad); }
.mn-dica { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }

/* ---- os tres quadros de grafico ---- */
/*
   TRES COLUNAS IGUAIS e ALTURA IGUAL, como no modelo. A versao anterior dava o dobro da
   largura para um deles ("esta muito grande") e a altura de cada cartao saia do conteudo,
   entao os tres terminavam em linhas diferentes.

   align-items: stretch faz os tres esticarem ate a altura do mais alto, e a altura do
   desenho e fixa no .gr-svg -- as duas coisas juntas sao o que mantem a base dos tres
   graficos na mesma linha. So uma delas nao basta.
*/
.pn-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-bottom: 18px; align-items: stretch; }
@media (max-width: 1100px) { .pn-tres { grid-template-columns: 1fr; } }

.gr { display: flex; flex-direction: column; }
.gr .card-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 6px; }

/* Cabecalho numa linha so: titulo a esquerda, numero a direita. Os numeros dos tres
   quadros alinham na mesma coluna visual, e da para varrer os tres so olhando a direita. */
.gr-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 13px 16px 0; white-space: nowrap; }
.gr-tit { font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gr-num { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums; cursor: pointer; flex: 0 0 auto; }

/* A variacao acompanha o numero, menor e ao lado -- e nao embaixo, que criaria uma segunda
   linha e desalinharia os tres cabecalhos. */
.var { font-size: 11.5px; font-weight: 700; margin-left: 6px; color: var(--ink-3); }
.var.sobe { color: var(--ok); }
.var.desce { color: var(--bad); }

/* ALTURA FIXA do desenho: e daqui que sai o alinhamento dos tres. Height no CSS e
   preserveAspectRatio="none" no SVG deixam o desenho preencher a largura que a coluna
   tiver, sem mudar de altura junto. */
.gr-svg { display: block; width: 100%; height: 132px; }
.gr-grade { stroke: var(--line); stroke-width: 1; }

/* Os dois rodapes tem a MESMA altura minima. Sem isso o eixo de datas mede 14px e a
   legenda 19px, e a base dos dois desenhos termina em linhas diferentes -- cinco pixels
   que ninguem nomeia mas que fazem a fileira parecer torta. */
.gr-eixo, .gr-leg { min-height: 19px; align-items: center; }
.gr-eixo { display: flex; justify-content: space-between; font-size: 10.5px;
  color: var(--ink-3); padding: 0 2px 2px; }
.gr-leg { display: flex; gap: 12px; font-size: 11px; color: var(--ink-2); padding: 0 2px 2px; }
.gr-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; }

/* No quadro da rosca o desenho e menor: ele divide o espaco com a legenda ao lado. */
.gr .rosca-wrap { gap: 12px; }
.gr .rosca { width: 118px; height: 118px; flex: 0 0 auto; }

/* ---- rosca dos degraus ---- */
/* A legenda carrega os numeros porque rotulo escrito em cima de fatia fina vira borrao.
   E cada item dela e clicavel: a fatia responde "quanto", a lista responde "quais". */
/* Quatro colunas fixas: marcador, nome, total, e o "+N do periodo". O +N tem coluna
   propria em vez de virar segunda linha embaixo do nome -- com onze degraus a legenda
   dobrava de altura e empurrava a rosca para fora do cartao. */
.rosca-item { display: grid; grid-template-columns: 10px 1fr auto 30px; align-items: center;
  gap: 8px; padding: 4px 6px; border-radius: 7px; cursor: pointer; font-size: 12.5px;
  white-space: nowrap; }
.rosca-item em { font-style: normal; font-size: 10.5px; color: var(--ok); text-align: right; }
.rosca-item:hover { background: var(--surface); }
.rosca-item i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.rosca-nome { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosca-item b { font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---- o fechamento, embaixo da rosca dos degraus ---- */
/*
   Aqui morava o funil em linha ("o caminho da venda"). Ele saiu porque a rosca dos
   degraus, ao lado da serie, mostra os mesmos numeros -- e dois desenhos dos mesmos dados
   na mesma tela nao somam informacao, somam duvida sobre qual dos dois olhar.
   O que o funil tinha de proprio, o "+N no periodo", passou para a legenda da rosca.

   O fechamento fica FORA do circulo de proposito: 100% nao e onde a negociacao esta
   parada, e por onde ela sai. Dentro da rosca ele faria o total do meio responder outra
   pergunta -- e o numero grande la diz "abertas".
*/
.rosca-fecho { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 4px 10px; margin-top: 8px; padding: 9px 10px; border-radius: 8px;
  background: var(--ok-soft); cursor: pointer; font-size: 12.5px; font-weight: 700;
  color: var(--ok); }
.rosca-fecho b { font-variant-numeric: tabular-nums; font-size: 15px; }
.rosca-fecho em { grid-column: 1 / -1; font-style: normal; font-weight: 500;
  font-size: 11px; color: var(--ink-3); }
.rosca-obs { font-size: 10.5px; color: var(--ink-3); line-height: 1.4; margin: 10px 0 0;
  padding-top: 9px; border-top: 1px solid var(--line); }
.rosca-fecho { grid-template-columns: 1fr auto 30px; }