/* css/casca.css: a casca do app. Área: base.
   >= 1024: sidebar 264 px (marca, busca, saudação, mini-saldo, 7 abas, filtros da aba Leads, Sair).
   <  1024: topbar 56 px (marca, lupa, chip do saldo, menu do usuário) + NAV INFERIOR fixa com as 7 abas.
   Os .tab-btn[data-tab] existem nas DUAS navs; só uma fica visível por largura (os testes usam :visible).
   Breakpoint 1024 casado com posicionarFiltros() em js/casca.js. Também: boot (esqueleto e erro).
   V2: .nav-ind (indicador que desliza até a aba; --i = índice), .tab-badge (número que pula) e a
   troca de aba (a casca fica parada, o conteúdo desliza; .painel-saindo no fim do arquivo). */

/* ---------- boot ---------- */
#loading-screen { min-height: 100vh; min-height: 100dvh; }

.boot { display: flex; min-height: 100vh; min-height: 100dvh; }

.boot-side { display: none; }

.boot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.boot-top { height: var(--topbar-h); border-bottom: 1px solid var(--line); background: var(--bg-2); display: flex; align-items: center; padding: 0 var(--sp-4); }

.boot-corpo { padding: var(--sp-5) var(--sp-4); display: grid; gap: var(--sp-4); max-width: 1240px; width: 100%; margin: 0 auto; }

.boot-erro { flex: 1; display: grid; place-items: center; padding: var(--sp-6) var(--sp-4); }

.boot-erro .estado { max-width: 460px; }

@media (min-width: 1024px) {
  .boot-side { display: block; width: var(--sidebar-w); flex: none; background: var(--bg-2); border-right: 1px solid var(--line); padding: var(--sp-6) var(--sp-5); }
  .boot-side > * { margin-bottom: 18px; }
  .boot-top { display: none; }
  .boot-corpo { padding: var(--sp-7) var(--sp-7); }
}

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; align-items: stretch; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tab-btn {
  background: none; border: 0; cursor: pointer; color: var(--text-2);
  font-family: var(--f-text); font-weight: 600; position: relative;
  transition: color var(--dur-1), background-color var(--dur-1), transform var(--dur-2) var(--ease-mola);
}

.tab-btn:hover { color: var(--text); }

.tab-ico { display: inline-grid; place-items: center; position: relative; }

.tab-ico svg { width: 22px; height: 22px; }

.tab-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex: none;
  box-shadow: 0 0 0 2px var(--bg-2);
}

/* número no ícone da aba (casca.badgeAba / pulaBadge) */
.tab-badge {
  position: absolute; top: -5px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--primary); color: var(--primary-ink); box-shadow: 0 0 0 2px var(--bg-2);
  font: 800 10.5px/1 var(--f-display); font-variant-numeric: tabular-nums; pointer-events: none;
}

/* indicador da aba ativa: um só elemento por nav que DESLIZA (--i = índice da aba) */
.nav-ind { position: absolute; pointer-events: none; transition: transform var(--dur-3) var(--ease-mola); }

.nav-sem-anim .nav-ind { transition: none !important; }

/* ---------- sidebar (desktop) ---------- */
.sidebar { display: none; }

/* ---------- topbar (celular) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-2);
  height: calc(var(--topbar-h) + var(--safe-t)); padding: var(--safe-t) var(--sp-3) 0 var(--sp-4);
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}

.topbar .brand { font-size: var(--t-18); }

.topbar-dir { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }

.topbar-busca { border-color: transparent; border-radius: var(--r-pill); }

.topbar-busca:hover { border-color: var(--line); }

/* chip do saldo em duas linhas (valor em cima, "a receber" embaixo): cabe com a lupa em 360 px */
.saldo-chip {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  min-height: var(--alvo); min-width: 0; padding: 0 14px 0 24px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--text-3); font-size: 10.5px; font-weight: 600; line-height: 1.1; cursor: pointer;
  white-space: nowrap; box-shadow: var(--fio); transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-mola);
}

.saldo-chip:hover { border-color: var(--line-2); color: var(--text-2); }

.saldo-chip:active { transform: scale(.97); }

.saldo-chip-valor { font-family: var(--f-display); font-size: var(--t-14); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }

.saldo-chip .dot { position: absolute; left: 11px; top: 50%; margin-top: -4px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.avatar-btn { border-radius: var(--r-pill); border-color: var(--line); padding: 0; }

.user-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-3); color: var(--text);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-16); line-height: 1;
}

.avatar-btn .user-avatar { width: 34px; height: 34px; font-size: var(--t-14); }

/* menu do usuário (celular) */
.menu-usuario {
  position: fixed; z-index: 60; top: calc(var(--topbar-h) + var(--safe-t) + 6px); right: 12px;
  width: min(280px, calc(100vw - 24px)); padding: var(--sp-2);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px;
}

.menu-usuario-quem { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-1); }

