/* ====================================================================
   A TIPOGRAFIA DA MARCA (manual, seção 04): Poppins.
   Bold para títulos, Medium/Regular para corpo, Light para complemento.

   Hospedada aqui, não linkada do Google: a tela não faz requisição a
   terceiro para se desenhar, funciona sem internet externa — o PWA depende
   disso — e não muda sozinha quando a CDN troca de versão. Só o subconjunto
   latino, 8 KB por peso: devanagari não serve a um produto em português e
   triplicaria o download.

   `swap` de propósito: o texto aparece na hora com a fonte do sistema e
   troca quando a Poppins chega. O contrário (`block`) deixa a tela MUDA por
   até três segundos numa conexão ruim, e ninguém espera olhando.

   Poppins — SIL Open Font License 1.1 (permite redistribuição). */
@font-face { font-family: Poppins; font-style: normal; font-weight: 300;
  font-display: swap; src: url("/devui/poppins-300.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/devui/poppins-400.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/devui/poppins-500.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/devui/poppins-700.woff2") format("woff2"); }

/* ==========================================================================
   A folha COMPARTILHADA dos miniapps do People Lab.

   Por que este arquivo existe
   ---------------------------
   O painel das Simulações de Mandato é um `index.html` de 7.273 linhas com
   todo o CSS inline. Enfiar People AI e People Finder ali dentro faria
   exatamente o monólito que a especificação (§54) manda evitar: "o núcleo
   deve permanecer pequeno e estável; cada novo experimento entra como
   módulo".

   Então cada miniapp tem o seu HTML, e o que é comum mora aqui.

   O que este arquivo NÃO faz, de propósito: mexer no `index.html`. A
   especificação pede migração GRADUAL dos componentes comuns (§31, fase 9),
   e reescrever sete mil linhas para "unificar o CSS" seria o big-bang
   rewrite que ela proíbe na mesma frase. O painel antigo continua com o CSS
   dele; as telas novas nascem já compartilhando.

   Os tokens abaixo são cópia fiel dos que o painel já usa — mesma escala de
   cinza, mesmo azul do manual da marca People Oriented. Divergir aqui faria
   dois produtos com a mesma logo e cores diferentes, que é pior que não
   compartilhar nada.
   ========================================================================== */

:root {
  /* marca — o azul da People Oriented */
  --brand-25:#f0f6ff; --brand-50:#e3eeff; --brand-100:#c9e0ff;
  --brand-300:#4DC3FF; --brand-400:#3f9bff; --brand-500:#1677FF;
  --brand-600:#0f63d6; --brand-700:#0c4fae;

  --gray-25:#fcfcfd; --gray-50:#f9fafb; --gray-100:#f2f4f7;
  --gray-200:#e4e7ec; --gray-300:#d0d5dd; --gray-400:#98a2b3;
  --gray-500:#6B7280;  /* CINZA do manual (seção 03) */ --gray-600:#475467; --gray-700:#344054;
  --gray-800:#1d2939; --gray-900:#101828; --gray-950:#0D1321;  /* AZUL MARINHO do manual (seção 03) */

  --success-50:#ecfdf3; --success-500:#12b76a; --success-600:#039855;
  --error-50:#fef3f2;   --error-500:#f04438;   --error-600:#d92d20;
  --warning-50:#fffaeb; --warning-500:#f79009; --warning-600:#dc6803;

  --sh-xs: 0 1px 2px 0 rgba(16,24,40,.05);
  --sh-sm: 0 1px 3px 0 rgba(16,24,40,.1), 0 1px 2px 0 rgba(16,24,40,.06);
  --sh-md: 0 4px 8px -2px rgba(16,24,40,.1), 0 2px 4px -2px rgba(16,24,40,.06);
  --sh-lg: 0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
  --ring: 0 0 0 4px rgba(22,119,255,.15);

  /* papéis semânticos: é por estes nomes que o resto se refere às cores,
     para trocar o tema não exigir tocar em cada regra */
  --bg: var(--gray-50);
  --surface: #ffffff;
  --surface-2: var(--gray-50);
  --ink: var(--gray-800);
  --ink-forte: var(--gray-900);
  --mut: var(--gray-500);
  --line: var(--gray-200);
  --line-suave: var(--gray-100);
  --acc: var(--brand-500);
  --acc-hover: var(--brand-600);
  /* O AZUL DE FUNDO CHEIO é mais escuro que o azul de texto e de borda, e não
     é capricho: `#1677FF` com texto branco dá 4,10:1, abaixo do mínimo de
     4,5. Isso atingia TODO botão de ação do produto — enviar, pesquisar,
     revelar contato, baixar planilha. Um token separado conserta o botão sem
     escurecer link e borda, que passam no contraste como estão. */
  --acc-solido: var(--brand-600);          /* #0f63d6 sobre branco: 5,56:1 */
  --acc-solido-ink: #ffffff;
  /* O azul do texto quando o FUNDO é claro e o texto é fino: `.aba.on` e o
     "lab" da logo davam 3,9 e 4,1 sobre o cinza da página. */
  --acc-texto: var(--brand-600);
  --ok: var(--success-600);
  --warn: var(--warning-600);
  --err: var(--error-600);

  /* A ESCALA DE CANTO, calibrada contra a referência que o dono mandou (um
     tema de shadcn/Tailwind com `--radius: 1.3rem`). Lá é um número só, e o
     framework deriva os menores a partir dele; aqui a derivação é explícita
     porque não temos o framework.

     Era tudo 10px ou 8px solto, que é o canto de painel administrativo. Mais
     redondo é a diferença visual mais barata entre "ferramenta interna" e
     "produto" — e é o que a pessoa já vê no ChatGPT e no WhatsApp o dia
     inteiro. O que NÃO se copia é 1,3rem em botão: 21px numa altura de 40px
     vira pílula, e pílula é botão de rede social, não de formulário. */
  --raio-p: 8px;       /* aviso, selo retangular, item de navegação */
  --raio: 12px;        /* botão, campo, o que a mão toca */
  --raio-g: 20px;      /* cartão, modal, cartão de miniapp */
  --lateral-w: 260px;
}

