/* ===========================================================================
   Grazi 360 — protótipo visual (frentes C01 → C01.2-2)
   Ambiente do CLIENTE da GR7. Não é o Grazi Monitor administrativo.

   O nome de trabalho era "Central Grazi" até a C01.2-2. O arquivo continua
   `central.css` e a pasta continua `central-grazi/`: caminho técnico não
   acompanha nome comercial.

   Direção visual, em uma frase: a Central distingue tipograficamente QUEM
   está falando. O que vem de fora (fato apurado, com fonte) é composto em
   monoespaçada, como um cupom; o que a Grazi conclui e recomenda é composto
   na voz da casa, em sans. A régua vertical da "trilha" reforça isso: sólida
   no fato, TRACEJADA na leitura (conclusão não é fato) e cheia na ação.

   Paleta PROVISÓRIA: o repositório não versiona identidade visual da GR7
   (nenhum hex, logotipo ou paleta em docs/ ou perfis/). A GR7 usa azul, e a
   C01.2 tornou o azul a cor principal da Central; o verde recuou para
   significado (em andamento, apoiado). Os tokens abaixo são o único ponto de
   troca — ajustar `:root` recolore a Central inteira, sem cor solta no meio
   das regras.
   =========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Superfícies — off-white de raiz fria, sem amarelado */
  --papel:          #f5f7f9;
  --superficie:     #ffffff;
  --superficie-2:   #fafbfc;

  /* Tinta — quase-preto com raiz azul, nunca preto puro */
  --tinta:          #151c26;
  --tinta-media:    #3c4756;
  --tinta-fraca:    #68748a;

  --linha:          #e1e6ed;
  --linha-forte:    #c4cdd9;

  /* ---- Cor principal: AZUL (C01.2) ------------------------------------
     A GR7 usa azul. O azul carrega marca, navegação, ação principal, links
     e a voz da Grazi (hero e régua de recomendação da trilha).
     Antes estes papéis eram do verde `--cedro`, que ficou grande demais na
     tela; o verde recuou para significado, não para identidade. */
  --azul:           #14406b;
  --azul-vivo:      #1d5a92;
  --azul-veu:       #e8f0f7;

  /* ---- Cores semânticas ----------------------------------------------
     Cada uma diz UMA coisa, e só. Se uma cor precisar ser explicada, ela
     está no lugar errado.
       verde    → em andamento, positivo, apoiado
       vermelho → atraso e criticidade
       ocre     → atenção e pendência
       cinza    → concluído e neutro (a ausência de cor é o recado) */
  --verde:          #1a6b4a;
  --verde-vivo:     #22855c;
  --verde-veu:      #e6f2ec;

  --brasa:          #b03424;   /* atraso, prioridade alta */
  --brasa-veu:      #fceeec;
  --ocre:           #8a6410;   /* atenção, pendência */
  --ocre-veu:       #faf3e0;

  --neutro:         #7b8798;   /* concluído, agendado */
  --neutro-veu:     #eef1f5;

  /* ---- Superfícies de marca e o que se escreve sobre elas --------------
     O hero e a tarja são as duas superfícies escuras da Central. Os valores
     viviam soltos nas regras — inclusive o gradiente do hero, que é a cor
     mais identitária da tela inteira. Aqui, trocar a marca é trocar este
     bloco, e nada mais. */
  --marca-hero-1:      #1a4d7c;
  --marca-hero-2:      #123a5e;
  --marca-hero-3:      #0f3050;
  --sobre-marca:       #ffffff;   /* texto sobre azul cheio */
  --sobre-marca-forte: #e9f0f7;   /* texto corrido sobre o hero */
  --sobre-marca-suave: rgba(233, 240, 247, 0.65);   /* rótulo e assinatura */

  /* Véu do modal — derivado da tinta, não um cinza qualquer. */
  --veu-modal: rgba(14, 20, 30, 0.45);

  /* Tipografia — display com parcimônia, mono para dado apurado */
  --display: "Bricolage Grotesque", "Segoe UI Variable Display", "Segoe UI",
             system-ui, sans-serif;
  --corpo:   "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --dados:   "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Escala */
  --t-micro: 0.6875rem;
  --t-mini:  0.75rem;
  --t-peq:   0.8125rem;
  --t-base:  0.9375rem;
  --t-med:   1.0625rem;
  --t-gr:    1.375rem;
  --t-xg:    1.75rem;
  --t-xxg:   2.25rem;

  --raio:      10px;
  --raio-peq:  6px;
  --raio-gr:   16px;

  --sombra-1: 0 1px 2px rgba(21, 28, 38, 0.04);
  --sombra-2: 0 2px 10px rgba(21, 28, 38, 0.06);
  --sombra-3: 0 8px 28px rgba(21, 28, 38, 0.12);

  --largura-leitura: 46rem;
  --altura-abas: 4.25rem;
}

/* NÃO virou token, de propósito: `rgba(255, 255, 255, ...)` com opacidade
   baixa. São véus estruturais desenhados sobre o hero — o anel decorativo, a
   linha da assinatura, o fundo do selo. Não carregam identidade (só clareiam
   o que está atrás) e mudariam junto com qualquer marca nova sem precisar de
   ajuste. Tokenizar transparência de branco puro seria abstração sem leitor.

   Guard: `tests_css_tokens` na suíte reprova qualquer literal hexadecimal
   fora deste `:root`.

   --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; cursor: pointer; }

a { color: var(--azul); }

:focus-visible {
  outline: 2px solid var(--azul-vivo);
  outline-offset: 2px;
  border-radius: var(--raio-peq);
}

/* `display` declarado numa classe vence o `[hidden]` da folha do navegador —
   por isso o atributo precisa ser reforçado aqui, ou `el.hidden = true` não
   esconde nada. */
[hidden] { display: none !important; }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Aviso de demonstração — por BLOCO, não global (C03.3)

   A faixa global de "dados fictícios" foi removida: com autenticação real e
   empresa real no header, ela mentia sobre o que já era verdadeiro e, pior,
   anestesiava o leitor. O aviso agora vive junto do conteúdo que descreve.
   -------------------------------------------------------------------------- */
