/* ==========================================================================
   Design system Movili — a forma
   --------------------------------------------------------------------------
   estilo.css e telas.css desenham as telas a partir de tokens, e os tokens já
   estão com as cores novas. Este arquivo, carregado por último, cuida do que
   não é só cor: a barra lateral que passa de escura a clara, botões e
   seletores em pílula, cartões de canto grande, cabeçalho de tabela em faixa.

   Referência: o pacote "movili-crm" (telas estáticas do design system) e o
   site em movili.net, que usa o mesmo sistema.

   Regra: nada aqui muda HTML nem comportamento. Se uma tela precisar de
   marcação nova para ficar igual à referência, a mudança vai na tela.
   ========================================================================== */

body {
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--corpo);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

strong, b, th { font-weight: 600; }
a { color: var(--tinta); text-underline-offset: 3px; }
::selection { background: var(--brand); color: var(--brand-tinta); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* As duas artes da logo: a verde-escura para o tema claro, a negativa para o
   escuro. As duas vêm no HTML; o tema escolhe qual aparece. */
.logo-em-escuro { display: none !important; }
[data-tema="escuro"] .logo-em-claro { display: none !important; }
[data-tema="escuro"] .logo-em-escuro { display: block !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]):not([data-tema="escuro"]) .logo-em-claro { display: none !important; }
  html:not([data-tema="claro"]):not([data-tema="escuro"]) .logo-em-escuro { display: block !important; }
}

/* ── Barra lateral: clara, como a área de trabalho ───────────────────────── */

.lateral {
  background: var(--superficie);
  color: var(--suave);
  border-right: 1px solid var(--linha);
  padding: 20px 16px;
  gap: 20px;
}

.marca { padding: 0 8px; border-bottom: 0; }
.marca-logo { height: 34px; }
.marca-apoio { display: none; }

.lateral nav a {
  min-height: 40px;
  padding: 0 12px;
  gap: 12px;
  border-radius: 12px;
  color: var(--suave);
  font-size: 14px;
  font-weight: 500;
}
.lateral nav a:hover { background: var(--superficie-3); color: var(--tinta); }
.lateral nav a[aria-current="page"] {
  background: var(--superficie-3);
  color: var(--tinta);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--linha);
}
.lateral nav a[aria-current="page"] svg { color: var(--tinta); }

.menu-grupo > summary {
  padding: 14px 12px 6px;
  margin-top: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--suave);
  border-radius: 8px;
}
.menu-grupo > summary:hover { color: var(--tinta); background: transparent; }
.menu-grupo > summary:focus-visible { outline: 2px solid var(--tinta); }
.menu-grupo > .menu-grupo-itens { margin-left: 0; padding-left: 0; border-left: 0; }

.menu-organizando .alca { color: var(--apagado); }
.menu-organizando .alca:hover { background: var(--superficie-3); color: var(--tinta); }
.menu-acoes button { color: var(--suave); }
.menu-acoes button:hover { color: var(--tinta); }

.rodape-lateral { border-top: 0; padding-top: 0; }

/* A aparência em faixa segmentada, como no pacote */
.troca-tema > div {
  gap: 2px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--superficie-3);
}
.troca-tema button {
  min-height: 32px;
  border-radius: 999px;
  color: var(--suave);
  font-size: 12px;
  font-weight: 600;
}
.troca-tema button + button { border-left: 0; }
.troca-tema button:hover { background: transparent; color: var(--tinta); }
.troca-tema button[aria-current="true"] {
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: var(--sombra);
}

.quem {
  padding: 8px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  color: var(--tinta);
}
.quem:hover { background: var(--superficie-2); }
.quem-texto strong { color: var(--tinta); font-size: 13px; }
.quem-texto small { color: var(--suave); font-size: 12px; }

.avatar { background: var(--brand); color: var(--brand-tinta); }
.pessoa .avatar { background: var(--inverso); color: var(--sobre-inverso); }

.btn-sair {
  border-radius: 999px;
  color: var(--suave);
  border: 1px solid var(--linha);
  font-size: 13px;
  font-weight: 600;
}
.btn-sair:hover { color: var(--tinta); border-color: var(--linha-forte); background: var(--superficie-2); }

.seletor-unidade p { color: var(--suave); letter-spacing: .06em; font-size: 11px; }
.seletor-unidade form { background: var(--superficie-3); border-radius: 999px; padding: 4px; }
.seletor-unidade button { border-radius: 999px; color: var(--suave); }
.seletor-unidade button:hover { background: transparent; color: var(--tinta); }
.seletor-unidade button[aria-pressed="true"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); }

/* Celular: faixa do topo e gaveta também claras */
.topo-movel { background: var(--superficie); border-bottom: 1px solid var(--linha); }
.topo-marca .marca-logo { height: 28px; }
.topo-menu { border: 1px solid var(--linha); border-radius: 999px; color: var(--tinta); }
.topo-menu:hover { color: var(--tinta); border-color: var(--linha-forte); background: var(--superficie-2); }
.menu-fechar { color: var(--tinta); border-radius: 999px; }
.menu-fechar:hover { background: var(--superficie-3); color: var(--tinta); }

/* A casca nasceu escura e marcava a lateral com .em-escuro, que invertia o
   botão secundário. Com a lateral clara, a inversão sai. */
.em-escuro .btn-secundario { color: var(--tinta); border-color: var(--linha); }
.em-escuro .btn-secundario:hover { border-color: var(--linha-forte); background: var(--superficie-2); }

@media (min-width: 62rem) {
  .casca { grid-template-columns: 248px 1fr; }
  main { padding: 24px 28px; }
}

/* ── Tipografia das telas ────────────────────────────────────────────────── */

.titulo { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.01em; }
.subtitulo { font-size: 17px; font-weight: 600; letter-spacing: -.005em; }
.apoio { color: var(--suave); font-size: 13px; }
.migalha { font-size: 12px; font-weight: 600; }
.migalha a { color: var(--suave); }

/* ── Botões ──────────────────────────────────────────────────────────────── */

.btn {
  background: var(--brand);
  color: var(--brand-tinta);
  font-weight: 600;
  font-size: 14px;
  padding: 0 20px;
  border-radius: 999px;
  transition: background-color .15s, box-shadow .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--brand); color: var(--brand-tinta); box-shadow: inset 0 0 0 100px rgba(19, 19, 22, .07); }
.btn:active { transform: translateY(1px); }

.btn-secundario {
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--linha);
}
.btn-secundario:hover { background: var(--superficie-3); color: var(--tinta); border-color: var(--linha); box-shadow: none; }

.btn-whatsapp { background: var(--inverso); color: var(--sobre-inverso); }
.btn-whatsapp:hover { background: var(--inverso); color: var(--sobre-inverso); box-shadow: inset 0 0 0 100px rgba(255, 255, 255, .08); }

.btn-perigo { background: var(--danger-fundo); color: var(--danger); border: 1px solid transparent; }
.btn-perigo:hover { background: var(--danger); color: #ffffff; box-shadow: none; }
[data-tema="escuro"] .btn-perigo:hover { color: #2a0707; }

/* ── Cartões ─────────────────────────────────────────────────────────────── */

.cartao {
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--sombra);
}
.cartao.sem-espaco { padding: 0; overflow: hidden; }

.indicador {
  border-radius: 12px;
  padding: 16px;
  box-shadow: none;
}
.indicador dt { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.numero { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.01em; }
.indicador-atencao { border-color: var(--linha); box-shadow: inset 3px 0 0 var(--brand); }

/* ── Selos e etiquetas ───────────────────────────────────────────────────── */

.selo { padding: 2px 10px; font-size: 12px; line-height: 20px; }
.selo-novo { background: var(--info-fundo); color: var(--info); }
.etiqueta { border-radius: 999px; padding: 1px 10px; font-size: 12px; line-height: 20px; }
.conta { background: var(--superficie-3); color: var(--tinta); font-size: 11px; font-weight: 700; padding: 1px 7px; }

/* ── Abas: sublinhado lima ───────────────────────────────────────────────── */

.abas a { color: var(--suave); font-size: 14px; border-bottom-width: 3px; }
.abas a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--brand); }

/* ── Funil ou tabela: segmentado ─────────────────────────────────────────── */

.troca-visao {
  gap: 2px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--superficie-3);
}
.troca-visao-item {
  min-height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}
.troca-visao-item + .troca-visao-item { border-left: 0; }
.troca-visao-item:hover { background: transparent; }
.troca-visao-item.atual { background: var(--superficie); box-shadow: var(--sombra); }

/* ── Quadro do funil: colunas afundadas, cartões brancos ─────────────────── */

.coluna {
  background: var(--superficie-3);
  border: 0;
  border-radius: 20px;
  padding: 12px;
}
.coluna-ganho { box-shadow: inset 0 0 0 1px var(--brand); }
.coluna-perda { background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linha); }
.coluna-topo { padding: 4px 4px 0; }
.coluna-topo h2 { font-size: 14px; font-weight: 600; }
.coluna-soma { margin: 2px 4px 10px; font-size: 12px; font-weight: 600; }
.coluna .conta { background: var(--superficie); }

.cartao-negocio {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
  box-shadow: var(--sombra);
}
.cartao-negocio:hover { border-color: var(--linha-forte); }
.cartao-titulo { font-size: 14px; line-height: 19px; }
.cartao-valor { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.mover select { border-radius: 999px; padding: 0 12px; background: var(--superficie-2); border-color: var(--linha); }
.troca-funil select { border-radius: 999px; padding: 0 14px; border-color: var(--linha); }

/* ── Tabelas: cabeçalho em faixa arredondada ─────────────────────────────── */

table { font-size: 13px; }
thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--suave);
  background: var(--superficie-3);
  padding: 10px 12px;
  border-bottom: 0;
}
thead th:first-child { border-radius: 12px 0 0 12px; }
thead th:last-child { border-radius: 0 12px 12px 0; }
tbody td, tbody th { padding: 12px; }
tbody tr:hover > td, tbody tr:hover > th { background: var(--superficie-2); }

