/* Componentes da versão 2 (epic #865, lote B — issue #867).

   Carregada logo depois de v2.css, só para quem tem a marca "visual novo"
   (core/visual.py). Aqui moram as PEÇAS que o relatório de UX achou
   faltando no núcleo — e que, por faltarem, cada módulo inventou a sua
   (25 classes de botão, 17 de pílula, ~30 de "caixa"): pílula, botões
   fantasma/ícone/perigo/carregando, estado vazio, esqueleto, janelinha,
   toast, diálogo de confirmação, seção recolhível, avatar com cor estável.
   Os módulos adotam nos lotes C, D e E, tela a tela; o antigo não muda.

   Todo tamanho de fonte sai da escala (--tipo-N, v2.css) e toda regra de
   estado declara fundo E cor juntos — as duas coisas são conferidas por
   script na suíte (core/lint_escala.py e core/lint_contraste.py). */

/* ---- Ícone ------------------------------------------------------------ */

/* O ícone do sistema ({% icone %}): do tamanho do texto em volta, alinhado
   à linha, na cor do texto. Quem quer outro tamanho dá a classe. */
.icone {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.15em;
}

.icone-pequeno {
  width: 0.85em;
  height: 0.85em;
}

.icone-grande {
  width: 1.5em;
  height: 1.5em;
}

/* ---- Pílula ----------------------------------------------------------- */

/* Informação categórica vira pílula (diretriz de 2026-07-18): tag
   arredondada, fundo suave, texto na cor cheia do tema. A cor vem pelo
   NOME — cinco semânticas (.pilula-info … .pilula-neutro) ou uma
   categórica por `--pc` (.pilula-cat, com --pc: var(--cat-coral)) — nunca
   por hex escrito na tela. */
.pilula {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.1rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  background: var(--sem-neutro-suave);
  color: var(--cor-texto);
  font-size: var(--tipo-2);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.pilula-info { background: var(--sem-info-suave); color: var(--cor-texto); }
.pilula-sucesso { background: var(--sem-sucesso-suave); color: var(--cor-texto); }
.pilula-aviso { background: var(--sem-aviso-suave); color: var(--cor-texto); }
.pilula-erro { background: var(--sem-erro-suave); color: var(--cor-texto); }
.pilula-neutro { background: var(--sem-neutro-suave); color: var(--cor-texto-suave); }

.pilula-cat {
  background: color-mix(in srgb, var(--pc, var(--cat-ardosia)) 18%, transparent);
  color: var(--cor-texto);
}

/* O ponto de cor antes do texto (status: "● Novo"). A cor do ponto é a
   cheia da família; o texto continua o do tema. */
.pilula-ponto::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pc, var(--sem-neutro));
  flex: none;
}

.pilula-info.pilula-ponto::before { background: var(--sem-info); }
.pilula-sucesso.pilula-ponto::before { background: var(--sem-sucesso); }
.pilula-aviso.pilula-ponto::before { background: var(--sem-aviso); }
.pilula-erro.pilula-ponto::before { background: var(--sem-erro); }

/* Pílula CLICÁVEL (2.3 do relatório): o seletor continua existindo por
   baixo, só a roupagem muda. Borda tracejada no hover e no foco, e a
   setinha que diz "isto abre". Como é <button>, desfaz a regra global de
   botão por inteiro — fundo, borda e cor, nos dois estados. */
button.pilula,
.pilula-clicavel {
  cursor: pointer;
  font-family: inherit;
  padding: 0.1rem 0.6rem;
  border: 1px dashed transparent;
  background: var(--sem-neutro-suave);
  color: var(--cor-texto);
}

button.pilula:hover,
button.pilula:focus-visible,
.pilula-clicavel:hover,
.pilula-clicavel:focus-visible,
.pilula-clicavel[aria-expanded="true"] {
  border-color: var(--cor-borda-campo);
  background: var(--sem-neutro-suave);
  color: var(--cor-texto);
}

.pilula-clicavel::after {
  content: '⌄';
  margin-left: 0.1rem;
  color: var(--cor-texto-suave);
  font-size: var(--tipo-2);
  line-height: 0.6;
}