/* `color-scheme` — UMA linha, e ela conserta o defeito que o dono já achou no
   celular: o `<select>` do admin abrindo a lista BRANCA dentro do app escuro.
   O tema escuro daqui é classe NOSSA (`.escuro`), e o navegador não a conhece;
   sem esta declaração ele desenha tudo que é dele — lista de `select`, barra
   de rolagem, seletor de data, cursor de texto, fundo de autopreenchimento —
   no esquema claro. É o que a referência resolve com os tokens `--popover`, e
   que aqui não dá para resolver com token nenhum: a lista do `select` é
   pintada pelo sistema, fora do alcance do CSS da página. */
:root { color-scheme: light; }
:root.escuro, :root.auto-escuro { color-scheme: dark; }

/* Duas classes e não uma: `escuro` é escolha explícita da pessoa e vence
   sempre; `auto-escuro` só entra quando o sistema pede e ninguém escolheu.
   Mesmo contrato do painel antigo — quem alterna num app encontra o outro
   já no tema certo, porque a preferência mora no mesmo lugar. */
:root.escuro, :root.auto-escuro {
  /* O AZUL MARINHO DO MANUAL (seção 03), e não um azul escuro próximo. Era
     `#0b1629`, escolhido a olho antes de o manual existir — a diferença é
     pequena na tela e some na captura, mas é a cor que o manual nomeia, e é
     ela que a logo de fundo escuro foi desenhada para encontrar.

     Pelo TOKEN e não pelo valor: `--gray-950` já guardava esse degrau da
     escala e não era usado por ninguém. Duas cópias do mesmo azul divergem
     na primeira vez que alguém corrigir uma só — e um token que ninguém usa
     é o lugar perfeito para uma divergir sem aparecer. */
  --bg: var(--gray-950);
  --surface: #111c31;
  --surface-2: #0e1728;
  --ink: var(--gray-200);
  --ink-forte: #ffffff;
  --mut: var(--gray-400);
  --line: #1e2b45;
  --line-suave: #16223a;
  --acc: var(--brand-400);
  --acc-hover: var(--brand-300);
  /* No escuro a conta inverte: `#3f9bff` com texto BRANCO dava 2,86:1 — o
     pior contraste do produto inteiro, no botão que a pessoa mais aperta.
     Escurecer o azul num fundo escuro some com o botão; o que resolve é
     manter o azul claro e trocar a tinta por escura (6,33:1). */
  --acc-solido: var(--brand-400);
  --acc-solido-ink: #0b1629;
  --acc-texto: var(--brand-300);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  /* Poppins primeiro; a pilha do sistema fica como rede, para o texto nunca
     sumir se um arquivo de fonte faltar. */
  font: 15px/1.55 Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--acc); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mut { color: var(--mut); }