.aviso-demo {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-peq);
  background: var(--superficie-2);
  font-size: var(--t-mini);
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.aviso-demo b { color: var(--tinta-media); font-weight: 600; }

/* Selo discreto para o cabeçalho de um bloco em demonstração. */
.selo--demo { background: var(--neutro-veu); color: var(--neutro); }

/* --------------------------------------------------------------------------
   4. Shell — mobile primeiro: topo + palco + abas inferiores
   -------------------------------------------------------------------------- */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}

.topo__marca {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--display);
  /* C02.1: a marca é a âncora esquerda do header e estava tímida — sobe um
     degrau na escala. O resto do topo continua na altura de sempre. */
  font-size: var(--t-gr);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--azul);
  white-space: nowrap;
}

/* "360" é parte do nome, não um qualificador: mesma família, mesma cor e
   mesmo tamanho do "Grazi", só um peso abaixo. Antes era "CENTRAL" em
   monoespaçada cinza — ali funcionava como rótulo, aqui empurraria o número
   para fora do nome. */
.topo__marca span {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--azul);
}

/* Canto direito do topo. Container de ações, não só o bloco de empresa: é
   onde Minha conta / Empresa / Sair vão entrar quando houver autenticação. */
.topo__acoes {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  min-width: 0;
}

/* C02.1: no celular a Ajuda é SÓ o ícone, encostada no bloco de empresa —
   a validação visual mostrou que "? Ajuda" com fundo virava um terceiro
   bloco flutuando no centro do header. Compacta, sem fundo em repouso, ela
   lê como parte do canto direito, não como item de navegação. */
.topo__ajuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  /* C03.1: alvo de toque de ~44px (ícone 22 + padding), pedido do teste em
     aparelho real. Discreta pela COR (tinta-média, sem fundo em repouso),
     não pelo tamanho — dedo não acerta discrição de 30px. */
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  border-radius: 999px;
  color: var(--tinta-media);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.topo__ajuda svg { width: 22px; height: 22px; }

.topo__ajuda:hover { background: var(--azul-veu); color: var(--azul); }
.topo__ajuda[aria-current="page"] { color: var(--azul); }

/* O rótulo "Ajuda" só entra onde sobra espaço de verdade: no desktop com
   navegação lateral. Em toda largura de celular/tablet, só o ícone —
   o aria-label continua servindo leitor de tela e o title, o hover. */
.topo__ajuda-rotulo { display: none; font-size: var(--t-peq); font-weight: 500; }

@media (min-width: 60rem) {
  .topo__ajuda { padding: 0.4rem 0.7rem; }
  .topo__ajuda-rotulo { display: inline; }
}

.topo__empresa {
  min-width: 0;
  text-align: right;
  line-height: 1.25;
}

/* Nome longo de loja trunca em vez de empurrar o header para 2 linhas. */
.topo__empresa b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topo__empresa b {
  display: block;
  font-size: var(--t-peq);
  font-weight: 600;
}

.topo__empresa small {
  font-family: var(--dados);
  font-size: var(--t-micro);
  color: var(--tinta-fraca);
}

.palco {
  flex: 1;
  width: 100%;
  max-width: var(--largura-leitura);
  margin: 0 auto;
  padding: 1.25rem 1rem calc(var(--altura-abas) + 5.5rem);
}

/* Na conversa há uma barra a mais no rodapé — o campo de escrever — e sem
   folga extra a última fala fica escondida atrás dela. */
body[data-rota="conversa"] .palco {
  padding-bottom: calc(var(--altura-abas) + 9rem);
}

/* Abas inferiores (mobile) */
.abas {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  /* Cinco áreas (C01.1). Acompanhamentos NÃO entra aqui de propósito: chega
     pelo Início, pela Agenda e pelo detalhe de uma atividade. */
  grid-template-columns: repeat(5, 1fr);
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.aba {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.6rem 0.15rem 0.7rem;
  min-height: var(--altura-abas);
  background: none;
  border: none;
  border-top: 2px solid transparent;
  color: var(--tinta-fraca);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: color 0.15s ease;
}

/* Em telas bem estreitas (360px e abaixo) cinco rótulos ficam apertados. */
@media (min-width: 23.5rem) {
  .aba { font-size: var(--t-micro); }
}

.aba svg { width: 20px; height: 20px; }

.aba[aria-current="page"] {
  color: var(--azul);
  border-top-color: var(--azul);
}

.aba__badge {
  position: absolute;
  transform: translate(0.85rem, -0.7rem);
  min-width: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--brasa);
  color: var(--sobre-marca);
  font-family: var(--dados);
  font-size: 0.625rem;
  line-height: 1.05rem;
  text-align: center;
}

/* Navegação lateral (desktop) — escondida no mobile */
.lateral { display: none; }

/* --------------------------------------------------------------------------
   5. Botão flutuante — a conversa nunca fica a mais de um toque
   -------------------------------------------------------------------------- */
.chamar-grazi {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--altura-abas) + 1rem + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.05rem;
  border: none;
  border-radius: 999px;
  background: var(--azul);
  color: var(--sobre-marca);
  font-size: var(--t-peq);
  font-weight: 600;
  box-shadow: var(--sombra-3);
  transition: background 0.15s ease, transform 0.15s ease;
}

.chamar-grazi:hover { background: var(--azul-vivo); }
.chamar-grazi:active { transform: translateY(1px); }
.chamar-grazi svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   6. Blocos e títulos de seção
   -------------------------------------------------------------------------- */
.secao { margin-top: 2rem; }