/* Pílula vazia e resolvível ("sem carteira", "atribuir"): texto apagado e
   sublinhado pontilhado — valor vazio clicável no próprio texto (diretriz
   "rótulo e valor se distinguem de relance"). */
.pilula-vazia,
.valor-vazio {
  background: transparent;
  color: var(--cor-texto-suave);
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
  font-weight: 400;
}

/* ---- Botões ------------------------------------------------------------ */

/* A hierarquia de ações do cabeçalho de página: UMA primária (.botao, do
   base.css), as secundárias em texto (.botao-fantasma) e as destrutivas no
   menu ⋯. Toda classe abaixo declara fundo, borda E cor nos dois estados,
   porque herda só metade da regra global de <button>. */
.botao-fantasma {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: transparent;
  color: var(--cor-texto);
  font-size: var(--tipo-2);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.botao-fantasma:hover,
.botao-fantasma:focus-visible {
  border-color: var(--cor-borda-campo);
  background: var(--cor-hover-linha);
  color: var(--cor-texto);
}

/* Fantasma em cor de perigo: "Cancelar contrato" dentro do menu, o
   "Excluir" de uma linha. */
.botao-fantasma.perigo {
  color: var(--cor-perigo);
}

.botao-fantasma.perigo:hover,
.botao-fantasma.perigo:focus-visible {
  border-color: var(--cor-perigo);
  background: var(--cor-perigo-suave);
  color: var(--cor-perigo);
}

/* Botão de ÍCONE: quadrado, discreto, só o desenho. É a forma da ação
   destrutiva de linha (excluir, remover) e das utilidades (copiar,
   editar): nasce esmaecido e acende no hover e no foco. */
.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: var(--tipo-3);
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  text-decoration: none;
}

.botao-icone .icone {
  width: 1rem;
  height: 1rem;
}

.botao-icone:hover,
.botao-icone:focus-visible {
  border-color: transparent;
  background: var(--cor-hover-linha);
  color: var(--cor-texto);
  opacity: 1;
}

.botao-icone.perigo:hover,
.botao-icone.perigo:focus-visible {
  border-color: transparent;
  background: var(--cor-perigo-suave);
  color: var(--cor-perigo);
  opacity: 1;
}

/* Ações de linha (diretriz de 2026-07-18): dentro de uma linha de tabela
   ou de lista, os ícones ficam quase invisíveis até o hover na LINHA — e
   sempre alcançáveis por teclado (focus-within os revela). */
tr .botao-icone,
.linha .botao-icone {
  opacity: 0.25;
}

tr:hover .botao-icone,
tr:focus-within .botao-icone,
.linha:hover .botao-icone,
.linha:focus-within .botao-icone {
  opacity: 0.7;
}

tr .botao-icone:hover,
tr .botao-icone:focus-visible,
.linha .botao-icone:hover,
.linha .botao-icone:focus-visible {
  opacity: 1;
}

/* Botão de PERIGO cheio: o "Excluir" do diálogo de confirmação, a única
   ação destrutiva que fica em destaque — porque ali ler é parte da
   decisão. Branco sobre o vermelho do tema, nos dois estados. */
.botao-perigo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--cor-perigo);
  border-radius: var(--raio);
  background: var(--cor-perigo);
  color: #FFFFFF;
  font-size: var(--tipo-2);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

.botao-perigo:hover,
.botao-perigo:focus-visible {
  border-color: var(--cor-perigo);
  background: color-mix(in srgb, var(--cor-perigo) 85%, black);
  color: #FFFFFF;
}

/* Estado CARREGANDO (3.8): depois do clique o botão trava e ganha o
   giradinho — hoje dá para clicar duas vezes em Enviar. O acoes.js põe a
   classe ao enviar o formulário; qualquer script pode pôr e tirar. A cor
   do giradinho é a do texto do botão, seja ele qual for. */
