/* Operação › Contatos no desenho da SAG v2 (item 4.1).
 *
 * Folha própria, como a da Visão geral: o desenho desta tela não entra na folha de todas.
 * As medidas vêm de `docs/referencias/sag-v2/estilos/contacts-v2.css.txt`. Toda cor tem a
 * palavra ao lado — a tag de origem escreve a origem, a de etapa escreve a etapa. */

.co-tela {
  color: var(--sag-ink, #17201e);
  display: grid;
  /* A COLUNA NÃO CRESCE COM O RECHEIO: sem isto, os filtros esticavam a tela inteira e o
   * último cartão e os botões saíam da tela no notebook (05/11). */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

/* O "+" do botão principal da tela, sem mudar o texto que a Visão geral procura. */
body:has(.co-tela) .gg-abas-acoes .btn.principal::before { content: "+ "; }

/* --------------------------------------------------------- o topo da v2 (item 4.4) */

.co-apresentacao {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.co-apresentacao h2 {
  margin: 2px 0 4px;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -.4px;
}
.co-apresentacao p {
  margin: 0;
  color: var(--sag-muted, #66736f);
  font-size: 11.5px;
}
.co-sobretitulo {
  color: var(--sag-green, #15866d);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
}

/* -------------------------------------- números + ações na mesma reta (tarefa 16) */

.co-cartoes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
/* AS ABAS E AS AÇÕES NA MESMA RETA (16/10): a linha de baixo é da faixa inteira. */
.co-abas-e-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--sag-line, #e4e9e7);
}
.co-abas-e-acoes .co-abas { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
/* OS CARTOES COMPACTOS: nome em cima, frase embaixo (corta com reticências), número à
 * direita. CRESCEM ATÉ OS BOTÕES (Henrique, 16/10: "dá para aumentar os cards, tem bastante
 * espaço até chegar no Importar") — antes paravam na metade da linha e cortavam a frase. */
.co-cartao {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(21, 46, 39, .025);
  transition: transform .18s, box-shadow .18s, border-color .18s;
  min-width: 0;
}
.co-cartao:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(21, 46, 39, .06);
}
.co-cartao.co-ativo { border-color: var(--sag-green, #15866d); }
.co-cartao-titulo {
  grid-column: 1;
  color: var(--sag-muted, #66736f);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-cartao strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -.5px;
  line-height: 1;
}
.co-cartao small {
  grid-column: 1;
  color: var(--sag-muted, #66736f);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-cartao.co-atencao strong { color: #a66b19; }
/* A OPÇÃO A COMPACTA (Henrique, 03/11/2026): faixa de cor no topo e o ícone num quadrado claro
 * da cor, na mesma altura baixa — o padrão dos cartões dos Números do WhatsApp. */
.co-cartao[class*="co-cor-"] { position: relative; overflow: hidden; padding: 11px 10px 8px; }
.co-cartao[class*="co-cor-"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--co-cor);
}
.co-cartao[class*="co-cor-"] .co-cartao-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #4b5a55;
}
.co-cartao-titulo > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.co-selo {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--co-claro);
  color: var(--co-cor);
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-selo svg { width: 14px; height: 14px; }
.co-cartao[class*="co-cor-"] small { padding-left: 32px; font-size: 11px; }
.co-cor-verde { --co-cor: #1d8a6c; --co-claro: #e6f5ef; }
.co-cor-ambar { --co-cor: #d08a1a; --co-claro: #fff3dd; }
.co-cor-roxo { --co-cor: #7a5cc4; --co-claro: #efeafa; }
.co-cor-cinza { --co-cor: #6d7a76; --co-claro: #eef1f0; }
:root[data-tema="escuro"] .co-cartao[class*="co-cor-"] .co-cartao-titulo { color: var(--ink, #e6e9f4); }
:root[data-tema="escuro"] .co-selo { background: color-mix(in srgb, var(--co-cor) 22%, transparent); }

.co-linha-acoes {
  position: relative;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 auto;
}
.co-linha-acoes-lista {
  display: flex;
  align-items: center;
  gap: 6px;
}
.co-mais-acoes { display: none; }

/* ----------------------------------------------------------------------- as abas */

.co-abas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  border-bottom: 1px solid var(--sag-line, #e4e9e7);
}
.co-aba {
  padding: 9px 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--sag-muted, #66736f);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.co-aba.co-ativa {
  color: var(--sag-ink, #17201e);
  border-bottom-color: var(--sag-green, #15866d);
}
.co-aba.co-segmento { font-style: italic; }

/* -------------------------------------------------------------------- os filtros */

.co-filtros {
  display: grid;
  /* Cabe o que couber em cada linha; o resto desce, e nada sai da tela. */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 14px;
}
.co-filtro {
  display: grid;
  gap: 5px;
  color: var(--sag-muted, #66736f);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.co-filtro input,
.co-filtro select {
  /* altura: `.barra-de-controles` (V.1); aqui só o preenchimento da célula da grade */
  width: 100%;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 9px;
  background: #fff;
  color: var(--sag-ink, #17201e);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.co-filtro-busca { grid-column: span 2; }
.co-filtros-botoes { display: flex; gap: 6px; }

/* ---------------------------------------------------------------- a barra de lote */

.co-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #eef8f4;
  border: 1px solid #cfe9df;
  border-radius: 12px;
  font-size: 12.5px;
}
.co-lote[hidden] { display: none; }
.co-lote-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.co-lote-pergunta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.co-lote-pergunta[hidden] { display: none; }
/* A PERGUNTA DO LOTE NUMA LINHA SO (Henrique, 15/10: "acabamentos ruins, falta de
 * alinhamento, a frase poderia estar numa unica linha — em todas as opcoes"): o rotulo nao
 * quebra, e caixinha e botoes tem a mesma altura, borda, canto e letra do `.btn.p`. */
.co-lote-pergunta label {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--ink, #1c2030);
  font-size: 12.5px;
  font-weight: 600;
}
.co-lote-pergunta input,
.co-lote-pergunta select {
  /* SEM A MARGEM DE CIMA que todo campo de formulário ganha no launivo.css (Henrique, 16/10:
   * "ficou numa linha só, mas tem o problema de alinhamento") — era ela que descia a caixa. */
  margin: 0;
  height: var(--alto-p, 32px);
  min-width: 200px;
  max-width: 320px;
  padding: 0 12px;
  border: 1px solid var(--line-forte, #c9cfdc);
  border-radius: var(--raio-botao, 10px);
  background: var(--surface, #fff);
  color: var(--ink, #1c2030);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
}
.co-lote > b { white-space: nowrap; font-size: 12.5px; }
.co-lote .btn.p { height: var(--alto-p, 32px); }

/* ---------------------------------------------------------------------- a tabela */

/* O QUADRO DA TABELA leva a paginação dentro dele, como na v2. */
.co-quadro {
  background: #fff;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 14px;
  overflow: hidden;
}
.co-quadro .co-paginas {
  padding: 10px 14px;
  border-top: 1px solid var(--sag-line, #e4e9e7);
}
.co-tabela {
  --co-colunas: minmax(220px, 2.2fr) 1.1fr .9fr 1.3fr minmax(96px, 1.1fr) 1fr 100px 100px 110px 90px;
  background: #fff;
  overflow-x: auto;
  font-size: 10.5px;
}
.co-tabela.co-com-selecao {
  --co-colunas: 34px minmax(220px, 2.2fr) 1.1fr .9fr 1.3fr minmax(96px, 1.1fr) 1fr 100px 100px 110px 90px;
}
.co-cabeca,
.co-linha {
  display: grid;
  grid-template-columns: var(--co-colunas);
  align-items: center;
  gap: 10px;
  min-width: 1180px;
  padding: 0 14px;
}
.co-cabeca {
  min-height: 34px;
  background: #fafbfb;
  border-bottom: 1px solid var(--sag-line, #e4e9e7);
  color: var(--sag-muted, #66736f);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.co-linha {
  min-height: 58px;
  border-bottom: 1px solid #f0f3f2;
}
.co-linha:last-child { border-bottom: 0; }
.co-clicavel .co-linha { cursor: pointer; }
.co-clicavel .co-linha:hover { background: #f7faf9; }
.co-marca { display: flex; justify-content: center; }
.co-quem {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.co-quem > span:last-child { display: grid; min-width: 0; }
.co-quem b,
.co-quem small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-quem small { color: var(--sag-muted, #66736f); font-size: 9.5px; }
.co-celula {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.co-valor { font-weight: 700; }
.co-vazio { color: #a4aeab; }

/* A INICIAL DO RESPONSÁVEL num círculo, com o nome dele ao lado. */
.co-dono {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.co-dono i {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e2f5eb;
  color: #167352;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
}

/* A INICIAL usa a paleta do Atendimento (`.inicial.cor-N`), num tamanho da lista. */
.inicial.co-inicial {
  width: 35px;
  height: 35px;
  border-radius: 11px;
  font-size: 13px;
}
.inicial.co-inicial.co-grande {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 18px;
}

/* ------------------------------------------------------------------------ as tags */

.co-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-neutra, .co-mais, .co-origem-outra, .co-etapa-outra { background: #f0f3f2; color: #64726e; }
.co-ok, .co-verde { background: #e2f5eb; color: #167352; }
.co-sem-dono { background: #fff3df; color: #a66b19; }

.co-origem-instagram { background: #fbeaf2; color: #a63370; }
.co-origem-whatsapp { background: #e5f5ef; color: #14715b; }
.co-origem-site { background: #eaf0ff; color: #3d5fa8; }
.co-origem-indicacao { background: #fff2dc; color: #a86d17; }
.co-origem-meta { background: #ecedff; color: #5358a8; }

.co-etapa-novo { background: #f0f3f2; color: #64726e; }
.co-etapa-atendimento { background: #eeeaff; color: #6653a6; }
.co-etapa-qualificado { background: #e8f2ff; color: #376da8; }
.co-etapa-proposta { background: #fff2dc; color: #a66a15; }
.co-etapa-ganho { background: #e2f5eb; color: #167352; }
.co-etapa-perdido { background: #ffebea; color: #ad4b47; }

/* --------------------------------------------------------------- vazio e páginas */

.co-vazio-grande {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 40px 20px;
  background: #fff;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 14px;
  text-align: center;
}
.co-vazio-grande p { margin: 0 0 6px; color: var(--sag-muted, #66736f); }
.co-paginas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--sag-muted, #66736f);
  font-size: 11px;
}
.co-paginas-botoes {
  display: flex;
  align-items: center;
  gap: 8px;
}
.co-paginas-botoes b { color: var(--sag-ink, #17201e); }
/* "MOSTRAR" NA MESMA LINHA E NO MESMO DESENHO DO "PROXIMA ›" (Henrique, 15/10: "o 2 esta
 * desalinhado"): mesma altura, mesma borda, mesmo canto e mesma letra do botao `.btn.p`. */
.co-mostrar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--alto-p, 32px);
  color: var(--muted, #626a7d);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}
.co-mostrar select {
  margin: 0;              /* a margem de cima do campo de formulário descia o "Mostrar" */
  width: auto;
  height: var(--alto-p, 32px);
  padding: 0 28px 0 12px;
  border: 1px solid var(--line-forte, #c9cfdc);
  border-radius: var(--raio-botao, 10px);
  background: var(--surface, #fff);
  color: var(--ink, #1c2030);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}
.co-paginas-botoes .btn { vertical-align: middle; }

/* ------------------------------------------- a ficha em duas colunas (item 4.4) */

.gaveta:has(.co-perfil) {
  width: min(720px, 100vw);
  border-radius: 16px 0 0 16px;
}
.gaveta:has(.co-perfil) .gv-corpo,
.gaveta:has(.co-janela-novo) .gv-corpo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  align-content: start;
}
.gaveta:has(.co-perfil) .gv-corpo > :is(.secao, .recado, .faixa-erro, .cabecalho, .marca, p.dica),
.gaveta:has(.co-perfil) .gv-corpo > .campo:has(textarea),
.gaveta:has(.co-janela-novo) .gv-corpo > :is(.secao, .recado, .faixa-erro, .cabecalho) {
  grid-column: 1 / -1;
}
.campo.cabecalho { display: grid; gap: 10px; }
/* O CARTÃO DO PERFIL ganha a moldura da v2. */
.campo.cabecalho:has(.co-perfil) {
  padding: 14px;
  background: #f7faf9;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 14px;
}

/* -------------------------------- "Novo contato" na GAVETA, à direita (600 px de largura) */
/* DE VOLTA À GAVETA (Henrique, 16/10: "agora eu me acostumei com elas" — todas as outras
 * abrem do lado). Fica a largura de 600 px e as duas colunas do Cadastro rápido. */
.gaveta:has(.co-janela-novo) {
  width: min(600px, 100vw);
}
.co-janela-novo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #eef8f4;
  border: 1px solid #cfe9df;
  border-radius: 12px;
}
.co-janela-novo b {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--sag-green, #15866d);
  color: #fff;
  font-size: 12px;
}
.co-janela-novo span { display: grid; gap: 2px; }
.co-janela-novo small { color: var(--sag-muted, #66736f); font-size: 11px; }
.co-perfil {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
}
.co-perfil > span { display: grid; min-width: 0; }
.co-perfil b { font-size: 15px; }
.co-perfil small { color: var(--sag-muted, #66736f); font-size: 11px; }
.co-perfil-acoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* ------------------------------------------------------------------ telas menores */

/* NOTEBOOK: três cartões por linha, para o nome e a frase aparecerem por inteiro. As abas cabem
 * numa linha só ("Tags" descia sozinha) e as colunas cabem sem rolar ("Criado" ficava escondida). */
@media (max-width: 1500px) {
  .co-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .co-abas { column-gap: 12px; }
  .co-tabela {
    --co-colunas: minmax(180px, 2.2fr) 1.1fr .9fr 1.3fr minmax(96px, 1.1fr) 1fr 70px 78px 96px 70px;
  }
  .co-tabela.co-com-selecao {
    --co-colunas: 34px minmax(180px, 2.2fr) 1.1fr .9fr 1.3fr minmax(96px, 1.1fr) 1fr 70px 78px 96px 70px;
  }
  .co-cabeca,
  .co-linha { min-width: 960px; gap: 8px; padding: 0 12px; }
}
@media (max-width: 1100px) {
  .co-abas-e-acoes { flex-direction: column; align-items: stretch; }
  .co-linha-acoes { justify-content: flex-end; margin-left: 0; padding-bottom: 8px; }
  .co-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-filtro-busca { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .co-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-filtros { grid-template-columns: 1fr; }
  .co-mais-acoes { display: inline-flex; }
  .co-linha-acoes-lista {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 180px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--sag-line, #e4e9e7);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(21, 46, 39, .12);
  }
  .co-linha-acoes-lista.co-aberta { display: flex; }
  .co-linha-acoes-lista .btn { width: 100%; justify-content: flex-start; }
  /* NO CELULAR, a janela e a ficha ocupam a tela inteira, numa coluna só. */
  .gaveta:has(.co-janela-novo),
  .gaveta:has(.co-perfil) {
    width: 100vw;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .gaveta:has(.co-perfil) .gv-corpo,
  .gaveta:has(.co-janela-novo) .gv-corpo { grid-template-columns: 1fr; }
}

/* ===================================================== a aba Tags (Nuvem 13, 23/10/2026)
 *
 * A mesma linha das abas e os mesmos cartões compactos dos Contatos; a tabela é própria
 * (cinco colunas). Toda cor tem a palavra: o selo escreve a tag, a coluna Cor escreve a cor.
 * Letra a partir de 11,5 px (o "pronto" das telas), e o tema escuro pela régua `:root`. */

:root {
  --tg-fundo: #fff;
  --tg-cabeca: #fafbfb;
  --tg-linha: #f0f3f2;
  --tg-uso: #f0f3f2;
  --tg-uso-texto: #34413d;
}
:root[data-tema="escuro"] {
  --tg-fundo: var(--surface, #1b1e2e);
  --tg-cabeca: var(--soft, #202334);
  --tg-linha: var(--line, #2c3047);
  --tg-uso: var(--soft, #202334);
  --tg-uso-texto: var(--ink, #e6e9f4);
}

/* UM VERDE POR TELA: na aba Tags, o verde é "+ Nova tag" — o "Novo contato" do topo sai. */
body:has(.co-tela-tags) .gg-abas-acoes .btn.principal { display: none; }

/* A TINTA DA ABA vem da régua do tema: a `--sag-ink` da moldura é fixa e some no escuro. */
.co-tela-tags { color: var(--ink); }
.tg-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.co-tela-tags .co-cartao { background: var(--tg-fundo); }
.co-tela-tags .co-cartao-titulo { font-size: 12px; }
.co-tela-tags .co-cartao small { font-size: 11.5px; }
.co-tela-tags .co-cartao strong { font-size: 24px; }
.tg-barra { display: flex; align-items: flex-end; gap: 10px; }
.tg-barra .co-filtro-busca { flex: 0 1 360px; }

.tg-quadro { background: var(--tg-fundo); }
/* A busca esconde a tabela e mostra o "sem resultado" — o display das caixas venceria o hidden. */
.tg-quadro [hidden] { display: none; }
.tg-tabela {
  --tg-colunas: minmax(200px, 1.6fr) 120px 130px minmax(220px, 2fr);
  overflow-x: auto;
  font-size: 13px;
}
.tg-tabela.tg-com-acoes {
  --tg-colunas: minmax(200px, 1.6fr) 120px 130px minmax(220px, 2fr) 230px;
}
.tg-cabeca,
.tg-linha {
  display: grid;
  grid-template-columns: var(--tg-colunas);
  align-items: center;
  gap: 12px;
  min-width: 860px;
  padding: 0 16px;
}
.tg-tabela:not(.tg-com-acoes) .tg-cabeca,
.tg-tabela:not(.tg-com-acoes) .tg-linha { min-width: 640px; }
.tg-cabeca {
  min-height: 36px;
  background: var(--tg-cabeca);
  border-bottom: 1px solid var(--sag-line, #e4e9e7);
  color: var(--sag-muted, #66736f);
  font-size: 11.5px;
  font-weight: 700;
}
.tg-linha {
  min-height: 56px;
  border-bottom: 1px solid var(--tg-linha);
}
.tg-linha:last-child { border-bottom: 0; }
.tg-linha[hidden] { display: none; }
.tg-nome { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.tg-nome em.selo-de-tag { display: block; font-size: 12.5px; max-width: 100%; }
.tg-nota { color: var(--sag-muted, #66736f); font-size: 11.5px; }
.tg-cor { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.tg-bolinha { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tg-contatos,
.tg-uso {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--tg-uso);
  color: var(--tg-uso-texto);
  font: 600 12px Inter, Manrope, system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.tg-contatos:hover,
.tg-uso:hover { background: var(--sag-green-soft, #eaf6f2); color: var(--sag-green, #15866d); }
.tg-usos { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* APAGAR EM CADA LINHA SEM VIRAR CARNAVAL: o vermelho é só a palavra; o fundo vermelho fica
 * para a confirmação, que é onde a decisão acontece. */
.tg-acoes .btn.tg-apagar { background: transparent; color: var(--ruim, #c4525e); }
.tg-acoes .btn.tg-apagar:hover { background: var(--ruim-soft, #fbe9e7); }
.co-tela-tags .co-vazio { font-size: 12px; }
.co-tela-tags .co-paginas { font-size: 12px; }

@media (max-width: 640px) {
  /* NO CELULAR os três cartões ficam lado a lado, só com o título e o número. */
  .tg-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .co-tela-tags .co-cartao { grid-template-columns: 1fr; row-gap: 4px; }
  .co-tela-tags .co-cartao small { display: none; }
  .co-tela-tags .co-cartao-titulo { white-space: normal; }
  .co-tela-tags .co-cartao strong { grid-column: 1; grid-row: auto; }
  /* NO CELULAR, cada tag vira um cartão: o selo em cima, o resto embaixo, sem rolar de lado. */
  .tg-cabeca { display: none; }
  .tg-cabeca,
  .tg-linha,
  .tg-tabela:not(.tg-com-acoes) .tg-linha { min-width: 0; }
  .tg-linha {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 12px 14px;
  }
  .tg-linha > .tg-usos,
  .tg-linha > span:last-child:not(.tg-usos) { grid-column: 1 / -1; }
  .tg-acoes { justify-content: flex-start; }
}