.menu-usuario-tx { display: flex; flex-direction: column; min-width: 0; }

.menu-usuario-nome { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu-usuario-papel { font-size: var(--t-12); color: var(--text-3); }

.menu-item {
  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--alvo); padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); text-decoration: none;
  font-size: var(--t-14); font-weight: 600; cursor: pointer; text-align: left; width: 100%;
  transition: background-color var(--dur-1), transform var(--dur-2) var(--ease-mola);
}

.menu-item:hover { background: var(--surface-3); }

.menu-item svg { width: 20px; height: 20px; color: var(--text-2); }

.menu-item.perigo { color: var(--danger); }

.menu-item.perigo svg { color: var(--danger); }

/* ---------- nav inferior (celular) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: stretch;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--bg-2); border-top: 1px solid var(--line);
}

.bottom-nav .tab-btn {
  flex: 1 1 0; min-width: 0; height: var(--nav-h);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
  padding: 7px 0 0; color: var(--text-3);
}

.bottom-nav .tab-rot { font-size: 10.5px; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }

.bottom-nav .tab-ico { width: 44px; height: 28px; border-radius: var(--r-pill); transition: color var(--dur-2); }

.bottom-nav .tab-btn.active { color: var(--text); }

.bottom-nav .tab-btn.active .tab-ico { color: var(--accent); }

.bottom-nav .tab-dot { position: absolute; top: 2px; right: 8px; }

/* indicador: pílula atrás do ícone + fio no topo, 1/7 da largura, desliza por --i */
.bottom-nav { --i: 0; --n: 7; }

.bottom-nav .nav-ind { left: 0; top: -1px; width: calc(100% / var(--n)); height: 36px; transform: translateX(calc(var(--i) * 100%)); }

.bottom-nav .nav-ind::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 24px; height: 2px; margin-left: -12px;
  border-radius: 0 0 2px 2px; background: var(--accent);
}

.bottom-nav .nav-ind::after {
  content: ''; position: absolute; top: 8px; left: 50%; width: 44px; height: 28px; margin-left: -22px;
  border-radius: var(--r-pill); background: var(--accent-soft);
}

/* ---------- conteúdo ---------- */
/* overflow-x: clip: o painel que entra deslizando (translateX) não pode criar rolagem lateral; no
   celular isso fazia o Chrome alargar a janela e a nav fixa descia uns 26 px durante a troca */
.content-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-4); overflow-x: clip; }

/* "Ir para o conteúdo": 1º foco do teclado, só aparece focado (casca.js leva o foco ao título) */
.pular-conteudo {
  position: fixed; z-index: 500; top: calc(8px + var(--safe-t)); left: 8px; padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--text); font-weight: 600; text-decoration: none;
  box-shadow: var(--fio), var(--sombra-flutua); transform: translateY(-160%); opacity: 0; pointer-events: none;
}

.pular-conteudo:focus-visible, .pular-conteudo:focus { transform: none; opacity: 1; pointer-events: auto; }

.content-title:focus { outline: none; }

.content-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.content-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5) 0 var(--sp-4); flex-wrap: wrap;
}

.content-header-left { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; }

.content-title { font-family: var(--f-display); font-size: var(--t-22); font-weight: 700; letter-spacing: -.02em; color: var(--text); }

.content-meta { font-size: var(--t-13); color: var(--text-3); font-variant-numeric: tabular-nums; }

.content-header-right select { min-height: var(--alvo); padding: 8px 12px; font-size: var(--t-14); background: var(--surface); color: var(--text-2); }

/* folga embaixo: a nav fixa nunca cobre o fim da tela */
.content { padding: 0 0 calc(var(--nav-h) + var(--safe-b) + var(--sp-7)); }

/* com a nav inferior, o toast sobe pra ficar acima dela */
body[data-page="app"] .toast { bottom: calc(var(--nav-h) + var(--safe-b) + 12px); }

/* =====================================================================
   DESKTOP (>= 1024px): sidebar fixa à esquerda + conteúdo
   ===================================================================== */