.secao__cabeca {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.secao__titulo {
  font-family: var(--display);
  font-size: var(--t-med);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.secao__acao {
  margin-left: auto;
  background: none;
  border: none;
  padding: 0;
  color: var(--azul);
  font-size: var(--t-peq);
  font-weight: 600;
  text-decoration: none;
}

.secao__acao:hover { text-decoration: underline; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
}

/* --------------------------------------------------------------------------
   7. Hero — a leitura do dia. A tese da Central é que a Grazi já olhou a
      loja antes de o gestor abrir o app; por isso o topo é a voz dela, e
      não um número grande.
   -------------------------------------------------------------------------- */
.leitura {
  position: relative;
  overflow: hidden;
  padding: 1.4rem 1.25rem 1.25rem;
  border-radius: var(--raio-gr);
  background: linear-gradient(168deg, var(--marca-hero-1) 0%,
                              var(--marca-hero-2) 62%, var(--marca-hero-3) 100%);
  color: var(--sobre-marca-forte);
}

.leitura::after {
  content: "";
  position: absolute;
  right: -3.5rem;
  top: -3.5rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 2.25rem rgba(255, 255, 255, 0.035);
  pointer-events: none;
}

.leitura__saudacao {
  margin-bottom: 0.7rem;
  font-family: var(--dados);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sobre-marca-suave);
}

.leitura__texto {
  position: relative;
  font-family: var(--display);
  font-size: var(--t-gr);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.leitura__texto b { font-weight: 700; color: var(--sobre-marca); }

.leitura__assinatura {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--dados);
  font-size: var(--t-micro);
  color: var(--sobre-marca-suave);
}

.leitura__selo {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);   /* véu sobre o hero */
  font-family: var(--display);
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--sobre-marca);
}

/* --------------------------------------------------------------------------
   8. SIGNATURE — a trilha Fato → Leitura → Ação
      A régua encoda a natureza de cada degrau: sólida no que foi apurado,
      TRACEJADA no que é conclusão, cheia e em azul no que é ação.
   -------------------------------------------------------------------------- */
.trilha { margin: 0.9rem 0 0; }

.trilha__no {
  position: relative;
  padding: 0 0 0.95rem 1.15rem;
}

.trilha__no:last-child { padding-bottom: 0; }

/* A régua */
.trilha__no::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.45rem;
  bottom: 0;
  border-left-width: 2px;
}

.trilha__no:last-child::before { bottom: 0.35rem; }

/* O ponto de origem de cada degrau */
.trilha__no::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.trilha__no--fato::before    { border-left-style: solid;  border-left-color: var(--linha-forte); }
.trilha__no--fato::after     { background: var(--linha-forte); }

.trilha__no--leitura::before { border-left-style: dashed; border-left-color: var(--linha-forte); }
.trilha__no--leitura::after  { background: var(--superficie); box-shadow: inset 0 0 0 2px var(--linha-forte); }

.trilha__no--acao::before    { border-left-style: solid;  border-left-color: var(--azul); }
.trilha__no--acao::after     { background: var(--azul); }

.trilha__rotulo {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--dados);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.trilha__no--acao .trilha__rotulo { color: var(--azul); }

.trilha__texto {
  font-size: var(--t-peq);
  line-height: 1.5;
  color: var(--tinta-media);
}

/* Fato apurado fora da casa: composto como dado citado, não como voz da Grazi */
.trilha__texto--citado {
  font-family: var(--dados);
  font-size: var(--t-mini);
  line-height: 1.55;
  color: var(--tinta-media);
}

.trilha__no--acao .trilha__texto {
  color: var(--tinta);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   9. Card de oportunidade
   -------------------------------------------------------------------------- */
.achado {
  padding: 1rem 1.05rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
}

.achado + .achado { margin-top: 0.75rem; }

.achado--novo { border-left: 3px solid var(--azul); }

.achado__topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.achado__titulo {
  font-family: var(--display);
  font-size: var(--t-med);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.28;
  text-wrap: balance;
}

.achado__rodape {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.95rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--linha);
}

/* Selos ------------------------------------------------------------------- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.14rem 0.45rem;
  border-radius: var(--raio-peq);
  font-family: var(--dados);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.selo--alta  { background: var(--brasa-veu); color: var(--brasa); }
.selo--media { background: var(--ocre-veu);  color: var(--ocre); }
.selo--baixa { background: var(--neutro-veu); color: var(--neutro); }
.selo--novo  { background: var(--azul-veu); color: var(--azul); }

.meta {
  font-family: var(--dados);
  font-size: var(--t-micro);
  color: var(--tinta-fraca);
  letter-spacing: 0.02em;
}

.achado__topo .meta { margin-left: auto; }

/* Confiança: barra discreta, sem expor escore interno cru */
.confianca {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--dados);
  font-size: var(--t-micro);
  color: var(--tinta-fraca);
}

.confianca__barra {
  width: 2.75rem;
  height: 4px;
  border-radius: 999px;
  background: var(--linha);
  overflow: hidden;
}

/* Confiança é qualidade do achado — significado positivo, não identidade. */
.confianca__nivel {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--verde);
}

/* Botões ------------------------------------------------------------------ */
.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-peq);
  background: var(--superficie);
  color: var(--tinta);
  font-size: var(--t-peq);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.botao:hover { background: var(--superficie-2); border-color: var(--tinta-fraca); }

.botao--principal {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--sobre-marca);
}

.botao--principal:hover { background: var(--azul-vivo); border-color: var(--azul-vivo); }

.botao--ativo {
  background: var(--azul-veu);
  border-color: var(--azul);
  color: var(--azul);
  font-weight: 600;
}

.botao--fantasma { border-color: transparent; background: none; color: var(--azul); }
.botao--fantasma:hover { background: var(--azul-veu); border-color: transparent; }

.achado__rodape .botao:last-child { margin-left: auto; }

/* --------------------------------------------------------------------------
   10. Filtros do Radar
   -------------------------------------------------------------------------- */