.small { font-size: 13px; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ a casca */
/* `dvh` e nao `vh`: no celular o `100vh` conta a faixa que a barra de
   endereco do navegador ocupa, entao a pagina nasce mais alta que a tela e
   sobra uma rolagem que nao leva a lugar nenhum. `vh` fica de reserva para
   quem nao conhece `dvh`. */
.casca { display: flex; min-height: 100vh; min-height: 100dvh; }

/* A navegação no pé da barra, quando a barra é da tela e não do cockpit.
   Separada por uma linha para não se confundir com o conteúdo acima — no
   People AI, o que está acima é a lista de conversas. */
.nav-rodape { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }

.lateral {
  width: var(--lateral-w); flex: 0 0 var(--lateral-w);
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 4px;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px;
  text-decoration: none; color: inherit; border-radius: var(--raio-p); }
.marca:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.nav-apps { display: flex; flex-direction: column; }
/* O miolo da barra (no People AI, a lista de conversas) e o item de
   Administracao. Moravam em `style=` dentro do `comum.js`, o que os tornava
   imunes a media query — e foi por isso que sobreviveram a fita horizontal do
   celular como uma coluna de 95px com o botao azul pela metade fora da tela. */
.lateral-extra { margin-top: 8px; }
.lateral-extra.com-lista {
  flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 14px; }
.nav-admin { margin-top: auto; }
/* A MARCA, do arquivo oficial — não mais desenhada em código.
   As duas versões que o manual define: arte escura para fundo claro, arte
   clara para fundo escuro. A troca é por classe de tema e não por
   `prefers-color-scheme`, porque quem escolhe o tema aqui é a pessoa, e o
   sistema é só o padrão quando ela não escolheu.
   `contain` preserva a proporção: esticar a logo é "não distorcer" da lista
   de usos incorretos do manual. */
.marca .marca-img {
  flex: 0 0 auto; display: block;
  width: 152px; height: 49px;
  background: url("/devui/marca-clara.png") left center / contain no-repeat;
}
:root.escuro .marca .marca-img, :root.auto-escuro .marca .marca-img {
  background-image: url("/devui/marca-escura.png");
}

.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: var(--raio-p); background: transparent;
  color: var(--gray-600); font: inherit; text-align: left; cursor: pointer;
  text-decoration: none;
}
.nav-item:hover { background: var(--gray-100); }
.nav-item.on { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
:root.escuro .nav-item, :root.auto-escuro .nav-item { color: var(--gray-400); }
:root.escuro .nav-item:hover, :root.auto-escuro .nav-item:hover { background: rgba(255,255,255,.05); }
:root.escuro .nav-item.on, :root.auto-escuro .nav-item.on {
  background: rgba(22,119,255,.15); color: var(--brand-300); }
.nav-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
              color: var(--mut); padding: 16px 12px 6px; }

/* `min-height: 0` nos DOIS: e o elo que faltava na corrente. Um filho flex
   nao encolhe abaixo do proprio conteudo sem isso (`min-height: auto` e o
   padrao), entao bastava um elo sem a declaracao para a barra de escrever do
   People AI descer para fora da tela. Ja foi consertado no `.ai`, depois no
   `.ai-conversa`, e voltava aqui: a corrente e `.casca > .principal >
   .conteudo > .ai > .ai-conversa > .ai-fluxo`, e vale para a corrente
   inteira. */
.principal { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.topo {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.topo h1 { font-size: 17px; margin: 0; color: var(--ink-forte); }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.conteudo { flex: 1; padding: 24px; min-width: 0; min-height: 0; }

/* --------------------------------------------------------- componentes */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--raio); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit;
  cursor: pointer;
  /* 44px e nao 40: era 40-43px em TODO botao do produto, abaixo do minimo de
     toque. Num telefone o custo de errar o alvo e apertar o botao de baixo. */
  min-height: 44px;
}
.botao:hover { background: var(--surface-2); }
.botao.primario { background: var(--acc-solido); border-color: var(--acc-solido);
  color: var(--acc-solido-ink); }
.botao.primario:hover { filter: brightness(1.08); }
.botao.fantasma { border-color: transparent; background: transparent; color: var(--mut); }
.botao:disabled { cursor: not-allowed; background: var(--surface-2);
  border-color: var(--line); color: var(--mut); opacity: 1; }