/* ── Formulários: campo afundado, canto 12 ───────────────────────────────── */

.formulario label { color: var(--tinta); font-size: 13px; }
.formulario input,
.formulario select,
.formulario textarea {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--superficie-3);
  border: 1px solid var(--linha-forte);
  color: var(--tinta);
}
.formulario textarea { padding: 10px 14px; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
  outline: 2px solid var(--tinta);
  outline-offset: 1px;
  border-color: var(--linha-forte);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--signal); }

/* O que se escolhe ia em caixa alta; na letra nova, a caixa alta grita.
   O seletor continua distinto pela seta e pelo fundo. */
.formulario select, .formulario select option,
.formulario input[type="month"], .formulario input[type="date"], .formulario input[type="datetime-local"],
.filtros select, .filtros select option, .filtros input[type="month"], .filtros input[type="date"] {
  text-transform: none;
  letter-spacing: 0;
}

/* ── Recados e avisos ────────────────────────────────────────────────────── */

.recado { border-radius: 12px; font-size: 14px; }
.recado-ok { color: var(--brand-tinta); }
[data-tema="escuro"] .recado-ok { color: var(--signal); }

.quadro-avisos { border-radius: 12px; }
.aviso-linha.aviso-medio { border-left-color: var(--brand); }
.aviso-linha:focus-visible { outline: 2px solid var(--tinta); }

/* ── Tela de entrada ─────────────────────────────────────────────────────── */

body.sozinho { background: var(--fundo); }
.cartao-login { border-radius: 32px; padding: 32px; box-shadow: var(--sombra); }
.marca-login {
  margin: 0 0 24px;
  padding: 0;
  background: none;
  border-radius: 0;
  text-align: left;
}
.marca-login .marca-logo { height: 40px; margin: 0 0 12px; }
.marca-login .marca-apoio { display: block; color: var(--suave); letter-spacing: 0; text-transform: none; font-size: 13px; }

.pular { background: var(--brand); color: var(--brand-tinta); border-radius: 0 0 12px 0; }


/* ==========================================================================
   Casca do design system: lateral e barra do alto
   ========================================================================== */

/* ── Lateral ─────────────────────────────────────────────────────────────── */

.lateral { gap: 16px; }
.marca a { display: inline-block; }
.marca-logo { height: 36px; }

.quem-caixa { position: relative; }
.quem-caixa > summary { list-style: none; cursor: pointer; }
.quem-caixa > summary::-webkit-details-marker { display: none; }
.quem-caixa > summary::marker { content: ""; }
.quem { display: flex; align-items: center; gap: 10px; padding: 8px; }
.quem .avatar { width: 32px; height: 32px; font-size: 12px; }
.quem-texto { flex: 1; }
.quem > svg { width: 16px; height: 16px; flex: none; color: var(--suave); transition: transform .15s; }
.quem-caixa[open] > .quem > svg { transform: rotate(180deg); }
.quem-menu {
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.quem-menu a, .quem-menu .btn-sair {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 38px; margin: 0; padding: 0 10px;
  border: 0; border-radius: 8px; background: none;
  color: var(--tinta); font: inherit; font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer; text-align: left;
}
.quem-menu a:hover, .quem-menu .btn-sair:hover { background: var(--superficie-3); color: var(--tinta); }
.quem-menu svg { width: 16px; height: 16px; color: var(--suave); }

.menu-grupo > summary { padding: 16px 12px 6px; }
.menu-grupo > summary .menu-seta { opacity: 0; transition: opacity .15s, transform .15s; }
.menu-grupo > summary:hover .menu-seta, .menu-grupo:not([open]) > summary .menu-seta { opacity: 1; }
.menu-grupo:first-of-type > summary { padding-top: 4px; }

.lateral nav ul { gap: 2px; }
.lateral nav a svg { width: 18px; height: 18px; color: var(--suave); }
.lateral nav a:hover svg { color: var(--tinta); }
.menu-nome { flex: 1; min-width: 0; }
.menu-conta {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 20px; padding: 0 8px;
  border-radius: 999px;
  background: var(--brand); color: var(--brand-tinta);
  font-size: 11px; font-weight: 700;
}

.menu-acoes { padding: 12px 12px 0; }

.rodape-lateral { margin-top: auto; }
.troca-tema { margin: 0; }
.troca-tema-rotulo {
  margin: 0 0 6px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--suave);
}
.troca-tema button { font-size: 12px; }

@media (min-width: 62rem) {
  .lateral { position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
}

/* ── Barra do alto ───────────────────────────────────────────────────────── */

main { display: flex; flex-direction: column; }
.barra-topo {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 16px;
  margin: -1rem -1.15rem 1rem;
  padding: 14px 1.15rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
@media (min-width: 62rem) {
  main { padding: 0 28px 24px; }
  .barra-topo { margin: 0 -28px 24px; padding: 16px 24px; min-height: 96px; box-sizing: border-box; }
}
.barra-topo-titulo { min-width: 0; }
.barra-topo-trilha { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--suave); }
.barra-topo-nome { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
.barra-topo-sub { margin: 2px 0 0; font-size: 13px; line-height: 18px; font-style: italic; color: var(--suave); }

.barra-topo-ferramentas { display: flex; align-items: center; gap: 8px; }
.busca-topo {
  display: flex; align-items: center; gap: 10px;
  width: 304px; height: 44px; padding: 0 12px 0 16px;
  border-radius: 999px;
  background: var(--superficie-3);
  border: 1px solid var(--linha);
  box-sizing: border-box;
}
.busca-topo:focus-within { outline: 2px solid var(--tinta); outline-offset: 1px; }
.busca-topo svg { width: 18px; height: 18px; flex: none; color: var(--suave); }
.busca-topo input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: 14px; color: var(--tinta);
}
.busca-topo input::placeholder { color: var(--suave); }
.busca-topo kbd {
  font: inherit; font-size: 11px; font-weight: 600; color: var(--suave);
  padding: 2px 6px; border-radius: 6px; background: var(--superficie);
  white-space: nowrap;
}
.barra-topo-icone {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--tinta);
}
.barra-topo-icone:hover { background: var(--superficie-3); }
.barra-topo-icone svg { width: 20px; height: 20px; }
.barra-topo-icone .ponto {
  position: absolute; top: 9px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 2px var(--superficie);
}
.avatar-topo {
  width: 40px; height: 40px; margin-left: 4px;
  background: var(--inverso); color: var(--sobre-inverso);
  font-size: 13px; text-decoration: none;
}

@media (max-width: 61.999rem) {
  .barra-topo-ferramentas { width: 100%; }
  .busca-topo { flex: 1; width: auto; }
  .busca-topo kbd, .avatar-topo { display: none; }
  .barra-topo-nome { font-size: 20px; line-height: 26px; }
}

.credito { margin-top: auto; padding-top: 16px; font-size: 12px; }
.lateral li > a { flex: 1; min-width: 0; }

/* ==========================================================================
   Componentes do design system usados pelas telas
   ========================================================================== */

/* Ícone dentro de botão */
.btn svg { width: 18px; height: 18px; flex: none; }

/* ── Indicadores (kpi) ───────────────────────────────────────────────────── */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 0 0 16px; }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi {
  display: block;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--tinta);
  text-decoration: none;
}
a.kpi:hover { border-color: var(--linha-forte); }
.kpi-rotulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; line-height: 18px; color: var(--suave); }
.kpi-icone {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-suave); color: var(--signal);
}
.kpi-icone svg { width: 16px; height: 16px; }
.kpi-valor { margin: 12px 0 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.kpi-apoio { margin: 4px 0 0; font-size: 12px; color: var(--suave); }
@media (max-width: 40rem) { .kpis-3 { grid-template-columns: 1fr; } }

/* Selo com ponto, como o badge do pacote */
.selo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.selo-ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo-alerta { background: var(--danger-fundo); color: var(--danger); }
.selo-aviso { background: #fff1d6; color: #935a00; }
[data-tema="escuro"] .selo-aviso { background: #3a2b0c; color: #ffc766; }

/* ── Barra de controles (segmentado, filtros, ações) ─────────────────────── */
.barra-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.barra-controles-fim { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.barra-controles .troca-funil { display: flex; gap: 8px; margin: 0; }
.barra-controles .troca-funil select {
  margin: 0; min-height: 44px; padding: 0 36px 0 16px;
  border: 1px solid var(--linha); border-radius: 999px;
  background-color: var(--superficie); color: var(--tinta);
  font-size: 14px; font-weight: 600;
}
.barra-controles .troca-visao { padding: 4px; }
.barra-controles .troca-visao-item { min-height: 36px; }
.barra-controles .btn { min-height: 44px; }

/* ── Cartão do funil ─────────────────────────────────────────────────────── */
.cartao-negocio { position: relative; padding: 14px 16px; }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 22px; }
.cartao-cliente { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--suave); }
.cartao-cliente svg { width: 14px; height: 14px; flex: none; }
.cartao-topo .selo { font-size: 12px; padding: 2px 10px; }
.cartao-titulo { margin: 12px 0 2px; font-size: 15px; line-height: 20px; font-weight: 600; }
.cartao-projeto { margin: 0; font-size: 12px; }
.cartao-valor { margin: 4px 0 0; font-size: 20px; line-height: 26px; font-weight: 600; }
.cartao-telefone { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; color: var(--suave); }
.cartao-telefone svg { width: 13px; height: 13px; }
.cartao-negocio .tags { margin-top: 8px; }
.cartao-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha);
}
.cartao-quando { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); }
.cartao-quando svg { width: 14px; height: 14px; }
.cartao-dono { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tinta); }
.cartao-dono .avatar { width: 24px; height: 24px; font-size: 10px; background: var(--inverso); color: var(--sobre-inverso); }
.cartao-pe .selo { font-size: 12px; padding: 2px 10px; }
.cartao-marca { top: 12px; right: 12px; }
.cartao-negocio .mover select { margin-top: 10px; min-height: 32px; font-size: 12px; color: var(--suave); }
.coluna-topo h2 { display: inline-flex; align-items: center; gap: 8px; }
.coluna-topo { align-items: center; }
.coluna-soma { text-align: right; margin-top: -20px; }
.quadro { grid-auto-columns: minmax(17rem, 1fr); gap: 16px; }
.coluna-topo { justify-content: flex-start; }
.coluna-soma { margin: -19px 4px 12px; }
.cabeca:has(> h1.sr:only-child) { margin: 0; }

