/* LASTRO — layout do shell e navegação.
   Mobile-first: barra inferior no celular, lateral no desktop.
   Uma estrutura só nos dois casos — ver components/app-nav.js */

.tela {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  /* espaço para a barra inferior não cobrir o último item da lista */
  padding-bottom: calc(var(--space-20) + env(safe-area-inset-bottom));
}

.tela__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* ════════ .linha — item de lista (liderança, território) ════════ */
.linha {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 60px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease);
}
.linha:hover { border-color: var(--border-strong); }
.linha + .linha { margin-top: var(--space-2); }

.linha__corpo { flex: 1; min-width: 0; }
.linha__nome {
  display: block;
  font-weight: var(--fw-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.linha__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.linha__valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ════════ .barra — declarado x lastreado ════════
   A regra de ouro do produto: as duas nunca compartilham cor.
   Ver produto/06-REGRAS-DE-NEGOCIO.md §2 e tokens.css. */
.barra {
  position: relative;
  height: 8px;
  margin-top: var(--space-2);
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.barra__declarado,
.barra__lastreado {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-full);
}
.barra__declarado { background: var(--stage-declarado-fill); }
.barra__lastreado { background: var(--stage-lastreado-fill); }

/* ════════ .fab — ação principal, ao alcance do polegar ════════ */
.fab {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-16) + env(safe-area-inset-bottom));
  z-index: var(--z-dropdown);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-5);
  background: var(--primary);
  color: var(--primary-text);
  border: none;
  border-radius: var(--radius-full);
  font-weight: var(--fw-strong);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 48rem) {
  .fab { bottom: var(--space-6); }
}

/* ════════ .kpi — números do painel ════════ */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.kpi__n {
  display: block;
  font-size: var(--text-3xl);
  font-weight: var(--fw-strong);
  letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.kpi__n--lastreado { color: var(--lastreado); }
.kpi__n--declarado { color: var(--declarado); }
.kpi__n--vazio     { color: var(--text-subtle); }
.kpi__r {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--fw-strong);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════
   DESKTOP — a partir de 48rem
   No celular a tela é uma coluna e a navegação fica no polegar.
   No desktop sobra largura: a barra ganha identidade e os números
   viram cartões, para o painel ser lido de relance e não linha a linha.
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 48rem) {
  .tela { padding: var(--space-8) var(--space-6) var(--space-16); }

  .tela__topo { margin-bottom: var(--space-6); }
  .section-header__title { font-size: var(--text-3xl); }

  /* Números soltos numa tela larga viram texto disperso. Com moldura
     e fundo eles lêem como instrumento. */
  .kpis {
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
  .kpis > div {
    background: var(--bg);
    padding: var(--space-4) var(--space-5) var(--space-5);
  }

  .linha { min-height: 64px; padding: var(--space-4) var(--space-5); }
  .linha + .linha { margin-top: var(--space-2); }

  /* A barra fica fina demais quando esticada por 900px. */
  .barra { height: 10px; }
}

/* ════════ linha de território no painel ════════
   Estava com o valor em nowrap e uma linha longa ("9.800 de 14.200 · meta
   22.000"). Num aparelho de 360px isso empurrava a linha para fora da tela.
   Agora o valor quebra para baixo do nome quando não cabe ao lado. */
.linha--bloco {
  display: block;
  cursor: default;
}
.linha--bloco:hover { border-color: var(--border); }

.terr__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}
.terr__topo .linha__nome {
  white-space: normal;
  overflow: visible;
  flex: 1 1 12rem;
}
.terr__valor {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: normal;
}
.terr__valor strong { color: var(--lastreado); }

/* O selo não pode empurrar o nome para fora quando o território tem
   nome comprido e dois alertas ao mesmo tempo. */
.terr__topo .badge { vertical-align: middle; }

/* ════════════════════════════════════════════════════════════════
   NAVEGAÇÃO — components/app-nav.js. Redesenho de 04/09/2026.
   Celular: barra inferior com até quatro itens e "Mais" para o resto.
   Computador (a partir de 56rem): lateral fixa, agrupada, com a pessoa
   e o Sair embaixo. Uma marcação só; o que muda é isto aqui.
   ════════════════════════════════════════════════════════════════ */

/* ── celular (padrão) ── */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-wrap: wrap;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav__marca, .nav__rotulo, .nav__pe { display: none; }
.nav__grupos, .nav__grupo { display: contents; }

.nav__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-1);
  color: var(--text-muted);
  background: none;
  border: 0;
  text-decoration: none;
  font-size: 11px;
  font-weight: var(--fw-strong);
  transition: color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.nav__item svg { width: 20px; height: 20px; stroke-width: 1.75; }