.filtros {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding-bottom: 0.35rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.filtro {
  flex: 0 0 auto;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--superficie);
  font-size: var(--t-peq);
  color: var(--tinta-media);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.filtro[aria-pressed="true"] {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--sobre-marca);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   11. Prioridades do dia (Início)
   -------------------------------------------------------------------------- */
.prioridades { display: grid; gap: 0.6rem; }

.prioridade {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 0.95rem;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.prioridade:hover { border-color: var(--linha-forte); transform: translateY(-1px); }

.prioridade__marca {
  flex: 0 0 auto;
  width: 0.4rem;
  align-self: stretch;
  border-radius: 999px;
  background: var(--linha-forte);
}

.prioridade--alta  .prioridade__marca { background: var(--brasa); }
.prioridade--media .prioridade__marca { background: var(--ocre); }

.prioridade__corpo { flex: 1; min-width: 0; }

/* São <span> dentro de um <button> (botão não pode conter <p>): sem `block`
   explícito, título, resumo e origem escorrem para a mesma linha. */
.prioridade__titulo {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
}

.prioridade__resumo {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--t-peq);
  color: var(--tinta-fraca);
  line-height: 1.45;
}

.prioridade__origem {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--dados);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* --------------------------------------------------------------------------
   12. Conversa
   -------------------------------------------------------------------------- */
.conversa {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-bottom: 0.5rem;
}

.fala { max-width: 88%; }

.fala--eu { align-self: flex-end; }

.fala__balao {
  padding: 0.7rem 0.9rem;
  border-radius: var(--raio-gr);
  font-size: var(--t-peq);
  line-height: 1.55;
}

.fala--grazi .fala__balao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-bottom-left-radius: var(--raio-peq);
  box-shadow: var(--sombra-1);
}

.fala--eu .fala__balao {
  background: var(--azul);
  border-bottom-right-radius: var(--raio-peq);
  color: var(--sobre-marca);
}

.fala__autor {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--dados);
  font-size: var(--t-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.fala--eu .fala__autor { text-align: right; }

.fala__balao .trilha { margin-top: 0.75rem; }

.fala--digitando .fala__balao {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.85rem 0.95rem;
}

.ponto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tinta-fraca);
  animation: pulsar 1.2s infinite ease-in-out;
}

.ponto:nth-child(2) { animation-delay: 0.15s; }
.ponto:nth-child(3) { animation-delay: 0.3s; }

@keyframes pulsar {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-2px); }
}

.sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.sugestao {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--superficie);
  font-size: var(--t-peq);
  color: var(--tinta-media);
  text-align: left;
}

.sugestao:hover { background: var(--azul-veu); border-color: var(--azul); color: var(--azul); }

.escrever {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--altura-abas) + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: var(--papel);
  border-top: 1px solid var(--linha);
}

.escrever__campo {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--superficie);
  font: inherit;
  font-size: var(--t-peq);
  color: var(--tinta);
}

.escrever__campo::placeholder { color: var(--tinta-fraca); }

/* Reserva o espaço de anexo no composer. Desabilitado nesta fase — existe
   para que imagem, arquivo e áudio caibam depois sem refazer a barra. */
.escrever__anexo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tinta-fraca);
}

.escrever__anexo:disabled { opacity: 0.45; cursor: not-allowed; }
.escrever__anexo svg { width: 18px; height: 18px; }

.escrever__enviar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border: none;
  border-radius: 50%;
  background: var(--azul);
  color: var(--sobre-marca);
}

.escrever__enviar:hover { background: var(--azul-vivo); }
.escrever__enviar svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   13. Histórico — a ordem cronológica é informação, por isso é uma linha
   -------------------------------------------------------------------------- */
.linha-tempo { position: relative; }

.evento {
  position: relative;
  padding: 0 0 1.5rem 1.6rem;
}

.evento::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.1rem;
  bottom: 0;
  border-left: 1px solid var(--linha-forte);
}

.evento:last-child::before { display: none; }

.evento::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: inset 0 0 0 2px var(--linha-forte);
}

.evento--acao::after { background: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); }