.carregando {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

.carregando::before {
  content: '';
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.45em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1em;
  animation: gira 0.8s linear infinite;
}

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

/* ---- Estado vazio ------------------------------------------------------ */

/* Lista sem nada (diretriz "uma frase por tela"): ícone apagado, UMA
   frase e a ação. O texto é da cor suave; a ação é um .botao ou um link. */
.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-8) var(--espaco-4);
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: var(--tipo-2);
}

.estado-vazio .icone {
  width: 2rem;
  height: 2rem;
  opacity: 0.5;
}

.estado-vazio p {
  margin: 0;
  color: var(--cor-texto-suave);
}

.estado-vazio-acoes {
  display: flex;
  gap: var(--espaco-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--espaco-1);
}

/* ---- Esqueleto --------------------------------------------------------- */

/* Enquanto carrega: blocos cinzas que cintilam no lugar da tela em branco
   (3.6). Nada se move se o sistema operacional pedir menos movimento. */
.esqueleto {
  display: block;
  height: 0.8em;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--cor-secao) 25%,
    color-mix(in srgb, var(--cor-secao) 60%, var(--cor-fundo)) 50%,
    var(--cor-secao) 75%);
  background-size: 200% 100%;
}

.esqueleto-linha {
  margin: 0.45em 0;
}

.esqueleto-bloco {
  height: 4rem;
  border-radius: var(--raio);
}

.esqueleto-curto { width: 40%; }
.esqueleto-medio { width: 70%; }

@media (prefers-reduced-motion: no-preference) {
  .esqueleto {
    animation: cintila 1.6s linear infinite;
  }
}

@keyframes cintila {
  to { background-position: -200% 0; }
}

/* ---- Janelinha --------------------------------------------------------- */

/* A base de todo popover ancorado (diretriz "seleções pontuais em
   janelinhas"): quem posiciona é o script de cada peça; aqui vai a roupa.
   Interface FLUTUANTE: declara as próprias cores — fundo, texto, texto
   suave e campo — para não herdar a região que cobre. */
.janelinha {
  box-sizing: border-box;
  min-width: 12rem;
  max-width: min(90vw, 24rem);
  max-height: min(60vh, 24rem);
  overflow-y: auto;
  padding: var(--espaco-1);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  box-shadow: var(--sombra-flutuante);
  font-size: var(--tipo-2);
  z-index: 60;
}

.janelinha-busca {
  width: 100%;
  margin: 0 0 var(--espaco-1);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio);
  background: var(--cor-campo);
  color: var(--cor-texto);
  font-size: var(--tipo-2);
  font-family: inherit;
}

.janelinha-item {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--cor-texto);
  font-size: var(--tipo-2);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.janelinha-item:hover,
.janelinha-item:focus-visible,
.janelinha-item[aria-selected="true"] {
  background: var(--cor-hover-linha);
  color: var(--cor-texto);
}

.janelinha-item.selecionado,
.janelinha-item.selecionado:hover {
  background: color-mix(in srgb, var(--cor-acento) 18%, transparent);
  color: var(--cor-texto);
}

.janelinha-item .suave,
.janelinha-contagem {
  margin-left: auto;
  color: var(--cor-texto-suave);
  font-size: var(--tipo-1);
}

.janelinha-separador {
  height: 1px;
  margin: var(--espaco-1) 0;
  background: var(--cor-borda);
}

.janelinha-vazia {
  padding: 0.5rem 0.6rem;
  color: var(--cor-texto-suave);
  font-size: var(--tipo-2);
}

/* ---- Toast ------------------------------------------------------------- */

/* Aviso que aparece no canto e vai embora (2.5): sucesso e informação
   somem em cinco segundos; erro e atenção ficam até serem fechados, porque
   quem errou precisa ler. "Desfazer" entra como ação quando a operação for
   reversível. Interface flutuante: cores próprias; a borda esquerda diz a
   família. A pilha é um <div class="toasts" aria-live="polite"> no fim do
   <body> (core/base.html); quem cria e remove é acoes.js. */
.toasts {
  position: fixed;
  right: var(--espaco-4);
  bottom: var(--espaco-4);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  max-width: min(92vw, 24rem);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: 0.65rem 0.75rem 0.65rem 0.9rem;
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--sem-info);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  box-shadow: var(--sombra-flutuante);
  font-size: var(--tipo-2);
  line-height: 1.45;
  pointer-events: auto;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.toast-sucesso { border-left-color: var(--sem-sucesso); }