.nav__item--ativo { color: var(--primary); }
.nav__item:hover { color: var(--text); }
.nav__item--ativo:hover { color: var(--primary); }

/* O que não coube na barra fica escondido até o "Mais" abrir. Aberto, os
   extras sobem numa faixa própria, acima da barra. */
.nav__item--extra { display: none; }
.nav--aberto .nav__item--extra {
  display: flex;
  flex: 1 1 33.333%;
  order: -1;
  min-height: 64px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-muted);
}
/* Aberto, a pessoa e o Sair também sobem: no celular não há lateral para
   mostrá-los, e "como saio?" era pergunta de campo. */
.nav--aberto .nav__pe {
  display: flex;
  order: -2;
  flex: 1 1 100%;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-muted);
}
.nav--aberto .nav__quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nav--aberto .nav__quem strong { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav--aberto .nav__quem small { font-size: var(--text-xs); color: var(--text-muted); }
.nav--aberto .nav__sair { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-md); background: none; color: var(--text-muted); }
.nav--aberto .nav__sair svg { width: 20px; height: 20px; }
/* Quebra de linha depois dos extras: sem isto, o que sobra da última linha
   deles é preenchido por itens da barra principal (foto do iPhone, 05/09). */
.nav--aberto::after { content: ''; order: -1; flex: 1 1 100%; height: 0; }
/* O botão flutuante disputa o canto com o painel aberto: some enquanto isso. */
body.nav-aberta .fab { display: none; }
.nav__mais[aria-expanded="true"] { color: var(--primary); }

.nav__sino {
  position: absolute;
  top: 4px;
  left: calc(50% + 6px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: var(--text-inverted);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-align: center;
}

/* ── computador ── */
@media (min-width: 56rem) {
  .nav {
    top: 0;
    bottom: 0;
    right: auto;
    width: 15rem;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-3) var(--space-4);
    border-top: 0;
    border-right: 1px solid var(--border);
    overflow-y: auto;
  }
  /* Marca ADG Base + slogan (produto/09-MARCA.md). A versão branca só
     aparece sobre o azul-marinho do painel (painel.css). */
  .nav__marca {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 var(--space-3) var(--space-4);
  }
  .nav__logo { display: block; width: 8.5rem; height: auto; }
  .nav__logo--branca { display: none; }
  .nav__slogan {
    display: block;
    margin-top: var(--space-2);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--text-muted);
  }
  .nav__cliente { display: block; margin-top: var(--space-4); width: 100%; }
  .nav__grupos { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
  .nav__grupo { display: flex; flex-direction: column; gap: 2px; }
  .nav__rotulo {
    display: block;
    padding: 0 var(--space-3);
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-subtle);
  }
  .nav__item, .nav__item--extra, .nav--aberto .nav__item--extra {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    order: 0;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    font-size: var(--text-sm);
  }
  .nav__item:hover { background: var(--bg-muted); color: var(--text); }
  .nav__item--ativo, .nav__item--ativo:hover { background: var(--primary-soft); color: var(--primary); }
  .nav__mais { display: none; }
  .nav__sino { position: static; margin-left: auto; }

  .nav__pe {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2) 0;
    border-top: 1px solid var(--border);
  }
  .nav__quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .nav__quem strong { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav__quem small { font-size: var(--text-xs); color: var(--text-muted); }
  .nav__sair {
    display: flex;
    flex: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-muted);
  }
  .nav__sair svg { width: 18px; height: 18px; }
  .nav__sair:hover { color: var(--danger); background: var(--bg-muted); }

  /* O conteúdo começa depois da lateral. Só quando há navegação: a tela de
     entrada não tem. */
  body.com-nav #app-root { padding-left: 15rem; }
}

/* ── Marca do cliente na navegação (docs/37) ──
   A faixa usa as variáveis --faixa-1/2/3 que o tema do cliente define no
   :root. Sem tema, a faixa nem é desenhada. */
.nav__faixa {
  display: none;
  height: 6px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.nav__faixa i { display: block; flex: 1; }
.nav__faixa i:nth-child(1) { background: var(--faixa-1, var(--primary)); }
.nav__faixa i:nth-child(2) { background: var(--faixa-2, var(--bg-muted)); }
.nav__faixa i:nth-child(3) { background: var(--faixa-3, var(--primary)); }
.nav__marca-nome {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-strong);
  line-height: 1.2;
  white-space: normal;
  text-wrap: balance;
}
@media (min-width: 56rem) {
  .nav__faixa { display: flex; width: 100%; }
}

/* Bloco regional no pé da lateral: só o painel mostra (painel.css). */
.nav__regiao { display: none; }