.evento__quando {
  font-family: var(--dados);
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.evento__titulo {
  margin-top: 0.15rem;
  font-size: var(--t-base);
  font-weight: 600;
}

.evento__detalhe {
  margin-top: 0.25rem;
  font-size: var(--t-peq);
  color: var(--tinta-fraca);
  line-height: 1.45;
}

.dia {
  margin: 1.5rem 0 0.9rem;
  font-family: var(--dados);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.dia:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   14. Folha de detalhe (sheet no mobile, diálogo no desktop)
   -------------------------------------------------------------------------- */
/* O sheet acompanha o conteúdo: `max-height` limita, mas nunca estica. Um
   detalhe curto de agenda ocupa quatro dedos de tela, não a tela inteira
   (C01.2 §3). */
.folha {
  width: 100%;
  max-width: none;
  max-height: 88vh;
  margin: auto auto 0;
  padding: 0.55rem 0 0;
  border: none;
  border-radius: 20px 20px 0 0;
  background: var(--superficie);
  color: var(--tinta);
  overflow: hidden;
}

/* Puxador: diz "isto desliza e fecha" sem precisar de texto. */
.folha::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 4px;
  margin: 0 auto 0.3rem;
  border-radius: 999px;
  background: var(--linha-forte);
}

.folha::backdrop { background: var(--veu-modal); }

.folha[open] { animation: subir 0.22s ease-out; }

@keyframes subir {
  from { transform: translateY(2rem); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.folha__cabeca {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem 1.15rem 0.85rem;
  border-bottom: 1px solid var(--linha);
}

.folha__fechar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  /* 40px: fecha o bottom sheet no celular e media 32px. */
  width: 40px; height: 40px;
  margin-left: auto;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tinta-fraca);
}

.folha__fechar:hover { background: var(--papel); color: var(--tinta); }
.folha__fechar svg { width: 16px; height: 16px; }

.folha__corpo {
  padding: 1.1rem 1.15rem 1.5rem;
  overflow-y: auto;
  max-height: calc(88vh - 6rem);
}

/* Sheet curto (detalhe de tarefa): respira sem inflar. */
.folha__corpo > .trilha__texto:first-child { font-size: var(--t-base); }

.fontes { margin-top: 1.25rem; }

.fontes__titulo {
  margin-bottom: 0.5rem;
  font-family: var(--dados);
  font-size: var(--t-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.fonte {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  background: var(--superficie-2);
  font-size: var(--t-peq);
}

.fonte + .fonte { margin-top: 0.4rem; }

.fonte__nome { font-weight: 500; }

.fonte__endereco {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--dados);
  font-size: var(--t-micro);
  color: var(--tinta-fraca);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   15. Vazio e avisos
   -------------------------------------------------------------------------- */
.vazio {
  padding: 2.25rem 1.25rem;
  text-align: center;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  background: var(--superficie-2);
}

.vazio__titulo { font-family: var(--display); font-size: var(--t-med); font-weight: 600; }

.vazio__texto {
  margin: 0.35rem auto 0;
  max-width: 26rem;
  font-size: var(--t-peq);
  color: var(--tinta-fraca);
}

/* Mesma peça, dentro de folhas/diálogos. */
.nota-mock {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-peq);
  background: var(--superficie-2);
  font-size: var(--t-mini);
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.nota-mock b { color: var(--tinta-media); font-weight: 600; }

/* --------------------------------------------------------------------------
   15b. Atalhos do Início — Agenda e Créditos em uma olhada

   Ficam logo abaixo da leitura da Grazi porque respondem às duas perguntas
   operacionais que o gestor faz antes de qualquer outra: "o que a equipe tem
   pra hoje?" e "quanto do meu ciclo eu já usei?". São dois números, não um
   dashboard — o resto está na tela de cada um.
   -------------------------------------------------------------------------- */
.atalhos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1rem;
}

.atalho {
  display: block;
  padding: 0.8rem 0.85rem 0.85rem;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.atalho:hover { border-color: var(--linha-forte); transform: translateY(-1px); }

.atalho__rotulo {
  display: block;
  font-family: var(--dados);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.atalho__numero {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--display);
  font-size: var(--t-gr);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.atalho__nota {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-mini);
  color: var(--tinta-fraca);
}

/* Linha própria: em 390px a frase quebrava no meio e o alerta ficava órfão. */
.atalho__alerta { display: block; color: var(--brasa); font-weight: 600; }

/* Faísca do atalho de créditos — ritmo de uso dos últimos dias.

   Era uma barra de proporção (`usado / incluído`). Uma barra assim precisa de
   um teto, e teto é franquia: afirmava uma política de plano que não existe
   (C01.2 §4). A faísca mostra a mesma coisa útil — houve dias cheios e dias
   parados — sem prometer limite nenhum. */
.faisca {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  margin-top: 0.55rem;
}

.faisca__barra {
  flex: 1;
  max-width: 9px;
  min-width: 2px;
  border-radius: 1px;
  background: var(--azul);
  opacity: 0.35;
}

/* O dia mais recente é o último e recebe o peso cheio. */
.faisca__barra:last-child { opacity: 1; }

/* --------------------------------------------------------------------------
   15c. Alternância e filtros da Agenda
   -------------------------------------------------------------------------- */
.segmentado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 0.85rem;
  padding: 2px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-peq);
  background: var(--superficie-2);
}

.segmento {
  padding: 0.42rem 0.5rem;
  border: none;
  border-radius: 4px;
  background: none;
  font-size: var(--t-peq);
  font-weight: 500;
  color: var(--tinta-fraca);
  transition: background 0.15s ease, color 0.15s ease;
}

.segmento[aria-pressed="true"] {
  background: var(--superficie);
  color: var(--azul);
  font-weight: 600;
  box-shadow: var(--sombra-1);
}

/* --------------------------------------------------------------------------
   15d. Tarefa da Agenda

   A hora fica numa coluna própria, em monoespaçada: uma agenda se lê pela
   coluna de horário, e alinhar dígitos é o que torna a varredura possível.
   A faixa vertical à esquerda carrega o status — é a mesma gramática do
   ponto de atenção no Início.
   -------------------------------------------------------------------------- */
.tarefa {
  display: grid;
  grid-template-columns: auto 0.35rem 1fr;
  gap: 0.7rem;
  align-items: stretch;
  width: 100%;
  padding: 0.8rem 0.9rem;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.tarefa + .tarefa { margin-top: 0.5rem; }
.tarefa:hover { border-color: var(--linha-forte); transform: translateY(-1px); }

.tarefa__hora {
  padding-top: 0.1rem;
  font-family: var(--dados);
  font-size: var(--t-peq);
  font-weight: 500;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}

.tarefa__marca {
  border-radius: 999px;
  background: var(--linha-forte);
}

/* Atrasado grita, em andamento acena, pendente avisa, agendado só marca
   lugar, concluído recua. Cinco estados, cinco pesos visuais diferentes —
   e só dois deles usam cor forte. */
.tarefa--atrasado  .tarefa__marca { background: var(--brasa); }
.tarefa--andamento .tarefa__marca { background: var(--verde); }
.tarefa--pendente  .tarefa__marca { background: var(--ocre); }
.tarefa--agendado  .tarefa__marca { background: var(--azul-veu); }
.tarefa--concluido .tarefa__marca { background: var(--linha); }

.tarefa__corpo { min-width: 0; }

.tarefa__titulo {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
}

.tarefa--concluido .tarefa__titulo { color: var(--tinta-fraca); }

.tarefa__quem {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--t-peq);
  color: var(--tinta-fraca);
}

.tarefa__pe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.selo--atrasado  { background: var(--brasa-veu); color: var(--brasa); }
.selo--andamento { background: var(--verde-veu);  color: var(--verde); }
.selo--pendente  { background: var(--ocre-veu);   color: var(--ocre); }
/* Agendado e concluído são ambos "sem urgência", mas não são a mesma coisa:
   o agendado ainda vai acontecer (véu azul), o concluído já saiu do caminho
   (cinza puro, com o check fazendo o resto do trabalho). */
.selo--agendado  { background: var(--azul-veu);   color: var(--azul); }
.selo--concluido { background: var(--neutro-veu); color: var(--neutro); }

.selo svg { width: 11px; height: 11px; }

/* --------------------------------------------------------------------------
   15e. Créditos

   Sem gradiente escuro e sem número gigante centralizado: o hero escuro é
   exclusivo da voz da Grazi, e emprestá-lo para um saldo tiraria dele o que
   o torna reconhecível.
   -------------------------------------------------------------------------- */
.saldo {
  padding: 1.15rem 1.15rem 1.2rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-gr);
  box-shadow: var(--sombra-2);
}

.saldo__topo {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.saldo__numero {
  font-family: var(--display);
  font-size: var(--t-xxg);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--azul);
}

.saldo__unidade {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--tinta-media);
}

/* A barra de saldo saiu na C01.2: media consumo contra uma franquia que não
   existe. O bloco agora mostra o consumo do período, sem denominador. */