.toast-erro { border-left-color: var(--sem-erro); }
.toast-aviso { border-left-color: var(--sem-aviso); }
.toast-info { border-left-color: var(--sem-info); }

.toast.saindo {
  opacity: 0;
  transform: translateY(0.5rem);
}

.toast-texto {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast-texto a {
  color: var(--cor-acento);
}

.toast-acao {
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cor-acento);
  font-size: var(--tipo-2);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}

.toast-acao:hover,
.toast-acao:focus-visible {
  background: transparent;
  color: var(--cor-acento);
  text-decoration: underline;
}

.toast-fechar {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.15rem -0.25rem -0.15rem 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: var(--tipo-2);
  line-height: 1;
  cursor: pointer;
}

.toast-fechar:hover,
.toast-fechar:focus-visible {
  background: var(--cor-hover-linha);
  color: var(--cor-texto);
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* ---- Diálogo de confirmação -------------------------------------------- */

/* No lugar do confirm() do navegador (2.5, decisão 2 do dono): um <dialog>
   do sistema, com o nome do que vai ser apagado no título, o detalhe em
   uma frase e o botão de perigo em cor de erro. Esc e "Cancelar" fecham
   sem fazer nada; o foco nasce no Cancelar. É roupagem: a proteção real
   continua sendo o POST com CSRF e a checagem no servidor. */
dialog.dialogo {
  width: min(92vw, 26rem);
  padding: var(--espaco-6);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  box-shadow: var(--sombra-flutuante);
  font-size: var(--tipo-3);
}

dialog.dialogo::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.dialogo-titulo {
  margin: 0 0 var(--espaco-2);
  font-size: var(--tipo-4);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.dialogo-texto {
  margin: 0 0 var(--espaco-4);
  color: var(--cor-texto-suave);
  font-size: var(--tipo-2);
}

.dialogo-acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--espaco-2);
  flex-wrap: wrap;
}

/* ---- Seção recolhível -------------------------------------------------- */

/* Bloco que abre e fecha (a ficha do contrato, as seções do painel do
   cartão): <details class="secao"> com o título no <summary>, a seta à
   esquerda, a contagem apagada ao lado e divisória fina embaixo — respiro
   em vez de caixas. */
details.secao {
  border-bottom: 1px solid var(--cor-borda);
  padding: var(--espaco-2) 0;
}

details.secao > summary {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-2) 0;
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: var(--cor-texto);
  font-size: var(--tipo-4);
  font-weight: 600;
}

details.secao > summary::-webkit-details-marker {
  display: none;
}

details.secao > summary::before {
  content: '›';
  display: inline-block;
  width: 1em;
  color: var(--cor-texto-suave);
  font-weight: 400;
  transition: transform 0.15s ease;
}

details.secao[open] > summary::before {
  transform: rotate(90deg);
}

details.secao > summary:hover {
  background: transparent;
  color: var(--cor-texto);
}

details.secao > summary .secao-contagem {
  color: var(--cor-texto-suave);
  font-size: var(--tipo-2);
  font-weight: 400;
}

details.secao > summary .secao-acoes {
  margin-left: auto;
  display: flex;
  gap: var(--espaco-1);
}

details.secao > .secao-corpo {
  padding: var(--espaco-2) 0 var(--espaco-3) 1.3rem;
}

/* ---- Avatar ------------------------------------------------------------ */

/* Iniciais num círculo com cor ESTÁVEL por pessoa (3.8): a matiz vem do
   nome (filtro `matiz_de`, core/templatetags/icones.py) e a mesma pessoa
   tem a mesma cor em toda tela. Branco sobre um tom que lê nos dois temas. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: hsl(var(--matiz, 212), 55%, 42%);
  color: #FFFFFF;
  font-size: var(--tipo-1);
  font-weight: 700;
  line-height: 1;
  flex: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.avatar-pequeno {
  width: 1.35rem;
  height: 1.35rem;
  font-size: var(--tipo-1);
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Pessoa = avatar + nome na mesma linha. */
.pessoa {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  vertical-align: middle;
}

