/* ============================================================
   Imobi CRM — TEMA EDITORIAL  ·  2026-07-27
   Camada ADITIVA (carregada depois do <style> de cada template).
   Voltar ao anterior = trocar o <link> nos templates.

   NAO e o tema anterior "com ajuste": e outra roupagem.
   O que muda de estrutura, nao so de cor:
     · a barra de botoes do topo vira NAVEGACAO LATERAL
       (barra cheia de botao em cima e o que faz parecer
        ferramenta interna; rail lateral le como produto)
     · UMA familia tipografica so, do rotulo ao titulo: a
       hierarquia vem de peso, tamanho e espacamento — nunca
       de um segundo tipo (fonte misturada costura a tela)
     · paleta grafite + marfim + verde profundo; o azul
       generico de SaaS sai de cena
     · colunas do funil perdem a "caixa": viram secoes com
       regua fina, o cartao e que ganha peso
   ============================================================ */

:root {
  /* tinta grafite, nao azul-acinzentado */
  --g-900: #14171c;
  --g-800: #1e2228;
  --g-700: #2f353d;
  --g-600: #4a515b;
  --g-500: #6b737f;
  --g-400: #949ba6;
  --g-300: #c3c8d0;
  --g-200: #e0e3e8;
  --g-100: #eeeff2;

  /* papel marfim, levemente quente */
  --marfim: #f5f3ef;
  --marfim-2: #faf8f5;
  --branco: #ffffff;

  /* acento: verde profundo (imovel/alto padrao), nao azul */
  --cor: #14684a;
  --cor-escura: #0d4d37;
  --cor-clara: #eaf3ef;
  --cor-borda: #c2ddd1;
  --bronze: #8a6a3b;

  --verde: #14684a;
  --verde-claro: #eaf3ef;
  --ambar: #92400e;
  --vermelho: #9f1239;

  /* UMA familia so em toda a interface. A hierarquia vem de peso, tamanho
     e espacamento — nao de um segundo tipo. Misturar serifa com sans
     deixava a tela costurada. */
  --fonte: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --serifa: var(--fonte);   /* mantido so pra nao quebrar referencia antiga */

  --s-1: 0 1px 2px rgba(20,23,28,.045);
  --s-2: 0 1px 2px rgba(20,23,28,.05), 0 6px 16px rgba(20,23,28,.05);
  --s-3: 0 2px 6px rgba(20,23,28,.06), 0 16px 34px rgba(20,23,28,.09);
  --s-4: 0 10px 20px rgba(20,23,28,.09), 0 34px 68px rgba(20,23,28,.16);

  --rail: 246px;
  --mola: cubic-bezier(.2,.8,.25,1);
}

/* ============ BASE ============ */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fonte);
  font-variant-numeric: tabular-nums;
  background: var(--marfim) !important;
  color: var(--g-800);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.004em;
}
::selection { background: rgba(20,104,74,.16); }

* { scrollbar-width: thin; scrollbar-color: var(--g-300) transparent; }
*::-webkit-scrollbar { height: 9px; width: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--g-300); border-radius: 20px;
  border: 3px solid transparent; background-clip: content-box; }

:where(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--cor); outline-offset: 2px; border-radius: 6px;
}

/* ============================================================
   NAVEGACAO LATERAL — o header vira rail, sem tocar no HTML
   ============================================================ */
body:has(header) { padding-left: var(--rail); }

header {
  position: fixed !important; top: 0; left: 0; bottom: 0;
  width: var(--rail); height: 100vh;
  flex-direction: column !important; align-items: stretch !important;
  gap: 3px !important;
  padding: 24px 14px 18px !important;
  overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(180deg, #fbfaf8, var(--marfim-2)) !important;
  border-bottom: 0 !important;
  border-right: 1px solid var(--g-200) !important;
  backdrop-filter: none !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.7) inset, 6px 0 28px rgba(20,23,28,.035) !important;
  z-index: 40;
}

/* marca vira assinatura no topo do rail */
.marca {
  font-family: var(--fonte) !important;
  font-size: 21px !important; font-weight: 700 !important;
  letter-spacing: -.035em !important; color: var(--g-900) !important;
  display: block !important; padding: 0 8px 4px; line-height: 1.15;
}
.marca small {
  display: block; margin: 7px 0 0 0 !important;
  font-weight: 600 !important;
  font-size: 9.5px !important; letter-spacing: .16em !important;
  text-transform: uppercase; color: var(--bronze) !important;
}
/* logo do CLIENTE — so aparece depois do login (a porta de entrada e nossa) */
.marca .logo-cliente {
  display: block; width: 100%; max-width: 178px; height: auto;
  margin: 2px 0 2px -2px;
}
.marca:has(.logo-cliente) { padding-bottom: 0 !important; }
.marca:has(.logo-cliente) small {
  margin-top: 9px !important; color: var(--g-400) !important;
}