.saldo__legenda {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-family: var(--dados);
  font-size: var(--t-micro);
  color: var(--tinta-fraca);
}

/* Linha de um dia no extrato */
.dia-uso {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.7rem 0.85rem;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  transition: border-color 0.15s ease;
}

.dia-uso + .dia-uso { margin-top: 0.4rem; }
.dia-uso:hover { border-color: var(--linha-forte); }

.dia-uso__data {
  font-family: var(--dados);
  font-size: var(--t-peq);
  color: var(--tinta-media);
}

.dia-uso__barra {
  height: 6px;
  border-radius: 999px;
  background: var(--linha);
  overflow: hidden;
}

.dia-uso__barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--azul-vivo);
}

.dia-uso__valor {
  font-family: var(--dados);
  font-size: var(--t-peq);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dia-uso--zero .dia-uso__valor { color: var(--tinta-fraca); font-weight: 400; }

/* Lançamento dentro da folha do dia */
.lancamento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  width: 100%;
  padding: 0.75rem 0.85rem;
  text-align: left;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  transition: border-color 0.15s ease;
}

.lancamento + .lancamento { margin-top: 0.45rem; }
.lancamento:hover { border-color: var(--linha-forte); }

.lancamento__hora {
  font-family: var(--dados);
  font-size: var(--t-peq);
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

.lancamento__nome {
  display: block;
  font-size: var(--t-peq);
  font-weight: 600;
}

.lancamento__custo {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--dados);
  font-size: var(--t-micro);
  color: var(--azul);
}

.lancamento__ver {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-mini);
  font-weight: 600;
  color: var(--azul);
}

/* Detalhe da interação que originou o consumo */
.interacao__bloco { margin-top: 1rem; }

.interacao__rotulo {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--dados);
  font-size: var(--t-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.interacao__pedido {
  padding: 0.7rem 0.85rem;
  border-radius: var(--raio-peq) var(--raio-peq) var(--raio-peq) 2px;
  background: var(--azul);
  color: var(--sobre-marca);
  font-size: var(--t-peq);
  line-height: 1.5;
}

.interacao__entrega {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  background: var(--superficie-2);
  font-size: var(--t-peq);
  line-height: 1.5;
}

/* Aviso de catálogo — explica a MECÂNICA do consumo.

   Era `.gratuito`, com uma lista do que "não consome crédito". Renomeado na
   C01.1.1 porque o nome afirmava o que ainda não está decidido: o catálogo
   comercial de Créditos Grazi não existe, e nenhuma operação está aprovada
   como isenta nem como tarifada. O bloco agora explica o funcionamento sem
   prometer preço de nada. */
.aviso-catalogo {
  margin-top: 1.5rem;
  padding: 0.95rem 1rem 1.05rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--azul-veu);
}

.aviso-catalogo__titulo {
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--azul);
}

.aviso-catalogo__texto {
  margin-top: 0.5rem;
  font-size: var(--t-peq);
  line-height: 1.55;
  color: var(--tinta-media);
}

/* Voltar de uma página de drill-down (Créditos -> operação).
   Era um botão dentro de um sheet empilhado; virou link de página quando o
   detalhe da operação ganhou endereço próprio (C01.2 §5). */
.voltar-pagina {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  /* Alvo de ~40px sem deslocar o texto: o padding cresce e a margem negativa
     devolve o alinhamento a esquerda da coluna. */
  min-height: 40px;
  padding: 0.5rem 0.6rem;
  margin: -0.5rem 0 0.6rem -0.6rem;
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
}

.voltar-pagina:hover { text-decoration: underline; }
.voltar-pagina svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   15f. Ajuda (C02) — roteiro, cadeias e exemplos copiáveis
   -------------------------------------------------------------------------- */
.ajuda__cabeca { margin-bottom: 1.1rem; }

.ajuda__titulo {
  font-family: var(--display);
  font-size: var(--t-xg);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-wrap: balance;
}

.ajuda__resumo {
  margin: 0.4rem 0 1rem;
  font-size: var(--t-base);
  color: var(--tinta-media);
  line-height: 1.5;
}

.ajuda__cabeca .botao { gap: 0.5rem; padding: 0.6rem 1rem; }

.ajuda__nota {
  margin-top: 0.45rem;
  font-size: var(--t-mini);
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.onde-enviar {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--azul);
  border-radius: var(--raio-peq);
  background: var(--superficie);
  font-size: var(--t-peq);
  line-height: 1.55;
  color: var(--tinta-media);
}

/* ---- Pergunta pronta: o que se copia -------------------------------------
   O texto vai em monoespaçada porque é literal — para ser copiado byte a
   byte, não parafraseado. Mesma lógica do "fato apurado" no Radar: mono
   marca o que não é voz da casa. */
.pergunta {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.55rem;
  padding: 0.65rem 0.7rem 0.65rem 0.85rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-peq);
  background: var(--superficie);
}

.pergunta__texto {
  flex: 1;
  min-width: 0;
  font-family: var(--dados);
  font-size: var(--t-mini);
  line-height: 1.55;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

/* C03.1: 40px de altura minima. E o botao mais tocado da Ajuda — media 30px
   na auditoria, abaixo do que um dedo acerta com confianca. Continua discreto
   pela cor e pelo peso, nao pelo tamanho. */
.copiar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 40px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-peq);
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-size: var(--t-micro);
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.copiar:hover { background: var(--azul-veu); border-color: var(--azul); color: var(--azul); }
.copiar svg { width: 14px; height: 14px; }

.copiar--feito {
  background: var(--verde-veu);
  border-color: var(--verde);
  color: var(--verde);
}

.copiar--falhou {
  background: var(--ocre-veu);
  border-color: var(--ocre);
  color: var(--ocre);
}

/* ---- Exemplo falado: sem botão, porque não se copia o que se diz --------- */
.fala-exemplo {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding: 0.65rem 0.8rem;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-peq);
  background: var(--superficie-2);
}

.fala-exemplo svg {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  margin-top: 0.2rem;
  color: var(--azul);
}

.fala-exemplo__texto {
  font-size: var(--t-peq);
  font-style: italic;
  line-height: 1.5;
  color: var(--tinta-media);
}