/* ---- Formulário (3.7) -------------------------------------------------- */

/* Largura de leitura para formulários de verdade e o campo INLINE, que
   parece texto até o hover ou o foco (diretriz "edição inline, não
   formulário rígido"). */
.formulario-estreito {
  max-width: 35rem;
}

.campo-inline {
  padding: 0.35rem 0.5rem;
  margin-left: -0.5rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: transparent;
  color: var(--cor-texto);
  font: inherit;
}

.campo-inline:hover,
.campo-inline:focus {
  border-color: var(--cor-borda-campo);
  background: var(--cor-campo);
  color: var(--cor-texto);
}

/* ---- Tabela do núcleo: as peças novas do lote B ------------------------- */

/* Contagem "N de M" e alça ⠿ do cabeçalho (comportamento em tabela.js,
   base em base.css): aqui só a roupa da versão 2. */
.tabela-contagem {
  font-size: var(--tipo-1);
}

.tabela-alca .icone {
  width: 0.85rem;
  height: 0.85rem;
}

.tabela-filtro-valores label {
  font-size: var(--tipo-2);
}

.tabela-filtro-valores label:hover {
  background: var(--cor-hover-linha);
  color: var(--cor-texto);
}

/* --- Pílula que embrulha um <select> e escolha múltipla ------------------
   (core/js/pilulas.js — nasceu no Otters no lote C e veio para o núcleo no
   lote D do epic #865, quando o CLM passou a usar as mesmas peças; os
   nomes com prefixo `ot-` ficaram por compatibilidade.) */

/* O <select> embrulhado sai de vista mas continua no formulário: é ele que
   o servidor recebe. top/left pin it to the corner of its containing
   block: without them it keeps its static spot (deep inside a panel that
   scrolls on its own) and, with <body> as containing block, stretches
   the page past the window — the ticket screen then scrolled as a whole
   and left an empty strip at the bottom (issue #903). */
select[data-pilula][data-pilula-pronta],
.ot-pilulas-multiplas-origem[data-pilula-pronta] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.ot-pilula-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
}

/* A janelinha FLUTUA no <body>: posição fixa calculada a partir da pílula,
   acima de tudo — fora de coluna que rola e acima do balão ⓘ (z 60). */
.janelinha.ot-janelinha-flutuante { position: fixed; z-index: 1000; }
.janelinha.ot-janelinha-flutuante[hidden] { display: none; }
.ot-pilula-wrap .janelinha-item.ot-item-vazio { color: var(--cor-texto-suave); }

.ot-pilula-rotulo-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16rem;
}

/* Escolha múltipla: as escolhidas como pílulas removíveis + "Adicionar". */
.ot-pilulas-multiplas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.ot-pilulas-multiplas .ot-pill-remover {
  margin-left: 0.1rem;
  padding: 0 0.3rem;
  border: 0;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--cor-texto-suave);
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}

.ot-pilulas-multiplas .ot-pill-remover:hover,
.ot-pilulas-multiplas .ot-pill-remover:focus-visible {
  background: var(--cor-perigo-suave);
  color: var(--cor-perigo);
}

/* Avatar da janelinha de pessoa: matiz estável da pessoa (calculada no
   servidor) e texto branco sobre um tom escuro o bastante nos dois temas. */
.ot-pessoa-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex: none;
  background: hsl(var(--matiz, 212), 55%, 42%);
  color: #FFFFFF;
  font-size: var(--tipo-1);
  font-weight: 700;
}

.pilula .ot-pessoa-avatar {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: -0.35rem;
}

/* ---- Dropdown marcável (epic #924) --------------------------------------
   A janelinha de um grupo de caixas: cada linha é um rótulo com a caixa
   espelho; marcar não fecha. O gatilho é a pílula de sempre. */
.ot-dropdown-janelinha { min-width: 14rem; }
.ot-dropdown-item { cursor: pointer; }
.ot-dropdown-item input { margin: 0; flex: 0 0 auto; }