/* regua fina embaixo da assinatura */
.marca::after {
  content: ""; display: block; height: 1px; margin: 16px 0 14px;
  background: linear-gradient(90deg, var(--g-300), transparent);
}

/* contador de leads vira bloco editorial */
.kpi {
  padding: 0 8px 14px !important; font-size: 10px !important;
  letter-spacing: .12em; text-transform: uppercase; color: var(--g-400) !important;
}
.kpi b {
  display: block; font-size: 31px !important;
  font-weight: 700; color: var(--g-900) !important; line-height: 1;
  margin-top: 5px; letter-spacing: -.04em;
}

.spacer { flex: 0 0 auto !important; height: 2px; }

/* o bloco de acoes vira a lista de navegacao */
.usuario {
  flex-direction: column !important; align-items: stretch !important;
  gap: 2px !important; font-size: 13px !important;
}
.usuario .btn, .usuario a.btn {
  width: 100%; text-align: left !important;
  padding: 9px 10px !important; border-radius: 8px !important;
  font-size: 13px !important; font-weight: 500 !important;
  background: transparent !important; color: var(--g-600) !important;
  border: 1px solid transparent !important; box-shadow: none !important;
  transition: background .14s, color .14s, padding-left .16s var(--mola);
}
.usuario .btn:hover {
  background: rgba(20,104,74,.06) !important; color: var(--g-900) !important;
  padding-left: 14px !important;
}
/* item ativo: barra verde a esquerda */
.usuario .btn-primary {
  background: var(--cor-clara) !important; color: var(--cor-escura) !important;
  font-weight: 600 !important; border-color: var(--cor-borda) !important;
  box-shadow: inset 3px 0 0 var(--cor) !important;
}
.usuario .btn-primary:hover { background: var(--cor-clara) !important; padding-left: 10px !important; }

/* filtros do rail */
.usuario .toolbar-sel {
  width: 100%; margin-bottom: 3px;
  background: var(--branco) !important; border: 1px solid var(--g-200) !important;
  border-radius: 8px !important; font-size: 12.5px !important;
  font-weight: 500 !important; color: var(--g-700) !important; padding: 9px 10px !important;
}

/* rodape do rail: quem esta logado */
.usuario > span:not(.badge-perfil) {
  order: 90; margin-top: 14px; padding: 12px 10px 0;
  border-top: 1px solid var(--g-200);
  font-size: 12.5px; font-weight: 600; color: var(--g-800);
}
.badge-perfil {
  order: 91; align-self: flex-start; margin: 5px 0 0 10px;
  font-size: 9px !important; letter-spacing: .1em !important;
  padding: 3px 8px !important; border-radius: 4px !important;
  background: transparent !important; color: var(--bronze) !important;
  border: 1px solid #ddd0ba !important;
}
.usuario a[href="/logout"] { order: 99; margin-top: 8px; color: var(--g-400) !important; font-size: 12px !important; }

/* ============ CONTEUDO ============ */
.toolbar { padding: 26px 30px 8px !important; gap: 9px !important; }
.toolbar input {
  border: 1px solid var(--g-200) !important; background: var(--branco) !important;
  border-radius: 9px !important; padding: 11px 14px !important;
  box-shadow: var(--s-1); color: var(--g-800) !important;
}
.toolbar input:focus, .toolbar-sel:focus {
  border-color: var(--cor) !important; box-shadow: 0 0 0 3.5px rgba(20,104,74,.12) !important;
}
.toolbar .btn-primary {
  background: var(--cor) !important; border: 1px solid var(--cor-escura) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 3px 10px rgba(20,104,74,.24) !important;
  border-radius: 9px !important;
}

/* ============ FUNIL: secoes, nao caixas ============ */
.board { padding: 18px 30px 52px !important; gap: 14px !important; }