/* ── Botões extras do design system ──────────────────────────────────────── */
.btn-escuro { background: var(--inverso); color: var(--sobre-inverso); }
.btn-escuro:hover { background: var(--inverso); color: var(--sobre-inverso); box-shadow: inset 0 0 0 100px rgba(255, 255, 255, .08); }
.btn-claro { background: var(--superficie); color: var(--tinta); }
.btn-claro:hover { background: var(--superficie); color: var(--tinta); box-shadow: inset 0 0 0 100px rgba(19, 19, 22, .05); }
.link-seta { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--tinta); text-decoration: none; }
.link-seta:hover { text-decoration: underline; }
.link-seta svg, .btn svg { width: 16px; height: 16px; }

/* ── Faixa de alerta ─────────────────────────────────────────────────────── */
.faixa-alerta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin: 0 0 16px; padding: 12px 12px 12px 20px;
  border-radius: 16px;
  background: #fff1d6; color: var(--brand-tinta);
  font-size: 14px;
}
.faixa-alerta > svg { width: 20px; height: 20px; color: #935a00; flex: none; }
.faixa-alerta p { margin: 0; flex: 1; min-width: 12rem; }
[data-tema="escuro"] .faixa-alerta { background: #3a2b0c; color: var(--tinta); }
[data-tema="escuro"] .faixa-alerta > svg { color: #ffc766; }

/* ── Grades do Início ────────────────────────────────────────────────────── */
.grade-inicio { display: grid; gap: 16px; margin: 0 0 16px; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.grade-inicio-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.grade-inicio > * { min-width: 0; margin: 0 !important; }
@media (max-width: 70rem) { .grade-inicio, .grade-inicio-topo { grid-template-columns: 1fr; } }
.cartao-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.cartao-cabeca .apoio { margin: 2px 0 0; }
.sem-margem { margin: 0; }

/* ── Destaque lima ───────────────────────────────────────────────────────── */
.destaque {
  position: relative; overflow: hidden;
  padding: 28px 24px 24px;
  border-radius: 20px;
  background: var(--brand); color: var(--brand-tinta);
}
.destaque::after {
  content: ""; position: absolute; right: -60px; bottom: -120px;
  width: 260px; height: 260px; border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, .28);
  pointer-events: none;
}
.destaque-rotulo { margin: 0; font-size: 16px; font-weight: 500; }
.destaque-valor { margin: 14px 0 0; font-size: 44px; line-height: 48px; font-weight: 500; letter-spacing: -.03em; }
.destaque-valor small { font-size: 13px; font-weight: 700; letter-spacing: 0; vertical-align: super; }
.destaque-apoio { margin: 8px 0 0; font-size: 13px; }
.destaque-acoes { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.destaque-acoes .btn { flex: 1; min-height: 44px; }

/* ── Barras por mês ──────────────────────────────────────────────────────── */
.legenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; font-size: 12px; font-weight: 600; color: var(--tinta); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-cor { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.cor-escura { background: var(--tinta); }
.cor-verde { background: var(--brand-2); }
.barras-mes {
  display: flex; align-items: stretch; gap: 8px;
  height: 200px; padding-top: 8px;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px);
  background-size: 100% 25%;
}
.barras-mes-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.barras-mes-par { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.barra { display: block; width: min(22px, 38%); min-height: 3px; border-radius: 6px 6px 3px 3px; }
.barras-mes-rotulo { margin-top: 8px; font-size: 12px; color: var(--suave); }

/* ── Rosca por etapa ─────────────────────────────────────────────────────── */
.rosca-bloco { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.rosca { width: 150px; height: 150px; flex: none; }
.rosca-rotulo { font-size: 10px; fill: var(--suave); font-family: var(--fonte-texto); }
.rosca-numero { font-size: 22px; font-weight: 600; fill: var(--tinta); font-family: var(--fonte-texto); }
.rosca-legenda { flex: 1; min-width: 10rem; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rosca-legenda li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rosca-legenda b { margin-left: auto; font-weight: 600; }

/* ── Tabela no formato do pacote ─────────────────────────────────────────── */
.tabela-ds th, .tabela-ds td { text-align: left; }
.tabela-ds .numerico { text-align: right; }
.tabela-ds tbody th { font-weight: 500; }
.pessoa-linha { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; }
a.pessoa-linha:hover strong { text-decoration: underline; }
.pessoa-linha strong { display: block; font-weight: 600; }
.pessoa-linha small { display: block; font-size: 12px; color: var(--suave); }
.avatar-claro { width: 32px; height: 32px; font-size: 11px; background: var(--superficie-3); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linha); }
.pessoa-linha .avatar-pequeno { width: 26px; height: 26px; font-size: 10px; background: var(--brand); color: var(--brand-tinta); }

/* ── Lista de avisos compacta ────────────────────────────────────────────── */
.lista-avisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.aviso-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0 10px 12px;
  border-bottom: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte);
  color: var(--tinta); text-decoration: none;
}
.lista-avisos li:last-child .aviso-item { border-bottom: 0; }
.aviso-item:hover .aviso-titulo { text-decoration: underline; }
.aviso-item.aviso-alto { border-left-color: var(--danger); }
.aviso-item.aviso-medio { border-left-color: var(--brand); }
.aviso-texto { flex: 1; min-width: 0; }
.aviso-item .aviso-titulo { display: block; font-size: 14px; font-weight: 500; }
.aviso-item .aviso-detalhe { display: block; font-size: 12px; color: var(--suave); white-space: normal; }
.aviso-item .aviso-quando { flex: none; font-size: 12px; font-weight: 500; color: var(--suave); text-align: right; }
.aviso-item.aviso-alto .aviso-quando { color: var(--danger); }
.aviso-item.aviso-alto, .aviso-item.aviso-medio, .aviso-item.aviso-baixo { background: none; }
.aviso-item:hover { background: var(--superficie-2); }
.tabela-ds td, .tabela-ds .pessoa-linha { white-space: nowrap; }
.tabela-ds th .pessoa-linha { white-space: normal; }
.avisos-mais { margin: 12px 0 0; font-size: 13px; }

/* ── Cabeçalho da negociação ─────────────────────────────────────────────── */
.cabeca-negocio { padding: 24px; margin-bottom: 16px; }
.cabeca-negocio-topo { display: flex; align-items: flex-start; gap: 20px; }
.avatar-grande { width: 64px; height: 64px; font-size: 22px; flex: none; background: var(--brand); color: var(--brand-tinta); }
.cabeca-negocio .titulo-editavel { flex: 1; min-width: 0; }
.cabeca-negocio .migalha { margin: 0 0 2px; }
.cabeca-negocio .titulo { font-size: 30px; line-height: 36px; letter-spacing: -.02em; margin: 0; }
.negocio-linha { margin: 2px 0 0; font-size: 17px; color: var(--tinta); }
.negocio-linha strong { font-weight: 600; }
.negocio-selos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.negocio-selos .apoio { margin: 0; }
.cabeca-negocio .mini-editor { margin-top: 6px; }
.negocio-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0 0; }
.negocio-acoes form { margin: 0; }
.negocio-acoes .btn { min-height: 44px; }
.negocio-acoes-fim { margin-left: auto; }

.regua-etapas {
  list-style: none; margin: 24px 0 0; padding: 28px 0 0;
  border-top: 1px solid var(--linha);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.regua-passo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 18px; min-width: 0; }
.regua-passo::before {
  content: ""; position: absolute; top: 28px; left: 0; right: 0; height: 4px;
  background: var(--superficie-3);
}
.regua-passo:first-child::before { left: 50%; }
.regua-passo:last-child::before { right: 50%; }
.regua-feita::before, .regua-atual::before { background: var(--brand); }
.regua-atual::before { right: 50%; }
.regua-atual:last-child::before { right: 50%; }
.regua-marca {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--superficie); box-shadow: inset 0 0 0 2px var(--linha-forte);
}
.regua-feita .regua-marca { background: var(--brand); box-shadow: none; color: var(--brand-tinta); }
.regua-feita .regua-marca svg { width: 14px; height: 14px; }
.regua-atual .regua-marca { background: var(--superficie); box-shadow: inset 0 0 0 6px var(--tinta); }
.regua-selo {
  position: absolute; top: -18px;
  padding: 3px 10px; border-radius: 8px;
  background: var(--brand); color: var(--brand-tinta);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.regua-nome {
  display: inline-block; max-width: 100%;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--linha); background: var(--superficie);
  font: inherit; font-size: 13px; font-weight: 500; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.regua-passo form { margin: 0; max-width: 100%; }
button.regua-nome { cursor: pointer; }
button.regua-nome:hover { border-color: var(--linha-forte); background: var(--superficie-2); }
.regua-atual .regua-nome { border-color: var(--tinta); font-weight: 600; }
@media (max-width: 48rem) {
  .regua-etapas { grid-auto-flow: row; grid-auto-columns: auto; gap: 8px; padding-top: 16px; }
  .regua-passo { flex-direction: row; padding-top: 0; }
  .regua-passo::before, .regua-selo { display: none; }
  .cabeca-negocio-topo { gap: 14px; }
  .avatar-grande { width: 48px; height: 48px; font-size: 16px; }
  .negocio-acoes-fim { margin-left: 0; }
}

/* ── Lista em cartão (Contatos) ──────────────────────────────────────────── */
.lista-cartao { padding: 20px; }
.lista-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px; }
.lista-ferramentas-fim { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.abas-pilula { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--superficie-3); }
.abas-pilula a {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 0 16px; border-radius: 999px;
  color: var(--suave); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.abas-pilula a span { font-size: 11px; font-weight: 700; color: var(--suave); }
.abas-pilula a:hover { color: var(--tinta); }
.abas-pilula a[aria-current="page"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); }
.abas-pilula a[aria-current="page"] span { padding: 1px 7px; border-radius: 999px; background: var(--superficie-3); color: var(--tinta); }

.busca-pilula {
  display: inline-flex; align-items: center; gap: 8px;
  width: 15rem; height: 44px; padding: 0 16px;
  border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie);
  box-sizing: border-box;
}
.busca-pilula:focus-within { outline: 2px solid var(--tinta); outline-offset: 1px; }
.busca-pilula svg { width: 18px; height: 18px; color: var(--suave); flex: none; }
.busca-pilula input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--tinta); }