.botao.primario:disabled { background: var(--surface-2); border-color: var(--line);
  color: var(--mut); }
.botao:focus-visible, .app-card:focus-visible, .conv-item:focus-visible,
.zona:focus-visible, .modo:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px; box-shadow: var(--ring);
}

.campo {
  width: 100%; padding: 10px 12px; border-radius: var(--raio);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit;
}
.campo:focus { outline: none; border-color: var(--acc); box-shadow: var(--ring); }

/* A caixa de selecao nasce com 13x13 do navegador. No Finder e ela que decide
   QUEM e cobrado, e no Admin quem enxerga o que — 13px de alvo para uma
   decisao dessas e convite a erro de dedo. 24px e o minimo da WCAG 2.2. */
input[type="checkbox"], input[type="radio"] {
  width: 24px; height: 24px; accent-color: var(--acc-solido); margin: 0;
}

.cartao {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio-g); padding: 18px;
}

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--gray-100); color: var(--gray-600);
}
/* `success-700`/`warning-700` e nao os `-600`: verde sobre verde dava 3,54:1
   e ambar sobre ambar 3,34:1. O selo diz se a coisa CUSTA dinheiro; ilegivel
   ele deixa "revelar contato custa 1 credito" com a mesma cara de "pesquisar
   e de graca". */
.selo.ativo { background: var(--success-50); color: #027a48; }
.selo.beta  { background: var(--brand-50);   color: var(--brand-700); }
.selo.teste { background: var(--warning-50); color: #b54708; }
/* A regra do escuro vinha DEPOIS e com especificidade maior (0,3,0 contra
   0,2,0), entao engolia as tres variantes: no tema escuro os tres selos
   ficavam com o mesmo cinza. Cada variante precisa do seu par escuro. */
:root.escuro .selo, :root.auto-escuro .selo {
  background: rgba(255,255,255,.08); color: var(--gray-300); }
:root.escuro .selo.ativo, :root.auto-escuro .selo.ativo {
  background: rgba(18,183,106,.16); color: #6ce9a6; }
:root.escuro .selo.beta, :root.auto-escuro .selo.beta {
  background: rgba(22,119,255,.16); color: var(--brand-300); }
:root.escuro .selo.teste, :root.auto-escuro .selo.teste {
  background: rgba(247,144,9,.16); color: #fec84b; }

/* ------------------------------------------------- a grade de miniapps */
.apps { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); }
.app-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio-g); padding: 20px; cursor: pointer;
  text-decoration: none; color: inherit; font: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.app-card:hover { border-color: var(--acc); box-shadow: var(--sh-md); transform: translateY(-2px); }
.app-card .icone { font-size: 26px; line-height: 1; }
.app-card .nome { font-weight: 600; font-size: 16px; color: var(--ink-forte); }
.app-card .desc { color: var(--mut); font-size: 13px; }
.app-card .rodape { margin-top: auto; padding-top: 10px; }

/* ----------------------------------------------------- estados de tela */
/* Toda tela relevante precisa de vazio, carregando e erro (§43 da spec).
   Sem isto, tela sem dado fica em branco e a pessoa não sabe se quebrou ou
   se ainda não tem nada — foi o que aconteceu com o painel de conectores. */
.vazio, .erro-bloco {
  text-align: center; padding: 48px 24px; color: var(--mut);
  border: 1px dashed var(--line); border-radius: var(--raio-g);
}
.erro-bloco { color: var(--err); border-color: var(--error-500); }
.carregando { display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--line); border-top-color: var(--acc);
  border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--raio-p); font-size: 13px;
  /* `--ink` e nao `--gray-800`: o cru nao e remapeado no tema escuro, e
     texto escuro sobre o ambar escuro some. O ambar continua sendo o
     sinal (fundo + borda); o texto precisa ser legivel nos dois temas. */
  background: var(--warning-50); color: var(--ink);
  border: 1px solid var(--warning-500);
}
:root.escuro .aviso, :root.auto-escuro .aviso { background: rgba(247,144,9,.12); }

/* --------------------------------------------------------- responsivo */
/* Desktop-first, como a especificação pede (§3) — mas o dono usa celular, e
   uma barra lateral fixa de 260px num telefone come metade da tela. */