.col-head {
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--g-200) !important;
  border-radius: 0 !important; padding: 0 2px 9px !important;
  box-shadow: none !important; margin-bottom: 12px;
}
.col-titulo {
  font-size: 10px !important; letter-spacing: .13em !important;
  color: var(--g-500) !important; font-weight: 700 !important; white-space: nowrap;
}
.col-titulo .dot { width: 6px !important; height: 6px !important; box-shadow: none; }
.col-count {
  background: transparent !important; color: var(--g-400) !important;
  border: 0 !important; font-size: 13px !important;
  font-weight: 700 !important; padding: 0 !important; letter-spacing: -.02em;
}
.col-body {
  background: transparent !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 0 !important;
  min-height: 60px;
}
.col-body.drag-over {
  background: rgba(20,104,74,.05) !important;
  outline: 1px dashed rgba(20,104,74,.35) !important; outline-offset: 4px;
  border-radius: 10px !important;
}

/* ============ CARTAO: o peso vem pra ca ============ */
.col-body .card {
  background: var(--branco) !important;
  border: 1px solid var(--g-200) !important; border-left-width: 1px !important;
  border-radius: 12px !important; padding: 14px !important;
  margin-bottom: 11px !important;
  box-shadow: var(--s-1) !important;
  transition: transform .2s var(--mola), box-shadow .2s var(--mola), border-color .2s;
  position: relative; overflow: hidden;
}
/* a cor da etapa vira um fio no topo, nao uma borda grossa a esquerda */
.col-body .card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: currentColor; opacity: .5;
}
.col-body .card:hover {
  transform: translateY(-3px) !important; box-shadow: var(--s-3) !important;
  border-color: var(--g-300) !important;
}
.col-body .card.dragging { opacity: .5 !important; transform: rotate(1.2deg) scale(1.02) !important; box-shadow: var(--s-4) !important; }