.filtros-caixa { position: relative; }
.filtros-caixa > summary { list-style: none; min-height: 44px; }
.filtros-caixa > summary::-webkit-details-marker { display: none; }
.filtros-caixa > summary::marker { content: ""; }
.filtros-caixa[open] > summary { background: var(--superficie-3); }
.filtros-soltos {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  width: min(34rem, 90vw);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end;
  padding: 16px; margin: 0;
  border: 1px solid var(--linha); border-radius: 16px;
  background: var(--superficie); box-shadow: var(--sombra-alta);
}
.filtros-soltos label { font-size: 12px; font-weight: 600; color: var(--tinta); }
.filtros-soltos input, .filtros-soltos select {
  display: block; width: 100%; margin-top: 4px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--linha-forte); border-radius: 10px; background: var(--superficie-3);
  font: inherit; font-size: 14px; color: var(--tinta);
}
.btn-icone-redondo { width: 44px; min-height: 44px; padding: 0; }

.fichas-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.fichas-etiquetas > svg { width: 16px; height: 16px; color: var(--suave); }
.fichas { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ficha {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border-radius: 999px; background: var(--superficie-3); color: var(--tinta);
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ficha:hover { box-shadow: inset 0 0 0 1px var(--linha-forte); }
.ficha-ativa { background: var(--brand); color: var(--brand-tinta); }

.tabela-contatos td, .tabela-contatos th { vertical-align: middle; }
.tabela-contatos .contato-nome { font-weight: 600; color: var(--tinta); text-decoration: none; }
.tabela-contatos .contato-nome:hover { text-decoration: underline; }
.tabela-contatos .pessoa-linha small, .col-origem small, .interesse, .criado-por { display: block; font-size: 12px; color: var(--suave); white-space: normal; }
.col-origem span { display: block; }
.col-etiquetas .fichas { margin-top: 2px; }
.avatar-lima { width: 32px; height: 32px; font-size: 11px; background: var(--brand); color: var(--brand-tinta); }
.avatar-escuro { width: 32px; height: 32px; font-size: 11px; background: var(--inverso); color: var(--sobre-inverso); }
.avatar-pequeno.avatar-escuro { width: 26px; height: 26px; font-size: 10px; }
.tabela-contatos .acoes-celula { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tabela-contatos details.acao > summary {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px;
  border-radius: 999px; background: var(--inverso); color: var(--sobre-inverso); font-size: 13px; font-weight: 600;
  cursor: pointer; list-style: none;
}
.tabela-contatos details.acao > summary::-webkit-details-marker { display: none; }
.tabela-contatos tr:has(input[data-selecao]:checked) > * { background: var(--brand-suave); }
.vazio { text-align: center; padding: 28px 16px; }
@media (max-width: 62rem) {
  .lista-ferramentas-fim { margin-left: 0; width: 100%; }
  .busca-pilula { flex: 1; width: auto; }
  .filtros-soltos { position: static; width: auto; grid-template-columns: 1fr; margin-top: 8px; }
}
.mais-acoes { position: relative; }
.mais-acoes > summary { list-style: none; width: 36px; min-height: 36px; font-size: 18px; line-height: 1; }
.mais-acoes > summary::-webkit-details-marker { display: none; }
.mais-acoes-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  min-width: 13rem; padding: 10px;
  border: 1px solid var(--linha); border-radius: 14px;
  background: var(--superficie); box-shadow: var(--sombra-alta);
}
.mais-acoes-menu .btn, .mais-acoes-menu select { width: 100%; }
.mais-acoes-menu form { margin: 0; }
.mais-acoes-menu .excluir { display: block; }
.btn-texto {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px;
  border: 0; background: none; color: var(--tinta);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-texto:hover { text-decoration: underline; }
.btn-texto svg { width: 16px; height: 16px; }
.tabela-contatos .acoes-celula { flex-wrap: nowrap; align-items: center; }

/* ── Tarefas ─────────────────────────────────────────────────────────────── */
.grade-lateral { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); align-items: start; margin-bottom: 16px; }
.grade-lateral > * { min-width: 0; margin: 0 !important; }
@media (max-width: 70rem) { .grade-lateral { grid-template-columns: 1fr; } }
.grupo-tarefas {
  display: flex; align-items: center; gap: 6px;
  margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--suave);
}
.grupo-tarefas svg { width: 14px; height: 14px; }
.grupo-atrasadas { color: var(--danger); }
.tarefas { gap: 8px; margin: 0; }
.tarefa-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie);
}
.tarefa-vencida { background: var(--superficie); border-color: var(--linha); }
.tarefa-corpo { flex: 1; min-width: 0; }
.tarefa-titulo { margin: 0; font-size: 15px; font-weight: 500; }
.tarefa-feita .tarefa-titulo { text-decoration: line-through; color: var(--suave); }
.tarefa-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
.tarefa-linha .ficha { gap: 6px; }
.tarefa-linha .ficha svg { width: 13px; height: 13px; color: var(--suave); }
.tarefa-nota { font-size: 12px; color: var(--suave); }
.tarefa-lado { display: flex; align-items: center; gap: 10px; flex: none; }
.tarefa-prazo { font-size: 13px; color: var(--tinta); white-space: nowrap; }
.tarefa-vencida .tarefa-prazo { color: var(--danger); }
.caixa-concluir {
  display: grid; place-items: center;
  width: 22px; height: 22px; padding: 0;
  border: 1.5px solid var(--linha-forte); border-radius: 6px; background: var(--superficie);
  color: var(--brand-tinta); cursor: pointer;
}
.caixa-concluir:hover { border-color: var(--signal); box-shadow: 0 0 0 3px var(--brand-suave); }
.caixa-concluir.marcada { background: var(--brand); border-color: var(--brand); }
.caixa-concluir svg { width: 14px; height: 14px; }
.tarefa-item .mini-editor { margin-top: 4px; }

.destaque-centro { text-align: center; }
.destaque-centro .destaque-valor { font-size: 56px; line-height: 60px; }
.pontos { display: flex; justify-content: center; gap: 4px; margin: 16px 0 0; }
.pontos span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--superficie); }
.pontos span.cheio { background: var(--brand); border-color: var(--tinta); box-shadow: inset 0 0 0 3px var(--superficie); }
.barras-pessoa { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.barras-pessoa li { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.barra-pessoa { grid-column: 1; height: 6px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.barra-pessoa span { display: block; height: 100%; background: var(--brand-2); border-radius: 999px; }
.barras-pessoa b { font-size: 12px; font-weight: 600; }
.barras-pessoa .pessoa-linha { grid-column: 1 / -1; font-size: 14px; }

/* ── Tela de entrada ─────────────────────────────────────────────────────── */
body.sozinho:has(.entrada) { display: block; padding: 0; background: var(--fundo); }
body.sozinho:has(.entrada) main.centro { max-width: none; }
body.sozinho:has(.entrada) .credito { display: none; }
.entrada { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); min-height: 100dvh; }
.entrada-folha {
  display: flex; flex-direction: column;
  padding: 40px 56px 32px;
  background: var(--superficie);
  border-radius: 0 40px 40px 0;
}
.entrada-logo .marca-logo { height: 40px; }
.entrada-form { width: 100%; max-width: 380px; margin: auto; padding: 40px 0; }
.entrada-sobretitulo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--suave); }
.entrada-sobretitulo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-2); }
.entrada-form .titulo { font-size: 32px; line-height: 38px; font-weight: 500; margin: 0 0 12px; }
.entrada-form .apoio { font-size: 15px; margin: 0 0 24px; }
.entrada-form .formulario { gap: 14px; }
.entrada-form .formulario input { min-height: 48px; }
.entrada-esqueci { margin: -4px 0 0; text-align: right; font-size: 13px; }
.entrada-esqueci a { color: var(--tinta); font-weight: 600; }
.entrada-form .btn-largo { min-height: 52px; font-size: 16px; margin-top: 6px; }
.entrada-pe { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 12px; color: var(--suave); }
.entrada-pe a { color: var(--tinta); font-weight: 600; }
.entrada-vitrine { display: flex; flex-direction: column; justify-content: center; padding: 56px; }
.entrada-frase { margin: 0; font-size: 64px; line-height: 70px; font-weight: 400; letter-spacing: -.035em; color: var(--tinta); max-width: 11em; }
.entrada-frase b { font-weight: 600; }
.entrada-apoio { margin: 24px 0 0; font-size: 17px; line-height: 26px; color: var(--suave); max-width: 30rem; }
.entrada-etapas { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; }
.entrada-etapas li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--superficie); color: var(--tinta); font-size: 14px; font-weight: 600;
  box-shadow: var(--sombra);
}
.entrada-etapas li:first-child { background: var(--brand); color: var(--brand-tinta); }
.entrada-etapas svg { width: 18px; height: 18px; }
@media (max-width: 60rem) {
  .entrada { grid-template-columns: 1fr; }
  .entrada-vitrine { display: none; }
  .entrada-folha { border-radius: 0; padding: 24px 20px; }
}