/* ---- Roteiro guiado ------------------------------------------------------
   Numerado porque a ordem É informação: cada passo mostra uma capacidade que
   o anterior preparou. Numerar lista sem ordem seria decoração. */
.roteiro { margin-top: 0.9rem; }

.roteiro__passo {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.75rem;
  padding: 0 0 1.15rem;
}

.roteiro__passo:last-child { padding-bottom: 0; }

.roteiro__numero {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--azul-veu);
  color: var(--azul);
  font-family: var(--dados);
  font-size: var(--t-mini);
  font-weight: 600;
}

.roteiro__passo--destaque .roteiro__numero {
  background: var(--azul);
  color: var(--sobre-marca);
}

.roteiro__corpo { min-width: 0; }

.roteiro__titulo {
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
}

.roteiro__demonstra {
  margin-top: 0.2rem;
  font-size: var(--t-peq);
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.roteiro__passo--destaque .roteiro__demonstra { color: var(--tinta-media); }

/* ---- Cadeias -------------------------------------------------------------
   Régua vertical, igual à trilha do Radar. No produto inteiro, régua com
   marcador quer dizer "tem ordem, e cada degrau se apoia no anterior" — que
   é exatamente o que uma sequência de perguntas é. */
.cadeia {
  margin-top: 0.85rem;
  padding: 0.95rem 1rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
}

.cadeia__titulo {
  font-family: var(--display);
  font-size: var(--t-med);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.cadeia__resumo {
  margin-top: 0.2rem;
  font-size: var(--t-peq);
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.cadeia__passos { margin-top: 0.75rem; }

.cadeia__no {
  position: relative;
  padding: 0 0 0.75rem 1.15rem;
}

.cadeia__no:last-child { padding-bottom: 0; }

.cadeia__no::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.4rem;
  bottom: 0;
  border-left: 2px solid var(--linha-forte);
}

.cadeia__no:last-child::before { display: none; }

.cadeia__no::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--azul);
}

.cadeia__ordem {
  display: block;
  font-family: var(--dados);
  font-size: var(--t-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.cadeia__no .pergunta { margin-top: 0.35rem; }

/* ---- Categorias em <details> --------------------------------------------
   Nativo: teclado e leitor de tela funcionam sem uma linha de JS, e fechado
   por padrão o índice inteiro cabe numa tela de celular. */
.categoria {
  margin-top: 0.5rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

/* C03.1: com `flex-wrap`, o selo "Depende do seu sistema" (169px) desce para
   a segunda linha em vez de espremer o nome da categoria — em 320px ele
   reduzia o titulo a 51px e cortava "Financeiro", "Estoque" e "Compras".
   A base de 11rem no corpo e o gatilho: abaixo disso, quebra. */
.categoria__cabeca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  padding: 0.85rem 0.95rem;
  cursor: pointer;
  list-style: none;
}

.categoria__cabeca::-webkit-details-marker { display: none; }
.categoria__cabeca:hover { background: var(--superficie-2); }

.categoria__corpo { flex: 1 1 11rem; min-width: 0; }

.categoria__titulo {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
}

.categoria__resumo {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-peq);
  color: var(--tinta-fraca);
  line-height: 1.45;
}

.categoria__seta {
  flex: 0 0 auto;
  /* Encostada a direita nas duas linhas possiveis do cabecalho. */
  margin-left: auto;
  color: var(--tinta-fraca);
  transition: transform 0.18s ease;
}

.categoria[open] .categoria__seta { transform: rotate(180deg); }
.categoria[open] .categoria__cabeca { border-bottom: 1px solid var(--linha); }

.categoria__conteudo { padding: 0.85rem 0.95rem 1rem; }

.exemplo + .exemplo { margin-top: 0.75rem; }
.exemplo .selo { margin-bottom: 0.1rem; }

.selo--condicional { background: var(--ocre-veu);   color: var(--ocre); }
.selo--recomendado { background: var(--verde-veu);  color: var(--verde); }
.selo--evolucao    { background: var(--neutro-veu); color: var(--neutro); }

/* Pré-requisito: orienta, não bloqueia. Quem não controla estoque no sistema
   precisa saber ANTES de testar — senão a conclusão vai ser que a Grazi
   errou, quando o que faltava era o dado. */
.pre-requisito {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--raio-peq);
  background: var(--ocre-veu);
  font-size: var(--t-peq);
  line-height: 1.5;
  color: var(--tinta-media);
}

.pre-requisito svg {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  margin-top: 0.2rem;
  color: var(--ocre);
}

/* --------------------------------------------------------------------------
   15f-b. "Ir direto para" e grupos de exemplo (C03.3)
   -------------------------------------------------------------------------- */
.ir-para { margin: 0 0 1.1rem; }

.ir-para__rotulo {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--dados);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* Rola na horizontal no celular; a barra some, o gesto fica.
   `-webkit-overflow-scrolling` mantém a inércia no iOS. */
.ir-para__chips {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.ir-para__chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta-media);
  font-size: var(--t-peq);
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ir-para__chip:hover {
  background: var(--azul-veu);
  border-color: var(--azul);
  color: var(--azul);
}

/* Grupos dentro de uma categoria (Estoque: risco de ruptura x saldo) */
.grupo-exemplos + .grupo-exemplos {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linha);
}

.grupo-exemplos__titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--tinta);
}

/* --------------------------------------------------------------------------
   15g. Portão de autenticação (C03)

   Enquanto o estado do portão não é "pronto" (nem "demo"), a navegação
   inteira some: barra, lateral e botão flutuante. Não é estética — rota
   visível atrás de um login é convite a acreditar que existe conteúdo
   acessível. `body[data-auth]` é escrito pelo app a cada desenho.
   -------------------------------------------------------------------------- */
/* O portão tem marca própria, centrada: o header normal some inteiro nos
   três estados — "Grazi 360" duas vezes na mesma tela (canto + centro) era
   exatamente o que a validação real estranhou. */