@media (max-width: 820px) {
  /* A BARRA NO CELULAR — duas faixas, nao uma pilha.

     Faixa 1: logo, os apps (rolando de lado se nao couberem) e Administracao.
     Faixa 2, so no People AI: "+ Nova conversa" e as conversas, rolando de
     lado tambem.

     Antes era uma pilha de 186 a 212px — um quarto da tela do telefone gasto
     em navegacao antes de o conteudo comecar —, porque `.lateral` virava
     `row` mas `.nav-apps` continuava `column` la de cima. A primeira correcao
     trocou isso por `flex-wrap: wrap` na barra inteira, e ai os proprios
     links passaram a quebrar linha: 200px. Quem precisa encolher e a lista de
     apps (`flex: 1 1 0` + rolagem propria), nao a barra. */
  .casca { flex-direction: column; }
  .lateral {
    width: auto; flex: none; flex-direction: row; align-items: center;
    flex-wrap: wrap; gap: 8px; overflow: visible; padding: 10px 12px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .lateral > * { flex: 0 0 auto; }
  .nav-apps {
    flex-direction: row; flex-wrap: nowrap;
    flex: 1 1 0; min-width: 0; overflow-x: auto;
    /* Fita que rola sem dizer que rola e fita truncada: o item de
       Administracao terminava fora da tela e nada na tela indicava que havia
       mais. O esmaecimento na borda direita e o sinal. */
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }
  /* A lista de conversas ganha FAIXA PROPRIA (`flex: 1 0 100%`). Espremida na
     mesma faixa dos apps, ela empurrava o "+ Nova conversa" para x=662 numa
     tela de 390: alcancavel rolando, invisivel na pratica, e e o botao mais
     usado da tela. */
  .lateral-extra.com-lista {
    order: 2; flex: 1 0 100%; display: flex; flex-direction: row;
    align-items: center; margin-top: 6px; min-width: 0; gap: 6px;
    overflow-x: auto;
  }
  /* `margin-top: auto` nao empurra nada numa faixa horizontal. */
  .nav-admin { order: 1; }
  .nav-rodape, .nav-admin { margin-top: 0; padding-top: 0; border-top: 0; }
  /* Os 88px da logo escrita sao o lugar mais caro da tela, e repetem o nome
     do produto a dois centimetros do titulo da pagina. Fica a marca grafica;
     o texto sai. Mesma conta para o rotulo de Administracao: a engrenagem
     sozinha libera 100px para os nomes dos apps. */
  .marca { padding: 0 4px 0 0; }
  /* SÓ O SÍMBOLO, recortado da MESMA imagem — não um terceiro arquivo.
     `background-size: auto 100%` mostra a logo em altura cheia e a largura
     de 34px corta no fim do símbolo (ele ocupa 21% do desenho, medido nas
     calhas transparentes do arquivo original). Um arquivo separado só para o
     celular seria mais um lugar para alguém esquecer de atualizar no dia em
     que a marca mudar — e o manual trata o símbolo isolado como uso
     legítimo, então recortar não o adultera. */
  .marca .marca-img { width: 34px; background-size: auto 100%; }
  .nav-admin .rot { display: none; }
  .nav-titulo { display: none; }
  .nav-item { width: auto; white-space: nowrap; }
  .conteudo, .topo { padding: 16px; }
  /* `1fr` e nao a faixa de 260-340px: no telefone o cartao travava em 340px
     numa coluna de 358, deixando uma calha orfa de 18px a direita. */
  .apps { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- o modal
   Usado antes de qualquer gasto. Escurece o resto da tela de proposito: a
   decisao de comprar nao divide atencao com a lista atras dela. */
.modal-fundo {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(16,24,40,.45); display: grid; place-items: center; padding: 20px;
}
.modal {
  background: var(--surface); border-radius: var(--raio-g); padding: 22px 24px;
  max-width: 460px; width: 100%; box-shadow: var(--sh-lg);
}
.modal h3 { margin: 0 0 10px; font-size: 17px; color: var(--ink-forte); }
.modal-corpo { font-size: 14px; color: var(--ink); line-height: 1.5; }
.modal-corpo b { color: var(--ink-forte); }
.modal-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
/* `#b54708` e nao `#dc6803`: 5,43:1 no lugar de 3,49:1. E o unico botao do
   produto que gasta dinheiro que nao volta — se algum tem de ser legivel a
   plena luz do sol, e este. */
.botao.perigo { background: #b54708; border-color: #b54708; color: #fff; }
.botao.perigo:hover { filter: brightness(.94); }

/* Texto que so o leitor de tela le -- rotulo de coluna sem cabecalho
   visivel, nome de botao que e so icone. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}