.card-nome {
  font-size: 14.5px !important; font-weight: 700 !important;
  color: var(--g-900) !important; letter-spacing: -.025em !important;
  line-height: 1.2 !important; margin-bottom: 7px !important;
}
.card-info { font-size: 11.5px !important; color: var(--g-500) !important; line-height: 1.45; }
.card-resp {
  background: transparent !important; color: var(--g-500) !important;
  border: 0 !important; border-top: 1px solid var(--g-100) !important;
  padding: 7px 0 0 !important; margin-top: 9px !important; border-radius: 0 !important;
  font-size: 10.5px !important; font-weight: 600 !important;
  display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.src-chip {
  background: transparent !important; border: 1px solid var(--g-200) !important;
  color: var(--g-500) !important; border-radius: 4px !important;
  padding: 2px 6px !important; font-size: 9px !important; letter-spacing: .06em !important;
}

/* selos: contorno fino, sem bloco de cor gritando */
.pill {
  border-radius: 4px !important; padding: 2.5px 7px !important;
  font-size: 9.5px !important; letter-spacing: .03em; font-weight: 700 !important;
  background: transparent !important; border: 1px solid;
}
.pill-red { color: var(--vermelho) !important; border-color: #e8c3ce !important; }
.pill-amber { color: var(--ambar) !important; border-color: #e6d3b4 !important; }
.pill-blue { color: var(--cor-escura) !important; border-color: var(--cor-borda) !important; }
.pill-green { color: var(--verde) !important; border-color: var(--cor-borda) !important; }
.pill-strong { background: var(--vermelho) !important; color: #fff !important; border-color: var(--vermelho) !important; }

.temp-sel, .mini-act, .tent-btn {
  border: 1px solid var(--g-200) !important; background: var(--branco) !important;
  border-radius: 7px !important; color: var(--g-600) !important;
  transition: background .14s, border-color .14s, transform .12s var(--mola);
}
.mini-act:hover, .tent-btn:hover { background: var(--g-100) !important; border-color: var(--g-300) !important; }
.mini-act:active, .tent-btn:active { transform: scale(.94); }
.mini-act b { color: var(--cor) !important; }

.card-acts .btn-wpp {
  background: transparent !important; color: var(--cor) !important;
  border: 1px solid var(--cor-borda) !important; box-shadow: none !important;
  padding: 7px 11px !important; font-size: 11.5px !important;
  border-radius: 7px !important; font-weight: 600 !important;
  transition: background .15s, color .15s;
}
.card-acts .btn-wpp:hover { background: var(--cor) !important; color: #fff !important; }

.vazio { color: var(--g-400) !important; font-size: 11.5px !important; padding: 20px 0 !important; }

/* ============ FUNIL LATERAL ============ */
.funil-side { padding: 18px 10px 18px 30px !important; width: 220px !important; }
.funil-card {
  background: var(--branco) !important; border: 1px solid var(--g-200) !important;
  border-radius: 14px !important; padding: 18px 16px !important; box-shadow: var(--s-1) !important;
}
.funil-title {
  font-size: 10px !important; letter-spacing: .12em !important;
  color: var(--g-400) !important; font-weight: 700 !important;
}
.funil-sub { color: var(--g-500) !important; font-size: 11px !important; margin-bottom: 14px !important; }
.funil-conv { border-top: 1px solid var(--g-100) !important; color: var(--g-500) !important; }
.funil-conv b { color: var(--cor) !important; font-size: 15px !important; font-weight: 700; letter-spacing: -.02em; }

/* ============ COLUNAS: largura confortavel + rolagem assumida ============
   Com 8 etapas + o funil, "tudo visivel" em 1440px dava ~115px por coluna —
   nome quebrando, cartao espremido. Aqui a coluna tem largura de leitura e o
   quadro rola na horizontal, com encaixe e uma sombra na borda avisando que
   ha mais. Arrastar continua funcionando: encostou na borda, rola. */
.board {
  scroll-snap-type: x proximity; scroll-padding-left: 30px;
  overscroll-behavior-x: contain;
}
.col {
  min-width: 208px !important; flex: 0 0 208px !important;
  scroll-snap-align: start;
}
.board::after {            /* respiro no fim, pra ultima coluna nao colar na borda */
  content: ""; flex: 0 0 12px;
}
/* sombra na borda direita avisando que ha mais etapas — sem ela o corte
   da ultima coluna parece defeito, e nao "role pro lado" */
.board-wrap, .board { position: relative; }
body:has(.board)::after {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; width: 46px;
  pointer-events: none; z-index: 5;
  background: linear-gradient(90deg, rgba(245,243,239,0), rgba(245,243,239,.92));
}

/* ============ TITULOS E PAINEL ============ */
h1 {
  font-size: 26px !important;
  font-weight: 700 !important; letter-spacing: -.04em !important;
  color: var(--g-900) !important; line-height: 1.15;
}
.sub { color: var(--g-500) !important; font-size: 13px !important; }
.wrap { padding: 30px !important; }

.stat, .online-box, .tabela-wrap {
  background: var(--branco) !important; border: 1px solid var(--g-200) !important;
  border-radius: 14px !important; box-shadow: var(--s-1) !important;
}
.stat { padding: 20px 24px !important; transition: transform .2s var(--mola), box-shadow .2s var(--mola); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--s-2) !important; }
.stat .v {
  font-size: 32px !important;
  font-weight: 700 !important; letter-spacing: -.045em !important;
  color: var(--g-900) !important; -webkit-text-fill-color: initial !important;
  background: none !important; line-height: 1;
}
.stat .l {
  color: var(--g-400) !important; font-size: 10px !important;
  letter-spacing: .1em; text-transform: uppercase; margin-top: 7px !important;
}
.online-titulo { color: var(--g-400) !important; letter-spacing: .12em !important; }
.chip { border-radius: 20px !important; border-color: var(--g-200) !important; font-size: 11.5px !important; }
.chip.on { background: var(--cor-clara) !important; border-color: var(--cor-borda) !important; color: var(--cor-escura) !important; }
.chip.on .bolinha { background: var(--cor) !important; box-shadow: 0 0 0 3px rgba(20,104,74,.16) !important; }

thead th {
  background: var(--marfim-2) !important; color: var(--g-400) !important;
  letter-spacing: .1em !important; border-bottom: 1px solid var(--g-200) !important;
}
th, td { border-bottom: 1px solid var(--g-100) !important; }
tbody tr:hover td { background: rgba(20,104,74,.035) !important; }
td.num { color: var(--g-700) !important; }
td.zero { color: var(--g-300) !important; }
td.total { background: var(--marfim-2) !important; color: var(--g-900) !important; }
td.conv, .uni-val { color: var(--cor) !important; }

/* ============ JANELAS ============ */
.modal-bg { background: rgba(20,23,28,.4) !important; backdrop-filter: blur(3px); }
.modal {
  border-radius: 18px !important; box-shadow: var(--s-4) !important;
  padding: 30px !important; border: 1px solid rgba(255,255,255,.8);
  animation: sobe .26s var(--mola);
}
@keyframes sobe { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.modal h3 {
  font-size: 20px !important; font-weight: 700 !important;
  letter-spacing: -.035em; color: var(--g-900) !important;
}
.modal .m-sub { color: var(--g-500) !important; font-size: 12.5px !important; line-height: 1.6; }
.m-label { color: var(--g-500) !important; font-size: 10px !important; letter-spacing: .1em; text-transform: uppercase; }
.modal input, .modal select, .modal textarea {
  border: 1px solid var(--g-200) !important; border-radius: 9px !important; padding: 11px 12px !important;
}
.modal input:focus, .modal select:focus, .modal textarea:focus {
  border-color: var(--cor) !important; box-shadow: 0 0 0 3.5px rgba(20,104,74,.12) !important;
}
.modal .btn-primary {
  background: var(--cor) !important; border: 1px solid var(--cor-escura) !important;
  box-shadow: 0 2px 8px rgba(20,104,74,.24) !important;
}
.m-fechar { color: var(--g-400) !important; }
.emp-bloco, .eq-linha {
  border: 1px solid var(--g-200) !important; background: var(--marfim-2) !important;
  border-radius: 11px !important; box-shadow: none !important;
}
.emp-nome, .eq-nome { color: var(--g-900) !important; }
.eq-meta { color: var(--g-500) !important; }
.et-mini { border: 1px solid var(--g-200) !important; background: var(--branco) !important; border-radius: 7px !important; }

/* ============ ENTRAR ============ */
body:has(> form.card) {
  background: var(--marfim) !important;
  background-image: radial-gradient(900px 480px at 50% -10%, rgba(20,104,74,.07), transparent 62%) !important;
  padding-left: 0 !important;
}
form.card {
  border-radius: 18px !important; border: 1px solid var(--g-200) !important;
  box-shadow: var(--s-4) !important; padding: 46px 40px !important; max-width: 400px !important;
  animation: sobe .4s var(--mola);
}
form.card .logo {
  font-size: 27px !important; font-weight: 700 !important;
  letter-spacing: -.045em !important; color: var(--g-900) !important;
}
form.card .sub {
  color: var(--bronze) !important; font-size: 9.5px !important;
  letter-spacing: .19em; text-transform: uppercase; margin-bottom: 32px !important;
}
form.card .sub::before, form.card .sub::after { content: "— "; opacity: .55; }
form.card .sub::after { content: " —"; }
form.card label { color: var(--g-500) !important; font-size: 10px !important; letter-spacing: .11em; text-transform: uppercase; }
form.card input {
  border: 1px solid var(--g-200) !important; border-radius: 9px !important;
  background: var(--marfim-2) !important; padding: 13px 14px !important;
}
form.card input:focus {
  border-color: var(--cor) !important; background: var(--branco) !important;
  box-shadow: 0 0 0 3.5px rgba(20,104,74,.12) !important;
}
form.card button {
  background: var(--cor) !important; border-radius: 9px !important;
  font-weight: 600 !important; letter-spacing: .01em;
  box-shadow: 0 2px 10px rgba(20,104,74,.26) !important;
  transition: transform .14s var(--mola), box-shadow .2s var(--mola), background .15s;
}
form.card button:hover { background: var(--cor-escura) !important; transform: translateY(-1px); }
form.card .rodape { color: var(--g-400) !important; }
form.card .erro { background: #fdf2f5 !important; border-color: #e8c3ce !important; color: var(--vermelho) !important; }

/* ============ TELA DO WHATSAPP ============ */
body:has(.qr-box) .card {
  background: var(--branco) !important; border: 1px solid var(--g-200) !important;
  border-radius: 14px !important; box-shadow: var(--s-1) !important; padding: 22px !important;
}
body:has(.qr-box) .card h2 {
  font-size: 10px !important; letter-spacing: .12em; text-transform: uppercase;
  color: var(--g-400) !important; font-weight: 700 !important;
}
.qr-box img { border-radius: 12px !important; box-shadow: var(--s-2) !important; }
.passos li::before { background: var(--cor) !important; box-shadow: none !important; font-weight: 700; }
.spin { border-top-color: var(--cor) !important; }
.estado { border-radius: 6px !important; font-size: 12.5px !important; border-color: var(--g-200) !important; }
.e-on { background: var(--cor-clara) !important; border-color: var(--cor-borda) !important; color: var(--cor-escura) !important; }
.e-on .bolinha { background: var(--cor) !important; box-shadow: 0 0 0 3px rgba(20,104,74,.16) !important; }
.num-ok { color: var(--cor) !important; }

/* ============================================================
   CELULAR — o rail volta a ser barra em cima, em UMA linha
   ============================================================ */
@media (max-width: 1024px) {
  body:has(header) { padding-left: 0 !important; }
  header {
    position: sticky !important; top: 0; left: auto; bottom: auto;
    width: auto !important; height: auto !important;
    flex-direction: row !important; align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important; padding: 10px 15px !important;
    overflow-x: auto; overflow-y: hidden;
    border-right: 0 !important; border-bottom: 1px solid var(--g-200) !important;
    box-shadow: 0 1px 12px rgba(20,23,28,.05) !important;
  }
  .marca { font-size: 18px !important; padding: 0 !important; flex: 0 0 auto; white-space: nowrap; }
  .marca::after { display: none; }
  .marca small { display: none; }
  /* no celular a logo deita na barra: altura fixa, largura livre */
  .marca .logo-cliente { width: auto !important; max-width: none !important;
    height: 26px !important; margin: 0 !important; }
  .kpi { padding: 0 !important; flex: 0 0 auto; white-space: nowrap; font-size: 9px !important; }
  .kpi b { display: inline; font-size: 17px !important; margin: 0 0 0 5px; }
  .spacer { display: none !important; }

  .usuario {
    flex-direction: row !important; align-items: center !important;
    flex-wrap: nowrap !important; gap: 6px !important;
    overflow-x: auto; scrollbar-width: none; flex: 1 1 auto;
  }
  .usuario::-webkit-scrollbar { display: none; }
  .usuario .btn, .usuario a.btn, .usuario .toolbar-sel {
    width: auto !important; flex: 0 0 auto; white-space: nowrap;
    margin: 0 !important; padding: 9px 12px !important;
    border: 1px solid var(--g-200) !important; background: var(--branco) !important;
  }
  .usuario .btn:hover { padding-left: 12px !important; }
  .usuario .btn-primary { box-shadow: none !important; }
  .usuario > span:not(.badge-perfil) {
    order: 0; margin: 0 !important; padding: 0 4px !important;
    border-top: 0 !important; white-space: nowrap; flex: 0 0 auto;
  }
  .badge-perfil { order: 0; margin: 0 !important; align-self: center; flex: 0 0 auto; }
  .usuario a[href="/logout"] { order: 0; margin: 0 !important; }

  .toolbar { padding: 14px 15px 4px !important; }
  .board { padding: 14px 15px 40px !important; }
  .wrap { padding: 18px 15px !important; }
  h1 { font-size: 21px !important; }
  /* o funil volta a ocupar a largura toda (a regra de 220px e so do desktop) */
  .funil-side { width: 100% !important; padding: 12px 15px 0 !important; position: static !important; }
}

@media (max-width: 720px) {
  .board { scroll-snap-type: x mandatory; scroll-padding-left: 15px; }
  .col { scroll-snap-align: start; min-width: 84vw !important; flex: 0 0 84vw !important; }
  /* alvo de toque >= 44px */
  .btn { padding: 11px 15px !important; font-size: 13.5px !important; }
  .btn-sm { padding: 9px 13px !important; }
  .mini-act { padding: 9px 11px !important; }
  .tent-btn { width: 34px !important; height: 34px !important; font-size: 17px !important; }
  .temp-sel { padding: 9px 7px !important; }
  /* 16px trava o zoom automatico do iOS ao focar campo */
  .toolbar input, .toolbar-sel, .modal input, .modal select, .modal textarea { font-size: 16px !important; }
  .card-nome { font-size: 15.5px !important; }
  .eq-form { grid-template-columns: 1fr !important; }
  .eq-linha { flex-wrap: wrap; }
  .eq-acoes { width: 100%; justify-content: flex-end; margin-top: 6px; }
  .board, .wrap { padding-bottom: calc(46px + env(safe-area-inset-bottom)) !important; }
  .modal { padding: 22px !important; }
  .modal h3 { font-size: 18px !important; }
}

@media (max-width: 420px) {
  .col { min-width: 90vw !important; flex: 0 0 90vw !important; }
  form.card { padding: 34px 24px !important; }
  .stat { padding: 16px 18px !important; min-width: 130px !important; }
  .stat .v { font-size: 27px !important; }
}

/* telas largas: conteudo nao estica sem limite */
@media (min-width: 1700px) {
  .board, .toolbar, .wrap {
    padding-left: max(30px, calc((100vw - var(--rail) - 1560px) / 2)) !important;
    padding-right: max(30px, calc((100vw - var(--rail) - 1560px) / 2)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .col-body .card:hover, .stat:hover { transform: none !important; }
}