@media (min-width: 1024px) {
  .topbar, .bottom-nav, .menu-usuario { display: none !important; }

  .sidebar {
    display: flex; flex-direction: column; gap: var(--sp-5);
    width: var(--sidebar-w); flex-shrink: 0;
    position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
    background: var(--bg-2); border-right: 1px solid var(--line);
    padding: var(--sp-6) var(--sp-4) var(--sp-4);
  }

  .sidebar-brand { display: flex; flex-direction: column; gap: 4px; padding: 0 var(--sp-2); }
  .sidebar-brand .brand { font-size: var(--t-22); }
  .sidebar-by { font-size: var(--t-12); color: var(--text-3); padding-left: 18px; }

  .sidebar-user { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-2); }
  .user-info { min-width: 0; }
  .sidebar .user-nome { font-weight: 700; font-size: var(--t-14); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-role { font-size: var(--t-12); color: var(--text-3); margin-top: 1px; }

  .sidebar-saldo {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-3);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: var(--sp-3) var(--sp-4) var(--sp-4); text-align: left; cursor: pointer; color: inherit;
    box-shadow: var(--fio); transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-mola);
  }
  .sidebar-saldo:active { transform: scale(.985); }
  .sidebar-saldo:hover { border-color: var(--line-2); }
  .mini-saldo-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mini-saldo-item.destaque { grid-column: 1 / -1; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
  .mini-saldo-label { font-size: var(--t-12); color: var(--text-3); display: flex; align-items: center; gap: 6px; }
  .mini-saldo-valor { font-family: var(--f-display); color: var(--text); font-weight: 700; font-size: var(--t-14); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mini-saldo-item.destaque .mini-saldo-valor { font-size: var(--t-22); letter-spacing: -.02em; }
  .dot-pendente { background: var(--warn); }
  .dot-receber { background: var(--accent); }
  .dot-pago { background: var(--primary); }

  .sidebar-nav { display: flex; flex-direction: column; gap: 2px; position: relative; --i: 0; }
  .sidebar-nav .tab-btn {
    display: flex; align-items: center; gap: var(--sp-3); text-align: left; width: 100%;
    height: var(--alvo); padding: 0 var(--sp-3); border-radius: var(--r-sm); font-size: var(--t-14);
  }
  .sidebar-nav .tab-rot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-nav .tab-ico svg { width: 20px; height: 20px; }
  .sidebar-nav .tab-ico { color: var(--text-3); transition: color var(--dur-2); }
  .sidebar-nav .tab-btn:hover:not(.active) { background: var(--surface); color: var(--text); }
  .sidebar-nav .tab-btn.active { color: var(--text); }
  .sidebar-nav .tab-btn.active .tab-ico { color: var(--accent); }
  .sidebar-nav .tab-dot { margin-left: auto; }
  .sidebar-nav .tab-badge { top: -6px; right: -10px; }
  /* indicador: fundo + barra na borda, desliza de aba em aba (44 px + 2 px de vão) */
  .sidebar-nav .nav-ind {
    left: 0; right: 0; top: 0; height: var(--alvo); border-radius: var(--r-sm); background: var(--accent-soft);
    transform: translateY(calc(var(--i) * (var(--alvo) + 2px)));
  }
  .sidebar-nav .nav-ind::before {
    content: ''; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
  }

  /* busca (abre a paleta) e saudação */
  .sidebar-busca {
    display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--alvo); padding: 0 8px 0 12px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text-3);
    font-size: var(--t-13); cursor: pointer; box-shadow: var(--fio); transition: border-color var(--dur-2), color var(--dur-2);
  }
  .sidebar-busca:hover { border-color: var(--line-2); color: var(--text-2); }
  .sidebar-busca svg { width: 18px; height: 18px; }
  .sidebar-busca-tx { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar-busca-kbd { display: inline-flex; }
  .user-ola { font-size: var(--t-12); color: var(--text-3); line-height: 1.2; }

  .sidebar-filters-slot:empty { display: none; }
  .sidebar-filters-slot .filters-wrap { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
  .sidebar-filters-slot .filters-toggle { display: none; }
  .sidebar-filters-slot .filters { display: flex !important; }

  .sidebar-bottom { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
  .sidebar-bottom .menu-item { color: var(--text-2); }
  .sidebar-bottom .menu-item:hover { color: var(--text); background: var(--surface); }

  .content-wrap { padding: 0 var(--sp-7); }
  .content-header { padding: var(--sp-7) 0 var(--sp-5); }
  .content-title { font-size: var(--t-28); }
  .content { padding-bottom: var(--sp-8); }
  /* centrada na coluna do conteúdo, como a faixa "Sem conexão" (o modo ligação ocupa a janela toda) */
  body[data-page="app"] .toast { bottom: 24px; }
  html:not(.foco-on) body[data-page="app"] .toast { left: var(--sidebar-w); }
}

/* =====================================================================
   CELULAR (< 1024px): filtros em painel colapsável dentro da aba Leads
   ===================================================================== */
@media (max-width: 1023.98px) {
  .filters-mobile-slot:empty { display: none; }
  .filters-mobile-slot { margin-bottom: var(--sp-4); }
  .filters-mobile-slot .filters-toggle { display: flex; }
  .filters-mobile-slot .filters { display: none; margin-top: var(--sp-2); }
  .filters-mobile-slot .filters-wrap.open .filters { display: flex; }
}

@media (max-width: 340px) {
  .content-title { font-size: var(--t-18); }
  .saldo-chip-rot { display: none; }
}

/* =====================================================================
   TROCA DE ABA (js/casca.js mostrarAba): a casca fica parada; o painel velho some na hora e o novo
   entra deslizando pelo lado da aba (ordem da nav). Web Animations e não View Transition: durante
   uma VT o Chrome manda TODO clique pro <html> (medido: o clique espera a transição inteira).
   ===================================================================== */