/* ============================================================
   BASE — este arquivo descreve o CELULAR e NAO CONTEM @media.
   O desktop entra em desktop.css, por min-width, e so acrescenta.
   Se uma regra de celular aparecer em desktop.css, ou um @media aparecer
   aqui, a inversao mobile-first foi quebrada. O costa-crm fez o contrario:
   4.559 linhas de style.css desktop com 342 de mobile.css corrigindo por cima.
============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: var(--t-corpo)/var(--lh-corpo) var(--fonte);
}

/* ------------------------------------------------------------------------
   O APP E UMA COLUNA DE ALTURA FIXA, e quem rola e o miolo.

   Antes o cabecalho e a barra inferior eram `position: fixed` e o corpo
   compensava com `padding-bottom`. Isso obriga toda area rolavel interna a
   saber, em numero, quanto ha de barra acima e abaixo dela — e foi assim que o
   quadro do funil terminou POR BAIXO da navegacao: `calc(100dvh - 330px)`
   descontava 31px a menos, e os ultimos 32px de cada coluna ficavam sob a
   barra. Tocar num cartao ali disparava o botao "Leads": o cirurgiao tocava no
   lead e o app trocava de tela.

   Com a coluna flex, ninguem calcula nada. O cabecalho e a barra ocupam o que
   ocupam, o miolo recebe o resto, e uma area interna que peca `flex: 1` para
   dentro do miolo cabe exatamente — hoje, e depois de qualquer mudanca de
   altura das barras.

   `:not([hidden])` e obrigatorio: `#appRoot` e seletor de ID e venceria o
   `[hidden]` que esconde o app antes do login.
------------------------------------------------------------------------- */
#appRoot:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

h1, h2, h3 { margin: 0; font-size: var(--t-titulo); line-height: var(--lh-titulo); }

a { color: var(--acao); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Foco visivel sempre. Ninguem navega isso de teclado no celular, mas o Joao e
   a Thamara vao usar no desktop e tab sem anel visivel e ferramenta hostil. */
:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }

/* --- cabecalho: a UNICA aparicao da marca ------------------------------
   Fica pequeno de proposito. Ferramenta que se abre dez vezes por dia nao
   precisa de logo grande — precisa de conteudo acima da dobra. */
.cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 var(--e4);
  border-bottom: 1px solid var(--borda);
  background: var(--fundo);
  /* Item da coluna flex, nao mais `sticky`: numa coluna de altura fixa ele ja
     esta sempre visivel, e `sticky` so faria sentido se a PAGINA rolasse. */
  flex: 0 0 auto;
}
/* A marca e o SIMBOLO, sozinho, em preto. Sem o nome escrito.

   Era o nome em Noxlock. Trocado a pedido: o simbolo sozinho e mais silencioso
   numa ferramenta que a pessoa abre dez vezes por dia — ela ja sabe onde esta, e
   o nome repetido no topo de toda tela nao informa nada. O `alt` guarda o nome
   para leitor de tela e para quando a imagem nao carregar. */
.marca {
  display: block;
  width: 28px; height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* No login ela pode respirar: e a unica coisa na tela alem dos dois campos. */
.marca-login {
  width: 64px; height: 64px;
  margin-bottom: var(--e6);
}
/* O nome pode ser longo ("Rigoberto Rodrigues") e a 375px ele encostava na
   marca sem respiro. A marca nao encolhe; o nome corta com reticencia. */
.marca { flex: 0 0 auto; }
.cabecalho .usuario {
  display: flex; align-items: center; gap: var(--e2);
  min-width: 0; margin-left: var(--e3);
  font-size: var(--t-apoio); color: var(--texto-apoio);
}
.cabecalho .usuario #usuarioNome {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- barra inferior de navegacao ---------------------------------------
   No alcance do polegar. Os destinos sao montados por nav.js conforme o papel. */
.barra-inferior {
  /* `order: 3` porque no HTML ela vem ANTES do <main>, e visualmente vai depois.
     A ordem do documento poe a navegacao cedo para quem usa teclado e leitor de
     tela; a ordem visual poe no alcance do polegar. */
  order: 3; flex: 0 0 auto;
  display: flex;
  border-top: 1px solid var(--borda);
  background: var(--fundo);
}
.barra-inferior button {
  flex: 1; min-height: var(--toque);
  border: 0; background: none; cursor: pointer;
  font: var(--t-rotulo)/var(--lh-rotulo) var(--fonte);
  color: var(--texto-apoio);
}
.barra-inferior button[aria-current="page"] {
  color: var(--acao); font-weight: 700;
  box-shadow: inset 0 2px 0 var(--acao);
}

/* O miolo e o unico que rola. Ele recebe a altura que sobra das barras, e
   `min-height: 0` e o que permite encolher abaixo do conteudo — sem isso um
   filho flex tem `min-height: auto` e a coluna estoura a tela em silencio. */
main { order: 2; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--e4); }

.tela[hidden] { display: none; }

.titulo-tela { margin-bottom: var(--e4); }
.vazio { color: var(--texto-apoio); padding: var(--e5) 0; text-align: center; }