/* ── Abas: faixa segmentada em pílula (Financeiro, Propostas e as demais) ── */
.abas {
  display: inline-flex; flex-wrap: wrap; gap: 2px;
  margin: 0 0 16px; padding: 4px;
  border: 0; border-radius: 999px;
  background: var(--superficie-3);
}
.abas a {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 16px; margin: 0;
  border: 0; border-radius: 999px;
  color: var(--suave); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.abas a:hover { color: var(--tinta); }
.abas a[aria-current="page"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); border: 0; }
.barra-controles .abas { margin: 0; }
@media (max-width: 40rem) { .abas { display: flex; border-radius: 16px; } }
.casca > main > .abas, .casca > main > .cabeca + .abas { align-self: flex-start; }

/* ── Demonstração pública (Config::demo) ─────────────────────────────────── */
.demo-tarja {
  position: sticky; top: 0; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px;
  width: 100%; box-sizing: border-box;
  padding: 8px 16px;
  background: var(--inverso); color: var(--sobre-inverso-suave);
  font-size: 13px; line-height: 18px; text-align: center;
}
.demo-tarja strong { color: var(--brand); }
.demo-tarja a { color: #ffffff; font-weight: 600; padding: 2px 6px; border-radius: 6px; }
.demo-tarja a:hover { background: rgba(255, 255, 255, .1); }
@media (min-width: 62rem) {
  .demo-tarja ~ .casca .lateral { top: 34px; height: calc(100dvh - 34px); }
}
.entrada-dica { text-align: left; color: var(--suave); }
body.sozinho:has(.demo-tarja) main.centro .entrada { min-height: calc(100dvh - 34px); }
@media print { .demo-tarja { display: none; } }

/* ── Conversa: o balão de quem enviou ────────────────────────────────────────
   Fundo escuro pede letra clara. O texto do balão usava a tinta do tema —
   que no design system é o próprio verde profundo — e ficava ilegível sobre
   o verde do balão. Aqui o balão enviado é verde profundo com texto branco,
   e a hora e o "lida" num verde-claro que ainda passa em contraste. */
.msg-saida { background: var(--inverso); }
.msg-saida::before { border-top-color: var(--brand-tinta); }
.msg-saida .msg-texto,
.msg-saida p,
.msg-saida a { color: var(--sobre-inverso); }
.msg-saida > .sutil,
.msg-saida .sutil { color: var(--sobre-inverso-suave); }
.msg-saida .msg-arquivo { background: rgba(255, 255, 255, .12); color: #ffffff; }
/* Envio que falhou: o balão fica claro (fundo de erro), então a letra volta a
   ser a do tema. */
.msg-saida.msg-falha { background: var(--danger-fundo); }
.msg-saida.msg-falha::before { border-top-color: var(--danger-fundo); }
.msg-saida.msg-falha .msg-texto,
.msg-saida.msg-falha p,
.msg-saida.msg-falha a { color: var(--tinta); }
.msg-saida.msg-falha .sutil { color: var(--suave); }

/* ── Largura no celular ──────────────────────────────────────────────────────
 * Duas coisas esticavam a página inteira para o lado:
 *
 * 1. O texto só para leitor de tela (.sr) é posicionado de forma absoluta.
 *    Dentro de uma tabela larga — que rola dentro do cartão —, o bloco que o
 *    contém não era referência de posição, então ele se ancorava na página e
 *    ficava a 900px da borda, empurrando o documento junto. Com `relative` no
 *    contêiner que rola, ele passa a ser recortado ali dentro, como a tabela.
 *
 * 2. As colunas do gráfico do Início não encolhiam: coluna de grade nasce com
 *    largura mínima do conteúdo, e doze meses de rótulo não cabem em 390px.
 */
.rolagem, .quadro, .fita-mensagens { position: relative; }
.barras-mes { min-width: 0; max-width: 100%; }
.barras-mes-col { min-width: 0; }
@media (max-width: 30rem) {
  .barras-mes { gap: 4px; }
  .barras-mes-rotulo { font-size: 10px; }
  .barra { width: min(18px, 60%); }
}

/* ── O valor dos gráficos, ao apontar (graficos.js) ──────────────────────── */
.dica-grafico {
  position: fixed; z-index: 200;
  display: flex; flex-direction: column; gap: 2px;
  max-width: 16rem; padding: 10px 12px;
  border-radius: 12px;
  background: var(--inverso); color: var(--sobre-inverso);
  font-size: 13px; line-height: 18px;
  box-shadow: 0 12px 32px rgba(19, 19, 22, .28);
  pointer-events: none;
}
.dica-grafico strong { font-size: 12px; font-weight: 600; color: var(--brand); }
.dica-grafico span { font-variant-numeric: tabular-nums; }
[data-dica] { cursor: default; }
[data-dica]:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
/* O que está sob o ponteiro se destaca; o resto do gráfico recua um pouco. */
.barras-mes:has(.dica-ativa) .barras-mes-col:not(.dica-ativa),
.barras-mes:has(.dica-ativa) > li:not(.dica-ativa) { opacity: .45; }
.rosca:has(.dica-ativa) circle[data-dica]:not(.dica-ativa) { opacity: .4; }
.grafico-fluxo:has(.dica-ativa) g[data-dica]:not(.dica-ativa) { opacity: .45; }
.barras-pessoa li.dica-ativa .barra-pessoa span { filter: brightness(1.1); }
.barras-mes-col, .barras-mes > li, .rosca circle, .grafico-fluxo g { transition: opacity .12s; }
.grafico-alvo { fill: transparent; }
.grafico-fluxo g[data-dica]:focus { outline: none; }
.grafico-fluxo g.dica-ativa .grafico-alvo { fill: var(--superficie-3); }
.barras-pessoa li { grid-template-columns: 1fr; }

/* ── O sino: notificações ao passar o mouse ──────────────────────────────── */
.sino { position: relative; }
.sino-painel {
  position: absolute; right: -8px; top: calc(100% + 8px); z-index: 60;
  width: min(22rem, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--linha); border-radius: 16px;
  background: var(--superficie); box-shadow: var(--sombra-alta);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility 0s .15s;
}
/* Uma ponte invisível entre o sino e o painel: o mouse passa de um para o
   outro sem o painel fechar no meio do caminho. */
.sino-painel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.sino:hover .sino-painel, .sino:focus-within .sino-painel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .15s, transform .15s, visibility 0s;
}
.sino-titulo { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--suave); }
.sino-vazio { margin: 4px 0 8px; font-size: 14px; color: var(--tinta); }
.sino-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sino-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  border-left: 3px solid var(--linha-forte);
  color: var(--tinta); text-decoration: none; font-size: 14px;
}
.sino-item:hover, .sino-item:focus-visible { background: var(--superficie-3); }
.sino-item.sino-alto { border-left-color: var(--danger); }
.sino-item.sino-medio { border-left-color: var(--brand); }
.sino-texto { flex: 1; min-width: 0; }
.sino-quando { flex: none; font-size: 12px; color: var(--danger); white-space: nowrap; }
.sino-todos {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px; padding: 4px 10px;
  font-size: 13px; font-weight: 600; color: var(--tinta); text-decoration: none;
}
.sino-todos:hover { text-decoration: underline; }
.sino-todos svg { width: 14px; height: 14px; }
@media (hover: none) { .sino-painel { display: none; } }