body[data-auth="login"] .topo,
body[data-auth="carregando"] .topo,
body[data-auth="bloqueado"] .topo,
body[data-auth="login"] .abas,
body[data-auth="login"] .lateral,
body[data-auth="login"] .chamar-grazi,
body[data-auth="login"] .topo__acoes,
body[data-auth="carregando"] .abas,
body[data-auth="carregando"] .lateral,
body[data-auth="carregando"] .chamar-grazi,
body[data-auth="carregando"] .topo__acoes,
body[data-auth="bloqueado"] .abas,
body[data-auth="bloqueado"] .lateral,
body[data-auth="bloqueado"] .chamar-grazi,
body[data-auth="bloqueado"] .topo__acoes {
  display: none !important;
}

.portao {
  max-width: 22rem;
  margin: 8vh auto 0;
  padding: 0 0.5rem;
}

.portao__marca {
  margin-bottom: 1.1rem;
  text-align: center;
  font-family: var(--display);
  font-size: var(--t-xg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--azul);
}

.portao__marca span { font-weight: 500; }

.portao__cartao {
  padding: 1.25rem 1.2rem 1.35rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-gr);
  box-shadow: var(--sombra-2);
}

.portao__cartao--quieto {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.portao__titulo {
  font-family: var(--display);
  font-size: var(--t-gr);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.portao__texto {
  margin-top: 0.35rem;
  font-size: var(--t-peq);
  line-height: 1.55;
  color: var(--tinta-media);
}

.portao__rotulo {
  display: block;
  margin: 0.9rem 0 0.25rem;
  font-size: var(--t-mini);
  font-weight: 600;
  color: var(--tinta-media);
}

.portao__campo {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-peq);
  background: var(--superficie);
  font: inherit;
  font-size: var(--t-base);
  color: var(--tinta);
}

.portao__campo:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 1px; }
.portao__campo:disabled { background: var(--superficie-2); color: var(--tinta-fraca); }

/* Mostrar/ocultar senha (C03.3). O botão fica DENTRO da moldura do campo, e
   o padding à direita do input reserva o espaço dele — sem isso a senha
   passaria por baixo do ícone em telas estreitas. */
.portao__campo-senha { position: relative; }

.portao__campo-senha .portao__campo { padding-right: 2.9rem; }

.portao__ver-senha {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--tinta-fraca);
}

.portao__ver-senha:hover { color: var(--azul); background: var(--azul-veu); }
.portao__ver-senha:disabled { opacity: 0.4; cursor: not-allowed; }
.portao__ver-senha svg { width: 18px; height: 18px; }

.portao__entrar {
  width: 100%;
  justify-content: center;
  margin-top: 1.05rem;
  padding: 0.65rem 1rem;
}

.portao__nota {
  margin-top: 0.9rem;
  font-size: var(--t-mini);
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.portao__erro {
  margin-top: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--raio-peq);
  background: var(--brasa-veu);
  color: var(--brasa);
  font-size: var(--t-peq);
  line-height: 1.45;
}

.portao__aviso {
  margin-top: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--raio-peq);
  background: var(--ocre-veu);
  color: var(--ocre);
  font-size: var(--t-peq);
  line-height: 1.45;
}

.portao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.portao__spinner {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid var(--linha-forte);
  border-top-color: var(--azul);
  animation: girar 0.8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* Sair, no bloco de empresa do header autenticado: pequeno porque logout é
   ação rara — presente, nunca protagonista. */
.topo__sair {
  margin-top: 0.15rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-peq);
  background: var(--superficie);
  color: var(--tinta-fraca);
  font-size: var(--t-micro);
  font-weight: 600;
}

.topo__sair:hover { border-color: var(--brasa); color: var(--brasa); }

/* --------------------------------------------------------------------------
   16. Desktop — a lateral substitui as abas; a coluna de leitura não estica
   -------------------------------------------------------------------------- */
@media (min-width: 60rem) {
  .app {
    display: grid;
    grid-template-columns: 15.5rem 1fr;
    grid-template-rows: auto 1fr;
    min-height: calc(100vh - 1.7rem);
  }

  .topo {
    grid-column: 1 / -1;
    padding: 0.9rem 1.75rem;
  }

  .abas { display: none; }

  .lateral {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.5rem 0.9rem;
    border-right: 1px solid var(--linha);
    background: var(--superficie);
  }

  .lateral__titulo {
    margin: 0 0.65rem 0.7rem;
    font-family: var(--dados);
    font-size: var(--t-micro);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
  }

  .lateral .aba {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.7rem;
    min-height: 0;
    padding: 0.6rem 0.65rem;
    border-top: none;
    border-radius: var(--raio-peq);
    font-size: var(--t-peq);
    font-weight: 500;
  }

  .lateral .aba[aria-current="page"] {
    background: var(--azul-veu);
    color: var(--azul);
    font-weight: 600;
  }

  /* No HTML o badge vem antes do rótulo (no celular ele fica sobre o ícone).
     Na lateral o rótulo vem primeiro, então o badge precisa de `order`. */
  .lateral .aba__badge {
    position: static;
    order: 3;
    transform: none;
    margin-left: auto;
  }

  .palco {
    grid-column: 2;
    padding: 1.75rem 1.75rem 6rem;
  }

  body[data-rota="conversa"] .palco { padding-bottom: 8rem; }

  .chamar-grazi { right: 1.75rem; bottom: 1.75rem; }

  .escrever {
    left: 15.5rem;
    bottom: 0;
    padding: 0.9rem 1.75rem;
  }

  .escrever__campo, .escrever__enviar { max-width: none; }

  .escrever > * { margin-inline: auto; }
  .escrever__campo { max-width: calc(var(--largura-leitura) - 3.1rem); }

  .folha {
    max-width: 34rem;
    margin: auto;
    padding-top: 0;
    border-radius: var(--raio-gr);
  }

  .folha::before { display: none; }

  .leitura { padding: 1.9rem 1.8rem 1.6rem; }
  .leitura__texto { font-size: var(--t-xg); }
}

/* Telas largas: a leitura ganha um pouco de ar, nunca a largura toda */
@media (min-width: 90rem) {
  .palco { padding-left: 3rem; padding-right: 3rem; }
}

/* --------------------------------------------------------------------------
   17. Acessibilidade — movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}