/* ==========================================================================
   Polimento de 23/09 — acabamentos vistos no passeio pelo roteiro de demo.

   Arquivo próprio (a regra do lote: ninguém mexe em 03_componentes nem em
   04_layout) e no fim do manifesto, para vencer na cascata sem !important.
   ========================================================================== */

/* --- O asterisco de obrigatório na linha do rótulo ------------------------

   O padrão `<label class="campo__rotulo">…</label><span class="campo__obrigatorio">*</span>`
   dentro de `.campo` (flex em coluna) punha o "*" SOZINHO na linha de baixo:
   Novo usuário (Nome da pessoa, Perfil, Login, Senha, Repetir senha), Novo
   atendimento (Assunto, Canal, Unidade, Descrição) e as outras telas que usam
   o mesmo par. Os campos que já escrevem o "*" dentro do rótulo (o seletor de
   busca, Pessoas) mostravam "Solicitante*" na mesma linha — é essa a forma.

   O "*" passa para o fim do próprio rótulo e o span irmão sai do desenho. A
   obrigatoriedade continua dita a quem usa leitor de tela pelo `required` do
   controle, que é o que o navegador anuncia. */
.campo > .campo__rotulo:has(+ .campo__obrigatorio)::after {
  content: "*";
  color: var(--sgp-perigo);
  margin-left: 2px;
}
.campo > .campo__rotulo + .campo__obrigatorio { display: none; }

/* --- Submenu: rótulo longo quebra a linha em vez de sumir em "…" -----------

   "WhatsApp · Caixa de entrada" saía "WhatsApp · Caixa de en…" em 1400x900.
   No submenu o rótulo é texto de apoio e pode ocupar duas linhas; o item de
   primeiro nível continua com reticências (é ele que divide espaço com a seta
   e com o ícone). */
.menu__submenu .menu__rotulo {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --- Coluna de Listas: as três abas cabem ---------------------------------

   "Todas · Pessoas · Organizações" não cabia na coluna de 220–300px e a
   terceira aba saía cortada ("Organizaçõ"), com a rolagem horizontal da `.abas`
   escondida. Na coluna, as pílulas quebram para a linha de baixo. */
.lista-pagina__lateral .abas--pilulas {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* --- Ficha do número de WhatsApp: a dica ao lado do título ----------------

   Sem o chip "Instância cliente_N" (só para super-usuário), a linha de baixo
   do título ficava só com o "?" da dica. O "?" sobe para o lado do nome do
   número. */
.ficha-numero__nome {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  flex-wrap: wrap;
}

/* --- Busca do topo no celular: uma dica que cabe ---------------------------

   No celular o campo da busca do topo tem ~110px (divide a barra com o menu,
   o sino e a conta) e a dica "Buscar pessoas, atendimentos, proposições…"
   aparecia cortada em "Busca", em toda tela. O `placeholder` não muda por CSS:
   com o campo vazio, a dica longa fica transparente e a caixa desenha
   "Buscar" no mesmo lugar (a mesma palavra que o aplicativo já usa; com as
   reticências já não caberia nos ~55px de texto que sobram). Ao
   digitar, `:placeholder-shown` deixa de valer e o desenho some. Sem `:has()`
   o navegador fica com a dica de sempre. */
@media (max-width: 640px) {
  @supports selector(:has(*)) {
    .barra-topo__busca .campo-busca__controle::placeholder { color: transparent; }
    .barra-topo__busca .campo-busca:has(> .campo-busca__controle:placeholder-shown)::after {
      content: "Buscar";
      position: absolute;
      top: 50%;
      left: calc(var(--esp-3) * 2 + 18px + 1px);
      right: var(--esp-2);
      transform: translateY(-50%);
      font-size: var(--texto-md);
      color: var(--cor-texto-fraco);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: none;
    }
  }
}