/* ── Metas e gamificação ─────────────────────────────────────────────────── */
.troca-mes { display: inline-flex; align-items: center; gap: 12px; }
.troca-mes strong { min-width: 10rem; text-align: center; font-size: 16px; }
.progresso { position: relative; height: 10px; margin-top: 8px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.progresso > span { display: block; height: 100%; border-radius: 999px; background: var(--brand-2); transition: width .6s ease; }
.progresso-fino { height: 6px; margin-top: 6px; }
.progresso-fino > span { background: var(--tinta); }
.progresso-destaque { height: 12px; margin-top: 18px; background: rgba(255, 255, 255, .45); }
.progresso-destaque > span { background: var(--inverso); }
.placar-batida .progresso > span { background: linear-gradient(90deg, var(--brand-2), var(--brand)); }

.nivel {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: middle;
}
.nivel-bronze { background: #f3e1cf; color: #7a4a1d; }
.nivel-prata { background: #e6e9ec; color: #3f4a52; }
.nivel-ouro { background: #fbeaa6; color: #6b5200; }
.nivel-diamante { background: #d9ecff; color: #1d4f8a; }
[data-tema="escuro"] .nivel-bronze { background: #4a2f16; color: #f3cfa6; }
[data-tema="escuro"] .nivel-prata { background: #34403f; color: #dfe7e5; }
[data-tema="escuro"] .nivel-ouro { background: #4a3b05; color: #fbe28a; }
[data-tema="escuro"] .nivel-diamante { background: #173152; color: #b8dcff; }

.regras-jogo { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 13px; }
.regras-jogo li { display: flex; align-items: center; gap: 8px; }

.placar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.placar-linha {
  display: grid; grid-template-columns: 2.5rem auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie);
}
.placar-eu { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.placar-posicao { font-size: 18px; font-weight: 700; color: var(--suave); text-align: center; }
.placar-linha:nth-child(1) .placar-posicao { color: #7a5a00; }
.placar-corpo { min-width: 0; }
.placar-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.placar-nome small { font-weight: 500; color: var(--suave); }
.placar-numeros { display: flex; flex-direction: column; align-items: flex-end; }
.placar-numeros strong { font-size: 22px; line-height: 26px; font-weight: 600; }
.placar-numeros small { font-size: 12px; color: var(--suave); }
.conquistas { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.conquistas li {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 999px; background: var(--brand-suave); color: var(--tinta); font-size: 12px; font-weight: 600;
}
.conquistas svg { width: 14px; height: 14px; color: var(--signal); }
.tabela-metas .campo-meta {
  width: 100%; max-width: 12rem; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--linha-forte); border-radius: 10px; background: var(--superficie-3);
  font: inherit; color: var(--tinta);
}
.tabela-metas + .btn, form > .rolagem + .btn { margin-top: 14px; }
/* No celular a tabela de metas vira um cartão por pessoa, com o rótulo de cada campo à vista. */
@media (max-width: 40rem) {
  .tabela-metas, .tabela-metas tbody, .tabela-metas tr, .tabela-metas th, .tabela-metas td { display: block; }
  .tabela-metas thead { display: none; }
  .tabela-metas tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .tabela-metas th[scope="row"] { grid-column: 1 / -1; padding: 0; border: 0; }
  .tabela-metas td { padding: 0; border: 0; }
  .tabela-metas td::before { content: attr(data-rotulo); display: block; margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--suave); }
  .tabela-metas .campo-meta { max-width: none; }
  #definir .cartao-cabeca { flex-wrap: wrap; }
}
@media (max-width: 40rem) {
  .placar-linha { grid-template-columns: auto minmax(0, 1fr) auto; }
  .placar-linha > .avatar { display: none; }
  .regras-jogo { grid-template-columns: 1fr; }
}

/* A festa de quem bateu a meta: confete que cai uma vez, e some. */
.festa {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 16px; padding: 18px 20px;
  border-radius: 20px; background: var(--inverso); color: var(--sobre-inverso);
}
.festa-icone { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--brand); color: var(--brand-tinta); }
.festa-icone svg { width: 28px; height: 28px; }
.festa-titulo { margin: 0; font-size: 20px; font-weight: 600; color: var(--brand); }
.festa-texto { margin: 2px 0 0; font-size: 14px; color: var(--sobre-inverso-suave); }
.festa-confete { position: absolute; inset: 0; pointer-events: none; }
.festa-confete i {
  position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px;
  background: var(--brand); opacity: 0;
  animation: confete 2.6s ease-in 1 forwards;
}
.festa-confete i:nth-child(3n) { background: #ffffff; }
.festa-confete i:nth-child(4n) { background: #fbe28a; }
.festa-confete i:nth-child(1) { left: 53%; animation-delay: 0.11s; transform: rotate(37deg); }
.festa-confete i:nth-child(2) { left: 6%; animation-delay: 0.22s; transform: rotate(74deg); }
.festa-confete i:nth-child(3) { left: 59%; animation-delay: 0.33s; transform: rotate(111deg); }
.festa-confete i:nth-child(4) { left: 12%; animation-delay: 0.44s; transform: rotate(148deg); }
.festa-confete i:nth-child(5) { left: 65%; animation-delay: 0.55s; transform: rotate(5deg); }
.festa-confete i:nth-child(6) { left: 18%; animation-delay: 0.66s; transform: rotate(42deg); }
.festa-confete i:nth-child(7) { left: 71%; animation-delay: 0.77s; transform: rotate(79deg); }
.festa-confete i:nth-child(8) { left: 24%; animation-delay: 0.88s; transform: rotate(116deg); }
.festa-confete i:nth-child(9) { left: 77%; animation-delay: 0.99s; transform: rotate(153deg); }
.festa-confete i:nth-child(10) { left: 30%; animation-delay: 1.10s; transform: rotate(10deg); }
.festa-confete i:nth-child(11) { left: 83%; animation-delay: 1.21s; transform: rotate(47deg); }
.festa-confete i:nth-child(12) { left: 36%; animation-delay: 1.32s; transform: rotate(84deg); }
.festa-confete i:nth-child(13) { left: 89%; animation-delay: 0.03s; transform: rotate(121deg); }
.festa-confete i:nth-child(14) { left: 42%; animation-delay: 0.14s; transform: rotate(158deg); }
.festa-confete i:nth-child(15) { left: 95%; animation-delay: 0.25s; transform: rotate(15deg); }
.festa-confete i:nth-child(16) { left: 48%; animation-delay: 0.36s; transform: rotate(52deg); }
.festa-confete i:nth-child(17) { left: 1%; animation-delay: 0.47s; transform: rotate(89deg); }
.festa-confete i:nth-child(18) { left: 54%; animation-delay: 0.58s; transform: rotate(126deg); }
@keyframes confete { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(140px) rotate(320deg); } }
@media (prefers-reduced-motion: reduce) { .festa-confete { display: none; } }
.meta-resumo { display: flex; align-items: center; gap: 16px; }
.meta-pct { margin: 0; font-size: 44px; line-height: 48px; font-weight: 500; letter-spacing: -.03em; color: var(--tinta); }
.meta-resumo .apoio { margin: 4px 0 0; }
.podio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.podio li {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px; border-radius: 14px; background: var(--superficie-3); text-align: center; min-width: 0;
}
.podio-1 { order: 2; padding-top: 22px; background: var(--brand-suave); }
.podio-2 { order: 1; }
.podio-3 { order: 3; }
.podio-lugar { font-size: 13px; font-weight: 700; color: var(--suave); }
.podio-1 .podio-lugar { color: #7a5a00; }
.podio-nome { font-weight: 600; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Gráficos do dashboard (app/parciais/graficos.php) ───────────────────── */
.g-colunas {
  display: flex; align-items: stretch; gap: 6px; height: 220px; min-width: 0; max-width: 100%;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px); background-size: 100% 25%;
}
.g-coluna { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; border-radius: 8px; }
.g-coluna-trilho { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.g-coluna-barra { display: block; width: min(34px, 70%); min-height: 3px; border-radius: 8px 8px 3px 3px; background: var(--brand-2); }
.g-coluna-rotulo { margin-top: 8px; font-size: 11px; color: var(--suave); white-space: nowrap; }
.g-coluna.dica-ativa .g-coluna-barra, .g-coluna:hover .g-coluna-barra { background: var(--signal); }
.g-colunas:has(.dica-ativa) .g-coluna:not(.dica-ativa) { opacity: .5; }

.g-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.g-barras li { display: grid; grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr); align-items: center; gap: 12px; padding: 2px 4px; border-radius: 8px; }
.g-barra-rotulo { font-size: 13px; font-weight: 600; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-barra-rotulo small { font-weight: 500; color: var(--suave); }
.g-barra-trilho { height: 12px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.g-barra-trilho > span { display: block; height: 100%; border-radius: 999px; background: var(--brand-2); }
.g-barras-escuro .g-barra-trilho > span { background: var(--tinta); }
.g-barras-alerta .g-barra-trilho > span { background: var(--danger); }
.g-barras:has(.dica-ativa) li:not(.dica-ativa) { opacity: .5; }
.g-barras li.dica-ativa { background: var(--superficie-2); }
@media (max-width: 30rem) { .g-barras li { grid-template-columns: 1fr; gap: 4px; } }

.g-rosca { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.g-rosca .rosca-legenda li { padding: 2px 4px; border-radius: 6px; }
.g-rosca .rosca-legenda li.dica-ativa { background: var(--superficie-2); }

.dash-grade { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 16px; }
.dash-grade > * { min-width: 0; margin: 0 !important; }
.dash-largo { grid-column: 1 / -1; }
@media (max-width: 70rem) { .dash-grade { grid-template-columns: 1fr; } }
/* Seis indicadores: 3 + 3 no notebook, 6 numa linha só em tela larga, 2 + 2 + 2 no celular — nunca um sozinho embaixo. */
.kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 100rem) { .kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-nota { margin: 12px 0 0; font-size: 12px; color: var(--suave); }

/* Variação contra o período anterior, ao lado do número do indicador. */
.kpi-variacao {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 2px 7px;
  border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0;
  vertical-align: middle; cursor: default;
}
.kpi-variacao-bom { background: var(--signal-fundo); color: var(--signal); }
.kpi-variacao-ruim { background: var(--danger-fundo); color: var(--danger); }
.kpi-variacao-igual { background: var(--superficie-3); color: var(--suave); }
/* Dois indicadores por linha no celular: o selo desce para baixo do número em vez de vazar do cartão. */
@media (max-width: 48rem) { .kpis-6 .kpi-variacao { display: flex; width: fit-content; margin: 6px 0 0; } }

/* ── Atendente IA ────────────────────────────────────────────────────────── */
.caixa-linha { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; }
.caixa-linha input { min-height: auto; width: auto; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; }
.dias-semana .caixa-linha { margin: 0; }
.linha-campos { display: flex; flex-wrap: wrap; gap: 12px; }
.linha-campos .campo { flex: 1 1 8rem; min-width: 0; }
.lista-simples { list-style: none; margin: 8px 0 0; padding: 0; }
.pausa-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--linha); flex-wrap: wrap;
}
.pausa-linha small { display: block; }
.fita-teste { margin: 14px 0 0; }
/* A resposta da IA se distingue da equipe na própria conversa. */
.selo-ia { background: var(--brand-suave); color: var(--tinta); }

/* Metas: o que falta contra o que o funil prevê. */
.placar-folego { display: inline-block; margin: 8px 0 0; font-size: 12px; font-weight: 600; cursor: default; }
.placar-folego-ok { color: var(--signal); }
.placar-folego-curto { color: var(--danger); }
.filtros-dash { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 16px; }
.filtros-dash label { font-size: 12px; font-weight: 600; color: var(--tinta); }
.filtros-dash select, .filtros-dash input {
  display: block; margin-top: 4px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie);
  font: inherit; font-size: 14px; color: var(--tinta);
}
.dash-detalhado > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.dash-detalhado > summary::before { content: "›"; font-size: 20px; line-height: 1; transition: transform .15s; }
.dash-detalhado[open] > summary::before { transform: rotate(90deg); }
.dash-detalhado > summary::-webkit-details-marker { display: none; }
.dash-detalhado[open] > summary { margin-bottom: 14px; }
.filtros-dash .barra-controles-fim { margin-left: auto; }
.placar-posicao sup, .podio-lugar sup { font-size: .6em; vertical-align: super; line-height: 0; }
[data-tema="escuro"] .placar-linha:nth-child(1) .placar-posicao, [data-tema="escuro"] .podio-1 .podio-lugar { color: #f0c64a; }

/* ==========================================================================
   Neon Lime — a forma (out/2026)
   --------------------------------------------------------------------------
   Por último de propósito: o que está acima continua valendo onde este bloco
   não fala. Três ideias:

   1. Ilhas sobre o papel. A página é --fundo; a lateral, o conteúdo e cada
      cartão são ilhas brancas de canto grande (--raio-cartao), quase sem
      sombra. Uma ou duas ilhas pretas por tela (.destaque, .festa) carregam o
      número que mais importa.
   2. Tudo que se clica e é pequeno é pílula ou círculo. A escolha atual —
      item do menu, aba, botão principal — é preenchida com --acao.
   3. Lime só como marca de "isto": barra cheia, contador, valor em destaque
      dentro da ilha preta. Nunca letra sobre claro.
   ========================================================================== */

body { font-weight: 400; }
strong, b, th { font-weight: 600; }
::selection { background: var(--brand); color: var(--brand-tinta); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acao); }

/* ── Casca: lateral e conteúdo como ilhas ────────────────────────────────── */

@media (min-width: 62rem) {
  .casca { grid-template-columns: 264px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .lateral {
    top: 12px; height: calc(100dvh - 24px);
    border: 0; border-radius: var(--raio-cartao);
    box-shadow: var(--sombra);
  }
  .demo-tarja ~ .casca .lateral { top: 46px; height: calc(100dvh - 58px); }
  main { padding: 0 12px 32px 8px; }
  .barra-topo {
    margin: 0 0 24px; padding: 12px 0 0; min-height: 0;
    background: transparent; border: 0;
  }
}

.lateral { background: var(--superficie); padding: 22px 14px 16px; }
.marca { padding: 0 10px; }
.lateral nav a {
  min-height: 42px; padding: 0 14px;
  border-radius: var(--raio-pilula);
  color: var(--suave); font-size: 14px; font-weight: 500;
}
.lateral nav a:hover { background: var(--superficie-2); color: var(--tinta); }
.lateral nav a[aria-current="page"] {
  background: var(--acao); color: var(--acao-letra);
  font-weight: 500; box-shadow: none;
}
.lateral nav a[aria-current="page"] svg { color: var(--acao-letra); }
.menu-conta { background: var(--brand); color: var(--brand-tinta); font-weight: 600; }
.menu-grupo > summary { font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: none; }

.quem { border-radius: var(--raio); background: var(--superficie-2); border-color: transparent; }
.quem:hover { background: var(--superficie-3); }
.quem-menu, .sino-painel, .mais-acoes-menu, .filtros-soltos {
  border-radius: var(--raio); border-color: var(--linha); box-shadow: var(--sombra-alta);
}

/* Segmentados pequenos da lateral: trilho de papel, escolha preenchida. */
.troca-tema > div, .seletor-unidade form { background: var(--superficie-2); }
.troca-tema button[aria-current="true"],
.seletor-unidade button[aria-pressed="true"] {
  background: var(--acao); color: var(--acao-letra); box-shadow: none;
}

/* Celular: a faixa do topo e a gaveta são as mesmas ilhas, sem moldura. */
.topo-movel { background: var(--superficie); border-bottom: 0; box-shadow: var(--sombra); }
.topo-menu { border-color: var(--linha); }

/* ── Barra do alto: título leve, ferramentas em círculo ──────────────────── */

.barra-topo-trilha { font-size: 13px; font-weight: 500; }
.barra-topo-nome { font-size: 34px; line-height: 40px; font-weight: 400; letter-spacing: -.02em; }
.barra-topo-sub { font-size: 14px; font-style: normal; }
.busca-topo { height: 48px; background: var(--superficie); border-color: var(--linha); }
.busca-topo kbd { background: var(--superficie-2); }
.barra-topo-icone {
  width: 48px; height: 48px;
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha);
}
.barra-topo-icone:hover { background: var(--superficie-2); }
.avatar-topo { width: 48px; height: 48px; background: var(--acao); color: var(--acao-letra); }
@media (max-width: 61.999rem) {
  .barra-topo { background: transparent; border-bottom: 0; }
  .barra-topo-nome { font-size: 26px; line-height: 32px; }
}

/* ── Tipografia: títulos e números leves ─────────────────────────────────── */

.titulo { font-size: 30px; line-height: 36px; font-weight: 400; letter-spacing: -.02em; }
.subtitulo { font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -.01em; }
.apoio { font-size: 14px; }
.numero { font-size: 30px; line-height: 36px; font-weight: 300; letter-spacing: -.02em; }

/* ── Cartões e indicadores ───────────────────────────────────────────────── */

.cartao {
  border: 0; border-radius: var(--raio-cartao);
  padding: 24px; box-shadow: var(--sombra);
}
.cartao.sem-espaco { padding: 0; }
.cartao-login { border-radius: var(--raio-hero); padding: 36px; }
.filtros {
  border: 0; border-radius: var(--raio-cartao);
  padding: 16px 20px; box-shadow: var(--sombra);
}
.indicador { border: 0; border-radius: var(--raio-cartao); padding: 20px; box-shadow: var(--sombra); }
.indicador-atencao { background: var(--brand-suave); box-shadow: none; }

.kpi {
  border: 0; border-radius: var(--raio-cartao);
  padding: 20px 24px; box-shadow: var(--sombra);
}
/* Dentro de um cartão o indicador vira linha interna: papel, canto médio. */
.cartao .kpi { background: var(--superficie-2); border-radius: var(--raio); box-shadow: none; }
a.kpi:hover { box-shadow: inset 0 0 0 1px var(--linha-forte); }
.kpi-icone {
  width: 36px; height: 36px;
  background: var(--superficie); color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linha);
}
.kpi-valor { font-size: 34px; line-height: 40px; font-weight: 300; letter-spacing: -.02em; }
.kpis { gap: 12px; }

/* ── A ilha preta: o número que mais importa na tela ─────────────────────── */

.destaque {
  padding: 32px;
  border-radius: var(--raio-cartao);
  background: var(--inverso); color: var(--sobre-inverso);
}
.destaque::after { display: none; }
.destaque-rotulo { font-size: 14px; color: var(--sobre-inverso-suave); }
.destaque-valor { margin-top: 10px; font-size: 44px; line-height: 48px; font-weight: 300; letter-spacing: -.02em; }
/* A moeda esmaecida, como os centavos no sistema. */
.destaque-valor small { font-size: 18px; font-weight: 400; vertical-align: baseline; color: var(--sobre-inverso-suave); }
.destaque-negativo { color: #ff8a80; }
.destaque-apoio { color: var(--sobre-inverso-suave); font-size: 14px; }
.destaque .btn-escuro { background: var(--brand); color: var(--brand-tinta); }
.destaque .btn-escuro:hover { background: var(--brand-hover); color: var(--brand-tinta); box-shadow: none; }
.destaque .btn-claro { background: var(--inverso-alto); color: var(--sobre-inverso); box-shadow: none; }
.destaque .btn-claro:hover { background: var(--hachura); color: var(--sobre-inverso); }
.festa { border-radius: var(--raio-cartao); }
.festa-titulo { color: var(--brand); font-weight: 500; }

/* ── Botões ──────────────────────────────────────────────────────────────── */

.btn {
  min-height: 44px; padding: 0 22px;
  background: var(--acao); color: var(--acao-letra);
  font-size: 14px; font-weight: 500;
}
.btn:hover { background: var(--acao-hover); color: var(--acao-letra); box-shadow: none; }
.btn-escuro { background: var(--acao); color: var(--acao-letra); }
.btn-escuro:hover { background: var(--acao-hover); color: var(--acao-letra); box-shadow: none; }
.btn-secundario, .btn-claro {
  background: var(--superficie); color: var(--tinta);
  border: 0; box-shadow: inset 0 0 0 1px var(--linha);
}
.btn-secundario:hover, .btn-claro:hover {
  background: var(--superficie-2); color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
}
.btn-whatsapp { background: var(--whatsapp); color: #ffffff; }
.btn-whatsapp:hover { background: var(--whatsapp-hover); color: #ffffff; box-shadow: none; }
.btn-perigo { border: 0; }
.tabela-contatos details.acao > summary { background: var(--acao); color: var(--acao-letra); font-weight: 500; }

/* ── Abas e segmentados: chips de contorno, o escolhido preenchido ───────── */

.abas, .abas-pilula, .troca-visao { gap: 6px; padding: 0; background: transparent; }
.abas a, .abas-pilula a, .troca-visao-item {
  min-height: 40px; padding: 0 18px;
  border-radius: var(--raio-pilula);
  background: var(--superficie); color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linha);
  font-weight: 500;
}
.abas a:hover, .abas-pilula a:hover, .troca-visao-item:hover {
  background: var(--superficie); color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
}
.abas a[aria-current="page"], .abas-pilula a[aria-current="page"], .troca-visao-item.atual {
  background: var(--acao); color: var(--acao-letra); box-shadow: none;
}
.abas-pilula a span { color: inherit; opacity: .7; }
.abas-pilula a[aria-current="page"] span { background: var(--brand); color: var(--brand-tinta); opacity: 1; }
@media (max-width: 40rem) { .abas { border-radius: 0; } }

.ficha { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); font-weight: 500; }
.ficha:hover { box-shadow: inset 0 0 0 1px var(--linha-forte); }
.ficha-ativa { background: var(--brand); color: var(--brand-tinta); box-shadow: none; }
.tag { font-weight: 500; }

/* ── Campos: pílula de contorno; texto longo, canto médio ────────────────── */

.formulario input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.formulario select,
.filtros input:not([type="checkbox"]):not([type="radio"]),
.filtros select,
.filtros-soltos input, .filtros-soltos select,
.filtros-dash input, .filtros-dash select,
.tabela-metas .campo-meta {
  min-height: 46px; padding: 0 18px;
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
}
.formulario textarea {
  padding: 12px 18px;
  border-radius: var(--raio);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus,
.filtros input:focus, .filtros select:focus {
  outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--linha-forte);
}
.formulario label, .filtros label { font-weight: 500; }

/* ── Tabelas ─────────────────────────────────────────────────────────────── */

thead th { background: var(--superficie-2); font-size: 12px; font-weight: 500; letter-spacing: .02em; }
thead th:first-child { border-radius: 14px 0 0 14px; }
thead th:last-child { border-radius: 0 14px 14px 0; }
.cartao.sem-espaco thead th { border-radius: 0; }
tbody tr:hover > td, tbody tr:hover > th { background: var(--superficie-2); }

/* ── Funil: colunas-ilha, cartões de papel ───────────────────────────────── */

.coluna { background: var(--superficie); border-radius: var(--raio-cartao); padding: 14px; box-shadow: var(--sombra); }
.coluna-ganho { background: var(--brand-suave); box-shadow: none; }
.coluna-perda { background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linha); }
.coluna .conta { background: var(--superficie-2); }
.coluna-topo h2 { font-size: 15px; font-weight: 500; }
.cartao-negocio {
  background: var(--superficie-2);
  border: 1px solid transparent; border-radius: var(--raio);
  box-shadow: none;
}
.cartao-negocio:hover { background: var(--superficie); border-color: var(--linha-forte); }
.coluna-perda .cartao-negocio, .coluna-ganho .cartao-negocio { background: var(--superficie); }
.cartao-titulo { font-weight: 500; }
.cartao-valor { font-size: 20px; font-weight: 400; }
.cartao-pe { border-top-color: var(--linha); }
.mover select, .troca-funil select, .barra-controles .troca-funil select { background-color: var(--superficie); font-weight: 500; }

/* ── Progresso: cheio em lime, o que falta em listras ────────────────────── */

.progresso, .barra-pessoa, .g-barra-trilho {
  background: repeating-linear-gradient(-45deg, var(--linha-forte) 0 2px, transparent 2px 7px), var(--superficie-2);
}
.progresso { height: 14px; }
.progresso > span, .barra-pessoa span { background: var(--brand); box-shadow: inset 0 0 0 1px rgba(19, 19, 22, .12); }
.progresso-fino { height: 8px; }
.progresso-fino > span { background: var(--tinta); box-shadow: none; }
.progresso-destaque {
  height: 16px;
  background: repeating-linear-gradient(-45deg, var(--hachura) 0 2px, transparent 2px 7px), var(--inverso-alto);
}
.progresso-destaque > span { background: var(--brand); box-shadow: none; }
.placar-batida .progresso > span { background: var(--brand); }
.g-barra-trilho > span { background: var(--tinta); }

/* Gráficos: série principal na tinta, o ponto escolhido em lime. */
.g-coluna-barra { background: var(--tinta); }
.g-coluna.dica-ativa .g-coluna-barra, .g-coluna:hover .g-coluna-barra {
  background: var(--brand); box-shadow: inset 0 0 0 1px rgba(19, 19, 22, .2);
}
.dica-grafico { border-radius: 12px; background: var(--inverso); color: var(--sobre-inverso); }
.dica-grafico strong { color: var(--brand); }

/* ── Avisos: ponto de cor, não régua lateral ─────────────────────────────── */

.aviso-item, .sino-item { position: relative; border-left: 0; padding-left: 26px; }
.aviso-item { border-radius: 14px; }
.aviso-item::before, .sino-item::before {
  content: ""; position: absolute; left: 10px; top: 17px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--linha-forte);
}
.sino-item::before { top: 15px; }
.aviso-item.aviso-alto::before, .sino-item.sino-alto::before { background: var(--danger); }
.aviso-item.aviso-medio::before, .sino-item.sino-medio::before { background: var(--tinta); }
.indicador-atencao, .placar-eu { box-shadow: none; }
.placar-eu { background: var(--brand-suave); border-color: transparent; }
.placar-linha, .tarefa-item, .podio li { border-radius: var(--raio); }

/* ── Recados ─────────────────────────────────────────────────────────────── */

.recado { border-radius: var(--raio); }
.faixa-alerta { border-radius: var(--raio); }

/* ── Entrada: folha branca, frase grande com o lime marcando ─────────────── */

.entrada-folha { border-radius: 0 var(--raio-hero) var(--raio-hero) 0; }
.entrada-form .titulo { font-weight: 400; }
.entrada-frase { font-weight: 300; }
/* Lime atrás da palavra, e não nela: letra lime sobre claro não se lê. */
.entrada-frase b {
  font-weight: 400;
  padding: 0 .14em;
  border-radius: .22em;
  background: var(--brand); color: var(--brand-tinta);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.entrada-sobretitulo::before { background: var(--brand); box-shadow: inset 0 0 0 1px rgba(19, 19, 22, .25); }
.entrada-etapas li { box-shadow: inset 0 0 0 1px var(--linha); font-weight: 500; }
.entrada-etapas li:first-child { box-shadow: none; }
@media (max-width: 60rem) { .entrada-folha { border-radius: 0; } }

/* ── Negociação: régua de etapas ─────────────────────────────────────────── */

.cabeca-negocio .titulo { font-weight: 400; }
.regua-nome { border-radius: var(--raio-pilula); }
.regua-atual .regua-nome { background: var(--acao); color: var(--acao-letra); border-color: transparent; font-weight: 500; }
.avatar-grande { background: var(--brand); color: var(--brand-tinta); }

/* Fluxo de caixa: entradas em lime (previsto) e verde de apoio (realizado);
   saídas em cinza-claro (previsto) e grafite (pago). Vizinhas se distinguem
   pela luz. */
.grafico-receber-prev { fill: var(--brand); }
.grafico-chave-receber-prev { background: var(--brand); box-shadow: inset 0 0 0 1px rgba(19, 19, 22, .2); }
.grafico-receber-real { fill: var(--brand-2); }
.grafico-chave-receber-real { background: var(--brand-2); }
.grafico-pagar-prev { fill: var(--grafite-200); }
.grafico-chave-pagar-prev { background: var(--grafite-200); }
.grafico-pagar-real { fill: var(--grafite-500); }
.grafico-chave-pagar-real { background: var(--grafite-500); }
.grafico-chave { border-radius: 50%; }

/* ── Contatos: ações da linha e cadastro manual ──────────────────────────
   O menu "⋯" abre dentro da própria linha, empurrando-a para baixo: solto
   por cima, ele era recortado pela rolagem lateral da tabela e a pessoa
   tinha de rolar para achar o que queria. */
.tabela-contatos .acoes-celula { align-items: flex-start; }
.tabela-contatos .mais-acoes-menu {
  position: static; margin-top: 8px; min-width: 12rem;
  box-shadow: none; border-color: var(--linha);
}
.tabela-contatos .excluir-corpo { width: 18rem; white-space: normal; }
.cadastro-manual:not(:target) { display: none; }
.cadastro-manual { scroll-margin-top: 16px; }
/* Excluir continua vermelho: a regra geral do .btn (a ação, preta) vem antes
   no peso e não pode apagar o aviso de perigo. */
.btn.btn-perigo, summary.btn-perigo { background: var(--danger-fundo); color: var(--danger); box-shadow: none; }
.btn.btn-perigo:hover, summary.btn-perigo:hover { background: var(--danger); color: #ffffff; }
[data-tema="escuro"] .btn.btn-perigo:hover, [data-tema="escuro"] summary.btn-perigo:hover { color: #2a0707; }

/* ── O verde nos botões que abrem trabalho novo ──────────────────────────
   Um por tela: o "+" de criar (contato, proposta, lançamento, tarefa) e o
   Entrar. O resto das ações segue preto; verde em tudo deixaria de apontar. */
.btn.btn-lima { background: var(--brand); color: var(--brand-tinta); }
.btn.btn-lima:hover { background: var(--brand-hover); color: var(--brand-tinta); box-shadow: none; }

/* ── Barras de rolagem no padrão do tema ─────────────────────────────────
   Sem dizer ao navegador qual é o tema, a rolagem e os controles nativos
   ficavam claros no tema escuro — uma faixa branca ao lado do menu. O
   color-scheme resolve os nativos; a barra fina, nas cores do sistema. */
:root { color-scheme: light; }
[data-tema="escuro"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]):not([data-tema="escuro"]) { color-scheme: dark; }
}
* { scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--suave); }
::-webkit-scrollbar-corner { background: transparent; }

/* ── Resumo que é botão (details > summary.btn) ──────────────────────────
   `.acao > summary` pinta o texto com a cor de marca, que no claro é preta e
   no escuro é lima — exatamente o fundo do botão. Resultado: "Nova conversa"
   e "Criar negociação" ficavam com o texto invisível. Aqui o texto volta a
   ser o do botão, em cada variante. */
.acao > summary.btn, details > summary.btn { color: var(--acao-letra); font-size: .85rem; font-weight: 500; }
.acao > summary.btn:hover, details > summary.btn:hover { color: var(--acao-letra); }
.acao > summary.btn-secundario, details > summary.btn-secundario { color: var(--tinta); }
.acao > summary.btn-lima, details > summary.btn-lima { color: var(--brand-tinta); }
.acao > summary.btn-perigo, details > summary.btn-perigo { color: var(--danger); }
.acao > summary.btn-perigo:hover, details > summary.btn-perigo:hover { color: #ffffff; }